Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 4666-invoiceInCorrection

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

package-lock.json

@@ -1,17 +1,18 @@
 {
     "name": "salix-front",
-    "version": "23.52.01",
+    "version": "24.02.01",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "salix-front",
-            "version": "23.52.01",
+            "version": "24.02.01",
             "dependencies": {
                 "@quasar/cli": "^2.3.0",
                 "@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.00.01",
+    "version": "24.8.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
@@ -19,13 +19,13 @@
         "@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",
         "vue": "^3.3.4",
         "vue-i18n": "^9.2.2",
-        "vue-router": "^4.2.1",
-        "vue-router-mock": "^0.2.0"
+        "vue-router": "^4.2.1"
     },
     "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^0.8.1",

src/App.vue

@@ -1,10 +1,11 @@
 <script setup>
 import { onMounted } from 'vue';
-import { useQuasar } from 'quasar';
+import { useQuasar, Dark } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
 const quasar = useQuasar();
 const { availableLocales, locale, fallbackLocale } = useI18n();
+Dark.set(true);
 
 onMounted(() => {
     let userLang = window.navigator.language;

src/components/CreateBankEntityForm.vue

@@ -0,0 +1,115 @@
+<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();
+
+const bankEntityFormData = reactive({
+    name: null,
+    bic: null,
+    countryFk: null,
+    id: null,
+});
+
+const countriesFilter = {
+    fields: ['id', 'country', 'code'],
+};
+
+const countriesOptions = ref([]);
+
+const onDataSaved = (data) => {
+    emit('onDataSaved', data);
+};
+</script>
+
+<template>
+    <FetchData
+        url="Countries"
+        :filter="countriesFilter"
+        auto-load
+        @on-fetch="(data) => (countriesOptions = data)"
+    />
+    <FormModelPopup
+        url-create="bankEntities"
+        model="bankEntity"
+        :title="t('title')"
+        :subtitle="t('subtitle')"
+        :form-initial-data="bankEntityFormData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('name')"
+                        v-model="data.name"
+                        :required="true"
+                        :rules="validate('bankEntity.name')"
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        :label="t('swift')"
+                        v-model="data.bic"
+                        :required="true"
+                        :rules="validate('bankEntity.bic')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('country')"
+                        v-model="data.countryFk"
+                        :options="countriesOptions"
+                        option-value="id"
+                        option-label="country"
+                        hide-selected
+                        :required="true"
+                        :rules="validate('bankEntity.countryFk')"
+                    />
+                </div>
+                <div v-if="showEntityField" class="col">
+                    <VnInput
+                        :label="t('id')"
+                        v-model="data.id"
+                        :required="true"
+                        :rules="validate('city.name')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+en:
+    title: New bank entity
+    subtitle: Please, ensure you put the correct data!
+    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
+    country: País
+    id: Código de la entidad
+</i18n>

src/components/CreateDepartmentChild.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { onMounted, 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 FormModel from 'components/FormModel.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const $props = defineProps({
+    parentId: {
+        type: Number,
+        default: null,
+    },
+});
+
+const { t } = useI18n();
+
+const departmentChildData = reactive({
+    name: null,
+});
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+
+const onDataSaved = () => {
+    emit('onDataSaved');
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+
+onMounted(() => {
+    if ($props.parentId) departmentChildData.parentId = $props.parentId;
+});
+</script>
+
+<template>
+    <FormModel
+        :form-initial-data="departmentChildData"
+        :observe-form-changes="false"
+        :default-actions="false"
+        url-create="departments/createChild"
+        @on-data-saved="onDataSaved()"
+    >
+        <template #form="{ data }">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">{{ t('New department') }}</h1>
+            <VnRow class="row q-gutter-md q-mb-md" style="min-width: 250px">
+                <div class="col">
+                    <VnInput :label="t('Name')" v-model="data.name" />
+                </div>
+            </VnRow>
+            <div class="q-mt-lg row justify-end">
+                <QBtn
+                    :label="t('globals.cancel')"
+                    type="reset"
+                    color="primary"
+                    flat
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    v-close-popup
+                />
+                <QBtn
+                    :label="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
+            </div>
+        </template>
+    </FormModel>
+</template>
+
+<style lang="scss" scoped>
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+</style>
+
+<i18n>
+es:
+    Name: Nombre
+    New department: Nuevo departamento
+</i18n>

src/components/CreateNewCityForm.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from './FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const cityFormData = reactive({
+    name: null,
+    provinceFk: null,
+});
+
+const provincesOptions = ref([]);
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (provincesOptions = data)"
+        auto-load
+        url="Provinces"
+    />
+    <FormModelPopup
+        :title="t('New city')"
+        :subtitle="t('Please, ensure you put the correct data!')"
+        :form-initial-data="cityFormData"
+        url-create="towns"
+        model="city"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('Name')"
+                        v-model="data.name"
+                        :rules="validate('city.name')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Province')"
+                        :options="provincesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.provinceFk"
+                        :rules="validate('city.provinceFk')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New city: Nueva ciudad
+    Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
+    Name: Nombre
+    Province: Provincia
+</i18n>

src/components/CreateNewPostcodeForm.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import 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 FormModelPopup from './FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const postcodeFormData = reactive({
+    code: null,
+    countryFk: null,
+    provinceFk: null,
+    townFk: null,
+});
+
+const townsFetchDataRef = ref(null);
+const provincesFetchDataRef = ref(null);
+const countriesOptions = ref([]);
+const provincesOptions = ref([]);
+const townsLocationOptions = ref([]);
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+};
+
+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 ({ name }, formData) => {
+    await provincesFetchDataRef.value.fetch();
+    formData.provinceFk = provincesOptions.value.find(
+        (province) => province.name === name
+    ).id;
+};
+</script>
+
+<template>
+    <FetchData
+        ref="townsFetchDataRef"
+        @on-fetch="(data) => (townsLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        ref="provincesFetchDataRef"
+        @on-fetch="(data) => (provincesOptions = data)"
+        auto-load
+        url="Provinces"
+    />
+    <FetchData
+        @on-fetch="(data) => (countriesOptions = data)"
+        auto-load
+        url="Countries"
+    />
+    <FormModelPopup
+        url-create="postcodes"
+        model="postcode"
+        :title="t('New postcode')"
+        :subtitle="t('Please, ensure you put the correct data!')"
+        :form-initial-data="postcodeFormData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('Postcode')"
+                        v-model="data.code"
+                        :rules="validate('postcode.code')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectCreate
+                        :label="t('City')"
+                        :options="townsLocationOptions"
+                        v-model="data.townFk"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        :rules="validate('postcode.city')"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                    >
+                        <template #form>
+                            <CreateNewCityForm
+                                @on-data-saved="onCityCreated($event, data)"
+                            />
+                        </template>
+                    </VnSelectCreate>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-xl">
+                <div class="col">
+                    <VnSelectCreate
+                        :label="t('Province')"
+                        :options="provincesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.provinceFk"
+                        :rules="validate('postcode.provinceFk')"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                    >
+                        <template #form>
+                            <CreateNewProvinceForm
+                                @on-data-saved="onProvinceCreated($event, data)"
+                            />
+                        </template>
+                    </VnSelectCreate>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Country')"
+                        :options="countriesOptions"
+                        hide-selected
+                        option-label="country"
+                        option-value="id"
+                        v-model="data.countryFk"
+                        :rules="validate('postcode.countryFk')"
+                    />
+                </div> </VnRow
+        ></template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New postcode: Nuevo código postal
+    Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
+    City: Población
+    Province: Provincia
+    Country: País
+    Postcode: Código postal
+</i18n>

src/components/CreateNewProvinceForm.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from './FormModelPopup.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const { t } = useI18n();
+
+const provinceFormData = reactive({
+    name: null,
+    autonomyFk: null,
+});
+
+const autonomiesOptions = ref([]);
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (autonomiesOptions = data)"
+        auto-load
+        url="Autonomies"
+    />
+    <FormModelPopup
+        :title="t('New province')"
+        :subtitle="t('Please, ensure you put the correct data!')"
+        url-create="provinces"
+        model="province"
+        :form-initial-data="provinceFormData"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form-inputs="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        :label="t('Name')"
+                        v-model="data.name"
+                        :rules="validate('province.name')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Autonomy')"
+                        :options="autonomiesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.autonomyFk"
+                        :rules="validate('province.autonomyFk')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    New province: Nueva provincia
+    Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
+    Name: Nombre
+    Autonomy: Autonomía
+</i18n>

src/components/CrudModel.vue

@@ -231,15 +231,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/FetchData.vue

@@ -27,6 +27,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    params: {
+        type: Object,
+        default: null,
+    },
 });
 
 const emit = defineEmits(['onFetch']);
@@ -38,18 +42,19 @@ onMounted(async () => {
     }
 });
 
-async function fetch() {
+async function fetch(fetchFilter = {}) {
     try {
-        const filter = Object.assign({}, $props.filter); // eslint-disable-line vue/no-dupe-keys
-        if ($props.where) filter.where = $props.where;
+        const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
+        if ($props.where && !fetchFilter.where) filter.where = $props.where;
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;
 
         const { data } = await axios.get($props.url, {
-            params: { filter: JSON.stringify(filter) },
+            params: { filter: JSON.stringify(filter), ...$props.params },
         });
 
         emit('onFetch', data);
+        return data;
     } catch (e) {
         //
     }

src/components/FormModel.vue

@@ -55,9 +55,13 @@ const $props = defineProps({
         description:
             'Esto se usa principalmente para permitir guardar sin hacer cambios (Útil para la feature de clonar ya que en este caso queremos poder guardar de primeras)',
     },
+    mapper: {
+        type: Function,
+        default: null,
+    },
 });
 
-const emit = defineEmits(['onFetch']);
+const emit = defineEmits(['onFetch', 'onDataSaved']);
 
 defineExpose({
     save,
@@ -71,9 +75,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);
     }
 });
 
