diff --git a/src/components/CreateBankEntityForm.vue b/src/components/CreateBankEntityForm.vue
index 2d098beb0..4acc7b749 100644
--- a/src/components/CreateBankEntityForm.vue
+++ b/src/components/CreateBankEntityForm.vue
@@ -3,7 +3,7 @@ import { reactive, ref, onMounted, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FormModelPopup from './FormModelPopup.vue';
@@ -78,7 +78,7 @@ onMounted(async () => {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('country')"
                         v-model="data.countryFk"
                         :options="countriesOptions"
diff --git a/src/components/CreateManualInvoiceForm.vue b/src/components/CreateManualInvoiceForm.vue
index f03afbf35..8ac3552ad 100644
--- a/src/components/CreateManualInvoiceForm.vue
+++ b/src/components/CreateManualInvoiceForm.vue
@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 import VnInputDate from './common/VnInputDate.vue';
@@ -73,7 +73,7 @@ const onDataSaved = async (formData, requestResponse) => {
             </span>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Ticket')"
                         :options="ticketsOptions"
                         hide-selected
@@ -92,13 +92,13 @@ const onDataSaved = async (formData, requestResponse) => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </div>
                 <span class="row items-center" style="max-width: max-content">{{
                     t('Or')
                 }}</span>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Client')"
                         :options="clientsOptions"
                         hide-selected
@@ -114,7 +114,7 @@ const onDataSaved = async (formData, requestResponse) => {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Serial')"
                         :options="invoiceOutSerialsOptions"
                         hide-selected
@@ -125,7 +125,7 @@ const onDataSaved = async (formData, requestResponse) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Area')"
                         :options="taxAreasOptions"
                         hide-selected
diff --git a/src/components/CreateNewCityForm.vue b/src/components/CreateNewCityForm.vue
index 7326ea7a5..a78312d08 100644
--- a/src/components/CreateNewCityForm.vue
+++ b/src/components/CreateNewCityForm.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
@@ -48,7 +48,7 @@ const onDataSaved = (dataSaved) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Province')"
                         :options="provincesOptions"
                         hide-selected
diff --git a/src/components/CreateNewPostcodeForm.vue b/src/components/CreateNewPostcodeForm.vue
index 02e84849c..a44363a7c 100644
--- a/src/components/CreateNewPostcodeForm.vue
+++ b/src/components/CreateNewPostcodeForm.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CreateNewCityForm from './CreateNewCityForm.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
@@ -138,7 +138,7 @@ const onProvinceCreated = async ({ name }, formData) => {
                     </VnSelectDialog>
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Country')"
                         :options="countriesOptions"
                         hide-selected
diff --git a/src/components/CreateNewProvinceForm.vue b/src/components/CreateNewProvinceForm.vue
index b972db2c9..d38ff94df 100644
--- a/src/components/CreateNewProvinceForm.vue
+++ b/src/components/CreateNewProvinceForm.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
@@ -48,7 +48,7 @@ const onDataSaved = (dataSaved) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Autonomy')"
                         :options="autonomiesOptions"
                         hide-selected
diff --git a/src/components/CreateThermographForm.vue b/src/components/CreateThermographForm.vue
index d4511a0e7..60c531529 100644
--- a/src/components/CreateThermographForm.vue
+++ b/src/components/CreateThermographForm.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
@@ -64,7 +64,7 @@ const onDataSaved = (dataSaved) => {
                 </div>
 
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Model')"
                         :options="thermographsModels"
                         hide-selected
@@ -78,7 +78,7 @@ const onDataSaved = (dataSaved) => {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-xl">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Warehouse')"
                         :options="warehousesOptions"
                         hide-selected
@@ -89,7 +89,7 @@ const onDataSaved = (dataSaved) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Temperature')"
                         :options="temperaturesOptions"
                         hide-selected
diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index fb3ac10c3..de4724e55 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -124,11 +124,16 @@ async function onSubmit() {
         });
     }
     isLoading.value = true;
-    await saveChanges();
+    await saveChanges($props.saveFn ? formData.value : null);
 }
 
 async function saveChanges(data) {
-    if ($props.saveFn) return $props.saveFn(data, getChanges);
+    if ($props.saveFn) {
+        $props.saveFn(data, getChanges);
+        isLoading.value = false;
+        hasChanges.value = false;
+        return;
+    }
     const changes = data || getChanges();
     try {
         await axios.post($props.saveUrl || $props.url + '/crud', changes);
diff --git a/src/components/EditPictureForm.vue b/src/components/EditPictureForm.vue
index 3d7f3615b..2adbf5f83 100644
--- a/src/components/EditPictureForm.vue
+++ b/src/components/EditPictureForm.vue
@@ -2,7 +2,7 @@
 import { reactive, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -293,7 +293,7 @@ const makeRequest = async () => {
                     </VnRow>
                     <VnRow class="row q-gutter-md q-mb-md">
                         <div class="col">
-                            <VnSelectFilter
+                            <VnSelect
                                 :label="t('Orientation')"
                                 :options="viewportTypes"
                                 hide-selected
diff --git a/src/components/EditTableCellValueForm.vue b/src/components/EditTableCellValueForm.vue
index f79fda444..b1df9525b 100644
--- a/src/components/EditTableCellValueForm.vue
+++ b/src/components/EditTableCellValueForm.vue
@@ -2,7 +2,7 @@
 import { ref, markRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -36,7 +36,7 @@ const inputs = {
     number: markRaw(VnInput),
     date: markRaw(VnInputDate),
     checkbox: markRaw(QCheckbox),
-    select: markRaw(VnSelectFilter),
+    select: markRaw(VnSelect),
 };
 
 const newValue = ref(null);
@@ -83,7 +83,7 @@ const closeForm = () => {
             <span class="countLines">{{ ` ${rows.length} ` }}</span>
             <span class="title">{{ t('buy(s)') }}</span>
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnSelectFilter
+                <VnSelect
                     :label="t('Field to edit')"
                     :options="fieldsOptions"
                     hide-selected
diff --git a/src/components/FilterItemForm.vue b/src/components/FilterItemForm.vue
index cd4fff54c..e031999e2 100644
--- a/src/components/FilterItemForm.vue
+++ b/src/components/FilterItemForm.vue
@@ -6,7 +6,7 @@ import { useRoute } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 import axios from 'axios';
@@ -160,7 +160,7 @@ const selectItem = ({ id }) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('entry.buys.producer')"
                         :options="producersOptions"
                         hide-selected
@@ -170,7 +170,7 @@ const selectItem = ({ id }) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('entry.buys.type')"
                         :options="ItemTypesOptions"
                         hide-selected
@@ -180,7 +180,7 @@ const selectItem = ({ id }) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('entry.buys.color')"
                         :options="InksOptions"
                         hide-selected
diff --git a/src/components/FilterTravelForm.vue b/src/components/FilterTravelForm.vue
index e6060f06e..60d69e897 100644
--- a/src/components/FilterTravelForm.vue
+++ b/src/components/FilterTravelForm.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
 
 import axios from 'axios';
@@ -146,7 +146,7 @@ const selectTravel = ({ id }) => {
             <h1 class="title">{{ t('Filter travels') }}</h1>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('entry.basicData.agency')"
                         :options="agenciesOptions"
                         hide-selected
@@ -156,7 +156,7 @@ const selectTravel = ({ id }) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('entry.basicData.warehouseOut')"
                         :options="warehousesOptions"
                         hide-selected
@@ -166,7 +166,7 @@ const selectTravel = ({ id }) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('entry.basicData.warehouseIn')"
                         :options="warehousesOptions"
                         hide-selected
diff --git a/src/components/FormModelPopup.vue b/src/components/FormModelPopup.vue
index e0a60fadc..c5caf9778 100644
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@@ -91,6 +91,7 @@ defineExpose({
                     :title="t('globals.save')"
                     type="submit"
                     color="primary"
+                    class="q-ml-sm"
                     :disabled="isLoading"
                     :loading="isLoading"
                 />
diff --git a/src/components/ItemsFilterPanel.vue b/src/components/ItemsFilterPanel.vue
index f7f07a5b0..94adfe0ff 100644
--- a/src/components/ItemsFilterPanel.vue
+++ b/src/components/ItemsFilterPanel.vue
@@ -5,7 +5,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';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 import axios from 'axios';
@@ -207,7 +207,7 @@ const removeTag = (index, params, search) => {
             </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('components.itemsFilterPanel.typeFk')"
                         v-model="params.typeFk"
                         :options="itemTypesOptions"
@@ -235,7 +235,7 @@ const removeTag = (index, params, search) => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QSeparator />
@@ -246,7 +246,7 @@ const removeTag = (index, params, search) => {
                 class="q-mt-md filter-value"
             >
                 <QItemSection class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('components.itemsFilterPanel.tag')"
                         v-model="value.selectedTag"
                         :options="tagOptions"
@@ -261,7 +261,7 @@ const removeTag = (index, params, search) => {
                     />
                 </QItemSection>
                 <QItemSection class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         v-if="!value?.selectedTag?.isFree && value.valueOptions"
                         :label="t('components.itemsFilterPanel.value')"
                         v-model="value.value"
diff --git a/src/components/RegularizeStockForm.vue b/src/components/RegularizeStockForm.vue
index 28236be17..098f8464d 100644
--- a/src/components/RegularizeStockForm.vue
+++ b/src/components/RegularizeStockForm.vue
@@ -2,7 +2,7 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FormModelPopup from './FormModelPopup.vue';
@@ -54,12 +54,13 @@ const onDataSaved = (data) => {
                     <QInput
                         :label="t('Type the visible quantity')"
                         v-model.number="data.quantity"
+                        autofocus
                     />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Warehouse')"
                         v-model="data.warehouseFk"
                         :options="warehousesOptions"
diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index b7d8f3081..de3196e2c 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -5,7 +5,7 @@ import { useRouter } from 'vue-router';
 
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import FormPopup from './FormPopup.vue';
 
 import axios from 'axios';
@@ -84,7 +84,7 @@ const transferInvoice = async () => {
         <template #form-inputs>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Client')"
                         :options="clientsOptions"
                         hide-selected
@@ -103,10 +103,10 @@ const transferInvoice = async () => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Rectificative type')"
                         :options="rectificativeTypeOptions"
                         hide-selected
@@ -119,7 +119,7 @@ const transferInvoice = async () => {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Class')"
                         :options="siiTypeInvoiceOutsOptions"
                         hide-selected
@@ -138,10 +138,10 @@ const transferInvoice = async () => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Type')"
                         :options="invoiceCorrectionTypesOptions"
                         hide-selected
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 5c143740e..c2011639f 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -7,7 +7,7 @@ import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import { localeEquivalence } from 'src/i18n/index';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 
@@ -172,24 +172,33 @@ function copyUserToken() {
         <QSeparator inset class="q-mx-lg" />
         <div class="col q-gutter-xs q-pa-md">
             <VnRow>
-                <VnSelectFilter
+                <VnSelect
                     :label="t('components.userPanel.localWarehouse')"
                     v-model="user.localWarehouseFk"
                     :options="warehousesData"
                     option-label="name"
                     option-value="id"
                 />
-                <VnSelectFilter
+                <VnSelect
                     :label="t('components.userPanel.localBank')"
-                    hide-selected
                     v-model="user.localBankFk"
                     :options="accountBankData"
                     option-label="bank"
                     option-value="id"
-                ></VnSelectFilter>
+                >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>
+                                    {{ `${opt.id}: ${opt.bank}` }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
             </VnRow>
             <VnRow>
-                <VnSelectFilter
+                <VnSelect
                     :label="t('components.userPanel.localCompany')"
                     hide-selected
                     v-model="user.companyFk"
@@ -197,7 +206,7 @@ function copyUserToken() {
                     option-label="code"
                     option-value="id"
                 />
-                <VnSelectFilter
+                <VnSelect
                     :label="t('components.userPanel.userWarehouse')"
                     hide-selected
                     v-model="user.warehouseFk"
@@ -207,7 +216,7 @@ function copyUserToken() {
                 />
             </VnRow>
             <VnRow>
-                <VnSelectFilter
+                <VnSelect
                     :label="t('components.userPanel.userCompany')"
                     hide-selected
                     v-model="user.companyFk"
diff --git a/src/components/common/VnDms.vue b/src/components/common/VnDms.vue
index 76864f026..5432dea1e 100644
--- a/src/components/common/VnDms.vue
+++ b/src/components/common/VnDms.vue
@@ -6,7 +6,7 @@ import axios from 'axios';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
 
@@ -123,7 +123,7 @@ function addDefaultData(data) {
             <div class="q-gutter-y-ms">
                 <VnRow>
                     <VnInput :label="t('globals.reference')" v-model="dms.reference" />
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('globals.company')"
                         v-model="dms.companyFk"
                         :options="companies"
@@ -133,7 +133,7 @@ function addDefaultData(data) {
                     />
                 </VnRow>
                 <VnRow>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('globals.warehouse')"
                         v-model="dms.warehouseFk"
                         :options="warehouses"
@@ -141,7 +141,7 @@ function addDefaultData(data) {
                         option-label="name"
                         input-debounce="0"
                     />
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('globals.type')"
                         v-model="dms.dmsTypeFk"
                         :options="dmsTypes"
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index 2053eceb1..fe0866292 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -15,6 +15,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    emitDateFormat: {
+        type: Boolean,
+        default: false,
+    },
 });
 const hover = ref(false);
 
@@ -37,7 +41,10 @@ const value = computed({
         return props.modelValue;
     },
     set(value) {
-        emit('update:modelValue', joinDateAndTime(value, time.value));
+        emit(
+            'update:modelValue',
+            props.emitDateFormat ? new Date(value) : joinDateAndTime(value, time.value)
+        );
     },
 });
 
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index c1cc78f54..340a9e550 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -12,7 +12,7 @@ import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
-import VnSelectFilter from './VnSelectFilter.vue';
+import VnSelect from './VnSelect.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
 
 const stateStore = useStateStore();
@@ -421,12 +421,13 @@ setLogTree();
         >
             <div class="timeline">
                 <div class="user-avatar">
-                    <VnUserLink :worker-id="userLog.user.id">
+                    <VnUserLink :worker-id="userLog?.user?.id">
                         <template #link>
                             <VnAvatar
-                                :class="{ 'cursor-pointer': userLog.user.id }"
-                                :worker-id="userLog.user.id"
-                                :title="userLog.user.nickname"
+                                :class="{ 'cursor-pointer': userLog?.user?.id }"
+                                :worker-id="userLog?.user?.id"
+                                :title="userLog?.user?.nickname"
+                                :show-letter="!userLog?.user"
                                 size="lg"
                             />
                         </template>
@@ -659,7 +660,7 @@ setLogTree();
                     </QInput>
                 </QItem>
                 <QItem>
-                    <VnSelectFilter
+                    <VnSelect
                         class="full-width"
                         :label="t('globals.entity')"
                         v-model="selectedFilters.changedModel"
@@ -689,7 +690,7 @@ setLogTree();
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
                     <QItemSection v-if="workers && userRadio !== null">
-                        <VnSelectFilter
+                        <VnSelect
                             class="full-width"
                             :label="t('globals.user')"
                             v-model="userSelect"
@@ -713,7 +714,7 @@ setLogTree();
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mt-sm">
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelect.vue
similarity index 98%
rename from src/components/common/VnSelectFilter.vue
rename to src/components/common/VnSelect.vue
index 480d36e4f..05c74f00a 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelect.vue
@@ -169,6 +169,7 @@ watch(modelValue, (newValue) => {
         ref="vnSelectRef"
         :class="{ required: $attrs.required }"
         :rules="$attrs.required ? [requiredFieldRule] : null"
+        virtual-scroll-slice-size="options.length"
     >
         <template v-if="isClearable" #append>
             <QIcon
diff --git a/src/components/common/VnSelectDialog.vue b/src/components/common/VnSelectDialog.vue
index 95d6a44fe..3726691af 100644
--- a/src/components/common/VnSelectDialog.vue
+++ b/src/components/common/VnSelectDialog.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 import { useRole } from 'src/composables/useRole';
 
@@ -52,7 +52,7 @@ const toggleForm = () => {
 </script>
 
 <template>
-    <VnSelectFilter v-model="value" :options="options" v-bind="$attrs">
+    <VnSelect v-model="value" :options="options" v-bind="$attrs">
         <template v-if="isAllowedToCreate" #append>
             <QIcon
                 @click.stop.prevent="toggleForm()"
@@ -72,7 +72,7 @@ const toggleForm = () => {
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
             <slot :name="slotName" v-bind="slotData" :key="slotName" />
         </template>
-    </VnSelectFilter>
+    </VnSelect>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index 4306beb4c..5b192f95d 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -199,8 +199,9 @@ es:
     templates:
         pendingPayment: 'Su pedido está pendiente de pago.
             Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
-        minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido
-            { orderId } con llegada { landing } para recibirlo sin portes adicionales.'
+        minAmount: 'Te recordamos que tu pedido {orderId} es inferior a 50€.
+            Te recomendamos amplíes para no generar costes extra, provocarán un incremento de tu tarifa.
+            ¡Un saludo!'
         orderChanges: 'Pedido {orderId} con llegada estimada día { landing }: { changes }'
     en: Inglés
     es: Español
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 96d097191..eb0bbbe66 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -79,6 +79,7 @@ watch(
 
 const isLoading = ref(false);
 async function search() {
+    store.filter.where = {};
     isLoading.value = true;
     const params = { ...userParams.value };
     store.userParamsChanged = true;
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 4dae312ce..c00849512 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -95,6 +95,8 @@ const addFilter = async (filter, params) => {
 };
 
 async function fetch() {
+    store.filter.skip = 0;
+    store.skip = 0;
     await arrayData.fetch({ append: false });
     if (!store.hasMoreData) {
         isLoading.value = false;
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index fc8475ace..344267ef7 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -81,8 +81,10 @@ 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) }: {}
     await arrayData.applyFilter({
         params: {
+            // filter ,
             ...Object.fromEntries(staticParams),
             search: searchText.value,
         },
@@ -106,6 +108,7 @@ async function search() {
     let targetUrl;
 
     if (path.endsWith('/list')) targetUrl = path.replace('/list', `/${targetId}/summary`);
+    if (path.endsWith('-list')) targetUrl = path.replace('-list', `/${targetId}/summary`);
     else if (path.includes(':id')) targetUrl = path.replace(':id', targetId);
 
     await router.push({ path: targetUrl });
diff --git a/src/components/ui/VnUserLink.vue b/src/components/ui/VnUserLink.vue
index 47287c12b..33836550a 100644
--- a/src/components/ui/VnUserLink.vue
+++ b/src/components/ui/VnUserLink.vue
@@ -1,6 +1,5 @@
 <script setup>
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import { useI18n } from 'vue-i18n';
 
 const $props = defineProps({
diff --git a/src/composables/getDateQBadgeColor.js b/src/composables/getDateQBadgeColor.js
new file mode 100644
index 000000000..be9ef41b5
--- /dev/null
+++ b/src/composables/getDateQBadgeColor.js
@@ -0,0 +1,11 @@
+export function getDateQBadgeColor(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 'warning';
+    if (comparation < 0) return 'negative';
+}
diff --git a/src/composables/useSession.js b/src/composables/useSession.js
index 8583e10d4..56bce0279 100644
--- a/src/composables/useSession.js
+++ b/src/composables/useSession.js
@@ -3,11 +3,14 @@ import { useRole } from './useRole';
 import { useUserConfig } from './useUserConfig';
 import axios from 'axios';
 import useNotify from './useNotify';
+import { useTokenConfig } from './useTokenConfig';
 const TOKEN_MULTIMEDIA = 'tokenMultimedia';
 const TOKEN = 'token';
 
 export function useSession() {
     const { notify } = useNotify();
+    let isCheckingToken = false;
+    let intervalId = null;
 
     function getToken() {
         const localToken = localStorage.getItem(TOKEN);
@@ -22,10 +25,24 @@ export function useSession() {
         return localTokenMultimedia || sessionTokenMultimedia || '';
     }
 
-    function setToken(data) {
-        const storage = data.keepLogin ? localStorage : sessionStorage;
+    function setSession(data) {
+        let keepLogin = data.keepLogin;
+        const storage = keepLogin ? localStorage : sessionStorage;
         storage.setItem(TOKEN, data.token);
         storage.setItem(TOKEN_MULTIMEDIA, data.tokenMultimedia);
+        storage.setItem('created', data.created);
+        storage.setItem('ttl', data.ttl);
+        sessionStorage.setItem('keepLogin', keepLogin);
+    }
+
+    function keepLogin() {
+        return sessionStorage.getItem('keepLogin');
+    }
+
+    function setToken({ token, tokenMultimedia }) {
+        const storage = keepLogin() ? localStorage : sessionStorage;
+        storage.setItem(TOKEN, token);
+        storage.setItem(TOKEN_MULTIMEDIA, tokenMultimedia);
     }
     async function destroyToken(url, storage, key) {
         if (storage.getItem(key)) {
@@ -45,11 +62,15 @@ export function useSession() {
             tokenMultimedia: 'Accounts/logout',
             token: 'VnUsers/logout',
         };
+        const storage = keepLogin() ? localStorage : sessionStorage;
+
         for (const [key, url] of Object.entries(tokens)) {
-            await destroyToken(url, localStorage, key);
-            await destroyToken(url, sessionStorage, key);
+            await destroyToken(url, storage, key);
         }
 
+        localStorage.clear();
+        sessionStorage.clear();
+
         const { setUser } = useState();
 
         setUser({
@@ -59,22 +80,75 @@ export function useSession() {
             lang: '',
             darkMode: null,
         });
+
+        stopRenewer();
     }
 
-    async function login(token, tokenMultimedia, keepLogin) {
-        setToken({ token, tokenMultimedia, keepLogin });
+    async function login(data) {
+        setSession(data);
 
         await useRole().fetch();
         await useUserConfig().fetch();
+        await useTokenConfig().fetch();
+
+        startInterval();
     }
 
     function isLoggedIn() {
         const localToken = localStorage.getItem(TOKEN);
         const sessionToken = sessionStorage.getItem(TOKEN);
-
+        startInterval();
         return !!(localToken || sessionToken);
     }
 
+    function startInterval() {
+        stopRenewer();
+        const renewPeriod = +sessionStorage.getItem('renewPeriod');
+        if (!renewPeriod) return;
+        intervalId = setInterval(() => checkValidity(), renewPeriod * 1000);
+    }
+
+    function stopRenewer() {
+        clearInterval(intervalId);
+    }
+
+    async function renewToken() {
+        const _token = getToken();
+        const token = await axios.post('VnUsers/renewToken', {
+            headers: { Authorization: _token },
+        });
+        const _tokenMultimedia = getTokenMultimedia();
+        const tokenMultimedia = await axios.post('VnUsers/renewToken', {
+            headers: { Authorization: _tokenMultimedia },
+        });
+        setToken({ token: token.data.id, tokenMultimedia: tokenMultimedia.data.id });
+    }
+
+    async function checkValidity() {
+        const { getTokenConfig } = useState();
+
+        const tokenConfig = getTokenConfig() ?? sessionStorage.getItem('tokenConfig');
+        const storage = keepLogin() ? localStorage : sessionStorage;
+
+        const created = +storage.getItem('created');
+        const ttl = +storage.getItem('ttl');
+
+        if (isCheckingToken || !created) return;
+        isCheckingToken = true;
+
+        const renewPeriodInSeconds = Math.min(ttl, tokenConfig.value.renewPeriod) * 1000;
+
+        const maxDate = created + renewPeriodInSeconds;
+        const now = new Date().getTime();
+
+        if (isNaN(renewPeriodInSeconds) || now <= maxDate) {
+            return (isCheckingToken = false);
+        }
+
+        await renewToken();
+        isCheckingToken = false;
+    }
+
     return {
         getToken,
         getTokenMultimedia,
@@ -82,5 +156,8 @@ export function useSession() {
         destroy,
         login,
         isLoggedIn,
+        checkValidity,
+        setSession,
+        renewToken,
     };
 }
diff --git a/src/composables/useState.js b/src/composables/useState.js
index e0b742a73..e671d41bd 100644
--- a/src/composables/useState.js
+++ b/src/composables/useState.js
@@ -13,6 +13,7 @@ const user = ref({
 });
 
 const roles = ref([]);
+const tokenConfig = ref({});
 const drawer = ref(true);
 const headerMounted = ref(false);
 
@@ -52,6 +53,15 @@ export function useState() {
     function setRoles(data) {
         roles.value = data;
     }
+    function getTokenConfig() {
+        return computed(() => {
+            return tokenConfig.value;
+        });
+    }
+
+    function setTokenConfig(data) {
+        tokenConfig.value = data;
+    }
 
     function set(name, data) {
         state.value[name] = ref(data);
@@ -70,6 +80,8 @@ export function useState() {
         setUser,
         getRoles,
         setRoles,
+        getTokenConfig,
+        setTokenConfig,
         set,
         get,
         unset,
diff --git a/src/composables/useTokenConfig.js b/src/composables/useTokenConfig.js
new file mode 100644
index 000000000..5cf1b34ee
--- /dev/null
+++ b/src/composables/useTokenConfig.js
@@ -0,0 +1,28 @@
+import axios from 'axios';
+import { useState } from './useState';
+import useNotify from './useNotify';
+
+export function useTokenConfig() {
+    const state = useState();
+    const { notify } = useNotify();
+
+    async function fetch() {
+        try {
+            const { data } = await axios.get('AccessTokenConfigs/findOne', {
+                filter: { fields: ['renewInterval', 'renewPeriod'] },
+            });
+            if (!data) return;
+            state.setTokenConfig(data);
+            sessionStorage.setItem('renewPeriod', data.renewPeriod);
+            return data;
+        } catch (error) {
+            notify('errors.tokenConfig', 'negative');
+            console.error('Error fetching token config:', error);
+        }
+    }
+
+    return {
+        fetch,
+        state,
+    };
+}
diff --git a/src/css/app.scss b/src/css/app.scss
index 770df8e01..2e524e693 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -141,15 +141,6 @@ select:-webkit-autofill {
     background-color: var(--vn-section-color);
 }
 
-.q-checkbox {
-    & .q-checkbox__label {
-        color: var(--vn-text-color);
-    }
-    & .q-checkbox__inner {
-        color: var(--vn-label-color);
-    }
-}
-
 .tr-header {
     color: var(--vn-label-color);
 }
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index a580f2553..5092dbdb7 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -28,6 +28,7 @@ globals:
     reset: Reset
     close: Close
     cancel: Cancel
+    clone: Clone
     confirm: Confirm
     assign: Assign
     back: Back
@@ -90,6 +91,10 @@ globals:
         basicData: Basic data
         log: Logs
         parkingList: Parkings list
+        agencyList: Agencies list
+        agency: Agency
+        workCenters: Work centers
+        modes: Modes
         zones: Zones
         zonesList: Zones
         deliveryList: Delivery days
@@ -97,12 +102,15 @@ globals:
     created: Created
     worker: Worker
     now: Now
+    name: Name
+    new: New
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
     statusBadGateway: It seems that the server has fall down
     statusGatewayTimeout: Could not contact the server
     userConfig: Error fetching user config
+    tokenConfig: Error fetching token config
     writeRequest: The requested operation could not be completed
 login:
     title: Login
@@ -517,7 +525,7 @@ claim:
         records: records
     card:
         claimId: Claim ID
-        assignedTo: Assigned
+        attendedBy: Attended by
         created: Created
         state: State
         ticketId: Ticket ID
@@ -555,6 +563,7 @@ claim:
         responsible: Responsible
         worker: Worker
         redelivery: Redelivery
+        changeState: Change state
     basicData:
         customer: Customer
         assignedTo: Assigned
@@ -986,7 +995,7 @@ supplier:
         billingData: Billing data
         payMethod: Pay method
         payDeadline: Pay deadline
-        payDay: Día de pago
+        payDay: Pay day
         account: Account
         fiscalData: Fiscal data
         sageTaxType: Sage tax type
@@ -1123,9 +1132,18 @@ item:
         list: List
         diary: Diary
         tags: Tags
+        create: Create
+        buyRequest: Buy requests
         fixedPrice: Fixed prices
         wasteBreakdown: Waste breakdown
         itemCreate: New item
+        barcode: Barcodes
+        tax: Tax
+        log: Log
+        botanical: Botanical
+        itemTypeCreate: New item type
+        family: Item Type
+        lastEntries: Last entries
     descriptor:
         item: Item
         buyer: Buyer
@@ -1169,6 +1187,52 @@ item:
         type: Type
         intrastat: Intrastat
         origin: Origin
+    buyRequest:
+        ticketId: 'Ticket ID'
+        shipped: 'Shipped'
+        requester: 'Requester'
+        requested: 'Requested'
+        price: 'Price'
+        attender: 'Atender'
+        item: 'Item'
+        achieved: 'Achieved'
+        concept: 'Concept'
+        state: 'State'
+    summary:
+        basicData: 'Basic data'
+        otherData: 'Other data'
+        description: 'Description'
+        tax: 'Tax'
+        tags: 'Tags'
+        botanical: 'Botanical'
+        barcode: 'Barcode'
+        name: 'Nombre'
+        completeName: 'Nombre completo'
+        family: 'Familia'
+        size: 'Medida'
+        origin: 'Origen'
+        stems: 'Tallos'
+        multiplier: 'Multiplicador'
+        buyer: 'Comprador'
+        doPhoto: 'Do photo'
+        intrastatCode: 'Código intrastat'
+        intrastat: 'Intrastat'
+        ref: 'Referencia'
+        relevance: 'Relevancia'
+        weight: 'Peso (gramos)/tallo'
+        units: 'Unidades/caja'
+        expense: 'Gasto'
+        generic: 'Genérico'
+        recycledPlastic: 'Plástico reciclado'
+        nonRecycledPlastic: 'Plástico no reciclado'
+        minSalesQuantity: 'Cantidad mínima de venta'
+        genus: 'Genus'
+        specie: 'Specie'
+item/itemType:
+    pageTitles:
+        itemType: Item type
+        basicData: Basic data
+        summary: Summary
 zone:
     pageTitles:
         zones: Zone
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index ef7ebf22b..41a34f35a 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -28,6 +28,7 @@ globals:
     reset: Restaurar
     close: Cerrar
     cancel: Cancelar
+    clone: Clonar
     confirm: Confirmar
     assign: Asignar
     back: Volver
@@ -90,6 +91,10 @@ globals:
         basicData: Datos básicos
         log: Historial
         parkingList: Listado de parkings
+        agencyList: Listado de agencias
+        agency: Agencia
+        workCenters: Centros de trabajo
+        modes: Modos
         zones: Zonas
         zonesList: Zonas
         deliveryList: Días de entrega
@@ -97,12 +102,15 @@ globals:
     created: Fecha creación
     worker: Trabajador
     now: Ahora
+    name: Nombre
+    new: Nuevo
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
     statusBadGateway: Parece ser que el servidor ha caído
     statusGatewayTimeout: No se ha podido contactar con el servidor
     userConfig: Error al obtener configuración de usuario
+    tokenConfig: Error al obtener configuración de token
     writeRequest: No se pudo completar la operación solicitada
 login:
     title: Inicio de sesión
@@ -515,7 +523,7 @@ claim:
         records: registros
     card:
         claimId: ID reclamación
-        assignedTo: Asignada a
+        attendedBy: Atendida por
         created: Creada
         state: Estado
         ticketId: ID ticket
@@ -553,6 +561,7 @@ claim:
         responsible: Responsable
         worker: Trabajador
         redelivery: Devolución
+        changeState: Cambiar estado
     basicData:
         customer: Cliente
         assignedTo: Asignada a
@@ -1123,8 +1132,17 @@ item:
         diary: Histórico
         tags: Etiquetas
         fixedPrice: Precios fijados
+        buyRequest: Peticiones de compra
         wasteBreakdown: Deglose de mermas
         itemCreate: Nuevo artículo
+        basicData: 'Datos básicos'
+        tax: 'IVA'
+        botanical: 'Botánico'
+        barcode: 'Código de barras'
+        log: Historial
+        itemTypeCreate: Nueva familia
+        family: Familia
+        lastEntries: Últimas entradas
     descriptor:
         item: Artículo
         buyer: Comprador
@@ -1168,6 +1186,52 @@ item:
         type: Tipo
         intrastat: Intrastat
         origin: Origen
+    summary:
+        basicData: 'Datos básicos'
+        otherData: 'Otros datos'
+        description: 'Descripción'
+        tax: 'IVA'
+        tags: 'Etiquetas'
+        botanical: 'Botánico'
+        barcode: 'Código de barras'
+        name: 'Nombre'
+        completeName: 'Nombre completo'
+        family: 'Familia'
+        size: 'Medida'
+        origin: 'Origen'
+        stems: 'Tallos'
+        multiplier: 'Multiplicador'
+        buyer: 'Comprador'
+        doPhoto: 'Hacer foto'
+        intrastatCode: 'Código intrastat'
+        intrastat: 'Intrastat'
+        ref: 'Referencia'
+        relevance: 'Relevancia'
+        weight: 'Peso (gramos)/tallo'
+        units: 'Unidades/caja'
+        expense: 'Gasto'
+        generic: 'Genérico'
+        recycledPlastic: 'Plástico reciclado'
+        nonRecycledPlastic: 'Plástico no reciclado'
+        minSalesQuantity: 'Cantidad mínima de venta'
+        genus: 'Genus'
+        specie: 'Specie'
+    buyRequest:
+        ticketId: 'ID Ticket'
+        shipped: 'F. envío'
+        requester: 'Solicitante'
+        requested: 'Solicitado'
+        price: 'Precio'
+        attender: 'Comprador'
+        item: 'Artículo'
+        achieved: 'Conseguido'
+        concept: 'Concepto'
+        state: 'Estado'
+item/itemType:
+    pageTitles:
+        itemType: Familia
+        basicData: Datos básicos
+        summary: Resumen
 zone:
     pageTitles:
         zones: Zona
diff --git a/src/pages/Agency/AgencyList.vue b/src/pages/Agency/AgencyList.vue
new file mode 100644
index 000000000..88abba3eb
--- /dev/null
+++ b/src/pages/Agency/AgencyList.vue
@@ -0,0 +1,79 @@
+<script setup>
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import { useStateStore } from 'stores/useStateStore';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+function navigate(id) {
+    router.push({ path: `/agency/${id}` });
+}
+function exprBuilder(param, value) {
+    if (!value) return;
+    if (param !== 'search') return;
+
+    if (!isNaN(value)) return { id: value };
+
+    return { name: { like: `%${value}%` } };
+}
+</script>
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                :info="t('You can search by name')"
+                :label="t('Search agency')"
+                data-key="AgencyList"
+                url="Agencies"
+            />
+        </Teleport>
+    </template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AgencyList"
+                url="Agencies"
+                order="name"
+                :expr-builder="exprBuilder"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.name"
+                        @click="navigate(row.id)"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <QCheckbox
+                                :label="t('isOwn')"
+                                v-model="row.isOwn"
+                                :disable="true"
+                            />
+                            <QCheckbox
+                                :label="t('isAnyVolumeAllowed')"
+                                v-model="row.isAnyVolumeAllowed"
+                                :disable="true"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+<i18n>
+    es: 
+        isOwn: Tiene propietario
+        isAnyVolumeAllowed: Permite cualquier volumen
+        Search agency: Buscar agencia
+        You can search by name: Puedes buscar por nombre
+    en:
+        isOwn: Has owner
+        isAnyVolumeAllowed: Allows any volume
+</i18n>
diff --git a/src/pages/Agency/Card/AgencyBasicData.vue b/src/pages/Agency/Card/AgencyBasicData.vue
new file mode 100644
index 000000000..599058b3e
--- /dev/null
+++ b/src/pages/Agency/Card/AgencyBasicData.vue
@@ -0,0 +1,52 @@
+<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 VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const routeId = route.params?.id || null;
+const warehouses = ref([]);
+</script>
+<template>
+    <FetchData
+        url="warehouses"
+        sort-by="name"
+        @on-fetch="(data) => (warehouses = data)"
+        auto-load
+    />
+    <FormModel :url="`Agencies/${routeId}`" model="agency" auto-load>
+        <template #form="{ data }">
+            <VnRow>
+                <VnInput v-model="data.name" :label="t('globals.name')" />
+            </VnRow>
+            <VnRow>
+                <VnSelect
+                    v-model="data.warehouseFk"
+                    option-value="id"
+                    option-label="name"
+                    :label="t('globals.warehouse')"
+                    :options="warehouses"
+                    use-input
+                    input-debounce="0"
+                    :is-clearable="false"
+                />
+            </VnRow>
+            <VnRow>
+                <QCheckbox :label="t('agency.isOwn')" v-model="data.isOwn" />
+            </VnRow>
+            <VnRow>
+                <QCheckbox
+                    :label="t('agency.isAnyVolumeAllowed')"
+                    v-model="data.isAnyVolumeAllowed"
+                />
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Agency/Card/AgencyCard.vue b/src/pages/Agency/Card/AgencyCard.vue
new file mode 100644
index 000000000..e78d1cc55
--- /dev/null
+++ b/src/pages/Agency/Card/AgencyCard.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { onMounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useArrayData } from 'src/composables/useArrayData';
+
+import AgencyDescriptor from 'pages/Agency/Card/AgencyDescriptor.vue';
+import VnCard from 'components/common/VnCard.vue';
+
+const route = useRoute();
+const arrayData = useArrayData('Agency', {
+    url: `Agencies/${route.params.id}`,
+});
+const { store } = arrayData;
+onMounted(async () => await arrayData.fetch({ append: false }));
+watch(
+    () => route.params.id,
+    async (newId) => {
+        if (newId) {
+            store.url = `Agencies/${newId}`;
+            await arrayData.fetch({ append: false });
+        }
+    }
+);
+</script>
+<template>
+    <VnCard
+        data-key="Agency"
+        base-url="Agencies"
+        :descriptor="AgencyDescriptor"
+        searchbar-data-key="AgencyList"
+        searchbar-url="Agencies"
+        searchbar-label="agency.searchBar.label"
+        searchbar-info="agency.searchBar.info"
+    />
+</template>
diff --git a/src/pages/Agency/Card/AgencyDescriptor.vue b/src/pages/Agency/Card/AgencyDescriptor.vue
new file mode 100644
index 000000000..0fa89d07d
--- /dev/null
+++ b/src/pages/Agency/Card/AgencyDescriptor.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useArrayData } from 'src/composables/useArrayData';
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
+const props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const { t } = useI18n();
+const { params } = useRoute();
+const entityId = computed(() => props.id || params.id);
+const { store } = useArrayData('Parking');
+const card = computed(() => store.data);
+</script>
+<template>
+    <CardDescriptor
+        module="Agency"
+        data-key="Agency"
+        :url="`Agencies/${entityId}`"
+        :title="card?.name"
+        :subtitle="props.id"
+    >
+        <template #body="{ entity: agency }">
+            <VnLv :label="t('globals.name')" :value="agency.name" />
+        </template>
+    </CardDescriptor>
+</template>
diff --git a/src/pages/Agency/Card/AgencyLog.vue b/src/pages/Agency/Card/AgencyLog.vue
new file mode 100644
index 000000000..d4769a676
--- /dev/null
+++ b/src/pages/Agency/Card/AgencyLog.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Agency" url="/AgencyLogs" />
+</template>
diff --git a/src/pages/Agency/Card/AgencyModes.vue b/src/pages/Agency/Card/AgencyModes.vue
new file mode 100644
index 000000000..4fb81914a
--- /dev/null
+++ b/src/pages/Agency/Card/AgencyModes.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardList from 'src/components/ui/CardList.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const routeId = route.params.id;
+</script>
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="AgencyModes"
+                :url="`AgencyModes`"
+                :filter="{ where: { agencyFk: routeId } }"
+                order="name"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.name"
+                        v-for="row of rows"
+                    >
+                        <template #list-items>
+                            <VnLv
+                                :label="t('globals.description')"
+                                :value="row?.description"
+                            />
+                            <VnLv
+                                :label="t('deliveryMethod')"
+                                :value="row?.deliveryMethodFk"
+                            />
+                            <VnLv label="m3" :value="row?.m3" />
+                            <VnLv :label="t('inflation')" :value="row?.inflation" />
+                            <VnLv :label="t('globals.code')" :value="row?.code" />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+<i18n>
+    es: 
+        isOwn: Tiene propietario
+        isAnyVolumeAllowed: Permite cualquier volumen
+        Search agency: Buscar agencia
+        You can search by name: Puedes buscar por nombre
+        deliveryMethod: Método de entrega
+        inflation: Inflación
+    en:
+        isOwn: Has owner
+        isAnyVolumeAllowed: Allows any volume
+</i18n>
diff --git a/src/pages/Agency/Card/AgencySummary.vue b/src/pages/Agency/Card/AgencySummary.vue
new file mode 100644
index 000000000..a4a6a2a18
--- /dev/null
+++ b/src/pages/Agency/Card/AgencySummary.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'src/components/FetchData.vue';
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+const { params } = useRoute();
+const { t } = useI18n();
+const entityId = computed(() => $props.id || params.id);
+
+const filter = {
+    fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
+    include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
+};
+</script>
+
+<template>
+    <div class="q-pa-md">
+        <CardSummary :url="`Agencies/${entityId}`">
+            <template #header="{ entity: agency }">{{ agency.name }}</template>
+            <template #body="{ entity: agency }">
+                <QCard class="vn-one">
+                    <QCardSection class="q-pa-none">
+                        <VnTitle
+                            :url="`#/agency/${entityId}/basic-data`"
+                            :text="t('globals.pageTitles.basicData')"
+                        />
+                    </QCardSection>
+                    <VnLv :label="t('globals.name')" :value="agency.name" />
+                    <QCheckbox
+                        :label="t('agency.isOwn')"
+                        v-model="agency.isOwn"
+                        :disable="true"
+                    />
+                    <QCheckbox
+                        :label="t('agency.isAnyVolumeAllowed')"
+                        v-model="agency.isAnyVolumeAllowed"
+                        :disable="true"
+                    />
+                </QCard>
+            </template>
+        </CardSummary>
+    </div>
+</template>
diff --git a/src/pages/Agency/Card/AgencyWorkcenter.vue b/src/pages/Agency/Card/AgencyWorkcenter.vue
new file mode 100644
index 000000000..f5beaab53
--- /dev/null
+++ b/src/pages/Agency/Card/AgencyWorkcenter.vue
@@ -0,0 +1,136 @@
+<script setup>
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'src/components/FetchData.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const paginate = ref();
+const dialog = ref();
+const routeId = computed(() => route.params.id);
+const quasar = useQuasar();
+
+const initialData = computed(() => {
+    return {
+        agencyFk: routeId.value,
+        workCenterFk: null,
+    };
+});
+
+async function deleteWorCenter(id) {
+    try {
+        await axios.delete(`AgencyWorkCenters/${id}`).then(async () => {
+            quasar.notify({
+                message: t('agency.notification.removeItem'),
+                type: 'positive',
+            });
+        });
+    } catch (error) {
+        quasar.notify({
+            message: t('agency.notification.removeItemError'),
+            type: 'error',
+        });
+    }
+    paginate.value.fetch();
+}
+</script>
+<template>
+    <div class="centerCard">
+        <FetchData
+            url="workCenters"
+            sort-by="name"
+            @on-fetch="(data) => (warehouses = data)"
+            auto-load
+        />
+        <VnPaginate
+            ref="paginate"
+            data-key="AgencyWorkCenters"
+            url="AgencyWorkCenters"
+            :filter="{ where: { agencyFk: routeId } }"
+            order="id"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QCard
+                    flat
+                    bordered
+                    :key="row.id"
+                    v-for="row of rows"
+                    class="card q-pa-md q-mb-sm"
+                >
+                    <QItem>
+                        <QItemSection side-left>
+                            <VnLv :value="row?.workCenter?.name" icon="delete" />
+                        </QItemSection>
+                        <QItemSection side>
+                            <QBtn
+                                @click.stop="deleteWorCenter(row.id)"
+                                icon="delete"
+                                color="primary"
+                                round
+                                flat
+                            />
+                        </QItemSection>
+                    </QItem>
+                </QCard>
+            </template>
+        </VnPaginate>
+    </div>
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="dialog.show()" color="primary" fab icon="add">
+            <QDialog ref="dialog">
+                <FormModelPopup
+                    :title="t('Add work center')"
+                    url-create="AgencyWorkCenters"
+                    model="AgencyWorkCenter"
+                    :form-initial-data="initialData"
+                    @on-data-saved="paginate.fetch()"
+                >
+                    <template #form-inputs="{ data }">
+                        <VnRow class="row q-gutter-md q-mb-md">
+                            <VnSelect
+                                v-model="data.workCenterFk"
+                                option-value="id"
+                                option-label="name"
+                                :label="t('workCenter')"
+                                :options="warehouses"
+                                use-input
+                                input-debounce="0"
+                                :is-clearable="false"
+                            />
+                        </VnRow>
+                    </template>
+                </FormModelPopup>
+            </QDialog>
+        </QBtn>
+        <QTooltip>
+            {{ t('globals.new') }}
+        </QTooltip>
+    </QPageSticky>
+</template>
+<style lang="scss" scoped>
+.centerCard {
+    padding: 5%;
+    width: 100%;
+    max-width: 50%;
+    margin: 0 auto;
+}
+</style>
+<i18n>
+    es:
+        workCenter removed successfully: Centro de trabajo eliminado correctamente
+        This workCenter is already assigned to this agency: Este workCenter ya está asignado a esta agencia
+        Add work center: Añadir centro de trabajo
+        workCenter: Centro de trabajo
+</i18n>
diff --git a/src/pages/Agency/locale/en.yml b/src/pages/Agency/locale/en.yml
new file mode 100644
index 000000000..3cc3d69e8
--- /dev/null
+++ b/src/pages/Agency/locale/en.yml
@@ -0,0 +1,11 @@
+agency:
+    isOwn: Own
+    isAnyVolumeAllowed: Any volume allowed
+    notification:
+        removeItemError: Error removing agency
+        removeItem: WorkCenter removed successfully
+    pageTitles:
+        agency: Agency
+    searchBar:
+        info: You can search by agency code
+        label: Search agency...
diff --git a/src/pages/Agency/locale/es.yml b/src/pages/Agency/locale/es.yml
new file mode 100644
index 000000000..2607472bd
--- /dev/null
+++ b/src/pages/Agency/locale/es.yml
@@ -0,0 +1,12 @@
+agency:
+    isOwn: Propio
+    isAnyVolumeAllowed: Cualquier volumen
+    removeItem: Agencia eliminada correctamente
+    notification:
+        removeItemError: Error al eliminar la agencia
+        removeItem: Centro de trabajo eliminado correctamente
+    pageTitles:
+        agency: Agencia
+    searchBar:
+        info: Puedes buscar por nombre o id
+        label: Buscar agencia...
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index fa16e6af4..b0650b610 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -2,22 +2,21 @@
 import { ref, computed, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import axios from 'axios';
 import { useStateStore } from 'src/stores/useStateStore';
 import { toDate, toPercentage, toCurrency } from 'filters/index';
 import { tMobile } from 'src/composables/tMobile';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
 
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
-const router = useRouter();
 const stateStore = computed(() => useStateStore());
 const claim = ref(null);
 const claimRef = ref();
@@ -38,10 +37,11 @@ const marker_labels = [
     { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
 ];
 const multiplicatorValue = ref();
+const loading = ref(false);
 
 const columns = computed(() => [
     {
-        name: 'Id',
+        name: 'id',
         label: t('Id item'),
         field: (row) => row.itemFk,
     },
@@ -119,7 +119,7 @@ async function updateDestinations(claimDestinationFk) {
 
 async function updateDestination(claimDestinationFk, row, options = {}) {
     if (claimDestinationFk) {
-        await axios.post('Claims/updateClaimDestination', {
+        await post('Claims/updateClaimDestination', {
             claimDestinationFk,
             rows: Array.isArray(row) ? row : [row],
         });
@@ -128,7 +128,7 @@ async function updateDestination(claimDestinationFk, row, options = {}) {
 }
 
 async function regularizeClaim() {
-    await axios.post(`Claims/${claimId}/regularizeClaim`);
+    await post(`Claims/${claimId}/regularizeClaim`);
     await claimRef.value.fetch();
     await arrayData.fetch({ append: false });
     quasar.notify({
@@ -147,7 +147,7 @@ async function onUpdateGreugeAccept() {
     const freightPickUpPrice =
         (await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice *
         multiplicatorValue.value;
-    await axios.post(`Greuges`, {
+    await post(`Greuges`, {
         clientFk: claim.value.clientFk,
         description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
         amount: freightPickUpPrice,
@@ -166,14 +166,22 @@ async function save(data) {
 }
 
 async function importToNewRefundTicket() {
-    const query = `ClaimBeginnings/${claimId}/importToNewRefundTicket`;
-    await axios.post(query);
-    claimActionsForm.value.reload();
+    await post(`ClaimBeginnings/${claimId}/importToNewRefundTicket`);
+    await claimActionsForm.value.reload();
     quasar.notify({
         message: t('globals.dataSaved'),
         type: 'positive',
     });
 }
+
+async function post(query, params) {
+    loading.value = true;
+    try {
+        await axios.post(query, params);
+    } finally {
+        loading.value = false;
+    }
+}
 </script>
 <template>
     <FetchData
@@ -280,6 +288,7 @@ async function importToNewRefundTicket() {
         :default-save="false"
         :default-reset="false"
         @on-fetch="setData"
+        :limit="0"
         auto-load
     >
         <template #body>
@@ -292,6 +301,14 @@ async function importToNewRefundTicket() {
                 v-model:selected="selectedRows"
                 :grid="$q.screen.lt.md"
             >
+                <template #body-cell-id="{ value }">
+                    <QTd align="center">
+                        <span class="link">
+                            {{ value }}
+                            <ItemDescriptorProxy :id="value" />
+                        </span>
+                    </QTd>
+                </template>
                 <template #body-cell-ticket="{ value }">
                     <QTd align="center">
                         <span class="link">
@@ -302,7 +319,7 @@ async function importToNewRefundTicket() {
                 </template>
                 <template #body-cell-destination="{ row }">
                     <QTd>
-                        <VnSelectFilter
+                        <VnSelect
                             v-model="row.claimDestinationFk"
                             :options="destinationTypes"
                             option-label="description"
@@ -344,7 +361,7 @@ async function importToNewRefundTicket() {
                                     </QItemSection>
                                     <QItemSection side>
                                         <QItemLabel v-if="column.name === 'destination'">
-                                            <VnSelectFilter
+                                            <VnSelect
                                                 v-model="props.row.claimDestinationFk"
                                                 :options="destinationTypes"
                                                 option-label="description"
@@ -383,6 +400,7 @@ async function importToNewRefundTicket() {
                 icon="check"
                 @click="regularizeClaim"
                 :disable="claim.claimStateFk == resolvedStateId"
+                :loading="loading"
             />
 
             <QBtn
@@ -394,6 +412,7 @@ async function importToNewRefundTicket() {
                 :title="t('Change destination')"
                 icon="swap_horiz"
                 @click="dialogDestination = !dialogDestination"
+                :loading="loading"
             />
             <QBtn
                 color="primary"
@@ -404,6 +423,7 @@ async function importToNewRefundTicket() {
                 icon="Upload"
                 @click="importToNewRefundTicket"
                 :disable="claim.claimStateFk == resolvedStateId"
+                :loading="loading"
             />
         </template>
     </CrudModel>
@@ -418,7 +438,7 @@ async function importToNewRefundTicket() {
                 </QItem>
             </QCardSection>
             <QItemSection>
-                <VnSelectFilter
+                <VnSelect
                     class="q-pa-sm"
                     v-model="claimDestinationFk"
                     :options="destinationTypes"
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 56717c628..e2450a5e5 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -37,23 +37,19 @@ const claimFilter = {
     ],
 };
 
-const workers = ref([]);
-const workersCopy = ref([]);
 const claimStates = ref([]);
 const claimStatesCopy = ref([]);
+const optionsList = ref([]);
 
-function setWorkers(data) {
-    workers.value = data;
-    workersCopy.value = data;
-}
+const workersOptions = ref([]);
 
 function setClaimStates(data) {
     claimStates.value = data;
     claimStatesCopy.value = data;
 }
-let optionsList;
+
 async function getEnumValues() {
-    optionsList = [{ id: null, description: t('claim.basicData.null') }];
+    optionsList.value = [{ id: null, description: t('claim.basicData.null') }];
     const { data } = await axios.get(`Applications/get-enum-values`, {
         params: {
             schema: 'vn',
@@ -62,29 +58,11 @@ async function getEnumValues() {
         },
     });
     for (let value of data)
-        optionsList.push({ id: value, description: t(`claim.basicData.${value}`) });
+        optionsList.value.push({ id: value, description: t(`claim.basicData.${value}`) });
 }
+
 getEnumValues();
 
-const workerFilter = {
-    options: workers,
-    filterFn: (options, value) => {
-        const search = value.toLowerCase();
-
-        if (value === '') return workersCopy.value;
-
-        return options.value.filter((row) => {
-            const id = row.id;
-            const name = row.name.toLowerCase();
-
-            const idMatches = id == search;
-            const nameMatches = name.indexOf(search) > -1;
-
-            return idMatches || nameMatches;
-        });
-    },
-};
-
 const statesFilter = {
     options: claimStates,
     filterFn: (options, value) => {
@@ -104,7 +82,7 @@ const statesFilter = {
     <FetchData
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
+        @on-fetch="(data) => (workersOptions = data)"
         auto-load
     />
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
@@ -133,18 +111,15 @@ const statesFilter = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QSelect
+                    <VnSelect
+                        :label="t('claim.basicData.assignedTo')"
                         v-model="data.workerFk"
-                        :options="workers"
+                        :options="workersOptions"
                         option-value="id"
                         option-label="name"
                         emit-value
-                        :label="t('claim.basicData.assignedTo')"
-                        map-options
-                        use-input
-                        @filter="(value, update) => filter(value, update, workerFilter)"
+                        auto-load
                         :rules="validate('claim.claimStateFk')"
-                        :input-debounce="0"
                     >
                         <template #before>
                             <QAvatar color="orange">
@@ -155,7 +130,7 @@ const statesFilter = {
                                 />
                             </QAvatar>
                         </template>
-                    </QSelect>
+                    </VnSelect>
                 </div>
                 <div class="col">
                     <QSelect
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 968f1e294..aae999117 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -11,6 +11,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { getUrl } from 'src/composables/getUrl';
+import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
 
 const $props = defineProps({
     id: {
@@ -73,8 +74,9 @@ const filter = {
 
 const STATE_COLOR = {
     pending: 'warning',
-    managed: 'info',
+    incomplete: 'info',
     resolved: 'positive',
+    canceled: 'negative',
 };
 function stateColor(code) {
     return STATE_COLOR[code];
@@ -127,17 +129,24 @@ onMounted(async () => {
             </VnLv>
             <VnLv
                 v-if="entity.worker"
-                :label="t('claim.card.assignedTo')"
+                :label="t('claim.card.attendedBy')"
                 :value="entity.worker.user.name"
             >
                 <template #value>
                     <VnUserLink
-                        :name="entity.worker.user.name"
+                        :name="entity.worker.user.nickname"
                         :worker-id="entity.worker.id"
                     />
                 </template>
             </VnLv>
-            <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
+            <VnLv :label="t('claim.card.zone')">
+                <template #value>
+                    <span class="link">
+                        {{ entity.ticket?.zone?.name }}
+                        <ZoneDescriptorProxy :id="entity.ticket?.zone?.id" />
+                    </span>
+                </template>
+            </VnLv>
             <VnLv
                 :label="t('claim.card.province')"
                 :value="entity.ticket?.address?.province?.name"
diff --git a/src/pages/Claim/Card/ClaimDevelopment.vue b/src/pages/Claim/Card/ClaimDevelopment.vue
index 9d38461f4..842d45050 100644
--- a/src/pages/Claim/Card/ClaimDevelopment.vue
+++ b/src/pages/Claim/Card/ClaimDevelopment.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import { tMobile } from 'composables/tMobile';
 
 const route = useRoute();
@@ -161,7 +161,7 @@ const columns = computed(() => [
                         auto-width
                         @keyup.ctrl.enter.stop="claimDevelopmentForm.saveChanges()"
                     >
-                        <VnSelectFilter
+                        <VnSelect
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
@@ -181,7 +181,7 @@ const columns = computed(() => [
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </QTd>
                 </template>
                 <template #item="props">
@@ -198,7 +198,7 @@ const columns = computed(() => [
                             <QList dense>
                                 <QItem v-for="col in props.cols" :key="col.name">
                                     <QItemSection>
-                                        <VnSelectFilter
+                                        <VnSelect
                                             :label="col.label"
                                             v-model="props.row[col.model]"
                                             :options="col.options"
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index c4a7db201..52fbfca98 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -45,20 +45,25 @@ async function onFetchClaim(data) {
 
 const amount = ref();
 const amountClaimed = ref();
-async function onFetch(rows) {
+async function onFetch(rows, newRows) {
+    if (newRows) rows = newRows;
     amount.value = 0;
     amountClaimed.value = 0;
     if (!rows || !rows.length) return;
 
-    amount.value = rows.reduce(
-        (accumulator, { sale }) => accumulator + sale.price * sale.quantity,
-        0
-    );
+    for (const row of rows) {
+        const { sale } = row;
+        amount.value = amount.value + totalRow(sale);
+        const price = row.quantity * sale.price;
+        const discount = (sale.discount * price) / 100;
+        amountClaimed.value = amountClaimed.value + (price - discount);
+    }
+}
 
-    amountClaimed.value = rows.reduce(
-        (accumulator, line) => accumulator + line.sale.price * line.quantity,
-        0
-    );
+function totalRow({ price, quantity, discount }) {
+    const amount = price * quantity;
+    const appliedDiscount = (discount * amount) / 100;
+    return amount - appliedDiscount;
 }
 
 const columns = computed(() => [
@@ -102,12 +107,7 @@ const columns = computed(() => [
     {
         name: 'total',
         label: t('Total'),
-        field: ({ sale }) => {
-            const amount = sale.price * sale.quantity;
-            const appliedDiscount = (sale.discount * amount) / 100;
-
-            return amount - appliedDiscount;
-        },
+        field: ({ sale }) => totalRow(sale),
         format: (value) => toCurrency(value),
         sortable: true,
     },
@@ -129,6 +129,7 @@ async function updateDiscount({ saleFk, discount, canceller }) {
     await axios.post(query, body, {
         signal: canceller.signal,
     });
+    await claimLinesForm.value.reload();
 }
 
 function onUpdateDiscount(response) {
@@ -151,8 +152,11 @@ function showImportDialog() {
         .onOk(() => claimLinesForm.value.reload());
 }
 
-function saveWhenHasChanges() {
-    claimLinesForm.value.getChanges().updates && claimLinesForm.value.onSubmit();
+async function saveWhenHasChanges() {
+    if (claimLinesForm.value.getChanges().updates) {
+        await claimLinesForm.value.onSubmit();
+        await claimLinesForm.value.reload();
+    }
 }
 </script>
 <template>
@@ -188,7 +192,6 @@ function saveWhenHasChanges() {
             save-url="ClaimBeginnings/crud"
             :filter="linesFilter"
             @on-fetch="onFetch"
-            @save-changes="onFetch"
             v-model:selected="selected"
             :default-save="false"
             :default-reset="false"
diff --git a/src/pages/Claim/Card/ClaimLinesImport.vue b/src/pages/Claim/Card/ClaimLinesImport.vue
index e5c0e38fa..539d11a7f 100644
--- a/src/pages/Claim/Card/ClaimLinesImport.vue
+++ b/src/pages/Claim/Card/ClaimLinesImport.vue
@@ -35,6 +35,7 @@ const columns = computed(() => [
         label: t('Quantity'),
         field: (row) => row.quantity,
         sortable: true,
+        default: 0,
     },
     {
         name: 'description',
@@ -75,7 +76,6 @@ async function importLines() {
     const body = sales.map((row) => ({
         claimFk: route.params.id,
         saleFk: row.saleFk,
-        quantity: row.quantity,
     }));
 
     canceller = new AbortController();
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index f45d5765d..36a26008e 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
@@ -13,8 +13,11 @@ import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import axios from 'axios';
+import dashIfEmpty from 'src/filters/dashIfEmpty';
 
 const route = useRoute();
+const router = useRouter();
 const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
@@ -27,7 +30,7 @@ const $props = defineProps({
 });
 
 const entityId = computed(() => $props.id || route.params.id);
-
+const ClaimStates = ref([]);
 const claimUrl = ref();
 const salixUrl = ref();
 const claimDmsRef = ref();
@@ -99,8 +102,9 @@ const detailsColumns = ref([
 
 const STATE_COLOR = {
     pending: 'warning',
-    managed: 'info',
+    incomplete: 'info',
     resolved: 'positive',
+    canceled: 'negative',
 };
 function stateColor(code) {
     return STATE_COLOR[code];
@@ -162,6 +166,10 @@ function openDialog(dmsId) {
     multimediaSlide.value = dmsId;
     multimediaDialog.value = true;
 }
+async function changeState(value) {
+    await axios.patch(`Claims/updateClaim/${entityId.value}`, { claimStateFk: value });
+    router.go(route.fullPath);
+}
 </script>
 
 <template>
@@ -171,6 +179,7 @@ function openDialog(dmsId) {
         @on-fetch="(data) => setClaimDms(data)"
         ref="claimDmsRef"
     />
+    <FetchData url="ClaimStates" @on-fetch="(data) => (ClaimStates = data)" auto-load />
     <CardSummary
         ref="summary"
         :url="`Claims/${entityId}/getSummary`"
@@ -180,6 +189,36 @@ function openDialog(dmsId) {
         <template #header="{ entity: { claim } }">
             {{ claim.id }} - {{ claim.client.name }} ({{ claim.client.id }})
         </template>
+        <template #header-right>
+            <QBtnDropdown
+                side
+                top
+                color="black"
+                text-color="white"
+                :label="t('ticket.summary.changeState')"
+            >
+                <QList>
+                    <QVirtualScroll
+                        style="max-height: 300px"
+                        :items="ClaimStates"
+                        separator
+                        v-slot="{ item, index }"
+                    >
+                        <QItem
+                            :key="index"
+                            dense
+                            clickable
+                            v-close-popup
+                            @click="changeState(item.id)"
+                        >
+                            <QItemSection>
+                                <QItemLabel>{{ item.description }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QVirtualScroll>
+                </QList>
+            </QBtnDropdown>
+        </template>
         <template #body="{ entity: { claim, salesClaimed, developments } }">
             <QCard class="vn-one">
                 <VnTitle
@@ -223,7 +262,7 @@ function openDialog(dmsId) {
                 </VnLv>
                 <VnLv
                     :label="t('claim.basicData.pickup')"
-                    :value="t(`claim.basicData.${claim.pickup}`)"
+                    :value="`${dashIfEmpty(claim.pickup)}`"
                 />
             </QCard>
             <QCard class="vn-three">
@@ -447,4 +486,8 @@ function openDialog(dmsId) {
 .zindex {
     z-index: 1;
 }
+
+.change-state {
+    width: 10%;
+}
 </style>
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index ee702ffdd..6b9e92d97 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 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';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
@@ -64,7 +64,7 @@ const states = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="workers">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Salesperson')"
                         v-model="params.salesPersonFk"
                         @update:model-value="searchFn()"
@@ -87,7 +87,7 @@ const states = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="workers">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Attender')"
                         v-model="params.attenderFk"
                         @update:model-value="searchFn()"
@@ -110,7 +110,7 @@ const states = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="workers">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Responsible')"
                         v-model="params.claimResponsibleFk"
                         @update:model-value="searchFn()"
@@ -133,7 +133,7 @@ const states = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="states">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('State')"
                         v-model="params.claimStateFk"
                         @update:model-value="searchFn()"
@@ -149,6 +149,15 @@ const states = ref();
                     />
                 </QItemSection>
             </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.myTeam"
+                        :label="t('myTeam')"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
             <QSeparator />
             <QExpansionItem :label="t('More options')" expand-separator>
                 <!-- <QItem>
@@ -192,6 +201,7 @@ en:
         claimResponsibleFk: Responsible
         claimStateFk: State
         created: Created
+    myTeam: My team
 es:
     params:
         search: Contiene
@@ -211,4 +221,5 @@ es:
     Item: Artículo
     Created: Creada
     More options: Más opciones
+    myTeam: Mi equipo
 </i18n>
diff --git a/src/pages/Customer/Card/CustomerBalance.vue b/src/pages/Customer/Card/CustomerBalance.vue
index f7d22a345..2c1d6eccc 100644
--- a/src/pages/Customer/Card/CustomerBalance.vue
+++ b/src/pages/Customer/Card/CustomerBalance.vue
@@ -15,7 +15,7 @@ import { usePrintService } from 'src/composables/usePrintService';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
@@ -316,7 +316,7 @@ const sendEmailAction = () => {
 
     <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
         <div class="q-mt-xl q-px-md">
-            <VnSelectFilter
+            <VnSelect
                 :label="t('Company')"
                 :options="companiesOptions"
                 @update:model-value="updateCompanyId($event)"
diff --git a/src/pages/Customer/Card/CustomerBillingData.vue b/src/pages/Customer/Card/CustomerBillingData.vue
index a47dae71f..5cc0c898c 100644
--- a/src/pages/Customer/Card/CustomerBillingData.vue
+++ b/src/pages/Customer/Card/CustomerBillingData.vue
@@ -7,7 +7,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 
@@ -49,7 +49,7 @@ const getBankEntities = (data, formData) => {
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Billing data')"
                         :options="payMethods"
                         hide-selected
diff --git a/src/pages/Customer/Card/CustomerContacts.vue b/src/pages/Customer/Card/CustomerContacts.vue
index 6fb891dff..cd4d553df 100644
--- a/src/pages/Customer/Card/CustomerContacts.vue
+++ b/src/pages/Customer/Card/CustomerContacts.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -11,10 +11,6 @@ const route = useRoute();
 const { t } = useI18n();
 
 const customerContactsRef = ref(null);
-
-onMounted(() => {
-    if (customerContactsRef.value) customerContactsRef.value.reload();
-});
 </script>
 <template>
     <div class="full-width flex justify-center">
@@ -30,6 +26,7 @@ onMounted(() => {
                 model="CustomerContacts"
                 ref="customerContactsRef"
                 url="ClientContacts"
+                auto-load
             >
                 <template #body="{ rows }">
                     <QCard class="q-pl-lg q-py-md">
diff --git a/src/pages/Customer/Card/CustomerFiscalData.vue b/src/pages/Customer/Card/CustomerFiscalData.vue
index f74cbc2c4..467ea1845 100644
--- a/src/pages/Customer/Card/CustomerFiscalData.vue
+++ b/src/pages/Customer/Card/CustomerFiscalData.vue
@@ -7,7 +7,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 
 const { t } = useI18n();
@@ -69,7 +69,7 @@ function handleLocation(data, location) {
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Sage tax type')"
                         :options="typesTaxes"
                         hide-selected
@@ -79,7 +79,7 @@ function handleLocation(data, location) {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Sage transaction type')"
                         :options="typesTransactions"
                         hide-selected
@@ -97,7 +97,7 @@ function handleLocation(data, location) {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </div>
             </VnRow>
 
diff --git a/src/pages/Customer/Card/CustomerLog.vue b/src/pages/Customer/Card/CustomerLog.vue
index c237e5fd5..4f0ee2de7 100644
--- a/src/pages/Customer/Card/CustomerLog.vue
+++ b/src/pages/Customer/Card/CustomerLog.vue
@@ -8,7 +8,7 @@ import { useStateStore } from 'stores/useStateStore';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -139,7 +139,7 @@ const setInq = (value, status) => {
                     </QIcon>
                 </template>
             </VnInput>
-            <VnSelectFilter
+            <VnSelect
                 :label="t('Entity')"
                 :options="[]"
                 class="q-mt-md"
@@ -179,7 +179,7 @@ const setInq = (value, status) => {
                 />
             </div>
 
-            <VnSelectFilter
+            <VnSelect
                 :label="t('User')"
                 :options="[]"
                 class="q-mt-sm"
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index f26148ef7..c6486780d 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -5,7 +5,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
@@ -53,7 +53,7 @@ function handleLocation(data, location) {
                         <QInput :label="t('Comercial name')" v-model="data.name" />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Salesperson')"
                             :options="workersOptions"
                             hide-selected
@@ -65,7 +65,7 @@ function handleLocation(data, location) {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Business type')"
                             :options="businessTypesOptions"
                             hide-selected
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 7c1afa78e..206832f46 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 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';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
@@ -69,7 +69,7 @@ const zones = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="workers">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Salesperson')"
                         v-model="params.salesPersonFk"
                         @update:model-value="searchFn()"
@@ -92,7 +92,7 @@ const zones = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="provinces">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Province')"
                         v-model="params.provinceFk"
                         @update:model-value="searchFn()"
@@ -139,7 +139,7 @@ const zones = ref();
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
                     <QItemSection v-if="zones">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Zone')"
                             v-model="params.zoneFk"
                             @update:model-value="searchFn()"
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
index 3ba7f6555..9d173087b 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@@ -6,7 +6,7 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -48,7 +48,7 @@ const authors = ref();
         <template #body="{ params }">
             <QItem class="q-mb-sm q-mt-sm">
                 <QItemSection v-if="clients">
-                    <VnSelectFilter
+                    <VnSelect
                         :input-debounce="0"
                         :label="t('Client')"
                         :options="clients"
@@ -71,7 +71,7 @@ const authors = ref();
 
             <QItem class="q-mb-sm">
                 <QItemSection v-if="salespersons">
-                    <VnSelectFilter
+                    <VnSelect
                         :input-debounce="0"
                         :label="t('Salesperson')"
                         :options="salespersons"
@@ -94,7 +94,7 @@ const authors = ref();
 
             <QItem class="q-mb-sm">
                 <QItemSection v-if="countries">
-                    <VnSelectFilter
+                    <VnSelect
                         :input-debounce="0"
                         :label="t('Country')"
                         :options="countries"
@@ -139,7 +139,7 @@ const authors = ref();
 
             <QItem class="q-mb-sm">
                 <QItemSection v-if="authors">
-                    <VnSelectFilter
+                    <VnSelect
                         :input-debounce="0"
                         :label="t('Author')"
                         :options="authors"
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue b/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
index df898e7c1..1be20f26c 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 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';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import { dateRange } from 'src/filters';
@@ -169,7 +169,7 @@ const shouldRenderColumn = (colName) => {
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
                     <QItemSection v-if="clients">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Social name')"
                             v-model="params.socialName"
                             @update:model-value="searchFn()"
@@ -201,7 +201,7 @@ const shouldRenderColumn = (colName) => {
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="workers">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="
                             t('customer.extendedList.tableVisibleColumns.salesPersonFk')
                         "
@@ -270,7 +270,7 @@ const shouldRenderColumn = (colName) => {
             </QItem>
             <QItem v-if="shouldRenderColumn('countryFk')">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('customer.extendedList.tableVisibleColumns.countryFk')"
                         v-model="params.countryFk"
                         @update:model-value="searchFn()"
@@ -287,7 +287,7 @@ const shouldRenderColumn = (colName) => {
             </QItem>
             <QItem v-if="shouldRenderColumn('provinceFk')">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('customer.extendedList.tableVisibleColumns.provinceFk')"
                         v-model="params.provinceFk"
                         @update:model-value="searchFn()"
@@ -342,7 +342,7 @@ const shouldRenderColumn = (colName) => {
             </QItem>
             <QItem v-if="shouldRenderColumn('businessTypeFk')">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="
                             t('customer.extendedList.tableVisibleColumns.businessTypeFk')
                         "
@@ -361,7 +361,7 @@ const shouldRenderColumn = (colName) => {
             </QItem>
             <QItem v-if="shouldRenderColumn('payMethodFk')">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="
                             t('customer.extendedList.tableVisibleColumns.payMethodFk')
                         "
@@ -380,7 +380,7 @@ const shouldRenderColumn = (colName) => {
             </QItem>
             <QItem v-if="shouldRenderColumn('sageTaxTypeFk')">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="
                             t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk')
                         "
@@ -399,7 +399,7 @@ const shouldRenderColumn = (colName) => {
             </QItem>
             <QItem v-if="shouldRenderColumn('sageTransactionTypeFk')">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="
                             t(
                                 'customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'
diff --git a/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue b/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
index 320fc2058..a7c8635e7 100644
--- a/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
+++ b/src/pages/Customer/Notifications/CustomerNotificationsFilter.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -52,7 +52,7 @@ const clients = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="clients">
-                    <VnSelectFilter
+                    <VnSelect
                         :input-debounce="0"
                         :label="t('Social name')"
                         :options="clients"
@@ -76,7 +76,7 @@ const clients = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="cities">
-                    <VnSelectFilter
+                    <VnSelect
                         :input-debounce="0"
                         :label="t('City')"
                         :options="cities"
diff --git a/src/pages/Customer/components/CustomerAddressCreate.vue b/src/pages/Customer/components/CustomerAddressCreate.vue
index 752024944..d92377f54 100644
--- a/src/pages/Customer/components/CustomerAddressCreate.vue
+++ b/src/pages/Customer/components/CustomerAddressCreate.vue
@@ -9,7 +9,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
@@ -101,7 +101,7 @@ function handleLocation(data, location) {
             />
 
             <div class="row justify-between q-gutter-md q-mb-md">
-                <VnSelectFilter
+                <VnSelect
                     :label="t('Agency')"
                     :options="agencyModes"
                     :rules="validate('route.agencyFk')"
@@ -121,7 +121,7 @@ function handleLocation(data, location) {
             </div>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnSelectFilter
+                <VnSelect
                     :label="t('Incoterms')"
                     :options="incoterms"
                     hide-selected
diff --git a/src/pages/Customer/components/CustomerAddressEdit.vue b/src/pages/Customer/components/CustomerAddressEdit.vue
index 8f4be1342..734924993 100644
--- a/src/pages/Customer/components/CustomerAddressEdit.vue
+++ b/src/pages/Customer/components/CustomerAddressEdit.vue
@@ -9,7 +9,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
@@ -180,12 +180,15 @@ function handleLocation(data, location) {
                         :rules="validate('Worker.postcode')"
                         :roles-allowed-to-create="['deliveryAssistant']"
                         :options="postcodesOptions"
-                        v-model="data.location"
+                        v-model="data.postalCode"
                         @update:model-value="(location) => handleLocation(data, location)"
                     ></VnLocation>
                 </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Agency')"
                         :options="agencyModes"
                         :rules="validate('route.agencyFk')"
@@ -202,10 +205,9 @@ function handleLocation(data, location) {
                     <VnInput :label="t('Mobile')" clearable v-model="data.mobile" />
                 </div>
             </VnRow>
-
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Incoterms')"
                         :options="incoterms"
                         hide-selected
@@ -229,7 +231,6 @@ function handleLocation(data, location) {
                     </VnSelectDialog>
                 </div>
             </VnRow>
-
             <h4 class="q-mb-xs">{{ t('Notes') }}</h4>
             <VnRow
                 :key="index"
@@ -237,7 +238,7 @@ function handleLocation(data, location) {
                 v-for="(note, index) in notes"
             >
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Observation type')"
                         :options="observationTypes"
                         hide-selected
diff --git a/src/pages/Customer/components/CustomerCreditCreate.vue b/src/pages/Customer/components/CustomerCreditCreate.vue
index ae6d4de89..729deb258 100644
--- a/src/pages/Customer/components/CustomerCreditCreate.vue
+++ b/src/pages/Customer/components/CustomerCreditCreate.vue
@@ -13,7 +13,6 @@ const router = useRouter();
 const initialData = ref({});
 
 const setClient = (data) => {
-    console.log(data.credit);
     initialData.value.credit = data.credit;
 };
 
diff --git a/src/pages/Customer/components/CustomerFileManagementCreate.vue b/src/pages/Customer/components/CustomerFileManagementCreate.vue
index 8970eaaaf..bc218d1b2 100644
--- a/src/pages/Customer/components/CustomerFileManagementCreate.vue
+++ b/src/pages/Customer/components/CustomerFileManagementCreate.vue
@@ -11,7 +11,7 @@ import useNotify from 'src/composables/useNotify';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { notify } = useNotify();
@@ -152,7 +152,7 @@ const toCustomerFileManagement = () => {
                         />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Company')"
                             :options="optionsCompanies"
                             :rules="validate('entry.companyFk')"
@@ -165,7 +165,7 @@ const toCustomerFileManagement = () => {
 
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Warehouse')"
                             :options="optionsWarehouses"
                             option-label="name"
@@ -174,7 +174,7 @@ const toCustomerFileManagement = () => {
                         />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Type')"
                             :options="optionsDmsTypes"
                             option-label="name"
diff --git a/src/pages/Customer/components/CustomerFileManagementEdit.vue b/src/pages/Customer/components/CustomerFileManagementEdit.vue
index b5e0d4b7d..d21305e32 100644
--- a/src/pages/Customer/components/CustomerFileManagementEdit.vue
+++ b/src/pages/Customer/components/CustomerFileManagementEdit.vue
@@ -10,7 +10,7 @@ import useNotify from 'src/composables/useNotify';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { notify } = useNotify();
@@ -128,7 +128,7 @@ const toCustomerFileManagement = () => {
                         />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Company')"
                             :options="optionsCompanies"
                             :rules="validate('entry.companyFk')"
@@ -141,7 +141,7 @@ const toCustomerFileManagement = () => {
 
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Warehouse')"
                             :options="optionsWarehouses"
                             option-label="name"
@@ -150,7 +150,7 @@ const toCustomerFileManagement = () => {
                         />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Type')"
                             :options="optionsDmsTypes"
                             option-label="name"
diff --git a/src/pages/Customer/components/CustomerGreugeCreate.vue b/src/pages/Customer/components/CustomerGreugeCreate.vue
index d8915dc14..aefc4b891 100644
--- a/src/pages/Customer/components/CustomerGreugeCreate.vue
+++ b/src/pages/Customer/components/CustomerGreugeCreate.vue
@@ -8,7 +8,7 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -74,7 +74,7 @@ const toCustomerGreuges = () => {
                     <VnInput :label="t('Comment')" clearable v-model="data.description" />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Type')"
                         :options="greugeTypes"
                         hide-selected
diff --git a/src/pages/Customer/components/CustomerNewPayment.vue b/src/pages/Customer/components/CustomerNewPayment.vue
index 8352ac362..07cb692b4 100644
--- a/src/pages/Customer/components/CustomerNewPayment.vue
+++ b/src/pages/Customer/components/CustomerNewPayment.vue
@@ -9,7 +9,7 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
@@ -143,7 +143,7 @@ const onDataSaved = async () => {
                         />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Company')"
                             :options="companyOptions"
                             :required="true"
@@ -158,7 +158,7 @@ const onDataSaved = async () => {
 
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Bank')"
                             :options="bankOptions"
                             :required="true"
@@ -177,7 +177,7 @@ const onDataSaved = async () => {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </div>
                     <div class="col">
                         <VnInput
diff --git a/src/pages/Customer/components/CustomerSamplesCreate.vue b/src/pages/Customer/components/CustomerSamplesCreate.vue
index 4a28a3061..be614aa0b 100644
--- a/src/pages/Customer/components/CustomerSamplesCreate.vue
+++ b/src/pages/Customer/components/CustomerSamplesCreate.vue
@@ -12,7 +12,7 @@ import useNotify from 'src/composables/useNotify';
 
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import CustomerSamplesPreview from 'src/pages/Customer/components/CustomerSamplesPreview.vue';
@@ -253,7 +253,7 @@ const toCustomerSamples = () => {
         <QCard class="card-width q-pa-lg">
             <QForm>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Sample')"
                         :options="optionsSamplesVisible"
                         @update:model-value="setSampleType"
@@ -306,7 +306,7 @@ const toCustomerSamples = () => {
                     v-if="sampleType?.hasCompany || sampleType?.datepickerEnabled"
                 >
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Company')"
                             :options="optionsCompanies"
                             :rules="validate('entry.companyFk')"
@@ -319,7 +319,7 @@ const toCustomerSamples = () => {
                         />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Address')"
                             :options="optionsClientsAddressess"
                             hide-selected
@@ -345,7 +345,7 @@ const toCustomerSamples = () => {
                                     <QTooltip>{{ t('Edit address') }}</QTooltip>
                                 </QIcon>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </div>
                 </VnRow>
 
diff --git a/src/pages/Department/Card/DepartmentBasicData.vue b/src/pages/Department/Card/DepartmentBasicData.vue
index 3b30a97e6..4210a62bc 100644
--- a/src/pages/Department/Card/DepartmentBasicData.vue
+++ b/src/pages/Department/Card/DepartmentBasicData.vue
@@ -7,7 +7,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -68,7 +68,7 @@ const clientsOptions = ref([]);
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('department.bossDepartment')"
                         v-model="data.workerFk"
                         :options="workersOptions"
@@ -80,7 +80,7 @@ const clientsOptions = ref([]);
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('department.selfConsumptionCustomer')"
                         v-model="data.clientFk"
                         :options="clientsOptions"
diff --git a/src/pages/Entry/Card/EntryBasicData.vue b/src/pages/Entry/Card/EntryBasicData.vue
index 12e03fd32..3a6c72a4b 100644
--- a/src/pages/Entry/Card/EntryBasicData.vue
+++ b/src/pages/Entry/Card/EntryBasicData.vue
@@ -8,7 +8,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import FilterTravelForm from 'src/components/FilterTravelForm.vue';
 
@@ -69,7 +69,7 @@ const onFilterTravelSelected = (formData, id) => {
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('entry.basicData.supplier')"
                         v-model="data.supplierFk"
                         :options="suppliersOptions"
@@ -89,7 +89,7 @@ const onFilterTravelSelected = (formData, id) => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </div>
                 <div class="col">
                     <VnSelectDialog
@@ -141,7 +141,7 @@ const onFilterTravelSelected = (formData, id) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('entry.basicData.company')"
                         v-model="data.companyFk"
                         :options="companiesOptions"
@@ -155,7 +155,7 @@ const onFilterTravelSelected = (formData, id) => {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('entry.basicData.currency')"
                         v-model="data.currencyFk"
                         :options="currenciesOptions"
diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index 3b39840c8..fd431043f 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -6,7 +6,7 @@ import { QBtn } from 'quasar';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
@@ -59,7 +59,7 @@ const tableColumnComponents = computed(() => ({
         event: getInputEvents,
     },
     packagingFk: {
-        component: VnSelectFilter,
+        component: VnSelect,
         props: {
             'option-value': 'id',
             'option-label': 'id',
diff --git a/src/pages/Entry/Card/EntryBuysImport.vue b/src/pages/Entry/Card/EntryBuysImport.vue
index bd09eabe8..705f56b68 100644
--- a/src/pages/Entry/Card/EntryBuysImport.vue
+++ b/src/pages/Entry/Card/EntryBuysImport.vue
@@ -6,7 +6,7 @@ import { useI18n } from 'vue-i18n';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import FilterItemForm from 'src/components/FilterItemForm.vue';
 
@@ -269,7 +269,7 @@ const redirectToBuysView = () => {
                         </template>
                         <template #body-cell-packagingFk="{ row, col }">
                             <QTd auto-width>
-                                <VnSelectFilter
+                                <VnSelect
                                     v-model="row[col.field]"
                                     :options="col.options"
                                     :option-value="col.optionValue"
diff --git a/src/pages/Entry/Card/EntryNotes.vue b/src/pages/Entry/Card/EntryNotes.vue
index ae37b4b39..f07d0b233 100644
--- a/src/pages/Entry/Card/EntryNotes.vue
+++ b/src/pages/Entry/Card/EntryNotes.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import CrudModel from 'components/CrudModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { params } = useRoute();
 const { t } = useI18n();
@@ -21,10 +21,6 @@ const sortEntryObservationOptions = (data) => {
     );
 };
 
-onMounted(() => {
-    if (entryObservationsRef.value) entryObservationsRef.value.reload();
-});
-
 const columns = computed(() => [
     {
         name: 'observationType',
@@ -65,6 +61,7 @@ const columns = computed(() => [
         ref="entryObservationsRef"
         :data-required="{ entryFk: params.id }"
         v-model:selected="selected"
+        auto-load
     >
         <template #body="{ rows, validate }">
             <QTable
@@ -80,7 +77,7 @@ const columns = computed(() => [
             >
                 <template #body-cell-observationType="{ row, col }">
                     <QTd>
-                        <VnSelectFilter
+                        <VnSelect
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
@@ -111,7 +108,7 @@ const columns = computed(() => [
                             <QList dense>
                                 <QItem>
                                     <QItemSection>
-                                        <VnSelectFilter
+                                        <VnSelect
                                             v-model="props.row.observationTypeFk"
                                             :options="entryObservationsOptions"
                                             option-value="id"
diff --git a/src/pages/Entry/EntryCreate.vue b/src/pages/Entry/EntryCreate.vue
index 8c434217a..b04b8e8b7 100644
--- a/src/pages/Entry/EntryCreate.vue
+++ b/src/pages/Entry/EntryCreate.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router';
 
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
@@ -80,7 +80,7 @@ const redirectToEntryBasicData = (_, { id }) => {
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Supplier')"
                             class="full-width"
                             v-model="data.supplierFk"
@@ -101,12 +101,12 @@ const redirectToEntryBasicData = (_, { id }) => {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Travel')"
                             class="full-width"
                             v-model="data.travelFk"
@@ -133,12 +133,12 @@ const redirectToEntryBasicData = (_, { id }) => {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Company')"
                             class="full-width"
                             v-model="data.companyFk"
diff --git a/src/pages/Entry/EntryFilter.vue b/src/pages/Entry/EntryFilter.vue
index 86c1f6b23..194ce0a28 100644
--- a/src/pages/Entry/EntryFilter.vue
+++ b/src/pages/Entry/EntryFilter.vue
@@ -5,7 +5,7 @@ import { onMounted } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
 
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -99,7 +99,7 @@ onMounted(async () => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.companyFk')"
                         v-model="params.companyFk"
                         @update:model-value="searchFn()"
@@ -115,7 +115,7 @@ onMounted(async () => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.currencyFk')"
                         v-model="params.currencyFk"
                         @update:model-value="searchFn()"
@@ -131,7 +131,7 @@ onMounted(async () => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.supplierFk')"
                         v-model="params.supplierFk"
                         @update:model-value="searchFn()"
@@ -152,7 +152,7 @@ onMounted(async () => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>
diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index 78f578686..c3e83c96f 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -9,7 +9,7 @@ import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import EntryLatestBuysFilter from './EntryLatestBuysFilter.vue';
 import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
 
@@ -218,7 +218,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             type: 'select',
             filterValue: null,
             event: getInputEvents,
@@ -237,7 +237,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             type: 'select',
             filterValue: null,
             event: getInputEvents,
@@ -256,7 +256,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             type: 'select',
             filterValue: null,
             event: getInputEvents,
@@ -309,7 +309,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             type: 'select',
             filterValue: null,
             event: getInputEvents,
@@ -513,7 +513,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             type: 'select',
             filterValue: null,
             event: getInputEvents,
diff --git a/src/pages/Entry/EntryLatestBuysFilter.vue b/src/pages/Entry/EntryLatestBuysFilter.vue
index 9b2b5ae28..f83bb167a 100644
--- a/src/pages/Entry/EntryLatestBuysFilter.vue
+++ b/src/pages/Entry/EntryLatestBuysFilter.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';
 
 const { t } = useI18n();
@@ -39,7 +39,7 @@ const suppliersOptions = ref([]);
         <template #body="{ params, searchFn }">
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('components.itemsFilterPanel.salesPersonFk')"
                         v-model="params.salesPersonFk"
                         :options="itemTypeWorkersOptions"
@@ -55,7 +55,7 @@ const suppliersOptions = ref([]);
             </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('components.itemsFilterPanel.supplierFk')"
                         v-model="params.supplierFk"
                         :options="suppliersOptions"
@@ -77,7 +77,7 @@ const suppliersOptions = ref([]);
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem class="q-my-md">
@@ -128,6 +128,69 @@ const suppliersOptions = ref([]);
                     />
                 </QItemSection>
             </QItem>
+
+            <QItem
+                v-for="(value, index) in tagValues"
+                :key="value"
+                class="q-mt-md filter-value"
+            >
+                <QItemSection class="col">
+                    <VnSelect
+                        :label="t('params.tag')"
+                        v-model="value.selectedTag"
+                        :options="tagOptions"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                        :is-clearable="false"
+                        @update:model-value="getSelectedTagValues(value)"
+                    />
+                </QItemSection>
+                <QItemSection class="col">
+                    <VnSelect
+                        v-if="!value?.selectedTag?.isFree && value.valueOptions"
+                        :label="t('params.value')"
+                        v-model="value.value"
+                        :options="value.valueOptions || []"
+                        option-value="value"
+                        option-label="value"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        use-input
+                        :disable="!value"
+                        :is-clearable="false"
+                        class="filter-input"
+                        @update:model-value="applyTags(params, searchFn)"
+                    />
+                    <VnInput
+                        v-else
+                        v-model="value.value"
+                        :label="t('params.value')"
+                        :disable="!value"
+                        is-outlined
+                        class="filter-input"
+                        :is-clearable="false"
+                        @keyup.enter="applyTags(params, searchFn)"
+                    />
+                </QItemSection>
+                <QIcon
+                    name="delete"
+                    class="filter-icon"
+                    @click="removeTag(index, params, searchFn)"
+                />
+            </QItem>
+            <QItem class="q-mt-lg">
+                <QIcon
+                    name="add_circle"
+                    class="filter-icon"
+                    @click="tagValues.push({})"
+                />
+            </QItem>
         </template>
     </ItemsFilterPanel>
 </template>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
index f557c8ef4..0a676b500 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInBasicData.vue
@@ -7,7 +7,7 @@ import { useArrayData } from 'src/composables/useArrayData';
 import { downloadFile } from 'src/composables/downloadFile';
 
 import FormModel from 'components/FormModel.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'src/components/FetchData.vue';
 
 import axios from 'axios';
@@ -183,7 +183,7 @@ async function upsert() {
         <template #form="{ data }">
             <div class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('supplierFk')"
                         v-model="data.supplierFk"
                         option-value="id"
@@ -202,7 +202,7 @@ async function upsert() {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </div>
                 <div class="col">
                     <QInput
@@ -401,7 +401,7 @@ async function upsert() {
             </div>
             <div class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Currency')"
                         v-model="data.currencyFk"
                         :options="currencies"
@@ -410,7 +410,7 @@ async function upsert() {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         v-if="companiesRef"
                         :label="t('Company')"
                         v-model="data.companyFk"
@@ -451,7 +451,7 @@ async function upsert() {
                         clearable
                         clear-icon="close"
                     />
-                    <VnSelectFilter
+                    <VnSelect
                         class="full-width q-pa-xs"
                         :label="`${t('Company')}*`"
                         v-model="dms.companyId"
@@ -462,7 +462,7 @@ async function upsert() {
                     />
                 </QItem>
                 <QItem>
-                    <VnSelectFilter
+                    <VnSelect
                         class="full-width q-pa-xs"
                         :label="`${t('Warehouse')}*`"
                         v-model="dms.warehouseId"
@@ -471,7 +471,7 @@ async function upsert() {
                         option-label="name"
                         :rules="[requiredFieldRule]"
                     />
-                    <VnSelectFilter
+                    <VnSelect
                         class="full-width q-pa-xs"
                         :label="`${t('Type')}*`"
                         v-model="dms.dmsTypeId"
@@ -560,7 +560,7 @@ async function upsert() {
                         :label="t('Reference')"
                         v-model="dms.reference"
                     />
-                    <VnSelectFilter
+                    <VnSelect
                         class="full-width q-pa-xs"
                         :label="`${t('Company')}*`"
                         v-model="dms.companyId"
@@ -571,7 +571,7 @@ async function upsert() {
                     />
                 </QItem>
                 <QItem>
-                    <VnSelectFilter
+                    <VnSelect
                         class="full-width q-pa-xs"
                         :label="`${t('Warehouse')}*`"
                         v-model="dms.warehouseId"
@@ -580,7 +580,7 @@ async function upsert() {
                         option-label="name"
                         :rules="[requiredFieldRule]"
                     />
-                    <VnSelectFilter
+                    <VnSelect
                         class="full-width q-pa-xs"
                         :label="`${t('Type')}*`"
                         v-model="dms.dmsTypeId"
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCorrective.vue b/src/pages/InvoiceIn/Card/InvoiceInCorrective.vue
index 1011dbd6d..3261086a2 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCorrective.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCorrective.vue
@@ -6,7 +6,7 @@ import { useArrayData } from 'src/composables/useArrayData';
 import { useCapitalize } from 'src/composables/useCapitalize';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -116,7 +116,7 @@ const onSave = (data) => data.deletes && router.push(`/invoice-in/${invoiceId}/s
             >
                 <template #body-cell-type="{ row, col }">
                     <QTd>
-                        <VnSelectFilter
+                        <VnSelect
                             class="q-pb-md"
                             v-model="row[col.model]"
                             :options="col.options"
@@ -128,7 +128,7 @@ const onSave = (data) => data.deletes && router.push(`/invoice-in/${invoiceId}/s
                 </template>
                 <template #body-cell-class="{ row, col }">
                     <QTd>
-                        <VnSelectFilter
+                        <VnSelect
                             class="q-pb-md"
                             v-model="row[col.model]"
                             :options="col.options"
@@ -141,7 +141,7 @@ const onSave = (data) => data.deletes && router.push(`/invoice-in/${invoiceId}/s
                 </template>
                 <template #body-cell-reason="{ row, col }">
                     <QTd>
-                        <VnSelectFilter
+                        <VnSelect
                             class="q-pb-md"
                             v-model="row[col.model]"
                             :options="col.options"
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
index 2c4a19be5..033963798 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue
@@ -15,7 +15,7 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import FetchData from 'src/components/FetchData.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import { useCapitalize } from 'src/composables/useCapitalize';
 
 const $props = defineProps({
@@ -480,7 +480,7 @@ const createInvoiceInCorrection = async () => {
                             v-model="entityId"
                             readonly
                         />
-                        <VnSelectFilter
+                        <VnSelect
                             :label="`${useCapitalize(t('globals.class'))}*`"
                             v-model="correctionFormData.invoiceClass"
                             :options="siiTypeInvoiceOuts"
@@ -490,7 +490,7 @@ const createInvoiceInCorrection = async () => {
                         />
                     </QItemSection>
                     <QItemSection>
-                        <VnSelectFilter
+                        <VnSelect
                             :label="`${useCapitalize(t('globals.type'))}*`"
                             v-model="correctionFormData.invoiceType"
                             :options="cplusRectificationTypes"
@@ -498,7 +498,7 @@ const createInvoiceInCorrection = async () => {
                             option-label="description"
                             :rules="[requiredFieldRule]"
                         />
-                        <VnSelectFilter
+                        <VnSelect
                             :label="`${useCapitalize(t('globals.reason'))}*`"
                             v-model="correctionFormData.invoiceReason"
                             :options="invoiceCorrectionTypes"
diff --git a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
index e71e48520..0e68b740f 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
@@ -7,7 +7,7 @@ import { toDate } from 'src/filters';
 import { useArrayData } from 'src/composables/useArrayData';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const route = useRoute();
@@ -70,7 +70,7 @@ const columns = computed(() => [
 const isNotEuro = (code) => code != 'EUR';
 
 async function insert() {
-    await axios.post('/InvoiceInDueDays/new ', { id: +invoiceId });
+    await axios.post('/InvoiceInDueDays/new', { id: +invoiceId });
     await invoiceInFormRef.value.reload();
 }
 </script>
@@ -143,7 +143,7 @@ async function insert() {
                 </template>
                 <template #body-cell-bank="{ row, col }">
                     <QTd>
-                        <VnSelectFilter
+                        <VnSelect
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
@@ -158,7 +158,7 @@ async function insert() {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </QTd>
                 </template>
                 <template #body-cell-amount="{ row }">
@@ -240,7 +240,7 @@ async function insert() {
                                     </QInput>
                                 </QItem>
                                 <QItem>
-                                    <VnSelectFilter
+                                    <VnSelect
                                         :label="t('Bank')"
                                         class="full-width"
                                         v-model="props.row['bankFk']"
@@ -257,7 +257,7 @@ async function insert() {
                                                 </QItemSection>
                                             </QItem>
                                         </template>
-                                    </VnSelectFilter>
+                                    </VnSelect>
                                 </QItem>
                                 <QItem>
                                     <QInput
diff --git a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
index 746ee130f..924356195 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { toCurrency } from 'src/filters';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 
 const { t } = useI18n();
@@ -147,7 +147,7 @@ function getTotal(type) {
                     </template>
                     <template #body-cell-code="{ row, col }">
                         <QTd>
-                            <VnSelectFilter
+                            <VnSelect
                                 v-model="row[col.model]"
                                 :options="col.options"
                                 option-value="id"
@@ -159,12 +159,12 @@ function getTotal(type) {
                                         {{ `${scope.opt.id}: ${scope.opt.description}` }}
                                     </QItem>
                                 </template>
-                            </VnSelectFilter>
+                            </VnSelect>
                         </QTd>
                     </template>
                     <template #body-cell-country="{ row, col }">
                         <QTd>
-                            <VnSelectFilter
+                            <VnSelect
                                 v-model="row[col.model]"
                                 :options="col.options"
                                 option-value="id"
@@ -181,7 +181,7 @@ function getTotal(type) {
                                 <QSeparator />
                                 <QList>
                                     <QItem>
-                                        <VnSelectFilter
+                                        <VnSelect
                                             :label="t('code')"
                                             class="full-width"
                                             v-model="props.row['intrastatFk']"
@@ -197,7 +197,7 @@ function getTotal(type) {
                                                     }}
                                                 </QItem>
                                             </template>
-                                        </VnSelectFilter>
+                                        </VnSelect>
                                     </QItem>
                                     <QItem
                                         v-for="(value, index) of [
@@ -216,7 +216,7 @@ function getTotal(type) {
                                         />
                                     </QItem>
                                     <QItem>
-                                        <VnSelectFilter
+                                        <VnSelect
                                             :label="t('country')"
                                             class="full-width"
                                             v-model="props.row['countryFk']"
diff --git a/src/pages/InvoiceIn/Card/InvoiceInVat.vue b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
index 5d3e82824..ae3aa9349 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInVat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInVat.vue
@@ -7,7 +7,7 @@ import axios from 'axios';
 import { useArrayData } from 'src/composables/useArrayData';
 import { toCurrency } from 'src/filters';
 import FetchData from 'src/components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import CrudModel from 'src/components/CrudModel.vue';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
@@ -196,7 +196,7 @@ async function addExpense() {
             >
                 <template #body-cell-expense="{ row, col }">
                     <QTd auto-width>
-                        <VnSelectFilter
+                        <VnSelect
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
@@ -225,7 +225,7 @@ async function addExpense() {
                                     </QTooltip>
                                 </QIcon>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </QTd>
                 </template>
                 <template #body-cell-taxablebase="{ row }">
@@ -244,7 +244,7 @@ async function addExpense() {
                 </template>
                 <template #body-cell-sageiva="{ row, col }">
                     <QTd>
-                        <VnSelectFilter
+                        <VnSelect
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
@@ -263,12 +263,12 @@ async function addExpense() {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </QTd>
                 </template>
                 <template #body-cell-sagetransaction="{ row, col }">
                     <QTd>
-                        <VnSelectFilter
+                        <VnSelect
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
@@ -289,7 +289,7 @@ async function addExpense() {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </QTd>
                 </template>
                 <template #body-cell-foreignvalue="{ row }">
@@ -312,7 +312,7 @@ async function addExpense() {
                             <QSeparator />
                             <QList>
                                 <QItem>
-                                    <VnSelectFilter
+                                    <VnSelect
                                         :label="t('Expense')"
                                         class="full-width"
                                         v-model="props.row['expenseFk']"
@@ -326,7 +326,7 @@ async function addExpense() {
                                                 {{ `${scope.opt.id}: ${scope.opt.name}` }}
                                             </QItem>
                                         </template>
-                                    </VnSelectFilter>
+                                    </VnSelect>
                                 </QItem>
                                 <QItem>
                                     <VnCurrency
@@ -344,7 +344,7 @@ async function addExpense() {
                                     />
                                 </QItem>
                                 <QItem>
-                                    <VnSelectFilter
+                                    <VnSelect
                                         :label="t('Sage iva')"
                                         class="full-width"
                                         v-model="props.row['taxTypeSageFk']"
@@ -365,10 +365,10 @@ async function addExpense() {
                                                 </QItemSection>
                                             </QItem>
                                         </template>
-                                    </VnSelectFilter>
+                                    </VnSelect>
                                 </QItem>
                                 <QItem>
-                                    <VnSelectFilter
+                                    <VnSelect
                                         class="full-width"
                                         v-model="props.row['transactionTypeSageFk']"
                                         :options="sageTransactionTypes"
@@ -388,7 +388,7 @@ async function addExpense() {
                                                 </QItemSection>
                                             </QItem>
                                         </template>
-                                    </VnSelectFilter>
+                                    </VnSelect>
                                 </QItem>
                                 <QItem>
                                     {{ toCurrency(taxRate(props.row)) }}
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 9b7c77f9d..8506ba2a8 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -40,7 +40,7 @@ const suppliersRef = ref();
         <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.supplierFk')"
                         v-model="params.supplierFk"
                         :options="suppliers"
@@ -51,7 +51,7 @@ const suppliersRef = ref();
                         outlined
                         rounded
                     >
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
index a000d6d4f..78ec03a16 100644
--- a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
@@ -83,7 +83,7 @@ onMounted(async () => {
                 :dark="true"
                 class="q-mb-sm"
             />
-            <VnSelectFilter
+            <VnSelect
                 v-if="clientsToInvoice === 'one'"
                 :label="t('client')"
                 v-model="formData.clientId"
@@ -105,7 +105,7 @@ onMounted(async () => {
                 :label="t('maxShipped')"
                 is-outlined
             />
-            <VnSelectFilter
+            <VnSelect
                 :label="t('company')"
                 v-model="formData.companyFk"
                 :options="companiesOptions"
@@ -116,7 +116,7 @@ onMounted(async () => {
                 outlined
                 rounded
             />
-            <VnSelectFilter
+            <VnSelect
                 :label="t('printer')"
                 v-model="formData.printer"
                 :options="printersOptions"
diff --git a/src/pages/Item/Card/CreateGenusForm.vue b/src/pages/Item/Card/CreateGenusForm.vue
new file mode 100644
index 000000000..637a1137e
--- /dev/null
+++ b/src/pages/Item/Card/CreateGenusForm.vue
@@ -0,0 +1,50 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['onDataSaved']);
+
+const genusInputRef = ref(null);
+const genusFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    genusInputRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        url-create="genera"
+        model="itemGenus"
+        :title="t('New genus')"
+        :form-initial-data="genusFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    ref="genusInputRef"
+                    :label="t('Latin genus name')"
+                    v-model="data.name"
+                    :required="true"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New genus: Nuevo genus
+    Latin genus name: Nombre del genus en latín
+</i18n>
diff --git a/src/pages/Item/Card/CreateSpecieForm.vue b/src/pages/Item/Card/CreateSpecieForm.vue
new file mode 100644
index 000000000..2731820ba
--- /dev/null
+++ b/src/pages/Item/Card/CreateSpecieForm.vue
@@ -0,0 +1,50 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+
+const { t } = useI18n();
+const emit = defineEmits(['onDataSaved']);
+
+const specieInputRef = ref(null);
+const specieFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    specieInputRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        url-create="species"
+        model="itemSpecie"
+        :title="t('New species')"
+        :form-initial-data="specieFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    ref="specieInputRef"
+                    :label="t('Latin species name')"
+                    v-model="data.name"
+                    :required="true"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New species: Nueva especie
+    Latin species name: Nombre de la especie en latín
+</i18n>
diff --git a/src/pages/Item/Card/ItemBarcode.vue b/src/pages/Item/Card/ItemBarcode.vue
new file mode 100644
index 000000000..b353d67c7
--- /dev/null
+++ b/src/pages/Item/Card/ItemBarcode.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { ref, nextTick } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CrudModel from 'src/components/CrudModel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const itemBarcodeRef = ref(null);
+
+const insertRow = () => {
+    itemBarcodeRef.value.insert();
+    focusLastInput();
+};
+
+const focusLastInput = () => {
+    nextTick(() => {
+        const inputs = document.querySelectorAll('[focusable-input]');
+        const lastInput = inputs[inputs.length - 1];
+        if (lastInput) lastInput.focus();
+    });
+};
+</script>
+<template>
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <CrudModel
+                :data-required="{ itemFk: route.params.id }"
+                :default-remove="false"
+                :filter="{
+                    fields: ['id', 'itemFk', 'code'],
+                    where: { itemFk: route.params.id },
+                }"
+                data-key="ItemBarcodes"
+                model="ItemBarcodes"
+                ref="itemBarcodeRef"
+                url="ItemBarcodes"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard class="q-px-lg q-py-md">
+                        <div
+                            v-for="(row, index) in rows"
+                            :key="index"
+                            class="q-mb-md full-width row items-center no-wrap"
+                        >
+                            <VnInput
+                                :label="t('Code')"
+                                v-model="row.code"
+                                class="full-width"
+                                focusable-input
+                            />
+                            <QIcon
+                                @click="itemBarcodeRef.remove([row])"
+                                class="cursor-pointer q-ml-md"
+                                color="primary"
+                                name="delete"
+                                size="sm"
+                            >
+                                <QTooltip class="text-no-wrap">
+                                    {{ t('Remove barcode') }}
+                                </QTooltip>
+                            </QIcon>
+                        </div>
+                        <QIcon
+                            @click="insertRow()"
+                            class="cursor-pointer fill-icon-on-hover"
+                            color="primary"
+                            name="add_circle"
+                            size="sm"
+                        >
+                            <QTooltip>
+                                {{ t('Add barcode') }}
+                            </QTooltip>
+                        </QIcon>
+                    </QCard>
+                </template>
+            </CrudModel>
+        </QPage>
+    </div>
+</template>
+
+<i18n>
+es:
+    Code: Código
+    Remove barcode: Quitar código de barras
+    Add barcode: Añadir código de barras
+</i18n>
diff --git a/src/pages/Item/Card/ItemBotanical.vue b/src/pages/Item/Card/ItemBotanical.vue
new file mode 100644
index 000000000..15492de9f
--- /dev/null
+++ b/src/pages/Item/Card/ItemBotanical.vue
@@ -0,0 +1,114 @@
+<script setup>
+import { ref, onMounted, reactive, computed } 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 VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import CreateGenusForm from './CreateGenusForm.vue';
+import CreateSpecieForm from './CreateSpecieForm.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const itemBotanicalsRef = ref(null);
+const itemGenusOptions = ref([]);
+const itemSpeciesOptions = ref([]);
+const itemBotanicals = ref([]);
+let itemBotanicalsForm = reactive({ itemFk: null });
+
+const onGenusCreated = (response, formData) => {
+    itemGenusOptions.value = [...itemGenusOptions.value, response];
+    formData.genusFk = response.id;
+};
+
+const onSpecieCreated = (response, formData) => {
+    itemSpeciesOptions.value = [...itemSpeciesOptions.value, response];
+    formData.specieFk = response.id;
+};
+const entityId = computed(() => {
+    return route.params.id;
+});
+onMounted(async () => {
+    itemBotanicalsForm.itemFk = entityId.value;
+    itemBotanicals.value = await itemBotanicalsRef.value.fetch();
+    if (itemBotanicals.value.length > 0)
+        Object.assign(itemBotanicalsForm, itemBotanicals.value[0]);
+});
+</script>
+<template>
+    <FetchData
+        ref="itemBotanicalsRef"
+        url="ItemBotanicals"
+        :filter="{
+            where: { itemFk: entityId },
+        }"
+        @on-fetch="(data) => (itemBotanicals = data)"
+    />
+    <FetchData
+        url="Genera"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (itemGenusOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Species"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (itemSpeciesOptions = data)"
+        auto-load
+    />
+    <FormModel
+        url-update="ItemBotanicals"
+        model="entry"
+        auto-load
+        :form-initial-data="itemBotanicalsForm"
+        :clear-store-on-unmount="false"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelectDialog
+                    :label="t('Genus')"
+                    v-model="data.genusFk"
+                    :options="itemGenusOptions"
+                    option-label="name"
+                    option-value="id"
+                    hide-selected
+                >
+                    <template #form>
+                        <CreateGenusForm
+                            @on-data-saved="
+                                (_, requestResponse) =>
+                                    onGenusCreated(requestResponse, data)
+                            "
+                        />
+                    </template>
+                </VnSelectDialog>
+                <VnSelectDialog
+                    :label="t('Species')"
+                    v-model="data.specieFk"
+                    :options="itemSpeciesOptions"
+                    option-label="name"
+                    option-value="id"
+                    hide-selected
+                >
+                    <template #form>
+                        <CreateSpecieForm
+                            @on-data-saved="
+                                (_, requestResponse) =>
+                                    onSpecieCreated(requestResponse, data)
+                            "
+                        />
+                    </template>
+                </VnSelectDialog>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Genus: Genus
+    Species: Especie
+</i18n>
diff --git a/src/pages/Item/Card/ItemDescriptor.vue b/src/pages/Item/Card/ItemDescriptor.vue
index 981de0632..305d29b8b 100644
--- a/src/pages/Item/Card/ItemDescriptor.vue
+++ b/src/pages/Item/Card/ItemDescriptor.vue
@@ -9,7 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import RegularizeStockForm from 'components/RegularizeStockForm.vue';
-import EditPictureForm from 'components/EditPictureForm.vue';
+import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
 
 import { useState } from 'src/composables/useState';
 import useCardDescription from 'src/composables/useCardDescription';
@@ -50,12 +50,10 @@ const entityId = computed(() => {
 });
 const image = ref(null);
 const regularizeStockFormDialog = ref(null);
-const editPhotoFormDialog = ref(null);
 const item = ref(null);
 const available = ref(null);
 const visible = ref(null);
 const _warehouseFk = ref(null);
-const warehouseText = ref(null);
 const salixUrl = ref();
 const warehouseFk = computed({
     get() {
@@ -63,14 +61,9 @@ const warehouseFk = computed({
     },
     set(val) {
         _warehouseFk.value = val;
-        if (val) {
-            updateStock();
-            getWarehouseName(val);
-        }
+        if (val) updateStock();
     },
 });
-const showWarehouseIconTooltip = ref(true);
-const showEditPhotoForm = ref(false);
 
 onMounted(async () => {
     await getItemAvatar();
@@ -90,26 +83,6 @@ const setData = (entity) => {
     data.value = useCardDescription(entity.name, entity.id);
 };
 
-const getWarehouseName = async (warehouseFk) => {
-    try {
-        showWarehouseIconTooltip.value = false;
-
-        const filter = {
-            where: { id: warehouseFk },
-        };
-
-        const { data } = await axios.get('Warehouses/findOne', { filter });
-
-        warehouseText.value = t('item.descriptor.warehouseText', {
-            warehouseName: data.name,
-        });
-
-        showWarehouseIconTooltip.value = true;
-    } catch (err) {
-        console.error('Error finding warehouse');
-    }
-};
-
 const updateStock = async () => {
     try {
         available.value = null;
@@ -135,10 +108,6 @@ const openRegularizeStockForm = () => {
     regularizeStockFormDialog.value.show();
 };
 
-const toggleEditPictureForm = () => {
-    showEditPhotoForm.value = !showEditPhotoForm.value;
-};
-
 const cloneItem = async () => {
     try {
         const { data } = await axios.post(`Items/${entityId.value}/clone`);
@@ -193,92 +162,42 @@ const openCloneDialog = async () => {
             </QItem>
             <QItem v-ripple clickable @click="openCloneDialog()">
                 <QItemSection>
-                    {{ t('Clone') }}
+                    {{ t('globals.clone') }}
                 </QItemSection>
             </QItem>
         </template>
         <template #before>
-            <div class="relative-position">
-                <QImg :src="image" spinner-color="primary" class="photo">
-                    <template #error>
-                        <div
-                            class="absolute-full picture text-center q-pa-md flex flex-center"
-                        >
-                            <div>
-                                <div
-                                    class="text-grey-5"
-                                    style="opacity: 0.4; font-size: 5vh"
-                                >
-                                    <QIcon name="vn:item" />
-                                </div>
-                                <div class="text-grey-5" style="opacity: 0.4">
-                                    {{ t('item.descriptor.item') }}
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </QImg>
-                <QBtn
-                    color="primary"
-                    size="lg"
-                    round
-                    class="edit-photo-btn"
-                    @click="toggleEditPictureForm()"
-                >
-                    <QIcon name="edit" size="sm" />
-                    <QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
-                        <EditPictureForm
-                            collection="catalog"
-                            :id="entityId"
-                            @close-form="toggleEditPictureForm()"
-                            @on-photo-uploaded="getItemAvatar()"
-                        />
-                    </QDialog>
-                </QBtn>
-            </div>
-
-            <div
-                class="row justify-between items-center full-width bg-primary"
-                style="height: 54px"
-            >
-                <div class="col column items-center">
-                    <span class="text-uppercase color-vn-white" style="font-size: 11px">
-                        {{ t('item.descriptor.visible') }}
-                    </span>
-                    <span class="text-weight-bold text-h5 color-vn-white">{{
-                        visible
-                    }}</span>
-                </div>
-                <div
-                    class="col column items-center separation-borders"
-                    style="font-size: 11px"
-                >
-                    <span class="text-uppercase color-vn-white">
-                        {{ t('item.descriptor.available') }}
-                    </span>
-                    <span class="text-weight-bold text-h5 color-vn-white">{{
-                        available
-                    }}</span>
-                </div>
-                <div class="col column items-center justify-center">
-                    <QIcon name="info" class="cursor-pointer color-vn-white" size="md">
-                        <QTooltip>{{ warehouseText }}</QTooltip>
-                    </QIcon>
-                </div>
-            </div>
+            <ItemDescriptorImage
+                :entity-id="entityId"
+                :visible="visible"
+                :available="available"
+            />
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('item.descriptor.buyer')">
                 <template #value>
                     <span class="link">
-                        {{ t('item.descriptor.buyer') }}
+                        {{ entity.itemType?.worker?.user?.name }}
                         <WorkerDescriptorProxy :id="entity.itemType?.worker?.id" />
                     </span>
                 </template>
             </VnLv>
-            <VnLv :label="t('item.descriptor.color')" :value="entity.value5"> </VnLv>
-            <VnLv :label="t('item.descriptor.color')" :value="entity.value6" />
-            <VnLv :label="t('item.descriptor.stems')" :value="entity.value7" />
+            <VnLv
+                v-if="entity.value5"
+                :label="t('item.descriptor.color')"
+                :value="entity.value5"
+            >
+            </VnLv>
+            <VnLv
+                v-if="entity.value6"
+                :label="t('item.descriptor.category')"
+                :value="entity.value6"
+            />
+            <VnLv
+                v-if="entity.value7"
+                :label="t('item.descriptor.stems')"
+                :value="entity.value7"
+            />
         </template>
         <template #actions="{}">
             <QCardActions class="row justify-center">
@@ -307,7 +226,6 @@ const openCloneDialog = async () => {
 <i18n>
 es:
     Regularize stock: Regularizar stock
-    Clone: Clonar
     All it's properties will be copied: Todas sus propiedades serán copiadas
     Do you want to clone this item?: ¿Desea clonar este artículo?
 </i18n>
diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue
new file mode 100644
index 000000000..f16a57548
--- /dev/null
+++ b/src/pages/Item/Card/ItemDescriptorImage.vue
@@ -0,0 +1,158 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import EditPictureForm from 'components/EditPictureForm.vue';
+
+import { useSession } from 'src/composables/useSession';
+import axios from 'axios';
+
+const $props = defineProps({
+    visible: {
+        type: Number,
+        default: null,
+    },
+    available: {
+        type: Number,
+        default: null,
+    },
+    entityId: {
+        type: String,
+        default: null,
+    },
+    showEditButton: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const { t } = useI18n();
+const { getTokenMultimedia } = useSession();
+
+const image = ref(null);
+const editPhotoFormDialog = ref(null);
+const showEditPhotoForm = ref(false);
+const warehouseName = ref(null);
+
+const getItemAvatar = async () => {
+    const token = getTokenMultimedia();
+    const timeStamp = `timestamp=${Date.now()}`;
+    image.value = `/api/Images/catalog/200x200/${$props.entityId}/download?access_token=${token}&${timeStamp}`;
+};
+
+const toggleEditPictureForm = () => {
+    showEditPhotoForm.value = !showEditPhotoForm.value;
+};
+
+const getItemConfigs = async () => {
+    const { data } = await axios.get('ItemConfigs/findOne');
+    if (!data) return;
+    await getWarehouseName(data.warehouseFk);
+    return data;
+};
+
+const getWarehouseName = async (warehouseFk) => {
+    const filter = {
+        where: { id: warehouseFk },
+    };
+
+    const { data } = await axios.get('Warehouses/findOne', { filter });
+    if (!data) return;
+    warehouseName.value = data.name;
+};
+
+onMounted(async () => {
+    getItemAvatar();
+    getItemConfigs();
+});
+</script>
+
+<template>
+    <div class="relative-position">
+        <QImg :src="image" spinner-color="primary" style="min-height: 256px">
+            <template #error>
+                <div class="absolute-full picture text-center q-pa-md flex flex-center">
+                    <div>
+                        <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
+                            <QIcon name="vn:item" />
+                        </div>
+                        <div class="text-grey-5" style="opacity: 0.4">
+                            {{ t('item.descriptor.item') }}
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </QImg>
+        <QBtn
+            v-if="showEditButton"
+            color="primary"
+            size="lg"
+            round
+            class="edit-photo-btn"
+            @click="toggleEditPictureForm()"
+        >
+            <QIcon name="edit" size="sm" />
+            <QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
+                <EditPictureForm
+                    collection="catalog"
+                    :id="entityId"
+                    @close-form="toggleEditPictureForm()"
+                    @on-photo-uploaded="getItemAvatar()"
+                />
+            </QDialog>
+        </QBtn>
+    </div>
+
+    <div
+        class="row justify-between items-center full-width bg-primary"
+        style="height: 54px"
+    >
+        <div class="col column items-center">
+            <span class="text-uppercase color-vn-white" style="font-size: 11px">
+                {{ t('item.descriptor.visible') }}
+            </span>
+            <span class="text-weight-bold text-h5 color-vn-white">{{ visible }}</span>
+        </div>
+        <div class="col column items-center separation-borders" style="font-size: 11px">
+            <span class="text-uppercase color-vn-white">
+                {{ t('item.descriptor.available') }}
+            </span>
+            <span class="text-weight-bold text-h5 color-vn-white">{{ available }}</span>
+        </div>
+        <div class="col column items-center justify-center">
+            <QIcon name="info" class="cursor-pointer color-vn-white" size="md">
+                <QTooltip>{{
+                    t('warehouseText', {
+                        warehouseName: warehouseName,
+                    })
+                }}</QTooltip>
+            </QIcon>
+        </div>
+    </div>
+</template>
+
+<i18n>
+es:
+    Regularize stock: Regularizar stock
+    All it's properties will be copied: Todas sus propiedades serán copiadas
+    Do you want to clone this item?: ¿Desea clonar este artículo?
+    warehouseText: Calculated on the warehouse of { warehouseName }
+
+en:
+    warehouseText: Calculado sobre el almacén de { warehouseName }
+</i18n>
+
+<style lang="scss" scoped>
+.edit-photo-btn {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    z-index: 1;
+    cursor: pointer;
+}
+
+.separation-borders {
+    border-left: 1px solid $white;
+    border-right: 1px solid $white;
+}
+</style>
diff --git a/src/pages/Item/Card/ItemDiary.vue b/src/pages/Item/Card/ItemDiary.vue
index 21249349f..c2687e0fd 100644
--- a/src/pages/Item/Card/ItemDiary.vue
+++ b/src/pages/Item/Card/ItemDiary.vue
@@ -1 +1,277 @@
-<template>Item diary (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>
+<script setup>
+import { onMounted, computed, onUnmounted, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toDateFormat } from 'src/filters/date.js';
+import { dashIfEmpty } from 'src/filters';
+import { date } from 'quasar';
+import { useState } from 'src/composables/useState';
+
+const { t } = useI18n();
+const route = useRoute();
+const stateStore = useStateStore();
+const state = useState();
+
+const user = state.getUser();
+const today = ref(Date.vnNew());
+const warehousesOptions = ref([]);
+const itemBalancesRef = ref(null);
+const itemsBalanceFilter = reactive({
+    where: { itemFk: route.params.id, warehouseFk: null, date: null },
+});
+const itemBalances = ref([]);
+const warehouseFk = ref(null);
+const _showWhatsBeforeInventory = ref(false);
+
+const columns = computed(() => [
+    {
+        name: 'claim',
+        align: 'left',
+        field: 'itemFk',
+    },
+    {
+        label: t('itemDiary.date'),
+        name: 'date',
+        field: 'shipped',
+        align: 'left',
+    },
+    {
+        label: t('itemDiary.id'),
+        name: 'id',
+        align: 'left',
+    },
+    {
+        label: t('itemDiary.state'),
+        field: 'stateName',
+        name: 'state',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('itemDiary.reference'),
+        field: 'reference',
+        name: 'reference',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+
+    {
+        label: t('itemDiary.client'),
+        name: 'client',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('itemDiary.in'),
+        field: 'invalue',
+        name: 'in',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('itemDiary.out'),
+        field: 'out',
+        name: 'out',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('itemDiary.balance'),
+        name: 'balance',
+        align: 'left',
+    },
+]);
+
+const showWhatsBeforeInventory = computed({
+    get: () => _showWhatsBeforeInventory.value,
+    set: (val) => {
+        _showWhatsBeforeInventory.value = val;
+        if (!val) itemsBalanceFilter.where.date = null;
+        else itemsBalanceFilter.where.date = new Date();
+    },
+});
+
+const fetchItemBalances = async () => await itemBalancesRef.value.fetch();
+
+const getBadgeAttrs = (_date) => {
+    const isSameDate = date.isSameDate(today.value, _date);
+    const attrs = {
+        'text-color': isSameDate ? 'black' : 'white',
+        color: isSameDate ? 'warning' : 'transparent',
+    };
+    return attrs;
+};
+
+const getIdDescriptor = (row) => {
+    let descriptor = EntryDescriptorProxy;
+    if (row.isTicket) descriptor = TicketDescriptorProxy;
+    return descriptor;
+};
+
+onMounted(async () => {
+    today.value.setHours(0, 0, 0, 0);
+    if (route.query.warehouseFk) warehouseFk.value = route.query.warehouseFk;
+    else if (user.value) warehouseFk.value = user.value.warehouseFk;
+    itemsBalanceFilter.where.warehouseFk = warehouseFk.value;
+    await fetchItemBalances();
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        ref="itemBalancesRef"
+        url="Items/getBalance"
+        :filter="itemsBalanceFilter"
+        @on-fetch="(data) => (itemBalances = data)"
+    />
+    <FetchData
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (warehousesOptions = data)"
+    />
+    <QToolbar class="justify-end">
+        <div id="st-data" class="row">
+            <VnSelect
+                :label="t('itemDiary.warehouse')"
+                :options="warehousesOptions"
+                hide-selected
+                option-label="name"
+                option-value="id"
+                dense
+                v-model="itemsBalanceFilter.where.warehouseFk"
+                @update:model-value="fetchItemBalances"
+                class="q-mr-lg"
+            />
+            <QCheckbox
+                :label="t('itemDiary.showBefore')"
+                v-model="showWhatsBeforeInventory"
+                @update:model-value="fetchItemBalances"
+                class="q-mr-lg"
+            />
+            <VnInputDate
+                v-if="showWhatsBeforeInventory"
+                :label="t('itemDiary.since')"
+                dense
+                v-model="itemsBalanceFilter.where.date"
+                @update:model-value="fetchItemBalances"
+            />
+        </div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="itemBalances"
+            :columns="columns"
+            class="full-width q-mt-md"
+            :no-data-label="t('globals.noResults')"
+        >
+            <template #body-cell-claim="{ row }">
+                <QTd @click.stop>
+                    <QBtn
+                        v-show="row.claimFk"
+                        flat
+                        color="primary"
+                        :to="{ name: 'ClaimSummary', params: { id: row.claimFk } }"
+                        icon="vn:claims"
+                        dense
+                    >
+                        <QTooltip>
+                            {{ t('itemDiary.claim') }}: {{ row.claimFk }}
+                        </QTooltip>
+                    </QBtn>
+                </QTd>
+            </template>
+            <template #body-cell-date="{ row }">
+                <QTd @click.stop>
+                    <QBadge
+                        v-bind="getBadgeAttrs(row.shipped)"
+                        class="q-ma-none"
+                        dense
+                        style="font-size: 14px"
+                    >
+                        {{ toDateFormat(row.shipped) }}
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-id="{ row }">
+                <QTd @click.stop>
+                    <component
+                        :is="getIdDescriptor(row)"
+                        :id="row.origin"
+                        class="q-ma-none"
+                        dense
+                        style="font-size: 14px"
+                    >
+                        {{ row.origin }}
+                    </component>
+                    <span class="link">{{ row.origin }}</span>
+                </QTd>
+            </template>
+            <template #body-cell-client="{ row }">
+                <QTd @click.stop>
+                    <QBadge
+                        :color="row.highlighted ? 'warning' : 'transparent'"
+                        :text-color="row.highlighted ? 'black' : 'white'"
+                        dense
+                        style="font-size: 14px"
+                    >
+                        <span v-if="row.isTicket" class="link">
+                            {{ dashIfEmpty(row.name) }}
+                            <CustomerDescriptorProxy :id="row.clientFk" />
+                        </span>
+                        <span v-else>{{ dashIfEmpty(row.name) }}</span>
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-in="{ row }">
+                <QTd @click.stop>
+                    <span :class="{ 'is-in': row.invalue }">
+                        {{ dashIfEmpty(row.invalue) }}
+                    </span>
+                </QTd>
+            </template>
+            <template #body-cell-balance="{ row }">
+                <QTd @click.stop>
+                    <QBadge
+                        class="balance-negative"
+                        :color="
+                            row.lineFk == row.lastPreparedLineFk
+                                ? 'grey-13'
+                                : 'transparent'
+                        "
+                        :text-color="
+                            row.lineFk == row.lastPreparedLineFk
+                                ? 'black'
+                                : row.balance < 0
+                                ? 'negative'
+                                : ''
+                        "
+                        dense
+                        style="font-size: 14px"
+                    >
+                        <span>{{ dashIfEmpty(row.balance) }}</span>
+                    </QBadge>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.is-in {
+    color: $positive;
+}
+</style>
diff --git a/src/pages/Item/Card/ItemLastEntries.vue b/src/pages/Item/Card/ItemLastEntries.vue
new file mode 100644
index 000000000..5200db239
--- /dev/null
+++ b/src/pages/Item/Card/ItemLastEntries.vue
@@ -0,0 +1,317 @@
+<script setup>
+import { onMounted, computed, onUnmounted, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toDateTimeFormat } from 'src/filters/date.js';
+import { dashIfEmpty } from 'src/filters';
+import { toCurrency } from 'filters/index';
+import { useArrayData } from 'composables/useArrayData';
+
+const { t } = useI18n();
+const route = useRoute();
+const stateStore = useStateStore();
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'id':
+        case 'quantity':
+        case 'packagingFk':
+            return { [`b.${param}`]: value };
+        case 'supplierFk':
+            return { [`s.id`]: value };
+        case 'warehouseFk':
+            return { 'tr.warehouseInFk': value };
+        case 'landed':
+            return {
+                'tr.landed': {
+                    between: getDateRange(value),
+                },
+            };
+    }
+};
+
+const dateRange = 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,
+    set: (val) => {
+        updateFrom(val);
+        updateFilter();
+    },
+});
+
+const to = computed({
+    get: () => dateRange.to,
+    set: (val) => {
+        updateTo(val);
+        updateFilter();
+    },
+});
+
+const arrayData = useArrayData('ItemLastEntries', {
+    url: 'Items/lastEntriesFilter',
+    order: ['landed DESC', 'buyFk DESC'],
+    exprBuilder: exprBuilder,
+    userFilter: {
+        where: {
+            itemFk: route.params.id,
+        },
+    },
+});
+
+const itemLastEntries = ref([]);
+
+const columns = computed(() => [
+    {
+        label: t('lastEntries.ig'),
+        name: 'ig',
+        align: 'center',
+    },
+    {
+        label: t('lastEntries.warehouse'),
+        name: 'warehouse',
+        field: 'warehouse',
+        align: 'left',
+    },
+    {
+        label: t('lastEntries.landed'),
+        name: 'id',
+        field: 'landed',
+        align: 'left',
+        format: (val) => toDateTimeFormat(val),
+    },
+    {
+        label: t('lastEntries.entry'),
+        name: 'entry',
+        field: 'stateName',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('lastEntries.pvp'),
+        name: 'pvp',
+        field: 'reference',
+        align: 'left',
+        format: (_, row) => toCurrency(row.price2) + ' / ' + toCurrency(row.price3),
+    },
+
+    {
+        label: t('lastEntries.label'),
+        name: 'label',
+        field: 'stickers',
+        align: 'center',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('lastEntries.packing'),
+        name: 'packing',
+        align: 'center',
+    },
+    {
+        label: t('lastEntries.grouping'),
+        name: 'grouping',
+        align: 'center',
+    },
+    {
+        label: t('lastEntries.stems'),
+        name: 'stems',
+        field: 'stems',
+        align: 'center',
+    },
+    {
+        label: t('lastEntries.quantity'),
+        name: 'stems',
+        field: 'quantity',
+        align: 'center',
+    },
+    {
+        label: t('lastEntries.cost'),
+        name: 'cost',
+        align: 'left',
+    },
+    {
+        label: t('lastEntries.kg'),
+        name: 'stems',
+        field: 'weight',
+        align: 'center',
+    },
+    {
+        label: t('lastEntries.cube'),
+        name: 'cube',
+        field: 'packagingFk',
+        align: 'center',
+    },
+    {
+        label: t('lastEntries.supplier'),
+        name: 'stems',
+        field: 'supplier',
+        align: 'left',
+    },
+]);
+
+const fetchItemLastEntries = async () => {
+    const { data } = await arrayData.fetch({ append: false });
+    itemLastEntries.value = data;
+};
+
+const updateFrom = async (date) => {
+    date.setHours(0, 0, 0, 0);
+    dateRange.from = date.toISOString();
+};
+
+const updateTo = async (date) => {
+    date.setHours(23, 59, 59, 59);
+    dateRange.to = date.toISOString();
+};
+
+const updateFilter = async () => {
+    arrayData.store.userFilter.where.landed = {
+        between: [dateRange.from, dateRange.to],
+    };
+    await fetchItemLastEntries();
+};
+
+onMounted(async () => {
+    const _from = Date.vnNew();
+    _from.setDate(_from.getDate() - 75);
+    updateFrom(_from);
+
+    const _to = Date.vnNew();
+    _to.setDate(_to.getDate() + 10);
+    updateTo(_to);
+
+    updateFilter();
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <QToolbar class="justify-end">
+        <div id="st-data" class="row">
+            <VnInputDate
+                :label="t('lastEntries.since')"
+                dense
+                emit-date-format
+                v-model="from"
+                class="q-mr-lg"
+            />
+            <VnInputDate
+                :label="t('lastEntries.to')"
+                dense
+                emit-date-format
+                v-model="to"
+            />
+        </div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="itemLastEntries"
+            :columns="columns"
+            class="full-width q-mt-md"
+            :no-data-label="t('globals.noResults')"
+        >
+            <template #body-cell-ig="{ row }">
+                <QTd @click.stop>
+                    <QCheckbox
+                        v-model="row.isIgnored"
+                        :disable="true"
+                        :false-value="0"
+                        :true-value="1"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-entry="{ row }">
+                <QTd @click.stop>
+                    <div class="full-width flex justify-center">
+                        <EntryDescriptorProxy :id="row.entryFk" class="q-ma-none" dense />
+                        <span class="link">{{ row.entryFk }}</span>
+                    </div>
+                </QTd>
+            </template>
+            <template #body-cell-packing="{ row }">
+                <QTd @click.stop>
+                    <QBadge
+                        class="center-content"
+                        rounded
+                        :color="row.groupingMode == 'packing' ? 'grey-13' : 'black'"
+                    >
+                        {{ dashIfEmpty(row.packing) }}
+                        <QTooltip>{{ t('lastEntries.packing') }}</QTooltip>
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-pvp="{ value }">
+                <QTd @click.stop
+                    ><span> {{ value }}</span>
+                    <QTooltip>
+                        {{ t('lastEntries.grouping') }}/{{ t('lastEntries.packing') }}
+                    </QTooltip></QTd
+                >
+            </template>
+            <template #body-cell-grouping="{ row }">
+                <QTd @click.stop>
+                    <QBadge
+                        class="center-content"
+                        rounded
+                        :color="row.groupingMode == 'grouping' ? 'grey-13' : 'black'"
+                    >
+                        {{ dashIfEmpty(row.grouping) }}
+                        <QTooltip>{{ t('lastEntries.grouping') }}</QTooltip>
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-cost="{ row }">
+                <QTd @click.stop>
+                    <span>
+                        {{ toCurrency(row.cost, 'EUR', 3) }}
+                        <QTooltip>
+                            {{ t('lastEntries.cost') }}:
+                            {{ toCurrency(dashIfEmpty(row.buyingValue), 'EUR', 3) }}<br />
+                            {{ t('lastEntries.package') }}:
+                            {{ toCurrency(dashIfEmpty(row.packageValue), 'EUR', 3)
+                            }}<br />
+                            {{ $t('lastEntries.freight') }}:
+                            {{ toCurrency(dashIfEmpty(row.freightValue), 'EUR', 3)
+                            }}<br />
+                            {{ t('lastEntries.comission') }}:
+                            {{ toCurrency(dashIfEmpty(row.comissionValue), 'EUR', 3) }}
+                        </QTooltip>
+                    </span>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.q-badge--rounded {
+    border-radius: 50%;
+}
+.center-content {
+    display: flex;
+    max-width: max-content;
+    margin: auto;
+    padding: 0 11px;
+    height: 28px;
+}
+</style>
diff --git a/src/pages/Item/Card/ItemLog.vue b/src/pages/Item/Card/ItemLog.vue
new file mode 100644
index 000000000..4da8063c5
--- /dev/null
+++ b/src/pages/Item/Card/ItemLog.vue
@@ -0,0 +1,7 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+
+<template>
+    <VnLog model="Item" url="/ItemLogs"></VnLog>
+</template>
diff --git a/src/pages/Item/Card/ItemSummary.vue b/src/pages/Item/Card/ItemSummary.vue
index 567fbf32b..103b3af59 100644
--- a/src/pages/Item/Card/ItemSummary.vue
+++ b/src/pages/Item/Card/ItemSummary.vue
@@ -1 +1,228 @@
-<template>Item summary</template>
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+
+import { useRole } from 'src/composables/useRole';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+const roleState = useRole();
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const isBuyer = computed(() => {
+    return roleState.hasAny(['buyer']);
+});
+
+const isReplenisher = computed(() => {
+    return roleState.hasAny(['replenisher']);
+});
+
+const isAdministrative = computed(() => {
+    return roleState.hasAny(['administrative']);
+});
+</script>
+
+<template>
+    <CardSummary
+        ref="summary"
+        :url="`Items/${entityId}/getSummary`"
+        :entity-id="entityId"
+        data-key="ItemSummary"
+    >
+        <template #header-left>
+            <router-link
+                v-if="route.name !== 'ItemSummary'"
+                :to="{ name: 'ItemSummary', params: { id: entityId } }"
+                class="header link"
+            >
+                <QIcon name="open_in_new" color="white" size="sm" />
+            </router-link>
+        </template>
+        <template #header="{ entity: { item } }">
+            {{ item.id }} - {{ item.name }}
+        </template>
+        <template #body="{ entity: { item, tags, visible, available, botanical } }">
+            <QCard class="vn-one photo">
+                <ItemDescriptorImage
+                    :entity-id="entityId"
+                    :visible="visible"
+                    :available="available"
+                    :show-edit-button="false"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer }"
+                >
+                    {{ t('item.summary.basicData') }}
+                    <QIcon v-if="isBuyer" name="open_in_new" />
+                </component>
+                <VnLv :label="t('item.summary.name')" :value="item.name" />
+                <VnLv :label="t('item.summary.completeName')" :value="item.longName" />
+                <VnLv :label="t('item.summary.family')" :value="item.itemType.name" />
+                <VnLv :label="t('item.summary.size')" :value="item.size" />
+                <VnLv :label="t('item.summary.origin')" :value="item.origin.name" />
+                <VnLv :label="t('item.summary.stems')" :value="item.stems" />
+                <VnLv
+                    :label="t('item.summary.multiplier')"
+                    :value="item.stemMultiplier"
+                />
+
+                <VnLv :label="t('item.summary.buyer')">
+                    <template #value>
+                        <VnUserLink
+                            :name="item.itemType.worker.user.name"
+                            :worker-id="item.itemType.worker.id"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :info="t('Este artículo necesita una foto')">
+                    <template #value>
+                        <QCheckbox
+                            :label="t('item.summary.doPhoto')"
+                            v-model="item.isPhotoRequested"
+                            :disable="true"
+                        />
+                    </template>
+                </VnLv>
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer }"
+                >
+                    {{ t('item.summary.otherData') }}
+                    <QIcon v-if="isBuyer" name="open_in_new" />
+                </component>
+                <VnLv
+                    :label="t('item.summary.intrastatCode')"
+                    :value="item.intrastat.id"
+                />
+                <VnLv
+                    :label="t('item.summary.intrastat')"
+                    :value="item.intrastat.description"
+                />
+                <VnLv :label="t('item.summary.ref')" :value="item.comment" />
+                <VnLv :label="t('item.summary.relevance')" :value="item.relevancy" />
+                <VnLv :label="t('item.summary.weight')" :value="item.weightByPiece" />
+                <VnLv :label="t('item.summary.units')" :value="item.packingOut" />
+                <VnLv :label="t('item.summary.expense')" :value="item.expense.name" />
+                <VnLv :label="t('item.summary.generic')" :value="item.genericFk" />
+                <VnLv
+                    :label="t('item.summary.recycledPlastic')"
+                    :value="item.recycledPlastic"
+                />
+                <VnLv
+                    :label="t('item.summary.nonRecycledPlastic')"
+                    :value="item.nonRecycledPlastic"
+                />
+                <VnLv
+                    :label="t('item.summary.minSalesQuantity')"
+                    :value="item.minQuantity"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer || isReplenisher ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemTags', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer || isReplenisher }"
+                >
+                    {{ t('item.summary.tags') }}
+                    <QIcon v-if="isBuyer || isReplenisher" name="open_in_new" />
+                </component>
+                <VnLv
+                    v-for="(tag, index) in tags"
+                    :key="index"
+                    :label="`${tag.priority} ${tag.tag.name}`"
+                    :value="tag.value"
+                />
+            </QCard>
+            <QCard class="vn-one" v-if="item.description">
+                <component
+                    :is="isBuyer ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer }"
+                >
+                    {{ t('item.summary.description') }}
+                    <QIcon v-if="isBuyer" name="open_in_new" />
+                </component>
+                <p>
+                    {{ item.description }}
+                </p>
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer || isAdministrative ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemTax', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer || isAdministrative }"
+                >
+                    {{ t('item.summary.tax') }}
+                    <QIcon v-if="isBuyer || isAdministrative" name="open_in_new" />
+                </component>
+                <VnLv
+                    v-for="(tax, index) in item.taxes"
+                    :key="index"
+                    :label="tax.country.country"
+                    :value="tax.taxClass.description"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemBotanical', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer }"
+                >
+                    {{ t('item.summary.botanical') }}
+                    <QIcon v-if="isBuyer" name="open_in_new" />
+                </component>
+                <VnLv :label="t('item.summary.genus')" :value="botanical?.genus?.name" />
+                <VnLv
+                    :label="t('item.summary.specie')"
+                    :value="botanical?.specie?.name"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer || isReplenisher ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemBarcode', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer || isReplenisher }"
+                >
+                    {{ t('item.summary.barcode') }}
+                    <QIcon v-if="isBuyer || isReplenisher" name="open_in_new" />
+                </component>
+                <p v-for="(barcode, index) in item.itemBarcode" :key="index">
+                    {{ barcode.code }}
+                </p>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+
+<i18n>
+en:
+    Este artículo necesita una foto: Este artículo necesita una foto
+</i18n>
diff --git a/src/pages/Item/Card/ItemTax.vue b/src/pages/Item/Card/ItemTax.vue
new file mode 100644
index 000000000..489a2c7b2
--- /dev/null
+++ b/src/pages/Item/Card/ItemTax.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import CrudModel from 'components/CrudModel.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const route = useRoute();
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const taxesFilter = {
+    fields: ['id', 'countryFk', 'taxClassFk'],
+    include: [
+        {
+            relation: 'country',
+            scope: {
+                fields: ['country'],
+            },
+        },
+    ],
+};
+
+const ItemTaxRef = ref(null);
+const taxesOptions = ref([]);
+
+const submitTaxes = async (data) => {
+    try {
+        let payload = data.map((tax) => ({
+            id: tax.id,
+            taxClassFk: tax.taxClassFk,
+        }));
+
+        await axios.post(`Items/updateTaxes`, payload);
+        notify(t('globals.dataSaved'), 'positive');
+    } catch (err) {
+        console.error('Error saving taxes', err);
+    }
+};
+</script>
+<template>
+    <FetchData
+        url="TaxClasses"
+        :filter="{
+            fields: ['id', 'description', 'code'],
+        }"
+        @on-fetch="(data) => (taxesOptions = data)"
+        auto-load
+    />
+    <CrudModel
+        :url="`items/${route.params.id}/taxes`"
+        :save-fn="submitTaxes"
+        :filter="taxesFilter"
+        :default-remove="false"
+        data-key="ItemTax"
+        model="ItemTax"
+        ref="ItemTaxRef"
+        auto-load
+    >
+        <template #body="{ rows }">
+            <QCard class="q-px-lg q-py-md">
+                <VnRow
+                    v-for="(row, index) in rows"
+                    :key="index"
+                    class="row q-gutter-md q-mb-md"
+                >
+                    <VnInput
+                        :label="t('tax.country')"
+                        v-model="row.country.country"
+                        disable
+                    />
+                    <VnSelect
+                        :label="t('tax.class')"
+                        v-model="row.taxClassFk"
+                        :options="taxesOptions"
+                        option-label="description"
+                        option-value="id"
+                        hide-selected
+                    />
+                </VnRow>
+            </QCard>
+        </template>
+    </CrudModel>
+</template>
diff --git a/src/pages/Item/ItemCreate.vue b/src/pages/Item/ItemCreate.vue
index 18e7522cb..baa51414c 100644
--- a/src/pages/Item/ItemCreate.vue
+++ b/src/pages/Item/ItemCreate.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -90,7 +90,7 @@ onBeforeMount(async () => {
                         v-model="data.provisionalName"
                         :label="t('item.create.name')"
                     />
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('item.create.tag')"
                         v-model="data.tag"
                         :options="tagsOptions"
@@ -98,7 +98,7 @@ onBeforeMount(async () => {
                         option-label="name"
                         hide-selected
                     />
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('item.create.priority')"
                         v-model="data.priority"
                         :options="validPriorities"
@@ -108,7 +108,7 @@ onBeforeMount(async () => {
                     />
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('item.create.type')"
                         v-model="data.typeFk"
                         :options="itemTypesOptions"
@@ -131,8 +131,8 @@ onBeforeMount(async () => {
                                 </QItemLabel>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
-                    <VnSelectFilter
+                    </VnSelect>
+                    <VnSelect
                         :label="t('item.create.intrastat')"
                         v-model="data.intrastatFk"
                         :options="intrastatsOptions"
@@ -152,10 +152,10 @@ onBeforeMount(async () => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('item.create.origin')"
                         v-model="data.originFk"
                         :options="originsOptions"
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 0dd7ca07d..2a753a3a5 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -5,7 +5,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
@@ -178,7 +178,7 @@ const columns = computed(() => [
         name: 'warehouse',
         ...defaultColumnAttrs,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             type: 'select',
             filterValue: null,
             event: getColumnInputEvents,
@@ -434,7 +434,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 
             <template #body-cell-itemId="props">
                 <QTd>
-                    <VnSelectFilter
+                    <VnSelect
                         :options="itemsWithNameOptions"
                         hide-selected
                         option-label="id"
@@ -450,7 +450,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QTd>
             </template>
             <template #body-cell-description="{ row }">
@@ -531,7 +531,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #body-cell-warehouse="props">
                 <QTd class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :options="warehousesOptions"
                         hide-selected
                         option-label="name"
diff --git a/src/pages/Item/ItemFixedPriceFilter.vue b/src/pages/Item/ItemFixedPriceFilter.vue
index cd86b5f71..6c847ece8 100644
--- a/src/pages/Item/ItemFixedPriceFilter.vue
+++ b/src/pages/Item/ItemFixedPriceFilter.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';
 
 const { t } = useI18n();
@@ -35,7 +35,7 @@ const itemTypeWorkersOptions = ref([]);
         <template #body="{ params, searchFn }">
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('components.itemsFilterPanel.buyerFk')"
                         v-model="params.buyerFk"
                         :options="itemTypeWorkersOptions"
@@ -51,7 +51,7 @@ const itemTypeWorkersOptions = ref([]);
             </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('components.itemsFilterPanel.warehouseFk')"
                         v-model="params.warehouseFk"
                         :options="warehousesOptions"
diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue
index 3e399e29f..39e190147 100644
--- a/src/pages/Item/ItemList.vue
+++ b/src/pages/Item/ItemList.vue
@@ -7,11 +7,12 @@ import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import ItemSummary from '../Item/Card/ItemSummary.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
+import ItemListFilter from './ItemListFilter.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDateFormat } from 'src/filters/date.js';
@@ -69,7 +70,7 @@ const exprBuilder = (param, value) => {
     }
 };
 
-const params = reactive({});
+const params = reactive({ isFloramondo: false, isActive: true });
 
 const applyColumnFilter = async (col) => {
     try {
@@ -201,7 +202,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             filterParamKey: 'typeFk',
             type: 'select',
             filterValue: null,
@@ -222,7 +223,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             type: 'select',
             filterValue: null,
             event: getInputEvents,
@@ -242,7 +243,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             type: 'select',
             filterValue: null,
             event: getInputEvents,
@@ -261,7 +262,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             type: 'select',
             filterValue: null,
             event: getInputEvents,
@@ -280,7 +281,7 @@ const columns = computed(() => [
         align: 'left',
         sortable: true,
         columnFilter: {
-            component: VnSelectFilter,
+            component: VnSelect,
             filterParamKey: 'buyerFk',
             type: 'select',
             filterValue: null,
@@ -442,6 +443,11 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         <QSpace />
         <div id="st-actions"></div>
     </QToolbar>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ItemListFilter data-key="ItemList" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <VnPaginate
             ref="paginateRef"
@@ -538,7 +544,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                                 size="sm"
                             >
                                 <QTooltip>
-                                    {{ t('Clone') }}
+                                    {{ t('globals.clone') }}
                                 </QTooltip>
                             </QIcon>
                             <QIcon
@@ -572,6 +578,5 @@ es:
     New item: Nuevo artículo
     All it's properties will be copied: Todas sus propiedades serán copiadas
     Do you want to clone this item?: ¿Desea clonar este artículo?
-    Clone: Clonar
     Preview: Vista previa
 </i18n>
diff --git a/src/pages/Item/ItemListFilter.vue b/src/pages/Item/ItemListFilter.vue
new file mode 100644
index 000000000..a51f9ebb4
--- /dev/null
+++ b/src/pages/Item/ItemListFilter.vue
@@ -0,0 +1,460 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { onMounted } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import { QCheckbox } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useValidator } from 'src/composables/useValidator';
+import axios from 'axios';
+
+const { t } = useI18n();
+
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const stateStore = useStateStore();
+const validationsStore = useValidator();
+
+const itemTypesRef = ref(null);
+const categoriesOptions = ref([]);
+const itemTypesOptions = ref([]);
+const buyersOptions = ref([]);
+const suppliersOptions = ref([]);
+const tagValues = ref([]);
+const fieldFiltersValues = ref([]);
+const moreFields = ref([]);
+
+const arrayData = useArrayData(props.dataKey);
+const itemTypesFilter = {
+    fields: ['id', 'name', 'categoryFk'],
+    include: 'category',
+    order: 'name ASC',
+    where: {},
+};
+
+const onCategoryChange = async (categoryFk, search) => {
+    if (!categoryFk) {
+        itemTypesFilter.where.categoryFk = null;
+        delete itemTypesFilter.where.categoryFk;
+    } else {
+        itemTypesFilter.where.categoryFk = categoryFk;
+    }
+    search();
+    await itemTypesRef.value.fetch();
+};
+
+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');
+    }
+};
+
+const applyTags = (params, search) => {
+    params.tags = tagValues.value
+        .filter((tag) => tag.selectedTag && tag.value)
+        .map((tag) => ({
+            tagFk: tag.selectedTag.id,
+            tagName: tag.selectedTag.name,
+            value: tag.value,
+        }));
+    search();
+};
+
+const removeTag = (index, params, search) => {
+    (tagValues.value || []).splice(index, 1);
+    applyTags(params, search);
+};
+
+const applyFieldFilters = (params) => {
+    fieldFiltersValues.value.forEach((fieldFilter) => {
+        if (
+            fieldFilter.selectedField &&
+            (fieldFilter.value !== null ||
+                fieldFilter.value !== '' ||
+                fieldFilter.value !== undefined)
+        ) {
+            params[fieldFilter.name] = fieldFilter.value;
+        }
+    });
+    arrayData.applyFilter({ params });
+};
+
+const removeFieldFilter = (index, params, search) => {
+    delete params[fieldFiltersValues.value[index].name];
+    (fieldFiltersValues.value || []).splice(index, 1);
+    applyFieldFilters(params, search);
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    if (arrayData.store?.userParams?.categoryFk)
+        itemTypesFilter.where.categoryFk = arrayData.store?.userParams?.categoryFk;
+    await itemTypesRef.value.fetch();
+    const { models } = validationsStore;
+    const properties = models.Item?.properties || {};
+
+    const _moreFields = ['id', 'description', 'name', 'isActive'];
+
+    _moreFields.forEach((field) => {
+        let prop = properties[field];
+        const label = t(`params.${field}`);
+        moreFields.value.push({
+            name: field,
+            label,
+            type: prop ? prop.type : null,
+        });
+    });
+
+    // Fill fieldFiltersValues with existent userParams
+    if (arrayData.store?.userParams) {
+        fieldFiltersValues.value = Object.entries(arrayData.store?.userParams)
+            .filter(([key, value]) => value && _moreFields.includes(key))
+            .map(([key, value]) => ({
+                name: key,
+                value,
+                selectedField: moreFields.value.find((field) => field.name === key),
+            }));
+    }
+});
+</script>
+
+<template>
+    <FetchData
+        url="ItemCategories"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (categoriesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="itemTypesRef"
+        url="ItemTypes"
+        :filter="itemTypesFilter"
+        @on-fetch="(data) => (itemTypesOptions = data)"
+    />
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
+        @on-fetch="(data) => (buyersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Suppliers"
+        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC' }"
+        @on-fetch="(data) => (suppliersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Tags"
+        :filter="{ fields: ['id', 'name', 'isFree'] }"
+        auto-load
+        @on-fetch="(data) => (tagOptions = data)"
+    />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :hidden-tags="tagValues.length === 0 ? ['tags'] : []"
+    >
+        <template #tags="{ tag, formatFn }">
+            <div>
+                <strong>{{ t(`params.${tag.label}`) }}</strong>
+                <span v-if="tag.label !== 'tags'">: {{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.search"
+                        :label="t('params.search')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.categoryFk')"
+                        v-model="params.categoryFk"
+                        @update:model-value="
+                            ($event) => onCategoryChange($event, searchFn)
+                        "
+                        :options="categoriesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.typeFk')"
+                        v-model="params.typeFk"
+                        @update:model-value="searchFn()"
+                        :options="itemTypesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    >
+                        <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>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.buyerFk')"
+                        v-model="params.buyerFk"
+                        @update:model-value="searchFn()"
+                        :options="buyersOptions"
+                        option-value="id"
+                        option-label="nickname"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.supplierFk')"
+                        v-model="params.supplierFk"
+                        @update:model-value="searchFn()"
+                        :options="suppliersOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        scope.opt?.name + ': ' + scope.opt?.nickname
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <!-- Tags filter -->
+            <QItem class="row items-center">
+                <QItemLabel>
+                    {{ t('params.tags') }}
+                </QItemLabel>
+                <QIcon
+                    name="add_circle"
+                    class="fill-icon-on-hover q-ml-md"
+                    size="sm"
+                    color="primary"
+                    @click="tagValues.push({})"
+                />
+            </QItem>
+            <QItem
+                v-for="(tag, index) in tagValues"
+                :key="index"
+                class="row items-center"
+            >
+                <QItemSection class="col">
+                    <VnSelect
+                        :label="t('params.tag')"
+                        v-model="tag.selectedTag"
+                        :options="tagOptions"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                        :is-clearable="false"
+                        @update:model-value="getSelectedTagValues(tag)"
+                    />
+                </QItemSection>
+                <QItemSection class="col">
+                    <VnSelect
+                        v-if="!tag?.selectedTag?.isFree && tag.valueOptions"
+                        :label="t('params.tag')"
+                        v-model="tag.value"
+                        :options="tag.valueOptions || []"
+                        option-value="value"
+                        option-label="value"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        use-input
+                        :disable="!tag"
+                        :is-clearable="false"
+                        @update:model-value="applyTags(params, searchFn)"
+                    />
+                    <VnInput
+                        v-else
+                        v-model="tag.value"
+                        :label="t('params.value')"
+                        :disable="!tag"
+                        is-outlined
+                        :is-clearable="false"
+                        @keydown.enter.prevent="applyTags(params, searchFn)"
+                    />
+                </QItemSection>
+                <QIcon
+                    name="delete"
+                    class="fill-icon-on-hover q-ml-xs"
+                    size="sm"
+                    color="primary"
+                    @click="removeTag(index, params, searchFn)"
+                />
+            </QItem>
+            <!-- Filter fields -->
+            <QItem class="row items-center">
+                <QItemLabel>
+                    {{ t('More fields') }}
+                </QItemLabel>
+                <QIcon
+                    name="add_circle"
+                    class="fill-icon-on-hover q-ml-md"
+                    size="sm"
+                    color="primary"
+                    @click="fieldFiltersValues.push({})"
+                />
+            </QItem>
+            <QItem
+                v-for="(fieldFilter, index) in fieldFiltersValues"
+                :key="index"
+                class="row items-center"
+            >
+                <QItemSection class="col">
+                    <VnSelect
+                        :label="t('params.tag')"
+                        :model-value="fieldFilter.selectedField"
+                        :options="moreFields"
+                        option-label="label"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                        :is-clearable="false"
+                        @update:model-value="
+                            ($event) => {
+                                fieldFilter.name = $event.name;
+                                fieldFilter.value = null;
+                                fieldFilter.selectedField = $event;
+                            }
+                        "
+                    />
+                </QItemSection>
+                <QItemSection class="col">
+                    <QCheckbox
+                        v-if="fieldFilter.selectedField?.type === 'boolean'"
+                        v-model="fieldFilter.value"
+                        :label="t('params.value')"
+                        @update:model-value="applyFieldFilters(params, searchFn)"
+                    />
+                    <VnInput
+                        v-else
+                        v-model="fieldFilter.value"
+                        :label="t('params.value')"
+                        :disable="!fieldFilter.selectedField"
+                        is-outlined
+                        @keydown.enter="applyFieldFilters(params, searchFn)"
+                    />
+                </QItemSection>
+                <QIcon
+                    name="delete"
+                    class="fill-icon-on-hover q-ml-xs"
+                    size="sm"
+                    color="primary"
+                    @click="removeFieldFilter(index, params, searchFn)"
+                />
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.isFloramondo')"
+                        v-model="params.isFloramondo"
+                        toggle-indeterminate
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: General search
+        categoryFk: Category
+        typeFk: Type
+        buyerFk: Buyer
+        supplierFk: Supplier
+        tags: Tags
+        tag: Tag
+        value: Value
+        isFloramondo: Floramondo
+        isActive: Active
+        description: Description
+        name: Name
+        id: Id
+es:
+    More fields: Más campos
+    params:
+        search: Búsqueda general
+        categoryFk: Reino
+        typeFk: Tipo
+        buyerFk: Comprador
+        supplierFk: Proveedor
+        tags: Etiquetas
+        tag: Etiqueta
+        value: Valor
+        isFloramondo: Floramondo
+        isActive: Activo
+        description: Descripción
+        name: Nombre
+        id: Id
+</i18n>
diff --git a/src/pages/Item/ItemRequest.vue b/src/pages/Item/ItemRequest.vue
new file mode 100644
index 000000000..1872ad859
--- /dev/null
+++ b/src/pages/Item/ItemRequest.vue
@@ -0,0 +1,360 @@
+<script setup>
+import { ref, computed, onMounted, onBeforeMount, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+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';
+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 { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'composables/useArrayData';
+import { toDateFormat } from 'src/filters/date';
+import { toCurrency } from 'filters/index';
+import useNotify from 'src/composables/useNotify.js';
+import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
+import axios from 'axios';
+
+const { t } = useI18n();
+const { notify } = useNotify();
+const stateStore = useStateStore();
+
+let filterParams = ref({});
+const denyFormRef = ref(null);
+const denyRequestId = ref(null);
+const denyRequestIndex = ref(null);
+const itemRequestsOptions = ref([]);
+const arrayData = useArrayData('ItemRequests', {
+    url: 'TicketRequests/filter',
+    userParams: filterParams,
+    order: ['shippedDate ASC', 'isOk ASC'],
+});
+const store = arrayData.store;
+
+watch(
+    () => store.data,
+    (value) => (itemRequestsOptions.value = value)
+);
+
+const columns = computed(() => [
+    {
+        label: t('item.buyRequest.ticketId'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('item.buyRequest.shipped'),
+        field: 'shipped',
+        name: 'shipped',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('globals.description'),
+        field: 'description',
+        name: 'description',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('item.buyRequest.requester'),
+        name: 'requester',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('item.buyRequest.requested'),
+        field: 'quantity',
+        name: 'requested',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('item.buyRequest.price'),
+        field: 'price',
+        name: 'price',
+        align: 'left',
+        sortable: true,
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('item.buyRequest.attender'),
+        field: 'attender',
+        name: 'attender',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('item.buyRequest.item'),
+        field: 'item',
+        name: 'item',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('item.buyRequest.achieved'),
+        field: 'achieved',
+        name: 'achieved',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('item.buyRequest.concept'),
+        field: 'concept',
+        name: 'concept',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('item.buyRequest.state'),
+        field: 'state',
+        name: 'state',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: '',
+        name: 'action',
+        align: 'left',
+        columnFilter: null,
+    },
+]);
+
+const changeQuantity = async (request) => {
+    try {
+        if (request.saleFk) {
+            const params = {
+                quantity: request.saleQuantity,
+            };
+
+            await axios.patch(`Sales/${request.saleFk}`, params);
+            notify(t('globals.dataSaved'), 'positive');
+            confirmRequest(request);
+        } else confirmRequest(request);
+    } catch (error) {
+        console.error('Error changing quantity:: ', error);
+    }
+};
+
+const confirmRequest = async (request) => {
+    try {
+        if (request.itemFk && request.saleQuantity) {
+            const params = {
+                itemFk: request.itemFk,
+                quantity: request.saleQuantity,
+            };
+
+            const { data } = await axios.post(
+                `TicketRequests/${request.id}/confirm`,
+                params
+            );
+
+            request.itemDescription = data.concept;
+            request.isOk = true;
+            notify(t('globals.dataSaved'), 'positive');
+        }
+    } catch (error) {
+        console.error('Error confirming request:: ', error);
+    }
+};
+
+const getState = (isOk) => {
+    if (isOk === null) return t('Pending');
+    else if (isOk) return t('Accepted');
+    else return t('Denied');
+};
+
+const showDenyRequestForm = (requestId, rowIndex) => {
+    denyRequestId.value = requestId;
+    denyRequestIndex.value = rowIndex;
+    denyFormRef.value.show();
+};
+
+const onDenyAccept = (_, responseData) => {
+    itemRequestsOptions.value[denyRequestIndex.value].isOk = responseData.isOk;
+    itemRequestsOptions.value[denyRequestIndex.value].attenderFk =
+        responseData.attenderFk;
+    itemRequestsOptions.value[denyRequestIndex.value].response = responseData.response;
+    denyRequestId.value = null;
+    denyRequestIndex.value = null;
+};
+
+onMounted(async () => {
+    await arrayData.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
+
+onBeforeMount(() => {
+    const today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    const nextWeek = Date.vnNew();
+    nextWeek.setHours(23, 59, 59, 59);
+    nextWeek.setDate(nextWeek.getDate() + 7);
+
+    filterParams.value = {
+        from: today,
+        to: nextWeek,
+        state: 'pending',
+    };
+});
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ItemRequests"
+                url="TicketRequests/filter"
+                :label="t('globals.search')"
+                :info="t('You can search by Id or alias')"
+                :redirect="false"
+            />
+        </Teleport>
+    </template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ItemRequestFilter data-key="ItemRequests" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="itemRequestsOptions"
+            :columns="columns"
+            row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+            :no-data-label="t('globals.noResults')"
+        >
+            <template #body-cell-id="{ row }">
+                <QTd>
+                    <QBtn flat color="primary"> {{ row.ticketFk }}</QBtn>
+                    <TicketDescriptorProxy :id="row.ticketFk" />
+                </QTd>
+            </template>
+
+            <template #body-cell-shipped="{ row }">
+                <QTd>
+                    <QBadge
+                        v-if="getDateQBadgeColor(row.shipped)"
+                        :color="getDateQBadgeColor(row.shipped)"
+                        text-color="black"
+                        class="q-ma-none"
+                        dense
+                        style="font-size: 14px"
+                    >
+                        {{ toDateFormat(row.shipped) }}
+                    </QBadge>
+                    <span v-else>{{ toDateFormat(row.shipped) }}</span>
+                </QTd>
+            </template>
+            <template #body-cell-requester="{ row }">
+                <QTd>
+                    <QBtn flat dense color="primary"> {{ row.requesterName }}</QBtn>
+                    <WorkerDescriptorProxy :id="row.requesterFk" />
+                </QTd>
+            </template>
+            <template #body-cell-attender="{ row }">
+                <QTd>
+                    <QBtn flat dense color="primary"> {{ row.attenderName }}</QBtn>
+                    <WorkerDescriptorProxy :id="row.attenderFk" />
+                </QTd>
+            </template>
+            <template #body-cell-item="{ row }">
+                <QTd>
+                    <VnInput
+                        v-model.number="row.itemFk"
+                        type="number"
+                        :disable="row.isOk != null"
+                        dense
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-achieved="{ row }">
+                <QTd>
+                    <VnInput
+                        v-model.number="row.saleQuantity"
+                        @blur="changeQuantity(row)"
+                        type="number"
+                        :disable="!row.itemFk || row.isOk != null"
+                        dense
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-concept="{ row }">
+                <QTd>
+                    <QBtn flat dense color="primary"> {{ row.itemDescription }}</QBtn>
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QTd>
+            </template>
+            <template #body-cell-state="{ row }">
+                <QTd>
+                    <span>{{ getState(row.isOk) }}</span>
+                </QTd>
+            </template>
+            <template #body-cell-action="{ row, rowIndex }">
+                <QTd>
+                    <QIcon
+                        v-if="row.response?.length"
+                        name="insert_drive_file"
+                        color="primary"
+                        size="sm"
+                    >
+                        <QTooltip>
+                            {{ row.response }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-if="row.isOk == null"
+                        name="thumb_down"
+                        color="primary"
+                        size="sm"
+                        class="fill-icon"
+                        @click="showDenyRequestForm(row.id, rowIndex)"
+                    >
+                        <QTooltip>
+                            {{ t('Discard') }}
+                        </QTooltip>
+                    </QIcon>
+                </QTd>
+            </template>
+        </QTable>
+        <QDialog ref="denyFormRef" transition-show="scale" transition-hide="scale">
+            <ItemRequestDenyForm
+                :request-id="denyRequestId"
+                @on-data-saved="onDenyAccept"
+            />
+        </QDialog>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    Discard: Descartar
+    You can search by Id or alias: Buscar peticiones por identificador o alias
+    Denied: Denegada
+    Accepted: Aceptada
+    Pending: Pendiente
+</i18n>
diff --git a/src/pages/Item/ItemRequestDenyForm.vue b/src/pages/Item/ItemRequestDenyForm.vue
new file mode 100644
index 000000000..f26edb845
--- /dev/null
+++ b/src/pages/Item/ItemRequestDenyForm.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { reactive, ref, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+
+defineProps({
+    requestId: {
+        type: Number,
+        default: null,
+    },
+});
+
+const emit = defineEmits(['onDataSaved']);
+const { t } = useI18n();
+const textAreaRef = ref(null);
+const bankEntityFormData = reactive({});
+
+const onDataSaved = (formData, requestResponse) => {
+    emit('onDataSaved', formData, requestResponse);
+};
+
+onMounted(async () => {
+    await nextTick();
+    textAreaRef.value.focus();
+});
+</script>
+
+<template>
+    <FormModelPopup
+        :url-create="`TicketRequests/${$props.requestId}/deny`"
+        :title="t('Specify the reasons to deny this request')"
+        :form-initial-data="bankEntityFormData"
+        @on-data-saved="onDataSaved"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        ref="textAreaRef"
+                        type="textarea"
+                        v-model="data.observation"
+                        fill-input
+                        autogrow
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Specify the reasons to deny this request: Especifica las razones para descartar la petición
+</i18n>
diff --git a/src/pages/Item/ItemRequestFilter.vue b/src/pages/Item/ItemRequestFilter.vue
new file mode 100644
index 000000000..e142c28d3
--- /dev/null
+++ b/src/pages/Item/ItemRequestFilter.vue
@@ -0,0 +1,318 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const stateOptions = [
+    { code: 'pending', name: t('pending') },
+    { code: 'accepted', name: t('accepted') },
+    { code: 'denied', name: t('denied') },
+];
+
+const itemTypesOptions = ref([]);
+const warehousesOptions = ref([]);
+const workersOptions = ref([]);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'ticketFk':
+        case 'quantity':
+        case 'price':
+        case 'isOk':
+            return { [`tr.${param}`]: value };
+        case 'attenderName':
+            return { [`ua.name`]: value };
+        case 'shipped':
+            return {
+                't.shipped': {
+                    between: dateRange(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;
+    } else {
+        paramsObj[key]++;
+    }
+};
+
+const decrement = (paramsObj, key) => {
+    if (paramsObj[key] === 0) return;
+
+    paramsObj[key]--;
+};
+</script>
+
+<template>
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
+        @on-fetch="(data) => (itemTypesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="warehouses"
+        :filter="{ order: 'name ASC' }"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/search"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        :params="{
+            departmentCodes: ['VT'],
+        }"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+    />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :expr-builder="exprBuilder"
+    >
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span v-if="tag.label !== 'state'">{{ formatFn(tag.value) }}</span>
+                <span v-else>{{ t(`${tag.value}`) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.search"
+                        :label="t('params.search')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.ticketFk"
+                        :label="t('params.ticketFk')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        v-model="params.attenderFk"
+                        :label="t('params.attenderFk')"
+                        @update:model-value="searchFn()"
+                        :options="itemTypesOptions"
+                        option-value="id"
+                        option-label="nickname"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.clientFk"
+                        :label="t('params.clientFk')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.warehouseFk')"
+                        v-model="params.warehouseFk"
+                        @update:model-value="searchFn()"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.requesterFk')"
+                        v-model="params.requesterFk"
+                        @update:model-value="searchFn()"
+                        :options="workersOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                    <QItemLabel caption
+                                        >{{ scope.opt?.nickname }},
+                                        {{ scope.opt?.code }}</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QCard bordered>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            :label="t('params.from')"
+                            v-model="params.from"
+                            @update:model-value="searchFn()"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            :label="t('params.to')"
+                            v-model="params.to"
+                            @update:model-value="searchFn()"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            v-model="params.scopeDays"
+                            :label="t('params.scopeDays')"
+                            type="number"
+                            dense
+                            outlined
+                            rounded
+                            :min="0"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="add"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="add(params, 'scopeDays')"
+                                />
+                                <QBtn
+                                    icon="remove"
+                                    flat
+                                    dense
+                                    size="12px"
+                                    @click="decrement(params, 'scopeDays')"
+                                />
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QIcon name="info" style="position: absolute; top: 4px; right: 4px">
+                    <QTooltip max-width="300px">
+                        {{ t('dateFiltersTooltip') }}
+                    </QTooltip>
+                </QIcon>
+            </QCard>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.mine')"
+                        v-model="params.mine"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        :label="t('params.state')"
+                        v-model="params.state"
+                        @update:model-value="searchFn()"
+                        :options="stateOptions"
+                        option-value="code"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: General search
+        ticketFk: Ticket id
+        attenderFk: Atender
+        clientFk: Client id
+        warehouseFk: Warehouse
+        requesterFk: Salesperson
+        from: From
+        to: To
+        scopeDays: Days onward
+        mine: For me
+        state: State
+    dateFiltersTooltip: Cannot choose a range of dates and days onward at the same time
+    denied: Denied
+    accepted: Accepted
+    pending: Pending
+
+es:
+    params:
+        search: Búsqueda general
+        ticketFk: Id ticket
+        attenderFk: Comprador
+        clientFk: Id cliente
+        warehouseFk: Almacén
+        requesterFk: Comercial
+        from: Desde
+        to: Hasta
+        scopeDays: Días adelante
+        mine: Para mi
+        state: Estado
+    dateFiltersTooltip: No se puede seleccionar un rango de fechas y días en adelante a la vez
+    denied: Denegada
+    accepted: Aceptada
+    pending: Pendiente
+</i18n>
diff --git a/src/pages/Item/ItemTypeCreate.vue b/src/pages/Item/ItemTypeCreate.vue
new file mode 100644
index 000000000..af3dc34ea
--- /dev/null
+++ b/src/pages/Item/ItemTypeCreate.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const newItemTypeForm = reactive({});
+
+const workersOptions = ref([]);
+const categoriesOptions = ref([]);
+const temperaturesOptions = ref([]);
+
+const redirectToItemTypeBasicData = (_, { id }) => {
+    router.push({ name: 'ItemTypeBasicData', params: { id } });
+};
+</script>
+
+<template>
+    <FetchData
+        url="Workers"
+        @on-fetch="(data) => (workersOptions = data)"
+        :filter="{ order: 'firstName ASC', fields: ['id', 'firstName'] }"
+        auto-load
+    />
+    <FetchData
+        url="ItemCategories"
+        @on-fetch="(data) => (categoriesOptions = data)"
+        :filter="{ order: 'name ASC', fields: ['id', 'name'] }"
+        auto-load
+    />
+    <FetchData
+        url="Temperatures"
+        @on-fetch="(data) => (temperaturesOptions = data)"
+        :filter="{ order: 'name ASC', fields: ['code', 'name'] }"
+        auto-load
+    />
+    <QPage>
+        <VnSubToolbar />
+        <FormModel
+            url-create="ItemTypes"
+            model="itemTypeCreate"
+            :form-initial-data="newItemTypeForm"
+            observe-form-changes
+            @on-data-saved="redirectToItemTypeBasicData"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnInput v-model="data.code" :label="t('itemType.shared.code')" />
+                    <VnInput v-model="data.name" :label="t('itemType.shared.name')" />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelect
+                        v-model="data.workerFk"
+                        :label="t('itemType.shared.worker')"
+                        :options="workersOptions"
+                        option-value="id"
+                        option-label="firstName"
+                        hide-selected
+                    />
+                    <VnSelect
+                        v-model="data.categoryFk"
+                        :label="t('itemType.shared.category')"
+                        :options="categoriesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                    />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelect
+                        v-model="data.temperatureFk"
+                        :label="t('itemType.shared.temperature')"
+                        :options="temperaturesOptions"
+                        option-value="code"
+                        option-label="name"
+                        hide-selected
+                    />
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
diff --git a/src/pages/Item/ItemTypeList.vue b/src/pages/Item/ItemTypeList.vue
new file mode 100644
index 000000000..9d826655f
--- /dev/null
+++ b/src/pages/Item/ItemTypeList.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import ItemTypeSummary from 'src/pages/ItemType/Card/ItemTypeSummary.vue';
+import ItemTypeFilter from 'src/pages/ItemType/ItemTypeFilter.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+
+const redirectToItemTypeSummary = (id) => {
+    router.push({ name: 'ItemTypeSummary', params: { id } });
+};
+
+const redirectToCreateView = () => {
+    router.push({ name: 'ItemTypeCreate' });
+};
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'name':
+            return {
+                name: { like: `%${value}%` },
+            };
+        case 'code':
+            return {
+                code: { like: `%${value}%` },
+            };
+        case 'search':
+            if (value) {
+                if (!isNaN(value)) {
+                    return { id: value };
+                } else {
+                    return {
+                        or: [
+                            {
+                                name: {
+                                    like: `%${value}%`,
+                                },
+                            },
+                            {
+                                code: {
+                                    like: `%${value}%`,
+                                },
+                            },
+                        ],
+                    };
+                }
+            }
+    }
+};
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="ItemTypeList"
+                url="ItemTypes"
+                :label="t('Search item type')"
+                :info="t('Search itemType by id, name or code')"
+                :expr-builder="exprBuilder"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <ItemTypeFilter data-key="ItemTypeList" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="column items-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="ItemTypeList"
+                url="ItemTypes"
+                :order="['name']"
+                auto-load
+                :expr-builder="exprBuilder"
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.code"
+                        @click="redirectToItemTypeSummary(row.id)"
+                        :id="row.id"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('Name')" :value="row.name" />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, ItemTypeSummary)"
+                                color="primary"
+                                type="submit"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+    <QPageSticky :offset="[20, 20]">
+        <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+        <QTooltip>
+            {{ t('New item type') }}
+        </QTooltip>
+    </QPageSticky>
+</template>
+
+<i18n>
+es:
+    New item type: Nueva familia
+    Name: Nombre
+    Search item type: Buscar familia
+    Search itemType by id, name or code: Buscar familia por id, nombre o código
+</i18n>
diff --git a/src/pages/Item/locale/en.yml b/src/pages/Item/locale/en.yml
new file mode 100644
index 000000000..9acd1de4d
--- /dev/null
+++ b/src/pages/Item/locale/en.yml
@@ -0,0 +1,36 @@
+itemDiary:
+    date: Date
+    id: Id
+    state: State
+    reference: Reference
+    client: Client
+    in: In
+    out: Out
+    balance: Balance
+    claim: Claim
+    showBefore: Show what's before the inventory
+    since: Since
+    warehouse: Warehouse
+tax:
+    country: Country
+    class: Class
+lastEntries:
+    since: Since
+    to: To
+    ig: Ig
+    warehouse: Warehouse
+    landed: Landed
+    entry: Entry
+    pvp: PVP
+    label: Label
+    packing: Packing
+    grouping: Grouping
+    stems: Stems
+    quantity: Quantity
+    cost: Cost
+    kg: Kg.
+    cube: Cube
+    supplier: Supplier
+    package: Package
+    freight: Freight
+    comission: Comission
diff --git a/src/pages/Item/locale/es.yml b/src/pages/Item/locale/es.yml
new file mode 100644
index 000000000..46e0d9eb7
--- /dev/null
+++ b/src/pages/Item/locale/es.yml
@@ -0,0 +1,36 @@
+itemDiary:
+    date: Fecha
+    id: Id
+    state: Estado
+    reference: Referencia
+    client: Cliente
+    in: Entrada
+    out: Salida
+    balance: Balance
+    claim: Reclamación
+    showBefore: Mostrar lo anterior al inventario
+    since: Desde
+    warehouse: Almacén
+tax:
+    country: País
+    class: Clase
+lastEntries:
+    since: Desde
+    to: Hasta
+    ig: Ig
+    warehouse: Almacén
+    landed: F. Entrega
+    entry: Entrada
+    pvp: PVP
+    label: Etiquetas
+    packing: Packing
+    grouping: Grouping
+    stems: Tallos
+    quantity: Cantidad
+    cost: Coste
+    kg: Kg.
+    cube: Cubo
+    supplier: Proveedor
+    package: Embalaje
+    freight: Porte
+    comission: Comisión
diff --git a/src/pages/ItemType/Card/ItemTypeBasicData.vue b/src/pages/ItemType/Card/ItemTypeBasicData.vue
new file mode 100644
index 000000000..0bdfab951
--- /dev/null
+++ b/src/pages/ItemType/Card/ItemTypeBasicData.vue
@@ -0,0 +1,79 @@
+<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';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const workersOptions = ref([]);
+const categoriesOptions = ref([]);
+const temperaturesOptions = ref([]);
+</script>
+<template>
+    <FetchData
+        url="Workers"
+        @on-fetch="(data) => (workersOptions = data)"
+        :filter="{ order: 'firstName ASC', fields: ['id', 'firstName'] }"
+        auto-load
+    />
+    <FetchData
+        url="ItemCategories"
+        @on-fetch="(data) => (categoriesOptions = data)"
+        :filter="{ order: 'name ASC', fields: ['id', 'name'] }"
+        auto-load
+    />
+    <FetchData
+        url="Temperatures"
+        @on-fetch="(data) => (temperaturesOptions = data)"
+        :filter="{ order: 'name ASC', fields: ['code', 'name'] }"
+        auto-load
+    />
+    <FormModel
+        :url="`ItemTypes/${route.params.id}`"
+        :url-update="`ItemTypes/${route.params.id}`"
+        model="itemTypeBasicData"
+        auto-load
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput v-model="data.code" :label="t('shared.code')" />
+                <VnInput v-model="data.name" :label="t('shared.name')" />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    v-model="data.workerFk"
+                    :label="t('shared.worker')"
+                    :options="workersOptions"
+                    option-value="id"
+                    option-label="firstName"
+                    hide-selected
+                />
+                <VnSelect
+                    v-model="data.categoryFk"
+                    :label="t('shared.category')"
+                    :options="categoriesOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    v-model="data.temperatureFk"
+                    :label="t('shared.temperature')"
+                    :options="temperaturesOptions"
+                    option-value="code"
+                    option-label="name"
+                    hide-selected
+                />
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/ItemType/Card/ItemTypeCard.vue b/src/pages/ItemType/Card/ItemTypeCard.vue
new file mode 100644
index 000000000..cb8adf7f6
--- /dev/null
+++ b/src/pages/ItemType/Card/ItemTypeCard.vue
@@ -0,0 +1,12 @@
+<script setup>
+import VnCard from 'components/common/VnCard.vue';
+
+import ItemTypeDescriptor from 'src/pages/ItemType/Card/ItemTypeDescriptor.vue';
+</script>
+<template>
+    <VnCard
+        data-key="ItemTypeSummary"
+        base-url="ItemTypes"
+        :descriptor="ItemTypeDescriptor"
+    />
+</template>
diff --git a/src/pages/ItemType/Card/ItemTypeDescriptor.vue b/src/pages/ItemType/Card/ItemTypeDescriptor.vue
new file mode 100644
index 000000000..e565a791b
--- /dev/null
+++ b/src/pages/ItemType/Card/ItemTypeDescriptor.vue
@@ -0,0 +1,85 @@
+<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 WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+import useCardDescription from 'src/composables/useCardDescription';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+
+const itemTypeFilter = {
+    include: [
+        { relation: 'worker' },
+        { relation: 'category' },
+        { relation: 'itemPackingType' },
+        { relation: 'temperature' },
+    ],
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.code, entity.id));
+</script>
+
+<template>
+    <CardDescriptor
+        module="ItemType"
+        :url="`ItemTypes/${entityId}`"
+        :filter="itemTypeFilter"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        @on-fetch="setData"
+        data-key="entry"
+    >
+        <template #header-extra-action>
+            <QBtn
+                round
+                flat
+                size="sm"
+                icon="vn:item"
+                color="white"
+                :to="{ name: 'ItemTypeList' }"
+            >
+                <QTooltip>
+                    {{ t('Go to module index') }}
+                </QTooltip>
+            </QBtn>
+        </template>
+        <template #body="{ entity }">
+            <VnLv :label="t('shared.code')" :value="entity.code" />
+            <VnLv :label="t('shared.name')" :value="entity.name" />
+            <VnLv :label="t('shared.worker')">
+                <template #value>
+                    <span class="link">{{ entity.worker?.firstName }}</span>
+                    <WorkerDescriptorProxy :id="entity.worker?.id" />
+                </template>
+            </VnLv>
+            <VnLv :label="t('shared.category')" :value="entity.category?.name" />
+        </template>
+    </CardDescriptor>
+</template>
+
+<i18n>
+es:
+    Go to module index: Ir al índice del módulo
+</i18n>
diff --git a/src/pages/ItemType/Card/ItemTypeSummary.vue b/src/pages/ItemType/Card/ItemTypeSummary.vue
new file mode 100644
index 000000000..62d1c74ab
--- /dev/null
+++ b/src/pages/ItemType/Card/ItemTypeSummary.vue
@@ -0,0 +1,109 @@
+<script setup>
+import { ref, computed, onUpdated } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+
+onUpdated(() => summaryRef.value.fetch());
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const itemTypeFilter = {
+    include: [
+        { relation: 'worker' },
+        { relation: 'category' },
+        { relation: 'itemPackingType' },
+        { relation: 'temperature' },
+    ],
+};
+
+const entityId = computed(() => $props.id || route.params.id);
+const summaryRef = ref();
+const itemType = ref();
+
+async function setItemTypeData(data) {
+    if (data) itemType.value = data;
+}
+</script>
+
+<template>
+    <CardSummary
+        ref="summaryRef"
+        :url="`ItemTypes/${entityId}`"
+        data-key="ItemTypeSummary"
+        :filter="itemTypeFilter"
+        @on-fetch="(data) => setItemTypeData(data)"
+        class="full-width"
+    >
+        <template #header-left>
+            <router-link
+                v-if="route.name !== 'ItemTypeSummary'"
+                :to="{ name: 'ItemTypeSummary', params: { id: entityId } }"
+                class="header link"
+            >
+                <QIcon name="open_in_new" color="white" size="sm" />
+            </router-link>
+        </template>
+        <template #header>
+            <span>
+                {{ itemType.id }} - {{ itemType.name }} -
+                {{ itemType.worker?.firstName }}
+                {{ itemType.worker?.lastName }}
+            </span>
+        </template>
+        <template #body>
+            <QCard class="vn-one">
+                <router-link
+                    :to="{ name: 'ItemTypeBasicData', params: { id: entityId } }"
+                    class="header header-link"
+                >
+                    {{ t('globals.summary.basicData') }}
+                    <QIcon name="open_in_new" />
+                </router-link>
+                <VnLv :label="t('summary.id')" :value="itemType.id" />
+                <VnLv :label="t('shared.code')" :value="itemType.code" />
+                <VnLv :label="t('shared.name')" :value="itemType.name" />
+                <VnLv :label="t('shared.worker')">
+                    <template #value>
+                        <span class="link">{{ itemType.worker?.firstName }}</span>
+                        <WorkerDescriptorProxy :id="itemType.worker?.id" />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('shared.category')" :value="itemType.category?.name" />
+                <VnLv
+                    :label="t('shared.temperature')"
+                    :value="itemType.temperature?.name"
+                />
+                <VnLv :label="t('summary.life')" :value="itemType.life" />
+                <VnLv :label="t('summary.promo')" :value="itemType.promo" />
+                <VnLv
+                    :label="t('summary.itemPackingType')"
+                    :value="itemType.itemPackingType?.description"
+                />
+                <VnLv
+                    class="large-label"
+                    :label="t('summary.isUnconventionalSize')"
+                    :value="itemType.isUnconventionalSize"
+                />
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+
+<style lang="scss">
+.large-label > div.label {
+    width: 15em !important;
+}
+</style>
diff --git a/src/pages/ItemType/ItemTypeFilter.vue b/src/pages/ItemType/ItemTypeFilter.vue
new file mode 100644
index 000000000..2a86795c2
--- /dev/null
+++ b/src/pages/ItemType/ItemTypeFilter.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+const { t } = useI18n();
+
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const emit = defineEmits(['search']);
+</script>
+
+<template>
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        @search="emit('search')"
+    >
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('Name')" v-model="params.name" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput v-model="params.code" :label="t('Code')" is-outlined />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        name: Name
+        code: Code
+es:
+    params:
+        name: Nombre
+        code: Código
+    Name: Nombre
+    Code: Código
+</i18n>
diff --git a/src/pages/ItemType/locale/en.yml b/src/pages/ItemType/locale/en.yml
new file mode 100644
index 000000000..7889418ea
--- /dev/null
+++ b/src/pages/ItemType/locale/en.yml
@@ -0,0 +1,12 @@
+shared:
+    code: Code
+    name: Name
+    worker: Worker
+    category: Category
+    temperature: Temperature
+summary:
+    id: id
+    life: Life
+    promo: Promo
+    itemPackingType: Item packing type
+    isUnconventionalSize: Is unconventional size
diff --git a/src/pages/ItemType/locale/es.yml b/src/pages/ItemType/locale/es.yml
new file mode 100644
index 000000000..9a94dceb6
--- /dev/null
+++ b/src/pages/ItemType/locale/es.yml
@@ -0,0 +1,17 @@
+shared:
+    code: Código
+    name: Nombre
+    worker: Trabajador
+    category: Reino
+    temperature: Temperatura
+summary:
+    id: id
+    code: Código
+    name: Nombre
+    worker: Trabajador
+    category: Reino
+    temperature: Temperatura
+    life: Vida
+    promo: Promoción
+    itemPackingType: Tipo de embalaje
+    isUnconventionalSize: Es de tamaño poco convencional
diff --git a/src/pages/Login/LoginMain.vue b/src/pages/Login/LoginMain.vue
index fcde51edf..5a3490f50 100644
--- a/src/pages/Login/LoginMain.vue
+++ b/src/pages/Login/LoginMain.vue
@@ -38,7 +38,13 @@ async function onSubmit() {
 
         if (!multimediaToken) return;
 
-        await session.login(data.token, multimediaToken.id, keepLogin.value);
+        const login = {
+            ...data,
+            created: Date.now(),
+            tokenMultimedia: multimediaToken.id,
+            keepLogin: keepLogin.value,
+        };
+        await session.login(login);
 
         quasar.notify({
             message: t('login.loginSuccess'),
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index 402df1173..04748a8c8 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -7,7 +7,7 @@ import axios from 'axios';
 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';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 const { t } = useI18n();
@@ -238,7 +238,7 @@ const getCategoryClass = (category, params) => {
             </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.type')"
                         v-model="params.typeFk"
                         :options="typeList"
@@ -267,13 +267,13 @@ const getCategoryClass = (category, params) => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QSeparator />
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.order')"
                         v-model="selectedOrder"
                         :options="orderList || []"
@@ -293,7 +293,7 @@ const getCategoryClass = (category, params) => {
             </QItem>
             <QItem class="q-mb-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.order')"
                         v-model="selectedOrderField"
                         :options="OrderFields || []"
@@ -314,7 +314,7 @@ const getCategoryClass = (category, params) => {
             <QSeparator />
             <QItem class="q-mt-md">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.tag')"
                         v-model="selectedTag"
                         :options="props.tags || []"
@@ -340,7 +340,7 @@ const getCategoryClass = (category, params) => {
                     is-outlined
                     class="filter-input"
                 />
-                <VnSelectFilter
+                <VnSelect
                     v-else
                     :label="t('params.value')"
                     v-model="value.value"
diff --git a/src/pages/Order/Card/OrderFilter.vue b/src/pages/Order/Card/OrderFilter.vue
index 62bfe0e02..347affb04 100644
--- a/src/pages/Order/Card/OrderFilter.vue
+++ b/src/pages/Order/Card/OrderFilter.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 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';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 
@@ -75,7 +75,7 @@ const sourceList = ref(null);
             </QItem>
             <QItem>
                 <QItemSection v-if="agencyList">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('agency')"
                         v-model="params.agencyModeFk"
                         :options="agencyList"
@@ -96,7 +96,7 @@ const sourceList = ref(null);
             </QItem>
             <QItem>
                 <QItemSection v-if="salesPersonList">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('salesPerson')"
                         v-model="params.workerFk"
                         :options="salesPersonList"
@@ -120,7 +120,7 @@ const sourceList = ref(null);
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
                 <QItemSection v-else>
                     <QSkeleton type="QInput" class="full-width" />
@@ -160,7 +160,7 @@ const sourceList = ref(null);
             </QItem>
             <QItem>
                 <QItemSection v-if="sourceList">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('application')"
                         v-model="params.sourceApp"
                         :options="sourceList"
diff --git a/src/pages/Order/Card/OrderForm.vue b/src/pages/Order/Card/OrderForm.vue
index 6a4ae6aac..ddb7182a0 100644
--- a/src/pages/Order/Card/OrderForm.vue
+++ b/src/pages/Order/Card/OrderForm.vue
@@ -7,7 +7,7 @@ import { useState } from 'composables/useState';
 import FormModel from 'components/FormModel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
@@ -145,7 +145,7 @@ const orderFilter = {
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('order.form.clientFk')"
                             v-model="data.clientFk"
                             :options="clientList"
@@ -165,10 +165,10 @@ const orderFilter = {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('order.form.addressFk')"
                             v-model="data.addressFk"
                             :options="addressList"
@@ -191,7 +191,7 @@ const orderFilter = {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
@@ -208,7 +208,7 @@ const orderFilter = {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('order.form.agencyModeFk')"
                             v-model="data.agencyModeFk"
                             :options="agencyList"
@@ -217,7 +217,7 @@ const orderFilter = {
                             hide-selected
                             :disable="!agencyList?.length"
                         >
-                        </VnSelectFilter>
+                        </VnSelect>
                     </div>
                 </VnRow>
             </template>
diff --git a/src/pages/Parking/Card/ParkingBasicData.vue b/src/pages/Parking/Card/ParkingBasicData.vue
index b03b7be7c..c1a9dcee8 100644
--- a/src/pages/Parking/Card/ParkingBasicData.vue
+++ b/src/pages/Parking/Card/ParkingBasicData.vue
@@ -6,7 +6,7 @@ import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModel from 'components/FormModel.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -38,7 +38,7 @@ const filter = {
                 <VnInput v-model="data.column" :label="t('parking.column')" />
             </VnRow>
             <VnRow>
-                <VnSelectFilter
+                <VnSelect
                     v-model="data.sectorFk"
                     option-value="id"
                     option-label="description"
diff --git a/src/pages/Parking/ParkingFilter.vue b/src/pages/Parking/ParkingFilter.vue
index 2e559a879..1d7c3a4b6 100644
--- a/src/pages/Parking/ParkingFilter.vue
+++ b/src/pages/Parking/ParkingFilter.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnInput from 'components/common/VnInput.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 defineProps({
@@ -45,7 +45,7 @@ const emit = defineEmits(['search']);
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         v-model="params.sectorFk"
                         option-value="id"
                         option-label="description"
diff --git a/src/pages/Route/Card/RouteAutonomousFilter.vue b/src/pages/Route/Card/RouteAutonomousFilter.vue
index ec30458ce..eb3fa6f2c 100644
--- a/src/pages/Route/Card/RouteAutonomousFilter.vue
+++ b/src/pages/Route/Card/RouteAutonomousFilter.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 
@@ -87,7 +87,7 @@ const exprBuilder = (param, value) => {
                 </QItem>
                 <QItem class="q-my-sm" v-if="agencyList">
                     <QItemSection>
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Agency route')"
                             v-model="params.agencyModeFk"
                             :options="agencyList"
@@ -106,7 +106,7 @@ const exprBuilder = (param, value) => {
                 </QItem>
                 <QItem class="q-my-sm" v-if="agencyAgreementList">
                     <QItemSection>
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Agency agreement')"
                             v-model="params.agencyFk"
                             :options="agencyAgreementList"
@@ -125,7 +125,7 @@ const exprBuilder = (param, value) => {
                 </QItem>
                 <QItem class="q-my-sm" v-if="supplierList">
                     <QItemSection>
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('Autonomous')"
                             v-model="params.supplierFk"
                             :options="supplierList"
@@ -172,7 +172,11 @@ const exprBuilder = (param, value) => {
                 </QItem>
                 <QItem class="q-my-sm">
                     <QItemSection>
-                        <VnInput v-model="params.packages" :label="t('Packages')" is-outlined />
+                        <VnInput
+                            v-model="params.packages"
+                            :label="t('Packages')"
+                            is-outlined
+                        />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-my-sm">
@@ -192,7 +196,11 @@ const exprBuilder = (param, value) => {
                 </QItem>
                 <QItem class="q-my-sm">
                     <QItemSection>
-                        <VnInput v-model="params.invoiceInFk" :label="t('Received')" is-outlined />
+                        <VnInput
+                            v-model="params.invoiceInFk"
+                            :label="t('Received')"
+                            is-outlined
+                        />
                     </QItemSection>
                 </QItem>
             </QList>
diff --git a/src/pages/Route/Card/RouteFilter.vue b/src/pages/Route/Card/RouteFilter.vue
index bbd71df49..050e7c71d 100644
--- a/src/pages/Route/Card/RouteFilter.vue
+++ b/src/pages/Route/Card/RouteFilter.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 
@@ -63,7 +63,7 @@ const warehouseList = ref([]);
         <template #body="{ params }">
             <QItem class="q-my-sm">
                 <QItemSection v-if="workerList">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Worker')"
                         v-model="params.workerFk"
                         :options="workerList"
@@ -87,12 +87,12 @@ const warehouseList = ref([]);
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem class="q-my-sm">
                 <QItemSection v-if="agencyList">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Agency')"
                         v-model="params.agencyModeFk"
                         :options="agencyList"
@@ -148,7 +148,7 @@ const warehouseList = ref([]);
             </QItem>
             <QItem class="q-my-sm">
                 <QItemSection v-if="vehicleList">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Vehicle')"
                         v-model="params.vehicleFk"
                         :options="vehicleList"
@@ -171,7 +171,7 @@ const warehouseList = ref([]);
             </QItem>
             <QItem class="q-my-sm">
                 <QItemSection v-if="vehicleList">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Warehouse')"
                         v-model="params.warehouseFk"
                         :options="warehouseList"
diff --git a/src/pages/Route/Card/RouteForm.vue b/src/pages/Route/Card/RouteForm.vue
index 7087037b0..b365bc9ba 100644
--- a/src/pages/Route/Card/RouteForm.vue
+++ b/src/pages/Route/Card/RouteForm.vue
@@ -6,7 +6,7 @@ import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 import axios from 'axios';
@@ -124,7 +124,7 @@ const onSave = (data, response) => {
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Worker')"
                         v-model="data.workerFk"
                         :options="workerList"
@@ -145,10 +145,10 @@ const onSave = (data, response) => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Vehicle')"
                         v-model="data.vehicleFk"
                         :options="vehicleList"
@@ -163,7 +163,7 @@ const onSave = (data, response) => {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Agency')"
                         v-model="data.agencyModeFk"
                         :options="agencyList"
diff --git a/src/pages/Route/Roadmap/RoadmapAddStopForm.vue b/src/pages/Route/Roadmap/RoadmapAddStopForm.vue
index 6793e4513..736280e99 100644
--- a/src/pages/Route/Roadmap/RoadmapAddStopForm.vue
+++ b/src/pages/Route/Roadmap/RoadmapAddStopForm.vue
@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
 import VnInput from 'components/common/VnInput.vue';
@@ -38,7 +38,7 @@ const isDialog = computed(() => props.layout === 'dialog');
     />
     <div :class="[isDialog ? 'column' : 'form-gap', 'full-width flex']">
         <QCardSection class="flex-grow q-px-none flex-1">
-            <VnSelectFilter
+            <VnSelect
                 v-model.number="form.warehouseFk"
                 class="full-width"
                 :label="t('Warehouse')"
diff --git a/src/pages/Route/Roadmap/RoadmapBasicData.vue b/src/pages/Route/Roadmap/RoadmapBasicData.vue
index 8b10f5e57..b9df0bdd7 100644
--- a/src/pages/Route/Roadmap/RoadmapBasicData.vue
+++ b/src/pages/Route/Roadmap/RoadmapBasicData.vue
@@ -7,9 +7,9 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
-import {ref} from "vue";
+import { ref } from 'vue';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -69,7 +69,7 @@ const onSave = (data, response) => {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Carrier')"
                         v-model="data.supplierFk"
                         :options="supplierList"
@@ -89,7 +89,7 @@ const onSave = (data, response) => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </div>
                 <div class="col">
                     <VnInput
@@ -109,11 +109,7 @@ const onSave = (data, response) => {
                     />
                 </div>
                 <div class="col">
-                    <VnInput
-                        v-model="data.phone"
-                        :label="t('Phone')"
-                        clearable
-                    />
+                    <VnInput v-model="data.phone" :label="t('Phone')" clearable />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/pages/Route/Roadmap/RoadmapFilter.vue b/src/pages/Route/Roadmap/RoadmapFilter.vue
index b3fb7bf34..04c5c9696 100644
--- a/src/pages/Route/Roadmap/RoadmapFilter.vue
+++ b/src/pages/Route/Roadmap/RoadmapFilter.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 
@@ -90,7 +90,7 @@ const exprBuilder = (param, value) => {
             </QItem>
             <QItem v-if="supplierList" class="q-my-sm">
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Carrier')"
                         v-model="params.supplierFk"
                         :options="supplierList"
@@ -113,7 +113,7 @@ const exprBuilder = (param, value) => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem class="q-my-sm">
diff --git a/src/pages/Route/Roadmap/RoadmapStops.vue b/src/pages/Route/Roadmap/RoadmapStops.vue
index 10d6e6066..5c3bd51e7 100644
--- a/src/pages/Route/Roadmap/RoadmapStops.vue
+++ b/src/pages/Route/Roadmap/RoadmapStops.vue
@@ -3,9 +3,9 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import FetchData from 'components/FetchData.vue';
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 import CrudModel from 'components/CrudModel.vue';
-import RoadmapAddStopForm from "pages/Route/Roadmap/RoadmapAddStopForm.vue";
+import RoadmapAddStopForm from 'pages/Route/Roadmap/RoadmapAddStopForm.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -21,10 +21,6 @@ const updateDefaultStop = (data) => {
     eta.setDate(eta.getDate() + 1);
     defaultStop.value.eta = eta.toISOString();
 };
-
-onMounted(() => {
-    if (roadmapStopsCrudRef.value) roadmapStopsCrudRef.value.reload();
-});
 </script>
 <template>
     <VnSubToolbar />
@@ -43,6 +39,7 @@ onMounted(() => {
             :filter="{ where: { roadmapFk: route.params?.id } }"
             :default-remove="false"
             :data-required="defaultStop"
+            auto-load
         >
             <template #body="{ rows }">
                 <QCard class="q-pa-md">
@@ -51,7 +48,10 @@ onMounted(() => {
                         :key="index"
                         class="row no-wrap"
                     >
-                        <RoadmapAddStopForm :roadmap-fk="route.params?.id" :form-data="row" />
+                        <RoadmapAddStopForm
+                            :roadmap-fk="route.params?.id"
+                            :form-data="row"
+                        />
                         <div class="col-1 row justify-center items-center">
                             <QIcon
                                 name="delete"
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 773b4f773..c0888a225 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -4,7 +4,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { dashIfEmpty, toHour } from 'src/filters';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import { useValidator } from 'composables/useValidator';
 import VnInputDate from 'components/common/VnInputDate.vue';
@@ -213,7 +213,7 @@ const openTicketsDialog = (id) => {
             <QCardActions align="right">
                 <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
                 <QBtn color="primary" v-close-popup @click="cloneRoutes">
-                    {{ t('Clone') }}
+                    {{ t('globals.clone') }}
                 </QBtn>
             </QCardActions>
         </QCard>
@@ -287,7 +287,7 @@ const openTicketsDialog = (id) => {
                         >
                             <template #body-cell-worker="{ row }">
                                 <QTd class="table-input-cell">
-                                    <VnSelectFilter
+                                    <VnSelect
                                         :label="t('Worker')"
                                         v-model="row.workerFk"
                                         :options="workers"
@@ -315,12 +315,12 @@ const openTicketsDialog = (id) => {
                                                 </QItemSection>
                                             </QItem>
                                         </template>
-                                    </VnSelectFilter>
+                                    </VnSelect>
                                 </QTd>
                             </template>
                             <template #body-cell-agency="{ row }">
                                 <QTd class="table-input-cell">
-                                    <VnSelectFilter
+                                    <VnSelect
                                         :label="t('Agency')"
                                         v-model="row.agencyModeFk"
                                         :options="agencyList"
@@ -337,7 +337,7 @@ const openTicketsDialog = (id) => {
                             </template>
                             <template #body-cell-vehicle="{ row }">
                                 <QTd class="table-input-cell">
-                                    <VnSelectFilter
+                                    <VnSelect
                                         :label="t('Vehicle')"
                                         v-model="row.vehicleFk"
                                         :options="vehicleList"
@@ -510,7 +510,6 @@ es:
     Select the starting date: Seleccione la fecha de inicio
     Stating date: Fecha de inicio
     Cancel: Cancelar
-    Clone: Clonar
     Mark as served: Marcar como servidas
     Download selected routes as PDF: Descargar rutas seleccionadas como PDF
     Add ticket: Añadir tickets
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index 3fffb3829..7a7dbd948 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -176,7 +176,7 @@ function navigateToRoadmapSummary(event, row) {
             <QCardActions align="right">
                 <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
                 <QBtn color="primary" v-close-popup @click="cloneSelection">
-                    {{ t('Clone') }}
+                    {{ t('globals.clone') }}
                 </QBtn>
             </QCardActions>
         </QCard>
diff --git a/src/pages/Route/RouteTickets.vue b/src/pages/Route/RouteTickets.vue
index c1ca5507e..44818323e 100644
--- a/src/pages/Route/RouteTickets.vue
+++ b/src/pages/Route/RouteTickets.vue
@@ -251,7 +251,7 @@ const openSmsDialog = async () => {
             <QCardActions align="right">
                 <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
                 <QBtn color="primary" v-close-popup @click="cloneRoutes">
-                    {{ t('Clone') }}
+                    {{ t('globals.clone') }}
                 </QBtn>
             </QCardActions>
         </QCard>
diff --git a/src/pages/Shelving/Card/ShelvingSummary.vue b/src/pages/Shelving/Card/ShelvingSummary.vue
index 49470719e..649799b00 100644
--- a/src/pages/Shelving/Card/ShelvingSummary.vue
+++ b/src/pages/Shelving/Card/ShelvingSummary.vue
@@ -20,14 +20,14 @@ const router = useRouter();
 const { t } = useI18n();
 
 const entityId = computed(() => $props.id || route.params.id);
-const isDialog = Boolean($props.id);
-const hideRightDrawer = () => {
-    if (!isDialog) {
-        stateStore.rightDrawer = false;
-    }
-};
-onMounted(hideRightDrawer);
-onUnmounted(hideRightDrawer);
+const isDialog = false;
+// const hideRightDrawer = () => {
+//     if (!isDialog) {
+//         stateStore.rightDrawer = false;
+//     }
+// };
+// onMounted(hideRightDrawer);
+// onUnmounted(hideRightDrawer);
 const filter = {
     include: [
         {
@@ -46,23 +46,6 @@ const filter = {
 </script>
 
 <template>
-    <template v-if="!isDialog && stateStore.isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </template>
     <div class="q-pa-md">
         <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
             <template #header="{ entity }">
@@ -102,18 +85,4 @@ const filter = {
             </template>
         </CardSummary>
     </div>
-    <QDrawer
-        v-if="!isDialog"
-        v-model="stateStore.rightDrawer"
-        side="right"
-        :width="256"
-        show-if-above
-    >
-        <QScrollArea class="fit text-grey-8">
-            <ShelvingFilter
-                data-key="ShelvingList"
-                @search="router.push({ name: 'ShelvingList' })"
-            />
-        </QScrollArea>
-    </QDrawer>
 </template>
diff --git a/src/pages/Shelving/ShelvingList.vue b/src/pages/Shelving/ShelvingList.vue
index a5a24e84d..4584248bf 100644
--- a/src/pages/Shelving/ShelvingList.vue
+++ b/src/pages/Shelving/ShelvingList.vue
@@ -72,7 +72,6 @@ function exprBuilder(param, value) {
                 :filter="filter"
                 :expr-builder="exprBuilder"
                 :limit="20"
-                auto-load
             >
                 <template #body="{ rows }">
                     <CardList
diff --git a/src/pages/Supplier/Card/SupplierAccounts.vue b/src/pages/Supplier/Card/SupplierAccounts.vue
index 41df6adb9..d95b6c30c 100644
--- a/src/pages/Supplier/Card/SupplierAccounts.vue
+++ b/src/pages/Supplier/Card/SupplierAccounts.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -59,10 +59,6 @@ const setWireTransfer = async () => {
         console.error('Error setting wire transfer', err);
     }
 };
-
-onMounted(() => {
-    if (supplierAccountRef.value) supplierAccountRef.value.reload();
-});
 </script>
 <template>
     <FetchData
@@ -94,6 +90,7 @@ onMounted(() => {
         :default-remove="false"
         :data-required="{ supplierFk: route.params.id }"
         @save-changes="onChangesSaved()"
+        auto-load
     >
         <template #body="{ rows }">
             <QCard class="q-pa-md">
diff --git a/src/pages/Supplier/Card/SupplierAddressesCreate.vue b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
index 69c180e0a..54f8580bd 100644
--- a/src/pages/Supplier/Card/SupplierAddressesCreate.vue
+++ b/src/pages/Supplier/Card/SupplierAddressesCreate.vue
@@ -4,7 +4,7 @@ import { reactive, ref, onMounted, onBeforeMount } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModel from 'components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
diff --git a/src/pages/Supplier/Card/SupplierAgencyTerm.vue b/src/pages/Supplier/Card/SupplierAgencyTerm.vue
index 769ff4dad..50a4f7adc 100644
--- a/src/pages/Supplier/Card/SupplierAgencyTerm.vue
+++ b/src/pages/Supplier/Card/SupplierAgencyTerm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -26,10 +26,6 @@ const supplierAgencyFilter = {
 const redirectToCreateView = () => {
     router.push({ name: 'SupplierAgencyTermCreate' });
 };
-
-onMounted(() => {
-    if (supplierAgencyTermRef.value) supplierAgencyTermRef.value.reload();
-});
 </script>
 <template>
     <FetchData
@@ -49,6 +45,7 @@ onMounted(() => {
         :data-required="{
             supplierFk: route.params.id,
         }"
+        auto-load
     >
         <template #body="{ rows }">
             <QCard class="q-pa-md">
diff --git a/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue b/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue
index 17786c1ea..ccd1cafd3 100644
--- a/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue
+++ b/src/pages/Supplier/Card/SupplierAgencyTermCreate.vue
@@ -4,7 +4,7 @@ import { reactive, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 
@@ -47,7 +47,7 @@ const onDataSaved = () => {
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('supplier.agencyTerms.agencyFk')"
                             v-model="data.agencyFk"
                             :options="agenciesOptions"
diff --git a/src/pages/Supplier/Card/SupplierBasicData.vue b/src/pages/Supplier/Card/SupplierBasicData.vue
index 01741dd77..6a1d747d5 100644
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@@ -7,7 +7,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -39,7 +39,7 @@ const workersOptions = ref([]);
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('supplier.basicData.workerFk')"
                         v-model="data.workerFk"
                         :options="workersOptions"
@@ -66,7 +66,7 @@ const workersOptions = ref([]);
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/pages/Supplier/Card/SupplierBillingData.vue b/src/pages/Supplier/Card/SupplierBillingData.vue
index 26b6e5461..e6e61d339 100644
--- a/src/pages/Supplier/Card/SupplierBillingData.vue
+++ b/src/pages/Supplier/Card/SupplierBillingData.vue
@@ -6,7 +6,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -38,7 +38,7 @@ const formatPayDems = (data) => {
         <template #form="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('supplier.billingData.payMethodFk')"
                         v-model="data.payMethodFk"
                         :options="paymethodsOptions"
@@ -49,7 +49,7 @@ const formatPayDems = (data) => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('supplier.billingData.payDemFk')"
                         v-model="data.payDemFk"
                         :options="payDemsOptions"
diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index 8011741ef..8dbb87529 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
+import { computed, onMounted, watch, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
@@ -15,15 +14,17 @@ import { usePrintService } from 'composables/usePrintService';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import { useStateStore } from 'stores/useStateStore';
+import { useState } from 'src/composables/useState';
 import { useArrayData } from 'composables/useArrayData';
 
+const state = useState();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
 const { openReport, sendEmail } = usePrintService();
 const quasar = useQuasar();
 const { notify } = useNotify();
-
+const totalRows = ref({});
 const arrayData = useArrayData('SupplierConsumption', {
     url: 'Suppliers/consumption',
     order: ['itemTypeFk', 'itemName', 'itemSize'],
@@ -32,6 +33,7 @@ const arrayData = useArrayData('SupplierConsumption', {
 
 const store = arrayData.store;
 
+onUnmounted(() => state.unset('SupplierConsumption'));
 const dateRanges = computed(() => {
     const { from, to } = arrayData.store?.userParams || {};
     return { from, to };
@@ -46,7 +48,9 @@ async function getSupplierConsumptionData() {
     await arrayData.fetch({ append: false });
 }
 
-const rows = computed(() => store.data || []);
+const rows = computed(() => {
+    return totalEntryPrice(store.data) || [];
+});
 
 const openReportPdf = () => {
     openReport(`Suppliers/${route.params.id}/campaign-metrics-pdf`, reportParams.value);
@@ -93,8 +97,25 @@ const sendCampaignMetricsEmail = ({ address }) => {
     });
 };
 
-const calculateTotal = (buysArray = []) =>
-    buysArray.reduce((accumulator, { total }) => accumulator + total, 0);
+const totalEntryPrice = (rows) => {
+    let totalPrice = 0;
+    let totalQuantity = 0;
+    if (!rows) return totalPrice;
+    for (const row of rows) {
+        let total = 0;
+        let quantity = 0;
+        for (const buy of row.buys) {
+            total = total + buy.total;
+            quantity = quantity + buy.quantity;
+        }
+        row.total = total;
+        row.quantity = quantity;
+        totalPrice = totalPrice + total;
+        totalQuantity = totalQuantity + quantity;
+    }
+    totalRows.value = { totalPrice, totalQuantity };
+    return rows;
+};
 
 onMounted(async () => {
     stateStore.rightDrawer = true;
@@ -128,6 +149,23 @@ onMounted(async () => {
             </QTooltip>
         </QBtn>
     </Teleport>
+    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
+        <div class="row q-gutter-md">
+            <div>
+                {{ t('Total entries') }}:
+                <QChip :dense="$q.screen.lt.sm" text-color="white">
+                    {{ totalRows.totalPrice }} €
+                </QChip>
+            </div>
+            <QSeparator dark vertical />
+            <div>
+                {{ t('Total stems entries') }}:
+                <QChip :dense="$q.screen.lt.sm" text-color="white">
+                    {{ totalRows.totalQuantity }}
+                </QChip>
+            </div>
+        </div>
+    </Teleport>
     <QPage class="column items-center q-pa-md">
         <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
             <QScrollArea class="fit text-grey-8">
@@ -143,20 +181,24 @@ onMounted(async () => {
         >
             <template #body="{ row }">
                 <QTr>
-                    <QTd no-hover class="label">{{
-                        t('supplier.consumption.entry')
-                    }}</QTd>
-                    <QTd no-hover>{{ row.id }}</QTd>
-                    <QTd no-hover class="label">{{ t('supplier.consumption.date') }}</QTd>
-                    <QTd no-hover>{{ toDate(row.shipped) }}</QTd>
-                    <QTd no-hover class="label">{{
-                        t('supplier.consumption.reference')
-                    }}</QTd>
-                    <QTd no-hover>{{ row.invoiceNumber }}</QTd>
+                    <QTd no-hover>
+                        <span class="label">{{ t('supplier.consumption.entry') }}: </span>
+                        <span>{{ row.id }}</span>
+                    </QTd>
+                    <QTd no-hover>
+                        <span class="label">{{ t('supplier.consumption.date') }}: </span>
+                        <span>{{ toDate(row.shipped) }}</span></QTd
+                    >
+                    <QTd colspan="6" no-hover>
+                        <span class="label"
+                            >{{ t('supplier.consumption.reference') }}:
+                        </span>
+                        <span>{{ row.invoiceNumber }}</span>
+                    </QTd>
                 </QTr>
                 <QTr v-for="(buy, index) in row.buys" :key="index">
                     <QTd no-hover>
-                        <QBtn flat color="blue" dense>{{ buy.itemName }}</QBtn>
+                        <QBtn flat color="blue" dense no-caps>{{ buy.itemName }}</QBtn>
                         <ItemDescriptorProxy :id="buy.itemFk" />
                     </QTd>
 
@@ -169,9 +211,13 @@ onMounted(async () => {
                     <QTd colspan="2" no-hover> {{ dashIfEmpty(buy.total) }}</QTd>
                 </QTr>
                 <QTr>
-                    <QTd colspan="6" no-hover>
+                    <QTd colspan="5" no-hover>
                         <span class="label">{{ t('Total entry') }}: </span>
-                        <span>{{ calculateTotal(row.buys) }}</span>
+                        <span>{{ row.total }} €</span>
+                    </QTd>
+                    <QTd no-hover>
+                        <span class="label">{{ t('Total stems') }}: </span>
+                        <span>{{ row.quantity }}</span>
                     </QTd>
                 </QTr>
             </template>
@@ -188,6 +234,9 @@ onMounted(async () => {
 <i18n>
 es:
     Total entry: Total entrada
+    Total entries: Total de las entradas
+    Total stems entries: Total de tallos de las entradas
+    Total stems: Total tallos
     Open as PDF: Abrir como PDF
     Send to email: Enviar por email
     This supplier does not have a contact with an email address: Este proveedor no tiene un email de contacto
diff --git a/src/pages/Supplier/Card/SupplierConsumptionFilter.vue b/src/pages/Supplier/Card/SupplierConsumptionFilter.vue
index 339a9d0d9..781f8347a 100644
--- a/src/pages/Supplier/Card/SupplierConsumptionFilter.vue
+++ b/src/pages/Supplier/Card/SupplierConsumptionFilter.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -78,7 +78,7 @@ const itemCategoriesOptions = ref([]);
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.buyerId')"
                         v-model="params.buyerId"
                         @update:model-value="searchFn()"
@@ -94,7 +94,7 @@ const itemCategoriesOptions = ref([]);
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.typeId')"
                         v-model="params.typeId"
                         @update:model-value="searchFn()"
@@ -116,12 +116,12 @@ const itemCategoriesOptions = ref([]);
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.categoryId')"
                         v-model="params.categoryId"
                         @update:model-value="searchFn()"
diff --git a/src/pages/Supplier/Card/SupplierContacts.vue b/src/pages/Supplier/Card/SupplierContacts.vue
index a78c376a9..92ba1c1fc 100644
--- a/src/pages/Supplier/Card/SupplierContacts.vue
+++ b/src/pages/Supplier/Card/SupplierContacts.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, nextTick } from 'vue';
+import { ref, nextTick } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -19,10 +19,6 @@ const insertRow = () => {
         if (lastInput) lastInput.focus();
     });
 };
-
-onMounted(() => {
-    if (supplierContactRef.value) supplierContactRef.value.reload();
-});
 </script>
 
 <template>
@@ -36,6 +32,7 @@ onMounted(() => {
         ref="supplierContactRef"
         :default-remove="false"
         :data-required="{ supplierFk: route.params.id }"
+        auto-load
     >
         <template #body="{ rows }">
             <QCard class="q-pa-md">
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index e633334c9..8aeebaebd 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -7,7 +7,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 
 const route = useRoute();
@@ -81,7 +81,7 @@ function handleLocation(data, location) {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('supplier.fiscalData.sageTaxTypeFk')"
                         v-model="data.sageTaxTypeFk"
                         :options="sageTaxTypesOptions"
@@ -94,7 +94,7 @@ function handleLocation(data, location) {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('supplier.fiscalData.sageWithholdingFk')"
                         v-model="data.sageWithholdingFk"
                         :options="sageWithholdingsOptions"
@@ -105,7 +105,7 @@ function handleLocation(data, location) {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('supplier.fiscalData.sageTransactionTypeFk')"
                         v-model="data.sageTransactionTypeFk"
                         :options="sageTransactionTypesOptions"
@@ -118,7 +118,7 @@ function handleLocation(data, location) {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('supplier.fiscalData.supplierActivityFk')"
                         v-model="data.supplierActivityFk"
                         :options="supplierActivitiesOptions"
diff --git a/src/pages/Supplier/SupplierListFilter.vue b/src/pages/Supplier/SupplierListFilter.vue
index ff90df6e1..471ca7e53 100644
--- a/src/pages/Supplier/SupplierListFilter.vue
+++ b/src/pages/Supplier/SupplierListFilter.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 
@@ -70,7 +70,7 @@ const countriesOptions = ref([]);
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.provinceFk')"
                         v-model="params.provinceFk"
                         @update:model-value="searchFn()"
@@ -86,7 +86,7 @@ const countriesOptions = ref([]);
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.countryFk')"
                         v-model="params.countryFk"
                         @update:model-value="searchFn()"
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 364ae04a6..af501240b 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -188,7 +188,7 @@ async function changeState(value) {
                     :label="t('ticket.summary.landed')"
                     :value="toDate(ticket.landed)"
                 />
-                <VnLv :label="t('global.packages')" :value="ticket.packages" />
+                <VnLv :label="t('globals.packages')" :value="ticket.packages" />
                 <VnLv :value="ticket.address.phone">
                     <template #label>
                         {{ t('ticket.summary.consigneePhone') }}
diff --git a/src/pages/Ticket/TicketCreate.vue b/src/pages/Ticket/TicketCreate.vue
index 3fb9c0083..16f5a2a40 100644
--- a/src/pages/Ticket/TicketCreate.vue
+++ b/src/pages/Ticket/TicketCreate.vue
@@ -6,7 +6,7 @@ import { useI18n } from 'vue-i18n';
 import FormModel from 'components/FormModel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
@@ -73,7 +73,6 @@ const fetchAddresses = async (formData) => {
 
         const { defaultAddress } = selectedClient.value;
         formData.addressId = defaultAddress.id;
-        console.log();
     } catch (err) {
         console.error(`Error fetching addresses`, err);
         return err.response;
@@ -134,7 +133,7 @@ const redirectToTicketList = (_, { id }) => {
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('ticket.create.client')"
                             v-model="data.clientId"
                             :options="clientOptions"
@@ -155,12 +154,12 @@ const redirectToTicketList = (_, { id }) => {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('ticket.create.address')"
                             v-model="data.addressId"
                             :options="addressesOptions"
@@ -182,7 +181,7 @@ const redirectToTicketList = (_, { id }) => {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
@@ -197,7 +196,7 @@ const redirectToTicketList = (_, { id }) => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('ticket.create.warehouse')"
                             v-model="data.warehouseId"
                             :options="warehousesOptions"
@@ -210,7 +209,7 @@ const redirectToTicketList = (_, { id }) => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('ticket.create.agency')"
                             v-model="data.agencyModeId"
                             :options="agenciesOptions"
diff --git a/src/pages/Travel/Card/TravelBasicData.vue b/src/pages/Travel/Card/TravelBasicData.vue
index 2edaac853..f8c03a609 100644
--- a/src/pages/Travel/Card/TravelBasicData.vue
+++ b/src/pages/Travel/Card/TravelBasicData.vue
@@ -7,7 +7,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 const route = useRoute();
@@ -36,7 +36,7 @@ const agenciesOptions = ref([]);
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('travel.basicData.agency')"
                         v-model="data.agencyModeFk"
                         :options="agenciesOptions"
@@ -63,7 +63,7 @@ const agenciesOptions = ref([]);
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('travel.basicData.warehouseOut')"
                         v-model="data.warehouseOutFk"
                         :options="agenciesOptions"
@@ -74,7 +74,7 @@ const agenciesOptions = ref([]);
                     />
                 </div>
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('travel.basicData.warehouseIn')"
                         v-model="data.warehouseInFk"
                         :options="agenciesOptions"
diff --git a/src/pages/Travel/Card/TravelThermographsForm.vue b/src/pages/Travel/Card/TravelThermographsForm.vue
index 4462846cb..3464a29b3 100644
--- a/src/pages/Travel/Card/TravelThermographsForm.vue
+++ b/src/pages/Travel/Card/TravelThermographsForm.vue
@@ -4,7 +4,7 @@ import { reactive, ref, onBeforeMount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -268,7 +268,7 @@ const onThermographCreated = async (data) => {
                         />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('travel.thermographs.type')"
                             v-model="thermographForm.dmsTypeId"
                             :options="dmsTypesOptions"
@@ -279,7 +279,7 @@ const onThermographCreated = async (data) => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('travel.thermographs.company')"
                             v-model="thermographForm.companyId"
                             :options="companiesOptions"
@@ -288,7 +288,7 @@ const onThermographCreated = async (data) => {
                         />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('travel.thermographs.warehouse')"
                             v-model="thermographForm.warehouseId"
                             :options="warehousesOptions"
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index 0b8975165..7fe628180 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
@@ -113,7 +113,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.agencyModeFk')"
                         v-model="params.agencyModeFk"
                         @update:model-value="searchFn()"
@@ -149,7 +149,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.warehouseOutFk')"
                         v-model="params.warehouseOutFk"
                         @update:model-value="searchFn()"
@@ -165,7 +165,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.warehouseInFk')"
                         v-model="params.warehouseInFk"
                         @update:model-value="searchFn()"
@@ -181,7 +181,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('supplier.pageTitles.supplier')"
                         v-model="params.cargoSupplierFk"
                         @update:model-value="searchFn()"
@@ -197,7 +197,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.continent')"
                         v-model="params.continent"
                         @update:model-value="searchFn()"
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index abee03562..c8c26684c 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -4,7 +4,7 @@ import { reactive, ref, onBeforeMount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -72,7 +72,7 @@ const redirectToTravelBasicData = (_, { id }) => {
                         <VnInput v-model="data.ref" :label="t('globals.reference')" />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('globals.agency')"
                             v-model="data.agencyModeFk"
                             :options="agenciesOptions"
@@ -95,7 +95,7 @@ const redirectToTravelBasicData = (_, { id }) => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('globals.wareHouseOut')"
                             v-model="data.warehouseOutFk"
                             :options="warehousesOptions"
@@ -105,7 +105,7 @@ const redirectToTravelBasicData = (_, { id }) => {
                         />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('globals.wareHouseIn')"
                             v-model="data.warehouseInFk"
                             :options="warehousesOptions"
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index 545bb58ae..43e0db3eb 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -3,7 +3,8 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
@@ -61,7 +62,7 @@ const decrement = (paramsObj, key) => {
         <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('travelFilter.filter.agencyModeFk')"
                         v-model="params.agencyModeFk"
                         @update:model-value="searchFn()"
@@ -77,7 +78,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('travelFilter.filter.warehouseOutFk')"
                         v-model="params.warehouseOutFk"
                         @update:model-value="searchFn()"
@@ -93,7 +94,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('travelFilter.filter.warehouseInFk')"
                         v-model="params.warehouseInFk"
                         @update:model-value="searchFn()"
@@ -157,7 +158,7 @@ const decrement = (paramsObj, key) => {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.continent')"
                         v-model="params.continent"
                         @update:model-value="searchFn()"
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 9f624c224..d06d56f3a 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -13,6 +13,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
 
 const router = useRouter();
 const { t } = useI18n();
@@ -42,18 +43,6 @@ const getWarehouseName = (id) => {
     return warehouses.value.find((warehouse) => warehouse.id === id).name;
 };
 
-const getDateQBadgeColor = (date) => {
-    let today = Date.vnNew();
-    today.setHours(0, 0, 0, 0);
-
-    date = new Date(date);
-    date.setHours(0, 0, 0, 0);
-
-    const timeDifference = today - date;
-    if (timeDifference == 0) return 'warning';
-    if (timeDifference < 0) return 'success';
-};
-
 onMounted(async () => {
     stateStore.rightDrawer = true;
 });
diff --git a/src/pages/Worker/Card/WorkerBasicData.vue b/src/pages/Worker/Card/WorkerBasicData.vue
index 775472065..3295a2234 100644
--- a/src/pages/Worker/Card/WorkerBasicData.vue
+++ b/src/pages/Worker/Card/WorkerBasicData.vue
@@ -7,7 +7,7 @@ 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 VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -27,7 +27,7 @@ const workerFilter = {
         },
         { relation: 'sip', scope: { fields: ['extension', 'secret'] } },
         { relation: 'department', scope: { include: { relation: 'department' } } },
-        { relation: 'client', scope: {fields:['phone']} },
+        { relation: 'client', scope: { fields: ['phone'] } },
     ],
 };
 const workersFilter = {
@@ -87,11 +87,15 @@ const maritalStatus = [
                     :label="t('Mobile extension')"
                     clearable
                 />
-                <VnInput v-model="data.client.phone" :label="t('Personal phone')" clearable />
+                <VnInput
+                    v-model="data.client.phone"
+                    :label="t('Personal phone')"
+                    clearable
+                />
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnSelectFilter
+                <VnSelect
                     :label="t('Boss')"
                     :options="workersOptions"
                     hide-selected
@@ -110,8 +114,8 @@ const maritalStatus = [
                             </QItemSection>
                         </QItem>
                     </template>
-                </VnSelectFilter>
-                <VnSelectFilter
+                </VnSelect>
+                <VnSelect
                     :label="t('Marital status')"
                     :options="maritalStatus"
                     hide-selected
@@ -122,7 +126,7 @@ const maritalStatus = [
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnSelectFilter
+                <VnSelect
                     :label="t('Origin country')"
                     :options="countriesOptions"
                     hide-selected
@@ -130,7 +134,7 @@ const maritalStatus = [
                     option-value="id"
                     v-model="data.originCountryFk"
                 />
-                <VnSelectFilter
+                <VnSelect
                     :label="t('Education level')"
                     :options="educationLevelsOptions"
                     hide-selected
diff --git a/src/pages/Worker/Card/WorkerCalendarFilter.vue b/src/pages/Worker/Card/WorkerCalendarFilter.vue
index 374762ac1..2b81b6eaf 100644
--- a/src/pages/Worker/Card/WorkerCalendarFilter.vue
+++ b/src/pages/Worker/Card/WorkerCalendarFilter.vue
@@ -2,7 +2,7 @@
 import WorkerEventLabel from 'pages/Worker/Card/WorkerEventLabel.vue';
 import FetchData from 'components/FetchData.vue';
 import { useI18n } from 'vue-i18n';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import { useRoute } from 'vue-router';
 import { computed, ref } from 'vue';
 import { toDateFormat } from '../../../filters/date';
@@ -150,7 +150,7 @@ const yearList = ref(generateYears());
     <QList dense class="list q-gutter-y-sm q-my-lg">
         <QItem>
             <QItemSection>
-                <VnSelectFilter
+                <VnSelect
                     :label="t('Year')"
                     v-model="selectedYear"
                     :options="yearList"
@@ -164,7 +164,7 @@ const yearList = ref(generateYears());
         </QItem>
         <QItem>
             <QItemSection>
-                <VnSelectFilter
+                <VnSelect
                     :label="t('Contract')"
                     v-model="selectedBusinessFk"
                     :options="contractList"
@@ -191,7 +191,7 @@ const yearList = ref(generateYears());
                             </QItemSection>
                         </QItem>
                     </template>
-                </VnSelectFilter>
+                </VnSelect>
             </QItemSection>
         </QItem>
     </QList>
diff --git a/src/pages/Worker/Card/WorkerPda.vue b/src/pages/Worker/Card/WorkerPda.vue
index ef8c3fe8e..5e7c89326 100644
--- a/src/pages/Worker/Card/WorkerPda.vue
+++ b/src/pages/Worker/Card/WorkerPda.vue
@@ -4,7 +4,7 @@ import { useRoute } from 'vue-router';
 import { onMounted, ref, computed } from 'vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
 import { useRole } from 'src/composables/useRole';
@@ -107,7 +107,7 @@ onMounted(async () => await fetchCurrentDeviceRef.value.fetch());
                     </template>
                 </QField>
 
-                <VnSelectFilter
+                <VnSelect
                     v-else
                     :label="t('worker.pda.newPDA')"
                     v-model="data.pda"
@@ -128,7 +128,7 @@ onMounted(async () => await fetchCurrentDeviceRef.value.fetch());
                             </QItemSection>
                         </QItem>
                     </template>
-                </VnSelectFilter>
+                </VnSelect>
             </template>
         </FormModel>
     </QPage>
diff --git a/src/pages/Worker/Card/WorkerTimeForm.vue b/src/pages/Worker/Card/WorkerTimeForm.vue
index d6c893ad1..0a58a04ca 100644
--- a/src/pages/Worker/Card/WorkerTimeForm.vue
+++ b/src/pages/Worker/Card/WorkerTimeForm.vue
@@ -3,7 +3,7 @@ import { reactive, ref, computed, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
 
@@ -84,7 +84,7 @@ onBeforeMount(() => {
                 :required="true"
                 :is-clearable="false"
             />
-            <VnSelectFilter
+            <VnSelect
                 :label="t('Type')"
                 v-model="data.direction"
                 :options="entryDirections"
diff --git a/src/pages/Worker/WorkerCreate.vue b/src/pages/Worker/WorkerCreate.vue
index eef29a8a4..6c2c9f36e 100644
--- a/src/pages/Worker/WorkerCreate.vue
+++ b/src/pages/Worker/WorkerCreate.vue
@@ -6,7 +6,7 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
@@ -194,7 +194,7 @@ onMounted(async () => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('worker.create.company')"
                             v-model="data.companyFk"
                             :options="companiesOptions"
@@ -205,7 +205,7 @@ onMounted(async () => {
                         />
                     </div>
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('worker.create.boss')"
                             v-model="data.bossFk"
                             :options="workersOptions"
@@ -225,12 +225,12 @@ onMounted(async () => {
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectFilter
+                        <VnSelect
                             :label="t('worker.create.payMethods')"
                             v-model="data.payMethodFk"
                             :options="payMethodsOptions"
diff --git a/src/pages/Zone/Card/ZoneDescriptor.vue b/src/pages/Zone/Card/ZoneDescriptor.vue
index 665cb6f0e..486e4f063 100644
--- a/src/pages/Zone/Card/ZoneDescriptor.vue
+++ b/src/pages/Zone/Card/ZoneDescriptor.vue
@@ -8,7 +8,6 @@ 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: {
@@ -22,28 +21,11 @@ const route = useRoute();
 const { t } = useI18n();
 
 const filter = {
-    fields: [
-        'id',
-        'ref',
-        'shipped',
-        'landed',
-        'totalEntries',
-        'warehouseInFk',
-        'warehouseOutFk',
-        'cargoSupplierFk',
-        'agencyModeFk',
-    ],
     include: [
         {
-            relation: 'warehouseIn',
+            relation: 'agencyMode',
             scope: {
-                fields: ['name'],
-            },
-        },
-        {
-            relation: 'warehouseOut',
-            scope: {
-                fields: ['name'],
+                fields: ['name', 'id'],
             },
         },
     ],
@@ -58,6 +40,13 @@ 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>
@@ -68,7 +57,7 @@ const setData = (entity) => {
         :subtitle="data.subtitle"
         :filter="filter"
         @on-fetch="setData"
-        data-key="travelData"
+        data-key="zoneData"
     >
         <template #header-extra-action>
             <QBtn
@@ -76,52 +65,39 @@ const setData = (entity) => {
                 flat
                 dense
                 size="md"
-                icon="local_airport"
+                icon="preview"
                 color="white"
                 class="link"
                 :to="{ name: 'ZoneList' }"
             >
                 <QTooltip>
-                    {{ t('Go to module index') }}
+                    {{ t('Summary') }}
                 </QTooltip>
             </QBtn>
         </template>
-        <template #menu="{ entity }">
-            <ZoneDescriptorMenuItems :travel="entity" />
-        </template>
+        <!-- <template #menu="{ entity }">
+            <ZoneDescriptorMenuItems :zone="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>
+            {{ console.log('entity', entity) }}
+            <VnLv :label="t('Agency')" :value="entity.agencyMode.name" />
+            <VnLv :label="t('Closing hour')" :value="extractHour(entity.hour)" />
+            <VnLv :label="t('zoneing days')" :value="entity.zoneingDays" />
+            <VnLv :label="t('Price')" :value="entity.price" />
+            <VnLv :label="t('Bonus')" :value="entity.bonus" />
         </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
+    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/Card/ZoneDescriptorMenuItems.vue b/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
index 920d83dfe..b6c7f28b3 100644
--- a/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
+++ b/src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
@@ -1,108 +1,93 @@
 <script setup>
-import { computed } from 'vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+const { dialog, notify } = useQuasar();
 
 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: {
+    zone: {
         type: Object,
         default: () => {},
     },
 });
 
 const { t } = useI18n();
-const router = useRouter();
-const quasar = useQuasar();
-const { notify } = useNotify();
-const role = useRole();
+const { push, currentRoute } = useRouter();
+const zoneId = currentRoute.value.params.id;
 
-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');
-    }
+const actions = {
+    clone: async () => {
+        const opts = { message: t('Zone cloned'), type: 'positive' };
+        let clonedZoneId;
+
+        try {
+            const { data } = await axios.post(`Zones/${zoneId}/clone`, {
+                shipped: $props.zone.value.shipped,
+            });
+            clonedZoneId = data;
+        } catch (e) {
+            opts.message = t('It was not able to clone the zone');
+            opts.type = 'negative';
+        } finally {
+            notify(opts);
+
+            if (clonedZoneId) push({ name: 'ZoneSummary', params: { id: clonedZoneId } });
+        }
+    },
+    remove: async () => {
+        try {
+            await axios.post(`Zones/${zoneId}/setDeleted`);
+
+            notify({ message: t('Zone deleted'), type: 'positive' });
+            notify({
+                message: t('You can undo this action within the first hour'),
+                icon: 'info',
+            });
+
+            push({ name: 'ZoneList' });
+        } catch (e) {
+            notify({ message: e.message, type: 'negative' });
+        }
+    },
 };
+function openConfirmDialog(callback) {
+    dialog({
+        component: VnConfirm,
+        componentProps: {
+            promise: actions[callback],
+        },
+    });
+}
 </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') }}
+    <QItem @click="openConfirmDialog('clone')" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="content_copy" />
         </QItemSection>
+        <QItemSection>{{ t('To clone zone') }}</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>
+    <QItem @click="openConfirmDialog('remove')" v-ripple clickable>
+        <QItemSection avatar>
+            <QIcon name="delete" />
         </QItemSection>
+        <QItemSection>{{ t('deleteOrder') }}</QItemSection>
     </QItem>
 </template>
 
 <i18n>
+en:
+    deleteOrder: Delete order
+    confirmDeletion: Confirm deletion
+    confirmDeletionMessage: Are you sure you want to delete this order?
+
 es:
-    The travel will be deleted: El envío será eliminado
-    Do you want to delete this travel?: ¿Quieres eliminar este envío?
+    To clone zone: Clonar zone
+    deleteOrder: Eliminar pedido
+    confirmDeletion: Confirmar eliminación
+    confirmDeletionMessage: Seguro que quieres eliminar este pedido?
+
 </i18n>
diff --git a/src/router/index.js b/src/router/index.js
index 3e442f0e6..7a0aedcae 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,6 +12,7 @@ import { useSession } from 'src/composables/useSession';
 import { useRole } from 'src/composables/useRole';
 import { useUserConfig } from 'src/composables/useUserConfig';
 import { toLowerCamel } from 'src/filters';
+import { useTokenConfig } from 'src/composables/useTokenConfig';
 
 const state = useState();
 const session = useSession();
@@ -55,6 +56,7 @@ export default route(function (/* { store, ssrContext } */) {
             if (stateRoles.length === 0) {
                 await useRole().fetch();
                 await useUserConfig().fetch();
+                await useTokenConfig().fetch();
             }
             const matches = to.matched;
             const hasRequiredRoles = matches.every((route) => {
diff --git a/src/router/modules/agency.js b/src/router/modules/agency.js
new file mode 100644
index 000000000..6f281e21d
--- /dev/null
+++ b/src/router/modules/agency.js
@@ -0,0 +1,88 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/agency',
+    name: 'Agency',
+    meta: {
+        title: 'agency',
+        icon: 'garage_home',
+        moduleName: 'Agency',
+    },
+    component: RouterView,
+    redirect: { name: 'AgencyCard' },
+    menus: {
+        main: [],
+        card: ['AgencyBasicData', 'AgencyModes', 'AgencyWorkCenters', 'AgencyLog'],
+    },
+    children: [
+        {
+            path: '/agency/:id',
+            name: 'AgencyCard',
+            component: () => import('src/pages/Agency/Card/AgencyCard.vue'),
+            redirect: { name: 'AgencySummary' },
+            children: [
+                {
+                    name: 'AgencySummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Agency/Card/AgencySummary.vue'),
+                },
+                {
+                    name: 'AgencyBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('pages/Agency/Card/AgencyBasicData.vue'),
+                },
+                {
+                    path: 'workCenter',
+                    name: 'AgencyWorkCenterCard',
+                    redirect: { name: 'AgencyWorkCenters' },
+                    children: [
+                        {
+                            path: '',
+                            name: 'AgencyWorkCenters',
+                            meta: {
+                                icon: 'apartment',
+                                title: 'workCenters',
+                            },
+                            component: () =>
+                                import('src/pages/Agency/Card/AgencyWorkcenter.vue'),
+                        },
+                    ],
+                },
+                {
+                    path: 'modes',
+                    name: 'AgencyModesCard',
+                    redirect: { name: 'AgencyModes' },
+                    children: [
+                        {
+                            path: '',
+                            name: 'AgencyModes',
+                            meta: {
+                                icon: 'format_list_bulleted',
+                                title: 'modes',
+                            },
+                            component: () =>
+                                import('src/pages/Agency/Card/AgencyModes.vue'),
+                        },
+                    ],
+                },
+                {
+                    name: 'AgencyLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Agency/Card/AgencyLog.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/modules/department.js b/src/router/modules/department.js
index aaffc3460..dfd5e64ba 100644
--- a/src/router/modules/department.js
+++ b/src/router/modules/department.js
@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'department',
         icon: 'vn:greuge',
+        moduleName: 'Department',
     },
     component: RouterView,
     redirect: { name: 'DepartmentCard' },
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 2fe40038f..7fff2f2e5 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -15,6 +15,8 @@ import Department from './department';
 import Entry from './entry';
 import roadmap from './roadmap';
 import Parking from './parking';
+import Agency from './agency';
+import ItemType from './itemType';
 import Zone from './zone';
 
 export default [
@@ -35,5 +37,7 @@ export default [
     Entry,
     roadmap,
     Parking,
+    Agency,
+    ItemType,
     Zone,
 ];
diff --git a/src/router/modules/item.js b/src/router/modules/item.js
index 2a8e87194..f0c68f0e7 100644
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@@ -6,12 +6,28 @@ export default {
     meta: {
         title: 'items',
         icon: 'vn:item',
+        moduleName: 'Item',
     },
     component: RouterView,
     redirect: { name: 'ItemMain' },
     menus: {
-        main: ['ItemList', 'WasteBreakdown', 'ItemFixedPrice'],
-        card: ['ItemBasicData'],
+        main: [
+            'ItemList',
+            'WasteBreakdown',
+            'ItemFixedPrice',
+            'ItemRequest',
+            'ItemTypeList',
+        ],
+        card: [
+            'ItemBasicData',
+            'ItemLog',
+            'ItemDiary',
+            'ItemTags',
+            'ItemTax',
+            'ItemBotanical',
+            'ItemBarcode',
+            'ItemLastEntries',
+        ],
     },
     children: [
         {
@@ -59,6 +75,32 @@ export default {
                             'https://grafana.verdnatura.es/d/TTNXQAxVk';
                     },
                 },
+                {
+                    path: 'item-type-list',
+                    name: 'ItemTypeList',
+                    meta: {
+                        title: 'family',
+                        icon: 'contact_support',
+                    },
+                    component: () => import('src/pages/Item/ItemTypeList.vue'),
+                },
+                {
+                    path: 'item-type-list/create',
+                    name: 'ItemTypeCreate',
+                    meta: {
+                        title: 'itemTypeCreate',
+                    },
+                    component: () => import('src/pages/Item/ItemTypeCreate.vue'),
+                },
+                {
+                    path: 'request',
+                    name: 'ItemRequest',
+                    meta: {
+                        title: 'buyRequest',
+                        icon: 'vn:buyrequest',
+                    },
+                    component: () => import('src/pages/Item/ItemRequest.vue'),
+                },
             ],
         },
         {
@@ -76,6 +118,60 @@ export default {
                     },
                     component: () => import('src/pages/Item/Card/ItemSummary.vue'),
                 },
+                {
+                    path: 'basic-data',
+                    name: 'ItemBasicData',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBasicData.vue'),
+                },
+                {
+                    path: 'tags',
+                    name: 'ItemTags',
+                    meta: {
+                        title: 'tags',
+                        icon: 'vn:tags',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemTags.vue'),
+                },
+                {
+                    path: 'last-entries',
+                    name: 'ItemLastEntries',
+                    meta: {
+                        title: 'lastEntries',
+                        icon: 'vn:regentry',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemLastEntries.vue'),
+                },
+                {
+                    path: 'tax',
+                    name: 'ItemTax',
+                    meta: {
+                        title: 'tax',
+                        icon: 'vn:tax',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemTax.vue'),
+                },
+                {
+                    path: 'botanical',
+                    name: 'ItemBotanical',
+                    meta: {
+                        title: 'botanical',
+                        icon: 'local_florist',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBotanical.vue'),
+                },
+                {
+                    path: 'barcode',
+                    name: 'ItemBarcode',
+                    meta: {
+                        title: 'barcode',
+                        icon: 'vn:barcode',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBarcode.vue'),
+                },
                 {
                     path: 'diary',
                     name: 'ItemDiary',
@@ -86,22 +182,13 @@ export default {
                     component: () => import('src/pages/Item/Card/ItemDiary.vue'),
                 },
                 {
-                    path: 'tags',
-                    name: 'ItemTags',
+                    path: 'log',
+                    name: 'ItemLog',
                     meta: {
-                        title: 'Tags',
-                        icon: 'vn:tags',
+                        title: 'log',
+                        icon: 'vn:History',
                     },
-                    component: () => import('src/pages/Item/Card/ItemTags.vue'),
-                },
-                {
-                    path: 'basic-data',
-                    name: 'ItemBasicData',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemBasicData.vue'),
+                    component: () => import('src/pages/Item/Card/ItemLog.vue'),
                 },
             ],
         },
diff --git a/src/router/modules/itemType.js b/src/router/modules/itemType.js
new file mode 100644
index 000000000..8064c41ff
--- /dev/null
+++ b/src/router/modules/itemType.js
@@ -0,0 +1,46 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/item/item-type',
+    name: 'ItemType',
+    meta: {
+        title: 'itemType',
+        icon: 'contact_support',
+        moduleName: 'ItemType',
+    },
+    component: RouterView,
+    redirect: { name: 'ItemTypeList' },
+    menus: {
+        main: [],
+        card: ['ItemTypeBasicData'],
+    },
+    children: [
+        {
+            name: 'ItemTypeCard',
+            path: ':id',
+            component: () => import('src/pages/ItemType/Card/ItemTypeCard.vue'),
+            redirect: { name: 'ItemTypeSummary' },
+            children: [
+                {
+                    name: 'ItemTypeSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                    },
+                    component: () =>
+                        import('src/pages/ItemType/Card/ItemTypeSummary.vue'),
+                },
+                {
+                    name: 'ItemTypeBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () =>
+                        import('src/pages/ItemType/Card/ItemTypeBasicData.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/modules/roadmap.js b/src/router/modules/roadmap.js
index 02edf94be..6b2aa6a13 100644
--- a/src/router/modules/roadmap.js
+++ b/src/router/modules/roadmap.js
@@ -6,6 +6,7 @@ export default {
     meta: {
         title: 'roadmap',
         icon: 'vn:troncales',
+        moduleName: 'Roadmap',
     },
     component: RouterView,
     redirect: { name: 'RouteMain' },
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index f8ededf55..8e08d7222 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'RouteMain' },
     menus: {
-        main: ['RouteList', 'RouteAutonomous', 'RouteRoadmap', 'CmrList'],
+        main: ['RouteList', 'RouteAutonomous', 'RouteRoadmap', 'CmrList', 'AgencyList'],
         card: ['RouteBasicData', 'RouteTickets', 'RouteLog'],
     },
     children: [
@@ -75,6 +75,21 @@ export default {
                     },
                     component: () => import('src/pages/Route/Cmr/CmrList.vue'),
                 },
+                {
+                    path: '/agency',
+                    redirect: { name: 'AgencyList' },
+                    children: [
+                        {
+                            path: 'list',
+                            name: 'AgencyList',
+                            meta: {
+                                title: 'agencyList',
+                                icon: 'view_list',
+                            },
+                            component: () => import('src/pages/Agency/AgencyList.vue'),
+                        },
+                    ],
+                },
             ],
         },
         {
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index be11ced11..079dfaa84 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -11,128 +11,149 @@ 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' },
+            name: 'ZoneCard',
+            path: ':id',
+            component: () => import('src/pages/Zone/Card/ZoneCard.vue'),
+            redirect: { name: 'ZoneSummary' },
             children: [
                 {
-                    path: 'list',
-                    name: 'ZoneList',
+                    name: 'ZoneSummary',
+                    path: 'summary',
                     meta: {
-                        title: 'zonesList',
-                        icon: 'vn:zone',
+                        title: 'summary',
+                        icon: 'launch',
                     },
-                    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'),
+                    component: () => import('src/pages/Zone/Card/ZoneSummary.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 14bf6665f..04780ee17 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -10,11 +10,13 @@ import supplier from './modules/Supplier';
 import route from './modules/route';
 import travel from './modules/travel';
 import department from './modules/department';
+import ItemType from './modules/itemType';
 import shelving from 'src/router/modules/shelving';
 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 agency from 'src/router/modules/agency';
 import zone from 'src/router/modules/zone';
 
 const routes = [
@@ -72,6 +74,8 @@ const routes = [
             roadmap,
             entry,
             parking,
+            agency,
+            ItemType,
             zone,
             {
                 path: '/:catchAll(.*)*',
diff --git a/test/cypress/integration/agency/agencyWorkCenter.spec.js b/test/cypress/integration/agency/agencyWorkCenter.spec.js
new file mode 100644
index 000000000..ff3c53214
--- /dev/null
+++ b/test/cypress/integration/agency/agencyWorkCenter.spec.js
@@ -0,0 +1,50 @@
+describe('AgencyWorkCenter', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/agency`);
+    });
+
+    it('assign workCenter', () => {
+        cy.visit(`/#/agency`);
+        cy.get(':nth-child(1) > :nth-child(1) > .card-list-body > .list-items').click();
+        cy.get('[href="#/agency/11/workCenter"] > .q-item__section--main').click();
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get(
+            '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
+        ).type('workCenterOne{enter}');
+        cy.get('.q-btn--standard > .q-btn__content > .block').click();
+        cy.get('.q-notification__message').should('have.text', 'Data created');
+    });
+
+    it('delete workCenter', () => {
+        cy.get(':nth-child(1) > :nth-child(1) > .card-list-body > .list-items').click();
+        cy.get('[href="#/agency/11/workCenter"] > .q-item__section--main').click();
+        cy.get('.q-item__section--side > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'WorkCenter removed successfully'
+        );
+    });
+
+    it('error on duplicate workCenter', () => {
+        cy.visit(`/#/agency`);
+        cy.get(':nth-child(1) > :nth-child(1) > .card-list-body > .list-items').click();
+        cy.get('[href="#/agency/11/workCenter"] > .q-item__section--main').click();
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get(
+            '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
+        ).type('workCenterOne{enter}');
+        cy.get('.q-btn--standard > .q-btn__content > .block').click();
+        cy.get('.q-notification__message').should('have.text', 'Data created');
+        cy.get('.q-page-sticky > div > .q-btn > .q-btn__content > .q-icon').click();
+        cy.get(
+            '.vn-row > .q-field > .q-field__inner > .q-field__control > .q-field__control-container'
+        ).type('workCenterOne{enter}');
+        cy.get('.q-btn--standard > .q-btn__content > .block').click();
+
+        cy.get(
+            ':nth-child(2) > .q-notification__wrapper > .q-notification__content > .q-notification__message'
+        ).should('have.text', 'This workCenter is already assigned to this agency');
+    });
+});
diff --git a/test/vitest/__tests__/composables/useSession.spec.js b/test/vitest/__tests__/composables/useSession.spec.js
index f9f3dcb80..2292859a9 100644
--- a/test/vitest/__tests__/composables/useSession.spec.js
+++ b/test/vitest/__tests__/composables/useSession.spec.js
@@ -1,5 +1,5 @@
-import { vi, describe, expect, it } from 'vitest';
-import { axios } from 'app/test/vitest/helper';
+import { vi, describe, expect, it, beforeAll, beforeEach } from 'vitest';
+import { axios, flushPromises } from 'app/test/vitest/helper';
 import { useSession } from 'composables/useSession';
 import { useState } from 'composables/useState';
 
@@ -63,73 +63,148 @@ describe('session', () => {
         });
     });
 
-    describe('login', () => {
-        const expectedUser = {
-            id: 999,
-            name: `T'Challa`,
-            nickname: 'Black Panther',
-            lang: 'en',
-            userConfig: {
-                darkMode: false,
-            },
-        };
-        const rolesData = [
-            {
-                role: {
-                    name: 'salesPerson',
+    describe(
+        'login',
+        () => {
+            const expectedUser = {
+                id: 999,
+                name: `T'Challa`,
+                nickname: 'Black Panther',
+                lang: 'en',
+                userConfig: {
+                    darkMode: false,
                 },
-            },
-            {
-                role: {
-                    name: 'admin',
+            };
+            const rolesData = [
+                {
+                    role: {
+                        name: 'salesPerson',
+                    },
                 },
-            },
-        ];
+                {
+                    role: {
+                        name: 'admin',
+                    },
+                },
+            ];
 
-        it('should fetch the user roles and then set token in the sessionStorage', async () => {
-            const expectedRoles = ['salesPerson', 'admin'];
-            vi.spyOn(axios, 'get').mockResolvedValue({
-                data: { roles: rolesData, user: expectedUser },
+            it('should fetch the user roles and then set token in the sessionStorage', async () => {
+                const expectedRoles = ['salesPerson', 'admin'];
+                vi.spyOn(axios, 'get').mockResolvedValue({
+                    data: { roles: rolesData, user: expectedUser },
+                });
+
+                const expectedToken = 'mySessionToken';
+                const expectedTokenMultimedia = 'mySessionTokenMultimedia';
+                const keepLogin = false;
+
+                await session.login({
+                    token: expectedToken,
+                    tokenMultimedia: expectedTokenMultimedia,
+                    keepLogin,
+                });
+
+                const roles = state.getRoles();
+                const localToken = localStorage.getItem('token');
+                const sessionToken = sessionStorage.getItem('token');
+
+                expect(roles.value).toEqual(expectedRoles);
+                expect(localToken).toBeNull();
+                expect(sessionToken).toEqual(expectedToken);
+
+                await session.destroy(); // this clears token and user for any other test
             });
 
-            const expectedToken = 'mySessionToken';
-            const expectedTokenMultimedia = 'mySessionTokenMultimedia';
-            const keepLogin = false;
+            it('should fetch the user roles and then set token in the localStorage', async () => {
+                const expectedRoles = ['salesPerson', 'admin'];
+                vi.spyOn(axios, 'get').mockResolvedValue({
+                    data: { roles: rolesData, user: expectedUser },
+                });
 
-            await session.login(expectedToken,expectedTokenMultimedia, keepLogin);
+                const expectedToken = 'myLocalToken';
+                const expectedTokenMultimedia = 'myLocalTokenMultimedia';
+                const keepLogin = true;
 
-            const roles = state.getRoles();
-            const localToken = localStorage.getItem('token');
-            const sessionToken = sessionStorage.getItem('token');
+                await session.login({
+                    token: expectedToken,
+                    tokenMultimedia: expectedTokenMultimedia,
+                    keepLogin,
+                });
 
-            expect(roles.value).toEqual(expectedRoles);
-            expect(localToken).toBeNull();
-            expect(sessionToken).toEqual(expectedToken);
+                const roles = state.getRoles();
+                const localToken = localStorage.getItem('token');
+                const sessionToken = sessionStorage.getItem('token');
 
-           await session.destroy(); // this clears token and user for any other test
+                expect(roles.value).toEqual(expectedRoles);
+                expect(localToken).toEqual(expectedToken);
+                expect(sessionToken).toBeNull();
+
+                await session.destroy(); // this clears token and user for any other test
+            });
+        },
+        {}
+    );
+
+    describe('RenewToken', () => {
+        const expectedToken = 'myToken';
+        const expectedTokenMultimedia = 'myTokenMultimedia';
+        const currentDate = new Date();
+        beforeAll(() => {
+            const tokenConfig = {
+                id: 1,
+                renewPeriod: 21600,
+                courtesyTime: 60,
+                renewInterval: 300,
+            };
+            state.setTokenConfig(tokenConfig);
+            sessionStorage.setItem('renewPeriod', 1);
         });
+        it('NOT Should renewToken', async () => {
+            const data = {
+                token: expectedToken,
+                tokenMultimedia: expectedTokenMultimedia,
+                keepLogin: false,
+                ttl: 1,
+                created: Date.now(),
+            };
+            session.setSession(data);
+            expect(sessionStorage.getItem('keepLogin')).toBeFalsy();
+            expect(sessionStorage.getItem('created')).toBeDefined();
+            expect(sessionStorage.getItem('ttl')).toEqual(1);
+            await session.checkValidity();
+            expect(sessionStorage.getItem('token')).toEqual(expectedToken);
+            expect(sessionStorage.getItem('tokenMultimedia')).toEqual(
+                expectedTokenMultimedia
+            );
+        });
+        it('Should renewToken', async () => {
+            currentDate.setMinutes(currentDate.getMinutes() - 100);
+            const data = {
+                token: expectedToken,
+                tokenMultimedia: expectedTokenMultimedia,
+                keepLogin: false,
+                ttl: 1,
+                created: currentDate,
+            };
+            session.setSession(data);
 
-        it('should fetch the user roles and then set token in the localStorage', async () => {
-            const expectedRoles = ['salesPerson', 'admin'];
-            vi.spyOn(axios, 'get').mockResolvedValue({
-                data: { roles: rolesData, user: expectedUser },
-            });
-
-            const expectedToken = 'myLocalToken';
-            const expectedTokenMultimedia = 'myLocalTokenMultimedia';
-            const keepLogin = true;
-
-            await session.login(expectedToken, expectedTokenMultimedia, keepLogin);
-
-            const roles = state.getRoles();
-            const localToken = localStorage.getItem('token');
-            const sessionToken = sessionStorage.getItem('token');
-
-            expect(roles.value).toEqual(expectedRoles);
-            expect(localToken).toEqual(expectedToken);
-            expect(sessionToken).toBeNull();
-
-            await session.destroy(); // this clears token and user for any other test
+            vi.spyOn(axios, 'post')
+                .mockResolvedValueOnce({
+                    data: { id: '' },
+                })
+                .mockResolvedValueOnce({
+                    data: {
+                        id: '',
+                    },
+                });
+            expect(sessionStorage.getItem('keepLogin')).toBeFalsy();
+            expect(sessionStorage.getItem('created')).toBeDefined();
+            expect(sessionStorage.getItem('ttl')).toEqual(1);
+            await session.checkValidity();
+            expect(sessionStorage.getItem('token')).not.toEqual(expectedToken);
+            expect(sessionStorage.getItem('tokenMultimedia')).not.toEqual(
+                expectedTokenMultimedia
+            );
         });
     });
 });
diff --git a/test/vitest/__tests__/composables/useTokenConfig.spec.js b/test/vitest/__tests__/composables/useTokenConfig.spec.js
new file mode 100644
index 000000000..a25a4abb1
--- /dev/null
+++ b/test/vitest/__tests__/composables/useTokenConfig.spec.js
@@ -0,0 +1,31 @@
+import { vi, describe, expect, it } from 'vitest';
+import { axios, flushPromises } from 'app/test/vitest/helper';
+import { useTokenConfig } from 'composables/useTokenConfig';
+const tokenConfig = useTokenConfig();
+
+describe('useTokenConfig', () => {
+    describe('fetch', () => {
+        it('should call setTokenConfig of the state with the expected data', async () => {
+            const data = {
+                id: 1,
+                renewPeriod: 21600,
+                courtesyTime: 60,
+                renewInterval: 300,
+            };
+            vi.spyOn(axios, 'get').mockResolvedValueOnce({
+                data,
+            });
+
+            vi.spyOn(tokenConfig.state, 'setTokenConfig');
+
+            tokenConfig.fetch();
+
+            await flushPromises();
+
+            expect(tokenConfig.state.setTokenConfig).toHaveBeenCalledWith(data);
+
+            const renewPeriod = sessionStorage.getItem('renewPeriod');
+            expect(renewPeriod).toEqual(data.renewPeriod);
+        });
+    });
+});
diff --git a/test/vitest/__tests__/pages/Claims/ClaimLinesImport.spec.js b/test/vitest/__tests__/pages/Claims/ClaimLinesImport.spec.js
index 085118b14..d93c96132 100644
--- a/test/vitest/__tests__/pages/Claims/ClaimLinesImport.spec.js
+++ b/test/vitest/__tests__/pages/Claims/ClaimLinesImport.spec.js
@@ -5,7 +5,6 @@ import ClaimLinesImport from 'pages/Claim/Card/ClaimLinesImport.vue';
 describe('ClaimLinesImport', () => {
     let vm;
 
-
     beforeAll(() => {
         vm = createWrapper(ClaimLinesImport, {
             global: {
@@ -13,7 +12,7 @@ describe('ClaimLinesImport', () => {
                 mocks: {
                     fetch: vi.fn(),
                 },
-            }
+            },
         }).vm;
     });
 
@@ -26,25 +25,23 @@ describe('ClaimLinesImport', () => {
             vi.spyOn(axios, 'post').mockResolvedValue({ data: true });
             vi.spyOn(vm.quasar, 'notify');
 
-            vm.selected = [
-                { id: 1, saleFk: 1, claimFk: 1, quantity: 10 }
-            ]
+            vm.selected = [{ id: 1, saleFk: 1, claimFk: 1 }];
 
-            vm.route.params.id = 1
+            vm.route.params.id = 1;
 
             await vm.importLines();
-            const expectedData = [{ saleFk: 1, claimFk: 1, quantity: 10 }]
+            const expectedData = [{ saleFk: 1, claimFk: 1 }];
 
             expect(axios.post).toHaveBeenCalledWith('ClaimBeginnings', expectedData, {
-                signal: expect.any(Object)
-            })
+                signal: expect.any(Object),
+            });
             expect(vm.quasar.notify).toHaveBeenCalledWith(
                 expect.objectContaining({
                     message: 'Lines added to claim',
-                    type: 'positive'
+                    type: 'positive',
                 })
             );
-            expect(vm.canceller).toEqual(null)
+            expect(vm.canceller).toEqual(null);
         });
     });
 });
diff --git a/test/vitest/setup-file.js b/test/vitest/setup-file.js
index 499204981..288f80beb 100644
--- a/test/vitest/setup-file.js
+++ b/test/vitest/setup-file.js
@@ -1 +1 @@
-// This file will be run before each test file
+// This file will be run before each test file, don't delete or vitest will not work.