Merge branch 'dev' into 5858-fiscalData-validations

.eslintrc.js

@@ -58,7 +58,7 @@ module.exports = {
     rules: {
         'prefer-promise-reject-errors': 'off',
         'no-unused-vars': 'warn',
-
+        "vue/no-multiple-template-root": "off" ,
         // allow debugger during development only
         'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     },

Jenkinsfile

@@ -96,4 +96,4 @@ pipeline {
             }
         }
     }
-}
+}

package-lock.json

@@ -12,6 +12,7 @@
                 "@quasar/extras": "^1.16.4",
                 "axios": "^1.4.0",
                 "chromium": "^3.0.3",
+                "croppie": "^2.6.5",
                 "pinia": "^2.1.3",
                 "quasar": "^2.12.0",
                 "validator": "^13.9.0",
@@ -3169,6 +3170,11 @@
                 "node": ">= 10"
             }
         },
+        "node_modules/croppie": {
+            "version": "2.6.5",
+            "resolved": "https://registry.npmjs.org/croppie/-/croppie-2.6.5.tgz",
+            "integrity": "sha512-IlChnVUGG5T3w2gRZIaQgBtlvyuYnlUWs2YZIXXR3H9KrlO1PtBT3j+ykxvy9eZIWhk+V5SpBmhCQz5UXKrEKQ=="
+        },
         "node_modules/cross-spawn": {
             "version": "7.0.3",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.02.01",
+    "version": "24.8.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
@@ -19,6 +19,7 @@
         "@quasar/extras": "^1.16.4",
         "axios": "^1.4.0",
         "chromium": "^3.0.3",
+        "croppie": "^2.6.5",
         "pinia": "^2.1.3",
         "quasar": "^2.12.0",
         "validator": "^13.9.0",

src/components/CreateBankEntityForm.vue

@@ -1,12 +1,20 @@
 <script setup>
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import VnInput from 'src/components/common/VnInput.vue';
 
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FetchData from 'components/FetchData.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
+const props = defineProps({
+    showEntityField: {
+        type: Boolean,
+        default: true,
+    },
+});
+
 const emit = defineEmits(['onDataSaved']);
 
 const { t } = useI18n();
@@ -47,16 +55,18 @@ const onDataSaved = (data) => {
         <template #form-inputs="{ data, validate }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         :label="t('name')"
                         v-model="data.name"
+                        :required="true"
                         :rules="validate('bankEntity.name')"
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         :label="t('swift')"
                         v-model="data.bic"
+                        :required="true"
                         :rules="validate('bankEntity.bic')"
                     />
                 </div>
@@ -70,11 +80,17 @@ const onDataSaved = (data) => {
                         option-value="id"
                         option-label="country"
                         hide-selected
+                        :required="true"
                         :rules="validate('bankEntity.countryFk')"
                     />
                 </div>
-                <div class="col">
-                    <QInput :label="t('id')" v-model="data.id" />
+                <div v-if="showEntityField" class="col">
+                    <VnInput
+                        :label="t('id')"
+                        v-model="data.id"
+                        :required="true"
+                        :rules="validate('city.name')"
+                    />
                 </div>
             </VnRow>
         </template>
@@ -85,15 +101,15 @@ const onDataSaved = (data) => {
 en:
     title: New bank entity
     subtitle: Please, ensure you put the correct data!
-    name: Name *
-    swift: Swift *
+    name: Name
+    swift: Swift
     country: Country
     id: Entity code
 es:
     title: Nueva entidad bancaria
     subtitle: ¡Por favor, asegúrate de poner los datos correctos!
-    name: Nombre *
-    swift: Swift *
+    name: Nombre
+    swift: Swift
     country: País
     id: Código de la entidad
 </i18n>

src/components/CreateNewCityForm.vue

@@ -19,8 +19,8 @@ const cityFormData = reactive({
 
 const provincesOptions = ref([]);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
 };
 </script>
 

src/components/CreateNewPostcodeForm.vue

@@ -8,7 +8,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CreateNewCityForm from './CreateNewCityForm.vue';
 import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
-import VnSelectCreate from 'components/common/VnSelectCreate.vue';
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
 import FormModelPopup from './FormModelPopup.vue';
 
 const emit = defineEmits(['onDataSaved']);
@@ -28,16 +28,24 @@ const countriesOptions = ref([]);
 const provincesOptions = ref([]);
 const townsLocationOptions = ref([]);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
 };
 
-const onCityCreated = async () => {
+const onCityCreated = async ({ name, provinceFk }, formData) => {
     await townsFetchDataRef.value.fetch();
+    formData.townFk = townsLocationOptions.value.find((town) => town.name === name).id;
+    formData.provinceFk = provinceFk;
+    formData.countryFk = provincesOptions.value.find(
+        (province) => province.id === provinceFk
+    ).countryFk;
 };
 
-const onProvinceCreated = async () => {
+const onProvinceCreated = async ({ name }, formData) => {
     await provincesFetchDataRef.value.fetch();
+    formData.provinceFk = provincesOptions.value.find(
+        (province) => province.name === name
+    ).id;
 };
 </script>
 
@@ -77,7 +85,7 @@ const onProvinceCreated = async () => {
                     />
                 </div>
                 <div class="col">
-                    <VnSelectCreate
+                    <VnSelectDialog
                         :label="t('City')"
                         :options="townsLocationOptions"
                         v-model="data.townFk"
@@ -88,14 +96,16 @@ const onProvinceCreated = async () => {
                         :roles-allowed-to-create="['deliveryAssistant']"
                     >
                         <template #form>
-                            <CreateNewCityForm @on-data-saved="onCityCreated($event)" />
+                            <CreateNewCityForm
+                                @on-data-saved="onCityCreated($event, data)"
+                            />
                         </template>
-                    </VnSelectCreate>
+                    </VnSelectDialog>
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-xl">
                 <div class="col">
-                    <VnSelectCreate
+                    <VnSelectDialog
                         :label="t('Province')"
                         :options="provincesOptions"
                         hide-selected
@@ -107,10 +117,10 @@ const onProvinceCreated = async () => {
                     >
                         <template #form>
                             <CreateNewProvinceForm
-                                @on-data-saved="onProvinceCreated($event)"
+                                @on-data-saved="onProvinceCreated($event, data)"
                             />
                         </template>
-                    </VnSelectCreate>
+                    </VnSelectDialog>
                 </div>
                 <div class="col">
                     <VnSelectFilter
@@ -131,7 +141,7 @@ const onProvinceCreated = async () => {
 es:
     New postcode: Nuevo código postal
     Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
-    City: Ciudad
+    City: Población
     Province: Provincia
     Country: País
     Postcode: Código postal

src/components/CreateNewProvinceForm.vue

@@ -19,8 +19,8 @@ const provinceFormData = reactive({
 
 const autonomiesOptions = ref([]);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
 };
 </script>
 

src/components/CrudModel.vue

@@ -225,15 +225,19 @@ function getDifferences(obj1, obj2) {
     delete obj2.$index;
 
     for (let key in obj1) {
-        if (obj2[key] && obj1[key] !== obj2[key]) {
+        if (obj2[key] && JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])) {
             diff[key] = obj2[key];
         }
     }
     for (let key in obj2) {
-        if (obj1[key] === undefined || obj1[key] !== obj2[key]) {
+        if (
+            obj1[key] === undefined ||
+            JSON.stringify(obj1[key]) !== JSON.stringify(obj2[key])
+        ) {
             diff[key] = obj2[key];
         }
     }
+
     return diff;
 }
 

src/components/EditPictureForm.vue

@@ -0,0 +1,363 @@
+<script setup>
+import { reactive, computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import Croppie from 'croppie/croppie';
+import 'croppie/croppie.css';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+
+const emit = defineEmits(['closeForm', 'onPhotoUploaded']);
+
+const props = defineProps({
+    id: {
+        type: String,
+        default: '',
+    },
+    collection: {
+        type: String,
+        default: '',
+    },
+});
+
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const uploadMethodsOptions = [
+    { label: t('Select from computer'), value: 'computer' },
+    { label: t('Import from external URL'), value: 'URL' },
+];
+
+const viewportTypes = [
+    {
+        code: 'normal',
+        description: t('Normal'),
+        viewport: {
+            width: 400,
+            height: 400,
+        },
+        output: {
+            width: 1200,
+            height: 1200,
+        },
+    },
+    {
+        code: 'panoramic',
+        description: t('Panoramic'),
+        viewport: {
+            width: 675,
+            height: 450,
+        },
+        output: {
+            width: 1350,
+            height: 900,
+        },
+    },
+    {
+        code: 'vertical',
+        description: t('Vertical'),
+        viewport: {
+            width: 306.66,
+            height: 533.33,
+        },
+        output: {
+            width: 460,
+            height: 800,
+        },
+    },
+];
+
+const uploadMethodSelected = ref('computer');
+const viewPortTypeSelected = ref(viewportTypes[0]);
+const inputFileRef = ref(null);
+const allowedContentTypes = ref('');
+const photoContainerRef = ref(null);
+const editor = ref(null);
+const newPhoto = reactive({
+    id: props.id,
+    collection: props.collection,
+    file: null,
+    url: null,
+    blob: null,
+});
+
+const openInputFile = () => {
+    inputFileRef.value.pickFiles();
+};
+
+const displayEditor = () => {
+    const viewportType = viewPortTypeSelected.value;
+    const viewport = viewportType.viewport;
+    const boundaryWidth = viewport.width + 200;
+    const boundaryHeight = viewport.height + 200;
+
+    if (editor.value) editor.value.destroy();
+    editor.value = new Croppie(photoContainerRef.value, {
+        viewport: { width: viewport.width, height: viewport.height },
+        boundary: { width: boundaryWidth, height: boundaryHeight },
+        enableOrientation: true,
+        showZoomer: true,
+    });
+};
+
+const viewportSelection = computed({
+    get() {
+        return viewPortTypeSelected.value;
+    },
+    set(val) {
+        viewPortTypeSelected.value = val;
+
+        const hasFile = newPhoto.files || newPhoto.url;
+        if (!val || !hasFile) return;
+
+        let file;
+        if (uploadMethodSelected.value == 'computer') file = newPhoto.files;
+        else if (uploadMethodSelected.value == 'URL') file = newPhoto.url;
+
+        updatePhotoPreview(file);
+    },
+});
+
+const updatePhotoPreview = (value) => {
+    if (value) {
+        displayEditor();
+        if (uploadMethodSelected.value == 'computer') {
+            newPhoto.files = value;
+            const reader = new FileReader();
+            reader.onload = (e) => editor.value.bind({ url: e.target.result });
+            reader.readAsDataURL(value);
+        } else if (uploadMethodSelected.value == 'URL') {
+            newPhoto.url = value;
+            const img = new Image();
+            img.crossOrigin = 'Anonymous';
+            img.src = value;
+            img.onload = () => editor.value.bind({ url: value });
+            img.onerror = () => {
+                notify(
+                    t("This photo provider doesn't allow remote downloads"),
+                    'negative'
+                );
+            };
+        }
+    }
+};
+
+const rotateLeft = () => {
+    editor.value.rotate(90);
+};
+
+const rotateRight = () => {
+    editor.value.rotate(-90);
+};
+
+const onUploadAccept = () => {
+    try {
+        if (!newPhoto.files && !newPhoto.url) {
+            notify(t('Select an image'), 'negative');
+            return;
+        }
+
+        const options = {
+            type: 'blob',
+        };
+
+        editor.value
+            .result(options)
+            .then((result) => {
+                const file = new File([result], newPhoto.files?.name || '');
+                newPhoto.blob = file;
+            })
+            .then(() => makeRequest());
+    } catch (err) {
+        console.error('Error uploading image');
+    }
+};
+
+const makeRequest = async () => {
+    const formData = new FormData();
+    const now = Date.vnNew();
+    const timestamp = now.getTime();
+    const fileName = `${newPhoto.files?.name}_${timestamp}`;
+    formData.append('blob', newPhoto.blob, fileName);
+
+    await axios.post('Images/upload', formData, {
+        params: newPhoto,
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+    });
+
+    emit('closeForm');
+    emit('onPhotoUploaded');
+
+    notify(t('globals.dataSaved'), 'positive');
+};
+</script>
+
+<template>
+    <FetchData
+        ref="allowTypesRef"
+        url="ImageContainers/allowedContentTypes"
+        @on-fetch="(data) => (allowedContentTypes = data.join(', '))"
+        auto-load
+    />
+    <QForm @submit="onUploadAccept()" class="all-pointer-events">
+        <QCard class="q-pa-lg">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">{{ t('Edit photo') }}</h1>
+            <div class="row q-gutter-lg">
+                <div
+                    v-show="newPhoto.files || newPhoto.url"
+                    class="row q-gutter-lg items-center"
+                >
+                    <QIcon
+                        name="rotate_left"
+                        size="sm"
+                        color="primary"
+                        class="cursor-pointer"
+                        @click="rotateLeft()"
+                    >
+                        <!-- <QTooltip class="no-pointer-events">
+                            {{ t('Rotate left') }}
+                        </QTooltip> -->
+                    </QIcon>
+                    <div>
+                        <div ref="photoContainerRef" />
+                    </div>
+                    <QIcon
+                        name="rotate_right"
+                        size="sm"
+                        color="primary"
+                        class="cursor-pointer"
+                        @click="rotateRight()"
+                    >
+                        <!-- <QTooltip class="no-pointer-events">
+                            {{ t('Rotate right') }}
+                        </QTooltip> -->
+                    </QIcon>
+                </div>
+
+                <div class="column">
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QOptionGroup
+                                :options="uploadMethodsOptions"
+                                type="radio"
+                                v-model="uploadMethodSelected"
+                            />
+                        </div>
+                    </VnRow>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QFile
+                                v-if="uploadMethodSelected === 'computer'"
+                                ref="inputFileRef"
+                                :label="t('File')"
+                                :multiple="false"
+                                v-model="newPhoto.files"
+                                @update:model-value="updatePhotoPreview($event)"
+                                :accept="allowedContentTypes"
+                                class="required cursor-pointer"
+                            >
+                                <template #append>
+                                    <QIcon
+                                        name="vn:attach"
+                                        class="cursor-pointer q-mr-sm"
+                                        @click="openInputFile()"
+                                    >
+                                        <!-- <QTooltip>{{ t('Select a file') }}</QTooltip> -->
+                                    </QIcon>
+                                    <QIcon name="info" class="cursor-pointer">
+                                        <QTooltip>{{
+                                            t(
+                                                'components.editPictureForm.allowedFilesText',
+                                                {
+                                                    allowedContentTypes:
+                                                        allowedContentTypes,
+                                                }
+                                            )
+                                        }}</QTooltip>
+                                    </QIcon>
+                                </template>
+                            </QFile>
+                            <VnInput
+                                v-if="uploadMethodSelected === 'URL'"
+                                v-model="newPhoto.url"
+                                @update:model-value="updatePhotoPreview($event)"
+                                placeholder="https://"
+                            />
+                        </div>
+                    </VnRow>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnSelectFilter
+                                :label="t('Orientation')"
+                                :options="viewportTypes"
+                                hide-selected
+                                option-label="description"
+                                v-model="viewportSelection"
+                            />
+                        </div>
+                    </VnRow>
+                    <div class="q-mt-lg row justify-end">
+                        <QBtn
+                            :label="t('globals.save')"
+                            type="submit"
+                            color="primary"
+                            :disabled="isLoading"
+                            :loading="isLoading"
+                        />
+                        <QBtn
+                            :label="t('globals.cancel')"
+                            type="reset"
+                            color="primary"
+                            flat
+                            class="q-ml-sm"
+                            :disabled="isLoading"
+                            :loading="isLoading"
+                            v-close-popup
+                        />
+                    </div>
+                </div>
+            </div>
+        </QCard>
+    </QForm>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>
+
+<i18n>
+es:
+    Edit photo: Editar foto
+    Select from computer: Seleccionar desde ordenador
+    Import from external URL: Importar desde URL externa
+    Vertical: Vertical
+    Normal: Normal
+    Panoramic: Panorámica
+    Orientation: Orientación
+    File: Fichero
+    This photo provider doesn't allow remote downloads: Este proveedor de fotos no permite descargas remotas
+    Rotate left: Girar a la izquierda
+    Rotate right: Girar a la derecha
+    Select an image: Selecciona una imagen
+</i18n>

src/components/EditTableCellValueForm.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { ref, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const emit = defineEmits(['onDataSaved']);
+
+const $props = defineProps({
+    rows: {
+        type: Array,
+        default: () => [],
+    },
+    fieldsOptions: {
+        type: Array,
+        default: () => [],
+    },
+    editUrl: {
+        type: String,
+        default: '',
+    },
+});
+
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const formData = reactive({
+    field: null,
+    newValue: null,
+});
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+
+const onDataSaved = () => {
+    notify('globals.dataSaved', 'positive');
+    emit('onDataSaved');
+    closeForm();
+};
+
+const submitData = async () => {
+    try {
+        isLoading.value = true;
+        const rowsToEdit = $props.rows.map((row) => ({ id: row.id, itemFk: row.itemFk }));
+        const payload = {
+            field: formData.field,
+            newValue: formData.newValue,
+            lines: rowsToEdit,
+        };
+
+        await axios.post($props.editUrl, payload);
+        onDataSaved();
+        isLoading.value = false;
+    } catch (err) {
+        console.error('Error submitting table cell edit');
+    }
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <QForm @submit="submitData()" class="all-pointer-events">
+        <QCard class="q-pa-lg">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">
+                {{
+                    t('editBuyTitle', {
+                        buysAmount: rows.length,
+                    })
+                }}
+            </h1>
+            <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>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+                <QBtn
+                    :label="t('globals.cancel')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    v-close-popup
+                />
+            </div>
+        </QCard>
+    </QForm>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>
+
+<i18n>
+    en:
+        editBuyTitle: Edit {buysAmount} buy(s)
+    es:
+        editBuyTitle: Editar {buysAmount} compra(s)
+        Field to edit: Campo a editar
+        Value: Valor
+    </i18n>

src/components/FetchData.vue

@@ -45,7 +45,7 @@ onMounted(async () => {
 async function fetch(fetchFilter = {}) {
     try {
         const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
-        if ($props.where) filter.where = $props.where;
+        if ($props.where && !fetchFilter.where) filter.where = $props.where;
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;
 
@@ -54,6 +54,7 @@ async function fetch(fetchFilter = {}) {
         });
 
         emit('onFetch', data);
+        return data;
     } catch (e) {
         //
     }

src/components/FilterItemForm.vue

@@ -0,0 +1,242 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnRow from 'components/ui/VnRow.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+
+import axios from 'axios';
+import { dashIfEmpty } from 'src/filters';
+
+const emit = defineEmits(['itemSelected']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const itemFilter = {
+    include: [
+        {
+            relation: 'producer',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'ink',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const itemFilterParams = reactive({});
+const closeButton = ref(null);
+const isLoading = ref(false);
+const producersOptions = ref([]);
+const ItemTypesOptions = ref([]);
+const InksOptions = ref([]);
+const tableRows = ref([]);
+const loading = ref(false);
+
+const tableColumns = computed(() => [
+    {
+        label: t('entry.buys.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.name'),
+        name: 'name',
+        field: 'name',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.size'),
+        name: 'size',
+        field: 'size',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.producer'),
+        name: 'producerName',
+        field: 'producer',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+
+    {
+        label: t('entry.buys.color'),
+        name: 'ink',
+        field: 'inkName',
+        align: 'left',
+    },
+]);
+
+const fetchResults = async () => {
+    try {
+        let filter = itemFilter;
+        const params = itemFilterParams;
+        const where = {};
+        for (let key in params) {
+            const value = params[key];
+            if (!value) continue;
+
+            switch (key) {
+                case 'name':
+                    where[key] = { like: `%${value}%` };
+                    break;
+                case 'producerFk':
+                case 'typeFk':
+                case 'size':
+                case 'inkFk':
+                    where[key] = value;
+            }
+        }
+        filter.where = where;
+
+        const { data } = await axios.get(`Entries/${route.params.id}/lastItemBuys`, {
+            params: { filter: JSON.stringify(filter) },
+        });
+        tableRows.value = data;
+    } catch (err) {
+        console.error('Error fetching entries items');
+    }
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+
+const selectItem = ({ id }) => {
+    emit('itemSelected', id);
+    closeForm();
+};
+</script>
+
+<template>
+    <FetchData
+        url="Producers"
+        @on-fetch="(data) => (producersOptions = data)"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+        auto-load
+    />
+    <FetchData
+        url="ItemTypes"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+        order="name"
+        @on-fetch="(data) => (ItemTypesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Inks"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+        order="name"
+        @on-fetch="(data) => (InksOptions = data)"
+        auto-load
+    />
+    <QForm @submit="fetchResults()" class="all-pointer-events">
+        <QCard class="column" style="padding: 32px; z-index: 100">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">{{ t('Filter item') }}</h1>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('entry.buys.name')"
+                        v-model="itemFilterParams.name"
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        :label="t('entry.buys.size')"
+                        v-model="itemFilterParams.size"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.buys.producer')"
+                        :options="producersOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="itemFilterParams.producerFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.buys.type')"
+                        :options="ItemTypesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="itemFilterParams.typeFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.buys.color')"
+                        :options="InksOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="itemFilterParams.inkFk"
+                    />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.search')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+            </div>
+            <QTable
+                :columns="tableColumns"
+                :rows="tableRows"
+                :pagination="{ rowsPerPage: 0 }"
+                :loading="loading"
+                :hide-header="!tableRows || !tableRows.length > 0"
+                :no-data-label="t('Enter a new search')"
+                class="q-mt-lg"
+                @row-click="(_, row) => selectItem(row)"
+            >
+                <template #body-cell-id="{ row }">
+                    <QTd auto-width @click.stop>
+                        <QBtn flat color="blue">{{ row.id }}</QBtn>
+                        <ItemDescriptorProxy :id="row.id" />
+                    </QTd>
+                </template>
+            </QTable>
+        </QCard>
+    </QForm>
+</template>
+
+<i18n>
+es:
+    Filter item: Filtrar artículo
+    Enter a new search: Introduce una nueva búsqueda
+</i18n>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>

src/components/FilterTravelForm.vue

@@ -0,0 +1,240 @@
+<script setup>
+import { ref, reactive, computed } from 'vue';
+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 TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
+
+import axios from 'axios';
+import { toDate } from 'src/filters';
+
+const emit = defineEmits(['travelSelected']);
+
+const { t } = useI18n();
+
+const travelFilter = {
+    include: [
+        {
+            relation: 'agency',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'warehouseIn',
+            scope: {
+                fields: ['name'],
+            },
+        },
+        {
+            relation: 'warehouseOut',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const travelFilterParams = reactive({});
+const closeButton = ref(null);
+const isLoading = ref(false);
+const agenciesOptions = ref([]);
+const warehousesOptions = ref([]);
+const tableRows = ref([]);
+const loading = ref(false);
+
+const tableColumns = computed(() => [
+    {
+        label: t('entry.basicData.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+    },
+    {
+        label: t('entry.basicData.warehouseOut'),
+        name: 'warehouseOutFk',
+        field: 'warehouseOutFk',
+        align: 'left',
+        format: (val) =>
+            warehousesOptions.value.find((warehouse) => warehouse.id === val).name,
+    },
+    {
+        label: t('entry.basicData.warehouseIn'),
+        name: 'warehouseInFk',
+        field: 'warehouseInFk',
+        align: 'left',
+        format: (val) =>
+            warehousesOptions.value.find((warehouse) => warehouse.id === val).name,
+    },
+    {
+        label: t('entry.basicData.shipped'),
+        name: 'shipped',
+        field: 'shipped',
+        align: 'left',
+        format: (val) => toDate(val),
+    },
+    {
+        label: t('entry.basicData.landed'),
+        name: 'landed',
+        field: 'landed',
+        align: 'left',
+        format: (val) => toDate(val),
+    },
+]);
+
+const fetchResults = async () => {
+    try {
+        let filter = travelFilter;
+        const params = travelFilterParams;
+        const where = {};
+        for (let key in params) {
+            const value = params[key];
+            if (!value) continue;
+
+            switch (key) {
+                case 'agencyModeFk':
+                case 'warehouseInFk':
+                case 'warehouseOutFk':
+                case 'shipped':
+                case 'landed':
+                    where[key] = value;
+            }
+        }
+
+        filter.where = where;
+        const { data } = await axios.get('Travels', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        tableRows.value = data;
+    } catch (err) {
+        console.error('Error fetching travels');
+    }
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+
+const selectTravel = ({ id }) => {
+    emit('travelSelected', id);
+    closeForm();
+};
+</script>
+
+<template>
+    <FetchData
+        url="AgencyModes"
+        @on-fetch="(data) => (agenciesOptions = data)"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+        auto-load
+    />
+    <FetchData
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'] }"
+        order="name"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <QForm @submit="fetchResults()" class="all-pointer-events">
+        <QCard class="column" style="padding: 32px; z-index: 100">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">{{ t('Filter travels') }}</h1>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.agency')"
+                        :options="agenciesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="travelFilterParams.agencyModeFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.warehouseOut')"
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="travelFilterParams.warehouseOutFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.warehouseIn')"
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="travelFilterParams.warehouseInFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnInputDate
+                        :label="t('entry.basicData.shipped')"
+                        v-model="travelFilterParams.shipped"
+                    />
+                </div>
+                <div class="col">
+                    <VnInputDate
+                        :label="t('entry.basicData.landed')"
+                        v-model="travelFilterParams.landed"
+                    />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.search')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+            </div>
+            <QTable
+                :columns="tableColumns"
+                :rows="tableRows"
+                :pagination="{ rowsPerPage: 0 }"
+                :loading="loading"
+                :hide-header="!tableRows || !tableRows.length > 0"
+                :no-data-label="t('Enter a new search')"
+                class="q-mt-lg"
+                @row-click="(_, row) => selectTravel(row)"
+            >
+                <template #body-cell-id="{ row }">
+                    <QTd auto-width @click.stop>
+                        <QBtn flat color="blue">{{ row.id }}</QBtn>
+                        <TravelDescriptorProxy :id="row.id" />
+                    </QTd>
+                </template>
+            </QTable>
+        </QCard>
+    </QForm>
+</template>
+
+<i18n>
+es:
+    Filter travels: Filtro envíos
+    Enter a new search: Introduce una nueva búsqueda
+</i18n>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>

src/components/FormModel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
+import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
@@ -67,7 +67,13 @@ defineExpose({
     save,
 });
 
+const componentIsRendered = ref(false);
+
 onMounted(async () => {
+    nextTick(() => {
+        componentIsRendered.value = true;
+    });
+
     // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
     if ($props.formInitialData && !$props.autoLoad) {
         state.set($props.model, $props.formInitialData);
@@ -75,9 +81,12 @@ onMounted(async () => {
         await fetch();
     }
 
-    // Disparamos el watcher del form después de que se haya cargado la data inicial, si así se desea
+    // Si así se desea disparamos el watcher del form después de 100ms, asi darle tiempo de que se haya cargado la data inicial
+    // para evitar que detecte cambios cuando es data inicial default
     if ($props.observeFormChanges) {
-        startFormWatcher();
+        setTimeout(() => {
+            startFormWatcher();
+        }, 100);
     }
 });
 
@@ -128,13 +137,14 @@ async function save() {
 
     try {
         const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
+        let response;
         if ($props.urlCreate) {
-            await axios.post($props.urlCreate, body);
+            response = await axios.post($props.urlCreate, body);
             notify('globals.dataCreated', 'positive');
         } else {
-            await axios.patch($props.urlUpdate || $props.url, body);
+            response = await axios.patch($props.urlUpdate || $props.url, body);
         }
-        emit('onDataSaved', formData.value);
+        emit('onDataSaved', formData.value, response?.data);
         originalData.value = JSON.parse(JSON.stringify(formData.value));
         hasChanges.value = false;
     } catch (err) {
@@ -176,13 +186,6 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner
-        v-if="$props.observeFormChanges && hasChanges"
-        class="text-white bg-warning full-width"
-    >
-        <QIcon name="warning" size="md" class="q-mr-md" />
-        <span>{{ t('globals.changesToSave') }}</span>
-    </QBanner>
     <div class="column items-center full-width">
         <QForm
             v-if="formData"
@@ -201,7 +204,10 @@ watch(formUrl, async () => {
             </QCard>
         </QForm>
     </div>
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+    <Teleport
+        to="#st-actions"
+        v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
+    >
         <div v-if="$props.defaultActions">
             <QBtnGroup push class="q-gutter-x-sm">
                 <slot name="moreActions" />

src/components/FormModelPopup.vue

@@ -42,8 +42,8 @@ const { t } = useI18n();
 const closeButton = ref(null);
 const isLoading = ref(false);
 
-const onDataSaved = () => {
-    emit('onDataSaved');
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
     closeForm();
 };
 
@@ -59,7 +59,7 @@ const closeForm = () => {
         :default-actions="false"
         :url-create="urlCreate"
         :model="model"
-        @on-data-saved="onDataSaved()"
+        @on-data-saved="onDataSaved($event)"
     >
         <template #form="{ data, validate }">
             <span ref="closeButton" class="close-icon" v-close-popup>

src/components/RegularizeStockForm.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FormModelPopup from './FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const props = defineProps({
+    itemFk: {
+        type: Number,
+        default: null,
+    },
+    warehouseFk: {
+        type: Boolean,
+        default: null,
+    },
+});
+
+const { t } = useI18n();
+
+const regularizeFormData = reactive({
+    itemFk: props.itemFk,
+    warehouseFk: props.warehouseFk,
+    quantity: null,
+});
+
+const warehousesOptions = ref([]);
+
+const onDataSaved = (data) => {
+    emit('onDataSaved', data);
+};
+</script>
+
+<template>
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <FormModelPopup
+        url-create="Items/regularize"
+        model="Items"
+        :title="t('Regularize stock')"
+        :form-initial-data="regularizeFormData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Type the visible quantity')"
+                        v-model.number="data.quantity"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Warehouse')"
+                        v-model="data.warehouseFk"
+                        :options="warehousesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Warehouse: Almacén
+    Type the visible quantity: Introduce la cantidad visible
+    Regularize stock: Regularizar stock
+</i18n>

src/components/UserPanel.vue

@@ -1,19 +1,19 @@
 <script setup>
 import { onMounted, computed } from 'vue';
-import { Dark, Quasar, useQuasar } from 'quasar';
+import { Dark, Quasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
-import { localeEquivalence } from "src/i18n/index";
+import { localeEquivalence } from 'src/i18n/index';
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
-const quasar = useQuasar();
-
+import { useClipboard } from 'src/composables/useClipboard';
+const { copyText } = useClipboard();
 const userLocale = computed({
     get() {
         return locale.value;
@@ -21,14 +21,14 @@ const userLocale = computed({
     set(value) {
         locale.value = value;
 
-        value = localeEquivalence[value] ?? value
+        value = localeEquivalence[value] ?? value;
 
         try {
             /* @vite-ignore */
             import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
                 Quasar.lang.set(lang.default);
             });
-       } catch (error) {
+        } catch (error) {
             //
         }
     },
@@ -81,12 +81,8 @@ function logout() {
     router.push('/login');
 }
 
-function copyUserToken(){
-    navigator.clipboard.writeText(session.getToken());
-    quasar.notify({
-        type: 'positive',
-        message: t('components.userPanel.copyToken'),
-    });
+function copyUserToken() {
+    copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
 }
 </script>
 
@@ -129,8 +125,12 @@ function copyUserToken(){
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>
-                <div class="text-subtitle3 text-grey-7 q-mb-xs copyUserToken" @click="copyUserToken()" >@{{ user.name }}
-            </div>
+                <div
+                    class="text-subtitle3 text-grey-7 q-mb-xs copyText"
+                    @click="copyUserToken()"
+                >
+                    @{{ user.name }}
+                </div>
 
                 <QBtn
                     id="logout"
@@ -152,9 +152,9 @@ function copyUserToken(){
     width: 150px;
 }
 
-.copyUserToken {
-   &:hover{
-    cursor: alias;
-   }
+.copyText {
+    &:hover {
+        cursor: alias;
+    }
 }
 </style>

src/components/common/TableVisibleColumns.vue

@@ -41,7 +41,7 @@ const setUserConfigViewData = (data) => {
     // Importante: El name de las columnas de la tabla debe conincidir con el name de las variables que devuelve la view config
     formattedCols.value = $props.allColumns.map((col) => ({
         name: col,
-        active: data[col],
+        active: data[col] == undefined ? true : data[col],
     }));
     emitSavedConfig();
 };

src/components/common/VnInput.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 
-const emit = defineEmits(['update:modelValue', 'update:options']);
+const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
 
 const $props = defineProps({
     modelValue: {
@@ -32,6 +32,10 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
+
+const onEnterPress = () => {
+    emit('keyup.enter');
+};
 </script>
 
 <template>
@@ -41,6 +45,7 @@ const styleAttrs = computed(() => {
         v-bind="{ ...$attrs, ...styleAttrs }"
         type="text"
         :class="{ required: $attrs.required }"
+        @keyup.enter="onEnterPress()"
     >
         <template v-if="$slots.prepend" #prepend>
             <slot name="prepend" />

src/components/common/VnInputTime.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { toHour } from 'src/filters';
+import { useI18n } from 'vue-i18n';
+import isValidDate from 'filters/isValidDate';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: null,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+});
+const { t } = useI18n();
+const emit = defineEmits(['update:modelValue']);
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        const [hours, minutes] = value.split(':');
+        const date = new Date();
+        date.setUTCHours(
+            Number.parseInt(hours) || 0,
+            Number.parseInt(minutes) || 0,
+            0,
+            0
+        );
+        emit('update:modelValue', value ? date.toISOString() : null);
+    },
+});
+
+const onDateUpdate = (date) => {
+    internalValue.value = date;
+};
+
+const save = () => {
+    value.value = internalValue.value;
+};
+const formatTime = (dateString) => {
+    if (!isValidDate(dateString)) {
+        return '';
+    }
+
+    const date = new Date(dateString || '');
+    return date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+};
+
+const internalValue = ref(formatTime(value));
+
+const styleAttrs = computed(() => {
+    return props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+</script>
+
+<template>
+    <QInput
+        class="vn-input-time"
+        rounded
+        readonly
+        :model-value="toHour(value)"
+        v-bind="{ ...$attrs, ...styleAttrs }"
+    >
+        <template #append>
+            <QIcon name="event" class="cursor-pointer">
+                <QPopupProxy
+                    cover
+                    transition-show="scale"
+                    transition-hide="scale"
+                    :no-parent-event="props.readonly"
+                >
+                    <QTime
+                        :format24h="false"
+                        :model-value="formatTime(value)"
+                        @update:model-value="onDateUpdate"
+                    >
+                        <div class="row items-center justify-end q-gutter-sm">
+                            <QBtn
+                                :label="t('Cancel')"
+                                color="primary"
+                                flat
+                                v-close-popup
+                            />
+                            <QBtn
+                                label="Ok"
+                                color="primary"
+                                flat
+                                @click="save"
+                                v-close-popup
+                            />
+                        </div>
+                    </QTime>
+                </QPopupProxy>
+            </QIcon>
+        </template>
+    </QInput>
+</template>
+
+<style lang="scss">
+.vn-input-time.q-field--standard.q-field--readonly .q-field__control:before {
+    border-bottom-style: solid;
+}
+
+.vn-input-time.q-field--outlined.q-field--readonly .q-field__control:before {
+    border-style: solid;
+}
+</style>
+
+<i18n>
+es:
+    Cancel: Cancelar
+</i18n>

src/components/common/VnLocation.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
+import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnSelectDialog from 'components/common/VnSelectDialog.vue';
+import FetchData from 'components/FetchData.vue';
+const emit = defineEmits(['update:modelValue', 'update:options']);
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const postcodesOptions = ref([]);
+const postcodesRef = ref(null);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    optionLabel: {
+        type: String,
+        default: '',
+    },
+    optionValue: {
+        type: String,
+        default: '',
+    },
+    filterOptions: {
+        type: Array,
+        default: () => [],
+    },
+    isClearable: {
+        type: Boolean,
+        default: true,
+    },
+    defaultFilter: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const { options } = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = ref([]);
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+onMounted(() => {
+    locationFilter($props.modelValue);
+});
+
+function setOptions(data) {
+    myOptions.value = JSON.parse(JSON.stringify(data));
+    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
+}
+setOptions(options.value);
+
+watch(options, (newValue) => {
+    setOptions(newValue);
+});
+
+function showLabel(data) {
+    return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
+}
+
+function locationFilter(search = '') {
+    if (
+        search &&
+        (search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
+    )
+        return;
+    let where = { search };
+    postcodesRef.value.fetch({ filter: { where }, limit: 30 });
+}
+
+function handleFetch(data) {
+    postcodesOptions.value = data;
+}
+</script>
+<template>
+    <FetchData
+        ref="postcodesRef"
+        url="Postcodes/filter"
+        @on-fetch="(data) => handleFetch(data)"
+    />
+    <VnSelectDialog
+        v-if="postcodesRef"
+        :option-label="(opt) => showLabel(opt) ?? 'code'"
+        :option-value="(opt) => opt.code"
+        v-model="value"
+        :options="postcodesOptions"
+        :label="t('Location')"
+        :placeholder="t('search_by_postalcode')"
+        @input-value="locationFilter"
+        :default-filter="true"
+        :input-debounce="300"
+        :class="{ required: $attrs.required }"
+        v-bind="$attrs"
+        emit-value
+        map-options
+        use-input
+        clearable
+        hide-selected
+        fill-input
+    >
+        <template #form>
+            <CreateNewPostcode @on-data-saved="locationFilter()" />
+        </template>
+        <template #option="{ itemProps, opt }">
+            <QItem v-bind="itemProps">
+                <QItemSection v-if="opt">
+                    <QItemLabel>{{ opt.code }}</QItemLabel>
+                    <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnSelectDialog>
+</template>
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
+<i18n>
+en:
+    search_by_postalcode: Search by postalcode, town, province or country
+es:
+    Location: Ubicación
+    search_by_postalcode: Buscar por código postal, ciudad o país
+</i18n>

src/components/common/VnLog.vue

@@ -664,6 +664,7 @@ setLogTree();
                         :label="t('globals.entity')"
                         v-model="selectedFilters.changedModel"
                         option-label="locale"
+                        option-value="value"
                         :options="actions"
                         @update:model-value="selectFilter('action')"
                         hide-selected

src/components/common/VnLogFilter.vue

@@ -38,28 +38,26 @@ const workers = ref();
                 minimal
             >
             </QDate>
-            <QList dense>
-                <QSeparator />
-                <QItem>
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <QSelect
-                            :label="t('User')"
-                            v-model="params.userFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QSeparator />
+            <QItem>
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <QSelect
+                        :label="t('User')"
+                        v-model="params.userFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>

src/components/common/VnSelectDialog.vue

@@ -20,6 +20,10 @@ const $props = defineProps({
         type: Array,
         default: () => ['developer'],
     },
+    actionIcon: {
+        type: String,
+        default: 'add',
+    },
 });
 
 const role = useRole();
@@ -48,9 +52,9 @@ const toggleForm = () => {
         <template v-if="isAllowedToCreate" #append>
             <QIcon
                 @click.stop.prevent="toggleForm()"
-                name="add"
-                size="xs"
-                class="add-icon"
+                :name="actionIcon"
+                :size="actionIcon === 'add' ? 'xs' : 'sm'"
+                :class="['default-icon', { '--add-icon': actionIcon === 'add' }]"
             />
             <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
                 <slot name="form" />
@@ -63,9 +67,14 @@ const toggleForm = () => {
 </template>
 
 <style lang="scss" scoped>
-.add-icon {
+.default-icon {
     cursor: pointer;
-    background-color: $primary;
+    color: $primary;
     border-radius: 50px;
+
+    &.--add-icon {
+        color: var(--vn-text);
+        background-color: $primary;
+    }
 }
 </style>

src/components/common/VnSelectFilter.vue

@@ -1,4 +1,6 @@
 <script setup>
+import FetchData from 'src/components/FetchData.vue';
+import { onMounted } from 'vue';
 import { ref, toRefs, computed, watch } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
@@ -12,11 +14,19 @@ const $props = defineProps({
         default: () => [],
     },
     optionLabel: {
+        type: [String],
+        default: '',
+    },
+    optionValue: {
+        type: String,
+        default: '',
+    },
+    url: {
         type: String,
         default: '',
     },
     filterOptions: {
-        type: Array,
+        type: [Array],
         default: () => [],
     },
     isClearable: {
@@ -27,12 +37,29 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    fields: {
+        type: Array,
+        default: null,
+    },
+    where: {
+        type: Object,
+        default: null,
+    },
+    sortBy: {
+        type: String,
+        default: null,
+    },
+    limit: {
+        type: Number,
+        default: 30,
+    },
 });
 
-const { optionLabel, options } = toRefs($props);
+const { optionLabel, optionValue, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
+const dataRef = ref();
 
 const value = computed({
     get() {
@@ -47,8 +74,12 @@ function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
-setOptions(options.value);
-const filter = (val, options) => {
+onMounted(() => {
+    setOptions(options.value);
+    if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
+});
+
+async function filter(val, options) {
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
@@ -66,13 +97,29 @@ const filter = (val, options) => {
 
         return id == search || optionLabel.includes(search);
     });
-};
+}
 
-const filterHandler = (val, update) => {
+async function fetchFilter(val) {
+    if (!$props.url || !dataRef.value) return;
+
+    const { fields, sortBy, limit } = $props;
+    let key = optionLabel.value;
+
+    if (new RegExp(/\d/g).test(val)) key = optionValue.value;
+
+    const where = { [key]: { like: `%${val}%` } };
+    return dataRef.value.fetch({ fields, where, order: sortBy, limit });
+}
+
+async function filterHandler(val, update) {
     update(
-        () => {
-            if ($props.defaultFilter)
-                myOptions.value = filter(val, myOptionsOriginal.value);
+        async () => {
+            if (!$props.defaultFilter) return;
+            if ($props.url) {
+                myOptions.value = await fetchFilter(val);
+                return;
+            }
+            myOptions.value = await filter(val, myOptionsOriginal.value);
         },
         (ref) => {
             if (val !== '' && ref.options.length > 0) {
@@ -81,18 +128,33 @@ const filterHandler = (val, update) => {
             }
         }
     );
-};
+}
 
 watch(options, (newValue) => {
     setOptions(newValue);
 });
+
+watch(modelValue, (newValue) => {
+    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
+        fetchFilter(newValue);
+});
 </script>
 
 <template>
+    <FetchData
+        ref="dataRef"
+        :url="$props.url"
+        @on-fetch="(data) => setOptions(data)"
+        :where="where || { [optionValue]: value }"
+        :limit="limit"
+        :order-by="orderBy"
+        :fields="fields"
+    />
     <QSelect
         v-model="value"
         :options="myOptions"
         :option-label="optionLabel"
+        :option-value="optionValue"
         v-bind="$attrs"
         emit-value
         map-options
@@ -116,3 +178,9 @@ watch(options, (newValue) => {
         </template>
     </QSelect>
 </template>
+
+<style scoped lang="scss">
+.q-field--outlined {
+    max-width: 100%;
+}
+</style>

src/components/ui/CardDescriptor.vue

@@ -49,7 +49,6 @@ onMounted(async () => {
         () => $props.url,
         async (newUrl, lastUrl) => {
             if (newUrl == lastUrl) return;
-            entity.value = null;
             await getData();
         }
     );
@@ -62,7 +61,6 @@ async function getData() {
         skip: 0,
     });
     const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    entity.value = data;
     emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
@@ -81,6 +79,7 @@ function viewSummary(id) {
     <div class="descriptor">
         <template v-if="entity">
             <div class="header bg-primary q-pa-sm justify-between">
+                <slot name="header-extra-action" />
                 <QBtn
                     @click.stop="viewSummary(entity.id)"
                     round
@@ -118,7 +117,7 @@ function viewSummary(id) {
                     icon="more_vert"
                     round
                     size="md"
-                    v-if="slots.menu"
+                    :class="{ invisible: !slots.menu }"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}

src/components/ui/CardList.vue

@@ -9,6 +9,7 @@ const $props = defineProps({
     isSelected: { type: Boolean, default: false },
     title: { type: String, default: null },
     showCheckbox: { type: Boolean, default: false },
+    hasInfoIcons: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['toggleCardCheck']);
@@ -39,6 +40,9 @@ const toggleCardCheck = (item) => {
                 </div>
             </slot>
             <div class="card-list-body">
+                <div v-if="hasInfoIcons" class="column q-mr-md q-gutter-y-xs">
+                    <slot name="info-icons" />
+                </div>
                 <div class="list-items row flex-wrap-wrap">
                     <slot name="list-items" />
                 </div>

src/components/ui/VnFilterPanel.vue

@@ -220,7 +220,9 @@ function formatValue(value) {
             </QItem>
             <QSeparator />
         </QList>
-        <slot name="body" :params="userParams" :search-fn="search"></slot>
+        <QList dense class="list q-gutter-y-sm q-mt-sm">
+            <slot name="body" :params="userParams" :search-fn="search"></slot>
+        </QList>
         <template v-if="props.searchButton">
             <QItem>
                 <QItemSection class="q-py-sm">
@@ -246,6 +248,12 @@ function formatValue(value) {
     />
 </template>
 
+<style scoped lang="scss">
+.list {
+    width: 256px;
+}
+</style>
+
 <i18n>
 es:
     No filters applied: No se han aplicado filtros

src/components/ui/VnLv.vue

@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { dashIfEmpty } from 'src/filters';
 
+import { useClipboard } from 'src/composables/useClipboard';
 const $props = defineProps({
     label: { type: String, default: null },
     value: {
@@ -10,8 +11,19 @@ const $props = defineProps({
     },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
+    copy: { type: Boolean, default: false },
 });
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
+
+const { copyText } = useClipboard();
+
+function copyValueText() {
+    copyText($props.value, {
+        component: {
+            copyValue: $props.value,
+        },
+    });
+}
 </script>
 <style scoped>
 .label,
@@ -48,5 +60,16 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
                 </QTooltip>
             </QIcon>
         </div>
+        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
+            <QIcon name="Content_Copy" color="primary" />
+        </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.copy {
+    &:hover {
+        cursor: pointer;
+    }
+}
+</style>

src/components/ui/VnSearchbar.vue

@@ -61,6 +61,10 @@ const props = defineProps({
         type: Function,
         default: null,
     },
+    customRouteRedirectName: {
+        type: String,
+        default: '',
+    },
 });
 
 const router = useRouter();
@@ -87,8 +91,16 @@ async function search() {
     });
     if (!props.redirect) return;
 
+    if (props.customRouteRedirectName) {
+        router.push({
+            name: props.customRouteRedirectName,
+            params: { id: searchText.value },
+        });
+        return;
+    }
+
     const { matched: matches } = route;
-    const { path } = matches[matches.length-1];
+    const { path } = matches[matches.length - 1];
     const newRoute = path.replace(':id', searchText.value);
     await router.push(newRoute);
 }

src/components/ui/VnSubToolbar.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
+
 const stateStore = useStateStore();
 
 onMounted(() => {
@@ -13,9 +14,25 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data"></div>
+    <QToolbar class="bg-vn-dark justify-end sticky">
+        <slot name="st-data">
+            <div id="st-data"></div>
+        </slot>
         <QSpace />
-        <div id="st-actions"></div>
+        <slot name="st-actions">
+            <div id="st-actions"></div>
+        </slot>
     </QToolbar>
 </template>
+<style lang="scss" scoped>
+.sticky {
+    position: sticky;
+    top: 61px;
+    z-index: 1;
+}
+@media (max-width: $breakpoint-sm) {
+    .sticky {
+        top: 90px;
+    }
+}
+</style>

src/composables/tMobile.js

@@ -4,5 +4,5 @@ import { useI18n } from 'vue-i18n';
 export function tMobile(...args) {
     const quasar = useQuasar();
     const { t } = useI18n();
-    if (!quasar.platform.is.mobile) return t(...args);
+    if (!quasar.screen.xs) return t(...args);
 }

src/composables/useClipboard.js

@@ -0,0 +1,17 @@
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+
+export function useClipboard() {
+    const quasar = useQuasar();
+    const { t } = useI18n();
+    /**
+     *
+     * @param {String} value Value to send to clipboardAPI
+     * @param {Object} {label, component} Refer to Quasar notify configuration. Label is the text to translate
+     */
+    function copyText(value, { label = 'components.VnLv.copyText', component = {} }) {
+        navigator.clipboard.writeText(value);
+        quasar.notify({ type: 'positive', message: t(label, component) });
+    }
+    return { copyText };
+}

src/composables/useState.js

@@ -25,6 +25,7 @@ export function useState() {
                 lang: user.value.lang,
                 darkMode: user.value.darkMode,
                 companyFk: user.value.companyFk,
+                warehouseFk: user.value.warehouseFk,
             };
         });
     }
@@ -37,6 +38,7 @@ export function useState() {
             lang: data.lang,
             darkMode: data.darkMode,
             companyFk: data.companyFk,
+            warehouseFk: data.warehouseFk,
         };
     }
 

src/composables/useUserConfig.js

@@ -12,6 +12,7 @@ export function useUserConfig() {
             const user = state.getUser().value;
             user.darkMode = data.darkMode;
             user.companyFk = data.companyFk;
+            user.warehouseFk = data.warehouseFk;
             state.setUser(user);
 
             return data;

src/css/app.scss

@@ -17,9 +17,9 @@ a {
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
-    color:  var(--vn-text) ;
+    color: var(--vn-text);
     font-family: $typography-font-family;
-    -webkit-text-fill-color: var(--vn-text) ;
+    -webkit-text-fill-color: var(--vn-text);
     -webkit-background-clip: text !important;
     background-clip: text !important;
 }
@@ -48,13 +48,36 @@ body.body--dark {
     background-color: var(--vn-dark);
 }
 
+.color-vn-text {
+    color: var(--vn-text);
+}
+
+.color-vn-white {
+    color: $white;
+}
+
 .vn-card {
     background-color: var(--vn-gray);
     color: var(--vn-text);
     border-radius: 8px;
 }
 
+.vn-card-list {
+    width: 100%;
+    max-width: 60em;
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';
 }
+
+input[type='number'] {
+    -moz-appearance: textfield;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}

src/filters/index.js

@@ -8,11 +8,13 @@ import toPercentage from './toPercentage';
 import toLowerCamel from './toLowerCamel';
 import dashIfEmpty from './dashIfEmpty';
 import dateRange from './dateRange';
+import toHour from './toHour';
 
 export {
     toLowerCase,
     toLowerCamel,
     toDate,
+    toHour,
     toDateString,
     toDateHour,
     toRelativeDate,

src/filters/isValidDate.js

@@ -0,0 +1,3 @@
+export default function isValidDate(date) {
+    return !isNaN(new Date(date).getTime());
+}

src/filters/toHour.js

@@ -0,0 +1,11 @@
+import isValidDate from 'filters/isValidDate';
+
+export default function toHour(date) {
+    if (!isValidDate(date)) {
+        return '--:--';
+    }
+    return (new Date(date || '')).toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}

src/i18n/en/index.js

@@ -261,12 +261,132 @@ export default {
         pageTitles: {
             entries: 'Entries',
             list: 'List',
-            createEntry: 'New entry',
             summary: 'Summary',
+            basicData: 'Basic data',
+            buys: 'Buys',
+            notes: 'Notes',
+            log: 'Log',
             create: 'Create',
+            latestBuys: 'Latest buys',
         },
         list: {
             newEntry: 'New entry',
+            landed: 'Landed',
+            invoiceNumber: 'Invoice number',
+            supplier: 'Supplier',
+            booked: 'Booked',
+            confirmed: 'Confirmed',
+            ordered: 'Ordered',
+        },
+        summary: {
+            commission: 'Commission',
+            currency: 'Currency',
+            company: 'Company',
+            reference: 'Reference',
+            invoiceNumber: 'Invoice number',
+            ordered: 'Ordered',
+            confirmed: 'Confirmed',
+            booked: 'Booked',
+            raid: 'Raid',
+            excludedFromAvailable: 'Inventory',
+            travelReference: 'Reference',
+            travelAgency: 'Agency',
+            travelShipped: 'Shipped',
+            travelWarehouseOut: 'Warehouse Out',
+            travelDelivered: 'Delivered',
+            travelLanded: 'Landed',
+            travelWarehouseIn: 'Warehouse In',
+            travelReceived: 'Received',
+            buys: 'Buys',
+            quantity: 'Quantity',
+            stickers: 'Stickers',
+            package: 'Package',
+            weight: 'Weight',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            buyingValue: 'Buying value',
+            import: 'Import',
+            pvp: 'PVP',
+            item: 'Item',
+        },
+        basicData: {
+            supplier: 'Supplier',
+            travel: 'Travel',
+            reference: 'Reference',
+            invoiceNumber: 'Invoice number',
+            company: 'Company',
+            currency: 'Currency',
+            commission: 'Commission',
+            observation: 'Observation',
+            ordered: 'Ordered',
+            confirmed: 'Confirmed',
+            booked: 'Booked',
+            raid: 'Raid',
+            excludedFromAvailable: 'Inventory',
+            agency: 'Agency',
+            warehouseOut: 'Warehouse Out',
+            warehouseIn: 'Warehouse In',
+            shipped: 'Shipped',
+            landed: 'Landed',
+            id: 'ID',
+        },
+        buys: {
+            groupingPrice: 'Grouping price',
+            packingPrice: 'Packing price',
+            reference: 'Reference',
+            observations: 'Observations',
+            item: 'Item',
+            description: 'Description',
+            size: 'Size',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            buyingValue: 'Buying value',
+            packagingFk: 'Box',
+            file: 'File',
+            name: 'Name',
+            producer: 'Producer',
+            type: 'Type',
+            color: 'Color',
+            id: 'ID',
+        },
+        notes: {
+            observationType: 'Observation type',
+            description: 'Description',
+        },
+        descriptor: {
+            agency: 'Agency',
+            landed: 'Landed',
+            warehouseOut: 'Warehouse Out',
+        },
+        latestBuys: {
+            picture: 'Picture',
+            itemFk: 'Item ID',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            quantity: 'Quantity',
+            description: 'Description',
+            size: 'Size',
+            tags: 'Tags',
+            type: 'Type',
+            intrastat: 'Intrastat',
+            origin: 'Origin',
+            weightByPiece: 'Weight/Piece',
+            isActive: 'Active',
+            family: 'Family',
+            entryFk: 'Entry',
+            buyingValue: 'Buying value',
+            freightValue: 'Freight value',
+            comissionValue: 'Commission value',
+            packageValue: 'Package value',
+            isIgnored: 'Is ignored',
+            price2: 'Grouping',
+            price3: 'Packing',
+            minPrice: 'Min',
+            ektFk: 'Ekt',
+            weight: 'Weight',
+            packagingFk: 'Package',
+            packingOut: 'Package out',
+            landing: 'Landing',
         },
     },
     ticket: {
@@ -807,6 +927,10 @@ export default {
         pageTitles: {
             routes: 'Routes',
             cmrsList: 'External CMRs list',
+            RouteList: 'List',
+            create: 'Create',
+            basicData: 'Basic Data',
+            summary: 'Summary',
         },
         cmr: {
             list: {
@@ -877,6 +1001,72 @@ export default {
         create: {
             supplierName: 'Supplier name',
         },
+        basicData: {
+            alias: 'Alias',
+            workerFk: 'Responsible',
+            isSerious: 'Verified',
+            isActive: 'Active',
+            isPayMethodChecked: 'PayMethod checked',
+            note: 'Notes',
+        },
+        fiscalData: {
+            name: 'Social name *',
+            nif: 'Tax number *',
+            account: 'Account',
+            sageTaxTypeFk: 'Sage tax type',
+            sageWithholdingFk: 'Sage withholding',
+            sageTransactionTypeFk: 'Sage transaction type',
+            supplierActivityFk: 'Supplier activity',
+            healthRegister: 'Health register',
+            street: 'Street',
+            postcode: 'Postcode',
+            city: 'City *',
+            provinceFk: 'Province',
+            country: 'Country',
+            isTrucker: 'Trucker',
+            isVies: 'Vies',
+        },
+        billingData: {
+            payMethodFk: 'Billing data',
+            payDemFk: 'Payment deadline',
+            payDay: 'Pay day',
+        },
+        accounts: {
+            iban: 'Iban',
+            bankEntity: 'Bank entity',
+            beneficiary: 'Beneficiary',
+        },
+        contacts: {
+            name: 'Name',
+            phone: 'Phone',
+            mobile: 'Mobile',
+            email: 'Email',
+            observation: 'Notes',
+        },
+        addresses: {
+            street: 'Street',
+            postcode: 'Postcode',
+            phone: 'Phone',
+            name: 'Name',
+            city: 'City',
+            province: 'Province',
+            mobile: 'Mobile',
+        },
+        agencyTerms: {
+            agencyFk: 'Agency',
+            minimumM3: 'Minimum M3',
+            packagePrice: 'Package Price',
+            kmPrice: 'Km Price',
+            m3Price: 'M3 Price',
+            routePrice: 'Route price',
+            minimumKm: 'Minimum Km',
+            addRow: 'Add row',
+        },
+        consumption: {
+            entry: 'Entry',
+            date: 'Date',
+            reference: 'Reference',
+        },
     },
     travel: {
         pageTitles: {
@@ -913,6 +1103,25 @@ export default {
             totalEntries: 'Total entries',
         },
     },
+    item: {
+        pageTitles: {
+            items: 'Items',
+            list: 'List',
+            diary: 'Diary',
+            tags: 'Tags',
+        },
+        descriptor: {
+            item: 'Item',
+            buyer: 'Buyer',
+            color: 'Color',
+            category: 'Category',
+            stems: 'Stems',
+            visible: 'Visible',
+            available: 'Available',
+            warehouseText: 'Calculated on the warehouse of { warehouseName }',
+            itemDiary: 'Item diary',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
@@ -936,5 +1145,12 @@ export default {
             addToPinned: 'Add to pinned',
             removeFromPinned: 'Remove from pinned',
         },
+        editPictureForm: {
+            allowedFilesText: 'Allowed file types: { allowedContentTypes }',
+        },
+        VnLv: {
+            copyText: '{copyValue} has been copied to the clipboard',
+        },
+        iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789',
     },
 };

src/i18n/es/index.js

@@ -261,10 +261,131 @@ export default {
             entries: 'Entradas',
             list: 'Listado',
             summary: 'Resumen',
+            basicData: 'Datos básicos',
+            buys: 'Compras',
+            notes: 'Notas',
+            log: 'Historial',
             create: 'Crear',
+            latestBuys: 'Últimas compras',
         },
         list: {
             newEntry: 'Nueva entrada',
+            landed: 'F. entrega',
+            invoiceNumber: 'Núm. factura',
+            supplier: 'Proveedor',
+            booked: 'Asentado',
+            confirmed: 'Confirmado',
+            ordered: 'Pedida',
+        },
+        summary: {
+            commission: 'Comisión',
+            currency: 'Moneda',
+            company: 'Empresa',
+            reference: 'Referencia',
+            invoiceNumber: 'Núm. factura',
+            ordered: 'Pedida',
+            confirmed: 'Confirmado',
+            booked: 'Asentado',
+            raid: 'Redada',
+            excludedFromAvailable: 'Inventario',
+            travelReference: 'Referencia',
+            travelAgency: 'Agencia',
+            travelShipped: 'F. envio',
+            travelWarehouseOut: 'Alm. salida',
+            travelDelivered: 'Enviada',
+            travelLanded: 'F. entrega',
+            travelWarehouseIn: 'Alm. entrada',
+            travelReceived: 'Recibida',
+            buys: 'Compras',
+            quantity: 'Cantidad',
+            stickers: 'Etiquetas',
+            package: 'Embalaje',
+            weight: 'Peso',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            buyingValue: 'Coste',
+            import: 'Importe',
+            pvp: 'PVP',
+            item: 'Artículo',
+        },
+        basicData: {
+            supplier: 'Proveedor',
+            travel: 'Envío',
+            reference: 'Referencia',
+            invoiceNumber: 'Núm. factura',
+            company: 'Empresa',
+            currency: 'Moneda',
+            observation: 'Observación',
+            commission: 'Comisión',
+            ordered: 'Pedida',
+            confirmed: 'Confirmado',
+            booked: 'Asentado',
+            raid: 'Redada',
+            excludedFromAvailable: 'Inventario',
+            agency: 'Agencia',
+            warehouseOut: 'Alm. salida',
+            warehouseIn: 'Alm. entrada',
+            shipped: 'F. envío',
+            landed: 'F. entrega',
+            id: 'ID',
+        },
+        buys: {
+            groupingPrice: 'Precio grouping',
+            packingPrice: 'Precio packing',
+            reference: 'Referencia',
+            observations: 'Observaciónes',
+            item: 'Artículo',
+            description: 'Descripción',
+            size: 'Medida',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            buyingValue: 'Coste',
+            packagingFk: 'Embalaje',
+            file: 'Fichero',
+            name: 'Nombre',
+            producer: 'Productor',
+            type: 'Tipo',
+            color: 'Color',
+            id: 'ID',
+        },
+        notes: {
+            observationType: 'Tipo de observación',
+            description: 'Descripción',
+        },
+        descriptor: {
+            agency: 'Agencia',
+            landed: 'F. entrega',
+            warehouseOut: 'Alm. salida',
+        },
+        latestBuys: {
+            picture: 'Foto',
+            itemFk: 'ID Artículo',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            quantity: 'Cantidad',
+            description: 'Descripción',
+            size: 'Medida',
+            tags: 'Etiquetas',
+            type: 'Tipo',
+            intrastat: 'Intrastat',
+            origin: 'Origen',
+            weightByPiece: 'Peso (gramos)/tallo',
+            isActive: 'Activo',
+            family: 'Familia',
+            entryFk: 'Entrada',
+            buyingValue: 'Coste',
+            freightValue: 'Porte',
+            comissionValue: 'Comisión',
+            packageValue: 'Embalaje',
+            isIgnored: 'Ignorado',
+            price2: 'Grouping',
+            price3: 'Packing',
+            minPrice: 'Min',
+            ektFk: 'Ekt',
+            weight: 'Peso',
+            packagingFk: 'Embalaje',
+            packingOut: 'Embalaje envíos',
+            landing: 'Llegada',
         },
     },
     ticket: {
@@ -806,6 +927,10 @@ export default {
         pageTitles: {
             routes: 'Rutas',
             cmrsList: 'Listado de CMRs externos',
+            RouteList: 'Listado',
+            create: 'Crear',
+            basicData: 'Datos básicos',
+            summary: 'Summary',
         },
         cmr: {
             list: {
@@ -876,6 +1001,72 @@ export default {
         create: {
             supplierName: 'Nombre del proveedor',
         },
+        basicData: {
+            alias: 'Alias',
+            workerFk: 'Responsable',
+            isSerious: 'Verificado',
+            isActive: 'Activo',
+            isPayMethodChecked: 'Método de pago validado',
+            note: 'Notas',
+        },
+        fiscalData: {
+            name: 'Razón social *',
+            nif: 'NIF/CIF *',
+            account: 'Cuenta',
+            sageTaxTypeFk: 'Tipo de impuesto sage',
+            sageWithholdingFk: 'Retención sage',
+            sageTransactionTypeFk: 'Tipo de transacción sage',
+            supplierActivityFk: 'Actividad proveedor',
+            healthRegister: 'Pasaporte sanitario',
+            street: 'Calle',
+            postcode: 'Código postal',
+            city: 'Población *',
+            provinceFk: 'Provincia',
+            country: 'País',
+            isTrucker: 'Transportista',
+            isVies: 'Vies',
+        },
+        billingData: {
+            payMethodFk: 'Forma de pago',
+            payDemFk: 'Plazo de pago',
+            payDay: 'Día de pago',
+        },
+        accounts: {
+            iban: 'Iban',
+            bankEntity: 'Entidad bancaria',
+            beneficiary: 'Beneficiario',
+        },
+        contacts: {
+            name: 'Nombre',
+            phone: 'Teléfono',
+            mobile: 'Móvil',
+            email: 'Email',
+            observation: 'Notas',
+        },
+        addresses: {
+            street: 'Dirección',
+            postcode: 'Código postal',
+            phone: 'Teléfono',
+            name: 'Nombre',
+            city: 'Población',
+            province: 'Provincia',
+            mobile: 'Móvil',
+        },
+        agencyTerms: {
+            agencyFk: 'Agencia',
+            minimumM3: 'M3 mínimos',
+            packagePrice: 'Precio bulto',
+            kmPrice: 'Precio Km',
+            m3Price: 'Precio M3',
+            routePrice: 'Precio ruta',
+            minimumKm: 'Km mínimos',
+            addRow: 'Añadir fila',
+        },
+        consumption: {
+            entry: 'Entrada',
+            date: 'Fecha',
+            reference: 'Referencia',
+        },
     },
     travel: {
         pageTitles: {
@@ -912,6 +1103,25 @@ export default {
             totalEntries: 'Ent. totales',
         },
     },
+    item: {
+        pageTitles: {
+            items: 'Artículos',
+            list: 'Listado',
+            diary: 'Histórico',
+            tags: 'Etiquetas',
+        },
+        descriptor: {
+            item: 'Artículo',
+            buyer: 'Comprador',
+            color: 'Color',
+            category: 'Categoría',
+            stems: 'Tallos',
+            visible: 'Visible',
+            available: 'Disponible',
+            warehouseText: 'Calculado sobre el almacén de { warehouseName }',
+            itemDiary: 'Registro de compra-venta',
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
@@ -935,5 +1145,12 @@ export default {
             addToPinned: 'Añadir a fijados',
             removeFromPinned: 'Eliminar de fijados',
         },
+        editPictureForm: {
+            allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
+        },
+        VnLv: {
+            copyText: '{copyValue} se ha copiado al portapepeles',
+        },
+        iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789',
     },
 };

src/pages/Claim/Card/ClaimAction.vue

@@ -37,6 +37,7 @@ const marker_labels = [
     { value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.summary.company') },
     { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
 ];
+const multiplicatorValue = ref();
 
 const columns = computed(() => [
     {
@@ -134,17 +135,7 @@ async function regularizeClaim() {
         message: t('globals.dataSaved'),
         type: 'positive',
     });
-    if (claim.value.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2) {
-        quasar
-            .dialog({
-                component: VnConfirm,
-                componentProps: {
-                    title: t('confirmGreuges'),
-                    message: t('confirmGreugesMessage'),
-                },
-            })
-            .onOk(async () => await onUpdateGreugeAccept());
-    }
+    await onUpdateGreugeAccept();
 }
 
 async function onUpdateGreugeAccept() {
@@ -153,9 +144,9 @@ async function onUpdateGreugeAccept() {
             filter: { where: { code: 'freightPickUp' } },
         })
     ).data.id;
-    const freightPickUpPrice = (await axios.get(`GreugeConfigs/findOne`)).data
-        .freightPickUpPrice;
-
+    const freightPickUpPrice =
+        (await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice *
+        multiplicatorValue.value;
     await axios.post(`Greuges`, {
         clientFk: claim.value.clientFk,
         description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
@@ -226,10 +217,10 @@ async function importToNewRefundTicket() {
         show-if-above
         v-if="claim"
     >
-        <QCard class="totalClaim vn-card q-my-md q-pa-sm">
+        <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
             {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
         </QCard>
-        <QCard class="vn-card q-mb-md q-pa-sm">
+        <QCard class="q-mb-md q-pa-sm no-box-shadow">
             <QItem class="justify-between">
                 <QItemLabel class="slider-container">
                     <p class="text-primary">
@@ -250,13 +241,31 @@ async function importToNewRefundTicket() {
                 </QItemLabel>
             </QItem>
         </QCard>
-        <QItemLabel class="mana q-mb-md">
-            <QCheckbox
-                v-model="claim.isChargedToMana"
-                @update:model-value="(value) => save({ isChargedToMana: value })"
+        <QCard class="q-mb-md q-pa-sm no-box-shadow" style="margin-bottom: 1em">
+            <QItemLabel class="mana q-mb-md">
+                <QCheckbox
+                    v-model="claim.isChargedToMana"
+                    @update:model-value="(value) => save({ isChargedToMana: value })"
+                />
+                <span>{{ t('mana') }}</span>
+            </QItemLabel>
+        </QCard>
+        <QCard class="q-mb-md q-pa-sm no-box-shadow" style="position: static">
+            <QInput
+                :disable="
+                    !(claim.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2)
+                "
+                :label="t('confirmGreuges')"
+                class="q-field__native text-grey-2"
+                type="number"
+                placeholder="0"
+                id="multiplicatorValue"
+                name="multiplicatorValue"
+                min="0"
+                max="50"
+                v-model="multiplicatorValue"
             />
-            <span>{{ t('mana') }}</span>
-        </QItemLabel>
+        </QCard>
     </QDrawer>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
     <CrudModel
@@ -494,4 +503,5 @@ es:
     Id item: Id artículo
     confirmGreuges: ¿Desea insertar greuges?
     confirmGreugesMessage: Insertar greuges en la ficha del cliente
+    Apply Greuges: Aplicar Greuges
 </i18n>

src/pages/Claim/Card/ClaimCard.vue

@@ -1,27 +1,13 @@
 <script setup>
 import LeftMenu from 'components/LeftMenu.vue';
-import { getUrl } from 'composables/getUrl';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
-const route = useRoute();
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: false,
-        default: null,
-    },
-});
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
 </script>
 <template>
     <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -145,7 +145,7 @@ const setData = (entity) => {
             />
             <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
             <VnLv
-                :label="t('claim.card.zone')"
+                :label="t('claimRate')"
                 :value="toPercentage(entity.client?.claimsRatio?.claimingRate)"
             />
         </template>
@@ -176,3 +176,9 @@ const setData = (entity) => {
     margin-top: 0;
 }
 </style>
+<i18n>
+    en:
+        claimRate: Claming rate
+    es:
+        claimRate: Ratio de reclamación
+</i18n>

src/pages/Claim/Card/ClaimLines.vue

@@ -4,12 +4,11 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
-import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'composables/useArrayData';
+import { toDate, toCurrency, toPercentage } from 'filters/index';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
-
-import { toDate, toCurrency, toPercentage } from 'filters/index';
 import VnDiscount from 'components/common/vnDiscount.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
 
@@ -158,23 +157,21 @@ function showImportDialog() {
 </script>
 <template>
     <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <QToolbar>
-            <div class="row q-gutter-md">
-                <div>
-                    {{ t('Amount') }}
-                    <QChip :dense="$q.screen.lt.sm">
-                        {{ toCurrency(amount) }}
-                    </QChip>
-                </div>
-                <QSeparator dark vertical />
-                <div>
-                    {{ t('Amount Claimed') }}
-                    <QChip color="positive" :dense="$q.screen.lt.sm">
-                        {{ toCurrency(amountClaimed) }}
-                    </QChip>
-                </div>
+        <div class="row q-gutter-md">
+            <div>
+                {{ t('Amount') }}
+                <QChip :dense="$q.screen.lt.sm">
+                    {{ toCurrency(amount) }}
+                </QChip>
             </div>
-        </QToolbar>
+            <QSeparator dark vertical />
+            <div>
+                {{ t('Amount Claimed') }}
+                <QChip color="positive" :dense="$q.screen.lt.sm">
+                    {{ toCurrency(amountClaimed) }}
+                </QChip>
+            </div>
+        </div>
     </Teleport>
 
     <FetchData

src/pages/Claim/ClaimFilter.vue

@@ -36,123 +36,122 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list">
-                <QItem class="q-my-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Customer ID')"
-                            v-model="params.clientFk"
-                            lazy-rules
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="xs"></QIcon> </template
-                        ></VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Client Name')"
-                            v-model="params.clientName"
-                            lazy-rules
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <VnSelectFilter
-                            :label="t('Salesperson')"
-                            v-model="params.salesPersonFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <VnSelectFilter
-                            :label="t('Attender')"
-                            v-model="params.attenderFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <VnSelectFilter
-                            :label="t('Responsible')"
-                            v-model="params.claimResponsibleFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!states">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="states">
-                        <VnSelectFilter
-                            :label="t('State')"
-                            v-model="params.claimStateFk"
-                            @update:model-value="searchFn()"
-                            :options="states"
-                            option-value="id"
-                            option-label="description"
-                            emit-value
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QExpansionItem :label="t('More options')" expand-separator>
-                    <!-- <QItem>
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Customer ID')"
+                        v-model="params.clientFk"
+                        lazy-rules
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="xs"></QIcon> </template
+                    ></VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Client Name')"
+                        v-model="params.clientName"
+                        lazy-rules
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelectFilter
+                        :label="t('Salesperson')"
+                        v-model="params.salesPersonFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelectFilter
+                        :label="t('Attender')"
+                        v-model="params.attenderFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelectFilter
+                        :label="t('Responsible')"
+                        v-model="params.claimResponsibleFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!states">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="states">
+                    <VnSelectFilter
+                        :label="t('State')"
+                        v-model="params.claimStateFk"
+                        @update:model-value="searchFn()"
+                        :options="states"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QExpansionItem :label="t('More options')" expand-separator>
+                <!-- <QItem>
                         <QItemSection>
                             <qSelect
                                 :label="t('Item')"
@@ -168,30 +167,20 @@ const states = ref();
                             />
                         </QItemSection>
                     </QItem> -->
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                v-model="params.created"
-                                :label="t('Created')"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.created"
+                            :label="t('Created')"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Claim/ClaimList.vue

@@ -71,7 +71,7 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ClaimList"
                 url="Claims/filter"
@@ -87,7 +87,7 @@ function viewSummary(id) {
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv :label="t('claim.list.customer')" @click.stop>
+                            <VnLv :label="t('claim.list.customer')">
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}
@@ -147,13 +147,6 @@ function viewSummary(id) {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search claim: Buscar reclamación

src/pages/Claim/ClaimRmaList.vue

@@ -84,7 +84,7 @@ async function remove({ id }) {
                 </QForm>
             </QCard>
         </QPageSticky>
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ClaimRmaList"
                 url="ClaimRmas"
@@ -160,7 +160,6 @@ async function remove({ id }) {
     padding-top: 156px;
 }
 
-.card-list,
 .card {
     width: 100%;
     max-width: 60em;

src/pages/Customer/Card/CustomerBillingData.vue

@@ -1,3 +1,136 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import axios from 'axios';
+
+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 VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const payMethods = ref([]);
+const bankEntitiesOptions = ref([]);
+const bankEntitiesRef = ref(null);
+
+const filter = {
+    fields: ['id', 'bic', 'name'],
+    order: 'bic ASC',
+    limit: 30,
+};
+
+const getBankEntities = () => {
+    bankEntitiesRef.value.fetch();
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Billing data</div>
+    <fetch-data @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
+    <fetch-data
+        ref="bankEntitiesRef"
+        @on-fetch="(data) => (bankEntitiesOptions = data)"
+        :filter="filter"
+        auto-load
+        url="BankEntities"
+    />
+
+    <FormModel
+        :url-update="`Clients/${route.params.id}`"
+        :url="`Clients/${route.params.id}/getCard`"
+        auto-load
+        model="customer"
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Billing data')"
+                        :options="payMethods"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.payMethod"
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        :label="t('Due day')"
+                        :rules="validate('client.socialName')"
+                        v-model="data.dueDay"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('IBAN')" v-model="data.iban">
+                        <template #append>
+                            <QIcon name="info" class="cursor-info">
+                                <QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </VnInput>
+                </div>
+                <div class="col">
+                    <VnSelectDialog
+                        :label="t('Swift / BIC')"
+                        :options="bankEntitiesOptions"
+                        :roles-allowed-to-create="['salesAssistant', 'hr']"
+                        :rules="validate('Worker.bankEntity')"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.bankEntityFk"
+                    >
+                        <template #form>
+                            <CreateBankEntityForm @on-data-saved="getBankEntities()" />
+                        </template>
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection v-if="scope.opt">
+                                    <QItemLabel
+                                        >{{ scope.opt.bic }}
+                                        {{ scope.opt.name }}</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectDialog>
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('VNL core received')"
+                        v-model="data.hasCoreVnl"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox :label="t('VNL B2B received')" v-model="data.hasSepaVnl" />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
 </template>
+
+<i18n>
+es:
+    Billing data: Forma de pago
+    Due day: Vencimiento
+    IBAN: IBAN
+    Swift / BIC: Swift / BIC
+    Received LCR: Recibido LCR
+    VNL core received: Recibido core VNL
+    VNL B2B received: Recibido B2B VNL
+</i18n>

src/pages/Customer/Card/CustomerConsignees.vue

@@ -1,3 +1,176 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const provincesLocation = ref([]);
+
+const consigneeFilter = {
+    fields: [
+        'id',
+        'isDefaultAddress',
+        'isActive',
+        'nickname',
+        'street',
+        'city',
+        'provinceFk',
+        'phone',
+        'mobile',
+        'isEqualizated',
+        'isLogifloraAllowed',
+        'postalCode',
+    ],
+    order: ['isDefaultAddress DESC', 'isActive DESC', 'nickname ASC'],
+    include: [
+        {
+            relation: 'observations',
+            scope: {
+                include: 'observationType',
+            },
+        },
+        {
+            relation: 'province',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+};
+
+const setProvince = (provinceFk) => {
+    const result = provincesLocation.value.filter(
+        (province) => province.id === provinceFk
+    );
+    return result[0]?.name || '';
+};
+
+const toCustomerConsigneeCreate = () => {
+    router.push({ name: 'CustomerConsigneeCreate' });
+};
+
+const toCustomerConsigneeEdit = (consigneeId) => {
+    router.push({
+        name: 'CustomerConsigneeEdit',
+        params: {
+            id: route.params.id,
+            consigneeId,
+        },
+    });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Consignees</div>
+    <FetchData
+        @on-fetch="(data) => (provincesLocation = data)"
+        auto-load
+        url="Provinces/location"
+    />
+
+    <QCard class="q-pa-lg">
+        <VnPaginate
+            data-key="CustomerConsignees"
+            :url="`Clients/${route.params.id}/addresses`"
+            order="id"
+            auto-load
+            :filter="consigneeFilter"
+        >
+            <template #body="{ rows }">
+                <QCard
+                    v-for="(item, index) in rows"
+                    :key="index"
+                    :class="{
+                        'consignees-card': true,
+                        'q-mb-md': index < rows.length - 1,
+                    }"
+                    @click="toCustomerConsigneeEdit(item.id)"
+                >
+                    <div class="q-ml-xs q-mr-md flex items-center">
+                        <QIcon name="star" size="md" color="primary" />
+                    </div>
+                    <div>
+                        <div class="text-weight-bold q-mb-sm">
+                            {{ item.nickname }} - #{{ item.id }}
+                        </div>
+                        <div>{{ item.street }}</div>
+                        <div>
+                            {{ item.postalCode }} - {{ item.city }},
+                            {{ setProvince(item.provinceFk) }}
+                        </div>
+                        <div class="flex">
+                            <QCheckbox
+                                :label="t('Is equalizated')"
+                                v-model="item.isEqualizated"
+                                class="q-mr-lg"
+                                disable
+                            />
+                            <QCheckbox
+                                :label="t('Is logiflora allowed')"
+                                v-model="item.isLogifloraAllowed"
+                                disable
+                            />
+                        </div>
+                    </div>
+
+                    <QSeparator
+                        class="q-mx-lg"
+                        v-if="item.observations.length"
+                        vertical
+                    />
+
+                    <div v-if="item.observations.length">
+                        <div
+                            :key="index"
+                            class="flex q-mb-sm"
+                            v-for="(observation, index) in item.observations"
+                        >
+                            <div class="text-weight-bold q-mr-sm">
+                                {{ observation.observationType.description }}:
+                            </div>
+                            <div>{{ observation.description }}</div>
+                        </div>
+                    </div>
+                </QCard>
+
+                <QPageSticky :offset="[18, 18]">
+                    <QBtn
+                        @click.stop="toCustomerConsigneeCreate()"
+                        color="primary"
+                        fab
+                        icon="add"
+                    />
+                    <QTooltip>
+                        {{ t('New consignee') }}
+                    </QTooltip>
+                </QPageSticky>
+            </template>
+        </VnPaginate>
+    </QCard>
 </template>
+
+<style lang="scss" scoped>
+.consignees-card {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+    display: flex;
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--vn-light-gray);
+    }
+}
+</style>
+
+<i18n>
+es:
+    Is equalizated: Recargo de equivalencia
+    Is logiflora allowed: Compra directa en Holanda
+    New consignee: Nuevo consignatario
+</i18n>

src/pages/Customer/Card/CustomerCredits.vue

@@ -1,3 +1,148 @@
+<script setup>
+import { ref, computed, onBeforeMount, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date, QBtn } from 'quasar';
+
+import { toCurrency, toDate } from 'src/filters';
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+const workerId = ref(0);
+
+onBeforeMount(async () => {
+    const filter = {
+        include: [
+            {
+                relation: 'worker',
+                scope: {
+                    fields: ['id'],
+                    include: { relation: 'user', scope: { fields: ['name'] } },
+                },
+            },
+        ],
+        where: { clientFk: `${route.params.id}` },
+        order: ['created DESC'],
+        limit: 20,
+    };
+    arrayData.value = useArrayData('CustomerCreditsCard', {
+        url: 'ClientCredits',
+        filter,
+    });
+    await arrayData.value.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
+
+onMounted(() => {
+    const filteredColumns = columns.value.filter(
+        (col) => col.name !== 'actions' && col.name !== 'customerStatus'
+    );
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+});
+
+const rows = computed(() => arrayData.value.store.data);
+const allColumnNames = ref([]);
+
+const tableColumnComponents = {
+    created: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    employee: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            selectWorkerId(prop.row.clientFk);
+        },
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'created',
+        label: t('Since'),
+        name: 'created',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm:ss'),
+    },
+    {
+        align: 'left',
+        field: (value) => value.worker.user.name,
+        label: t('Employee'),
+        name: 'employee',
+    },
+    {
+        align: 'left',
+        field: 'amount',
+        label: t('Credit'),
+        name: 'amount',
+        format: (value) => toCurrency(value),
+    },
+]);
+
+const selectWorkerId = (id) => {
+    workerId.value = id;
+};
+
+const toCustomerCreditCreate = () => {
+    router.push({ name: 'CustomerCreditCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Credits</div>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                            class="rounded-borders q-pa-sm"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                        >
+                            {{ props.value }}
+                            <WorkerDescriptorProxy :id="workerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerCreditCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New credit') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<i18n>
+es:
+    Since: Desde
+    Employee: Empleado
+    Credit: Credito
+    New credit: Nuevo credito
+</i18n>

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -1,3 +1,186 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+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 VnLocation from 'src/components/common/VnLocation.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const typesTaxes = ref([]);
+const typesTransactions = ref([]);
+const postcodesOptions = ref([]);
+
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postcode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
+</script>
+
 <template>
-    <div class="flex justify-center">Fiscal data</div>
+    <FetchData auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
+    <FetchData
+        auto-load
+        @on-fetch="(data) => (typesTransactions = data)"
+        url="SageTransactionTypes"
+    />
+    <FormModel
+        :url-update="`Clients/${route.params.id}/updateFiscalData`"
+        :url="`Clients/${route.params.id}/getCard`"
+        auto-load
+        model="customer"
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('Social name')"
+                        :required="true"
+                        :rules="validate('client.socialName')"
+                        v-model="data.socialName"
+                    />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Tax number')" v-model="data.fi" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Street')" v-model="data.street" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Sage tax type')"
+                        :options="typesTaxes"
+                        hide-selected
+                        option-label="vat"
+                        option-value="id"
+                        v-model="data.sageTaxTypeFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Sage transaction type')"
+                        :options="typesTransactions"
+                        hide-selected
+                        option-label="vat"
+                        option-value="id"
+                        v-model="data.sageTransactionTypeFk"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnLocation
+                        :rules="validate('Worker.postcode')"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        v-model="data.postcode"
+                        @update:model-value="(location) => handleLocation(data, location)"
+                    >
+                    </VnLocation>
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox :label="t('Active')" v-model="data.isActive" />
+                </div>
+                <div class="col">
+                    <QCheckbox :label="t('Frozen')" v-model="data.isFreezed" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
+                </div>
+                <div class="col">
+                    <QCheckbox :label="t('Vies')" v-model="data.isVies" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('Notify by email')"
+                        v-model="data.isToBeMailed"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('Invoice by address')"
+                        v-model="data.hasToInvoiceByAddress"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('Is equalizated')"
+                        v-model="data.isEqualizated"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('Verified data')"
+                        v-model="data.isTaxDataChecked"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('Incoterms authorization')"
+                        v-model="data.hasIncoterms"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('Electronic invoice')"
+                        v-model="data.hasElectronicInvoice"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
 </template>
+
+<i18n>
+es:
+    Social name: Razón social
+    Tax number: NIF / CIF
+    Street: Dirección fiscal
+    Sage tax type: Tipo de impuesto Sage
+    Sage transaction type: Tipo de transacción Sage
+    Postcode: Código postal
+    City: Población
+    Province: Provincia
+    Country: País
+    Active: Activo
+    Frozen: Congelado
+    Has to invoice: Factura
+    Vies: Vies
+    Notify by email: Notificar vía e-mail
+    Invoice by address: Facturar por consignatario
+    Is equalizated: Recargo de equivalencia
+    Verified data: Datos comprobados
+    Incoterms authorization: Autorización incoterms
+    Electronic invoice: Factura electrónica
+</i18n>

src/pages/Customer/Card/CustomerNotes.vue

@@ -1,3 +1,96 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date } from 'quasar';
+
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const noteFilter = {
+    order: 'created DESC',
+    where: {
+        clientFk: `${route.params.id}`,
+    },
+};
+
+const toCustomerNoteCreate = () => {
+    router.push({ name: 'CustomerNoteCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Notes</div>
+    <QCard class="q-pa-lg">
+        <VnPaginate
+            data-key="CustomerNotes"
+            :url="'clientObservations'"
+            auto-load
+            :filter="noteFilter"
+        >
+            <template #body="{ rows }">
+                <div v-if="rows.length">
+                    <QCard
+                        v-for="(item, index) in rows"
+                        :key="index"
+                        :class="{
+                            'q-pa-md': true,
+                            'q-rounded': true,
+                            'custom-border': true,
+                            'q-mb-md': index < rows.length - 1,
+                        }"
+                    >
+                        <div class="flex justify-between">
+                            <p class="label-color">{{ item.worker.user.nickname }}</p>
+                            <p class="label-color">
+                                {{
+                                    date.formatDate(item?.created, 'DD-MM-YYYY HH:mm:ss')
+                                }}
+                            </p>
+                        </div>
+                        <h6 class="q-mt-xs q-mb-none">{{ item.text }}</h6>
+                    </QCard>
+                </div>
+
+                <div v-else>
+                    <h5 class="flex justify-center label-color">
+                        {{ t('globals.noResults') }}
+                    </h5>
+                </div>
+
+                <QPageSticky :offset="[18, 18]">
+                    <QBtn
+                        @click.stop="toCustomerConsigneeCreate()"
+                        color="primary"
+                        fab
+                        icon="add"
+                    />
+                    <QTooltip>
+                        {{ t('New consignee') }}
+                    </QTooltip>
+                </QPageSticky>
+            </template>
+        </VnPaginate>
+    </QCard>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerNoteCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New consignee') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss">
+.custom-border {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.label-color {
+    color: var(--vn-label);
+}
+</style>

src/pages/Customer/Card/CustomerSummary.vue

@@ -81,7 +81,7 @@ const creditWarning = computed(() => {
                         <VnLinkPhone :phone-number="entity.mobile" />
                     </template>
                 </VnLv>
-                <VnLv :label="t('customer.summary.email')" :value="entity.email" />
+                <VnLv :label="t('customer.summary.email')" :value="entity.email" copy />
                 <VnLv
                     :label="t('customer.summary.salesPerson')"
                     :value="entity?.salesPersonUser?.name"

src/pages/Customer/CustomerCreate.vue

@@ -2,12 +2,11 @@
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
 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 VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
@@ -29,17 +28,17 @@ const newClientForm = reactive({
     isEqualizated: false,
 });
 
-const postcodeFetchDataRef = ref(null);
 const workersOptions = ref([]);
 const businessTypesOptions = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
-const countriesOptions = ref([]);
 const postcodesOptions = ref([]);
 
-const onPostcodeCreated = async () => {
-    postcodeFetchDataRef.value.fetch();
-};
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postcode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
@@ -48,37 +47,15 @@ const onPostcodeCreated = async () => {
         auto-load
         url="Workers/search?departmentCodes"
     />
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
     <FetchData
         @on-fetch="(data) => (businessTypesOptions = data)"
         auto-load
         url="BusinessTypes"
     />
-    <FetchData
-        @on-fetch="(data) => (citiesLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    />
     <QPage>
         <VnSubToolbar />
         <FormModel
             :form-initial-data="newClientForm"
-            :observe-form-changes="false"
             model="client"
             url-create="Clients/createWithUser"
         >
@@ -133,96 +110,19 @@ const onPostcodeCreated = async () => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectCreate
-                            v-model="data.postcode"
-                            :label="t('Postcode')"
+                        <VnLocation
                             :rules="validate('Worker.postcode')"
                             :roles-allowed-to-create="['deliveryAssistant']"
                             :options="postcodesOptions"
-                            option-label="code"
-                            option-value="code"
-                            hide-selected
+                            v-model="data.location"
+                            @update:model-value="
+                                (location) => handleLocation(data, location)
+                            "
                         >
-                            <template #form>
-                                <CustomerCreateNewPostcode
-                                    @on-data-saved="onPostcodeCreated($event)"
-                                />
-                            </template>
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection v-if="scope.opt">
-                                        <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                        <QItemLabel caption
-                                            >{{ scope.opt.code }} -
-                                            {{ scope.opt.town.name }} ({{
-                                                scope.opt.town.province.name
-                                            }},
-                                            {{
-                                                scope.opt.town.province.country.country
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectCreate>
-                    </div>
-                    <div class="col">
-                        <!-- ciudades -->
-                        <VnSelectFilter
-                            :label="t('City')"
-                            :options="citiesLocationOptions"
-                            hide-selected
-                            option-label="name"
-                            option-value="name"
-                            v-model="data.city"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            {{
-                                                `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
-                                            }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Province')"
-                            :options="provincesLocationOptions"
-                            hide-selected
-                            option-label="name"
-                            option-value="id"
-                            v-model="data.provinceFk"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{
-                                            `${scope.opt.name} (${scope.opt.country.country})`
-                                        }}</QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelectFilter>
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('Country')"
-                            :options="countriesOptions"
-                            hide-selected
-                            option-label="country"
-                            option-value="id"
-                            v-model="data.countryFk"
-                        />
+                        </VnLocation>
                     </div>
                 </VnRow>
+
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput v-model="data.userName" :label="t('Web user')" />

src/pages/Customer/CustomerFilter.vue

@@ -37,153 +37,134 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list">
-                <QItem class="q-my-sm">
+            <QItem class="q-my-sm">
+                <QItemSection>
+                    <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
+                        <template #prepend>
+                            <QIcon name="badge" size="xs" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput :label="t('Name')" v-model="params.name" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Social Name')"
+                        v-model="params.socialName"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelectFilter
+                        :label="t('Salesperson')"
+                        v-model="params.salesPersonFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!provinces">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="provinces">
+                    <VnSelectFilter
+                        :label="t('Province')"
+                        v-model="params.provinceFk"
+                        @update:model-value="searchFn()"
+                        :options="provinces"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-md">
+                <QItemSection>
+                    <VnInput :label="t('City')" v-model="params.city" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QExpansionItem :label="t('More options')" expand-separator>
+                <QItem>
                     <QItemSection>
-                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
+                        <VnInput :label="t('Phone')" v-model="params.phone" is-outlined>
                             <template #prepend>
-                                <QIcon name="badge" size="xs" />
+                                <QIcon name="phone" size="xs" />
                             </template>
                         </VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
-                        <VnInput :label="t('Name')" v-model="params.name" is-outlined />
+                        <VnInput :label="t('Email')" v-model="params.email" is-outlined>
+                            <template #prepend>
+                                <QIcon name="email" size="sm" />
+                            </template>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
+                    <QItemSection v-if="!zones">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="zones">
+                        <VnSelectFilter
+                            :label="t('Zone')"
+                            v-model="params.zoneFk"
+                            @update:model-value="searchFn()"
+                            :options="zones"
+                            option-value="id"
+                            option-label="name"
+                            emit-value
+                            map-options
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
                     <QItemSection>
                         <VnInput
-                            :label="t('Social Name')"
-                            v-model="params.socialName"
+                            :label="t('Postcode')"
+                            v-model="params.postcode"
                             is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <VnSelectFilter
-                            :label="t('Salesperson')"
-                            v-model="params.salesPersonFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!provinces">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="provinces">
-                        <VnSelectFilter
-                            :label="t('Province')"
-                            v-model="params.provinceFk"
-                            @update:model-value="searchFn()"
-                            :options="provinces"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-md">
-                    <QItemSection>
-                        <VnInput :label="t('City')" v-model="params.city" is-outlined />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QExpansionItem :label="t('More options')" expand-separator>
-                    <QItem>
-                        <QItemSection>
-                            <VnInput
-                                :label="t('Phone')"
-                                v-model="params.phone"
-                                is-outlined
-                            >
-                                <template #prepend>
-                                    <QIcon name="phone" size="xs" />
-                                </template>
-                            </VnInput>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInput
-                                :label="t('Email')"
-                                v-model="params.email"
-                                is-outlined
-                            >
-                                <template #prepend>
-                                    <QIcon name="email" size="sm" />
-                                </template>
-                            </VnInput>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection v-if="!zones">
-                            <QSkeleton type="QInput" class="full-width" />
-                        </QItemSection>
-                        <QItemSection v-if="zones">
-                            <VnSelectFilter
-                                :label="t('Zone')"
-                                v-model="params.zoneFk"
-                                @update:model-value="searchFn()"
-                                :options="zones"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                                hide-selected
-                                dense
-                                outlined
-                                rounded
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInput
-                                :label="t('Postcode')"
-                                v-model="params.postcode"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Customer/CustomerList.vue

@@ -65,7 +65,7 @@ const redirectToCreateView = () => {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 auto-load
                 data-key="CustomerList"
@@ -116,13 +116,6 @@ const redirectToCreateView = () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search customer: Buscar cliente

src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -2,7 +2,7 @@
 import { ref, computed, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import { QBtn, QCheckbox } from 'quasar';
+import { QBtn, QCheckbox, useQuasar } from 'quasar';
 
 import { toCurrency, toDate } from 'filters/index';
 import { useArrayData } from 'composables/useArrayData';
@@ -12,34 +12,20 @@ import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
 import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
+const quasar = useQuasar();
 
 const arrayData = ref(null);
 const balanceDueTotal = ref(0);
-
-onBeforeMount(async () => {
-    arrayData.value = useArrayData('CustomerDefaulter', {
-        url: 'Defaulters/filter',
-        limit: 0,
-    });
-    await arrayData.value.fetch({ append: false });
-    balanceDueTotal.value = arrayData.value.store.data.reduce(
-        (accumulator, currentValue) => {
-            return accumulator + (currentValue['amount'] || 0);
-        },
-        0
-    );
-    console.log(balanceDueTotal.value);
-    stateStore.rightDrawer = true;
-});
-
-const rows = computed(() => arrayData.value.store.data);
-
+const customerId = ref(0);
 const selected = ref([]);
 const workerId = ref(0);
-const customerId = ref(0);
+
+const rows = computed(() => arrayData.value.store.data);
 
 const tableColumnComponents = {
     client: {
@@ -49,11 +35,10 @@ const tableColumnComponents = {
     },
     isWorker: {
         component: QCheckbox,
-        props: ({ value }) => ({
+        props: ({ row }) => ({
             disable: true,
-            'model-value': Boolean(value),
+            'model-value': Boolean(row.selected),
         }),
-        event: () => {},
     },
     salesperson: {
         component: QBtn,
@@ -171,6 +156,25 @@ const columns = computed(() => [
     },
 ]);
 
+onBeforeMount(() => {
+    getArrayData();
+});
+
+const getArrayData = async () => {
+    arrayData.value = useArrayData('CustomerDefaulter', {
+        url: 'Defaulters/filter',
+        limit: 0,
+    });
+    await arrayData.value.fetch({ append: false });
+    balanceDueTotal.value = arrayData.value.store.data.reduce(
+        (accumulator, currentValue) => {
+            return accumulator + (currentValue['amount'] || 0);
+        },
+        0
+    );
+    stateStore.rightDrawer = true;
+};
+
 const selectCustomerId = (id) => {
     workerId.value = 0;
     customerId.value = id;
@@ -180,6 +184,20 @@ const selectWorkerId = (id) => {
     customerId.value = 0;
     workerId.value = id;
 };
+
+const viewAddObservation = (rowsSelected) => {
+    quasar.dialog({
+        component: CustomerDefaulterAddObservation,
+        componentProps: {
+            clients: rowsSelected,
+            promise: refreshData,
+        },
+    });
+};
+
+const refreshData = () => {
+    getArrayData();
+};
 </script>
 
 <template>
@@ -189,13 +207,19 @@ const selectWorkerId = (id) => {
         </QScrollArea>
     </QDrawer>
 
-    <QToolbar class="bg-vn-dark">
-        <div id="st-data">
+    <VnSubToolbar class="bg-vn-dark">
+        <template #st-data>
             <CustomerBalanceDueTotal :amount="balanceDueTotal" />
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
+            <div class="flex items-center q-ml-lg">
+                <QBtn
+                    color="primary"
+                    icon="vn:notes"
+                    :disabled="!selected.length"
+                    @click.stop="viewAddObservation(selected)"
+                />
+            </div>
+        </template>
+    </VnSubToolbar>
 
     <QPage class="column items-center q-pa-md">
         <QTable
@@ -204,7 +228,7 @@ const selectWorkerId = (id) => {
             :rows="rows"
             class="full-width q-mt-md"
             hide-bottom
-            row-key="id"
+            row-key="clientFk"
             selection="multiple"
             v-model:selected="selected"
         >

src/pages/Customer/Defaulter/CustomerDefaulterAddObservation.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+
+import VnRow from 'components/ui/VnRow.vue';
+
+const $props = defineProps({
+    clients: {
+        type: Array,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+});
+
+const { t } = useI18n();
+const quasar = useQuasar();
+
+const newObservation = ref(null);
+
+const onSubmit = async () => {
+    try {
+        const data = $props.clients.map((item) => {
+            return { clientFk: item.clientFk, text: newObservation.value };
+        });
+        await axios.post('ClientObservations', data);
+
+        const payload = {
+            defaulters: $props.clients,
+            observation: newObservation.value,
+        };
+        await axios.post('Defaulters/observationEmail', payload);
+
+        await $props.promise();
+
+        quasar.notify({
+            message: t('globals.dataSaved'),
+            type: 'positive',
+        });
+    } catch (error) {
+        quasar.notify({
+            message: t(`${error.message}`),
+            type: 'negative',
+        });
+    }
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef">
+        <QCard class="q-pa-md q-mb-md">
+            <QCardSection>
+                <QForm @submit="onSubmit()" class="q-pa-sm">
+                    <div>
+                        {{
+                            t('Add observation to all selected clients', {
+                                numberClients: t($props.clients.length),
+                            })
+                        }}
+                    </div>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QInput
+                                :label="t('Message')"
+                                type="textarea"
+                                v-model="newObservation"
+                            />
+                        </div>
+                    </VnRow>
+                    <div class="q-mt-lg row justify-end">
+                        <QBtn
+                            :label="t('globals.cancel')"
+                            color="primary"
+                            flat
+                            class="q-mr-md"
+                            v-close-popup
+                        />
+                        <QBtn
+                            :label="t('globals.save')"
+                            type="submit"
+                            color="primary"
+                            v-close-popup
+                        />
+                    </div>
+                </QForm>
+            </QCardSection>
+        </QCard>
+    </QDialog>
+</template>
+
+<i18n>
+    es:
+        Add observation to all selected clients: Añadir observación a { numberClients } cliente(s) seleccionado(s)
+        Message: Mensaje
+</i18n>

src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue

@@ -46,163 +46,148 @@ const authors = ref();
         </template>
 
         <template #body="{ params }">
-            <QList dense class="list">
-                <QItem class="q-mb-sm q-mt-sm">
-                    <QItemSection v-if="clients">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('Client')"
-                            :options="clients"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="name"
-                            option-value="clientTypeFk"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.clientFk"
-                        />
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton class="full-width" type="QInput" />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm q-mt-sm">
+                <QItemSection v-if="clients">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('Client')"
+                        :options="clients"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="name"
+                        option-value="clientTypeFk"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.clientFk"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton class="full-width" type="QInput" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="salespersons">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('Salesperson')"
-                            :options="salespersons"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="name"
-                            option-value="id"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.salesPersonFk"
-                        />
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton class="full-width" type="QInput" />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="salespersons">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('Salesperson')"
+                        :options="salespersons"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.salesPersonFk"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton class="full-width" type="QInput" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="countries">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('Country')"
-                            :options="countries"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="country"
-                            option-value="id"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.countryFk"
-                        />
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton class="full-width" type="QInput" />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="countries">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('Country')"
+                        :options="countries"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="country"
+                        option-value="id"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.countryFk"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton class="full-width" type="QInput" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('P. Method')"
-                            is-outlined
-                            v-model="params.paymentMethod"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('P. Method')"
+                        is-outlined
+                        v-model="params.paymentMethod"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Balance D.')"
-                            is-outlined
-                            v-model="params.balance"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Balance D.')"
+                        is-outlined
+                        v-model="params.balance"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="authors">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('Author')"
-                            :options="authors"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="name"
-                            option-value="id"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.workerFk"
-                        />
-                    </QItemSection>
-                    <QItemSection v-else>
-                        <QSkeleton class="full-width" type="QInput" />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="authors">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('Author')"
+                        :options="authors"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.workerFk"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton class="full-width" type="QInput" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('L. O. Date')"
-                            is-outlined
-                            v-model="params.date"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput :label="t('L. O. Date')" is-outlined v-model="params.date" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Credit I.')"
-                            is-outlined
-                            v-model="params.credit"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Credit I.')"
+                        is-outlined
+                        v-model="params.credit"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('From')"
-                            is-outlined
-                            v-model="params.defaulterSinced"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-            </QList>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('From')"
+                        is-outlined
+                        v-model="params.defaulterSinced"
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -9,6 +9,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
 import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
 import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
@@ -485,7 +486,6 @@ const selectCustomerId = (id) => {
 };
 
 const selectSalesPersonId = (id) => {
-    console.log('selectedSalesPersonId:: ', selectedSalesPersonId.value);
     selectedSalesPersonId.value = id;
 };
 </script>
@@ -500,9 +500,8 @@ const selectSalesPersonId = (id) => {
             />
         </QScrollArea>
     </QDrawer>
-
-    <QToolbar class="bg-vn-dark">
-        <div id="st-data">
+    <VnSubToolbar>
+        <template #st-actions>
             <TableVisibleColumns
                 :all-columns="allColumnNames"
                 table-code="clientsDetail"
@@ -511,10 +510,8 @@ const selectSalesPersonId = (id) => {
                     visibleColumns = ['customerStatus', ...$event, 'actions']
                 "
             />
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
+        </template>
+    </VnSubToolbar>
 
     <QPage class="column items-center q-pa-md">
         <QTable

src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue

@@ -145,27 +145,26 @@ const shouldRenderColumn = (colName) => {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
-                <QItem v-if="shouldRenderColumn('id')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.id')"
-                            v-model="params.id"
-                            is-outlined
-                            clearable
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('name')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.name')"
-                            v-model="params.name"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <!-- <QItem class="q-mb-sm">
+            <QItem v-if="shouldRenderColumn('id')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.id')"
+                        v-model="params.id"
+                        is-outlined
+                        clearable
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('name')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.name')"
+                        v-model="params.name"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <!-- <QItem class="q-mb-sm">
                     <QItemSection v-if="!clients">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -188,429 +187,384 @@ const shouldRenderColumn = (colName) => {
                         />
                     </QItemSection>
                 </QItem> -->
-                <QItem v-if="shouldRenderColumn('fi')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.fi')"
-                            v-model="params.fi"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('salesPersonFk')">
-                    <QItemSection v-if="!workers">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="workers">
-                        <VnSelectFilter
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.salesPersonFk'
-                                )
-                            "
-                            v-model="params.salesPersonFk"
-                            @update:model-value="searchFn()"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('credit')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.credit')"
-                            v-model="params.credit"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('creditInsurance')">
-                    <QItemSection>
-                        <VnInput
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.creditInsurance'
-                                )
-                            "
-                            v-model="params.creditInsurance"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('phone')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.phone')"
-                            v-model="params.phone"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('mobile')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.mobile')"
-                            v-model="params.mobile"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('street')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.street')"
-                            v-model="params.street"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('countryFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.countryFk')
-                            "
-                            v-model="params.countryFk"
-                            @update:model-value="searchFn()"
-                            :options="countriesOptions"
-                            option-value="id"
-                            option-label="country"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('provinceFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.provinceFk')
-                            "
-                            v-model="params.provinceFk"
-                            @update:model-value="searchFn()"
-                            :options="provincesOptions"
-                            option-value="id"
-                            option-label="name"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('city')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.city')"
-                            v-model="params.city"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('postcode')">
-                    <QItemSection>
-                        <VnInput
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.postcode')
-                            "
-                            v-model="params.postcode"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('email')">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('customer.extendedList.tableVisibleColumns.email')"
-                            v-model="params.email"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem v-if="shouldRenderColumn('fi')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.fi')"
+                        v-model="params.fi"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('salesPersonFk')">
+                <QItemSection v-if="!workers">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="workers">
+                    <VnSelectFilter
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.salesPersonFk')
+                        "
+                        v-model="params.salesPersonFk"
+                        @update:model-value="searchFn()"
+                        :options="workers"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('credit')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.credit')"
+                        v-model="params.credit"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('creditInsurance')">
+                <QItemSection>
+                    <VnInput
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.creditInsurance')
+                        "
+                        v-model="params.creditInsurance"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('phone')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.phone')"
+                        v-model="params.phone"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('mobile')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.mobile')"
+                        v-model="params.mobile"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('street')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.street')"
+                        v-model="params.street"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('countryFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('customer.extendedList.tableVisibleColumns.countryFk')"
+                        v-model="params.countryFk"
+                        @update:model-value="searchFn()"
+                        :options="countriesOptions"
+                        option-value="id"
+                        option-label="country"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('provinceFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('customer.extendedList.tableVisibleColumns.provinceFk')"
+                        v-model="params.provinceFk"
+                        @update:model-value="searchFn()"
+                        :options="provincesOptions"
+                        option-value="id"
+                        option-label="name"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('city')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.city')"
+                        v-model="params.city"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('postcode')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.postcode')"
+                        v-model="params.postcode"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('email')">
+                <QItemSection>
+                    <VnInput
+                        :label="t('customer.extendedList.tableVisibleColumns.email')"
+                        v-model="params.email"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem v-if="shouldRenderColumn('created')">
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.created"
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.created')
-                            "
-                            @update:model-value="searchFn()"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('businessTypeFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.businessTypeFk'
-                                )
-                            "
-                            v-model="params.businessTypeFk"
-                            :options="businessTypesOptions"
-                            @update:model-value="searchFn()"
-                            option-value="code"
-                            option-label="description"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('payMethodFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.payMethodFk')
-                            "
-                            v-model="params.payMethodFk"
-                            :options="paymethodsOptions"
-                            @update:model-value="searchFn()"
-                            option-value="id"
-                            option-label="name"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('sageTaxTypeFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.sageTaxTypeFk'
-                                )
-                            "
-                            v-model="params.sageTaxTypeFk"
-                            @update:model-value="searchFn()"
-                            :options="sageTaxTypesOptions"
-                            option-value="id"
-                            option-label="vat"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('sageTransactionTypeFk')">
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'
-                                )
-                            "
-                            v-model="params.sageTransactionTypeFk"
-                            @update:model-value="searchFn()"
-                            :options="sageTransactionTypesOptions"
-                            option-value="id"
-                            option-label="transaction"
-                            map-options
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')"
-                >
-                    <QItemSection v-if="shouldRenderColumn('isActive')">
-                        <QCheckbox
-                            v-model="params.isActive"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.isActive')
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                    <QItemSection v-if="shouldRenderColumn('isVies')">
-                        <QCheckbox
-                            v-model="params.isVies"
-                            @update:model-value="searchFn()"
-                            :label="t('customer.extendedList.tableVisibleColumns.isVies')"
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-if="
-                        shouldRenderColumn('isEqualizated') ||
-                        shouldRenderColumn('isTaxDataChecked')
-                    "
-                >
-                    <QItemSection v-if="shouldRenderColumn('isTaxDataChecked')">
-                        <QCheckbox
-                            v-model="params.isTaxDataChecked"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.isTaxDataChecked'
-                                )
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                    <QItemSection v-if="shouldRenderColumn('isEqualizated')">
-                        <QCheckbox
-                            v-model="params.isEqualizated"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.isEqualizated'
-                                )
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-if="
-                        shouldRenderColumn('hasToInvoice') ||
-                        shouldRenderColumn('isFreezed')
-                    "
-                >
-                    <QItemSection v-if="shouldRenderColumn('isFreezed')">
-                        <QCheckbox
-                            v-model="params.isFreezed"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.isFreezed')
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                    <QItemSection v-if="shouldRenderColumn('hasToInvoice')">
-                        <QCheckbox
-                            v-model="params.hasToInvoice"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.hasToInvoice'
-                                )
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-if="
-                        shouldRenderColumn('isToBeMailed') ||
-                        shouldRenderColumn('hasToInvoiceByAddress')
-                    "
-                >
-                    <QItemSection v-if="shouldRenderColumn('hasToInvoiceByAddress')">
-                        <QCheckbox
-                            v-model="params.hasToInvoiceByAddress"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'
-                                )
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                    <QItemSection v-if="shouldRenderColumn('isToBeMailed')">
-                        <QCheckbox
-                            v-model="params.isToBeMailed"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t(
-                                    'customer.extendedList.tableVisibleColumns.isToBeMailed'
-                                )
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-if="
-                        shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')
-                    "
-                >
-                    <QItemSection v-if="shouldRenderColumn('hasLcr')">
-                        <QCheckbox
-                            v-model="params.hasLcr"
-                            @update:model-value="searchFn()"
-                            :label="t('customer.extendedList.tableVisibleColumns.hasLcr')"
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                    <QItemSection v-if="shouldRenderColumn('hasCoreVnl')">
-                        <QCheckbox
-                            v-model="params.hasCoreVnl"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.hasCoreVnl')
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="shouldRenderColumn('hasSepaVnl')">
-                    <QItemSection>
-                        <QCheckbox
-                            v-model="params.hasSepaVnl"
-                            @update:model-value="searchFn()"
-                            :label="
-                                t('customer.extendedList.tableVisibleColumns.hasSepaVnl')
-                            "
-                            toggle-indeterminate
-                            :false-value="undefined"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem v-if="shouldRenderColumn('created')">
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.created"
+                        :label="t('customer.extendedList.tableVisibleColumns.created')"
+                        @update:model-value="searchFn()"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('businessTypeFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.businessTypeFk')
+                        "
+                        v-model="params.businessTypeFk"
+                        :options="businessTypesOptions"
+                        @update:model-value="searchFn()"
+                        option-value="code"
+                        option-label="description"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('payMethodFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.payMethodFk')
+                        "
+                        v-model="params.payMethodFk"
+                        :options="paymethodsOptions"
+                        @update:model-value="searchFn()"
+                        option-value="id"
+                        option-label="name"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('sageTaxTypeFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk')
+                        "
+                        v-model="params.sageTaxTypeFk"
+                        @update:model-value="searchFn()"
+                        :options="sageTaxTypesOptions"
+                        option-value="id"
+                        option-label="vat"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('sageTransactionTypeFk')">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="
+                            t(
+                                'customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'
+                            )
+                        "
+                        v-model="params.sageTransactionTypeFk"
+                        @update:model-value="searchFn()"
+                        :options="sageTransactionTypesOptions"
+                        option-value="id"
+                        option-label="transaction"
+                        map-options
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')">
+                <QItemSection v-if="shouldRenderColumn('isActive')">
+                    <QCheckbox
+                        v-model="params.isActive"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.isActive')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+                <QItemSection v-if="shouldRenderColumn('isVies')">
+                    <QCheckbox
+                        v-model="params.isVies"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.isVies')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="
+                    shouldRenderColumn('isEqualizated') ||
+                    shouldRenderColumn('isTaxDataChecked')
+                "
+            >
+                <QItemSection v-if="shouldRenderColumn('isTaxDataChecked')">
+                    <QCheckbox
+                        v-model="params.isTaxDataChecked"
+                        @update:model-value="searchFn()"
+                        :label="
+                            t(
+                                'customer.extendedList.tableVisibleColumns.isTaxDataChecked'
+                            )
+                        "
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+                <QItemSection v-if="shouldRenderColumn('isEqualizated')">
+                    <QCheckbox
+                        v-model="params.isEqualizated"
+                        @update:model-value="searchFn()"
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.isEqualizated')
+                        "
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="
+                    shouldRenderColumn('hasToInvoice') || shouldRenderColumn('isFreezed')
+                "
+            >
+                <QItemSection v-if="shouldRenderColumn('isFreezed')">
+                    <QCheckbox
+                        v-model="params.isFreezed"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.isFreezed')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+                <QItemSection v-if="shouldRenderColumn('hasToInvoice')">
+                    <QCheckbox
+                        v-model="params.hasToInvoice"
+                        @update:model-value="searchFn()"
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.hasToInvoice')
+                        "
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="
+                    shouldRenderColumn('isToBeMailed') ||
+                    shouldRenderColumn('hasToInvoiceByAddress')
+                "
+            >
+                <QItemSection v-if="shouldRenderColumn('hasToInvoiceByAddress')">
+                    <QCheckbox
+                        v-model="params.hasToInvoiceByAddress"
+                        @update:model-value="searchFn()"
+                        :label="
+                            t(
+                                'customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'
+                            )
+                        "
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+                <QItemSection v-if="shouldRenderColumn('isToBeMailed')">
+                    <QCheckbox
+                        v-model="params.isToBeMailed"
+                        @update:model-value="searchFn()"
+                        :label="
+                            t('customer.extendedList.tableVisibleColumns.isToBeMailed')
+                        "
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')"
+            >
+                <QItemSection v-if="shouldRenderColumn('hasLcr')">
+                    <QCheckbox
+                        v-model="params.hasLcr"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.hasLcr')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+                <QItemSection v-if="shouldRenderColumn('hasCoreVnl')">
+                    <QCheckbox
+                        v-model="params.hasCoreVnl"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.hasCoreVnl')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="shouldRenderColumn('hasSepaVnl')">
+                <QItemSection>
+                    <QCheckbox
+                        v-model="params.hasSepaVnl"
+                        @update:model-value="searchFn()"
+                        :label="t('customer.extendedList.tableVisibleColumns.hasSepaVnl')"
+                        toggle-indeterminate
+                        :false-value="undefined"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QSeparator />
-            </QList>
+            <QSeparator />
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 es:
     Social name: Razón social

src/pages/Customer/Notifications/CustomerNotificationsFilter.vue

@@ -36,91 +36,80 @@ const clients = ref();
         </template>
 
         <template #body="{ params, searchFn }">
-            <QList dense class="list">
-                <QItem class="q-mb-sm q-mt-sm">
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Identifier')"
-                            is-outlined
-                            v-model="params.identifier"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm q-mt-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('Identifier')"
+                        is-outlined
+                        v-model="params.identifier"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!clients">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="clients">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('Social name')"
-                            :options="clients"
-                            @update:model-value="searchFn()"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="socialName"
-                            option-value="socialName"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.socialName"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!clients">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="clients">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('Social name')"
+                        :options="clients"
+                        @update:model-value="searchFn()"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="socialName"
+                        option-value="socialName"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.socialName"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection v-if="!cities">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="cities">
-                        <VnSelectFilter
-                            :input-debounce="0"
-                            :label="t('City')"
-                            :options="cities"
-                            @update:model-value="searchFn()"
-                            dense
-                            emit-value
-                            hide-selected
-                            map-options
-                            option-label="name"
-                            option-value="name"
-                            outlined
-                            rounded
-                            use-input
-                            v-model="params.city"
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="!cities">
+                    <QSkeleton type="QInput" class="full-width" />
+                </QItemSection>
+                <QItemSection v-if="cities">
+                    <VnSelectFilter
+                        :input-debounce="0"
+                        :label="t('City')"
+                        :options="cities"
+                        @update:model-value="searchFn()"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="name"
+                        option-value="name"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.city"
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput :label="t('Phone')" is-outlined v-model="params.phone" />
-                    </QItemSection>
-                </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput :label="t('Phone')" is-outlined v-model="params.phone" />
+                </QItemSection>
+            </QItem>
 
-                <QItem class="q-mb-sm">
-                    <QItemSection>
-                        <VnInput :label="t('Email')" is-outlined v-model="params.email" />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-            </QList>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput :label="t('Email')" is-outlined v-model="params.email" />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Customer/Payments/CustomerPayments.vue

@@ -122,7 +122,7 @@ function stateColor(row) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md customer-payments">
-        <div class="card-list">
+        <div class="vn-card-list">
             <QToolbar class="q-pa-none justify-end">
                 <QBtn
                     @click="arrayData.refresh()"
@@ -278,18 +278,13 @@ function stateColor(row) {
 
 <style lang="scss">
 .customer-payments {
-    .card-list {
-        width: 100%;
-        max-width: 60em;
-
-        .q-table--dense .q-table th:first-child {
-            padding-left: 0;
-        }
-        td {
-            max-width: 130px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+    .q-table--dense .q-table th:first-child {
+        padding-left: 0;
+    }
+    td {
+        max-width: 130px;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 }
 </style>

src/pages/Customer/Payments/CustomerPaymentsFilter.vue

@@ -27,71 +27,60 @@ function isValidNumber(value) {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Order ID')"
-                            v-model="params.orderFk"
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:basket" size="xs" />
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Customer ID')"
-                            v-model="params.clientFk"
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:client" size="xs" />
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Amount')"
-                            v-model="params.amount"
-                            is-outlined
-                            @update:model-value="
-                                (value) => {
-                                    if (value.includes(','))
-                                        params.amount = params.amount.replace(',', '.');
-                                }
-                            "
-                            :rules="[
-                                (val) =>
-                                    isValidNumber(val) || !val || 'Please type a number',
-                            ]"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm" />
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('Order ID')" v-model="params.orderFk" is-outlined>
+                        <template #prepend>
+                            <QIcon name="vn:basket" size="xs" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Customer ID')"
+                        v-model="params.clientFk"
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="vn:client" size="xs" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Amount')"
+                        v-model="params.amount"
+                        is-outlined
+                        @update:model-value="
+                            (value) => {
+                                if (value.includes(','))
+                                    params.amount = params.amount.replace(',', '.');
+                            }
+                        "
+                        :rules="[
+                            (val) => isValidNumber(val) || !val || 'Please type a number',
+                        ]"
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="euro" size="sm" />
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
 
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.from"
-                            :label="t('From')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                    <QItemSection>
-                        <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate v-model="params.from" :label="t('From')" is-outlined />
+                </QItemSection>
+                <QItemSection>
+                    <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Customer/components/CustomerConsigneeCreate.vue

@@ -0,0 +1,265 @@
+<script setup>
+import { onBeforeMount, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import axios from 'axios';
+
+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 VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const formInitialData = reactive({ isDefaultAddress: false });
+
+const townsFetchDataRef = ref(null);
+const postcodeFetchDataRef = ref(null);
+const urlCreate = ref('');
+
+const postcodesOptions = ref([]);
+const citiesLocationOptions = ref([]);
+const provincesLocationOptions = ref([]);
+const agencyModes = ref([]);
+const incoterms = ref([]);
+const customsAgents = ref([]);
+
+onBeforeMount(() => {
+    urlCreate.value = `Clients/${route.params.id}/createAddress`;
+    getCustomsAgents();
+});
+
+const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
+    await postcodeFetchDataRef.value.fetch();
+    await townsFetchDataRef.value.fetch();
+    formData.postalCode = code;
+    formData.provinceFk = provinceFk;
+    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
+};
+
+const getCustomsAgents = async () => {
+    const { data } = await axios.get('CustomsAgents');
+    customsAgents.value = data;
+};
+
+const refreshData = () => {
+    getCustomsAgents();
+};
+
+const toCustomerConsignees = () => {
+    router.push({
+        name: 'CustomerConsignees',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+        ref="postcodeFetchDataRef"
+        url="Postcodes/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (citiesLocationOptions = data)"
+        auto-load
+        ref="townsFetchDataRef"
+        url="Towns/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (provincesLocationOptions = data)"
+        auto-load
+        url="Provinces/location"
+    />
+    <fetch-data
+        @on-fetch="(data) => (agencyModes = data)"
+        auto-load
+        url="AgencyModes/isActive"
+    />
+    <fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
+
+    <FormModel
+        :form-initial-data="formInitialData"
+        :observe-form-changes="false"
+        :url-create="urlCreate"
+        @on-data-saved="toCustomerConsignees()"
+        model="client"
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Consignee')" v-model="data.nickname" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Street address')" v-model="data.street" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectDialog
+                        :label="t('Postcode')"
+                        :options="postcodesOptions"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :rules="validate('Worker.postcode')"
+                        hide-selected
+                        option-label="code"
+                        option-value="code"
+                        v-model="data.postalCode"
+                    >
+                        <template #form>
+                            <CustomerCreateNewPostcode
+                                @on-data-saved="onPostcodeCreated($event, data)"
+                            />
+                        </template>
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection v-if="scope.opt">
+                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ scope.opt.code }} -
+                                        {{ scope.opt.town.name }}
+                                        ({{ scope.opt.town.province.name }},
+                                        {{ scope.opt.town.province.country.country }})
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectDialog>
+                </div>
+                <div class="col">
+                    <!-- ciudades -->
+                    <VnSelectFilter
+                        :label="t('City')"
+                        :options="citiesLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="name"
+                        v-model="data.city"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{
+                                            `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
+                                        }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Province')"
+                        :options="provincesLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.provinceFk"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        `${scope.opt.name} (${scope.opt.country.country})`
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Agency')"
+                        :options="agencyModes"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.agencyModeFk"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Phone')" v-model="data.phone" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Mobile')" v-model="data.mobile" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Incoterms')"
+                        :options="incoterms"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        v-model="data.incotermsFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectDialog
+                        :label="t('Customs agent')"
+                        :options="customsAgents"
+                        hide-selected
+                        option-label="fiscalName"
+                        option-value="id"
+                        v-model="data.customsAgentFk"
+                    >
+                        <template #form>
+                            <CustomsNewCustomsAgent @on-data-saved="refreshData()" />
+                        </template>
+                    </VnSelectDialog>
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
+<i18n>
+es:
+    Default: Predeterminado
+    Consignee: Consignatario
+    Street address: Dirección postal
+    Postcode: Código postal
+    City: Población
+    Province: Provincia
+    Agency: Agencia
+    Phone: Teléfono
+    Mobile: Movíl
+    Incoterms: Incoterms
+    Customs agent: Agente de aduanas
+</i18n>

src/pages/Customer/components/CustomerConsigneeEdit.vue

@@ -0,0 +1,371 @@
+<script setup>
+import { onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import axios from 'axios';
+
+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 VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const townsFetchDataRef = ref(null);
+const postcodeFetchDataRef = ref(null);
+const urlUpdate = ref('');
+
+const postcodesOptions = ref([]);
+const citiesLocationOptions = ref([]);
+const provincesLocationOptions = ref([]);
+const agencyModes = ref([]);
+const incoterms = ref([]);
+const customsAgents = ref([]);
+const observationTypes = ref([]);
+const notes = ref([]);
+
+onBeforeMount(() => {
+    urlUpdate.value = `Clients/${route.params.id}/updateAddress/${route.params.consigneeId}`;
+});
+
+const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
+    await postcodeFetchDataRef.value.fetch();
+    await townsFetchDataRef.value.fetch();
+    formData.postalCode = code;
+    formData.provinceFk = provinceFk;
+    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
+};
+
+const getData = async (observations) => {
+    observationTypes.value = observations;
+
+    if (observationTypes.value.length) {
+        const filter = {
+            fields: ['id', 'addressFk', 'observationTypeFk', 'description'],
+            where: { addressFk: `${route.params.consigneeId}` },
+        };
+        const { data } = await axios.get('AddressObservations', {
+            params: { filter: JSON.stringify(filter) },
+        });
+
+        if (data.length) {
+            notes.value = data
+                .map((observation) => {
+                    const type = observationTypes.value.find(
+                        (type) => type.id === observation.observationTypeFk
+                    );
+                    return type
+                        ? {
+                              $isNew: false,
+                              $oldData: null,
+                              $orgIndex: null,
+                              addressFk: `${route.params.consigneeId}`,
+                              description: observation.description,
+                              observationTypeFk: type.id,
+                          }
+                        : null;
+                })
+                .filter((item) => item !== null);
+        }
+    }
+};
+
+const addNote = () => {
+    notes.value.push({
+        $isNew: true,
+        $oldData: null,
+        $orgIndex: null,
+        addressFk: `${route.params.consigneeId}`,
+        description: '',
+        observationTypeFk: '',
+    });
+};
+
+const deleteNote = (index) => {
+    notes.value.splice(index, 1);
+};
+
+const onDataSaved = () => {
+    const payload = {
+        creates: notes.value,
+    };
+    axios.post('AddressObservations/crud', payload);
+};
+</script>
+
+<template>
+    <FetchData
+        ref="postcodeFetchDataRef"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+        url="Postcodes/location"
+    />
+    <FetchData
+        ref="townsFetchDataRef"
+        @on-fetch="(data) => (citiesLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (provincesLocationOptions = data)"
+        auto-load
+        url="Provinces/location"
+    />
+    <fetch-data
+        @on-fetch="(data) => (agencyModes = data)"
+        auto-load
+        url="AgencyModes/isActive"
+    />
+    <fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
+    <fetch-data
+        @on-fetch="(data) => (customsAgents = data)"
+        auto-load
+        url="CustomsAgents"
+    />
+    <fetch-data @on-fetch="getData" auto-load url="ObservationTypes" />
+
+    <FormModel
+        :observe-form-changes="false"
+        :url-update="urlUpdate"
+        :url="`Addresses/${route.params.consigneeId}`"
+        @on-data-saved="onDataSaved()"
+        auto-load
+        model="client"
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox :label="t('Enabled')" v-model="data.isActive" />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('Is equalizated')"
+                        v-model="data.isEqualizated"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        :label="t('Is Loginflora allowed')"
+                        v-model="data.isLogifloraAllowed"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Consignee')" v-model="data.nickname" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Street address')" v-model="data.street" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectDialog
+                        :label="t('Postcode')"
+                        :options="postcodesOptions"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :rules="validate('Worker.postcode')"
+                        hide-selected
+                        option-label="code"
+                        option-value="code"
+                        v-model="data.postalCode"
+                    >
+                        <template #form>
+                            <CustomerCreateNewPostcode
+                                @on-data-saved="onPostcodeCreated($event, data)"
+                            />
+                        </template>
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection v-if="scope.opt">
+                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ scope.opt.code }} -
+                                        {{ scope.opt.town.name }}
+                                        ({{ scope.opt.town.province.name }},
+                                        {{ scope.opt.town.province.country.country }})
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectDialog>
+                </div>
+                <div class="col">
+                    <!-- ciudades -->
+                    <VnSelectFilter
+                        :label="t('City')"
+                        :options="citiesLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="name"
+                        v-model="data.city"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{
+                                            `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
+                                        }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Province')"
+                        :options="provincesLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.provinceFk"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        `${scope.opt.name} (${scope.opt.country.country})`
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Agency')"
+                        :options="agencyModes"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.agencyModeFk"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Phone')" v-model="data.phone" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Mobile')" v-model="data.mobile" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Incoterms')"
+                        :options="incoterms"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        v-model="data.incotermsFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectDialog
+                        :label="t('Customs agent')"
+                        :options="customsAgents"
+                        hide-selected
+                        option-label="fiscalName"
+                        option-value="id"
+                        v-model="data.customsAgentFk"
+                    >
+                        <template #form>
+                            <CustomsNewCustomsAgent />
+                        </template>
+                    </VnSelectDialog>
+                </div>
+            </VnRow>
+
+            <h4 class="q-mb-xs">{{ t('Notes') }}</h4>
+            <VnRow
+                :key="index"
+                class="row q-gutter-md q-mb-md"
+                v-for="(note, index) in notes"
+            >
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Observation type')"
+                        :options="observationTypes"
+                        hide-selected
+                        option-label="description"
+                        option-value="id"
+                        v-model="note.observationTypeFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Description')" v-model="note.description" />
+                </div>
+                <div class="flex items-center">
+                    <QIcon
+                        @click.stop="deleteNote(index)"
+                        class="cursor-pointer"
+                        color="primary"
+                        name="delete"
+                        size="sm"
+                    >
+                        <QTooltip>
+                            {{ t('Remove') }}
+                        </QTooltip>
+                    </QIcon>
+                </div>
+            </VnRow>
+
+            <QIcon
+                @click.stop="addNote()"
+                class="cursor-pointer add-icon q-mt-md"
+                name="add"
+                size="sm"
+            >
+                <QTooltip>
+                    {{ t('Add note') }}
+                </QTooltip>
+            </QIcon>
+        </template>
+    </FormModel>
+</template>
+
+<style lang="scss" scoped>
+.add-icon {
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
+
+<i18n>
+es:
+    Enabled: Activo
+    Is equalizated: Recargo de equivalencia
+    Is Loginflora allowed: Compra directa en Holanda
+    Consignee: Consignatario
+    Street address: Dirección postal
+    Postcode: Código postal
+    City: Población
+    Province: Provincia
+    Agency: Agencia
+    Phone: Teléfono
+    Mobile: Movíl
+    Incoterms: Incoterms
+    Customs agent: Agente de aduanas
+    Notes: Notas
+    Observation type: Tipo de observación
+    Description: Descripción
+    Add note: Añadir nota
+    Remove note: Eliminar nota
+</i18n>

src/pages/Customer/components/CustomerCreditCreate.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const initialData = reactive({
+    credit: null,
+});
+
+const toCustomerCredits = () => {
+    router.push({
+        name: 'CustomerCredits',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <FormModel
+        :form-initial-data="initialData"
+        :observe-form-changes="false"
+        :url-update="`/Clients/${route.params.id}`"
+        @on-data-saved="toCustomerCredits()"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('Credit')"
+                        type="number"
+                        v-model.number="data.credit"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Credit: Crédito
+</i18n>

src/pages/Customer/components/CustomerNewCustomsAgent.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const initialData = reactive({
+    nif: null,
+    fiscalName: null,
+    street: null,
+    phone: null,
+});
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+};
+</script>
+
+<template>
+    <FormModelPopup
+        :title="t('New customs agent')"
+        url-create="CustomsAgents"
+        model="customer"
+        :form-initial-data="initialData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('NIF')" :required="true" v-model="data.nif" />
+                </div>
+                <div class="col">
+                    <VnInput
+                        :label="t('Fiscal name')"
+                        :required="true"
+                        v-model="data.fiscalName"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Street')" v-model="data.street" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Phone')" v-model="data.phone" />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New customs agent: Nuevo agente de aduanas
+    NIF: NIF
+    Fiscal name: Nombre fiscal
+    Street: Dirección fiscal
+    Phone: Teléfono
+</i18n>

src/pages/Customer/components/CustomerNoteCreate.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { onMounted, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const initialData = reactive({
+    text: null,
+});
+
+onMounted(() => {
+    initialData.clientFk = `${route.params.id}`;
+});
+
+const toCustomerNotes = () => {
+    router.push({
+        name: 'CustomerNotes',
+        params: {
+            id: route.params.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <FormModel
+        :form-initial-data="initialData"
+        :observe-form-changes="false"
+        url-create="ClientObservations"
+        @on-data-saved="toCustomerNotes()"
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput :label="t('Note')" type="textarea" v-model="data.text" />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Note: Nota
+</i18n>

src/pages/Department/Card/DepartmentDescriptor.vue

@@ -44,7 +44,6 @@ const setData = (entity) => {
 };
 
 const removeDepartment = () => {
-    console.log('entityId: ', entityId.value);
     quasar
         .dialog({
             title: 'Are you sure you want to delete it?',
@@ -90,17 +89,15 @@ const removeDepartment = () => {
             </QItem>
         </template>
         <template #body="{ entity }">
-            <VnLv :label="t('department.chat')" :value="entity.chatName" dash />
-            <VnLv :label="t('department.email')" :value="entity.notificationEmail" dash />
+            <VnLv :label="t('department.chat')" :value="entity.chatName" />
+            <VnLv :label="t('department.email')" :value="entity.notificationEmail" copy />
             <VnLv
                 :label="t('department.selfConsumptionCustomer')"
                 :value="entity.client?.name"
-                dash
             />
             <VnLv
                 :label="t('department.bossDepartment')"
                 :value="entity.worker?.user?.name"
-                dash
             />
         </template>
         <template #actions>

src/pages/Entry/Card/EntryBasicData.vue

@@ -0,0 +1,215 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FilterTravelForm from 'src/components/FilterTravelForm.vue';
+
+import { toDate } from 'src/filters';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const suppliersOptions = ref([]);
+const travelsOptions = ref([]);
+const companiesOptions = ref([]);
+const currenciesOptions = ref([]);
+
+const onFilterTravelSelected = (formData, id) => {
+    formData.travelFk = id;
+};
+</script>
+<template>
+    <FetchData
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname'] }"
+        order="nickname"
+        @on-fetch="(data) => (suppliersOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Travels/filter"
+        :filter="{ fields: ['id', 'warehouseInName'] }"
+        order="id"
+        @on-fetch="(data) => (travelsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="companiesRef"
+        url="Companies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="currenciesRef"
+        url="Currencies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (currenciesOptions = data)"
+        auto-load
+    />
+    <FormModel
+        :url="`Entries/${route.params.id}`"
+        :url-update="`Entries/${route.params.id}`"
+        model="entry"
+        auto-load
+    >
+        <template #form="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.supplier')"
+                        v-model="data.supplierFk"
+                        :options="suppliersOptions"
+                        option-value="id"
+                        option-label="nickname"
+                        hide-selected
+                        :required="true"
+                        map-options
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ scope.opt?.nickname }}, {{ scope.opt?.id }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectDialog
+                        :label="t('entry.basicData.travel')"
+                        v-model="data.travelFk"
+                        :options="travelsOptions"
+                        option-value="id"
+                        option-label="warehouseInName"
+                        map-options
+                        hide-selected
+                        :required="true"
+                        action-icon="filter_alt"
+                    >
+                        <template #form>
+                            <FilterTravelForm
+                                @travel-selected="onFilterTravelSelected(data, $event)"
+                            />
+                        </template>
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel
+                                        >{{ scope.opt?.agencyModeName }} -
+                                        {{ scope.opt?.warehouseInName }} ({{
+                                            toDate(scope.opt?.shipped)
+                                        }}) &#x2192; {{ scope.opt?.warehouseOutName }} ({{
+                                            toDate(scope.opt?.landed)
+                                        }})</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectDialog>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.reference"
+                        :label="t('entry.basicData.reference')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.invoiceNumber"
+                        :label="t('entry.basicData.invoiceNumber')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.company')"
+                        v-model="data.companyFk"
+                        :options="companiesOptions"
+                        option-value="id"
+                        option-label="code"
+                        map-options
+                        hide-selected
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('entry.basicData.currency')"
+                        v-model="data.currencyFk"
+                        :options="currenciesOptions"
+                        option-value="id"
+                        option-label="code"
+                    />
+                </div>
+                <div class="col">
+                    <QInput
+                        :label="t('entry.basicData.commission')"
+                        v-model="data.commission"
+                        type="number"
+                        autofocus
+                        min="0"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('entry.basicData.observation')"
+                        type="textarea"
+                        v-model="data.observation"
+                        :maxlength="45"
+                        counter
+                        fill-input
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isOrdered"
+                        :label="t('entry.basicData.ordered')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isConfirmed"
+                        :label="t('entry.basicData.confirmed')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isExcludedFromAvailable"
+                        :label="t('entry.basicData.excludedFromAvailable')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox v-model="data.isRaid" :label="t('entry.basicData.raid')" />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isBooked"
+                        :label="t('entry.basicData.booked')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>

src/pages/Entry/Card/EntryBuys.vue

@@ -0,0 +1,467 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+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 VnInput from 'src/components/common/VnInput.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+
+import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const quasar = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const stateStore = useStateStore();
+const { notify } = useNotify();
+
+const rowsSelected = ref([]);
+const entryBuysPaginateRef = ref(null);
+const packagingsOptions = ref(null);
+const originalRowDataCopy = ref(null);
+
+const getInputEvents = (colField, props) => {
+    return colField === 'packagingFk'
+        ? { 'update:modelValue': () => saveChange(colField, props) }
+        : {
+              'keyup.enter': () => saveChange(colField, props),
+              blur: () => saveChange(colField, props),
+          };
+};
+
+const tableColumnComponents = computed(() => ({
+    item: {
+        component: QBtn,
+        props: {
+            color: 'blue',
+            flat: true,
+        },
+        event: () => ({}),
+    },
+    quantity: {
+        component: VnInput,
+        props: {
+            type: 'number',
+            min: 0,
+            class: 'input-number',
+        },
+        event: getInputEvents,
+    },
+    packagingFk: {
+        component: VnSelectFilter,
+        props: {
+            'option-value': 'id',
+            'option-label': 'id',
+            'emit-value': true,
+            'map-options': true,
+            'use-input': true,
+            'hide-selected': true,
+            options: packagingsOptions.value,
+        },
+        event: getInputEvents,
+    },
+    stickers: {
+        component: VnInput,
+        props: {
+            type: 'number',
+            min: 0,
+            class: 'input-number',
+        },
+        event: getInputEvents,
+    },
+    weight: {
+        component: VnInput,
+        props: {
+            type: 'number',
+            min: 0,
+        },
+        event: getInputEvents,
+    },
+    packing: {
+        component: VnInput,
+        props: {
+            type: 'number',
+            min: 0,
+        },
+        event: getInputEvents,
+    },
+    grouping: {
+        component: VnInput,
+        props: {
+            type: 'number',
+            min: 0,
+        },
+        event: getInputEvents,
+    },
+    buyingValue: {
+        component: VnInput,
+        props: {
+            type: 'number',
+            min: 0,
+        },
+        event: getInputEvents,
+    },
+    price2: {
+        component: VnInput,
+        props: {
+            type: 'number',
+            min: 0,
+        },
+        event: getInputEvents,
+    },
+    price3: {
+        component: VnInput,
+        props: {
+            type: 'number',
+            min: 0,
+        },
+        event: getInputEvents,
+    },
+    import: {
+        component: 'span',
+        props: {},
+        event: () => ({}),
+    },
+}));
+
+const entriesTableColumns = computed(() => {
+    return [
+        {
+            label: t('entry.summary.item'),
+            field: 'id',
+            name: 'item',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.quantity'),
+            field: 'quantity',
+            name: 'quantity',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.package'),
+            field: 'packagingFk',
+            name: 'packagingFk',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.stickers'),
+            field: 'stickers',
+            name: 'stickers',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.weight'),
+            field: 'weight',
+            name: 'weight',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.packing'),
+            field: 'packing',
+            name: 'packing',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.grouping'),
+            field: 'grouping',
+            name: 'grouping',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.buyingValue'),
+            field: 'buyingValue',
+            name: 'buyingValue',
+            align: 'left',
+            format: (value) => toCurrency(value),
+        },
+        {
+            label: t('entry.buys.groupingPrice'),
+            field: 'price2',
+            name: 'price2',
+            align: 'left',
+        },
+        {
+            label: t('entry.buys.packingPrice'),
+            field: 'price3',
+            name: 'price3',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.import'),
+            name: 'import',
+            align: 'left',
+            format: (_, row) => toCurrency(row.buyingValue * row.quantity),
+        },
+    ];
+});
+
+const copyOriginalRowsData = (rows) => {
+    // el objetivo de esto es guardar los valores iniciales de todas las rows para evitar guardar cambios si la data no cambió al disparar los eventos
+    originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
+};
+
+const saveChange = async (field, { rowIndex, row }) => {
+    try {
+        if (originalRowDataCopy.value[rowIndex][field] == row[field]) return;
+        await axios.patch(`Buys/${row.id}`, row);
+        originalRowDataCopy.value[rowIndex][field] = row[field];
+    } catch (err) {
+        console.error('Error saving changes', err);
+    }
+};
+
+const openRemoveDialog = async () => {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('Confirm deletion'),
+                message: t(
+                    `Are you sure you want to delete this buy${
+                        rowsSelected.value.length > 1 ? 's' : ''
+                    }?`
+                ),
+                data: rowsSelected.value,
+            },
+        })
+        .onOk(async () => {
+            try {
+                await deleteBuys();
+                const notifyMessage = t(
+                    `Buy${rowsSelected.value.length > 1 ? 's' : ''} deleted`
+                );
+                notify(notifyMessage, 'positive');
+            } catch (err) {
+                console.error('Error deleting buys');
+            }
+        });
+};
+
+const deleteBuys = async () => {
+    await axios.post('Buys/deleteBuys', { buys: rowsSelected.value });
+    entryBuysPaginateRef.value.fetch();
+};
+
+const importBuys = () => {
+    router.push({ name: 'EntryBuysImport' });
+};
+
+const toggleGroupingMode = async (buy, mode) => {
+    try {
+        const grouping = 1;
+        const packing = 2;
+        const groupingMode = mode === 'grouping' ? grouping : packing;
+
+        const newGroupingMode = buy.groupingMode === groupingMode ? 0 : groupingMode;
+
+        const params = {
+            groupingMode: newGroupingMode,
+        };
+
+        await axios.patch(`Buys/${buy.id}`, params);
+        buy.groupingMode = newGroupingMode;
+    } catch (err) {
+        console.error('Error toggling grouping mode');
+    }
+};
+
+const showLockIcon = (groupingMode, mode) => {
+    if (mode === 'packing') {
+        return groupingMode === 2 ? 'lock' : 'lock_open';
+    } else {
+        return groupingMode === 1 ? 'lock' : 'lock_open';
+    }
+};
+</script>
+
+<template>
+    <FetchData
+        ref="expensesRef"
+        url="Packagings"
+        :filter="{ fields: ['id'], where: { freightItemFk: true }, order: 'id ASC' }"
+        auto-load
+        @on-fetch="(data) => (packagingsOptions = data)"
+    />
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+        <QBtnGroup push style="column-gap: 10px">
+            <slot name="moreBeforeActions" />
+            <QBtn
+                :label="t('globals.remove')"
+                color="primary"
+                icon="delete"
+                flat
+                @click="openRemoveDialog()"
+                :disable="!rowsSelected?.length"
+                :title="t('globals.remove')"
+            />
+        </QBtnGroup>
+    </Teleport>
+    <VnPaginate
+        ref="entryBuysPaginateRef"
+        data-key="EntryBuys"
+        :url="`Entries/${route.params.id}/getBuys`"
+        @on-fetch="copyOriginalRowsData($event)"
+        auto-load
+    >
+        <template #body="{ rows }">
+            <QTable
+                :rows="rows"
+                :columns="entriesTableColumns"
+                selection="multiple"
+                row-key="id"
+                hide-bottom
+                class="full-width q-mt-md"
+                :grid="$q.screen.lt.md"
+                v-model:selected="rowsSelected"
+            >
+                <template #body="props">
+                    <QTr>
+                        <QTd>
+                            <QCheckbox v-model="props.selected" />
+                        </QTd>
+                        <QTd v-for="col in props.cols" :key="col.name">
+                            <component
+                                :is="tableColumnComponents[col.name].component"
+                                v-bind="tableColumnComponents[col.name].props"
+                                v-model="props.row[col.field]"
+                                v-on="
+                                    tableColumnComponents[col.name].event(
+                                        col.field,
+                                        props
+                                    )
+                                "
+                            >
+                                <template
+                                    v-if="
+                                        col.name === 'grouping' || col.name === 'packing'
+                                    "
+                                    #append
+                                >
+                                    <QBtn
+                                        :icon="
+                                            showLockIcon(props.row.groupingMode, col.name)
+                                        "
+                                        @click="toggleGroupingMode(props.row, col.name)"
+                                        class="cursor-pointer"
+                                        size="sm"
+                                        flat
+                                        dense
+                                        unelevated
+                                        push
+                                    />
+                                </template>
+                                <template
+                                    v-if="col.name === 'item' || col.name === 'import'"
+                                >
+                                    {{ col.value }}
+                                </template>
+                                <ItemDescriptorProxy
+                                    v-if="col.name === 'item'"
+                                    :id="props.row.id"
+                                />
+                            </component>
+                        </QTd>
+                    </QTr>
+                    <QTr no-hover>
+                        <QTd />
+                        <QTd>
+                            <span>{{ props.row.item.itemType.code }}</span>
+                        </QTd>
+                        <QTd>
+                            <span>{{ props.row.item.id }}</span>
+                        </QTd>
+                        <QTd>
+                            <span>{{ props.row.item.size }}</span>
+                        </QTd>
+                        <QTd>
+                            <span>{{ toCurrency(props.row.item.minPrice) }}</span>
+                        </QTd>
+                        <QTd colspan="7">
+                            <span>{{ props.row.item.concept }}</span>
+                            <span v-if="props.row.item.subName" class="subName">
+                                {{ props.row.item.subName }}
+                            </span>
+                            <fetched-tags :item="props.row.item" :max-length="5" />
+                        </QTd>
+                    </QTr>
+                    <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
+                    <QTr v-if="props.rowIndex !== rows.length - 1" class="separation-row">
+                        <QTd colspan="12" style="height: 24px" />
+                    </QTr>
+                </template>
+                <template #item="props">
+                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                        <QCard bordered flat>
+                            <QCardSection>
+                                <QCheckbox v-model="props.selected" dense />
+                            </QCardSection>
+                            <QSeparator />
+                            <QList dense>
+                                <QItem v-for="col in props.cols" :key="col.name">
+                                    <component
+                                        :is="tableColumnComponents[col.name].component"
+                                        v-bind="tableColumnComponents[col.name].props"
+                                        v-model="props.row[col.field]"
+                                        v-on="
+                                            tableColumnComponents[col.name].event(
+                                                col.field,
+                                                props
+                                            )
+                                        "
+                                        class="full-width"
+                                    >
+                                        <template
+                                            v-if="
+                                                col.name === 'item' ||
+                                                col.name === 'import'
+                                            "
+                                        >
+                                            {{ col.label + ': ' + col.value }}
+                                        </template>
+                                    </component>
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+    </VnPaginate>
+
+    <QPageSticky :offset="[20, 20]">
+        <QBtn fab icon="upload" color="primary" @click="importBuys()" />
+        <QTooltip class="text-no-wrap">
+            {{ t('Import buys') }}
+        </QTooltip>
+    </QPageSticky>
+</template>
+
+<style lang="scss" scoped>
+.separation-row {
+    background-color: var(--vn-gray) !important;
+}
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+</style>
+
+<i18n>
+es:
+    Import buys: Importar compras
+    Buy deleted: Compra eliminada
+    Buys deleted: Compras eliminadas
+    Confirm deletion: Confirmar eliminación
+    Are you sure you want to delete this buy?: Seguro que quieres eliminar esta compra?
+    Are you sure you want to delete this buys?: Seguro que quieres eliminar estas compras?
+</i18n>

src/pages/Entry/Card/EntryBuysImport.vue

@@ -0,0 +1,297 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+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 VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
+import FilterItemForm from 'src/components/FilterItemForm.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { toCurrency } from 'filters/index';
+
+const stateStore = useStateStore();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const importData = ref({
+    file: null,
+    invoice: null,
+    buys: [],
+    observation: null,
+    ref: null,
+});
+
+const inputFileRef = ref(null);
+const lastItemBuysOptions = ref([]);
+const packagingsOptions = ref([]);
+
+const columns = computed(() => [
+    {
+        label: t('entry.buys.item'),
+        name: 'item',
+        field: 'itemFk',
+        options: lastItemBuysOptions.value,
+        optionValue: 'id',
+        optionLabel: 'name',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.description'),
+        name: 'description',
+        field: 'description',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.size'),
+        name: 'size',
+        field: 'size',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.packing'),
+        name: 'packing',
+        field: 'packing',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.grouping'),
+        name: 'grouping',
+        field: 'grouping',
+        align: 'left',
+    },
+    {
+        label: t('entry.buys.buyingValue'),
+        name: 'buyingValue',
+        field: 'buyingValue',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.buys.packagingFk'),
+        name: 'packagingFk',
+        field: 'packagingFk',
+        options: packagingsOptions.value,
+        optionValue: 'id',
+        optionLabel: 'id',
+        align: 'left',
+    },
+]);
+
+const onFileChange = (e) => {
+    importData.value.file = e;
+    const reader = new FileReader();
+    reader.onload = (e) => fillData(e.target.result);
+    reader.readAsText(importData.value.file);
+};
+
+const fillData = async (rawData) => {
+    const data = JSON.parse(rawData);
+    const [invoice] = data.invoices;
+
+    importData.value.observation = invoice.tx_awb;
+    const companyName = invoice.tx_company;
+    const boxes = invoice.boxes;
+    const buys = [];
+
+    for (let box of boxes) {
+        const boxVolume = box.nu_length * box.nu_width * box.nu_height;
+        for (let product of box.products) {
+            const packing = product.nu_stems_bunch * product.nu_bunches;
+            buys.push({
+                description: product.nm_product,
+                companyName: companyName,
+                size: product.nu_length,
+                packing: packing,
+                grouping: product.nu_stems_bunch,
+                buyingValue: parseFloat(product.mny_rate_stem),
+                volume: boxVolume,
+            });
+        }
+    }
+
+    const boxesId = boxes.map((box) => box.id_box);
+    importData.value.ref = boxesId.join(', ');
+    await fetchBuys(buys);
+};
+
+const fetchBuys = async (buys) => {
+    try {
+        const params = { buys };
+        const { data } = await axios.post(
+            `Entries/${route.params.id}/importBuysPreview`,
+            params
+        );
+        importData.value.buys = data;
+    } catch (err) {
+        console.error('Error fetching buys');
+    }
+};
+
+const onSubmit = async () => {
+    try {
+        const params = importData.value;
+        const hasAnyEmptyRow = params.buys.some((buy) => {
+            return buy.itemFk === null;
+        });
+
+        if (hasAnyEmptyRow) {
+            notify(t('Some of the imported buys does not have an item'), 'negative');
+            return;
+        }
+
+        await axios.post(`Entries/${route.params.id}/importBuys`, params);
+        notify('globals.dataSaved', 'positive');
+        redirectToBuysView();
+    } catch (err) {
+        console.error('Error importing buys', err);
+    }
+};
+
+const redirectToBuysView = () => {
+    router.push({ name: 'EntryBuys' });
+};
+</script>
+<template>
+    <FetchData
+        :url="`Entries/${route.params.id}/lastItemBuys`"
+        :filter="{ fields: ['id', 'name'] }"
+        order="id DESC"
+        @on-fetch="(data) => (lastItemBuysOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Packagings"
+        :filter="{ fields: ['id'], where: { isBox: true } }"
+        order="id ASC"
+        @on-fetch="(data) => (packagingsOptions = data)"
+        auto-load
+    />
+    <QForm>
+        <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+            <div>
+                <QBtnGroup push class="q-gutter-x-sm">
+                    <QBtn
+                        :label="t('globals.cancel')"
+                        color="primary"
+                        icon="restart_alt"
+                        flat
+                        @click="redirectToBuysView()"
+                    />
+                    <QBtn
+                        :label="t('globals.save')"
+                        color="primary"
+                        icon="save"
+                        type="submit"
+                        :disable="!importData.file"
+                        @click="onSubmit()"
+                    />
+                </QBtnGroup>
+            </div>
+        </Teleport>
+        <QCard class="q-pa-lg">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QFile
+                        ref="inputFileRef"
+                        :label="t('entry.buys.file')"
+                        v-model="importData.file"
+                        :multiple="false"
+                        accept=".json"
+                        @update:model-value="onFileChange($event)"
+                        class="required"
+                    >
+                        <template #append>
+                            <QIcon
+                                name="vn:attach"
+                                class="cursor-pointer"
+                                @click="inputFileRef.pickFiles()"
+                            >
+                                <QTooltip>{{ t('Select a file') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                    </QFile>
+                </div>
+            </VnRow>
+            <div v-if="importData.file">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            :label="t('entry.buys.reference')"
+                            v-model="importData.ref"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            :label="t('entry.buys.observations')"
+                            v-model="importData.observation"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <QTable
+                        :columns="columns"
+                        :rows="importData.buys"
+                        :pagination="{ rowsPerPage: 0 }"
+                        hide-pagination
+                    >
+                        <template #body-cell-item="{ row, col }">
+                            <QTd auto-width>
+                                <VnSelectDialog
+                                    v-model="row[col.field]"
+                                    :options="col.options"
+                                    :option-value="col.optionValue"
+                                    :option-label="col.optionLabel"
+                                    hide-selected
+                                    action-icon="filter_alt"
+                                >
+                                    <template #form>
+                                        <FilterItemForm
+                                            @item-selected="row[col.field] = $event"
+                                        />
+                                    </template>
+                                    <template #option="scope">
+                                        <QItem v-bind="scope.itemProps">
+                                            <QItemSection>
+                                                <QItemLabel>
+                                                    {{ scope.opt?.id }} -
+                                                    {{ scope.opt?.name }}
+                                                </QItemLabel>
+                                            </QItemSection>
+                                        </QItem>
+                                    </template>
+                                </VnSelectDialog>
+                            </QTd>
+                        </template>
+                        <template #body-cell-packagingFk="{ row, col }">
+                            <QTd auto-width>
+                                <VnSelectFilter
+                                    v-model="row[col.field]"
+                                    :options="col.options"
+                                    :option-value="col.optionValue"
+                                    :option-label="col.optionLabel"
+                                    hide-selected
+                                />
+                            </QTd>
+                        </template>
+                    </QTable>
+                </VnRow>
+            </div>
+        </QCard>
+    </QForm>
+</template>
+
+<i18n>
+es:
+    Select a file: Selecciona un fichero
+    Some of the imported buys does not have an item: Algunas de las compras importadas no tienen un artículo
+</i18n>

src/pages/Entry/Card/EntryCard.vue

@@ -1,15 +1,30 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+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 EntryDescriptor from './EntryDescriptor.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
+const { t } = useI18n();
 const stateStore = useStateStore();
 </script>
 <template>
-    <!-- Entry searchbar -->
+    <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 -->
+            <EntryDescriptor />
             <QSeparator />
             <LeftMenu source="card" />
         </QScrollArea>
@@ -22,3 +37,9 @@ const stateStore = useStateStore();
         </QPage>
     </QPageContainer>
 </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/EntryDescriptor.vue

@@ -0,0 +1,195 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import useCardDescription from 'src/composables/useCardDescription';
+
+import { toDate } from 'src/filters';
+import { usePrintService } from 'composables/usePrintService';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+const { openReport } = usePrintService();
+
+const entryFilter = {
+    include: [
+        {
+            relation: 'travel',
+            scope: {
+                fields: ['id', 'landed', 'agencyModeFk', 'warehouseOutFk'],
+                include: [
+                    {
+                        relation: 'agency',
+                        scope: {
+                            fields: ['name'],
+                        },
+                    },
+                    {
+                        relation: 'warehouseOut',
+                        scope: {
+                            fields: ['name'],
+                        },
+                    },
+                    {
+                        relation: 'warehouseIn',
+                        scope: {
+                            fields: ['name'],
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            relation: 'supplier',
+            scope: {
+                fields: ['id', 'nickname'],
+            },
+        },
+    ],
+};
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+
+const data = ref(useCardDescription());
+const setData = (entity) =>
+    (data.value = useCardDescription(entity.supplier.nickname, entity.id));
+
+const getEntryRedirectionFilter = (entry) => {
+    let entryTravel = entry && entry.travel;
+
+    if (!entryTravel || !entryTravel.landed) return null;
+
+    const date = new Date(entryTravel.landed);
+    date.setHours(0, 0, 0, 0);
+
+    const from = new Date(date.getTime());
+    from.setDate(from.getDate() - 10);
+
+    const to = new Date(date.getTime());
+    to.setDate(to.getDate() + 10);
+
+    return JSON.stringify({
+        supplierFk: entry.supplierFk,
+        from,
+        to,
+    });
+};
+
+const showEntryReport = () => {
+    openReport(`Entries/${route.params.id}/entry-order-pdf`);
+};
+</script>
+
+<template>
+    <CardDescriptor
+        module="Entry"
+        :url="`Entries/${entityId}`"
+        :filter="entryFilter"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        @on-fetch="setData"
+        data-key="entryData"
+    >
+        <template #menu="{ entity }">
+            <QItem v-ripple clickable @click="showEntryReport(entity)">
+                <QItemSection>{{ t('Show entry report') }}</QItemSection>
+            </QItem>
+        </template>
+        <template #body="{ entity }">
+            <VnLv
+                :label="t('entry.descriptor.agency')"
+                :value="entity.travel?.agency?.name"
+            />
+            <VnLv
+                :label="t('entry.descriptor.landed')"
+                :value="toDate(entity.travel?.landed)"
+            />
+            <VnLv
+                :label="t('entry.descriptor.warehouseOut')"
+                :value="entity.travel?.warehouseOut?.name"
+            />
+        </template>
+        <template #icons="{ entity }">
+            <QCardActions class="q-gutter-x-md">
+                <QIcon
+                    v-if="entity.isExcludedFromAvailable"
+                    name="vn:inventory"
+                    color="primary"
+                    size="xs"
+                >
+                    <QTooltip>{{ t('Inventory entry') }}</QTooltip>
+                </QIcon>
+                <QIcon v-if="entity.isRaid" name="vn:web" color="primary" size="xs">
+                    <QTooltip>{{ t('Virtual entry') }}</QTooltip>
+                </QIcon>
+            </QCardActions>
+        </template>
+        <template #actions="{ entity }">
+            <QCardActions>
+                <QBtn
+                    :to="`/supplier/${entity.supplier.id}`"
+                    size="md"
+                    icon="vn:supplier"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('Supplier card') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    :to="{
+                        name: 'TravelMain',
+                        query: {
+                            params: JSON.stringify({
+                                agencyModeFk: entity.travel?.agencyModeFk,
+                            }),
+                        },
+                    }"
+                    size="md"
+                    icon="local_airport"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('All travels with current agency') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    :to="{
+                        name: 'EntryMain',
+                        query: {
+                            params: getEntryRedirectionFilter(entity),
+                        },
+                    }"
+                    size="md"
+                    icon="vn:entry"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('All entries with current supplier') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+<i18n>
+es:
+    Supplier card: Ficha del proveedor
+    All travels with current agency: Todos los envíos con la agencia actual
+    All entries with current supplier: Todas las entradas con el proveedor actual
+    Show entry report: Ver informe del pedido
+    Go to module index: Ir al índice del modulo
+    Inventory entry: Es inventario
+    Virtual entry: Es una redada
+</i18n>

src/pages/Entry/Card/EntryDescriptorProxy.vue

@@ -0,0 +1,16 @@
+<script setup>
+import EntryDescriptor from './EntryDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <EntryDescriptor v-if="$props.id" :id="$props.id" />
+    </QPopupProxy>
+</template>

src/pages/Entry/Card/EntryLog.vue

@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Entry" url="/EntryLogs"></VnLog>
+</template>

src/pages/Entry/Card/EntryNotes.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import CrudModel from 'components/CrudModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const entryObservationsRef = ref(null);
+const entryObservationsOptions = ref([]);
+
+const sortEntryObservationOptions = (data) => {
+    entryObservationsOptions.value = [...data].sort((a, b) =>
+        a.description.localeCompare(b.description)
+    );
+};
+
+onMounted(() => {
+    if (entryObservationsRef.value) entryObservationsRef.value.reload();
+});
+</script>
+<template>
+    <FetchData
+        url="ObservationTypes"
+        @on-fetch="(data) => sortEntryObservationOptions(data)"
+        auto-load
+    />
+    <CrudModel
+        data-key="EntryAccount"
+        url="EntryObservations"
+        model="EntryAccount"
+        :filter="{
+            fields: ['id', 'entryFk', 'observationTypeFk', 'description'],
+            where: { entryFk: route.params.id },
+        }"
+        ref="entryObservationsRef"
+        :default-remove="false"
+        :data-required="{ entryFk: route.params.id }"
+    >
+        <template #body="{ rows, validate }">
+            <QCard class="q-pa-md">
+                <VnRow
+                    v-for="(row, index) in rows"
+                    :key="index"
+                    class="row q-gutter-md q-mb-md"
+                >
+                    <div class="col-3">
+                        <VnSelectFilter
+                            :label="t('entry.notes.observationType')"
+                            v-model="row.observationTypeFk"
+                            :options="entryObservationsOptions"
+                            :disable="!!row.id"
+                            option-label="description"
+                            option-value="id"
+                            hide-selected
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            :label="t('entry.notes.description')"
+                            v-model="row.description"
+                            :rules="validate('EntryObservation.description')"
+                        />
+                    </div>
+                    <div class="col-1 row justify-center items-center">
+                        <QIcon
+                            name="delete"
+                            size="sm"
+                            class="cursor-pointer"
+                            color="primary"
+                            @click="entryObservationsRef.remove([row])"
+                        >
+                            <QTooltip>
+                                {{ t('Remove note') }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
+                </VnRow>
+                <VnRow>
+                    <QIcon
+                        name="add"
+                        size="sm"
+                        class="cursor-pointer"
+                        color="primary"
+                        @click="entryObservationsRef.insert()"
+                    >
+                        <QTooltip>
+                            {{ t('Add note') }}
+                        </QTooltip>
+                    </QIcon>
+                </VnRow>
+            </QCard>
+        </template>
+    </CrudModel>
+</template>
+
+<i18n>
+    es:
+        Add note: Añadir nota
+        Remove note: Quitar nota
+</i18n>

src/pages/Entry/Card/EntrySummary.vue

@@ -0,0 +1,359 @@
+<script setup>
+import { onMounted, ref, computed, onUpdated } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+
+import { toDate, toCurrency } from 'src/filters';
+import { getUrl } from 'src/composables/getUrl';
+import axios from 'axios';
+
+onUpdated(() => summaryRef.value.fetch());
+
+const route = useRoute();
+const { t } = useI18n();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+});
+
+const entityId = computed(() => $props.id || route.params.id);
+const summaryRef = ref();
+const entry = ref();
+const entryBuys = ref([]);
+const entryUrl = ref();
+
+onMounted(async () => {
+    entryUrl.value = (await getUrl('entry/')) + entityId.value;
+});
+
+const tableColumnComponents = {
+    quantity: {
+        component: () => 'span',
+    },
+    stickers: {
+        component: () => 'span',
+    },
+    packagingFk: {
+        component: () => 'span',
+    },
+    weight: {
+        component: () => 'span',
+    },
+    packing: {
+        component: () => 'span',
+    },
+    grouping: {
+        component: () => 'span',
+    },
+    buyingValue: {
+        component: () => 'span',
+    },
+    amount: {
+        component: () => 'span',
+    },
+    pvp: {
+        component: () => 'span',
+    },
+};
+
+const entriesTableColumns = computed(() => {
+    return [
+        {
+            label: t('entry.summary.quantity'),
+            field: 'quantity',
+            name: 'quantity',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.stickers'),
+            field: 'stickers',
+            name: 'stickers',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.package'),
+            field: 'packagingFk',
+            name: 'packagingFk',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.weight'),
+            field: 'weight',
+            name: 'weight',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.packing'),
+            field: 'packing',
+            name: 'packing',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.grouping'),
+            field: 'grouping',
+            name: 'grouping',
+            align: 'left',
+        },
+        {
+            label: t('entry.summary.buyingValue'),
+            field: 'buyingValue',
+            name: 'buyingValue',
+            align: 'left',
+            format: (value) => toCurrency(value),
+        },
+        {
+            label: t('entry.summary.import'),
+            name: 'amount',
+            align: 'left',
+            format: (_, row) => toCurrency(row.buyingValue * row.quantity),
+        },
+        {
+            label: t('entry.summary.pvp'),
+            name: 'pvp',
+            align: 'left',
+            format: (_, row) => toCurrency(row.price2) + ' / ' + toCurrency(row.price3),
+        },
+    ];
+});
+
+async function setEntryData(data) {
+    if (data) entry.value = data;
+    await fetchEntryBuys();
+}
+
+const fetchEntryBuys = async () => {
+    try {
+        const { data } = await axios.get(`Entries/${entry.value.id}/getBuys`);
+        if (data) entryBuys.value = data;
+    } catch (err) {
+        console.error('Error fetching entry buys');
+    }
+};
+</script>
+
+<template>
+    <CardSummary
+        ref="summaryRef"
+        :url="`Entries/${entityId}/getEntry`"
+        @on-fetch="(data) => setEntryData(data)"
+    >
+        <template #header-left>
+            <a class="header link" :href="entryUrl">
+                <QIcon name="open_in_new" color="white" size="sm" />
+            </a>
+        </template>
+        <template #header>
+            <span>{{ entry.id }} - {{ entry.supplier.nickname }}</span>
+        </template>
+
+        <template #body>
+            <QCard class="vn-one">
+                <a class="header link" :href="entryUrl">
+                    {{ t('globals.summary.basicData') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <VnRow>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.commission')"
+                            :value="entry.commission"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.currency')"
+                            :value="entry.currency.name"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.company')"
+                            :value="entry.company.code"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.reference')"
+                            :value="entry.reference"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.invoiceNumber')"
+                            :value="entry.invoiceNumber"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.ordered')"
+                            :value="entry.isOrdered"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.confirmed')"
+                            :value="entry.isConfirmed"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.booked')"
+                            :value="entry.isBooked"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv :label="t('entry.summary.raid')" :value="entry.isRaid" />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.excludedFromAvailable')"
+                            :value="entry.isExcludedFromAvailable"
+                        />
+                    </div>
+                </VnRow>
+            </QCard>
+            <QCard class="vn-one">
+                <a class="header link" :href="entryUrl">
+                    {{ t('Travel data') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <VnRow>
+                    <div class="col">
+                        <VnLv :label="t('entry.summary.travelReference')">
+                            <template #value>
+                                <span class="link">
+                                    {{ entry.travel.ref }}
+                                    <TravelDescriptorProxy :id="entry.travel.id" />
+                                </span>
+                            </template>
+                        </VnLv>
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.travelAgency')"
+                            :value="entry.travel.agency.name"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.travelShipped')"
+                            :value="toDate(entry.travel.shipped)"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.travelWarehouseOut')"
+                            :value="entry.travel.warehouseOut.name"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.travelDelivered')"
+                            :value="entry.travel.isDelivered"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.travelLanded')"
+                            :value="toDate(entry.travel.landed)"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.travelWarehouseIn')"
+                            :value="entry.travel.warehouseIn.name"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnLv
+                            :label="t('entry.summary.travelReceived')"
+                            :value="entry.travel.isReceived"
+                        />
+                    </div>
+                </VnRow>
+            </QCard>
+            <QCard class="vn-two" style="min-width: 100%">
+                <a class="header">
+                    {{ t('entry.summary.buys') }}
+                </a>
+                <QTable
+                    :rows="entryBuys"
+                    :columns="entriesTableColumns"
+                    hide-bottom
+                    row-key="index"
+                    class="full-width q-mt-md"
+                >
+                    <template #body="{ cols, row, rowIndex }">
+                        <QTr no-hover>
+                            <QTd v-for="col in cols" :key="col.name">
+                                <component
+                                    :is="tableColumnComponents[col.name].component()"
+                                >
+                                    <template
+                                        v-if="
+                                            col.name !== 'observation' &&
+                                            col.name !== 'isConfirmed'
+                                        "
+                                        >{{ col.value }}</template
+                                    >
+                                    <QTooltip v-if="col.toolTip">{{
+                                        col.toolTip
+                                    }}</QTooltip>
+                                </component>
+                            </QTd>
+                        </QTr>
+                        <QTr no-hover>
+                            <QTd>
+                                <span>{{ row.item.itemType.code }}</span>
+                            </QTd>
+                            <QTd>
+                                <span>{{ row.item.id }}</span>
+                            </QTd>
+                            <QTd>
+                                <span>{{ row.item.size }}</span>
+                            </QTd>
+                            <QTd>
+                                <span>{{ toCurrency(row.item.minPrice) }}</span>
+                            </QTd>
+                            <QTd colspan="6">
+                                <span>{{ row.item.concept }}</span>
+                                <span v-if="row.item.subName" class="subName">
+                                    {{ row.item.subName }}
+                                </span>
+                                <fetched-tags :item="row.item" :max-length="5" />
+                            </QTd>
+                        </QTr>
+                        <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
+                        <QTr
+                            v-if="rowIndex !== entryBuys.length - 1"
+                            class="separation-row"
+                        >
+                            <QTd colspan="10" style="height: 24px" />
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+
+<style lang="scss" scoped>
+.separation-row {
+    background-color: var(--vn-gray) !important;
+}
+</style>
+
+<i18n>
+es:
+    Travel data: 'Datos envío'
+</i18n>

src/pages/Entry/Card/EntrySummaryDialog.vue

@@ -0,0 +1,29 @@
+<script setup>
+import { useDialogPluginComponent } from 'quasar';
+import EntrySummary from './EntrySummary.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+        <EntrySummary v-if="$props.id" :id="$props.id" />
+    </QDialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>

src/pages/Entry/EntryCreate.vue

@@ -1,28 +1,38 @@
 <script setup>
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
+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 FetchData from 'components/FetchData.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+import { useState } from 'src/composables/useState';
 import { toDate } from 'src/filters';
 
+const state = useState();
 const { t } = useI18n();
 const route = useRoute();
+const router = useRouter();
+const stateStore = useStateStore();
 
+const user = state.getUser();
 const newEntryForm = reactive({
     supplierFk: null,
     travelFk: route.query?.travelFk || null,
-    companyFk: null,
+    companyFk: user.value.companyFk || null,
 });
-
 const suppliersOptions = ref([]);
 const travelsOptionsOptions = ref([]);
 const companiesOptions = ref([]);
+
+const redirectToEntryBasicData = (_, { id }) => {
+    router.push({ name: 'EntryBasicData', params: { id } });
+};
 </script>
 
 <template>
@@ -48,79 +58,99 @@ const companiesOptions = ref([]);
         @on-fetch="(data) => (companiesOptions = data)"
         auto-load
     />
-
-    <!-- Agregar searchbar de entries -->
-
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                url="Entries/filter"
+                custom-route-redirect-name="EntrySummary"
+                data-key="EntrySummary"
+                :label="t('Search entries')"
+                :info="t('You can search by entry reference')"
+            />
+        </Teleport>
+    </template>
     <QPage>
         <VnSubToolbar />
-        <FormModel url-create="Entries" model="entry" :form-initial-data="newEntryForm">
+        <FormModel
+            url-create="Entries"
+            model="entry"
+            :form-initial-data="newEntryForm"
+            @on-data-saved="redirectToEntryBasicData"
+        >
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelectFilter
-                        :label="t('Supplier')"
-                        class="full-width"
-                        v-model="data.supplierFk"
-                        :options="suppliersOptions"
-                        option-value="id"
-                        option-label="nickname"
-                        hide-selected
-                        :required="true"
-                        :rules="validate('entry.supplierFk')"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        #{{ scope.opt?.id }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Supplier')"
+                            class="full-width"
+                            v-model="data.supplierFk"
+                            :options="suppliersOptions"
+                            option-value="id"
+                            option-label="nickname"
+                            hide-selected
+                            :required="true"
+                            :rules="validate('entry.supplierFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
+                                        <QItemLabel caption>
+                                            #{{ scope.opt?.id }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelectFilter
-                        :label="t('Travel')"
-                        class="full-width"
-                        v-model="data.travelFk"
-                        :options="travelsOptionsOptions"
-                        option-value="id"
-                        option-label="warehouseInName"
-                        map-options
-                        hide-selected
-                        :required="true"
-                        :rules="validate('entry.travelFk')"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel
-                                        >{{ scope.opt?.agencyModeName }} -
-                                        {{ scope.opt?.warehouseInName }} ({{
-                                            toDate(scope.opt?.shipped)
-                                        }}) &#x2192; {{ scope.opt?.warehouseOutName }} ({{
-                                            toDate(scope.opt?.landed)
-                                        }})</QItemLabel
-                                    >
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Travel')"
+                            class="full-width"
+                            v-model="data.travelFk"
+                            :options="travelsOptionsOptions"
+                            option-value="id"
+                            option-label="warehouseInName"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('entry.travelFk')"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt?.agencyModeName }} -
+                                            {{ scope.opt?.warehouseInName }} ({{
+                                                toDate(scope.opt?.shipped)
+                                            }}) &#x2192;
+                                            {{ scope.opt?.warehouseOutName }} ({{
+                                                toDate(scope.opt?.landed)
+                                            }})</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelectFilter
-                        :label="t('Company')"
-                        class="full-width"
-                        v-model="data.companyFk"
-                        :options="companiesOptions"
-                        option-value="id"
-                        option-label="code"
-                        map-options
-                        hide-selected
-                        :required="true"
-                        :rules="validate('entry.companyFk')"
-                    />
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Company')"
+                            class="full-width"
+                            v-model="data.companyFk"
+                            :options="companiesOptions"
+                            option-value="id"
+                            option-label="code"
+                            map-options
+                            hide-selected
+                            :required="true"
+                            :rules="validate('entry.companyFk')"
+                        />
+                    </div>
                 </VnRow>
             </template>
         </FormModel>

src/pages/Entry/EntryFilter.vue

@@ -0,0 +1,241 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const currenciesOptions = ref([]);
+const companiesOptions = ref([]);
+const suppliersOptions = ref([]);
+</script>
+
+<template>
+    <FetchData
+        ref="companiesRef"
+        url="Companies"
+        :filter="{ fields: ['id', 'code'] }"
+        order="code"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="currenciesRef"
+        url="Currencies"
+        :filter="{ fields: ['id', 'name'] }"
+        order="code"
+        @on-fetch="(data) => (currenciesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Suppliers"
+        :filter="{ fields: ['id', 'nickname', 'name'] }"
+        order="nickname"
+        @on-fetch="(data) => (suppliersOptions = data)"
+        auto-load
+    />
+
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.search"
+                        :label="t('params.search')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.reference"
+                        :label="t('params.reference')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.invoiceNumber"
+                        :label="t('params.invoiceNumber')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.travelFk"
+                        :label="t('params.travelFk')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.companyFk')"
+                        v-model="params.companyFk"
+                        @update:model-value="searchFn()"
+                        :options="companiesOptions"
+                        option-value="id"
+                        option-label="code"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.currencyFk')"
+                        v-model="params.currencyFk"
+                        @update:model-value="searchFn()"
+                        :options="currenciesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.supplierFk')"
+                        v-model="params.supplierFk"
+                        @update:model-value="searchFn()"
+                        :options="suppliersOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        scope.opt?.name + ': ' + scope.opt?.nickname
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.created')"
+                        v-model="params.created"
+                        @update:model-value="searchFn()"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.from')"
+                        v-model="params.from"
+                        @update:model-value="searchFn()"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.to')"
+                        v-model="params.to"
+                        @update:model-value="searchFn()"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.isBooked')"
+                        v-model="params.isBooked"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.isConfirmed')"
+                        v-model="params.isConfirmed"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.isOrdered')"
+                        v-model="params.isOrdered"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        search: General search
+        reference: Reference
+        invoiceNumber: Invoice number
+        travelFk: Travel
+        companyFk: Company
+        currencyFk: Currency
+        supplierFk: Supplier
+        from: From
+        to: To
+        created: Created
+        isBooked: Booked
+        isConfirmed: Confirmed
+        isOrdered: Ordered
+es:
+    params:
+        search: Búsqueda general
+        reference: Referencia
+        invoiceNumber: Núm. factura
+        travelFk: Envío
+        companyFk: Empresa
+        currencyFk: Moneda
+        supplierFk: Proveedor
+        from: Desde
+        to: Hasta
+        created: Fecha creación
+        isBooked: Asentado
+        isConfirmed: Confirmado
+        isOrdered: Pedida
+</i18n>

src/pages/Entry/EntryLatestBuys.vue

@@ -0,0 +1,348 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toDate, toCurrency } from 'src/filters';
+import { useSession } from 'composables/useSession';
+import { dashIfEmpty } from 'src/filters';
+
+const router = useRouter();
+const session = useSession();
+const token = session.getToken();
+const stateStore = useStateStore();
+const { t } = useI18n();
+
+const rowsFetchDataRef = ref(null);
+const editTableCellDialogRef = ref(null);
+const visibleColumns = ref([]);
+const allColumnNames = ref([]);
+const rows = ref([]);
+const rowsSelected = ref([]);
+const columns = computed(() => [
+    {
+        label: t('entry.latestBuys.picture'),
+        name: 'picture',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.itemFk'),
+        name: 'itemFk',
+        field: 'itemFk',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.packing'),
+        field: 'packing',
+        name: 'packing',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.grouping'),
+        field: 'grouping',
+        name: 'grouping',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.quantity'),
+        field: 'quantity',
+        name: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.description'),
+        field: 'description',
+        name: 'description',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.size'),
+        field: 'size',
+        name: 'size',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.tags'),
+        name: 'tags',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.type'),
+        field: 'code',
+        name: 'type',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.intrastat'),
+        field: 'intrastat',
+        name: 'intrastat',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.origin'),
+        field: 'origin',
+        name: 'origin',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.weightByPiece'),
+        field: 'weightByPiece',
+        name: 'weightByPiece',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.isActive'),
+        field: 'isActive',
+        name: 'isActive',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.family'),
+        field: 'family',
+        name: 'family',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.entryFk'),
+        field: 'entryFk',
+        name: 'entryFk',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.buyingValue'),
+        field: 'buyingValue',
+        name: 'buyingValue',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.freightValue'),
+        field: 'freightValue',
+        name: 'freightValue',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.comissionValue'),
+        field: 'comissionValue',
+        name: 'comissionValue',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.packageValue'),
+        field: 'packageValue',
+        name: 'packageValue',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.isIgnored'),
+        field: 'isIgnored',
+        name: 'isIgnored',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.price2'),
+        field: 'price2',
+        name: 'price2',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.price3'),
+        field: 'price3',
+        name: 'price3',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.minPrice'),
+        field: 'minPrice',
+        name: 'minPrice',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('entry.latestBuys.ektFk'),
+        field: 'ektFk',
+        name: 'ektFk',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.weight'),
+        field: 'weight',
+        name: 'weight',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.packagingFk'),
+        field: 'packagingFk',
+        name: 'packagingFk',
+        align: 'left',
+    },
+    {
+        label: t('entry.latestBuys.packingOut'),
+        field: 'packingOut',
+        name: 'packingOut',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('entry.latestBuys.landing'),
+        field: 'landing',
+        name: 'landing',
+        align: 'left',
+        format: (val) => toDate(val),
+    },
+]);
+
+const editTableCellFormFieldsOptions = [
+    { field: 'packing', label: t('entry.latestBuys.packing') },
+    { field: 'grouping', label: t('entry.latestBuys.grouping') },
+    { field: 'packageValue', label: t('entry.latestBuys.packageValue') },
+    { field: 'weight', label: t('entry.latestBuys.weight') },
+    { field: 'description', label: t('entry.latestBuys.description') },
+    { field: 'size', label: t('entry.latestBuys.size') },
+    { field: 'weightByPiece', label: t('entry.latestBuys.weightByPiece') },
+    { field: 'packingOut', label: t('entry.latestBuys.packingOut') },
+    { field: 'landing', label: t('entry.latestBuys.landing') },
+];
+
+const openEditTableCellDialog = () => {
+    editTableCellDialogRef.value.show();
+};
+
+const onEditCellDataSaved = async () => {
+    rowsSelected.value = [];
+    await rowsFetchDataRef.value.fetch();
+};
+
+const redirectToEntryBuys = (entryFk) => {
+    router.push({ name: 'EntryBuys', params: { id: entryFk } });
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+});
+</script>
+
+<template>
+    <FetchData
+        ref="rowsFetchDataRef"
+        url="Buys/latestBuysFilter"
+        :filter="{ order: 'itemFk DESC', limit: 20 }"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+    />
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data">
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="latestBuys"
+                labels-traductions-path="entry.latestBuys"
+                @on-config-saved="visibleColumns = ['picture', ...$event]"
+            />
+        </div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="rows"
+            :columns="columns"
+            hide-bottom
+            selection="multiple"
+            row-key="id"
+            :pagination="{ rowsPerPage: 0 }"
+            class="full-width q-mt-md"
+            :visible-columns="visibleColumns"
+            v-model:selected="rowsSelected"
+            @row-click="(_, row) => redirectToEntryBuys(row.entryFk)"
+        >
+            <template #body-cell-picture="{ row }">
+                <QTd>
+                    <QImg
+                        :src="`/api/Images/catalog/50x50/${row.itemFk}/download?access_token=${token}`"
+                        spinner-color="primary"
+                        :ratio="1"
+                        height="50px"
+                        width="50px"
+                        class="image"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-itemFk="{ row }">
+                <QTd @click.stop>
+                    <QBtn flat color="blue">
+                        {{ row.itemFk }}
+                    </QBtn>
+                </QTd>
+            </template>
+            <template #body-cell-tags="{ row }">
+                <QTd>
+                    <fetched-tags :item="row" :max-length="6" />
+                </QTd>
+            </template>
+            <template #body-cell-entryFk="{ row }">
+                <QTd @click.stop>
+                    <QBtn flat color="blue">
+                        <EntryDescriptorProxy :id="row.entryFk" />
+                        {{ row.entryFk }}
+                    </QBtn>
+                </QTd>
+            </template>
+            <template #body-cell-isIgnored="{ row }">
+                <QTd>
+                    <QIcon
+                        :name="row.isIgnored ? `check` : `close`"
+                        :color="row.isIgnored ? `positive` : `negative`"
+                        size="sm"
+                    />
+                </QTd>
+            </template>
+            <template #body-cell-isActive="{ row }">
+                <QTd>
+                    <QIcon
+                        :name="row.isActive ? `check` : `close`"
+                        :color="row.isActive ? `positive` : `negative`"
+                        size="sm"
+                    />
+                </QTd>
+            </template>
+        </QTable>
+        <QPageSticky v-if="rowsSelected.length > 0" :offset="[20, 20]">
+            <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
+            <QTooltip>
+                {{ t('Edit buy(s)') }}
+            </QTooltip>
+        </QPageSticky>
+        <QDialog ref="editTableCellDialogRef">
+            <EditTableCellValueForm
+                edit-url="Buys/editLatestBuys"
+                :rows="rowsSelected"
+                :fields-options="editTableCellFormFieldsOptions"
+                @on-data-saved="onEditCellDataSaved()"
+            />
+        </QDialog>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    Edit buy(s): Editar compra(s)
+</i18n>

src/pages/Entry/EntryList.vue

@@ -1,22 +1,148 @@
 <script setup>
+import { onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import EntrySummaryDialog from './Card/EntrySummaryDialog.vue';
+import EntryFilter from './EntryFilter.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'src/filters/index';
+
+const stateStore = useStateStore();
 const router = useRouter();
+const quasar = useQuasar();
 const { t } = useI18n();
 
+function navigate(id) {
+    router.push({ path: `/entry/${id}` });
+}
+
 const redirectToCreateView = () => {
     router.push({ name: 'EntryCreate' });
 };
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: EntrySummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+});
 </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.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <EntryFilter data-key="EntryList" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
-            <QTooltip>
-                {{ t('entry.list.newEntry') }}
-            </QTooltip>
-        </QPageSticky>
+        <div class="vn-card-list">
+            <VnPaginate
+                data-key="EntryList"
+                url="Entries/filter"
+                :order="['landed DESC', 'id DESC']"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :key="row.id"
+                        :title="row.reference"
+                        @click="navigate(row.id)"
+                        :id="row.id"
+                        :has-info-icons="!!row.isExcludedFromAvailable || !!row.isRaid"
+                    >
+                        <template #info-icons>
+                            <QIcon
+                                v-if="row.isExcludedFromAvailable"
+                                name="vn:inventory"
+                                color="primary"
+                                size="xs"
+                            >
+                                <QTooltip>{{ t('Inventory entry') }}</QTooltip>
+                            </QIcon>
+                            <QIcon
+                                v-if="row.isRaid"
+                                name="vn:web"
+                                color="primary"
+                                size="xs"
+                            >
+                                <QTooltip>{{ t('Virtual entry') }}</QTooltip>
+                            </QIcon>
+                        </template>
+                        <template #list-items>
+                            <VnLv
+                                :label="t('entry.list.landed')"
+                                :value="toDate(row.landed)"
+                            />
+                            <VnLv
+                                :label="t('entry.list.booked')"
+                                :value="!!row.isBooked"
+                            />
+                            <VnLv
+                                :label="t('entry.list.invoiceNumber')"
+                                :value="row.invoiceNumber"
+                            />
+                            <VnLv
+                                :label="t('entry.list.confirmed')"
+                                :value="!!row.isConfirmed"
+                            />
+                            <VnLv
+                                :label="t('entry.list.supplier')"
+                                :value="row.supplierName"
+                            />
+                            <VnLv
+                                :label="t('entry.list.ordered')"
+                                :value="!!row.isOrdered"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id)"
+                                color="primary"
+                                type="submit"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
     </QPage>
+    <QPageSticky :offset="[20, 20]">
+        <QBtn fab icon="add" color="primary" @click="redirectToCreateView()" />
+        <QTooltip>
+            {{ t('entry.list.newEntry') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<i18n>
+es:
+    Inventory entry: Es inventario
+    Virtual entry: Es una redada
+    Search entries: Buscar entradas
+    You can search by entry reference: Puedes buscar por referencia de la entrada
+</i18n>

src/pages/Entry/EntryMain.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'src/components/LeftMenu.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
 const stateStore = useStateStore();
 </script>
 

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -4,11 +4,12 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useArrayData } from 'src/composables/useArrayData';
-
 import { downloadFile } from 'src/composables/downloadFile';
-import FetchData from 'src/components/FetchData.vue';
+
 import FormModel from 'components/FormModel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import FetchData from 'src/components/FetchData.vue';
+
 import axios from 'axios';
 
 const quasar = useQuasar();
@@ -21,9 +22,6 @@ const arrayData = useArrayData('InvoiceIn');
 const invoiceIn = computed(() => arrayData.store.data);
 const userConfig = ref(null);
 
-const suppliers = ref([]);
-const suppliersRef = ref();
-const suppliersRefFilter = ref({ fields: ['id', 'nickname'], limit: 30 });
 const currencies = ref([]);
 const currenciesRef = ref();
 const companies = ref([]);
@@ -131,31 +129,13 @@ async function upsert() {
         });
     }
 }
-
-function supplierRefFilter(val) {
-    let where = { limit: 30 };
-    let params = {};
-    let key = 'nickname';
-
-    if (new RegExp(/\d/g).test(val)) {
-        key = 'id';
-    }
-    params = { [key]: { like: `%${val}%` } };
-    where = Object.assign(where, params);
-    suppliersRef.value.fetch({ where });
-}
 </script>
 <template>
-    <FetchData
-        ref="suppliersRef"
-        url="Suppliers"
-        @on-fetch="(data) => (suppliers = data)"
-    />
     <FetchData
         ref="currenciesRef"
         url="Currencies"
         :filter="{ fields: ['id', 'code'] }"
-        order="code"
+        sort-by="code"
         @on-fetch="(data) => (currencies = data)"
         auto-load
     />
@@ -163,7 +143,7 @@ function supplierRefFilter(val) {
         ref="companiesRef"
         url="Companies"
         :filter="{ fields: ['id', 'code'] }"
-        order="code"
+        sort-by="code"
         @on-fetch="(data) => (companies = data)"
         auto-load
     />
@@ -171,7 +151,7 @@ function supplierRefFilter(val) {
         ref="dmsTypesRef"
         url="DmsTypes"
         :filter="{ fields: ['id', 'name'] }"
-        order="name"
+        sort-by="name"
         @on-fetch="(data) => (dmsTypes = data)"
         auto-load
     />
@@ -179,7 +159,7 @@ function supplierRefFilter(val) {
         ref="warehousesRef"
         url="Warehouses"
         :filter="{ fields: ['id', 'name'] }"
-        order="name"
+        sort-by="name"
         @on-fetch="(data) => (warehouses = data)"
         auto-load
     />
@@ -199,15 +179,13 @@ function supplierRefFilter(val) {
             <div class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelectFilter
-                        v-if="suppliersRef"
                         :label="t('supplierFk')"
                         v-model="data.supplierFk"
-                        :options="suppliers"
                         option-value="id"
                         option-label="nickname"
-                        :input-debounce="100"
-                        @input-value="supplierRefFilter"
-                        :default-filter="false"
+                        url="Suppliers"
+                        :fields="['id', 'nickname']"
+                        sort-by="nickname"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -418,7 +396,6 @@ function supplierRefFilter(val) {
             <div class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelectFilter
-                        v-if="currenciesRef"
                         :label="t('Currency')"
                         v-model="data.currencyFk"
                         :options="currencies"

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -36,55 +36,121 @@ const suppliersRef = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="list q-gutter-y-sm q-mt-sm">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Id or Supplier')"
+                        v-model="params.search"
+                        is-outlined
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.supplierRef')"
+                        v-model="params.supplierRef"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="vn:client" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.supplierFk')"
+                        v-model="params.supplierFk"
+                        :options="suppliers"
+                        option-value="id"
+                        option-label="nickname"
+                        @input-value="suppliersRef.fetch()"
+                        dense
+                        outlined
+                        rounded
+                    >
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.fi')"
+                        v-model="params.fi"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.serialNumber')"
+                        v-model="params.serialNumber"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('params.serial')"
+                        v-model="params.serial"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="badge" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Amount')"
+                        v-model="params.amount"
+                        is-outlined
+                        lazy-rules
+                    >
+                        <template #prepend>
+                            <QIcon name="euro" size="sm"></QIcon>
+                        </template>
+                    </VnInput>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-md">
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.isBooked')"
+                        v-model="params.isBooked"
+                        @update:model-value="searchFn()"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
                     <QItemSection>
                         <VnInput
-                            :label="t('Id or Supplier')"
-                            v-model="params.search"
-                            is-outlined
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('params.supplierRef')"
-                            v-model="params.supplierRef"
-                            is-outlined
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnSelectFilter
-                            :label="t('params.supplierFk')"
-                            v-model="params.supplierFk"
-                            :options="suppliers"
-                            option-value="id"
-                            option-label="nickname"
-                            @input-value="suppliersRef.fetch()"
-                            dense
-                            outlined
-                            rounded
-                        >
-                        </VnSelectFilter>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('params.fi')"
-                            v-model="params.fi"
+                            :label="t('params.awb')"
+                            v-model="params.awbCode"
                             is-outlined
                             lazy-rules
                         >
@@ -97,126 +163,45 @@ const suppliersRef = ref();
                 <QItem>
                     <QItemSection>
                         <VnInput
-                            :label="t('params.serialNumber')"
-                            v-model="params.serialNumber"
+                            :label="t('params.account')"
+                            v-model="params.account"
                             is-outlined
                             lazy-rules
                         >
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
+                                <QIcon name="person" size="sm" />
                             </template>
                         </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput
-                            :label="t('params.serial')"
-                            v-model="params.serial"
+                        <VnInputDate
+                            :label="t('From')"
+                            v-model="params.from"
                             is-outlined
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Amount')"
-                            v-model="params.amount"
-                            is-outlined
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
-                            </template>
-                        </VnInput>
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-md">
-                    <QItemSection>
-                        <QCheckbox
-                            :label="t('params.isBooked')"
-                            v-model="params.isBooked"
-                            @update:model-value="searchFn()"
-                            toggle-indeterminate
                         />
                     </QItemSection>
                 </QItem>
-                <QExpansionItem :label="t('More options')" expand-separator>
-                    <QItem>
-                        <QItemSection>
-                            <VnInput
-                                :label="t('params.awb')"
-                                v-model="params.awbCode"
-                                is-outlined
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <QIcon name="badge" size="sm"></QIcon>
-                                </template>
-                            </VnInput>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInput
-                                :label="t('params.account')"
-                                v-model="params.account"
-                                is-outlined
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <QIcon name="person" size="sm" />
-                                </template>
-                            </VnInput>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                :label="t('From')"
-                                v-model="params.from"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                :label="t('To')"
-                                v-model="params.to"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                :label="t('Issued')"
-                                v-model="params.issued"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            :label="t('Issued')"
+                            v-model="params.issued"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.list {
-    width: 256px;
-}
-.list * {
-    max-width: 100%;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/InvoiceIn/InvoiceInList.vue

@@ -71,7 +71,7 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="InvoiceInList"
                 url="InvoiceIns/filter"
@@ -156,13 +156,6 @@ function viewSummary(id) {
     </QPageSticky>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search invoice: Buscar factura emitida

src/pages/InvoiceOut/InvoiceOutFilter.vue

@@ -41,95 +41,89 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        :label="t('Customer ID')"
+                        v-model="params.clientFk"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput v-model="params.fi" :label="t('FI')" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('Amount')" v-model="params.amount" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QInput
+                        :label="t('Min')"
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                        type="number"
+                        v-model.number="params.min"
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <QInput
+                        :label="t('Max')"
+                        dense
+                        lazy-rules
+                        outlined
+                        rounded
+                        type="number"
+                        v-model.number="params.max"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('Has PDF')"
+                        @update:model-value="searchFn()"
+                        toggle-indeterminate
+                        v-model="params.hasPdf"
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
                     <QItemSection>
-                        <VnInput
-                            :label="t('Customer ID')"
-                            v-model="params.clientFk"
+                        <VnInputDate
+                            v-model="params.issued"
+                            :label="t('Issued')"
                             is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput v-model="params.fi" :label="t('FI')" is-outlined />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('Amount')"
-                            v-model="params.amount"
+                        <VnInputDate
+                            v-model="params.created"
+                            :label="t('Created')"
                             is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('Min')"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
-                            type="number"
-                            v-model.number="params.min"
-                        />
-                    </QItemSection>
-                    <QItemSection>
-                        <QInput
-                            :label="t('Max')"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
-                            type="number"
-                            v-model.number="params.max"
+                        <VnInputDate
+                            v-model="params.dued"
+                            :label="t('Dued')"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QCheckbox
-                            :label="t('Has PDF')"
-                            @update:model-value="searchFn()"
-                            toggle-indeterminate
-                            v-model="params.hasPdf"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QExpansionItem :label="t('More options')" expand-separator>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                v-model="params.issued"
-                                :label="t('Issued')"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                v-model="params.created"
-                                :label="t('Created')"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate
-                                v-model="params.dued"
-                                :label="t('Dued')"
-                                is-outlined
-                            />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -11,6 +11,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const selectedCards = ref(new Map());
@@ -129,8 +130,8 @@ const downloadCsv = () => {
             url="InvoiceOuts/filter"
         >
             <template #body="{ rows }">
-                <QToolbar class="bg-vn-dark justify-end">
-                    <div id="st-actions">
+                <VnSubToolbar class="bg-vn-dark justify-end">
+                    <template #st-actions>
                         <QBtn
                             @click="downloadCsv()"
                             class="q-mr-xl"
@@ -178,10 +179,10 @@ const downloadCsv = () => {
                             :model-value="selectedCards.size === rows.length"
                             class="q-mr-md"
                         />
-                    </div>
-                </QToolbar>
+                    </template>
+                </VnSubToolbar>
                 <div class="flex flex-center q-pa-md">
-                    <div class="card-list">
+                    <div class="vn-card-list">
                         <CardList
                             :element="row"
                             :id="row.id"
@@ -246,13 +247,6 @@ const downloadCsv = () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 en:
     searchInvoice: Search issued invoice

src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue

@@ -27,87 +27,83 @@ const props = defineProps({
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense class="q-gutter-y-sm q-mt-sm">
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.from"
-                            :label="t('invoiceOut.negativeBases.from')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.to"
-                            :label="t('invoiceOut.negativeBases.to')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.company"
-                            :label="t('invoiceOut.negativeBases.company')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.country"
-                            :label="t('invoiceOut.negativeBases.country')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.from"
+                        :label="t('invoiceOut.negativeBases.from')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        v-model="params.to"
+                        :label="t('invoiceOut.negativeBases.to')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.company"
+                        :label="t('invoiceOut.negativeBases.company')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.country"
+                        :label="t('invoiceOut.negativeBases.country')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
 
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.clientId"
-                            :label="t('invoiceOut.negativeBases.clientId')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.clientSocialName"
-                            :label="t('invoiceOut.negativeBases.client')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.amount"
-                            :label="t('invoiceOut.negativeBases.amount')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            v-model="params.comercialName"
-                            :label="t('invoiceOut.negativeBases.comercial')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-            </QList>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.clientId"
+                        :label="t('invoiceOut.negativeBases.clientId')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.clientSocialName"
+                        :label="t('invoiceOut.negativeBases.client')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.amount"
+                        :label="t('invoiceOut.negativeBases.amount')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInput
+                        v-model="params.comercialName"
+                        :label="t('invoiceOut.negativeBases.comercial')"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
 
-<style scoped></style>
-
 <i18n>
 en:
     params:

src/pages/Item/Card/ItemCard.vue

@@ -0,0 +1,25 @@
+<script setup>
+import LeftMenu from 'components/LeftMenu.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import ItemDescriptor from './ItemDescriptor.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+</script>
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <ItemDescriptor />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+
+            <div class="q-pa-md"><RouterView></RouterView></div>
+        </QPage>
+    </QPageContainer>
+</template>

src/pages/Item/Card/ItemDescriptor.vue

@@ -0,0 +1,316 @@
+<script setup>
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+
+import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import RegularizeStockForm from 'components/RegularizeStockForm.vue';
+import EditPictureForm from 'components/EditPictureForm.vue';
+
+import { useState } from 'src/composables/useState';
+import useCardDescription from 'src/composables/useCardDescription';
+import { useSession } from 'src/composables/useSession';
+import axios from 'axios';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: false,
+        default: null,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+    dated: {
+        type: String,
+        default: null,
+    },
+});
+
+const quasar = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { getToken } = useSession();
+const state = useState();
+const user = state.getUser();
+
+const entityId = computed(() => {
+    return $props.id || route.params.id;
+});
+const image = ref(null);
+const regularizeStockFormDialog = ref(null);
+const editPhotoFormDialog = ref(null);
+const item = ref(null);
+const available = ref(null);
+const visible = ref(null);
+const _warehouseFk = ref(null);
+const warehouseText = ref(null);
+const warehouseFk = computed({
+    get() {
+        return _warehouseFk.value;
+    },
+    set(val) {
+        _warehouseFk.value = val;
+        if (val) {
+            updateStock();
+            getWarehouseName(val);
+        }
+    },
+});
+const showWarehouseIconTooltip = ref(true);
+const showEditPhotoForm = ref(false);
+
+onMounted(async () => {
+    await getItemAvatar();
+    warehouseFk.value = user.value.warehouseFk;
+});
+
+const getItemAvatar = async () => {
+    const token = getToken();
+    const timeStamp = `timestamp=${Date.now()}`;
+    image.value = `/api/Images/catalog/200x200/${entityId.value}/download?access_token=${token}&${timeStamp}`;
+};
+
+const data = ref(useCardDescription());
+const setData = (entity) => {
+    if (!entity) return;
+    data.value = useCardDescription(entity.name, entity.id);
+};
+
+const getWarehouseName = async (warehouseFk) => {
+    try {
+        showWarehouseIconTooltip.value = false;
+
+        const filter = {
+            where: { id: warehouseFk },
+        };
+
+        const { data } = await axios.get('Warehouses/findOne', { filter });
+
+        warehouseText.value = t('item.descriptor.warehouseText', {
+            warehouseName: data.name,
+        });
+
+        showWarehouseIconTooltip.value = true;
+    } catch (err) {
+        console.error('Error finding warehouse');
+    }
+};
+
+const updateStock = async () => {
+    try {
+        available.value = null;
+        visible.value = null;
+
+        const params = {
+            warehouseFk: warehouseFk.value,
+            dated: $props.dated,
+        };
+
+        const { data } = await axios.get(`Items/${entityId.value}/getVisibleAvailable`, {
+            params,
+        });
+
+        available.value = data.available;
+        visible.value = data.visible;
+    } catch (err) {
+        console.error('Error updating stock');
+    }
+};
+
+const openRegularizeStockForm = () => {
+    regularizeStockFormDialog.value.show();
+};
+
+const toggleEditPictureForm = () => {
+    showEditPhotoForm.value = !showEditPhotoForm.value;
+};
+
+const cloneItem = async () => {
+    try {
+        const { data } = await axios.post(`Items/${entityId.value}/clone`);
+        router.push({ name: 'ItemTags', params: { id: data.id } });
+    } catch (err) {
+        console.error('Error cloning item');
+    }
+};
+
+const openCloneDialog = async () => {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t("All it's properties will be copied"),
+                message: t('Do you want to clone this item?'),
+            },
+        })
+        .onOk(async () => {
+            await cloneItem();
+        });
+};
+</script>
+
+<template>
+    <CardDescriptor
+        data-key="ItemData"
+        module="Item"
+        :title="data.title"
+        :subtitle="data.subtitle"
+        :summary="$props.summary"
+        :url="`Items/${entityId}/getCard`"
+        @on-fetch="
+            (data) => {
+                item = data;
+                setData(data);
+            }
+        "
+    >
+        <template #menu="{}">
+            <QItem v-ripple clickable @click="openRegularizeStockForm()">
+                <QItemSection>
+                    {{ t('Regularize stock') }}
+                    <QDialog ref="regularizeStockFormDialog">
+                        <RegularizeStockForm
+                            :item-fk="entityId"
+                            :warehouse-fk="warehouseFk"
+                            @on-data-saved="updateStock()"
+                        />
+                    </QDialog>
+                </QItemSection>
+            </QItem>
+            <QItem v-ripple clickable @click="openCloneDialog()">
+                <QItemSection>
+                    {{ t('Clone') }}
+                </QItemSection>
+            </QItem>
+        </template>
+        <template #before>
+            <div class="relative-position">
+                <QImg :src="image" spinner-color="primary" class="photo">
+                    <template #error>
+                        <div
+                            class="absolute-full picture text-center q-pa-md flex flex-center"
+                        >
+                            <div>
+                                <div
+                                    class="text-grey-5"
+                                    style="opacity: 0.4; font-size: 5vh"
+                                >
+                                    <QIcon name="vn:item" />
+                                </div>
+                                <div class="text-grey-5" style="opacity: 0.4">
+                                    {{ t('item.descriptor.item') }}
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </QImg>
+                <QBtn
+                    color="primary"
+                    size="lg"
+                    round
+                    class="edit-photo-btn"
+                    @click="toggleEditPictureForm()"
+                >
+                    <QIcon name="edit" size="sm" />
+                    <QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
+                        <EditPictureForm
+                            collection="catalog"
+                            :id="entityId"
+                            @close-form="toggleEditPictureForm()"
+                            @on-photo-uploaded="getItemAvatar()"
+                        />
+                    </QDialog>
+                </QBtn>
+            </div>
+
+            <div
+                class="row justify-between items-center full-width bg-primary"
+                style="height: 54px"
+            >
+                <div class="col column items-center">
+                    <span class="text-uppercase color-vn-white" style="font-size: 11px">
+                        {{ t('item.descriptor.visible') }}
+                    </span>
+                    <span class="text-weight-bold text-h5 color-vn-white">{{
+                        visible
+                    }}</span>
+                </div>
+                <div
+                    class="col column items-center separation-borders"
+                    style="font-size: 11px"
+                >
+                    <span class="text-uppercase color-vn-white">
+                        {{ t('item.descriptor.available') }}
+                    </span>
+                    <span class="text-weight-bold text-h5 color-vn-white">{{
+                        available
+                    }}</span>
+                </div>
+                <div class="col column items-center justify-center">
+                    <QIcon name="info" class="cursor-pointer color-vn-white" size="md">
+                        <QTooltip>{{ warehouseText }}</QTooltip>
+                    </QIcon>
+                </div>
+            </div>
+        </template>
+        <template #body="{ entity }">
+            <VnLv :label="t('item.descriptor.buyer')">
+                <template #value>
+                    <span class="link">
+                        {{ t('item.descriptor.buyer') }}
+                        <WorkerDescriptorProxy :id="entity.itemType?.worker?.id" />
+                    </span>
+                </template>
+            </VnLv>
+            <VnLv :label="t('item.descriptor.color')" :value="entity.value5"> </VnLv>
+            <VnLv :label="t('item.descriptor.color')" :value="entity.value6" />
+            <VnLv :label="t('item.descriptor.stems')" :value="entity.value7" />
+        </template>
+        <template #actions="{}">
+            <QCardActions class="row justify-center">
+                <QBtn
+                    :to="{ name: 'ItemDiary' }"
+                    size="md"
+                    icon="vn:transaction"
+                    color="primary"
+                >
+                    <QTooltip>{{ t('item.descriptor.itemDiary') }}</QTooltip>
+                </QBtn>
+            </QCardActions>
+        </template>
+    </CardDescriptor>
+</template>
+
+<i18n>
+es:
+    Regularize stock: Regularizar stock
+    Clone: Clonar
+    All it's properties will be copied: Todas sus propiedades serán copiadas
+    Do you want to clone this item?: ¿Desea clonar este artículo?
+</i18n>
+
+<style lang="scss" scoped>
+.photo {
+    height: 256px;
+}
+
+.edit-photo-btn {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    z-index: 1;
+    cursor: pointer;
+}
+
+.separation-borders {
+    border-left: 1px solid $white;
+    border-right: 1px solid $white;
+}
+</style>

src/pages/Item/Card/ItemDescriptorProxy.vue

@@ -0,0 +1,26 @@
+<script setup>
+import ItemDescriptor from './ItemDescriptor.vue';
+import ItemSummaryDialog from './ItemSummaryDialog.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    dated: {
+        type: String,
+        default: null,
+    },
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <ItemDescriptor
+            v-if="$props.id"
+            :id="$props.id"
+            :summary="ItemSummaryDialog"
+            :dated="dated"
+        />
+    </QPopupProxy>
+</template>

src/pages/Item/Card/ItemDiary.vue

@@ -0,0 +1 @@
+<template>Item diary (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>

src/pages/Item/Card/ItemSummary.vue

@@ -0,0 +1 @@
+<template>Item summary</template>

src/pages/Item/Card/ItemSummaryDialog.vue

@@ -0,0 +1,5 @@
+<template>
+    <QDialog
+        >Item summary dialog (A DESARROLLAR CUANDO SE CREE EL MODULO DE ITEMS)</QDialog
+    >
+</template>

src/pages/Item/Card/ItemTags.vue

@@ -0,0 +1 @@
+<template>Item tags (CREAR CUANDO SE DESARROLLE EL MODULO DE ITEMS)</template>