@@ -83,8 +90,9 @@ onUnmounted(() => {
 
 const isLoading = ref(false);
 // Si elegimos observar los cambios del form significa que inicialmente las actions estaran deshabilitadas
+const isResetting = ref(false);
 const hasChanges = ref(!$props.observeFormChanges);
-const originalData = ref({...$props.formInitialData});
+const originalData = ref({ ...$props.formInitialData });
 const formData = computed(() => state.get($props.model));
 const formUrl = computed(() => $props.url);
 
@@ -92,7 +100,8 @@ const startFormWatcher = () => {
     watch(
         () => formData.value,
         (val) => {
-            if (val) hasChanges.value = true;
+            hasChanges.value = !isResetting.value && val;
+            isResetting.value = false;
         },
         { deep: true }
     );
@@ -114,25 +123,27 @@ async function fetch() {
 }
 
 async function save() {
-    if (!hasChanges.value) {
+    if ($props.observeFormChanges && !hasChanges.value) {
         notify('globals.noChanges', 'negative');
         return;
     }
     isLoading.value = true;
 
     try {
+        const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
+        let response;
         if ($props.urlCreate) {
-            await axios.post($props.urlCreate, formData.value);
+            response = await axios.post($props.urlCreate, body);
             notify('globals.dataCreated', 'positive');
         } else {
-            await axios.patch($props.urlUpdate || $props.url, formData.value);
+            response = await axios.patch($props.urlUpdate || $props.url, body);
         }
+        emit('onDataSaved', formData.value, response?.data);
+        originalData.value = JSON.parse(JSON.stringify(formData.value));
+        hasChanges.value = false;
     } catch (err) {
         notify('errors.create', 'negative');
     }
-
-    originalData.value = JSON.parse(JSON.stringify(formData.value));
-    hasChanges.value = false;
     isLoading.value = false;
 }
 
@@ -143,6 +154,7 @@ function reset() {
     emit('onFetch', state.get($props.model));
     if ($props.observeFormChanges) {
         hasChanges.value = false;
+        isResetting.value = true;
     }
 }
 
@@ -168,11 +180,7 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner v-if="$props.observeFormChanges && hasChanges" class="text-white bg-warning">
-        <QIcon name="warning" size="md" class="q-mr-md" />
-        <span>{{ t('globals.changesToSave') }}</span>
-    </QBanner>
-    <div class="column items-center">
+    <div class="column items-center full-width">
         <QForm
             v-if="formData"
             @submit="save"
@@ -219,6 +227,7 @@ watch(formUrl, async () => {
         :showing="isLoading"
         :label="t('globals.pleaseWait')"
         color="primary"
+        style="min-width: 100%"
     />
 </template>
 <style lang="scss" scoped>

src/components/FormModelPopup.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FormModel from 'components/FormModel.vue';
+
+const emit = defineEmits(['onDataSaved']);
+
+const $props = defineProps({
+    title: {
+        type: String,
+        default: '',
+    },
+    subtitle: {
+        type: String,
+        default: '',
+    },
+    url: {
+        type: String,
+        default: '',
+    },
+    model: {
+        type: String,
+        default: '',
+    },
+    filter: {
+        type: Object,
+        default: null,
+    },
+    urlCreate: {
+        type: String,
+        default: null,
+    },
+    formInitialData: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const { t } = useI18n();
+
+const closeButton = ref(null);
+const isLoading = ref(false);
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+    closeForm();
+};
+
+const closeForm = () => {
+    if (closeButton.value) closeButton.value.click();
+};
+</script>
+
+<template>
+    <FormModel
+        :form-initial-data="formInitialData"
+        :observe-form-changes="false"
+        :default-actions="false"
+        :url-create="urlCreate"
+        :model="model"
+        @on-data-saved="onDataSaved($event)"
+    >
+        <template #form="{ data, validate }">
+            <span ref="closeButton" class="close-icon" v-close-popup>
+                <QIcon name="close" size="sm" />
+            </span>
+            <h1 class="title">{{ title }}</h1>
+            <p>{{ subtitle }}</p>
+            <slot name="form-inputs" :data="data" :validate="validate" />
+            <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>
+        </template>
+    </FormModel>
+</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>

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

@@ -4,15 +4,16 @@ 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';
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
-
+import { useClipboard } from 'src/composables/useClipboard';
+const { copyText } = useClipboard();
 const userLocale = computed({
     get() {
         return locale.value;
@@ -20,13 +21,11 @@ const userLocale = computed({
     set(value) {
         locale.value = value;
 
-        if (value === 'en') value = 'en-GB';
+        value = localeEquivalence[value] ?? value;
 
-        // FIXME: Dynamic imports from absolute paths are not compatible with vite:
-        // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
         try {
-            const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
-            langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
+            /* @vite-ignore */
+            import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
                 Quasar.lang.set(lang.default);
             });
         } catch (error) {
@@ -82,8 +81,8 @@ function logout() {
     router.push('/login');
 }
 
-function copyUserToken(){
-    navigator.clipboard.writeText(session.getToken());
+function copyUserToken() {
+    copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
 }
 </script>
 
@@ -126,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"
@@ -149,9 +152,9 @@ function copyUserToken(){
     width: 150px;
 }
 
-.copyUserToken {
-   &:hover{
-    cursor: alias;
-   }
+.copyText {
+    &:hover {
+        cursor: alias;
+    }
 }
 </style>

src/components/common/SendEmailDialog.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { ref } from 'vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
 
 const props = defineProps({
     data: {
@@ -52,7 +54,7 @@ async function confirm() {
                 {{ t('The notification will be sent to the following address') }}
             </QCardSection>
             <QCardSection class="q-pt-none">
-                <QInput dense v-model="address" rounded outlined autofocus />
+                <VnInput v-model="address" is-outlined autofocus />
             </QCardSection>
             <QCardActions align="right">
                 <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />

src/components/common/TableVisibleColumns.vue

@@ -0,0 +1,192 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref, computed, onMounted } from 'vue';
+
+import { useState } from 'src/composables/useState';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const $props = defineProps({
+    allColumns: {
+        type: Array,
+        default: () => [],
+    },
+    tableCode: {
+        type: String,
+        default: '',
+    },
+    labelsTraductionsPath: {
+        type: String,
+        default: '',
+    },
+});
+
+const emit = defineEmits(['onConfigSaved']);
+
+const { notify } = useNotify();
+const state = useState();
+const { t } = useI18n();
+const popupProxyRef = ref(null);
+const user = state.getUser();
+const initialUserConfigViewData = ref(null);
+
+const formattedCols = ref([]);
+
+const areAllChecksMarked = computed(() => {
+    return formattedCols.value.every((col) => col.active);
+});
+
+const setUserConfigViewData = (data) => {
+    if (!data) return;
+    // 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],
+    }));
+    emitSavedConfig();
+};
+
+const toggleMarkAll = (val) => {
+    formattedCols.value.forEach((col) => (col.active = val));
+};
+
+const getConfig = async (url, filter) => {
+    const response = await axios.get(url, {
+        params: { filter: filter },
+    });
+    return response.data && response.data.length > 0 ? response.data[0] : null;
+};
+
+const fetchViewConfigData = async () => {
+    try {
+        const userConfigFilter = {
+            where: { tableCode: $props.tableCode, userFk: user.id },
+        };
+        const userConfig = await getConfig('UserConfigViews', userConfigFilter);
+
+        if (userConfig) {
+            initialUserConfigViewData.value = userConfig;
+            setUserConfigViewData(userConfig.configuration);
+            return;
+        }
+
+        const defaultConfigFilter = { where: { tableCode: $props.tableCode } };
+        const defaultConfig = await getConfig('DefaultViewConfigs', defaultConfigFilter);
+
+        if (defaultConfig) {
+            setUserConfigViewData(defaultConfig.columns);
+            return;
+        }
+    } catch (err) {
+        console.err('Error fetching config view data', err);
+    }
+};
+
+const saveConfig = async () => {
+    try {
+        const params = {};
+        const configuration = {};
+
+        formattedCols.value.forEach((col) => {
+            const { name, active } = col;
+            configuration[name] = active;
+        });
+
+        // Si existe una view config del usuario hacemos un update si no la creamos
+        if (initialUserConfigViewData.value) {
+            params.updates = [
+                {
+                    data: {
+                        configuration: configuration,
+                    },
+                    where: {
+                        id: initialUserConfigViewData.value.id,
+                    },
+                },
+            ];
+        } else {
+            params.creates = [
+                {
+                    userFk: user.value.id,
+                    tableCode: $props.tableCode,
+                    tableConfig: $props.tableCode,
+                    configuration: configuration,
+                },
+            ];
+        }
+
+        const response = await axios.post('UserConfigViews/crud', params);
+        if (response.data && response.data[0]) {
+            initialUserConfigViewData.value = response.data[0];
+        }
+        emitSavedConfig();
+        notify('globals.dataSaved', 'positive');
+        popupProxyRef.value.hide();
+    } catch (err) {
+        console.error('Error saving user view config', err);
+    }
+};
+
+const emitSavedConfig = () => {
+    const activeColumns = formattedCols.value
+        .filter((col) => col.active)
+        .map((col) => col.name);
+    emit('onConfigSaved', activeColumns);
+};
+
+onMounted(async () => {
+    await fetchViewConfigData();
+});
+</script>
+<template>
+    <QBtn color="primary" icon="view_column">
+        <QPopupProxy ref="popupProxyRef">
+            <QCard class="column q-pa-md">
+                <QIcon name="info" size="sm" class="info-icon">
+                    <QTooltip>{{ t('Check the columns you want to see') }}</QTooltip>
+                </QIcon>
+                <span class="text-body1 q-mb-sm">{{ t('Visible columns') }}</span>
+                <QCheckbox
+                    :label="t('Tick all')"
+                    :model-value="areAllChecksMarked"
+                    @update:model-value="toggleMarkAll($event)"
+                    class="q-mb-sm"
+                />
+                <div
+                    v-if="allColumns.length > 0 && formattedCols.length > 0"
+                    class="checks-layout"
+                >
+                    <QCheckbox
+                        v-for="(col, index) in allColumns"
+                        :key="index"
+                        :label="t(`${$props.labelsTraductionsPath + '.' + col}`)"
+                        v-model="formattedCols[index].active"
+                    />
+                </div>
+                <QBtn class="full-width q-mt-md" color="primary" @click="saveConfig()">{{
+                    t('globals.save')
+                }}</QBtn>
+            </QCard>
+        </QPopupProxy>
+        <QTooltip>{{ t('Visible columns') }}</QTooltip>
+    </QBtn>
+</template>
+
+<style lang="scss" scoped>
+.info-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+.checks-layout {
+    display: grid;
+    grid-template-columns: repeat(3, 200px);
+}
+</style>
+
+<i18n>
+    es:
+        Check the columns you want to see: Marca las columnas que quieres ver
+        Visible columns: Columnas visibles
+</i18n>

src/components/common/VnInput.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: null,
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+
+const onEnterPress = () => {
+    emit('keyup.enter');
+};
+</script>
+
+<template>
+    <QInput
+        ref="vnInputRef"
+        v-model="value"
+        v-bind="{ ...$attrs, ...styleAttrs }"
+        type="text"
+        :class="{ required: $attrs.required }"
+        @keyup.enter="onEnterPress()"
+    >
+        <template v-if="$slots.prepend" #prepend>
+            <slot name="prepend" />
+        </template>
+        <template v-if="$slots.append" #append>
+            <slot name="append" />
+        </template>
+    </QInput>
+</template>

src/components/common/VnInputDate.vue

@@ -10,7 +10,11 @@ const props = defineProps({
     readonly: {
         type: Boolean,
         default: false,
-    }
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
 });
 const emit = defineEmits(['update:modelValue']);
 const value = computed({
@@ -36,6 +40,16 @@ const formatDate = (dateString) => {
         date.getDate()
     )}`;
 };
+
+const styleAttrs = computed(() => {
+    return props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
 </script>
 
 <template>
@@ -44,7 +58,7 @@ const formatDate = (dateString) => {
         rounded
         readonly
         :model-value="toDate(value)"
-        v-bind="$attrs"
+        v-bind="{ ...$attrs, ...styleAttrs }"
     >
         <template #append>
             <QIcon name="event" class="cursor-pointer">

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,137 @@
+<script setup>
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
+import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnSelectCreate from 'components/common/VnSelectCreate.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()
+});
+
+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) {
+    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)"
+    />
+    <VnSelectCreate
+        v-if="postcodesRef"
+        v-model="value"
+        :options="postcodesOptions"
+        :label="t('Location')"
+        :option-label="showLabel"
+        :placeholder="t('search_by_postalcode')"
+        @input-value="locationFilter"
+        :default-filter="false"
+        :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>
+    </VnSelectCreate>
+</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

@@ -12,8 +12,8 @@ import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnSelectFilter from './VnSelectFilter.vue';
+import VnUserLink from '../ui/VnUserLink.vue';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -168,17 +168,17 @@ function getLogTree(data) {
     let originLog = null;
     let userLog = null;
     let modelLog = null;
-    let prevLog;
     let nLogs;
 
-    data.forEach((log) => {
+    for (let i = 0; i < data.length; i++) {
+        let log = data[i];
+        let prevLog = i > 0 ? data[i - 1] : null;
         const locale = validations[log.changedModel]?.locale || {};
 
         // Origin
         const originChanged = !prevLog || log.originFk != prevLog.originFk;
         if (originChanged) {
             logs.push((originLog = { originFk: log.originFk, logs: [] }));
-            prevLog = log;
         }
         // User
         const userChanged = originChanged || log.userFk != prevLog.userFk;
@@ -197,6 +197,7 @@ function getLogTree(data) {
             log.changedModel != prevLog.changedModel ||
             log.changedModelId != prevLog.changedModelId ||
             nLogs >= 6;
+
         if (modelChanged) {
             userLog.logs.push(
                 (modelLog = {
@@ -221,7 +222,7 @@ function getLogTree(data) {
         propNames = [...new Set(propNames)];
 
         log.props = parseProps(propNames, locale, vals, olds);
-    });
+    }
     return logs;
 }
 
@@ -320,7 +321,6 @@ function selectFilter(type, dateType) {
     }
     if (type === 'action' && selectedFilters.value.changedModel === null) {
         selectedFilters.value.changedModel = undefined;
-        reload = false;
     }
     if (type === 'userRadio') {
         selectedFilters.value.userFk = userRadio.value;
@@ -415,21 +415,22 @@ setLogTree();
             <div class="line bg-grey"></div>
         </QItem>
         <div
-            class="user-log q-mb-sm row"
+            class="user-log q-mb-sm"
             v-for="(userLog, userIndex) in originLog.logs"
             :key="userIndex"
         >
             <div class="timeline">
                 <div class="user-avatar">
-                    <VnAvatar
-                        class="cursor-pointer"
-                        :worker="userLog.user.id"
-                        :title="userLog.user.nickname"
-                    />
-                    <WorkerDescriptorProxy
-                        v-if="userLog.user.image"
-                        :id="userLog.user.id"
-                    />
+                    <VnUserLink :worker-id="userLog.user.id">
+                        <template #link>
+                            <VnAvatar
+                                :class="{ 'cursor-pointer': userLog.user.id }"
+                                :worker-id="userLog.user.id"
+                                :title="userLog.user.nickname"
+                                size="lg"
+                            />
+                        </template>
+                    </VnUserLink>
                 </div>
                 <div class="arrow bg-panel" v-if="byRecord"></div>
                 <div class="line"></div>
@@ -663,9 +664,9 @@ setLogTree();
                         :label="t('globals.entity')"
                         v-model="selectedFilters.changedModel"
                         option-label="locale"
+                        option-value="value"
                         :options="actions"
                         @update:model-value="selectFilter('action')"
-                        @clear="() => selectFilter('action')"
                         hide-selected
                     />
                 </QItem>
@@ -704,7 +705,7 @@ setLogTree();
                                     class="q-pa-xs row items-center"
                                 >
                                     <QItemSection class="col-3 items-center">
-                                        <VnAvatar :worker="opt.id" />
+                                        <VnAvatar :worker-id="opt.id" />
                                     </QItemSection>
                                     <QItemSection class="col-9 justify-center">
                                         <span>{{ opt.name }}</span>
@@ -823,14 +824,30 @@ setLogTree();
 .q-item {
     min-height: 0px;
 }
+.q-menu {
+    display: block;
 
+    & > .loading {
+        display: flex;
+        justify-content: center;
+    }
+    & > .q-card {
+        min-width: 180px;
+        max-width: 400px;
+
+        & > .header {
+            color: $dark;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+}
 .origin-log {
     &:first-child > .origin-info {
         margin-top: 0;
     }
     & > .origin-info {
-        width: 100%;
-        max-width: 42em;
         margin-top: 28px;
         gap: 6px;
 
@@ -847,14 +864,15 @@ setLogTree();
     }
 }
 .user-log {
+    display: flex;
     width: 100%;
     max-width: 40em;
-
     & > .timeline {
         position: relative;
-        padding-right: 5px;
-        width: 50px;
+        padding-right: 1px;
+        width: 38px;
         min-width: 38px;
+        flex-grow: auto;
         & > .arrow {
             height: 8px;
             width: 8px;
@@ -874,7 +892,7 @@ setLogTree();
             position: absolute;
             background-color: $primary;
             width: 2px;
-            left: 23px;
+            left: 19px;
             z-index: -1;
             top: 0;
             bottom: -8px;
@@ -893,6 +911,7 @@ setLogTree();
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        min-height: 22px;
         .model-value {
             font-style: italic;
         }
@@ -984,25 +1003,6 @@ setLogTree();
         }
     }
 }
-.q-menu {
-    display: block;
-
-    & > .loading {
-        display: flex;
-        justify-content: center;
-    }
-    & > .q-card {
-        min-width: 180px;
-        max-width: 400px;
-
-        & > .header {
-            color: $dark;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-    }
-}
 </style>
 <i18n>
 en:

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/VnSelectCreate.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import { useRole } from 'src/composables/useRole';
+
+const emit = defineEmits(['update:modelValue']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    rolesAllowedToCreate: {
+        type: Array,
+        default: () => ['developer'],
+    },
+});
+
+const role = useRole();
+const showForm = ref(false);
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+const isAllowedToCreate = computed(() => {
+    return role.hasAny($props.rolesAllowedToCreate);
+});
+
+const toggleForm = () => {
+    showForm.value = !showForm.value;
+};
+</script>
+
+<template>
+    <VnSelectFilter v-model="value" :options="options" v-bind="$attrs">
+        <template v-if="isAllowedToCreate" #append>
+            <QIcon
+                @click.stop.prevent="toggleForm()"
+                name="add"
+                size="xs"
+                class="add-icon"
+            />
+            <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
+                <slot name="form" />
+            </QDialog>
+        </template>
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData" :key="slotName" />
+        </template>
+    </VnSelectFilter>
+</template>
+
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>

src/components/common/VnSelectFilter.vue

@@ -1,5 +1,7 @@
 <script setup>
-import { ref, toRefs, watch, computed } from 'vue';
+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']);
 
 const $props = defineProps({
@@ -12,30 +14,72 @@ const $props = defineProps({
         default: () => [],
     },
     optionLabel: {
+        type: [String],
+        default: '',
+    },
+    optionValue: {
+        type: String,
+        default: '',
+    },
+    url: {
         type: String,
         default: '',
     },
     filterOptions: {
-        type: Array,
+        type: [Array],
         default: () => [],
     },
     isClearable: {
         type: Boolean,
         default: true,
     },
+    defaultFilter: {
+        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(null);
+const vnSelectRef = ref();
+const dataRef = ref();
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
 
 function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
-setOptions(options.value);
+onMounted(() => {
+    setOptions(options.value);
+    if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
+});
 
-const filter = (val, options) => {
+async function filter(val, options) {
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
@@ -53,12 +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(
-        () => {
-            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) {
@@ -67,27 +128,33 @@ const filterHandler = (val, update) => {
             }
         }
     );
-};
+}
 
 watch(options, (newValue) => {
     setOptions(newValue);
 });
 
-const value = computed({
-    get() {
-        return $props.modelValue;
-    },
-    set(value) {
-        emit('update:modelValue', value);
-    },
+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
@@ -96,6 +163,7 @@ const value = computed({
         hide-selected
         fill-input
         ref="vnSelectRef"
+        :class="{ required: $attrs.required }"
     >
         <template v-if="isClearable" #append>
             <QIcon
@@ -105,8 +173,14 @@ const value = computed({
                 size="xs"
             />
         </template>
-        <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
-            <slot :name="slotName" v-bind="slotData ?? {}" />
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
     </QSelect>
 </template>
+
+<style scoped lang="scss">
+.q-field--outlined {
+    max-width: 100%;
+}
+</style>

src/components/common/VnSmsDialog.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const { t, availableLocales } = useI18n();
@@ -117,24 +119,10 @@ async function send() {
                 />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <QInput
-                    :label="t('Phone')"
-                    v-model="phone"
-                    rounded
-                    outlined
-                    autofocus
-                    dense
-                />
+                <VnInput :label="t('Phone')" v-model="phone" is-outlined />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <QInput
-                    :label="t('Subject')"
-                    v-model="subject"
-                    rounded
-                    outlined
-                    autofocus
-                    dense
-                />
+                <VnInput v-model="subject" :label="t('Subject')" is-outlined />
             </QCardSection>
             <QCardSection class="q-mb-md" q-input>
                 <QInput

src/components/ui/CardDescriptor.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { onMounted, useSlots, ref, watch, computed } from 'vue';
+import { onMounted, useSlots, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
 
@@ -50,7 +49,6 @@ onMounted(async () => {
         () => $props.url,
         async (newUrl, lastUrl) => {
             if (newUrl == lastUrl) return;
-            entity.value = null;
             await getData();
         }
     );
@@ -62,8 +60,7 @@ async function getData() {
         filter: $props.filter,
         skip: 0,
     });
-    const { data } = await arrayData.fetch({ append: false });
-    entity.value = data;
+    const { data } = await arrayData.fetch({ append: false, updateRouter: false });
     emit('onFetch', data);
 }
 const emit = defineEmits(['onFetch']);
@@ -82,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
@@ -119,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/VnAvatar.vue

@@ -1,18 +1,37 @@
 <script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
+import { useColor } from 'src/composables/useColor';
+
 const $props = defineProps({
-    worker: { type: Number, required: true },
+    workerId: { type: Number, required: true },
     description: { type: String, default: null },
+    size: { type: String, default: null },
+    title: { type: String, default: null },
 });
 const session = useSession();
 const token = session.getToken();
+const { t } = useI18n();
+
+const title = computed(() => $props.title ?? t('globals.system'));
+const showLetter = ref(false);
 </script>
 <template>
     <div class="avatar-picture column items-center">
-        <QAvatar color="orange">
+        <QAvatar
+            :style="{
+                backgroundColor: useColor(title),
+            }"
+            :size="$props.size"
+            :title="title"
+        >
+            <template v-if="showLetter">{{ title.charAt(0) }}</template>
             <QImg
-                :src="`/api/Images/user/160x160/${$props.worker}/download?access_token=${token}`"
+                v-else
+                :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
                 spinner-color="white"
+                @error="showLetter = true"
             />
         </QAvatar>
         <div class="description">

src/components/ui/VnFilterPanel.vue

@@ -4,6 +4,8 @@ import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 import toDate from 'filters/toDate';
 
+import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+
 const { t } = useI18n();
 const props = defineProps({
     dataKey: {
@@ -24,11 +26,32 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    unremovableParams: {
+        type: Array,
+        required: false,
+        default: () => [],
+        description:
+            'Algunos filtros vienen con parametros de búsqueda por default y necesitan tener si o si un valor, por eso de ser necesario, esta prop nos sirve para saber que filtros podemos remover y cuales no',
+    },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
+    hiddenTags: {
+        type: Array,
+        default: () => [],
+    },
+    customTags: {
+        type: Array,
+        default: () => [],
+    },
 });
 
-const emit = defineEmits(['refresh', 'clear', 'search']);
+const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
 
-const arrayData = useArrayData(props.dataKey);
+const arrayData = useArrayData(props.dataKey, {
+    exprBuilder: props.exprBuilder,
+});
 const store = arrayData.store;
 const userParams = ref({});
 
@@ -37,12 +60,16 @@ onMounted(() => {
     if (Object.keys(store.userParams).length > 0) {
         userParams.value = JSON.parse(JSON.stringify(store.userParams));
     }
+    emit('init', { params: userParams.value });
 });
 
 const isLoading = ref(false);
 async function search() {
     isLoading.value = true;
     const params = { ...userParams.value };
+    store.userParamsChanged = true;
+    store.filter.skip = 0;
+    store.skip = 0;
     const { params: newParams } = await arrayData.addFilter({ params });
     userParams.value = newParams;
 
@@ -63,32 +90,50 @@ async function reload() {
 }
 
 async function clearFilters() {
-    userParams.value = {};
     isLoading.value = true;
-    await arrayData.applyFilter({ params: {} });
-    if (!props.showAll) store.data = [];
-    isLoading.value = false;
+    store.userParamsChanged = true;
+    store.filter.skip = 0;
+    store.skip = 0;
+    // Filtrar los params no removibles
+    const removableFilters = Object.keys(userParams.value).filter((param) =>
+        props.unremovableParams.includes(param)
+    );
+    const newParams = {};
+    // Conservar solo los params que no son removibles
+    for (const key of removableFilters) {
+        newParams[key] = userParams.value[key];
+    }
+    userParams.value = { ...newParams }; // Actualizar los params con los removibles
+    await arrayData.applyFilter({ params: userParams.value });
 
+    if (!props.showAll) {
+        store.data = [];
+    }
+
+    isLoading.value = false;
     emit('clear');
 }
 
-const tags = computed(() => {
-    const params = [];
+const tagsList = computed(() =>
+    Object.entries(userParams.value)
+        .filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
+        .map(([key, value]) => ({
+            label: key,
+            value: value,
+        }))
+);
 
-    for (const param in userParams.value) {
-        if (!userParams.value[param]) continue;
-        params.push({
-            label: param,
-            value: userParams.value[param],
-        });
-    }
-
-    return params;
-});
+const tags = computed(() =>
+    tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.label))
+);
+const customTags = computed(() =>
+    tagsList.value.filter((tag) => (props.customTags || []).includes(tag.label))
+);
 
 async function remove(key) {
     userParams.value[key] = null;
     await search();
+    emit('remove', key);
 }
 
 function formatValue(value) {
@@ -144,21 +189,17 @@ function formatValue(value) {
             </QItem>
             <QItem class="q-mb-sm">
                 <div
-                    v-if="tags.length === 0"
+                    v-if="tagsList.length === 0"
                     class="text-grey font-xs text-center full-width"
                 >
                     {{ t(`No filters applied`) }}
                 </div>
                 <div>
-                    <QChip
-                        :key="chip.label"
-                        @remove="remove(chip.label)"
-                        class="text-dark"
-                        color="primary"
-                        icon="label"
-                        removable
-                        size="sm"
+                    <VnFilterPanelChip
                         v-for="chip of tags"
+                        :key="chip.label"
+                        :removable="!unremovableParams.includes(chip.label)"
+                        @remove="remove(chip.label)"
                     >
                         <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
@@ -166,12 +207,22 @@ function formatValue(value) {
                                 <span>"{{ chip.value }}"</span>
                             </div>
                         </slot>
-                    </QChip>
+                    </VnFilterPanelChip>
+                    <slot
+                        v-if="$slots.customTags"
+                        name="customTags"
+                        :params="userParams"
+                        :tags="customTags"
+                        :format-fn="formatValue"
+                        :search-fn="search"
+                    />
                 </div>
             </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">
@@ -197,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/VnFilterPanelChip.vue

@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template>
+    <QChip class="text-dark" color="primary" icon="label" size="sm" v-bind="$attrs">
+        <slot />
+    </QChip>
+</template>

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/VnNotes.vue

@@ -1,11 +1,11 @@
 <script setup>
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnAvatar from 'src/components/ui/VnAvatar.vue';
 import { toDateHour } from 'src/filters';
 import { ref } from 'vue';
 import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from './VnPaginate.vue';
+import VnUserLink from '../ui/VnUserLink.vue';
 
 const $props = defineProps({
     id: { type: String, required: true },
@@ -28,7 +28,7 @@ async function insert() {
 }
 </script>
 <template>
-    <div class="column items-center">
+    <div class="column items-center full-height">
         <VnPaginate
             :data-key="$props.url"
             :url="$props.url"
@@ -42,13 +42,14 @@ async function insert() {
                 <QCard class="q-pa-md q-mb-md" v-for="(note, index) in rows" :key="index">
                     <QCardSection horizontal>
                         <slot name="picture">
-                            <VnAvatar :worker="note.workerFk" />
+                            <VnAvatar :descriptor="false" :worker-id="note.workerFk" />
                         </slot>
                         <QItem class="full-width justify-between items-start">
-                            <span class="link">
-                                {{ `${note.worker.firstName} ${note.worker.lastName}` }}
-                                <WorkerDescriptorProxy :id="note.worker.id" />
-                            </span>
+                            <VnUserLink
+                                :name="`${note.worker.firstName} ${note.worker.lastName}`"
+                                :worker-id="note.worker.id"
+                            />
+
                             <slot name="actions">
                                 {{ toDateHour(note.created) }}
                             </slot>
@@ -115,6 +116,10 @@ async function insert() {
 <style lang="scss" scoped>
 .q-card {
     max-width: 80em;
+
+    &__section {
+        word-wrap: break-word;
+    }
 }
 .q-dialog .q-card {
     width: 400px;

src/components/ui/VnPaginate.vue

@@ -31,7 +31,7 @@ const props = defineProps({
         default: null,
     },
     order: {
-        type: String,
+        type: [String, Array],
         default: '',
     },
     limit: {
@@ -104,6 +104,8 @@ async function paginate() {
     await arrayData.loadMore();
 
     if (!arrayData.hasMoreData.value) {
+        if (store.userParamsChanged) arrayData.hasMoreData.value = true;
+        store.userParamsChanged = false;
         isLoading.value = false;
         return;
     }
@@ -129,9 +131,9 @@ async function onLoad(...params) {
     pagination.value.page = pagination.value.page + 1;
 
     await paginate();
-
-    const endOfPages = !arrayData.hasMoreData.value;
-    done(endOfPages);
+    let isDone = false;
+    if (store.userParamsChanged) isDone = !arrayData.hasMoreData.value;
+    done(isDone);
 }
 </script>
 
@@ -149,7 +151,7 @@ async function onLoad(...params) {
             v-if="props.skeleton && props.autoLoad && !store.data"
             class="card-list q-gutter-y-md"
         >
-            <QCard class="card" v-for="$index in $props.limit" :key="$index">
+            <QCard class="card" v-for="$index in props.limit" :key="$index">
                 <QItem v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
                     <QItemSection class="q-pa-md">
                         <QSkeleton type="rect" class="q-mb-md" square />
@@ -168,7 +170,12 @@ async function onLoad(...params) {
             </QCard>
         </div>
     </div>
-    <QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset" class="full-width">
+    <QInfiniteScroll
+        v-if="store.data"
+        @load="onLoad"
+        :offset="offset"
+        class="full-width full-height"
+    >
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">
             <QSpinner color="orange" size="md" />

src/components/ui/VnSearchbar.vue

@@ -1,8 +1,12 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { useArrayData } from 'composables/useArrayData';
 import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'composables/useArrayData';
+
 const quasar = useQuasar();
 
 const props = defineProps({
@@ -49,6 +53,14 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    staticParams: {
+        type: Array,
+        default: () => [],
+    },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
 });
 
 const router = useRouter();
@@ -65,28 +77,26 @@ onMounted(() => {
 });
 
 async function search() {
+    const staticParams = Object.entries(store.userParams)
+        .filter(([key, value]) => value && (props.staticParams || []).includes(key));
     await arrayData.applyFilter({
         params: {
+            ...Object.fromEntries(staticParams),
             search: searchText.value,
         },
     });
     if (!props.redirect) return;
 
-    const rows = store.data;
-    const module = route.matched[1];
-    if (rows.length === 1) {
-        const [firstRow] = rows;
-        await router.push({ path: `${module.path}/${firstRow.id}` });
-    } else if (route.matched.length > 3) {
-        await router.push({ path: `/${module.path}` });
-        arrayData.updateStateParams();
-    }
+    const { matched: matches } = route;
+    const { path } = matches[matches.length-1];
+    const newRoute = path.replace(':id', searchText.value);
+    await router.push(newRoute);
 }
 </script>
 
 <template>
     <QForm @submit="search">
-        <QInput
+        <VnInput
             id="searchbar"
             v-model="searchText"
             :placeholder="props.label"
@@ -113,7 +123,7 @@ async function search() {
                     <QTooltip>{{ props.info }}</QTooltip>
                 </QIcon>
             </template>
-        </QInput>
+        </VnInput>
     </QForm>
 </template>
 

src/components/ui/VnSms.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { onBeforeMount } from 'vue';
+import { date } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnAvatar from '../ui/VnAvatar.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+
+const $props = defineProps({
+    url: { type: String, default: null },
+    where: { type: Object, default: () => {} },
+});
+
+const filter = {
+    fields: ['smsFk'],
+    include: {
+        relation: 'sms',
+        scope: {
+            fields: [
+                'senderFk',
+                'sender',
+                'destination',
+                'message',
+                'statusCode',
+                'status',
+                'created',
+            ],
+            include: {
+                relation: 'sender',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+        },
+    },
+};
+
+onBeforeMount(() => (filter.where = $props.where));
+
+function formatNumber(number) {
+    if (number.length <= 10) return number;
+    return number.slice(0, 4) + ' ' + number.slice(4);
+}
+</script>
+
+<template>
+    <div class="column items-center">
+        <div class="list">
+            <VnPaginate
+                :data-key="$props.url"
+                :url="$props.url"
+                :filter="filter"
+                order="smsFk DESC"
+                :offset="100"
+                :limit="5"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard
+                        flat
+                        bordered
+                        class="card q-pa-md q-mb-sm smsCard"
+                        v-for="row of rows"
+                        :key="row.smsFk"
+                    >
+                        <QItem>
+                            <QItemSection side top>
+                                <VnUserLink :worker-id="row.sms?.senderFk">
+                                    <template #link>
+                                        <VnAvatar
+                                            :worker-id="row.sms?.senderFk"
+                                            class="cursor-pointer"
+                                            :title="row.sms?.sender?.name"
+                                        />
+                                    </template>
+                                </VnUserLink>
+                            </QItemSection>
+                            <QSeparator />
+                            <QItemSection>
+                                <QItemLabel caption>{{
+                                    formatNumber(row.sms.destination)
+                                }}</QItemLabel>
+                                <QItemLabel>{{ row.sms.message }}</QItemLabel>
+                            </QItemSection>
+                            <QItemSection side>
+                                <QItemLabel caption>{{
+                                    date.formatDate(
+                                        row.sms.created,
+                                        'YYYY-MM-DD HH:mm:ss'
+                                    )
+                                }}</QItemLabel>
+                                <QItemLabel class="row center">
+                                    <QChip
+                                        :color="
+                                            row.sms.status == 'OK'
+                                                ? 'positive'
+                                                : 'negative'
+                                        "
+                                    >
+                                        {{ row.sms.status }}
+                                    </QChip>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QCard>
+                </template>
+            </VnPaginate>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.q-item__section--side {
+    align-items: center;
+}
+</style>

src/components/ui/VnSubToolbar.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
+
+const stateStore = useStateStore();
+
+onMounted(() => {
+    stateStore.toggleSubToolbar();
+});
+
+onUnmounted(() => {
+    stateStore.toggleSubToolbar();
+});
+</script>
+
+<template>
+    <QToolbar class="bg-vn-dark justify-end sticky">
+        <slot name="st-data">
+            <div id="st-data"></div>
+        </slot>
+        <QSpace />
+        <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/components/ui/VnTree.vue

@@ -0,0 +1,159 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import CreateDepartmentChild from '../CreateDepartmentChild.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const quasar = useQuasar();
+const { t } = useI18n();
+const router = useRouter();
+const { notify } = useNotify();
+
+const treeRef = ref(null);
+const showCreateNodeFormVal = ref(false);
+const creationNodeSelectedId = ref(null);
+const expanded = ref([]);
+
+const nodes = ref([{ id: null, name: t('Departments'), sons: true, children: [{}] }]);
+
+const fetchedChildrensSet = ref(new Set());
+
+const onNodeExpanded = (nodeKeysArray) => {
+    // Verificar si el nodo ya fue expandido
+    if (!fetchedChildrensSet.value.has(nodeKeysArray.at(-1))) {
+        fetchedChildrensSet.value.add(nodeKeysArray.at(-1));
+        fetchNodeLeaves(nodeKeysArray.at(-1)); // Llamar a la función para obtener los nodos hijos
+    }
+};
+
+const fetchNodeLeaves = async (nodeKey) => {
+    try {
+        const node = treeRef.value.getNodeByKey(nodeKey);
+        if (!node || node.sons === 0) return;
+
+        const params = { parentId: node.id };
+        const response = await axios.get('/departments/getLeaves', { params });
+
+        // Si hay datos en la respuesta y tiene hijos, agregarlos al nodo actual
+        if (response.data) {
+            node.children = response.data;
+            node.children.forEach((node) => {
+                if (node.sons) node.children = [{}];
+            });
+        }
+    } catch (err) {
+        console.error('Error fetching department leaves');
+        throw new Error();
+    }
+};
+
+const removeNode = (node) => {
+    const { id, parentFk } = node;
+    quasar
+        .dialog({
+            title: t('Are you sure you want to delete it?'),
+            message: t('Delete department'),
+            ok: {
+                push: true,
+                color: 'primary',
+            },
+            cancel: true,
+        })
+        .onOk(async () => {
+            try {
+                await axios.post(`/Departments/${id}/removeChild`, id);
+                notify(t('department.departmentRemoved'), 'positive');
+                await fetchNodeLeaves(parentFk);
+            } catch (err) {
+                console.log('Error removing department');
+            }
+        });
+};
+
+const showCreateNodeForm = (nodeId) => {
+    showCreateNodeFormVal.value = true;
+    creationNodeSelectedId.value = nodeId;
+};
+
+const onNodeCreated = async () => {
+    await fetchNodeLeaves(creationNodeSelectedId.value);
+};
+
+const redirectToDepartmentSummary = (id) => {
+    if (!id) return;
+    router.push({ name: 'DepartmentSummary', params: { id } });
+};
+</script>
+
+<template>
+    <QCard class="full-width" style="max-width: 800px">
+        <QTree
+            ref="treeRef"
+            :nodes="nodes"
+            node-key="id"
+            label-key="name"
+            v-model:expanded="expanded"
+            @update:expanded="onNodeExpanded($event)"
+        >
+            <template #default-header="{ node }">
+                <div
+                    class="row justify-between full-width q-pr-md cursor-pointer"
+                    @click.stop="redirectToDepartmentSummary(node.id)"
+                >
+                    <span class="text-uppercase">
+                        {{ node.name }}
+                    </span>
+                    <div class="row justify-between" style="max-width: max-content">
+                        <QIcon
+                            v-if="node.id"
+                            name="delete"
+                            color="primary"
+                            size="sm"
+                            class="q-pr-xs cursor-pointer"
+                            @click.stop="removeNode(node)"
+                        >
+                            <QTooltip>
+                                {{ t('Remove') }}
+                            </QTooltip>
+                        </QIcon>
+                        <QIcon
+                            name="add"
+                            color="primary"
+                            size="sm"
+                            class="cursor-pointer"
+                            @click.stop="showCreateNodeForm(node.id)"
+                        >
+                            <QTooltip>
+                                {{ t('Create') }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
+                </div>
+            </template>
+        </QTree>
+        <QDialog
+            v-model="showCreateNodeFormVal"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <CreateDepartmentChild
+                :parent-id="creationNodeSelectedId"
+                @on-data-saved="onNodeCreated()"
+            />
+        </QDialog>
+    </QCard>
+</template>
+
+<i18n>
+    es:
+        Departments: Departamentos
+        Remove: Quitar
+        Create: Crear
+        Are you sure you want to delete it?: ¿Seguro que quieres eliminarlo?
+        Delete department: Eliminar departamento
+</i18n>

src/components/ui/VnUserLink.vue

@@ -0,0 +1,21 @@
+<script setup>
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import { useI18n } from 'vue-i18n';
+
+const $props = defineProps({
+    name: { type: String, default: null },
+    workerId: { type: Number, default: null },
+    defaultName: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+</script>
+<template>
+    <slot name="link">
+        <span :class="{ link: $props.workerId }">
+            {{ $props.defaultName ? $props.name ?? t('globals.system') : $props.name }}
+        </span>
+    </slot>
+    <WorkerDescriptorProxy v-if="$props.workerId" :id="$props.workerId" />
+</template>
+<style scoped></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/useArrayData.js

@@ -58,7 +58,7 @@ export function useArrayData(key, userOptions) {
         }
     }
 
-    async function fetch({ append = false }) {
+    async function fetch({ append = false, updateRouter = true }) {
         if (!store.url) return;
 
         cancelRequest();
@@ -90,7 +90,7 @@ export function useArrayData(key, userOptions) {
         Object.assign(params, userParams);
 
         store.isLoading = true;
-
+        store.currentFilter = params;
         const response = await axios.get(store.url, {
             signal: canceller.signal,
             params,
@@ -100,15 +100,12 @@ export function useArrayData(key, userOptions) {
 
         hasMoreData.value = response.data.length === limit;
 
-        if (append === true) {
+        if (append) {
             if (!store.data) store.data = [];
             for (const row of response.data) store.data.push(row);
-        }
-
-        if (append === false) {
+        } else {
             store.data = response.data;
-
-            updateStateParams();
+            updateRouter && updateStateParams();
         }
 
         store.isLoading = false;
@@ -132,6 +129,7 @@ export function useArrayData(key, userOptions) {
 
     async function applyFilter({ filter, params }) {
         if (filter) store.userFilter = filter;
+        store.filter = {};
         if (params) store.userParams = Object.assign({}, params);
 
         await fetch({ append: false });
@@ -144,7 +142,8 @@ export function useArrayData(key, userOptions) {
         userParams = sanitizerParams(userParams, store?.exprBuilder);
 
         store.userParams = userParams;
-
+        store.skip = 0;
+        store.filter.skip = 0;
         await fetch({ append: false });
         return { filter, params };
     }
@@ -155,7 +154,9 @@ export function useArrayData(key, userOptions) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
+                    delete store.filter.where[
+                        Object.keys(exprBuilder ? exprBuilder(param) : param)[0]
+                    ];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }

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,8 +48,26 @@ 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: ' *';
+}

src/filters/dateRange.js

@@ -0,0 +1,8 @@
+export default function dateRange(value) {
+    const minHour = new Date(value);
+    minHour.setHours(0, 0, 0, 0);
+    const maxHour = new Date(value);
+    maxHour.setHours(23, 59, 59, 59);
+
+    return [minHour, maxHour];
+}

src/filters/index.js

@@ -7,15 +7,19 @@ import toCurrency from './toCurrency';
 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,
     toCurrency,
     toPercentage,
     dashIfEmpty,
+    dateRange,
 };

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

@@ -49,7 +49,6 @@ export default {
         microsip: 'Open in MicroSIP',
         noSelectedRows: `You don't have any line selected`,
         downloadCSVSuccess: 'CSV downloaded successfully',
-        // labels compartidos entre vistas
         reference: 'Reference',
         agency: 'Agency',
         wareHouseOut: 'Warehouse Out',
@@ -67,6 +66,8 @@ export default {
         class: 'clase',
         type: 'type',
         reason: 'reason',
+        noResults: 'No results',
+        system: 'System',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -113,11 +114,28 @@ export default {
     customer: {
         pageTitles: {
             customers: 'Customers',
+            create: 'Create',
             list: 'List',
             webPayments: 'Web Payments',
+            extendedList: 'Extended list',
+            notifications: 'Notifications',
+            defaulter: 'Defaulter',
             createCustomer: 'Create customer',
             summary: 'Summary',
-            basicData: 'Basic Data',
+            basicData: 'Basic data',
+            fiscalData: 'Fiscal data',
+            billingData: 'Billing data',
+            consignees: 'Consignees',
+            notes: 'Notes',
+            credits: 'Credits',
+            greuges: 'Greuges',
+            balance: 'Balance',
+            recoveries: 'Recoveries',
+            webAccess: 'Web access',
+            log: 'Log',
+            sms: 'Sms',
+            creditManagement: 'Credit management',
+            others: 'Others',
         },
         list: {
             phone: 'Phone',
@@ -208,6 +226,129 @@ export default {
             salesPerson: 'Sales person',
             contactChannel: 'Contact channel',
         },
+        extendedList: {
+            tableVisibleColumns: {
+                id: 'Identifier',
+                name: 'Name',
+                fi: 'Tax number',
+                salesPersonFk: 'Salesperson',
+                credit: 'Credit',
+                creditInsurance: 'Credit insurance',
+                phone: 'Phone',
+                mobile: 'Mobile',
+                street: 'Street',
+                countryFk: 'Country',
+                provinceFk: 'Province',
+                city: 'City',
+                postcode: 'Postcode',
+                email: 'Email',
+                created: 'Created',
+                businessTypeFk: 'Business type',
+                payMethodFk: 'Billing data',
+                sageTaxTypeFk: 'Sage tax type',
+                sageTransactionTypeFk: 'Sage tr. type',
+                isActive: 'Active',
+                isVies: 'Vies',
+                isTaxDataChecked: 'Verified data',
+                isEqualizated: 'Is equalizated',
+                isFreezed: 'Freezed',
+                hasToInvoice: 'Invoice',
+                hasToInvoiceByAddress: 'Invoice by address',
+                isToBeMailed: 'Mailing',
+                hasLcr: 'Received LCR',
+                hasCoreVnl: 'VNL core received',
+                hasSepaVnl: 'VNL B2B received',
+            },
+        },
+    },
+    entry: {
+        pageTitles: {
+            entries: 'Entries',
+            list: 'List',
+            summary: 'Summary',
+            basicData: 'Basic data',
+            buys: 'Buys',
+            notes: 'Notes',
+            log: 'Log',
+        },
+        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',
+        },
+        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',
+        },
+        notes: {
+            observationType: 'Observation type',
+            description: 'Description',
+        },
+        descriptor: {
+            agency: 'Agency',
+            landed: 'Landed',
+            warehouseOut: 'Warehouse Out',
+        },
     },
     ticket: {
         pageTitles: {
@@ -553,6 +694,82 @@ export default {
             country: 'Country',
         },
     },
+    order: {
+        pageTitles: {
+            order: 'Orders',
+            orderList: 'List',
+            create: 'Create',
+            summary: 'Summary',
+            basicData: 'Basic Data',
+            catalog: 'Catalog',
+            volume: 'Volume',
+            lines: 'Lines',
+        },
+        field: {
+            salesPersonFk: 'Sales Person',
+            clientFk: 'Client',
+            isConfirmed: 'Confirmed',
+            created: 'Created',
+            landed: 'Landed',
+            hour: 'Hour',
+            agency: 'Agency',
+            total: 'Total',
+        },
+        form: {
+            clientFk: 'Client',
+            addressFk: 'Address',
+            landed: 'Landed',
+            agencyModeFk: 'Agency',
+        },
+        list: {
+            newOrder: 'New Order',
+        },
+        summary: {
+            basket: 'Basket',
+            nickname: 'Nickname',
+            company: 'Company',
+            confirmed: 'Confirmed',
+            notConfirmed: 'Not confirmed',
+            created: 'Created',
+            landed: 'Landed',
+            phone: 'Phone',
+            createdFrom: 'Created From',
+            address: 'Address',
+            notes: 'Notes',
+            subtotal: 'Subtotal',
+            total: 'Total',
+            vat: 'VAT',
+            state: 'State',
+            alias: 'Alias',
+            items: 'Items',
+            orderTicketList: 'Order Ticket List',
+            details: 'Details',
+            item: 'Item',
+            description: 'Description',
+            quantity: 'Quantity',
+            price: 'Price',
+            amount: 'Amount',
+        },
+    },
+    department: {
+        pageTitles: {
+            basicData: 'Basic data',
+            department: 'Department',
+            summary: 'Summary',
+        },
+        name: 'Name',
+        code: 'Code',
+        chat: 'Chat',
+        bossDepartment: 'Boss Department',
+        email: 'Email',
+        selfConsumptionCustomer: 'Self-consumption customer',
+        telework: 'Telework',
+        notifyOnErrors: 'Notify on errors',
+        worksInProduction: 'Works in production',
+        hasToRefill: 'Fill in days without physical check-ins',
+        hasToSendMail: 'Send check-ins by email',
+        departmentRemoved: 'Department removed',
+    },
     worker: {
         pageTitles: {
             workers: 'Workers',
@@ -560,6 +777,8 @@ export default {
             basicData: 'Basic data',
             summary: 'Summary',
             notifications: 'Notifications',
+            workerCreate: 'New worker',
+            department: 'Department',
         },
         list: {
             name: 'Name',
@@ -569,6 +788,7 @@ export default {
             active: 'Active',
             department: 'Department',
             schedule: 'Schedule',
+            newWorker: 'New worker',
         },
         card: {
             workerId: 'Worker ID',
@@ -600,6 +820,25 @@ export default {
             subscribed: 'Subscribed to the notification',
             unsubscribed: 'Unsubscribed from the notification',
         },
+        create: {
+            name: 'Name',
+            lastName: 'Last name',
+            birth: 'Birth',
+            fi: 'Fi',
+            code: 'Worker code',
+            phone: 'Phone',
+            postcode: 'Postcode',
+            province: 'Province',
+            city: 'City',
+            street: 'Street',
+            webUser: 'Web user',
+            personalEmail: 'Personal email',
+            company: 'Company',
+            boss: 'Boss',
+            payMethods: 'Pay method',
+            iban: 'IBAN',
+            bankEntity: 'Swift / BIC',
+        },
         imageNotFound: 'Image not found',
     },
     wagon: {
@@ -650,6 +889,10 @@ export default {
         pageTitles: {
             routes: 'Routes',
             cmrsList: 'External CMRs list',
+            RouteList: 'List',
+            create: 'Create',
+            basicData: 'Basic Data',
+            summary: 'Summary',
         },
         cmr: {
             list: {
@@ -675,6 +918,15 @@ export default {
             list: 'List',
             create: 'Create',
             summary: 'Summary',
+            basicData: 'Basic data',
+            fiscalData: 'Fiscal data',
+            billingData: 'Billing data',
+            log: 'Log',
+            accounts: 'Accounts',
+            contacts: 'Contacts',
+            addresses: 'Addresses',
+            consumption: 'Consumption',
+            agencyTerm: 'Agency agreement',
         },
         list: {
             payMethod: 'Pay method',
@@ -711,6 +963,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: {
@@ -719,6 +1037,10 @@ export default {
             create: 'Create',
             summary: 'Summary',
             extraCommunity: 'Extra community',
+            travelCreate: 'New travel',
+            basicData: 'Basic data',
+            history: 'History',
+            thermographs: 'Termographs',
         },
         summary: {
             confirmed: 'Confirmed',
@@ -743,9 +1065,29 @@ 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: {
+            copyToken: 'Token copied to clipboard',
             settings: 'Settings',
             logOut: 'Log Out',
         },
@@ -765,5 +1107,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

@@ -66,6 +66,8 @@ export default {
         class: 'clase',
         type: 'tipo',
         reason: 'motivo',
+        noResults: 'Sin resultados',
+        system: 'Sistema',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -112,11 +114,28 @@ export default {
     customer: {
         pageTitles: {
             customers: 'Clientes',
+            create: 'Crear',
             list: 'Listado',
             webPayments: 'Pagos Web',
+            extendedList: 'Listado extendido',
+            notifications: 'Notificaciones',
+            defaulter: 'Morosos',
             createCustomer: 'Crear cliente',
-            basicData: 'Datos básicos',
             summary: 'Resumen',
+            basicData: 'Datos básicos',
+            fiscalData: 'Datos fiscales',
+            billingData: 'Forma de pago',
+            consignees: 'Consignatarios',
+            notes: 'Notas',
+            credits: 'Créditos',
+            greuges: 'Greuges',
+            balance: 'Balance',
+            recoveries: 'Recobros',
+            webAccess: 'Acceso web',
+            log: 'Historial',
+            sms: 'Sms',
+            creditManagement: 'Gestión de crédito',
+            others: 'Otros',
         },
         list: {
             phone: 'Teléfono',
@@ -206,6 +225,129 @@ export default {
             salesPerson: 'Comercial',
             contactChannel: 'Canal de contacto',
         },
+        extendedList: {
+            tableVisibleColumns: {
+                id: 'Identificador',
+                name: 'Nombre',
+                fi: 'NIF / CIF',
+                salesPersonFk: 'Comercial',
+                credit: 'Crédito',
+                creditInsurance: 'Crédito asegurado',
+                phone: 'Teléfono',
+                mobile: 'Móvil',
+                street: 'Dirección fiscal',
+                countryFk: 'País',
+                provinceFk: 'Provincia',
+                city: 'Población',
+                postcode: 'Código postal',
+                email: 'Email',
+                created: 'Fecha creación',
+                businessTypeFk: 'Tipo de negocio',
+                payMethodFk: 'Forma de pago',
+                sageTaxTypeFk: 'Tipo de impuesto Sage',
+                sageTransactionTypeFk: 'Tipo tr. sage',
+                isActive: 'Activo',
+                isVies: 'Vies',
+                isTaxDataChecked: 'Datos comprobados',
+                isEqualizated: 'Recargo de equivalencias',
+                isFreezed: 'Congelado',
+                hasToInvoice: 'Factura',
+                hasToInvoiceByAddress: 'Factura por consigna',
+                isToBeMailed: 'Env. emails',
+                hasLcr: 'Recibido LCR',
+                hasCoreVnl: 'Recibido core VNL',
+                hasSepaVnl: 'Recibido B2B VNL',
+            },
+        },
+    },
+    entry: {
+        pageTitles: {
+            entries: 'Entradas',
+            list: 'Listado',
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            buys: 'Compras',
+            notes: 'Notas',
+            log: 'Historial',
+        },
+        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',
+        },
+        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',
+        },
+        notes: {
+            observationType: 'Tipo de observación',
+            description: 'Descripción',
+        },
+        descriptor: {
+            agency: 'Agencia',
+            landed: 'F. entrega',
+            warehouseOut: 'Alm. salida',
+        },
     },
     ticket: {
         pageTitles: {
@@ -375,7 +517,7 @@ export default {
     },
     invoiceOut: {
         pageTitles: {
-            invoiceOuts: 'Crear factura',
+            invoiceOuts: 'Fact. emitidas',
             list: 'Listado',
             negativeBases: 'Bases Negativas',
             globalInvoicing: 'Facturación global',
@@ -460,6 +602,63 @@ export default {
             },
         },
     },
+    order: {
+        pageTitles: {
+            order: 'Cesta',
+            orderList: 'Listado',
+            create: 'Crear',
+            summary: 'Resumen',
+            basicData: 'Datos básicos',
+            catalog: 'Catálogo',
+            volume: 'Volumen',
+            lines: 'Líneas',
+        },
+        field: {
+            salesPersonFk: 'Comercial',
+            clientFk: 'Cliente',
+            isConfirmed: 'Confirmada',
+            created: 'Creado',
+            landed: 'F. entrega',
+            hour: 'Hora',
+            agency: 'Agencia',
+            total: 'Total',
+        },
+        form: {
+            clientFk: 'Cliente',
+            addressFk: 'Dirección',
+            landed: 'F. entrega',
+            agencyModeFk: 'Agencia',
+        },
+        list: {
+            newOrder: 'Nuevo Pedido',
+        },
+        summary: {
+            basket: 'Cesta',
+            nickname: 'Alias',
+            company: 'Empresa',
+            confirmed: 'Confirmada',
+            notConfirmed: 'No confirmada',
+            created: 'Creado',
+            landed: 'F. entrega',
+            phone: 'Teléfono',
+            createdFrom: 'Creado desde',
+            address: 'Dirección',
+            notes: 'Notas',
+            subtotal: 'Subtotal',
+            total: 'Total',
+            vat: 'IVA',
+            state: 'Estado',
+            alias: 'Alias',
+            items: 'Items',
+            orderTicketList: 'Tickets del pedido',
+            details: 'Detalles',
+            item: 'Item',
+            description: 'Descripción',
+            quantity: 'Cantidad',
+            price: 'Precio',
+            amount: 'Monto',
+        },
+    },
     shelving: {
         pageTitles: {
             shelving: 'Carros',
@@ -552,6 +751,25 @@ export default {
             country: 'País',
         },
     },
+    department: {
+        pageTitles: {
+            basicData: 'Basic data',
+            department: 'Departamentos',
+            summary: 'Resumen',
+        },
+        name: 'Nombre',
+        code: 'Código',
+        chat: 'Chat',
+        bossDepartment: 'Jefe de departamento',
+        email: 'Email',
+        selfConsumptionCustomer: 'Cliente autoconsumo',
+        telework: 'Teletrabaja',
+        notifyOnErrors: 'Notificar errores',
+        worksInProduction: 'Pertenece a producción',
+        hasToRefill: 'Completar días sin registros físicos',
+        hasToSendMail: 'Enviar fichadas por mail',
+        departmentRemoved: 'Departamento eliminado',
+    },
     worker: {
         pageTitles: {
             workers: 'Trabajadores',
@@ -559,6 +777,8 @@ export default {
             basicData: 'Datos básicos',
             summary: 'Resumen',
             notifications: 'Notificaciones',
+            workerCreate: 'Nuevo trabajador',
+            department: 'Departamentos',
         },
         list: {
             name: 'Nombre',
@@ -568,6 +788,7 @@ export default {
             active: 'Activo',
             department: 'Departamento',
             schedule: 'Horario',
+            newWorker: 'Nuevo trabajador',
         },
         card: {
             workerId: 'ID Trabajador',
@@ -599,6 +820,25 @@ export default {
             subscribed: 'Se ha suscrito a la notificación',
             unsubscribed: 'Se ha dado de baja de la notificación',
         },
+        create: {
+            name: 'Nombre',
+            lastName: 'Apellido',
+            birth: 'Fecha de nacimiento',
+            fi: 'DNI/NIF/NIE',
+            code: 'Código de trabajador',
+            phone: 'Teléfono',
+            postcode: 'Código postal',
+            province: 'Provincia',
+            city: 'Población',
+            street: 'Dirección',
+            webUser: 'Usuario Web',
+            personalEmail: 'Correo personal',
+            company: 'Empresa',
+            boss: 'Jefe',
+            payMethods: 'Método de pago',
+            iban: 'IBAN',
+            bankEntity: 'Swift / BIC',
+        },
         imageNotFound: 'No se ha encontrado la imagen',
     },
     wagon: {
@@ -649,6 +889,10 @@ export default {
         pageTitles: {
             routes: 'Rutas',
             cmrsList: 'Listado de CMRs externos',
+            RouteList: 'Listado',
+            create: 'Crear',
+            basicData: 'Datos básicos',
+            summary: 'Summary',
         },
         cmr: {
             list: {
@@ -674,6 +918,15 @@ export default {
             list: 'Listado',
             create: 'Crear',
             summary: 'Resumen',
+            basicData: 'Datos básicos',
+            fiscalData: 'Datos fiscales',
+            billingData: 'Forma de pago',
+            log: 'Historial',
+            accounts: 'Cuentas',
+            contacts: 'Contactos',
+            addresses: 'Direcciones',
+            consumption: 'Consumo',
+            agencyTerm: 'Acuerdo agencia',
         },
         list: {
             payMethod: 'Método de pago',
@@ -692,7 +945,7 @@ export default {
             payDeadline: 'Plazo de pago',
             payDay: 'Día de pago',
             account: 'Cuenta',
-            fiscalData: 'Data fiscal',
+            fiscalData: 'Datos fiscales',
             sageTaxType: 'Tipo de impuesto Sage',
             sageTransactionType: 'Tipo de transacción Sage',
             sageWithholding: 'Retención sage',
@@ -710,6 +963,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: {
@@ -718,6 +1037,10 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             extraCommunity: 'Extra comunitarios',
+            travelCreate: 'Nuevo envío',
+            basicData: 'Datos básicos',
+            history: 'Historial',
+            thermographs: 'Termógrafos',
         },
         summary: {
             confirmed: 'Confirmado',
@@ -742,9 +1065,29 @@ 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: {
+            copyToken: 'Token copiado al portapapeles',
             settings: 'Configuración',
             logOut: 'Cerrar sesión',
         },
@@ -764,5 +1107,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/i18n/index.js

@@ -1,6 +1,8 @@
 import en from './en';
 import es from './es';
-
+export const localeEquivalence = {
+     'en':'en-GB'
+}
 export default {
     en: en,
     es: es,

src/layouts/MainLayout.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
-
 const quasar = useQuasar();
 </script>
 

src/layouts/OutLayout.vue

@@ -26,6 +26,7 @@ const userLocale = computed({
         }
     },
 });
+
 const darkMode = computed({
     get() {
         return Dark.isActive;

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
@@ -282,6 +291,8 @@ async function importToNewRefundTicket() {
                 selection="multiple"
                 v-model:selected="selectedRows"
                 :grid="$q.screen.lt.md"
+                :pagination="{ rowsPerPage: 0 }"
+                :hide-bottom="true"
             >
                 <template #body-cell-ticket="{ value }">
                     <QTd align="center">
@@ -335,7 +346,23 @@ async function importToNewRefundTicket() {
                                     </QItemSection>
                                     <QItemSection side>
                                         <QItemLabel v-if="column.name === 'destination'">
-                                            {{ column.value.description }}
+                                            <VnSelectFilter
+                                                v-model="props.row.claimDestinationFk"
+                                                :options="destinationTypes"
+                                                option-label="description"
+                                                option-value="id"
+                                                :autofocus="true"
+                                                dense
+                                                input-debounce="0"
+                                                hide-selected
+                                                @update:model-value="
+                                                    (value) =>
+                                                        updateDestination(
+                                                            value,
+                                                            props.row
+                                                        )
+                                                "
+                                            />
                                         </QItemLabel>
                                         <QItemLabel v-else>
                                             {{ column.value }}
@@ -417,25 +444,6 @@ async function importToNewRefundTicket() {
             </QCardActions>
         </QCard>
     </QDialog>
-    <!-- <QDialog v-model="dialogGreuge">
-        <QCardSection>
-            <QItem class="q-pa-sm">
-                <span class="q-pa-sm q-dialog__title text-white">
-                    {{ t('dialogGreuge title') }}
-                </span>
-                <QBtn class="q-pa-sm" icon="close" flat round dense v-close-popup />
-            </QItem>
-            <QCardActions class="justify-end q-mr-sm">
-                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
-                <QBtn
-                    :label="t('globals.save')"
-                    color="primary"
-                    v-close-popup
-                    @click="onUpdateGreugeAccept"
-                />
-            </QCardActions>
-        </QCardSection>
-    </QDialog> -->
 </template>
 <style lang="scss" scoped>
 .slider-container {
@@ -495,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/ClaimBasicData.vue

@@ -3,11 +3,13 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnInputDate from "components/common/VnInputDate.vue";
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+import { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -102,14 +104,17 @@ const statesFilter = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.client.name"
                         :label="t('claim.basicData.customer')"
                         disable
                     />
                 </div>
                 <div class="col">
-                    <VnInputDate v-model="data.created" :label="t('claim.basicData.created')" />
+                    <VnInputDate
+                        v-model="data.created"
+                        :label="t('claim.basicData.created')"
+                    />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
@@ -165,7 +170,7 @@ const statesFilter = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.rma"
                         :label="t('claim.basicData.returnOfMaterial')"
                         :rules="validate('claim.rma')"

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';
 
-import { onMounted } from '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()">
@@ -41,11 +27,7 @@ const entityId = computed(() => {
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
+            <VnSubToolbar />
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -2,16 +2,14 @@
 import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { toDate } from 'src/filters';
+import { toDate, toPercentage } from 'src/filters';
 import { useState } from 'src/composables/useState';
-
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const $props = defineProps({
     id: {
@@ -34,7 +32,16 @@ const filter = {
         {
             relation: 'client',
             scope: {
-                include: { relation: 'salesPersonUser' },
+                include: [
+                    { relation: 'salesPersonUser' },
+                    {
+                        relation: 'claimsRatio',
+                        scope: {
+                            fields: ['claimingRate'],
+                            limit: 1,
+                        },
+                    },
+                ],
             },
         },
         {
@@ -118,18 +125,18 @@ const setData = (entity) => {
                 :value="entity.worker.user.name"
             >
                 <template #value>
-                    <span class="link">
-                        {{ entity.worker.user.name }}
-                        <WorkerDescriptorProxy :id="entity.worker.user.id" />
-                    </span>
+                    <VnUserLink
+                        :name="entity.worker.user.name"
+                        :worker-id="entity.worker.id"
+                    />
                 </template>
             </VnLv>
             <VnLv :label="t('claim.card.commercial')">
                 <template #value>
-                    <span class="link">
-                        {{ entity.client?.salesPersonUser?.name }}
-                        <WorkerDescriptorProxy :id="entity.client?.salesPersonFk" />
-                    </span>
+                    <VnUserLink
+                        :name="entity.client?.salesPersonUser?.name"
+                        :worker-id="entity.client?.salesPersonFk"
+                    />
                 </template>
             </VnLv>
             <VnLv
@@ -137,6 +144,10 @@ const setData = (entity) => {
                 :value="entity.ticket?.address?.province?.name"
             />
             <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
+            <VnLv
+                :label="t('claimRate')"
+                :value="toPercentage(entity.client?.claimsRatio?.claimingRate)"
+            />
         </template>
         <template #actions="{ entity }">
             <QCardActions>
@@ -165,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/ClaimDevelopment.vue

@@ -1,13 +1,11 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import CrudModel from 'components/CrudModel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
-import { getUrl } from 'composables/getUrl';
 import { tMobile } from 'composables/tMobile';
-import router from 'src/router';
 
 const route = useRoute();
 
@@ -21,11 +19,6 @@ const claimRedeliveries = ref([]);
 const workers = ref([]);
 const selected = ref([]);
 const saveButtonRef = ref();
-let salixUrl;
-
-onMounted(async () => {
-    salixUrl = await getUrl(`claim/${route.params.id}`);
-});
 
 const developmentsFilter = {
     fields: [
@@ -54,6 +47,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 1,
+        align: 'left',
     },
     {
         name: 'claimResult',
@@ -66,6 +60,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 2,
+        align: 'left',
     },
     {
         name: 'claimResponsible',
@@ -78,6 +73,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 3,
+        align: 'left',
     },
     {
         name: 'worker',
@@ -89,6 +85,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'nickname',
         tabIndex: 4,
+        align: 'left',
     },
     {
         name: 'claimRedelivery',
@@ -101,6 +98,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 5,
+        align: 'left',
     },
 ]);
 </script>
@@ -158,6 +156,7 @@ const columns = computed(() => [
                 hide-pagination
                 v-model:selected="selected"
                 :grid="$q.screen.lt.md"
+                table-header-class="text-left"
             >
                 <template #body-cell="{ row, col }">
                     <QTd
@@ -165,7 +164,6 @@ const columns = computed(() => [
                         @keyup.ctrl.enter.stop="claimDevelopmentForm.saveChanges()"
                     >
                         <VnSelectFilter
-                            :label="col.label"
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"

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';
 
@@ -43,17 +42,20 @@ async function onFetchClaim(data) {
     fetchMana();
 }
 
-const amount = ref(0);
-const amountClaimed = ref(0);
+const amount = ref();
+const amountClaimed = ref();
 async function onFetch(rows) {
+    amount.value = 0;
+    amountClaimed.value = 0;
     if (!rows || !rows.length) return;
+
     amount.value = rows.reduce(
-        (acumulator, { sale }) => acumulator + sale.price * sale.quantity,
+        (accumulator, { sale }) => accumulator + sale.price * sale.quantity,
         0
     );
 
     amountClaimed.value = rows.reduce(
-        (acumulator, line) => acumulator + line.sale.price * line.quantity,
+        (accumulator, line) => accumulator + line.sale.price * line.quantity,
         0
     );
 }
@@ -155,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
@@ -189,6 +189,7 @@ function showImportDialog() {
                 save-url="ClaimBeginnings/crud"
                 :filter="linesFilter"
                 @on-fetch="onFetch"
+                @save-changes="onFetch"
                 v-model:selected="selected"
                 :default-save="false"
                 :default-reset="false"

src/pages/Claim/Card/ClaimNotes.vue

@@ -8,6 +8,10 @@ const state = useState();
 const user = state.getUser();
 const id = route.params.id;
 
+const $props = defineProps({
+    addNote: { type: Boolean, default: true },
+});
+
 const claimFilter = {
     where: { claimFk: id },
     fields: ['created', 'workerFk', 'text'],
@@ -26,8 +30,8 @@ const body = {
 </script>
 <template>
     <div class="column items-center">
-        <VnNotes
-            :add-note="true"
+        <VnNotes style="overflow-y: scroll;"
+            :add-note="$props.addNote"
             :id="id"
             url="claimObservations"
             :filter="claimFilter"

src/pages/Claim/Card/ClaimSummary.vue

@@ -7,8 +7,9 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import FetchData from 'components/FetchData.vue';
 import { getUrl } from 'src/composables/getUrl';
 import { useSession } from 'src/composables/useSession';
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -132,7 +133,7 @@ const developmentColumns = ref([
     {
         name: 'worker',
         label: 'claim.summary.worker',
-        field: (row) => row.worker.user.nickname,
+        field: (row) => row.worker?.user.nickname,
         sortable: true,
     },
     {
@@ -195,30 +196,30 @@ function openDialog(dmsId) {
                 </VnLv>
                 <VnLv :label="t('claim.summary.assignedTo')">
                     <template #value>
-                        <span class="link">
-                            {{ claim.worker.user.nickname }}
-                            <WorkerDescriptorProxy :id="claim.workerFk" />
-                        </span>
+                        <VnUserLink
+                            :name="claim.worker?.user?.nickname"
+                            :worker-id="claim.workerFk"
+                        />
                     </template>
                 </VnLv>
                 <VnLv :label="t('claim.summary.attendedBy')">
                     <template #value>
-                        <span class="link">
-                            {{ claim.client.salesPersonUser.name }}
-                            <WorkerDescriptorProxy :id="claim.client.salesPersonFk" />
-                        </span>
+                        <VnUserLink
+                            :name="claim.client?.salesPersonUser?.name"
+                            :worker-id="claim.client?.salesPersonFk"
+                        />
                     </template>
                 </VnLv>
             </QCard>
-            <QCard class="vn-one">
-                <a class="header" :href="claimUrl + 'note/index'">
+            <QCard class="vn-max claimVnNotes">
+                <a class="header" :href="`#/claim/${entityId}/notes`">
                     {{ t('claim.summary.notes') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
-                <!-- Use VnNotes and maybe VirtualScroll-->
+                <ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
             </QCard>
             <QCard class="vn-max" v-if="salesClaimed.length > 0">
-                <a class="header" :href="claimUrl + 'note/index'">
+                <a class="header" :href="`#/claim/${entityId}/lines`">
                     {{ t('claim.summary.details') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
@@ -312,20 +313,6 @@ function openDialog(dmsId) {
                     />
                 </div>
             </QCard>
-            <!-- <QCardSection class="q-pa-md" v-if="observations.length > 0">
-                <h6>{{ t('claim.summary.notes') }}</h6>
-                <div class="note-list" v-for="note in observations" :key="note.id">
-                    <div class="note-caption">
-                        <span
-                            >{{ note.worker.firstName }} {{ note.worker.lastName }}
-                        </span>
-                        <span>{{ toDate(note.created) }}</span>
-                    </div>
-                    <div class="note-text">
-                        <span>{{ note.text }}</span>
-                    </div>
-                </div>
-            </QCardSection> -->
             <QDialog
                 v-model="multimediaDialog"
                 transition-show="slide-up"
@@ -368,6 +355,13 @@ function openDialog(dmsId) {
         </template>
     </CardSummary>
 </template>
+<style lang="scss">
+.claimVnNotes {
+    .q-card {
+        max-width: 100%;
+    }
+}
+</style>
 <style lang="scss" scoped>
 .q-dialog__inner--minimized > div {
     max-width: 80%;

src/pages/Claim/ClaimFilter.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
@@ -34,106 +36,122 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
-                <QItem>
-                    <QItemSection>
-                        <QInput
-                            :label="t('Customer ID')"
-                            v-model="params.clientFk"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QInput
-                            :label="t('Client Name')"
-                            v-model="params.clientName"
-                            lazy-rules
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <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
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <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
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <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
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mb-md">
-                    <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
-                        />
-                    </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')"
@@ -149,13 +167,16 @@ const states = ref();
                             />
                         </QItemSection>
                     </QItem> -->
-                    <QItem>
-                        <QItemSection>
-                            <VnInputDate v-model="params.created" :label="t('Created')" />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+                <QItem>
+                    <QItemSection>
+                        <VnInputDate
+                            v-model="params.created"
+                            :label="t('Created')"
+                            is-outlined
+                        />
+                    </QItemSection>
+                </QItem>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Claim/ClaimList.vue

@@ -11,7 +11,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import WorkerDescriptorProxy from '../Worker/Card/WorkerDescriptorProxy.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const stateStore = useStateStore();
 const router = useRouter();
@@ -38,15 +38,6 @@ function viewSummary(id) {
         },
     });
 }
-
-function viewDescriptor(id) {
-    quasar.dialog({
-        component: CustomerDescriptorProxy,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -80,7 +71,7 @@ function viewDescriptor(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"
@@ -96,20 +87,21 @@ function viewDescriptor(id) {
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv label="ID" :value="row.id" />
-                            <VnLv :label="t('claim.list.customer')" @click.stop>
+                            <VnLv :label="t('claim.list.customer')">
                                 <template #value>
-                                    <span class="link">
+                                    <span class="link" @click.stop>
                                         {{ row.clientName }}
                                         <CustomerDescriptorProxy :id="row.clientFk" />
                                     </span>
                                 </template>
                             </VnLv>
-                            <VnLv :label="t('claim.list.assignedTo')" @click.stop>
+                            <VnLv :label="t('claim.list.assignedTo')">
                                 <template #value>
-                                    <span class="link">
-                                        {{ row.workerName }}
-                                        <WorkerDescriptorProxy :id="row.workerFk" />
+                                    <span @click.stop>
+                                        <VnUserLink
+                                            :name="row.workerName"
+                                            :worker-id="row.workerFk"
+                                        />
                                     </span>
                                 </template>
                             </VnLv>
@@ -155,13 +147,6 @@ function viewDescriptor(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

@@ -2,10 +2,13 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import { useArrayData } from 'src/composables/useArrayData';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import axios from 'axios';
 
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -65,7 +68,7 @@ async function remove({ id }) {
         <QPageSticky expand position="top" :offset="[16, 16]">
             <QCard class="card q-pa-md">
                 <QForm @submit="submit">
-                    <QInput
+                    <VnInput
                         ref="input"
                         v-model="newRma.code"
                         :label="t('claim.rmaList.code')"
@@ -81,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"
@@ -157,7 +160,6 @@ async function remove({ id }) {
     padding-top: 156px;
 }
 
-.card-list,
 .card {
     width: 100%;
     max-width: 60em;

src/pages/Customer/Card/CustomerBalance.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Balance</div>
+</template>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
 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';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -64,7 +65,7 @@ const filterOptions = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.socialName"
                         :label="t('customer.basicData.socialName')"
                         :rules="validate('client.socialName')"
@@ -87,7 +88,7 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.contact"
                         :label="t('customer.basicData.contact')"
                         :rules="validate('client.contact')"
@@ -95,7 +96,7 @@ const filterOptions = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.email"
                         type="email"
                         :label="t('customer.basicData.email')"
@@ -106,7 +107,7 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.phone"
                         :label="t('customer.basicData.phone')"
                         :rules="validate('client.phone')"
@@ -114,7 +115,7 @@ const filterOptions = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.mobile"
                         :label="t('customer.basicData.mobile')"
                         :rules="validate('client.mobile')"

src/pages/Customer/Card/CustomerBillingData.vue

@@ -0,0 +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 VnSelectCreate from 'src/components/common/VnSelectCreate.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>
+    <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">
+                    <VnSelectCreate
+                        :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>
+                    </VnSelectCreate>
+                </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/CustomerCard.vue

@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -28,11 +29,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
+            <VnSubToolbar />
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>

src/pages/Customer/Card/CustomerConsignees.vue

@@ -0,0 +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>
+    <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/CustomerCreditManagement.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Credit management</div>
+</template>

src/pages/Customer/Card/CustomerCredits.vue

@@ -0,0 +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>
+    <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/CustomerDescriptor.vue

@@ -4,9 +4,9 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency } from 'src/filters';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
 
 const $props = defineProps({
     id: {
@@ -44,10 +44,10 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
         <template #body="{ entity }">
             <VnLv v-if="entity.salesPersonUser" :label="t('customer.card.salesPerson')">
                 <template #value>
-                    <span class="link">
-                        {{ entity.salesPersonUser.name }}
-                        <WorkerDescriptorProxy :id="entity.salesPersonFk" />
-                    </span>
+                    <VnUserLink
+                        :name="entity.salesPersonUser?.name"
+                        :worker-id="entity.salesPersonFk"
+                    />
                 </template>
             </VnLv>
             <VnLv :label="t('customer.card.credit')" :value="toCurrency(entity.credit)" />

src/pages/Customer/Card/CustomerFiscalData.vue

@@ -0,0 +1,295 @@
+<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 CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const townsFetchDataRef = ref(null);
+const postcodeFetchDataRef = ref(null);
+const typesTaxes = ref([]);
+const typesTransactions = ref([]);
+const citiesLocationOptions = ref([]);
+const provincesLocationOptions = ref([]);
+const countriesOptions = ref([]);
+const postcodesOptions = ref([]);
+
+const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
+    await postcodeFetchDataRef.value.fetch();
+    await townsFetchDataRef.value.fetch();
+    formData.postcode = code;
+    formData.provinceFk = provinceFk;
+    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
+    formData.countryFk = countryFk;
+};
+</script>
+
+<template>
+    <fetch-data auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
+    <fetch-data
+        auto-load
+        @on-fetch="(data) => (typesTransactions = data)"
+        url="SageTransactionTypes"
+    />
+    <FetchData
+        ref="townsFetchDataRef"
+        @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"
+    />
+    <FetchData
+        ref="postcodeFetchDataRef"
+        url="Postcodes/location"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+    />
+    <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">
+                    <VnSelectCreate
+                        :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.postcode"
+                    >
+                        <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>
+                    </VnSelectCreate>
+                </div>
+                <div class="col">
+                    <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"
+                    />
+                </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/CustomerGreuges.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Greuges</div>
+</template>

src/pages/Customer/Card/CustomerLog.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Log</div>
+</template>

src/pages/Customer/Card/CustomerNotes.vue

@@ -0,0 +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>
+    <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/CustomerOthers.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Others</div>
+</template>

src/pages/Customer/Card/CustomerRecoveries.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Recoveries</div>
+</template>

src/pages/Customer/Card/CustomerSms.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import VnSms from 'src/components/ui/VnSms.vue';
+
+const route = useRoute();
+const id = route.params.id;
+
+const where = {
+    clientFk: id,
+    ticketFk: null,
+};
+</script>
+<template>
+    <div class="column items-center">
+        <VnSms url="clientSms" :where="where" />
+    </div>
+</template>

src/pages/Customer/Card/CustomerSummary.vue

@@ -38,7 +38,7 @@ const balanceDue = computed(() => {
 const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
 
 const claimRate = computed(() => {
-    return customer.value.claimsRatio.claimingRate * 100;
+    return customer.value.claimsRatio.claimingRate;
 });
 
 const priceIncreasingRate = computed(() => {
@@ -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/Card/CustomerWebAccess.vue

@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Web access</div>
+</template>

src/pages/Customer/CustomerCreate.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+const { t } = useI18n();
+
+const newClientForm = reactive({
+    active: true,
+    name: null,
+    salesPersonFk: null,
+    businessTypeFk: null,
+    fi: null,
+    socialName: null,
+    street: null,
+    postcode: null,
+    city: null,
+    provinceFk: null,
+    countryFk: null,
+    userName: null,
+    email: null,
+    isEqualizated: false,
+});
+
+const workersOptions = ref([]);
+const businessTypesOptions = 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>
+    <FetchData
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+        url="Workers/search?departmentCodes"
+    />
+    <FetchData
+        @on-fetch="(data) => (businessTypesOptions = data)"
+        auto-load
+        url="BusinessTypes"
+    />
+    <QPage>
+        <VnSubToolbar />
+        <FormModel
+            :form-initial-data="newClientForm"
+            model="client"
+            url-create="Clients/createWithUser"
+        >
+            <template #form="{ data, validate }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput :label="t('Comercial name')" v-model="data.name" />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Salesperson')"
+                            :options="workersOptions"
+                            hide-selected
+                            option-label="name"
+                            option-value="id"
+                            v-model="data.salesPersonFk"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Business type')"
+                            :options="businessTypesOptions"
+                            hide-selected
+                            option-label="description"
+                            option-value="code"
+                            v-model="data.businessTypeFk"
+                        />
+                    </div>
+                    <div class="col">
+                        <QInput v-model="data.fi" :label="t('Tax number')" />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            :label="t('Business name')"
+                            :rules="validate('Client.socialName')"
+                            v-model="data.socialName"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput
+                            :label="t('Street')"
+                            :rules="validate('Client.street')"
+                            v-model="data.street"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnLocation
+                            :rules="validate('Worker.postcode')"
+                            :roles-allowed-to-create="['deliveryAssistant']"
+                            :options="postcodesOptions"
+                            v-model="data.location"
+                            @update:model-value="
+                                (location) => handleLocation(data, location)
+                            "
+                        >
+                        </VnLocation>
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QInput v-model="data.userName" :label="t('Web user')" />
+                    </div>
+                    <div class="col">
+                        <QInput v-model="data.email" :label="t('Email')" />
+                    </div>
+                </VnRow>
+                <QCheckbox
+                    :label="t('Is equalizated')"
+                    v-model="newClientForm.isEqualizated"
+                />
+            </template>
+        </FormModel>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-gap: 20px;
+}
+</style>
+
+<i18n>
+es:
+    Comercial name: Nombre comercial
+    Salesperson: Comercial
+    Business type: Tipo de negocio
+    Tax number: NIF / CIF
+    Business name: Razón social
+    Street: Dirección fiscal
+    Postcode: Código postal
+    City: Población
+    Province: Provincia
+    Country: País
+    Web user: Usuario web
+    Email: Email
+    Is equalizated: Recargo de equivalencia
+</i18n>

src/pages/Customer/CustomerFilter.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -35,120 +37,130 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <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>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
+                        <VnInput :label="t('Phone')" v-model="params.phone" is-outlined>
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
+                                <QIcon name="phone" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('Name')" v-model="params.name" lazy-rules />
+                        <VnInput :label="t('Email')" v-model="params.email" is-outlined>
+                            <template #prepend>
+                                <QIcon name="email" size="sm" />
+                            </template>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
-                    <QItemSection>
-                        <QInput
-                            :label="t('Social Name')"
-                            v-model="params.socialName"
-                            lazy-rules
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection v-if="!workers">
+                    <QItemSection v-if="!zones">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
-                    <QItemSection v-if="workers">
+                    <QItemSection v-if="zones">
                         <VnSelectFilter
-                            :label="t('Salesperson')"
-                            v-model="params.salesPersonFk"
+                            :label="t('Zone')"
+                            v-model="params.zoneFk"
                             @update:model-value="searchFn()"
-                            :options="workers"
+                            :options="zones"
                             option-value="id"
                             option-label="name"
                             emit-value
                             map-options
-                            use-input
-                            :input-debounce="0"
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
-                    <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
-                            :input-debounce="0"
+                    <QItemSection>
+                        <VnInput
+                            :label="t('Postcode')"
+                            v-model="params.postcode"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
-                    <QItemSection>
-                        <QInput :label="t('City')" v-model="params.city" lazy-rules />
-                    </QItemSection>
-                </QItem>
-                <QSeparator />
-                <QExpansionItem :label="t('More options')" expand-separator>
-                    <QItem>
-                        <QItemSection>
-                            <QInput :label="t('Phone')" v-model="params.phone" lazy-rules>
-                                <template #prepend>
-                                    <QIcon name="phone" size="sm"></QIcon>
-                                </template>
-                            </QInput>
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <QInput :label="t('Email')" v-model="params.email" lazy-rules>
-                                <template #prepend>
-                                    <QIcon name="email" size="sm"></QIcon>
-                                </template>
-                            </QInput>
-                        </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
-                            />
-                        </QItemSection>
-                    </QItem>
-                    <QItem>
-                        <QItemSection>
-                            <QInput
-                                :label="t('Postcode')"
-                                v-model="params.postcode"
-                                lazy-rules
-                            />
-                        </QItemSection>
-                    </QItem>
-                </QExpansionItem>
-            </QList>
+            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Customer/CustomerList.vue

@@ -28,25 +28,29 @@ function viewSummary(id) {
         },
     });
 }
+
+const redirectToCreateView = () => {
+    router.push({ name: 'CustomerCreate' });
+};
 </script>
 
 <template>
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#searchbar">
             <VnSearchbar
-                data-key="CustomerList"
-                :label="t('Search customer')"
                 :info="t('You can search by customer id or name')"
+                :label="t('Search customer')"
+                data-key="CustomerList"
             />
         </Teleport>
         <Teleport to="#actions-append">
             <div class="row q-gutter-x-sm">
                 <QBtn
-                    flat
                     @click="stateStore.toggleRightDrawer()"
-                    round
                     dense
+                    flat
                     icon="menu"
+                    round
                 >
                     <QTooltip bottom anchor="bottom right">
                         {{ t('globals.collapseMenu') }}
@@ -55,26 +59,26 @@ function viewSummary(id) {
             </div>
         </Teleport>
     </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
         <QScrollArea class="fit text-grey-8">
             <CustomerFilter data-key="CustomerList" />
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
-                data-key="CustomerList"
-                url="/Clients/filter"
-                order="id DESC"
                 auto-load
+                data-key="CustomerList"
+                order="id DESC"
+                url="/Clients/filter"
             >
                 <template #body="{ rows }">
                     <CardList
-                        v-for="row of rows"
+                        :id="row.id"
                         :key="row.id"
                         :title="row.name"
-                        :id="row.id"
                         @click="navigate(row.id)"
+                        v-for="row of rows"
                     >
                         <template #list-items>
                             <VnLv :label="t('customer.list.email')" :value="row.email" />
@@ -103,18 +107,18 @@ function viewSummary(id) {
                 </template>
             </VnPaginate>
         </div>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="redirectToCreateView()" color="primary" fab icon="add" />
+            <QTooltip>
+                {{ t('New client') }}
+            </QTooltip>
+        </QPageSticky>
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search customer: Buscar cliente
     You can search by customer id or name: Puedes buscar por id o nombre del cliente
+    New client: Nuevo cliente
 </i18n>

src/pages/Customer/CustomerPaymentsFilter.vue

@@ -1,118 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-
-const { t } = useI18n();
-const props = defineProps({
-    dataKey: {
-        type: String,
-        required: true,
-    },
-});
-
-function isValidNumber(value) {
-    return /^(\d|\d+(\.|,)?\d+)$/.test(value);
-}
-</script>
-
-<template>
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true" :show-all="false">
-        <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 }">
-            <QList dense>
-                <QItem>
-                    <QItemSection>
-                        <QInput
-                            :label="t('Order ID')"
-                            v-model="params.orderFk"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:basket" size="sm"></QIcon>
-                            </template>
-                        </QInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QInput
-                            :label="t('Customer ID')"
-                            v-model="params.clientFk"
-                            lazy-rules
-                        >
-                            <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
-                            </template>
-                        </QInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <QInput
-                            :label="t('Amount')"
-                            v-model="params.amount"
-                            lazy-rules
-                            @update:model-value="
-                                (value) => {
-                                    if (value.includes(','))
-                                        params.amount = params.amount.replace(',', '.');
-                                }
-                            "
-                            :rules="[
-                                (val) =>
-                                    isValidNumber(val) || !val || 'Please type a number',
-                            ]"
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="sm" />
-                            </template>
-                        </QInput>
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.from"
-                            :label="t('From')"
-                        />
-                    </QItemSection>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.to"
-                            :label="t('To')"
-                        />
-                    </QItemSection>
-                </QItem>
-            </QList>
-        </template>
-    </VnFilterPanel>
-</template>
-
-<i18n>
-en:
-    params:
-        orderFk: Order
-        clientFk: Customer
-        amount: Amount
-        from: From
-        to: To
-es:
-    params:
-        orderFk: Pedido
-        clientFk: Cliente
-        amount: Importe
-        from: Desde
-        to: Hasta
-    Order ID: ID pedido
-    Customer ID: ID cliente
-    Amount: Importe
-    Please type a number: Por favor, escriba un número
-    From: Desde
-    To: Hasta
-</i18n>

src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import { toCurrency } from 'filters/index';
+
+const $props = defineProps({
+    amount: {
+        type: Number,
+        required: true,
+    },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <div class="card_balance q-px-md q-py-sm q-my-sm">
+        <h6 class="title_balance text-center">{{ t('Total') }}</h6>
+        <div class="row">
+            <p class="key_balance">{{ t('Balance due') }}:&ensp;</p>
+            <b class="value_balance">
+                {{ toCurrency($props.amount) }}
+            </b>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+.card_balance {
+    border: 1px solid black;
+}
+.title_balance {
+    color: var(--vn-text);
+    margin-top: 0;
+    margin-bottom: 0;
+}
+.key_balance {
+    color: var(--vn-label);
+    margin-bottom: 0;
+}
+.value_balance {
+    color: var(--vn-text);
+    margin-bottom: 0;
+}
+</style>
+
+<i18n>
+es:
+    Total: Total
+    Balance due: Saldo vencido
+</i18n>

src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -0,0 +1,276 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { QBtn, QCheckbox, useQuasar } from 'quasar';
+
+import { toCurrency, toDate } from 'filters/index';
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+
+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);
+const customerId = ref(0);
+const selected = ref([]);
+const workerId = ref(0);
+
+const rows = computed(() => arrayData.value.store.data);
+
+const tableColumnComponents = {
+    client: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: ({ row }) => selectCustomerId(row.clientFk),
+    },
+    isWorker: {
+        component: QCheckbox,
+        props: ({ row }) => ({
+            disable: true,
+            'model-value': Boolean(row.selected),
+        }),
+    },
+    salesperson: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: ({ row }) => selectWorkerId(row.salesPersonFk),
+    },
+    country: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    paymentMethod: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    balance: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    author: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: ({ row }) => selectWorkerId(row.workerFk),
+    },
+    lastObservation: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    date: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    credit: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    from: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'clientName',
+        label: t('Client'),
+        name: 'client',
+    },
+    {
+        align: 'left',
+        field: 'isWorker',
+        label: t('Is worker'),
+        name: 'isWorker',
+    },
+    {
+        align: 'left',
+        field: 'salesPersonName',
+        label: t('Salesperson'),
+        name: 'salesperson',
+    },
+    {
+        align: 'left',
+        field: 'country',
+        label: t('Country'),
+        name: 'country',
+    },
+    {
+        align: 'left',
+        field: 'payMethod',
+        label: t('P. Method'),
+        name: 'paymentMethod',
+    },
+    {
+        align: 'left',
+        field: ({ amount }) => toCurrency(amount),
+        label: t('Balance D.'),
+        name: 'balance',
+    },
+    {
+        align: 'left',
+        field: 'workerName',
+        label: t('Author'),
+        name: 'author',
+    },
+    {
+        align: 'left',
+        field: 'observation',
+        label: t('Last observation'),
+        name: 'lastObservation',
+    },
+    {
+        align: 'left',
+        field: ({ created }) => toDate(created),
+        label: t('L. O. Date'),
+        name: 'date',
+    },
+    {
+        align: 'left',
+        field: ({ creditInsurance }) => toCurrency(creditInsurance),
+        label: t('Credit I.'),
+        name: 'credit',
+    },
+    {
+        align: 'left',
+        field: ({ defaulterSinced }) => toDate(defaulterSinced),
+        label: t('From'),
+        name: 'from',
+    },
+]);
+
+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;
+};
+
+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>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <CustomerNotificationsFilter data-key="CustomerDefaulter" />
+        </QScrollArea>
+    </QDrawer>
+
+    <VnSubToolbar class="bg-vn-dark">
+        <template #st-data>
+            <CustomerBalanceDueTotal :amount="balanceDueTotal" />
+            <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
+            :columns="columns"
+            :pagination="{ rowsPerPage: 0 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            hide-bottom
+            row-key="clientFk"
+            selection="multiple"
+            v-model:selected="selected"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                        >
+                            {{ props.value }}
+
+                            <WorkerDescriptorProxy v-if="workerId" :id="workerId" />
+                            <CustomerDescriptorProxy v-else :id="customerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px;
+}
+</style>
+
+<i18n>
+es:
+    Client: Cliente
+    Is worker: Es trabajador
+    Salesperson: Comercial
+    Country: País
+    P. Method: F. Pago
+    Balance D.: Saldo V.
+    Author: Autor
+    Last observation: Última observación
+    L. O. Date: Fecha Ú. O.
+    Credit I.: Crédito A.
+    From: Desde
+</i18n>

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

@@ -0,0 +1,223 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const clients = ref();
+const salespersons = ref();
+const countries = ref();
+const authors = ref();
+</script>
+
+<template>
+    <FetchData @on-fetch="(data) => (clients = data)" auto-load url="Clients" />
+    <FetchData
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (salespersons = data)"
+        auto-load
+        url="Workers/activeWithInheritedRole"
+    />
+    <FetchData @on-fetch="(data) => (countries = data)" auto-load url="Countries" />
+    <FetchData
+        @on-fetch="(data) => (authors = data)"
+        auto-load
+        url="Workers/activeWithInheritedRole"
+    />
+
+    <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 }">
+            <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="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('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>
+                    <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>
+                    <VnInputDate
+                        :label="t('From')"
+                        is-outlined
+                        v-model="params.defaulterSinced"
+                    />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        clientFk: Client
+        salesPersonFk: Salesperson
+        countryFk: Country
+        paymentMethod: P. Method
+        balance: Balance D.
+        workerFk: Author
+        date: L. O. Date
+        credit: Credit I.
+        defaulterSinced: From
+es:
+    params:
+        clientFk: Cliente
+        salesPersonFk: Comercial
+        countryFk: País
+        paymentMethod: F. Pago
+        balance: Saldo V.
+        workerFk: Autor
+        date: Fecha Ú. O.
+        credit: Crédito A.
+        defaulterSinced: Desde
+    Client: Cliente
+    Salesperson: Comercial
+    Country: País
+    P. Method: F. Pago
+    Balance D.: Saldo V.
+    Author: Autor
+    L. O. Date: Fecha Ú. O.
+    Credit I.: Crédito A.
+    From: Desde
+</i18n>

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -0,0 +1,565 @@
+<script setup>
+import { ref, computed, onBeforeMount, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { QBtn, QIcon } from 'quasar';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+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';
+import { dashIfEmpty, toDate } from 'src/filters';
+
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+
+onBeforeMount(async () => {
+    arrayData.value = useArrayData('CustomerExtendedList', {
+        url: 'Clients/extendedListFilter',
+        limit: 0,
+    });
+    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 selectedCustomerId = ref(0);
+const selectedSalesPersonId = ref(0);
+const allColumnNames = ref([]);
+const visibleColumns = ref([]);
+
+const tableColumnComponents = {
+    customerStatus: {
+        component: QIcon,
+        props: (prop) => ({
+            name: !prop.row.isActive
+                ? 'vn:disabled'
+                : prop.row.isActive && prop.row.isFreezed
+                ? 'vn:frozen'
+                : '',
+            color: 'primary',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    id: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            selectCustomerId(prop.row.id);
+        },
+    },
+    name: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    fi: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    salesPersonFk: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectSalesPersonId(prop.row.salesPersonFk),
+    },
+    credit: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    creditInsurance: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    phone: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    mobile: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    street: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    countryFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    provinceFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    city: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    postcode: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    email: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    created: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    businessTypeFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    payMethodFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    sageTaxTypeFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    sageTransactionTypeFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    isActive: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isActive ? 'check' : 'close',
+            color: prop.row.isActive ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    isVies: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isVies ? 'check' : 'close',
+            color: prop.row.isVies ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    isTaxDataChecked: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isTaxDataChecked ? 'check' : 'close',
+            color: prop.row.isTaxDataChecked ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    isEqualizated: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isEqualizated ? 'check' : 'close',
+            color: prop.row.isEqualizated ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    isFreezed: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isFreezed ? 'check' : 'close',
+            color: prop.row.isFreezed ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    hasToInvoice: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.hasToInvoice ? 'check' : 'close',
+            color: prop.row.hasToInvoice ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    hasToInvoiceByAddress: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.hasToInvoiceByAddress ? 'check' : 'close',
+            color: prop.row.hasToInvoiceByAddress ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    isToBeMailed: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isToBeMailed ? 'check' : 'close',
+            color: prop.row.isToBeMailed ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    hasLcr: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.hasLcr ? 'check' : 'close',
+            color: prop.row.hasLcr ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    hasCoreVnl: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.hasCoreVnl ? 'check' : 'close',
+            color: prop.row.hasCoreVnl ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    hasSepaVnl: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.hasSepaVnl ? 'check' : 'close',
+            color: prop.row.hasSepaVnl ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    actions: {
+        component: CustomerExtendedListActions,
+        props: (prop) => ({
+            id: prop.row.id,
+        }),
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: '',
+        label: '',
+        name: 'customerStatus',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'id',
+        label: t('customer.extendedList.tableVisibleColumns.id'),
+        name: 'id',
+    },
+    {
+        align: 'left',
+        field: 'name',
+        label: t('customer.extendedList.tableVisibleColumns.name'),
+        name: 'name',
+    },
+    {
+        align: 'left',
+        field: 'fi',
+        label: t('customer.extendedList.tableVisibleColumns.fi'),
+        name: 'fi',
+    },
+    {
+        align: 'left',
+        field: 'salesPerson',
+        label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
+        name: 'salesPersonFk',
+    },
+    {
+        align: 'left',
+        field: 'credit',
+        label: t('customer.extendedList.tableVisibleColumns.credit'),
+        name: 'credit',
+    },
+    {
+        align: 'left',
+        field: 'creditInsurance',
+        label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
+        name: 'creditInsurance',
+    },
+    {
+        align: 'left',
+        field: 'phone',
+        label: t('customer.extendedList.tableVisibleColumns.phone'),
+        name: 'phone',
+    },
+    {
+        align: 'left',
+        field: 'mobile',
+        label: t('customer.extendedList.tableVisibleColumns.mobile'),
+        name: 'mobile',
+    },
+    {
+        align: 'left',
+        field: 'street',
+        label: t('customer.extendedList.tableVisibleColumns.street'),
+        name: 'street',
+    },
+    {
+        align: 'left',
+        field: 'country',
+        label: t('customer.extendedList.tableVisibleColumns.countryFk'),
+        name: 'countryFk',
+    },
+    {
+        align: 'left',
+        field: 'province',
+        label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
+        name: 'provinceFk',
+    },
+    {
+        align: 'left',
+        field: 'city',
+        label: t('customer.extendedList.tableVisibleColumns.city'),
+        name: 'city',
+    },
+    {
+        align: 'left',
+        field: 'postcode',
+        label: t('customer.extendedList.tableVisibleColumns.postcode'),
+        name: 'postcode',
+    },
+    {
+        align: 'left',
+        field: 'email',
+        label: t('customer.extendedList.tableVisibleColumns.email'),
+        name: 'email',
+    },
+    {
+        align: 'left',
+        field: 'created',
+        label: t('customer.extendedList.tableVisibleColumns.created'),
+        name: 'created',
+        format: (value) => toDate(value),
+    },
+    {
+        align: 'left',
+        field: 'businessType',
+        label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
+        name: 'businessTypeFk',
+    },
+    {
+        align: 'left',
+        field: 'payMethod',
+        label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
+        name: 'payMethodFk',
+    },
+    {
+        align: 'left',
+        field: 'sageTaxType',
+        label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
+        name: 'sageTaxTypeFk',
+    },
+    {
+        align: 'left',
+        field: 'sageTransactionType',
+        label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
+        name: 'sageTransactionTypeFk',
+    },
+    {
+        align: 'left',
+        field: 'isActive',
+        label: t('customer.extendedList.tableVisibleColumns.isActive'),
+        name: 'isActive',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'isVies',
+        label: t('customer.extendedList.tableVisibleColumns.isVies'),
+        name: 'isVies',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'isTaxDataChecked',
+        label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
+        name: 'isTaxDataChecked',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'isEqualizated',
+        label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
+        name: 'isEqualizated',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'isFreezed',
+        label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
+        name: 'isFreezed',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'hasToInvoice',
+        label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
+        name: 'hasToInvoice',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'hasToInvoiceByAddress',
+        label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
+        name: 'hasToInvoiceByAddress',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'isToBeMailed',
+        label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
+        name: 'isToBeMailed',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'hasLcr',
+        label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
+        name: 'hasLcr',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'hasCoreVnl',
+        label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
+        name: 'hasCoreVnl',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'hasSepaVnl',
+        label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
+        name: 'hasSepaVnl',
+        format: () => ' ',
+    },
+    {
+        align: 'right',
+        field: 'actions',
+        label: '',
+        name: 'actions',
+    },
+]);
+
+const stopEventPropagation = (event, col) => {
+    if (!['id', 'salesPersonFk'].includes(col.name)) return;
+    event.preventDefault();
+    event.stopPropagation();
+};
+
+const navigateToTravelId = (id) => {
+    router.push({ path: `/customer/${id}` });
+};
+
+const selectCustomerId = (id) => {
+    selectedCustomerId.value = id;
+};
+
+const selectSalesPersonId = (id) => {
+    selectedSalesPersonId.value = id;
+};
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <CustomerExtendedListFilter
+                v-if="visibleColumns.length !== 0"
+                data-key="CustomerExtendedList"
+                :visible-columns="visibleColumns"
+            />
+        </QScrollArea>
+    </QDrawer>
+    <VnSubToolbar>
+        <template #st-actions>
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="clientsDetail"
+                labels-traductions-path="customer.extendedList.tableVisibleColumns"
+                @on-config-saved="
+                    visibleColumns = ['customerStatus', ...$event, 'actions']
+                "
+            />
+        </template>
+    </VnSubToolbar>
+
+    <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"
+            :visible-columns="visibleColumns"
+        >
+            <template #body="props">
+                <QTr
+                    :props="props"
+                    @click="navigateToTravelId(props.row.id)"
+                    class="cursor-pointer"
+                >
+                    <QTd
+                        v-for="col in props.cols"
+                        :key="col.name"
+                        :props="props"
+                        @click="stopEventPropagation($event, col)"
+                    >
+                        <component
+                            :is="tableColumnComponents[col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[col.name].props(props)"
+                            @click="tableColumnComponents[col.name].event(props)"
+                        >
+                            {{ dashIfEmpty(col.value) }}
+                            <WorkerDescriptorProxy
+                                v-if="props.row.salesPersonFk"
+                                :id="selectedSalesPersonId"
+                            />
+                            <CustomerDescriptorProxy
+                                v-if="props.row.id"
+                                :id="selectedCustomerId"
+                            />
+                        </component>
+                    </QTd>
+                </QTr>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px;
+}
+</style>

src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { useQuasar } from 'quasar';
+
+import CustomerSummaryDialog from '../Card/CustomerSummaryDialog.vue';
+
+const { t } = useI18n();
+const quasar = useQuasar();
+const router = useRouter();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+const redirectToCreateView = () => {
+    router.push({
+        name: 'TicketList',
+        query: {
+            params: JSON.stringify({
+                clientFk: $props.id,
+            }),
+        },
+    });
+};
+
+const viewSummary = () => {
+    quasar.dialog({
+        component: CustomerSummaryDialog,
+        componentProps: {
+            id: $props.id,
+        },
+    });
+};
+</script>
+
+<template>
+    <div>
+        <QIcon
+            @click.stop="redirectToCreateView"
+            color="primary"
+            name="vn:ticket"
+            size="sm"
+        >
+            <QTooltip>
+                {{ t('Client ticket list') }}
+            </QTooltip>
+        </QIcon>
+        <QIcon
+            @click.stop="viewSummary"
+            class="q-ml-md"
+            color="primary"
+            name="preview"
+            size="sm"
+        >
+            <QTooltip>
+                {{ t('Preview') }}
+            </QTooltip>
+        </QIcon>
+    </div>
+</template>
+
+<i18n>
+es:
+    Client ticket list: Listado de tickets del cliente
+    Preview: Vista previa
+</i18n>

src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue

@@ -0,0 +1,571 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import { dateRange } from 'src/filters';
+
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    visibleColumns: {
+        type: Array,
+        required: true,
+    },
+});
+
+const { t } = useI18n();
+
+const clients = ref();
+const workers = ref();
+const countriesOptions = ref([]);
+const provincesOptions = ref([]);
+const paymethodsOptions = ref([]);
+const businessTypesOptions = ref([]);
+const sageTaxTypesOptions = ref([]);
+const sageTransactionTypesOptions = ref([]);
+
+const visibleColumnsSet = computed(() => new Set(props.visibleColumns));
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'created':
+            return {
+                'c.created': {
+                    between: dateRange(value),
+                },
+            };
+        case 'id':
+        case 'name':
+        case 'socialName':
+        case 'fi':
+        case 'credit':
+        case 'creditInsurance':
+        case 'phone':
+        case 'mobile':
+        case 'street':
+        case 'city':
+        case 'postcode':
+        case 'email':
+        case 'isActive':
+        case 'isVies':
+        case 'isTaxDataChecked':
+        case 'isEqualizated':
+        case 'isFreezed':
+        case 'hasToInvoice':
+        case 'hasToInvoiceByAddress':
+        case 'isToBeMailed':
+        case 'hasSepaVnl':
+        case 'hasLcr':
+        case 'hasCoreVnl':
+        case 'countryFk':
+        case 'provinceFk':
+        case 'salesPersonFk':
+        case 'businessTypeFk':
+        case 'payMethodFk':
+        case 'sageTaxTypeFk':
+        case 'sageTransactionTypeFk':
+            return { [`c.${param}`]: value };
+    }
+};
+
+const shouldRenderColumn = (colName) => {
+    return visibleColumnsSet.value.has(colName);
+};
+</script>
+
+<template>
+    <FetchData
+        url="Clients"
+        :filter="{ where: { role: 'socialName' } }"
+        @on-fetch="(data) => (clients = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workers = data)"
+        auto-load
+    />
+    <FetchData
+        url="Countries"
+        :filter="{ fields: ['id', 'country'], order: 'country ASC' }"
+        @on-fetch="(data) => (countriesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="provincesFetchDataRef"
+        @on-fetch="(data) => (provincesOptions = data)"
+        auto-load
+        url="Provinces"
+    />
+    <FetchData
+        url="Paymethods"
+        @on-fetch="(data) => (paymethodsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="BusinessTypes"
+        @on-fetch="(data) => (businessTypesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="SageTaxTypes"
+        auto-load
+        @on-fetch="(data) => (sageTaxTypesOptions = data)"
+    />
+    <FetchData
+        url="sageTransactionTypes"
+        auto-load
+        @on-fetch="(data) => (sageTransactionTypesOptions = data)"
+    />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :expr-builder="exprBuilder"
+    >
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong
+                    >{{ t(`customer.extendedList.tableVisibleColumns.${tag.label}`) }}:
+                </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <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>
+                    <QItemSection v-if="clients">
+                        <VnSelectFilter
+                            :label="t('Social name')"
+                            v-model="params.socialName"
+                            @update:model-value="searchFn()"
+                            :options="clients"
+                            option-value="socialName"
+                            option-label="socialName"
+                            emit-value
+                            map-options
+                            use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
+                            :input-debounce="0"
+                        />
+                    </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>
+
+            <QSeparator />
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+es:
+    Social name: Razón social
+</i18n>

src/pages/Customer/Notifications/CustomerNotifications.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { QBtn } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+
+import CustomerNotificationsFilter from './CustomerNotificationsFilter.vue';
+import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+
+onBeforeMount(async () => {
+    arrayData.value = useArrayData('CustomerNotifications', {
+        url: 'Clients',
+        limit: 0,
+    });
+    await arrayData.value.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
+
+const rows = computed(() => arrayData.value.store.data);
+
+const selected = ref([]);
+const selectedCustomerId = ref(0);
+
+const tableColumnComponents = {
+    id: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectCustomerId(prop.row.id),
+    },
+    socialName: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    city: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    phone: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    email: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'id',
+        label: t('Identifier'),
+        name: 'id',
+    },
+    {
+        align: 'left',
+        field: 'socialName',
+        label: t('Social name'),
+        name: 'socialName',
+    },
+    {
+        align: 'left',
+        field: 'city',
+        label: t('City'),
+        name: 'city',
+    },
+    {
+        align: 'left',
+        field: 'phone',
+        label: t('Phone'),
+        name: 'phone',
+    },
+    {
+        align: 'left',
+        field: 'email',
+        label: t('Email'),
+        name: 'email',
+    },
+]);
+
+const selectCustomerId = (id) => {
+    selectedCustomerId.value = id;
+};
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <CustomerNotificationsFilter data-key="CustomerNotifications" />
+        </QScrollArea>
+    </QDrawer>
+
+    <VnSubToolbar />
+
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 0 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            hide-bottom
+            row-key="id"
+            selection="multiple"
+            v-model:selected="selected"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                        >
+                            {{ props.value }}
+                            <CustomerDescriptorProxy :id="selectedCustomerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px;
+}
+</style>
+
+<i18n>
+es:
+    Identifier: Identificador
+    Social name: Razón social
+    Salesperson: Comercial
+    Phone: Teléfono
+    City: Población
+    Email: Email
+</i18n>

src/pages/Customer/Notifications/CustomerNotificationsFilter.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const cities = ref();
+const clients = ref();
+</script>
+
+<template>
+    <FetchData
+        :filter="{ where: { role: 'socialName' } }"
+        @on-fetch="(data) => (clients = data)"
+        auto-load
+        url="Clients"
+    />
+    <FetchData @on-fetch="(data) => (cities = data)" auto-load url="Towns" />
+    <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 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="!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('Email')" is-outlined v-model="params.email" />
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        identifier: Identifier
+        socialName: Social name
+        city: City
+        phone: Phone
+        email: Email
+es:
+    params:
+        identifier: Identificador
+        socialName: Razón social
+        city: Población
+        phone: Teléfono
+        email: Email
+    Identifier: Identificador
+    Social name: Razón social
+    City: Población
+    Phone: Teléfono
+    Email: Email
+</i18n>

src/pages/Customer/Payments/CustomerPayments.vue

@@ -7,7 +7,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useArrayData } from 'composables/useArrayData';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
-import CustomerDescriptorProxy from './Card/CustomerDescriptorProxy.vue';
+import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
 import { toDate, toCurrency } from 'filters/index';
 import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
 
@@ -122,9 +122,8 @@ function stateColor(row) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md customer-payments">
-        <div class="card-list">
-            <QToolbar class="q-pa-none">
-                <QToolbarTitle>{{ t('Web Payments') }}</QToolbarTitle>
+        <div class="vn-card-list">
+            <QToolbar class="q-pa-none justify-end">
                 <QBtn
                     @click="arrayData.refresh()"
                     :loading="isLoading"
@@ -133,7 +132,7 @@ function stateColor(row) {
                     class="q-mr-sm"
                     round
                     dense
-                ></QBtn>
+                />
                 <QBtn @click="grid = !grid" icon="list" color="primary" round dense>
                     <QTooltip>{{ t('Change view') }}</QTooltip>
                 </QBtn>
@@ -279,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

@@ -0,0 +1,109 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+function isValidNumber(value) {
+    return /^(\d|\d+(\.|,)?\d+)$/.test(value);
+}
+</script>
+
+<template>
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" :show-all="false">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QItem>
+                <QItemSection>
+                    <VnInput :label="t('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>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+en:
+    params:
+        orderFk: Order
+        clientFk: Customer
+        amount: Amount
+        from: From
+        to: To
+es:
+    params:
+        orderFk: Pedido
+        clientFk: Cliente
+        amount: Importe
+        from: Desde
+        to: Hasta
+    Order ID: ID pedido
+    Customer ID: ID cliente
+    Amount: Importe
+    Please type a number: Por favor, escriba un número
+    From: Desde
+    To: Hasta
+</i18n>

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 VnSelectCreate from 'src/components/common/VnSelectCreate.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">
+                    <VnSelectCreate
+                        :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>
+                    </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('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">
+                    <VnSelectCreate
+                        :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>
+                    </VnSelectCreate>
+                </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 VnSelectCreate from 'src/components/common/VnSelectCreate.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">
+                    <VnSelectCreate
+                        :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>
+                    </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('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">
+                    <VnSelectCreate
+                        :label="t('Customs agent')"
+                        :options="customsAgents"
+                        hide-selected
+                        option-label="fiscalName"
+                        option-value="id"
+                        v-model="data.customsAgentFk"
+                    >
+                        <template #form>
+                            <CustomsNewCustomsAgent />
+                        </template>
+                    </VnSelectCreate>
+                </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>