Merge branch 'dev' into 6321_negative_tickets

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';
@@ -71,7 +71,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"

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

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

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

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

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

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

src/components/EditTableCellValueForm.vue

@@ -1,9 +1,12 @@
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, markRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import 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';
+import { QCheckbox } from 'quasar';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -28,11 +31,16 @@ const $props = defineProps({
 const { t } = useI18n();
 const { notify } = useNotify();
 
-const formData = reactive({
-    field: null,
-    newValue: null,
-});
+const inputs = {
+    input: markRaw(VnInput),
+    number: markRaw(VnInput),
+    date: markRaw(VnInputDate),
+    checkbox: markRaw(QCheckbox),
+    select: markRaw(VnSelect),
+};
 
+const newValue = ref(null);
+const selectedField = ref(null);
 const closeButton = ref(null);
 const isLoading = ref(false);
 
@@ -47,8 +55,8 @@ const submitData = async () => {
         isLoading.value = true;
         const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
         const payload = {
-            field: formData.field,
-            newValue: formData.newValue,
+            field: selectedField.value.field,
+            newValue: newValue.value,
             lines: rowsToEdit,
         };
 
@@ -75,19 +83,20 @@ const closeForm = () => {
             <span class="countLines">{{ ` ${rows.length} ` }}</span>
             <span class="title">{{ t('buy(s)') }}</span>
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Field to edit')"
-                        :options="fieldsOptions"
-                        hide-selected
-                        option-label="label"
-                        option-value="field"
-                        v-model="formData.field"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Value')" v-model="formData.newValue" />
-                </div>
+                <VnSelect
+                    :label="t('Field to edit')"
+                    :options="fieldsOptions"
+                    hide-selected
+                    option-label="label"
+                    v-model="selectedField"
+                />
+                <component
+                    :is="inputs[selectedField?.component || 'input']"
+                    v-bind="selectedField?.attrs || {}"
+                    v-model="newValue"
+                    :label="t('Value')"
+                    style="width: 200px"
+                />
             </VnRow>
             <div class="q-mt-lg row justify-end">
                 <QBtn

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

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

src/components/FormModel.vue

@@ -102,7 +102,7 @@ onMounted(async () => {
 });
 
 onBeforeRouteLeave((to, from, next) => {
-    if (hasChanges.value)
+    if (hasChanges.value && $props.observeFormChanges)
         quasar.dialog({
             component: VnConfirm,
             componentProps: {

src/components/FormModelPopup.vue

@@ -45,25 +45,25 @@ defineExpose({
             <p>{{ subtitle }}</p>
             <slot name="form-inputs" :data="data" :validate="validate" />
             <div class="q-mt-lg row justify-end">
-                <QBtn
-                    :label="t('globals.save')"
-                    :title="t('globals.save')"
-                    type="submit"
-                    color="primary"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                />
                 <QBtn
                     :label="t('globals.cancel')"
                     :title="t('globals.cancel')"
                     type="reset"
                     color="primary"
                     flat
-                    class="q-ml-sm"
                     :disabled="isLoading"
                     :loading="isLoading"
                     v-close-popup
                 />
+                <QBtn
+                    :label="t('globals.save')"
+                    :title="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
             </div>
         </template>
     </FormModel>

src/components/FormPopup.vue

@@ -33,14 +33,6 @@ const closeForm = () => {
             <p>{{ subtitle }}</p>
             <slot name="form-inputs" />
             <div class="q-mt-lg row justify-end">
-                <QBtn
-                    v-if="defaultSubmitButton"
-                    :label="customSubmitButtonLabel || t('globals.save')"
-                    type="submit"
-                    color="primary"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                />
                 <QBtn
                     v-if="defaultCancelButton"
                     :label="t('globals.cancel')"
@@ -51,6 +43,14 @@ const closeForm = () => {
                     :loading="isLoading"
                     v-close-popup
                 />
+                <QBtn
+                    v-if="defaultSubmitButton"
+                    :label="customSubmitButtonLabel || t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
                 <slot name="customButtons" />
             </div>
         </QCard>

src/components/ItemsFilterPanel.vue

@@ -0,0 +1,359 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnInput from 'components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+
+import axios from 'axios';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    customTags: {
+        type: Array,
+        default: () => [],
+    },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
+});
+
+const itemCategories = ref([]);
+const selectedCategoryFk = ref(null);
+const selectedTypeFk = ref(null);
+const itemTypesOptions = ref([]);
+const suppliersOptions = ref([]);
+const tagOptions = ref([]);
+const tagValues = ref([]);
+
+const categoryList = computed(() => {
+    return (itemCategories.value || [])
+        .filter((category) => category.display)
+        .map((category) => ({
+            ...category,
+            icon: `vn:${(category.icon || '').split('-')[1]}`,
+        }));
+});
+
+const selectedCategory = computed(() =>
+    (itemCategories.value || []).find(
+        (category) => category?.id === selectedCategoryFk.value
+    )
+);
+
+const selectedType = computed(() => {
+    return (itemTypesOptions.value || []).find(
+        (type) => type?.id === selectedTypeFk.value
+    );
+});
+
+const selectCategory = async (params, categoryId, search) => {
+    if (params.categoryFk === categoryId) {
+        resetCategory(params);
+        search();
+        return;
+    }
+    selectedCategoryFk.value = categoryId;
+    params.categoryFk = categoryId;
+    await fetchItemTypes(categoryId);
+    search();
+};
+
+const resetCategory = (params) => {
+    selectedCategoryFk.value = null;
+    itemTypesOptions.value = null;
+    if (params) {
+        params.categoryFk = null;
+        params.typeFk = null;
+    }
+};
+
+const applyTags = (params, search) => {
+    params.tags = tagValues.value
+        .filter((tag) => tag.selectedTag && tag.value)
+        .map((tag) => ({
+            tagFk: tag.selectedTag.id,
+            tagName: tag.selectedTag.name,
+            value: tag.value,
+        }));
+    search();
+};
+
+const fetchItemTypes = async (id) => {
+    try {
+        const filter = {
+            fields: ['id', 'name', 'categoryFk'],
+            where: { categoryFk: id },
+            include: 'category',
+            order: 'name ASC',
+        };
+        const { data } = await axios.get('ItemTypes', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        itemTypesOptions.value = data;
+    } catch (err) {
+        console.error('Error fetching item types', err);
+    }
+};
+
+const getCategoryClass = (category, params) => {
+    if (category.id === params?.categoryFk) {
+        return 'active';
+    }
+};
+
+const getSelectedTagValues = async (tag) => {
+    try {
+        tag.value = null;
+        const filter = {
+            fields: ['value'],
+            order: 'value ASC',
+            limit: 30,
+        };
+
+        const params = { filter: JSON.stringify(filter) };
+        const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
+            params,
+        });
+        tag.valueOptions = data;
+    } catch (err) {
+        console.error('Error getting selected tag values');
+    }
+};
+
+const removeTag = (index, params, search) => {
+    (tagValues.value || []).splice(index, 1);
+    applyTags(params, search);
+};
+</script>
+
+<template>
+    <FetchData
+        url="ItemCategories"
+        limit="30"
+        auto-load
+        @on-fetch="(data) => (itemCategories = data)"
+    />
+    <FetchData
+        url="Suppliers"
+        limit="30"
+        auto-load
+        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
+        @on-fetch="(data) => (suppliersOptions = data)"
+    />
+    <FetchData
+        url="Tags"
+        :filter="{ fields: ['id', 'name', 'isFree'] }"
+        auto-load
+        limit="30"
+        @on-fetch="(data) => (tagOptions = data)"
+    />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :expr-builder="exprBuilder"
+        :custom-tags="customTags"
+    >
+        <template #tags="{ tag, formatFn }">
+            <strong v-if="tag.label === 'categoryFk'">
+                {{ t(selectedCategory?.name || '') }}
+            </strong>
+            <strong v-else-if="tag.label === 'typeFk'">
+                {{ t(selectedType?.name || '') }}
+            </strong>
+            <div v-else class="q-gutter-x-xs">
+                <strong>{{ t(`components.itemsFilterPanel.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #customTags="{ tags, params }">
+            <template v-for="tag in tags" :key="tag.label">
+                <VnFilterPanelChip
+                    v-for="chip in tag.value"
+                    :key="chip"
+                    removable
+                    @remove="removeTagChip(chip, params, searchFn)"
+                >
+                    <div class="q-gutter-x-xs">
+                        <strong>{{ chip.tagName }}: </strong>
+                        <span>"{{ chip.value }}"</span>
+                    </div>
+                </VnFilterPanelChip>
+            </template>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem class="category-filter q-mt-md">
+                <QBtn
+                    dense
+                    flat
+                    round
+                    v-for="category in categoryList"
+                    :key="category.name"
+                    :class="['category', getCategoryClass(category, params)]"
+                    :icon="category.icon"
+                    @click="selectCategory(params, category.id, searchFn)"
+                >
+                    <QTooltip>
+                        {{ t(category.name) }}
+                    </QTooltip>
+                </QBtn>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('components.itemsFilterPanel.typeFk')"
+                        v-model="params.typeFk"
+                        :options="itemTypesOptions"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        use-input
+                        :disable="!selectedCategoryFk"
+                        @update:model-value="
+                            (value) => {
+                                selectedTypeFk = value;
+                                searchFn();
+                            }
+                        "
+                    >
+                        <template #option="{ itemProps, opt }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ opt.categoryName }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelect>
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <slot name="body" :params="params" :search-fn="searchFn" />
+            <QItem
+                v-for="(value, index) in tagValues"
+                :key="value"
+                class="q-mt-md filter-value"
+            >
+                <QItemSection class="col">
+                    <VnSelect
+                        :label="t('components.itemsFilterPanel.tag')"
+                        v-model="value.selectedTag"
+                        :options="tagOptions"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                        :is-clearable="false"
+                        @update:model-value="getSelectedTagValues(value)"
+                    />
+                </QItemSection>
+                <QItemSection class="col">
+                    <VnSelect
+                        v-if="!value?.selectedTag?.isFree && value.valueOptions"
+                        :label="t('components.itemsFilterPanel.value')"
+                        v-model="value.value"
+                        :options="value.valueOptions || []"
+                        option-value="value"
+                        option-label="value"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        use-input
+                        :disable="!value"
+                        :is-clearable="false"
+                        @update:model-value="applyTags(params, searchFn)"
+                    />
+                    <VnInput
+                        v-else
+                        v-model="value.value"
+                        :label="t('components.itemsFilterPanel.value')"
+                        :disable="!value"
+                        is-outlined
+                        :is-clearable="false"
+                        @keyup.enter="applyTags(params, searchFn)"
+                    />
+                </QItemSection>
+                <QIcon
+                    name="delete"
+                    class="fill-icon-on-hover q-px-xs"
+                    color="primary"
+                    size="sm"
+                    @click="removeTag(index, params, searchFn)"
+                />
+            </QItem>
+            <QItem class="q-mt-lg">
+                <QIcon
+                    name="add_circle"
+                    class="fill-icon-on-hover q-px-xs"
+                    color="primary"
+                    size="sm"
+                    @click="tagValues.push({})"
+                />
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style lang="scss" scoped>
+.category-filter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+
+    .category {
+        padding: 8px;
+        width: 60px;
+        height: 60px;
+        font-size: 1.4rem;
+        background-color: var(--vn-accent-color);
+
+        &.active {
+            background-color: $primary;
+        }
+    }
+}
+
+.filter-value {
+    display: flex;
+    align-items: center;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        supplier: Supplier
+        from: From
+        to: To
+        active: Is active
+        visible: Is visible
+        floramondo: Is floramondo
+        salesPersonFk: Buyer
+        categoryFk: Category
+
+es:
+    params:
+        supplier: Proveedor
+        from: Desde
+        to: Hasta
+        active: Activo
+        visible: Visible
+        floramondo: Floramondo
+        salesPersonFk: Comprador
+        categoryFk: Categoría
+</i18n>

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"

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

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"

src/components/common/VnCard.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { onBeforeMount, computed } from 'vue';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';
+import VnSubToolbar from '../ui/VnSubToolbar.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const props = defineProps({
+    dataKey: { type: String, required: true },
+    baseUrl: { type: String, default: undefined },
+    customUrl: { type: String, default: undefined },
+    filter: { type: Object, default: () => {} },
+    descriptor: { type: Object, required: true },
+    searchbarDataKey: { type: String, default: undefined },
+    searchbarUrl: { type: String, default: undefined },
+    searchbarLabel: { type: String, default: '' },
+    searchbarInfo: { type: String, default: '' },
+});
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+const route = useRoute();
+const url = computed(() => {
+    if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
+    return props.customUrl;
+});
+
+const arrayData = useArrayData(props.dataKey, {
+    url: url.value,
+    filter: props.filter,
+});
+
+onBeforeMount(async () => {
+    if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
+    await arrayData.fetch({ append: false });
+});
+
+if (props.baseUrl) {
+    onBeforeRouteUpdate(async (to, from) => {
+        if (to.params.id !== from.params.id) {
+            arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
+            await arrayData.fetch({ append: false });
+        }
+    });
+}
+</script>
+<template>
+    <Teleport
+        to="#searchbar"
+        v-if="stateStore.isHeaderMounted() && props.searchbarDataKey"
+    >
+        <VnSearchbar
+            :data-key="props.searchbarDataKey"
+            :url="props.searchbarUrl"
+            :label="t(props.searchbarLabel)"
+            :info="t(props.searchbarInfo)"
+        />
+    </Teleport>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <component :is="descriptor" />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+            <div :class="[useCardSize(), $attrs.class]">
+                <RouterView />
+            </div>
+        </QPage>
+    </QPageContainer>
+</template>

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"

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();
@@ -659,7 +659,7 @@ setLogTree();
                     </QInput>
                 </QItem>
                 <QItem>
-                    <VnSelectFilter
+                    <VnSelect
                         class="full-width"
                         :label="t('globals.entity')"
                         v-model="selectedFilters.changedModel"
@@ -689,7 +689,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 +713,7 @@ setLogTree();
                                     </QItemSection>
                                 </QItem>
                             </template>
-                        </VnSelectFilter>
+                        </VnSelect>
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mt-sm">

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>

src/components/common/VnSmsDialog.vue

@@ -199,9 +199,10 @@ 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 } del día { shipped } para recibirlo sin portes adicionales.'
-        orderChanges: 'Pedido {orderId} día { shipped }: { changes }'
+        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
     fr: Francés
@@ -215,11 +216,12 @@ fr:
     Message: Message
     messageTooltip: Les caractères spéciaux comme les accents comptent comme plusieurs
     templates:
-        pendingPayment: 'Votre commande est en attente de paiement.
-            Veuillez vous connecter sur le site web et effectuer le paiement par carte. Merci beaucoup.'
-        minAmount: 'Un montant minimum de 50€ (TVA non incluse) est requis pour votre commande
-            { orderId } du { shipped } afin de la recevoir sans frais de port supplémentaires.'
-        orderChanges: 'Commande { orderId } du { shipped }: { changes }'
+        pendingPayment: 'Verdnatura : Commande en attente de règlement. Veuillez régler votre commande avant 9h.
+            Sinon elle sera décalée en fonction de vos jours de livraison . Merci'
+        minAmount: 'Verdnatura vous rappelle :
+            Montant minimum nécessaire de 50 euros pour recevoir la commande { orderId } livraison { landing }.
+            Merci.'
+        orderChanges: 'Commande {orderId} livraison {landing} indisponible/s. Désolés pour le dérangement.'
     en: Anglais
     es: Espagnol
     fr: Français
@@ -236,8 +238,8 @@ pt:
         pendingPayment: 'Seu pedido está pendente de pagamento.
             Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.'
         minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido
-            { orderId } do dia { shipped } para recebê-lo sem custos de envio adicionais.'
-        orderChanges: 'Pedido { orderId } dia { shipped }: { changes }'
+            { orderId } do dia { landing } para recebê-lo sem custos de envio adicionais.'
+        orderChanges: 'Pedido { orderId } com chegada dia { landing }: { changes }'
     en: Inglês
     es: Espanhol
     fr: Francês

src/components/ui/CardDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, useSlots, watch, computed, ref } from 'vue';
+import { onBeforeMount, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@@ -38,7 +38,6 @@ const $props = defineProps({
 });
 
 const state = useState();
-const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const arrayData = useArrayData($props.dataKey || $props.module, {
@@ -47,7 +46,7 @@ const arrayData = useArrayData($props.dataKey || $props.module, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() =>Array.isArray( store.data) ? store.data[0] : store.data);
+const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
 defineExpose({
@@ -55,14 +54,12 @@ defineExpose({
 });
 onBeforeMount(async () => {
     await getData();
-    watch(
-        () => $props.url,
-        async () => await getData()
-    );
+    watch($props, async () => await getData());
 });
 
 async function getData() {
     store.url = $props.url;
+    store.filter = $props.filter ?? {};
     isLoading.value = true;
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
@@ -117,7 +114,7 @@ const emit = defineEmits(['onFetch']);
                     icon="more_vert"
                     round
                     size="md"
-                    :class="{ invisible: !slots.menu }"
+                    :class="{ invisible: !$slots.menu }"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}

src/components/ui/CardSummary.vue

@@ -15,7 +15,7 @@ const props = defineProps({
         default: null,
     },
     entityId: {
-        type: Number,
+        type: [Number, String],
         default: null,
     },
     dataKey: {
@@ -32,7 +32,7 @@ const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() => Array.isArray(store.data) ? store.data[0] : store.data);
+const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
 defineExpose({
@@ -48,9 +48,10 @@ onBeforeMount(async () => {
 
 async function fetch() {
     store.url = props.url;
+    store.filter = props.filter ?? {};
     isLoading.value = true;
     const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    emit('onFetch', data);
+    emit('onFetch', Array.isArray(data) ? data[0] : data);
     isLoading.value = false;
 }
 </script>

src/components/ui/QCalendarMonthWrapper.vue

@@ -12,12 +12,23 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    viewCustomization: {
+        type: String,
+        default: '',
+    },
 });
 
 const $q = useQuasar();
 
+// El objetivo de asignar las clases de personalización desde el wrapper es no tener conflictos entre vistas que usen el mismo componente
+const viewCustomizationClasses = {
+    workerCalendar: 'worker-calendar-customizations',
+};
+
 const containerClasses = computed(() => {
     const classes = ['main-container-background'];
+    if (viewCustomizationClasses[$props.viewCustomization])
+        classes.push(viewCustomizationClasses[$props.viewCustomization]);
     if ($props.bordered) classes.push('--bordered');
     if ($props.transparentBackground) classes.push('transparent-background');
     else classes.push($q.dark.isActive ? '--dark' : '--light');
@@ -33,6 +44,47 @@ const containerClasses = computed(() => {
 </template>
 
 <style lang="scss">
+@import '../../css/quasar.variables.scss';
+
+:root {
+    // Cambia los colores del día actual del calendario por los de salix
+    --calendar-border-current-dark: #84d0e2 2px solid;
+    --calendar-border-current: #84d0e2 2px solid;
+    --calendar-current-color-dark: #84d0e2;
+    // Colores de fondo del calendario en dark mode
+    --calendar-outside-background-dark: #222;
+    --calendar-background-dark: #222;
+}
+
+// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
+.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+    color: white !important;
+}
+
+.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+    color: white !important;
+}
+
+.q-calendar-month__head--weekday {
+    // Transforma los nombres de los días de la semana a mayúsculas
+    text-transform: capitalize;
+}
+
+.transparent-background {
+    --calendar-background-dark: transparent;
+    --calendar-background: transparent;
+    --calendar-outside-background-dark: transparent;
+}
+
+.q-calendar__button {
+    &:hover {
+        background-color: var(--vn-accent-color);
+        cursor: pointer;
+    }
+}
+
 .main-container-background {
     --calendar-current-background-dark: transparent;
 
@@ -45,14 +97,64 @@ const containerClasses = computed(() => {
     }
 
     &.--bordered {
-        border: 1px solid black;
+        border: 1px solid #222;
     }
 }
 
-.transparent-background {
-    --calendar-background-dark: transparent;
-    --calendar-background: transparent;
-    --calendar-outside-background-dark: transparent;
+.worker-calendar-customizations {
+    .q-calendar__button {
+        width: 32px;
+        height: 32px;
+        font-size: 13px;
+
+        &:hover {
+            background-color: var(--vn-accent-color);
+            cursor: pointer;
+        }
+    }
+
+    .q-calendar-month__week--days > div:nth-child(6),
+    .q-calendar-month__week--days > div:nth-child(7) {
+        // Cambia el color de los días sábado y domingo
+        color: #777777;
+    }
+
+    .q-calendar-month__week--wrapper {
+        margin-bottom: 4px;
+    }
+
+    .q-calendar-month__workweek {
+        height: 32px;
+        display: flex;
+        justify-content: center;
+    }
+
+    .q-calendar__button--bordered {
+        color: $info !important;
+    }
+
+    .q-calendar-month__day--content {
+        position: absolute;
+        top: 1;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .q-outside .calendar-event {
+        display: none;
+    }
+
+    .q-calendar-month__workweek,
+    .q-calendar-month__head--workweek,
+    .q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
+        text-transform: capitalize;
+        color: #777;
+        font-weight: bold;
+        font-size: 0.8rem;
+        text-align: center;
+    }
 }
 
 .nav-container {

src/components/ui/VnSearchbar.vue

@@ -131,13 +131,6 @@ async function search() {
                 />
             </template>
             <template #append>
-                <QIcon
-                    v-if="searchText !== ''"
-                    name="close"
-                    @click="searchText = ''"
-                    class="cursor-pointer"
-                />
-
                 <QIcon
                     v-if="props.info && $q.screen.gt.xs"
                     name="info"

src/components/ui/VnSubToolbar.vue

@@ -1,11 +1,27 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-
 const stateStore = useStateStore();
+const actions = ref(null);
+const data = ref(null);
+const opts = { subtree: true, childList: true, attributes: true };
+const hasContent = ref(false);
 
 onMounted(() => {
     stateStore.toggleSubToolbar();
+    actions.value = document.querySelector('#st-actions');
+    data.value = document.querySelector('#st-data');
+
+    if (!actions.value && !data.value) return;
+
+    // Check if there's content to display
+    const observer = new MutationObserver(
+        () =>
+            (hasContent.value =
+                actions.value.childNodes.length + data.value.childNodes.length)
+    );
+    if (actions.value) observer.observe(actions.value, opts);
+    if (data.value) observer.observe(data.value, opts);
 });
 
 onUnmounted(() => {
@@ -14,7 +30,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-section-color justify-end sticky">
+    <QToolbar
+        class="justify-end sticky"
+        v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
+    >
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>

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';
+}

src/composables/useArrayData.js

@@ -151,9 +151,10 @@ export function useArrayData(key, userOptions) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[
-                        Object.keys(exprBuilder ? exprBuilder(param) : param)[0]
-                    ];
+                    const key = Object.keys(
+                        exprBuilder && exprBuilder(param) ? exprBuilder(param) : param
+                    );
+                    if (key[0]) delete store.filter.where[key[0]];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }

src/css/app.scss

@@ -119,6 +119,11 @@ select:-webkit-autofill {
     font-variation-settings: 'FILL' 1;
 }
 
+.fill-icon-on-hover:hover {
+    font-variation-settings: 'FILL' 1;
+    cursor: pointer;
+}
+
 .vn-table-separation-row {
     height: 16px !important;
     background-color: var(--vn-section-color) !important;
@@ -136,6 +141,19 @@ 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);
+}
+
 .q-chip,
 .q-notification__message,
 .q-notification__icon {
@@ -170,15 +188,8 @@ input::-webkit-inner-spin-button {
     -moz-appearance: none;
 }
 
-// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
-.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
-    background-color: $primary !important;
-    color: white !important;
-}
-
-.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
-    background-color: $primary !important;
-    color: white !important;
+.q-scrollarea__content {
+    max-width: 100%;
 }
 
 .remove-bg {

src/filters/date.js

@@ -91,3 +91,42 @@ export function toDateTimeFormat(date, showSeconds = false) {
         second: showSeconds ? '2-digit' : undefined,
     });
 }
+
+/**
+ * Converts seconds to a formatted string representing hours and minutes (hh:mm).
+ * @param {number} seconds - The number of seconds to convert.
+ * @param {boolean} includeHSuffix - Optional parameter indicating whether to include "h." after the hour.
+ * @returns {string} A string representing the time in the format "hh:mm" with optional "h." suffix.
+ */
+export function secondsToHoursMinutes(seconds, includeHSuffix = true) {
+    if (!seconds) return includeHSuffix ? '00:00 h.' : '00:00';
+
+    const hours = Math.floor(seconds / 3600);
+    const remainingMinutes = seconds % 3600;
+    const minutes = Math.floor(remainingMinutes / 60);
+    const formattedHours = hours < 10 ? '0' + hours : hours;
+    const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
+
+    // Append "h." if includeHSuffix is true
+    const suffix = includeHSuffix ? ' h.' : '';
+    // Return formatted string
+    return formattedHours + ':' + formattedMinutes + suffix;
+}
+
+export function getTimeDifferenceWithToday(date) {
+    let today = Date.vnNew();
+    today.setHours(0, 0, 0, 0);
+
+    date = new Date(date);
+    date.setHours(0, 0, 0, 0);
+
+    return today - date;
+}
+
+export function isLower(date) {
+    return getTimeDifferenceWithToday(date) > 0;
+}
+
+export function isBigger(date) {
+    return getTimeDifferenceWithToday(date) < 0;
+}

src/i18n/locale/en.yml

@@ -28,6 +28,7 @@ globals:
     reset: Reset
     close: Close
     cancel: Cancel
+    clone: Clone
     confirm: Confirm
     assign: Assign
     back: Back
@@ -83,15 +84,22 @@ globals:
     selectFile: Select a file
     copyClipboard: Copy on clipboard
     salesPerson: SalesPerson
+    send: Send
     code: Code
     pageTitles:
         summary: Summary
         basicData: Basic data
         log: Logs
         parkingList: Parkings list
+        agencyList: Agencies list
+        agency: Agency
+        workCenters: Work centers
+        modes: Modes
     created: Created
     worker: Worker
     now: Now
+    name: Name
+    new: New
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
@@ -812,6 +820,7 @@ worker:
         pbx: Private Branch Exchange
         log: Log
         calendar: Calendar
+        timeControl: Time control
     list:
         name: Name
         email: Email
@@ -1118,8 +1127,15 @@ item:
         list: List
         diary: Diary
         tags: Tags
+        create: Create
+        buyRequest: Buy requests
+        fixedPrice: Fixed prices
         wasteBreakdown: Waste breakdown
         itemCreate: New item
+        log: Log
+        tax: Tax
+        barcode: Barcode
+        botanical: Botanical
     descriptor:
         item: Item
         buyer: Buyer
@@ -1147,6 +1163,15 @@ item:
         stemMultiplier: Multiplier
         producer: Producer
         landed: Landed
+    fixedPrice:
+        itemId: Item ID
+        groupingPrice: Grouping price
+        packingPrice: Packing price
+        hasMinPrice: Has min price
+        minPrice: Min price
+        started: Started
+        ended: Ended
+        warehouse: Warehouse
     create:
         name: Name
         tag: Tag
@@ -1154,8 +1179,68 @@ 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'
 components:
     topbar: {}
+    itemsFilterPanel:
+        typeFk: Type
+        tag: Tag
+        value: Value
+        # ItemFixedPriceFilter
+        buyerFk: Buyer
+        warehouseFk: Warehouse
+        started: From
+        ended: To
+        mine: For me
+        hasMinPrice: Minimum price
+        # LatestBuysFilter
+        salesPersonFk: Buyer
+        supplierFk: Supplier
+        from: From
+        to: To
+        active: Is active
+        visible: Is visible
+        floramondo: Is floramondo
     userPanel:
         copyToken: Token copied to clipboard
         settings: Settings

src/i18n/locale/es.yml

@@ -28,6 +28,7 @@ globals:
     reset: Restaurar
     close: Cerrar
     cancel: Cancelar
+    clone: Clonar
     confirm: Confirmar
     assign: Asignar
     back: Volver
@@ -83,15 +84,22 @@ globals:
     selectFile: Seleccione un fichero
     copyClipboard: Copiar en portapapeles
     salesPerson: Comercial
+    send: Enviar
     code: Código
     pageTitles:
         summary: Resumen
         basicData: Datos básicos
         log: Historial
         parkingList: Listado de parkings
+        agencyList: Listado de agencias
+        agency: Agencia
+        workCenters: Centros de trabajo
+        modes: Modos
     created: Fecha creación
     worker: Trabajador
     now: Ahora
+    name: Nombre
+    new: Nuevo
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
@@ -810,6 +818,7 @@ worker:
         pbx: Centralita
         log: Historial
         calendar: Calendario
+        timeControl: Control de horario
     list:
         name: Nombre
         email: Email
@@ -1117,8 +1126,15 @@ item:
         list: Listado
         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
     descriptor:
         item: Artículo
         buyer: Comprador
@@ -1146,6 +1162,15 @@ item:
         stemMultiplier: Multiplicador
         producer: Productor
         landed: F. entrega
+    fixedPrice:
+        itemId: ID Artículo
+        groupingPrice: Precio grouping
+        packingPrice: Precio packing
+        hasMinPrice: Tiene precio mínimo
+        minPrice: Precio min
+        started: Inicio
+        ended: Fin
+        warehouse: Almacén
     create:
         name: Nombre
         tag: Etiqueta
@@ -1153,8 +1178,68 @@ 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'
 components:
     topbar: {}
+    itemsFilterPanel:
+        typeFk: Tipo
+        tag: Etiqueta
+        value: Valor
+        # ItemFixedPriceFilter
+        buyerFk: Comprador
+        warehouseFk: Almacén
+        started: Desde
+        ended: Hasta
+        mine: Para mi
+        hasMinPrice: Precio mínimo
+        # LatestBuysFilter
+        salesPersonFk: Comprador
+        supplierFk: Proveedor
+        from: Desde
+        to: Hasta
+        active: Activo
+        visible: Visible
+        floramondo: Floramondo
     userPanel:
         copyToken: Token copiado al portapapeles
         settings: Configuración

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>

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>

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>

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>

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>

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>

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>

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>

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...

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...

src/pages/Claim/Card/ClaimAction.vue

@@ -9,7 +9,8 @@ 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 VnSelect from 'src/components/common/VnSelect.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import { useArrayData } from 'composables/useArrayData';
 
@@ -300,7 +301,7 @@ async function importToNewRefundTicket() {
                 </template>
                 <template #body-cell-destination="{ row }">
                     <QTd>
-                        <VnSelectFilter
+                        <VnSelect
                             v-model="row.claimDestinationFk"
                             :options="destinationTypes"
                             option-label="description"
@@ -342,7 +343,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"
@@ -416,7 +417,7 @@ async function importToNewRefundTicket() {
                 </QItem>
             </QCardSection>
             <QItemSection>
-                <VnSelectFilter
+                <VnSelect
                     class="q-pa-sm"
                     v-model="claimDestinationFk"
                     :options="destinationTypes"

src/pages/Claim/Card/ClaimBasicData.vue

@@ -41,6 +41,7 @@ const workers = ref([]);
 const workersCopy = ref([]);
 const claimStates = ref([]);
 const claimStatesCopy = ref([]);
+const optionsList = ref([]);
 
 function setWorkers(data) {
     workers.value = data;
@@ -51,9 +52,9 @@ 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,8 +63,9 @@ 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 = {

src/pages/Claim/Card/ClaimCard.vue

@@ -1,46 +1,15 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
-import { useI18n } from 'vue-i18n';
+import VnCard from 'components/common/VnCard.vue';
 import ClaimDescriptor from './ClaimDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="ClaimList"
-            url="Claims/filter"
-            :label="t('Search claim')"
-            :info="t('You can search by claim id or customer name')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <ClaimDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Claim"
+        base-url="Claims"
+        :descriptor="ClaimDescriptor"
+        searchbar-data-key="ClaimList"
+        searchbar-url="Claims/filter"
+        searchbar-label="Search claim"
+        searchbar-info="You can search by claim id or customer name"
+    />
 </template>
-
-<i18n>
-es:
-    Search claim: Buscar reclamación
-    You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
-    Details: Detalles
-    Notes: Notas
-    Action: Acción
-</i18n>

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"

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();

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>

src/pages/Claim/locale/es.yml

@@ -0,0 +1,2 @@
+Search claim: Buscar reclamación
+You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente

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)"

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

src/pages/Customer/Card/CustomerCard.vue

@@ -1,43 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import CustomerDescriptor from './CustomerDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="CustomerList"
-            url="Clients/filter"
-            :label="t('Search customer')"
-            :info="t('You can search by customer id or name')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <CustomerDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Client"
+        base-url="Clients"
+        :descriptor="CustomerDescriptor"
+        searchbar-data-key="CustomerList"
+        searchbar-url="Clients/filter"
+        searchbar-label="Search customer"
+        searchbar-info="You can search by customer id or name"
+    />
 </template>
-
-<i18n>
-es:
-    Search customer: Buscar cliente
-    You can search by customer id or name: Puedes buscar por id o nombre del cliente
-</i18n>

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>
 

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"

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

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()"

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"

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'

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"

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 CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
 
@@ -100,7 +100,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')"
@@ -120,7 +120,7 @@ function handleLocation(data, location) {
             </div>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <VnSelectFilter
+                <VnSelect
                     :label="t('Incoterms')"
                     :options="incoterms"
                     hide-selected

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 CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
 
@@ -179,12 +179,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')"
@@ -201,10 +204,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
@@ -228,7 +230,6 @@ function handleLocation(data, location) {
                     </VnSelectDialog>
                 </div>
             </VnRow>
-
             <h4 class="q-mb-xs">{{ t('Notes') }}</h4>
             <VnRow
                 :key="index"
@@ -236,7 +237,7 @@ function handleLocation(data, location) {
                 v-for="(note, index) in notes"
             >
                 <div class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('Observation type')"
                         :options="observationTypes"
                         hide-selected

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;
 };
 

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"

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"

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

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

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>
 

src/pages/Customer/locale/es.yml

@@ -1,3 +1,5 @@
+Search customer: Buscar cliente
+You can search by customer id or name: Puedes buscar por id o nombre del cliente
 customerFilter:
     filter:
         name: Nombre

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"

src/pages/Department/Card/DepartmentCard.vue

@@ -1,26 +1,13 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <DepartmentDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div class="q-pa-md column items-center">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        class="q-pa-md column items-center"
+        v-bind="{ ...$attrs }"
+        data-key="Department"
+        base-url="Departments"
+        :descriptor="DepartmentDescriptor"
+    />
 </template>

src/pages/Department/Card/DepartmentSummary.vue

@@ -27,6 +27,7 @@ onMounted(async () => {
 
 <template>
     <CardSummary
+        data-key="DepartmentSummary"
         ref="summary"
         :url="`Departments/${entityId}`"
         class="full-width"

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"

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',

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"

src/pages/Entry/Card/EntryCard.vue

@@ -1,48 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnCard from 'components/common/VnCard.vue';
 import EntryDescriptor from './EntryDescriptor.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import useCardSize from 'src/composables/useCardSize';
-
-const { t } = useI18n();
-const stateStore = useStateStore();
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="EntryList"
-                url="Entries/filter"
-                :label="t('Search entries')"
-                :info="t('You can search by entry reference')"
-            />
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <EntryDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Entry"
+        base-url="Entries"
+        :descriptor="EntryDescriptor"
+        searchbar-data-key="EntryList"
+        searchbar-url="Entries/filter"
+        searchbar-label="Search entries"
+        searchbar-info="You can search by entry reference"
+    />
 </template>
-
-<i18n>
-es:
-    Search entries: Buscar entradas
-    You can search by entry reference: Puedes buscar por referencia de la entrada
-</i18n>

src/pages/Entry/Card/EntryNotes.vue

@@ -6,7 +6,7 @@ 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();
@@ -80,7 +80,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 +111,7 @@ const columns = computed(() => [
                             <QList dense>
                                 <QItem>
                                     <QItemSection>
-                                        <VnSelectFilter
+                                        <VnSelect
                                             v-model="props.row.observationTypeFk"
                                             :options="entryObservationsOptions"
                                             option-value="id"

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"

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>

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,
@@ -650,7 +650,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
     </QToolbar>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <EntryLatestBuysFilter data-key="EntryLatestBuys" :tags="tags" />
+            <EntryLatestBuysFilter data-key="EntryLatestBuys" />
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">

src/pages/Entry/EntryLatestBuysFilter.vue

@@ -1,141 +1,26 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import VnInput from 'components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelectFilter from 'components/common/VnSelectFilter.vue';
-import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
-
-import axios from 'axios';
+import VnSelect from 'components/common/VnSelect.vue';
+import ItemsFilterPanel from 'src/components/ItemsFilterPanel.vue';
 
 const { t } = useI18n();
-const props = defineProps({
+
+defineProps({
     dataKey: {
         type: String,
         required: true,
     },
 });
 
-const itemCategories = ref([]);
-const selectedCategoryFk = ref(null);
-const selectedTypeFk = ref(null);
-const itemTypesOptions = ref([]);
 const itemTypeWorkersOptions = ref([]);
 const suppliersOptions = ref([]);
-const tagOptions = ref([]);
-const tagValues = ref([]);
-
-const categoryList = computed(() => {
-    return (itemCategories.value || [])
-        .filter((category) => category.display)
-        .map((category) => ({
-            ...category,
-            icon: `vn:${(category.icon || '').split('-')[1]}`,
-        }));
-});
-
-const selectedCategory = computed(() =>
-    (itemCategories.value || []).find(
-        (category) => category?.id === selectedCategoryFk.value
-    )
-);
-
-const selectedType = computed(() => {
-    return (itemTypesOptions.value || []).find(
-        (type) => type?.id === selectedTypeFk.value
-    );
-});
-
-const selectCategory = async (params, categoryId, search) => {
-    if (params.categoryFk === categoryId) {
-        resetCategory(params);
-        search();
-        return;
-    }
-    selectedCategoryFk.value = categoryId;
-    params.categoryFk = categoryId;
-    await fetchItemTypes(categoryId);
-    search();
-};
-
-const resetCategory = (params) => {
-    selectedCategoryFk.value = null;
-    itemTypesOptions.value = null;
-    if (params) {
-        params.categoryFk = null;
-        params.typeFk = null;
-    }
-};
-
-const applyTags = (params, search) => {
-    params.tags = tagValues.value
-        .filter((tag) => tag.selectedTag && tag.value)
-        .map((tag) => ({
-            tagFk: tag.selectedTag.id,
-            tagName: tag.selectedTag.name,
-            value: tag.value,
-        }));
-    search();
-};
-
-const fetchItemTypes = async (id) => {
-    try {
-        const filter = {
-            fields: ['id', 'name', 'categoryFk'],
-            where: { categoryFk: id },
-            include: 'category',
-            order: 'name ASC',
-        };
-        const { data } = await axios.get('ItemTypes', {
-            params: { filter: JSON.stringify(filter) },
-        });
-        itemTypesOptions.value = data;
-    } catch (err) {
-        console.error('Error fetching item types', err);
-    }
-};
-
-const getCategoryClass = (category, params) => {
-    if (category.id === params?.categoryFk) {
-        return 'active';
-    }
-};
-
-const getSelectedTagValues = async (tag) => {
-    try {
-        tag.value = null;
-        const filter = {
-            fields: ['value'],
-            order: 'value ASC',
-            limit: 30,
-        };
-
-        const params = { filter: JSON.stringify(filter) };
-        const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
-            params,
-        });
-        tag.valueOptions = data;
-    } catch (err) {
-        console.error('Error getting selected tag values');
-    }
-};
-
-const removeTag = (index, params, search) => {
-    (tagValues.value || []).splice(index, 1);
-    applyTags(params, search);
-};
 </script>
 
 <template>
-    <FetchData
-        url="ItemCategories"
-        limit="30"
-        auto-load
-        @on-fetch="(data) => (itemCategories = data)"
-    />
     <FetchData
         url="TicketRequests/getItemTypeWorker"
         limit="30"
@@ -150,102 +35,12 @@ const removeTag = (index, params, search) => {
         :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
         @on-fetch="(data) => (suppliersOptions = data)"
     />
-    <FetchData
-        url="Tags"
-        :filter="{ fields: ['id', 'name', 'isFree'] }"
-        auto-load
-        limit="30"
-        @on-fetch="(data) => (tagOptions = data)"
-    />
-    <VnFilterPanel
-        :data-key="props.dataKey"
-        :expr-builder="exprBuilder"
-        :custom-tags="['tags']"
-        @init="onFilterInit"
-        @remove="clearFilter"
-    >
-        <template #tags="{ tag, formatFn }">
-            <strong v-if="tag.label === 'categoryFk'">
-                {{ t(selectedCategory?.name || '') }}
-            </strong>
-            <strong v-else-if="tag.label === 'typeFk'">
-                {{ t(selectedType?.name || '') }}
-            </strong>
-            <div v-else class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
-            </div>
-        </template>
-        <template #customTags="{ tags: customTags, params }">
-            <template v-for="tag in customTags" :key="tag.label">
-                <VnFilterPanelChip
-                    v-for="chip in tag.value"
-                    :key="chip"
-                    removable
-                    @remove="removeTagChip(chip, params, searchFn)"
-                >
-                    <div class="q-gutter-x-xs">
-                        <strong>{{ chip.tagName }}: </strong>
-                        <span>"{{ chip.value }}"</span>
-                    </div>
-                </VnFilterPanelChip>
-            </template>
-        </template>
+    <ItemsFilterPanel :data-key="dataKey" :custom-tags="['tags']">
         <template #body="{ params, searchFn }">
-            <QItem class="category-filter q-mt-md">
-                <QBtn
-                    dense
-                    flat
-                    round
-                    v-for="category in categoryList"
-                    :key="category.name"
-                    :class="['category', getCategoryClass(category, params)]"
-                    :icon="category.icon"
-                    @click="selectCategory(params, category.id, searchFn)"
-                >
-                    <QTooltip>
-                        {{ t(category.name) }}
-                    </QTooltip>
-                </QBtn>
-            </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
-                        :label="t('params.typeFk')"
-                        v-model="params.typeFk"
-                        :options="itemTypesOptions"
-                        option-value="id"
-                        option-label="name"
-                        dense
-                        outlined
-                        rounded
-                        use-input
-                        :disable="!selectedCategoryFk"
-                        @update:model-value="
-                            (value) => {
-                                selectedTypeFk = value;
-                                searchFn();
-                            }
-                        "
-                    >
-                        <template #option="{ itemProps, opt }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ opt.categoryName }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </QItemSection>
-            </QItem>
-            <QSeparator />
-            <QItem class="q-my-md">
-                <QItemSection>
-                    <VnSelectFilter
-                        :label="t('params.salesPersonFk')"
+                    <VnSelect
+                        :label="t('components.itemsFilterPanel.salesPersonFk')"
                         v-model="params.salesPersonFk"
                         :options="itemTypeWorkersOptions"
                         option-value="id"
@@ -260,8 +55,8 @@ const removeTag = (index, params, search) => {
             </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
-                    <VnSelectFilter
-                        :label="t('params.supplier')"
+                    <VnSelect
+                        :label="t('components.itemsFilterPanel.supplierFk')"
                         v-model="params.supplierFk"
                         :options="suppliersOptions"
                         option-value="id"
@@ -282,13 +77,13 @@ const removeTag = (index, params, search) => {
                                 </QItemSection>
                             </QItem>
                         </template>
-                    </VnSelectFilter>
+                    </VnSelect>
                 </QItemSection>
             </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnInputDate
-                        :label="t('params.from')"
+                        :label="t('components.itemsFilterPanel.from')"
                         v-model="params.from"
                         is-outlined
                         @update:model-value="searchFn()"
@@ -298,7 +93,7 @@ const removeTag = (index, params, search) => {
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnInputDate
-                        :label="t('params.to')"
+                        :label="t('components.itemsFilterPanel.to')"
                         v-model="params.to"
                         is-outlined
                         @update:model-value="searchFn()"
@@ -308,7 +103,7 @@ const removeTag = (index, params, search) => {
             <QItem>
                 <QItemSection>
                     <QCheckbox
-                        :label="t('params.active')"
+                        :label="t('components.itemsFilterPanel.active')"
                         v-model="params.active"
                         toggle-indeterminate
                         @update:model-value="searchFn()"
@@ -316,7 +111,7 @@ const removeTag = (index, params, search) => {
                 </QItemSection>
                 <QItemSection>
                     <QCheckbox
-                        :label="t('params.visible')"
+                        :label="t('components.itemsFilterPanel.visible')"
                         v-model="params.visible"
                         toggle-indeterminate
                         @update:model-value="searchFn()"
@@ -326,7 +121,7 @@ const removeTag = (index, params, search) => {
             <QItem>
                 <QItemSection>
                     <QCheckbox
-                        :label="t('params.floramondo')"
+                        :label="t('components.itemsFilterPanel.floramondo')"
                         v-model="params.floramondo"
                         toggle-indeterminate
                         @update:model-value="searchFn()"
@@ -340,7 +135,7 @@ const removeTag = (index, params, search) => {
                 class="q-mt-md filter-value"
             >
                 <QItemSection class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         :label="t('params.tag')"
                         v-model="value.selectedTag"
                         :options="tagOptions"
@@ -355,7 +150,7 @@ const removeTag = (index, params, search) => {
                     />
                 </QItemSection>
                 <QItemSection class="col">
-                    <VnSelectFilter
+                    <VnSelect
                         v-if="!value?.selectedTag?.isFree && value.valueOptions"
                         :label="t('params.value')"
                         v-model="value.value"
@@ -397,78 +192,5 @@ const removeTag = (index, params, search) => {
                 />
             </QItem>
         </template>
-    </VnFilterPanel>
+    </ItemsFilterPanel>
 </template>
-
-<style lang="scss" scoped>
-.category-filter {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 12px;
-
-    .category {
-        padding: 8px;
-        width: 60px;
-        height: 60px;
-        font-size: 1.4rem;
-        background-color: var(--vn-accent-color);
-
-        &.active {
-            background-color: $primary;
-        }
-    }
-}
-
-.filter-icon {
-    font-size: 24px;
-    color: $primary;
-    padding: 0 4px;
-    cursor: pointer;
-}
-
-.filter-input {
-    flex-shrink: 1;
-    min-width: 0;
-}
-
-.filter-value {
-    display: flex;
-    align-items: center;
-}
-</style>
-
-<i18n>
-en:
-    params:
-        supplier: Supplier
-        from: From
-        to: To
-        active: Is active
-        visible: Is visible
-        floramondo: Is floramondo
-        salesPersonFk: Buyer
-        categoryFk: Category
-        typeFk: Type
-        tag: Tag
-        value: Value
-es:
-    params:
-        supplier: Proveedor
-        from: Desde
-        to: Hasta
-        active: Activo
-        visible: Visible
-        floramondo: Floramondo
-        salesPersonFk: Comprador
-        categoryFk: Categoría
-        typeFk: Tipo
-        tag: Etiqueta
-        value: Valor
-    Plant: Planta
-    Flower: Flor
-    Handmade: Confección
-    Green: Verde
-    Accessories: Complemento
-    Fruit: Fruta
-</i18n>

src/pages/Entry/locale/es.yml

@@ -1,3 +1,5 @@
+Search entries: Buscar entradas
+You can search by entry reference: Puedes buscar por referencia de la entrada
 entryList:
     list:
         inventoryEntry: Es inventario

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"

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -1,18 +1,6 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import { useArrayData } from 'src/composables/useArrayData';
-import { onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
-const route = useRoute();
 
 const filter = {
     include: [
@@ -21,69 +9,25 @@ const filter = {
             scope: {
                 include: {
                     relation: 'contacts',
-                    scope: {
-                        where: {
-                            email: { neq: null },
-                        },
-                    },
+                    scope: { where: { email: { neq: null } } },
                 },
             },
         },
-        {
-            relation: 'invoiceInDueDay',
-        },
-        {
-            relation: 'company',
-        },
-        {
-            relation: 'currency',
-        },
+        { relation: 'invoiceInDueDay' },
+        { relation: 'company' },
+        { relation: 'currency' },
     ],
 };
-const arrayData = useArrayData('InvoiceIn', {
-    url: `InvoiceIns/${route.params.id}`,
-    filter,
-});
-
-onMounted(async () => await arrayData.fetch({ append: false }));
-watch(
-    () => route.params.id,
-    async (newId) => {
-        if (newId) {
-            arrayData.store.url = `InvoiceIns/${newId}`;
-            await arrayData.fetch({ append: false });
-        }
-    }
-);
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="InvoiceInList"
-            url="InvoiceIns/filter"
-            :label="t('Search invoice')"
-            :info="t('You can search by invoice reference')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <InvoiceInDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="InvoiceIn"
+        base-url="InvoiceIns"
+        :filter="filter"
+        :descriptor="InvoiceInDescriptor"
+        searchbar-data-key="InvoiceInList"
+        searchbar-url="InvoiceIns/filter"
+        searchbar-label="Search invoice"
+        searchbar-info="You can search by invoice reference"
+    />
 </template>
-
-<i18n>
-    es:
-        Search invoice: Buscar factura recibida
-        You can search by invoice reference: Puedes buscar por referencia de la factura
-    </i18n>

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"

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"

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();
@@ -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

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']"

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)) }}

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>

src/pages/InvoiceIn/locale/es.yml

@@ -0,0 +1,2 @@
+Search invoice: Buscar factura recibida
+You can search by invoice reference: Puedes buscar por referencia de la factura

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -1,43 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
+import VnCard from 'components/common/VnCard.vue';
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="InvoiceOutList"
-            url="InvoiceOuts/filter"
-            :label="t('Search invoice')"
-            :info="t('You can search by invoice reference')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <InvoiceOutDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="InvoiceOut"
+        base-url="InvoiceOuts"
+        :descriptor="InvoiceOutDescriptor"
+        searchbar-data-key="InvoiceOutList"
+        searchbar-url="InvoiceOuts/filter"
+        searchbar-label="Search invoice"
+        searchbar-info="You can search by invoice reference"
+    />
 </template>
-
-<i18n>
-    es:
-        Search invoice: Buscar factura emitida
-        You can search by invoice reference: Puedes buscar por referencia de la factura
-    </i18n>

src/pages/InvoiceOut/Card/InvoiceOutSummary.vue

@@ -138,7 +138,7 @@ const ticketsColumns = ref([
                 <VnTitle :text="t('invoiceOut.summary.taxBreakdown')" />
                 <QTable :columns="taxColumns" :rows="invoiceOut.taxesBreakdown" flat>
                     <template #header="props">
-                        <QTr :props="props">
+                        <QTr class="tr-header" :props="props">
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
                                 {{ t(col.label) }}
                             </QTh>
@@ -149,6 +149,18 @@ const ticketsColumns = ref([
             <QCard class="vn-three">
                 <VnTitle :text="t('invoiceOut.summary.tickets')" />
                 <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh
+                                class="tr-header"
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                            >
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
                     <template #body-cell-item="{ value }">
                         <QTd>
                             <QBtn flat color="primary">
@@ -159,7 +171,7 @@ const ticketsColumns = ref([
                     </template>
                     <template #body-cell-quantity="{ value, row }">
                         <QTd>
-                            <QBtn flat color="primary" dense>
+                            <QBtn class="no-uppercase" flat color="primary" dense>
                                 {{ value }}
                                 <CustomerDescriptorProxy :id="row.id" />
                             </QBtn>
@@ -170,3 +182,8 @@ const ticketsColumns = ref([
         </template>
     </CardSummary>
 </template>
+<style lang="scss" scoped>
+.no-uppercase {
+    text-transform: none;
+}
+</style>

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"

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -119,8 +119,8 @@ const columns = computed(() => [
     },
     {
         label: t('invoiceOut.negativeBases.comercial'),
-        field: 'workerSocialName',
-        name: 'comercial',
+        field: 'workerName',
+        name: 'worker',
         align: 'left',
     },
 ]);
@@ -181,9 +181,11 @@ const downloadCSV = async () => {
                     <TicketDescriptorProxy :id="row.ticketFk" />
                 </QTd>
             </template>
-            <template #body-cell-comercial="{ row }">
+            <template #body-cell-worker="{ row }">
                 <QTd>
-                    <QBtn flat dense color="blue">{{ row.comercialName }}</QBtn>
+                    <QBtn class="no-uppercase" flat dense color="blue">{{
+                        row.workerName
+                    }}</QBtn>
                     <WorkerDescriptorProxy :id="row.comercialId" />
                 </QTd>
             </template>
@@ -211,6 +213,9 @@ const downloadCSV = async () => {
     border-radius: 4px;
     padding: 6px;
 }
+.no-uppercase {
+    text-transform: none;
+}
 </style>
 
 <i18n>

src/pages/InvoiceOut/locale/es.yml

@@ -0,0 +1,2 @@
+Search invoice: Buscar factura emitida
+You can search by invoice reference: Puedes buscar por referencia de la factura

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>

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>