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

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

Dockerfile

@@ -1,5 +1,6 @@
 FROM node:stretch-slim
-RUN npm install -g @quasar/cli
+RUN corepack enable pnpm
+RUN pnpm install -g @quasar/cli
 WORKDIR /app
 COPY dist/spa ./
 CMD ["quasar", "serve", "./", "--history", "--hostname", "0.0.0.0"]

Jenkinsfile

@@ -1,99 +1,119 @@
 #!/usr/bin/env groovy
+
+def PROTECTED_BRANCH
+
+def BRANCH_ENV = [
+    test: 'test',
+    master: 'production'
+]
+
+node {
+    stage('Setup') {
+        env.FRONT_REPLICAS = 1
+        env.NODE_ENV = BRANCH_ENV[env.BRANCH_NAME] ?: 'dev'
+
+        PROTECTED_BRANCH = [
+            'dev',
+            'test',
+            'master'
+        ].contains(env.BRANCH_NAME)
+
+        // https://www.jenkins.io/doc/book/pipeline/jenkinsfile/#using-environment-variables
+        echo "NODE_NAME: ${env.NODE_NAME}"
+        echo "WORKSPACE: ${env.WORKSPACE}"
+
+        configFileProvider([
+            configFile(fileId: 'salix-front.properties',
+            variable: 'PROPS_FILE')
+        ]) {
+            def props = readProperties file: PROPS_FILE
+            props.each {key, value -> env."${key}" = value }
+            props.each {key, value -> echo "${key}: ${value}" }
+        }
+
+        if (PROTECTED_BRANCH) {
+            configFileProvider([
+                configFile(fileId: "salix-front.branch.${env.BRANCH_NAME}",
+                variable: 'BRANCH_PROPS_FILE')
+            ]) {
+                def props = readProperties file: BRANCH_PROPS_FILE
+                props.each {key, value -> env."${key}" = value }
+                props.each {key, value -> echo "${key}: ${value}" }
+            }
+        }
+    }
+}
+
 pipeline {
     agent any
     options {
         disableConcurrentBuilds()
     }
+    tools {
+        nodejs 'node-v18'
+    }
     environment {
         PROJECT_NAME = 'lilium'
         STACK_NAME   = "${env.PROJECT_NAME}-${env.BRANCH_NAME}"
     }
     stages {
-        stage('Checkout') {
-            steps {
-                script {
-                    switch (env.BRANCH_NAME) {
-                        case 'master':
-                            env.NODE_ENV = 'production'
-                            env.FRONT_REPLICAS = 2
-                            break
-                        case 'test':
-                            env.NODE_ENV = 'test'
-                            env.FRONT_REPLICAS = 1
-                            break
-                    }
-                }
-                setEnv()
-            }
-        }
         stage('Install') {
             environment {
                 NODE_ENV = ""
             }
             steps {
-                nodejs('node-v18') {
-                    sh 'npm install --no-audit --prefer-offline'
-                }
+                sh 'pnpm install --prefer-offline'
             }
         }
         stage('Test') {
-            when { not { anyOf {
-                branch 'test'
-                branch 'master'
-            }}}
+            when {
+                expression { !PROTECTED_BRANCH }
+            }
             environment {
                 NODE_ENV = ""
             }
-            parallel {
-                stage('Frontend') {
-                    steps {
-                        nodejs('node-v18') {
-                            sh 'npm run test:unit:ci'
-                        }
-                    }
+            steps {
+                sh 'pnpm run test:unit:ci'
+            }
+              post {
+                always {
+                    junit(
+                        testResults: 'junitresults.xml',
+                        allowEmptyResults: true
+                    )
                 }
             }
         }
         stage('Build') {
-            when { anyOf {
-                branch 'test'
-                branch 'master'
-            }}
+            when {
+                expression { PROTECTED_BRANCH }
+            }
             environment {
                 CREDENTIALS = credentials('docker-registry')
             }
             steps {
-                nodejs('node-v18') {
-                    sh 'quasar build'
+                sh 'quasar build'
+                script {
+                    def packageJson = readJSON file: 'package.json'
+                    env.VERSION = packageJson.version
                 }
                 dockerBuild()
             }
         }
         stage('Deploy') {
-            when { anyOf {
-                branch 'test'
-                branch 'master'
-            }}
+            when {
+                expression { PROTECTED_BRANCH }
+            }
             environment {
                 DOCKER_HOST = "${env.SWARM_HOST}"
             }
             steps {
+                script {
+                    def packageJson = readJSON file: 'package.json'
+                    env.VERSION = packageJson.version
+                }
                 sh "docker stack deploy --with-registry-auth --compose-file docker-compose.yml ${env.STACK_NAME}"
             }
         }
     }
-    post {
-        always {
-            script {
-                if (!['master', 'test'].contains(env.BRANCH_NAME)) {
-                    try {
-                        junit 'junitresults.xml'
-                        junit 'junit.xml'
-                    } catch (e) {
-                        echo e.toString()
-                    }
-                }
-            }
-        }
-    }
 }

README.md

@@ -5,13 +5,13 @@ Lilium frontend
 ## Install the dependencies
 
 ```bash
-npm install
+bun install
 ```
 
 ### Install quasar cli
 
 ```bash
-sudo npm install -g @quasar/cli
+sudo bun install -g @quasar/cli
 ```
 
 ### Start the app in development mode (hot-code reloading, error reporting, etc.)
@@ -23,7 +23,7 @@ quasar dev
 ### Run unit tests
 
 ```bash
-npm run test:unit
+bun run test:unit
 ```
 
 ### Run e2e tests

package.json

@@ -1,10 +1,11 @@
 {
     "name": "salix-front",
-    "version": "24.02.01",
+    "version": "24.12.0",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
     "private": true,
+    "packageManager": "pnpm@8.15.1",
     "scripts": {
         "lint": "eslint --ext .js,.vue ./",
         "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
@@ -16,11 +17,12 @@
     },
     "dependencies": {
         "@quasar/cli": "^2.3.0",
-        "@quasar/extras": "^1.16.4",
+        "@quasar/extras": "^1.16.9",
         "axios": "^1.4.0",
         "chromium": "^3.0.3",
+        "croppie": "^2.6.5",
         "pinia": "^2.1.3",
-        "quasar": "^2.12.0",
+        "quasar": "^2.14.5",
         "validator": "^13.9.0",
         "vue": "^3.3.4",
         "vue-i18n": "^9.2.2",
@@ -29,9 +31,9 @@
     "devDependencies": {
         "@intlify/unplugin-vue-i18n": "^0.8.1",
         "@pinia/testing": "^0.1.2",
-        "@quasar/app-vite": "^1.4.3",
-        "@quasar/quasar-app-extension-testing-unit-vitest": "^0.3.0",
-        "@vue/test-utils": "^2.3.2",
+        "@quasar/app-vite": "^1.7.3",
+        "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
+        "@vue/test-utils": "^2.4.4",
         "autoprefixer": "^10.4.14",
         "cypress": "^12.13.0",
         "eslint": "^8.41.0",
@@ -45,11 +47,12 @@
     "engines": {
         "node": "^20 || ^18 || ^16",
         "npm": ">= 8.1.2",
-        "yarn": ">= 1.21.1"
+        "yarn": ">= 1.21.1",
+        "bun": ">= 1.0.25"
     },
     "overrides": {
-        "@vitejs/plugin-vue": "^4.0.0",
-        "vite": "^4.3.5",
+        "@vitejs/plugin-vue": "^5.0.4",
+        "vite": "^5.1.4",
         "vitest": "^0.31.1"
     }
 }

src/components/CreateBankEntityForm.vue

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

src/components/CreateNewCityForm.vue

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

src/components/CreateNewPostcodeForm.vue

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

src/components/CreateNewProvinceForm.vue

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

src/components/CreateThermographForm.vue

@@ -0,0 +1,114 @@
+<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 thermographFormData = reactive({
+    thermographId: null,
+    model: 'DISPOSABLE',
+    warehouseId: null,
+    temperatureFk: 'cool',
+});
+
+const thermographsModels = ref(null);
+const warehousesOptions = ref([]);
+const temperaturesOptions = ref([]);
+
+const onDataSaved = (dataSaved) => {
+    emit('onDataSaved', dataSaved);
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (thermographsModels = data)"
+        auto-load
+        url="Thermographs/getThermographModels"
+    />
+    <FetchData
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+        url="Warehouses"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
+    />
+    <FetchData
+        @on-fetch="(data) => (temperaturesOptions = data)"
+        auto-load
+        url="Temperatures"
+    />
+    <FormModelPopup
+        url-create="Thermographs/createThermograph"
+        model="thermograph"
+        :title="t('New thermograph')"
+        :form-initial-data="thermographFormData"
+        @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('Identifier')"
+                        v-model="data.thermographId"
+                        :required="true"
+                        :rules="validate('thermograph.id')"
+                    />
+                </div>
+
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Model')"
+                        :options="thermographsModels"
+                        hide-selected
+                        option-label="value"
+                        option-value="value"
+                        v-model="data.model"
+                        :required="true"
+                        :rules="validate('thermograph.model')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-xl">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Warehouse')"
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.warehouseId"
+                        :required="true"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Temperature')"
+                        :options="temperaturesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        v-model="data.temperatureFk"
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+es:
+    Identifier: Identificador
+    Model: Modelo
+    Warehouse: Almacén
+    Temperature: Temperatura
+    New thermograph: Nuevo termógrafo
+</i18n>

src/components/CrudModel.vue

@@ -176,8 +176,8 @@ async function remove(data) {
             .dialog({
                 component: VnConfirm,
                 componentProps: {
-                    title: t('confirmDeletion'),
-                    message: t('confirmDeletionMessage'),
+                    title: t('globals.confirmDeletion'),
+                    message: t('globals.confirmDeletionMessage'),
                     newData,
                     ids,
                 },
@@ -196,7 +196,6 @@ function getChanges() {
     const creates = [];
 
     const pk = $props.primaryKey;
-
     for (const [i, row] of formData.value.entries()) {
         if (!row[pk]) {
             creates.push(row);
@@ -225,15 +224,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;
 }
 
@@ -314,16 +317,3 @@ watch(formUrl, async () => {
         color="primary"
     />
 </template>
-
-<i18n>
-    {
-        "en": {
-            "confirmDeletion": "Confirm deletion",
-            "confirmDeletionMessage": "Are you sure you want to delete this?"
-        },
-        "es": {
-            "confirmDeletion": "Confirmar eliminación",
-            "confirmDeletionMessage": "Seguro que quieres eliminar?"
-        }
-    }
-</i18n>

src/components/EditPictureForm.vue

@@ -0,0 +1,359 @@
+<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('globals.selectFile') }}</QTooltip> -->
+                                    </QIcon>
+                                    <QIcon name="info" class="cursor-pointer">
+                                        <QTooltip>{{
+                                            t('globals.allowedFilesText', {
+                                                allowedContentTypes: allowedContentTypes,
+                                            })
+                                        }}</QTooltip>
+                                    </QIcon>
+                                </template>
+                            </QFile>
+                            <VnInput
+                                v-if="uploadMethodSelected === 'URL'"
+                                v-model="newPhoto.url"
+                                @update:model-value="updatePhotoPreview($event)"
+                                placeholder="https://"
+                            />
+                        </div>
+                    </VnRow>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnSelectFilter
+                                :label="t('Orientation')"
+                                :options="viewportTypes"
+                                hide-selected
+                                option-label="description"
+                                v-model="viewportSelection"
+                            />
+                        </div>
+                    </VnRow>
+                    <div class="q-mt-lg row justify-end">
+                        <QBtn
+                            :label="t('globals.save')"
+                            type="submit"
+                            color="primary"
+                            :disabled="isLoading"
+                            :loading="isLoading"
+                        />
+                        <QBtn
+                            :label="t('globals.cancel')"
+                            type="reset"
+                            color="primary"
+                            flat
+                            class="q-ml-sm"
+                            :disabled="isLoading"
+                            :loading="isLoading"
+                            v-close-popup
+                        />
+                    </div>
+                </div>
+            </div>
+        </QCard>
+    </QForm>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    font-size: 17px;
+    font-weight: bold;
+    line-height: 20px;
+}
+
+.close-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+</style>
+
+<i18n>
+es:
+    Edit photo: Editar foto
+    Select from computer: Seleccionar desde ordenador
+    Import from external URL: Importar desde URL externa
+    Vertical: Vertical
+    Normal: Normal
+    Panoramic: Panorámica
+    Orientation: Orientación
+    File: Fichero
+    This photo provider doesn't allow remote downloads: Este proveedor de fotos no permite descargas remotas
+    Rotate left: Girar a la izquierda
+    Rotate right: Girar a la derecha
+    Select an image: Selecciona una imagen
+</i18n>

src/components/EditTableCellValueForm.vue

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

src/components/FetchData.vue

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

src/components/FilterItemForm.vue

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

src/components/FilterTravelForm.vue

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

src/components/FormModel.vue

@@ -1,6 +1,7 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
+import { onMounted, onUnmounted, computed, ref, watch, nextTick } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useState } from 'src/composables/useState';
@@ -8,6 +9,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useValidator } from 'src/composables/useValidator';
 import useNotify from 'src/composables/useNotify.js';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
+import VnConfirm from './ui/VnConfirm.vue';
 
 const quasar = useQuasar();
 const state = useState();
@@ -59,6 +61,10 @@ const $props = defineProps({
         type: Function,
         default: null,
     },
+    saveFn: {
+        type: Function,
+        default: null,
+    },
 });
 
 const emit = defineEmits(['onFetch', 'onDataSaved']);
@@ -67,20 +73,41 @@ defineExpose({
     save,
 });
 
+const componentIsRendered = ref(false);
+
 onMounted(async () => {
+    nextTick(() => {
+        componentIsRendered.value = true;
+    });
+
     // Podemos enviarle al form la estructura de data inicial sin necesidad de fetchearla
-    if ($props.formInitialData && !$props.autoLoad) {
-        state.set($props.model, $props.formInitialData);
-    } else {
+    state.set($props.model, $props.formInitialData);
+    if ($props.autoLoad && !$props.formInitialData) {
         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);
     }
 });
 
+onBeforeRouteLeave((to, from, next) => {
+    if (!hasChanges.value) next();
+
+    quasar.dialog({
+        component: VnConfirm,
+        componentProps: {
+            title: t('Unsaved changes will be lost'),
+            message: t('Are you sure exit without saving?'),
+            promise: () => next(),
+        },
+    });
+});
+
 onUnmounted(() => {
     state.unset($props.model);
 });
@@ -128,17 +155,21 @@ async function save() {
 
     try {
         const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
-        if ($props.urlCreate) {
-            await axios.post($props.urlCreate, body);
-            notify('globals.dataCreated', 'positive');
-        } else {
-            await axios.patch($props.urlUpdate || $props.url, body);
-        }
-        emit('onDataSaved', formData.value);
+        let response;
+        if ($props.saveFn) response = await $props.saveFn(body);
+        else
+            response = await axios[$props.urlCreate ? 'post' : 'patch'](
+                $props.urlCreate || $props.urlUpdate || $props.url,
+                body
+            );
+        if ($props.urlCreate) notify('globals.dataCreated', 'positive');
+
+        emit('onDataSaved', formData.value, response?.data);
         originalData.value = JSON.parse(JSON.stringify(formData.value));
         hasChanges.value = false;
     } catch (err) {
-        notify('errors.create', 'negative');
+        console.error(err);
+        notify('errors.writeRequest', 'negative');
     }
     isLoading.value = false;
 }
@@ -176,13 +207,6 @@ watch(formUrl, async () => {
 });
 </script>
 <template>
-    <QBanner
-        v-if="$props.observeFormChanges && hasChanges"
-        class="text-white bg-warning full-width"
-    >
-        <QIcon name="warning" size="md" class="q-mr-md" />
-        <span>{{ t('globals.changesToSave') }}</span>
-    </QBanner>
     <div class="column items-center full-width">
         <QForm
             v-if="formData"
@@ -201,7 +225,10 @@ watch(formUrl, async () => {
             </QCard>
         </QForm>
     </div>
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+    <Teleport
+        to="#st-actions"
+        v-if="stateStore?.isSubToolbarShown() && componentIsRendered"
+    >
         <div v-if="$props.defaultActions">
             <QBtnGroup push class="q-gutter-x-sm">
                 <slot name="moreActions" />
@@ -243,3 +270,8 @@ watch(formUrl, async () => {
     padding: 32px;
 }
 </style>
+<i18n>
+es:
+    Unsaved changes will be lost: Los cambios que no haya guardado se perderán
+    Are you sure exit without saving?: ¿Seguro que quiere salir sin guardar?
+</i18n>

src/components/FormModelPopup.vue

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

src/components/LeftMenu.vue

@@ -206,6 +206,17 @@ async function togglePinned(item, event) {
         <template v-if="$props.source === 'card'">
             <template v-for="item in items" :key="item.name">
                 <LeftMenuItem v-if="!item.children" :item="item" />
+                <QList v-else>
+                    <QExpansionItem
+                        v-ripple
+                        clickable
+                        :icon="item.icon"
+                        :label="t(item.title)"
+                        :content-inset-level="0.5"
+                    >
+                        <LeftMenuItemGroup :item="item" />
+                    </QExpansionItem>
+                </QList>
             </template>
         </template>
     </QList>

src/components/RegularizeStockForm.vue

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

src/components/UserPanel.vue

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

src/components/common/TableVisibleColumns.vue

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

src/components/common/VnCurrency.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useCapitalize } from 'src/composables/useCapitalize';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+});
+
+const { t } = useI18n();
+const emit = defineEmits(['update:modelValue']);
+
+const amount = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(val) {
+        emit('update:modelValue', val);
+    },
+});
+</script>
+<template>
+    <VnInput
+        v-model="amount"
+        type="number"
+        step="any"
+        :label="useCapitalize(t('amount'))"
+    />
+</template>
+<i18n>
+es:
+    amount: importe
+</i18n>

src/components/common/VnDms.vue

@@ -0,0 +1,201 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const emit = defineEmits(['onDataSaved']);
+
+const $props = defineProps({
+    model: {
+        type: String,
+        required: true,
+    },
+    defaultDmsCode: {
+        type: String,
+        default: null,
+    },
+    formInitialData: {
+        type: Object,
+        default: null,
+    },
+});
+
+const warehouses = ref();
+const companies = ref();
+const dmsTypes = ref();
+const allowedContentTypes = ref();
+const inputFileRef = ref();
+const dms = ref({});
+
+onMounted(() => {
+    defaultData();
+    if (!$props.formInitialData)
+        dms.value.description = t($props.model + 'Description', dms.value);
+});
+function onFileChange(files) {
+    dms.value.hasFileAttached = !!files;
+    dms.value.file = files?.name;
+}
+
+function mapperDms(data) {
+    const formData = new FormData();
+    const { files } = data;
+    if (files) formData.append(files?.name, files);
+    delete data.files;
+
+    const dms = {
+        hasFile: !!data.hasFile,
+        hasFileAttached: data.hasFileAttached,
+        reference: data.reference,
+        warehouseId: data.warehouseFk,
+        companyId: data.companyFk,
+        dmsTypeId: data.dmsTypeFk,
+        description: data.description,
+    };
+    return [formData, { params: dms }];
+}
+
+function getUrl() {
+    if ($props.formInitialData) return 'dms/' + $props.formInitialData.id + '/updateFile';
+    return `${$props.model}/${route.params.id}/uploadFile`;
+}
+
+async function save() {
+    const body = mapperDms(dms.value);
+    await axios.post(getUrl(), body[0], body[1]);
+    emit('onDataSaved', body[1].params);
+}
+
+function defaultData() {
+    if ($props.formInitialData) return (dms.value = $props.formInitialData);
+    return addDefaultData({
+        reference: route.params.id,
+    });
+}
+
+function setDmsTypes(data) {
+    dmsTypes.value = data;
+    if (!$props.formInitialData && $props.defaultDmsCode) {
+        const { id } = data.find((dmsType) => dmsType.code == $props.defaultDmsCode);
+        addDefaultData({ dmsTypeFk: id });
+    }
+}
+
+function addDefaultData(data) {
+    Object.assign(dms.value, data);
+}
+</script>
+<template>
+    <FetchData url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
+    <FetchData url="Companies" @on-fetch="(data) => (companies = data)" auto-load />
+    <FetchData url="DmsTypes" @on-fetch="setDmsTypes" auto-load />
+    <FetchData
+        url="DmsContainers/allowedContentTypes"
+        @on-fetch="(data) => (allowedContentTypes = data.join(','))"
+        auto-load
+    />
+    <FetchData
+        url="UserConfigs/getUserConfig"
+        @on-fetch="addDefaultData"
+        :auto-load="!$props.formInitialData"
+    />
+    <FormModelPopup
+        :title="formInitialData ? t('globals.edit') : t('globals.create')"
+        model="dms"
+        :form-initial-data="formInitialData ?? {}"
+        :save-fn="save"
+    >
+        <template #form-inputs>
+            <div class="q-gutter-y-ms">
+                <VnRow>
+                    <VnInput :label="t('globals.reference')" v-model="dms.reference" />
+                    <VnSelectFilter
+                        :label="t('globals.company')"
+                        v-model="dms.companyFk"
+                        :options="companies"
+                        option-value="id"
+                        option-label="code"
+                        input-debounce="0"
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnSelectFilter
+                        :label="t('globals.warehouse')"
+                        v-model="dms.warehouseFk"
+                        :options="warehouses"
+                        option-value="id"
+                        option-label="name"
+                        input-debounce="0"
+                    />
+                    <VnSelectFilter
+                        :label="t('globals.type')"
+                        v-model="dms.dmsTypeFk"
+                        :options="dmsTypes"
+                        option-value="id"
+                        option-label="name"
+                        input-debounce="0"
+                    />
+                </VnRow>
+                <QInput
+                    :label="t('globals.description')"
+                    v-model="dms.description"
+                    type="textarea"
+                />
+                <QFile
+                    ref="inputFileRef"
+                    :label="t('entry.buys.file')"
+                    v-model="dms.files"
+                    :multiple="false"
+                    :accept="allowedContentTypes"
+                    @update:model-value="onFileChange(dms.files)"
+                    class="required"
+                    :display-value="dms.file"
+                >
+                    <template #append>
+                        <QIcon
+                            name="vn:attach"
+                            class="cursor-pointer"
+                            @click="inputFileRef.pickFiles()"
+                        >
+                            <QTooltip>{{ t('globals.selectFile') }}</QTooltip>
+                        </QIcon>
+                        <QIcon name="info" class="cursor-pointer">
+                            <QTooltip>{{
+                                t('contentTypesInfo', { allowedContentTypes })
+                            }}</QTooltip>
+                        </QIcon>
+                    </template>
+                </QFile>
+                <QCheckbox
+                    v-model="dms.hasFile"
+                    :label="t('Generate identifier for original file')"
+                />
+            </div>
+        </template>
+    </FormModelPopup>
+</template>
+<style scoped>
+.q-gutter-y-ms {
+    display: grid;
+    row-gap: 20px;
+}
+</style>
+<i18n>
+en:
+    contentTypesInfo: Allowed file types {allowedContentTypes}
+    EntryDmsDescription: Reference {reference}
+es:
+    Generate identifier for original file: Generar identificador para archivo original
+    contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
+    EntryDmsDescription: Referencia {reference}
+
+</i18n>

src/components/common/VnDmsList.vue

@@ -0,0 +1,316 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useQuasar, QCheckbox, QBtn, QInput } from 'quasar';
+import axios from 'axios';
+
+import FetchData from 'components/FetchData.vue';
+import VnDms from 'src/components/common/VnDms.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import { downloadFile } from 'src/composables/downloadFile';
+
+const route = useRoute();
+const quasar = useQuasar();
+const { t } = useI18n();
+const rows = ref();
+const dmsRef = ref();
+const formDialog = ref({});
+
+const $props = defineProps({
+    model: {
+        type: String,
+        required: true,
+    },
+    updateModel: {
+        type: String,
+        default: null,
+    },
+    defaultDmsCode: {
+        type: String,
+        required: true,
+    },
+    filter: {
+        type: String,
+        required: true,
+    },
+});
+
+const dmsFilter = {
+    include: {
+        relation: 'dms',
+        scope: {
+            fields: [
+                'dmsTypeFk',
+                'reference',
+                'hardCopyNumber',
+                'workerFk',
+                'description',
+                'hasFile',
+                'file',
+                'created',
+                'companyFk',
+                'warehouseFk',
+            ],
+            include: [
+                {
+                    relation: 'dmsType',
+                    scope: {
+                        fields: ['name'],
+                    },
+                },
+                {
+                    relation: 'worker',
+                    scope: {
+                        fields: ['id'],
+                        include: {
+                            relation: 'user',
+                            scope: {
+                                fields: ['name'],
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+    },
+    order: ['dmsFk DESC'],
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'id',
+        label: t('globals.id'),
+        name: 'id',
+        component: 'span',
+    },
+    {
+        align: 'left',
+        field: 'type',
+        label: t('globals.type'),
+        name: 'type',
+        component: QInput,
+        props: (prop) => ({
+            readonly: true,
+            borderless: true,
+            'model-value': prop.row.dmsType.name,
+        }),
+    },
+    {
+        align: 'left',
+        field: 'order',
+        label: t('globals.order'),
+        name: 'order',
+        component: 'span',
+    },
+    {
+        align: 'left',
+        field: 'reference',
+        label: t('globals.reference'),
+        name: 'reference',
+        component: 'span',
+    },
+    {
+        align: 'left',
+        field: 'description',
+        label: t('globals.description'),
+        name: 'description',
+        component: 'span',
+    },
+    {
+        align: 'left',
+        field: 'hasFile',
+        label: t('globals.original'),
+        name: 'hasFile',
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+    },
+    {
+        align: 'left',
+        field: 'file',
+        label: t('globals.file'),
+        name: 'file',
+        component: 'span',
+    },
+    {
+        field: 'options',
+        name: 'options',
+        components: [
+            {
+                component: QBtn,
+                props: () => ({
+                    icon: 'cloud_download',
+                    flat: true,
+                    color: 'primary',
+                }),
+                click: (prop) => downloadFile(prop.row.id),
+            },
+            {
+                component: QBtn,
+                props: () => ({
+                    icon: 'edit',
+                    flat: true,
+                    color: 'primary',
+                }),
+                click: (prop) => showFormDialog(prop.row),
+            },
+            {
+                component: QBtn,
+                props: () => ({
+                    icon: 'delete',
+                    flat: true,
+                    color: 'primary',
+                }),
+                click: (prop) => deleteDms(prop.row.id),
+            },
+        ],
+    },
+]);
+
+function setData(data) {
+    const newData = data.map((value) => value.dms);
+    rows.value = newData;
+}
+
+function deleteDms(dmsFk) {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.confirmDeletion'),
+                message: t('globals.confirmDeletionMessage'),
+            },
+        })
+        .onOk(async () => {
+            await axios.post(`${$props.model}/${dmsFk}/removeFile`);
+            const index = rows.value.findIndex((row) => row.id == dmsFk);
+            rows.value.splice(index, 1);
+        });
+}
+
+function showFormDialog(dms) {
+    if (dms) dms = parseDms(dms);
+    formDialog.value = {
+        show: true,
+        dms,
+    };
+}
+
+function parseDms(data) {
+    for (let prop in data) {
+        if (prop.endsWith('Fk')) data[prop.replace('Fk', 'Id')] = data[prop];
+    }
+    return data;
+}
+</script>
+<template>
+    <FetchData
+        ref="dmsRef"
+        :url="$props.model"
+        :filter="dmsFilter"
+        :where="{ [$props.filter]: route.params.id }"
+        @on-fetch="setData"
+        auto-load
+    />
+    <QTable
+        :columns="columns"
+        :pagination="{ rowsPerPage: 0 }"
+        :rows="rows"
+        class="full-width q-mt-md"
+        hide-bottom
+        row-key="clientFk"
+        :grid="$q.screen.lt.sm"
+    >
+        <template #body-cell="props">
+            <QTd :props="props">
+                <QTr :props="props">
+                    <component
+                        v-if="props.col.component"
+                        :is="props.col.component"
+                        v-bind="props.col.props && props.col.props(props)"
+                    >
+                        <span
+                            v-if="props.col.component == 'span'"
+                            style="white-space: wrap"
+                            >{{ props.value }}</span
+                        >
+                    </component>
+                </QTr>
+
+                <div class="flex justify-center" v-if="props.col.name == 'options'">
+                    <div v-for="button of props.col.components" :key="button.id">
+                        <component
+                            :is="button.component"
+                            v-bind="button.props(props)"
+                            @click="button.click(props)"
+                        />
+                    </div>
+                </div>
+            </QTd>
+        </template>
+        <template #item="props">
+            <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
+                <QCard
+                    bordered
+                    flat
+                    @keyup.ctrl.enter.stop="claimDevelopmentForm?.saveChanges()"
+                >
+                    <QSeparator />
+                    <QList dense>
+                        <QItem v-for="col in props.cols" :key="col.name">
+                            <div v-if="col.name != 'options'" class="row">
+                                <span class="labelColor">{{ col.label }}:</span>
+                                <span>{{ col.value }}</span>
+                            </div>
+                            <div v-if="col.name == 'options'" class="row">
+                                <div
+                                    v-for="button of col.components"
+                                    :key="button.id"
+                                    class="row"
+                                >
+                                    <component
+                                        :is="button.component"
+                                        v-bind="button.props(col)"
+                                        @click="button.click(col)"
+                                    />
+                                </div>
+                            </div>
+                        </QItem>
+                    </QList>
+                </QCard>
+            </div>
+        </template>
+    </QTable>
+    <QDialog v-model="formDialog.show">
+        <VnDms
+            :model="updateModel ?? model"
+            :default-dms-code="defaultDmsCode"
+            :form-initial-data="formDialog.dms"
+            @on-data-saved="dmsRef.fetch()"
+            :description="$props.description"
+        />
+    </QDialog>
+    <QPageSticky position="bottom-right" :offset="[25, 25]">
+        <QBtn fab color="primary" icon="add" @click="showFormDialog()" />
+    </QPageSticky>
+</template>
+<style scoped>
+.q-gutter-y-ms {
+    display: grid;
+    row-gap: 20px;
+}
+.labelColor {
+    color: var(--vn-label);
+}
+</style>
+<i18n>
+en:
+    contentTypesInfo: Allowed file types {allowedContentTypes}
+es:
+    contentTypesInfo: Tipos de archivo permitidos {allowedContentTypes}
+    Generate identifier for original file: Generar identificador para archivo original
+</i18n>

src/components/common/VnInput.vue

@@ -1,7 +1,8 @@
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
-const emit = defineEmits(['update:modelValue', 'update:options']);
+const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
 
 const $props = defineProps({
     modelValue: {
@@ -14,6 +15,9 @@ const $props = defineProps({
     },
 });
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const value = computed({
     get() {
         return $props.modelValue;
@@ -32,6 +36,10 @@ const styleAttrs = computed(() => {
           }
         : {};
 });
+
+const onEnterPress = () => {
+    emit('keyup.enter');
+};
 </script>
 
 <template>
@@ -41,6 +49,8 @@ const styleAttrs = computed(() => {
         v-bind="{ ...$attrs, ...styleAttrs }"
         type="text"
         :class="{ required: $attrs.required }"
+        @keyup.enter="onEnterPress()"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <template v-if="$slots.prepend" #prepend>
             <slot name="prepend" />

src/components/common/VnInputTime.vue

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

src/components/common/VnLocation.vue

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

src/components/common/VnLog.vue

@@ -7,7 +7,7 @@ import { date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toRelativeDate } from 'src/filters';
 import { useColor } from 'src/composables/useColor';
-import { useFirstUpper } from 'src/composables/useFirstUpper';
+import { useCapitalize } from 'src/composables/useCapitalize';
 import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnJsonValue from '../common/VnJsonValue.vue';
@@ -140,7 +140,7 @@ function parseProps(propNames, locale, vals, olds) {
         if (prop.endsWith('$')) continue;
         props.push({
             name: prop,
-            nameI18n: useFirstUpper(locale.columns?.[prop]) || prop,
+            nameI18n: useCapitalize(locale.columns?.[prop]) || prop,
             val: getVal(vals, prop),
             old: olds && getVal(olds, prop),
         });
@@ -202,7 +202,7 @@ function getLogTree(data) {
             userLog.logs.push(
                 (modelLog = {
                     model: log.changedModel,
-                    modelI18n: useFirstUpper(locale.name) || log.changedModel,
+                    modelI18n: useCapitalize(locale.name) || log.changedModel,
                     id: log.changedModelId,
                     showValue: log.changedModelValue,
                     logs: [],
@@ -395,7 +395,7 @@ setLogTree();
             (data) =>
                 (actions = data.map((item) => {
                     return {
-                        locale: useFirstUpper(validations[item.changedModel].locale.name),
+                        locale: useCapitalize(validations[item.changedModel].locale.name),
                         value: item.changedModel,
                     };
                 }))
@@ -409,7 +409,7 @@ setLogTree();
     >
         <QItem class="origin-info items-center q-my-md" v-if="logTree.length > 1">
             <h6 class="origin-id text-grey">
-                {{ useFirstUpper(validations[props.model].locale.name) }}
+                {{ useCapitalize(validations[props.model].locale.name) }}
                 #{{ originLog.originFk }}
             </h6>
             <div class="line bg-grey"></div>
@@ -664,6 +664,7 @@ setLogTree();
                         :label="t('globals.entity')"
                         v-model="selectedFilters.changedModel"
                         option-label="locale"
+                        option-value="value"
                         :options="actions"
                         @update:model-value="selectFilter('action')"
                         hide-selected

src/components/common/VnLogFilter.vue

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

src/components/common/VnSelectDialog.vue

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

src/components/common/VnSelectFilter.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { ref, toRefs, computed, watch } from 'vue';
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -12,11 +15,19 @@ const $props = defineProps({
         default: () => [],
     },
     optionLabel: {
+        type: [String],
+        default: '',
+    },
+    optionValue: {
+        type: String,
+        default: '',
+    },
+    url: {
         type: String,
         default: '',
     },
     filterOptions: {
-        type: Array,
+        type: [Array],
         default: () => [],
     },
     isClearable: {
@@ -27,12 +38,32 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    fields: {
+        type: Array,
+        default: null,
+    },
+    where: {
+        type: Object,
+        default: null,
+    },
+    sortBy: {
+        type: String,
+        default: null,
+    },
+    limit: {
+        type: Number,
+        default: 30,
+    },
 });
 
-const { optionLabel, options } = toRefs($props);
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
+const { optionLabel, optionValue, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
+const dataRef = ref();
 
 const value = computed({
     get() {
@@ -47,8 +78,12 @@ function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
-setOptions(options.value);
-const filter = (val, options) => {
+onMounted(() => {
+    setOptions(options.value);
+    if ($props.url && $props.modelValue) fetchFilter($props.modelValue);
+});
+
+function filter(val, options) {
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
@@ -66,13 +101,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) {
+    if (!$props.defaultFilter) return update();
+    let newOptions;
+    if ($props.url) {
+        newOptions = await fetchFilter(val);
+    } else newOptions = filter(val, myOptionsOriginal.value);
     update(
         () => {
-            if ($props.defaultFilter)
-                myOptions.value = filter(val, myOptionsOriginal.value);
+            myOptions.value = newOptions;
         },
         (ref) => {
             if (val !== '' && ref.options.length > 0) {
@@ -81,18 +132,33 @@ const filterHandler = (val, update) => {
             }
         }
     );
-};
+}
 
 watch(options, (newValue) => {
     setOptions(newValue);
 });
+
+watch(modelValue, (newValue) => {
+    if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
+        fetchFilter(newValue);
+});
 </script>
 
 <template>
+    <FetchData
+        ref="dataRef"
+        :url="$props.url"
+        @on-fetch="(data) => setOptions(data)"
+        :where="where || { [optionValue]: value }"
+        :limit="limit"
+        :order-by="orderBy"
+        :fields="fields"
+    />
     <QSelect
         v-model="value"
         :options="myOptions"
         :option-label="optionLabel"
+        :option-value="optionValue"
         v-bind="$attrs"
         emit-value
         map-options
@@ -102,6 +168,7 @@ watch(options, (newValue) => {
         fill-input
         ref="vnSelectRef"
         :class="{ required: $attrs.required }"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
     >
         <template v-if="isClearable" #append>
             <QIcon
@@ -116,3 +183,9 @@ watch(options, (newValue) => {
         </template>
     </QSelect>
 </template>
+
+<style scoped lang="scss">
+.q-field--outlined {
+    max-width: 100%;
+}
+</style>

src/components/common/VnSmsDialog.vue

@@ -94,16 +94,6 @@ async function send() {
                 <QSpace />
                 <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
             </QCardSection>
-            <QCardSection v-if="props.locale">
-                <QBanner class="bg-amber text-white" rounded dense>
-                    <template #avatar>
-                        <QIcon name="warning" />
-                    </template>
-                    <span
-                        v-html="t('CustomerDefaultLanguage', { locale: t(props.locale) })"
-                    ></span>
-                </QBanner>
-            </QCardSection>
             <QCardSection class="q-pb-xs">
                 <QSelect
                     :label="t('Language')"
@@ -184,7 +174,6 @@ async function send() {
 
 <i18n>
 en:
-    CustomerDefaultLanguage: This customer uses <strong>{locale}</strong> as their default language
     templates:
         pendingPayment: 'Your order is pending of payment.
             Please, enter the website and make the payment with a credit card. Thank you.'
@@ -197,7 +186,6 @@ en:
     pt: Portuguese
 es:
     Send SMS: Enviar SMS
-    CustomerDefaultLanguage: Este cliente utiliza <strong>{locale}</strong> como idioma por defecto
     Language: Idioma
     Phone: Móvil
     Subject: Asunto

src/components/common/VnSummaryDialog.vue

@@ -1,21 +1,23 @@
 <script setup>
 import { useDialogPluginComponent } from 'quasar';
-import WorkerSummary from './WorkerSummary.vue';
 
-const $props = defineProps({
+defineProps({
     id: {
         type: Number,
         required: true,
     },
+    summary: {
+        type: Object,
+        required: true,
+    },
 });
 
 defineEmits([...useDialogPluginComponent.emits]);
 
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
-
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-        <WorkerSummary v-if="$props.id" :id="$props.id" />
+    <QDialog ref="dialogRef" @hide="onDialogHide" full-width>
+        <component :is="summary" :id="id" />
     </QDialog>
 </template>

src/components/ui/CardDescriptor.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { onMounted, useSlots, watch, computed } from 'vue';
+import { onMounted, useSlots, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const $props = defineProps({
     url: {
@@ -35,10 +35,11 @@ const $props = defineProps({
         default: null,
     },
 });
-const quasar = useQuasar();
 const slots = useSlots();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 const entity = computed(() => useArrayData($props.dataKey).store.data);
+const isLoading = ref(false);
 
 defineExpose({
     getData,
@@ -49,7 +50,6 @@ onMounted(async () => {
         () => $props.url,
         async (newUrl, lastUrl) => {
             if (newUrl == lastUrl) return;
-            entity.value = null;
             await getData();
         }
     );
@@ -61,28 +61,24 @@ async function getData() {
         filter: $props.filter,
         skip: 0,
     });
-    const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    entity.value = data;
-    emit('onFetch', data);
+    isLoading.value = true;
+    try {
+        const { data } = await arrayData.fetch({ append: false, updateRouter: false });
+        emit('onFetch', data);
+    } finally {
+        isLoading.value = false;
+    }
 }
 const emit = defineEmits(['onFetch']);
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: $props.summary,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
     <div class="descriptor">
-        <template v-if="entity">
+        <template v-if="entity && !isLoading">
             <div class="header bg-primary q-pa-sm justify-between">
+                <slot name="header-extra-action" />
                 <QBtn
-                    @click.stop="viewSummary(entity.id)"
+                    @click.stop="viewSummary(entity.id, $props.summary)"
                     round
                     flat
                     dense
@@ -118,7 +114,7 @@ function viewSummary(id) {
                     icon="more_vert"
                     round
                     size="md"
-                    v-if="slots.menu"
+                    :class="{ invisible: !slots.menu }"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}
@@ -164,8 +160,13 @@ function viewSummary(id) {
             <slot name="after" />
         </template>
         <!-- Skeleton -->
-        <SkeletonDescriptor v-if="!entity" />
+        <SkeletonDescriptor v-if="!entity || isLoading" />
     </div>
+    <QInnerLoading
+        :label="t('globals.pleaseWait')"
+        :showing="isLoading"
+        color="primary"
+    />
 </template>
 
 <style lang="scss">
@@ -187,16 +188,18 @@ function viewSummary(id) {
         .label {
             color: var(--vn-label);
             font-size: 12px;
-            width: 47%;
+            ::after {
+                content: ':';
+            }
         }
         .value {
             color: var(--vn-text);
             font-size: 14px;
             margin-left: 12px;
-            width: 47%;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            text-align: left;
         }
         .info {
             margin-left: 5px;
@@ -220,11 +223,8 @@ function viewSummary(id) {
     margin-bottom: 15px;
 }
 .list-box {
-    width: 90%;
     background-color: var(--vn-gray);
-    margin: 10px auto;
-    padding: 10px 5px 10px 0px;
-    border-radius: 8px;
+
     .q-item__label {
         color: var(--vn-label);
     }

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

@@ -90,17 +90,16 @@ watch(props, async () => {
         background-color: var(--vn-gray);
 
         > .q-card.vn-one {
-            width: 350px;
             flex: 1;
         }
         > .q-card.vn-two {
-            flex: 2;
+            flex: 40%;
         }
         > .q-card.vn-three {
-            flex: 4;
+            flex: 75%;
         }
         > .q-card.vn-max {
-            width: 100%;
+            flex: 100%;
         }
 
         > .q-card {

src/components/ui/FetchedTags.vue

@@ -13,12 +13,49 @@ defineProps({
 <template>
     <div class="fetchedTags">
         <div class="wrap">
-            <div class="inline-tag" :class="{ empty: !$props.item.value5 }">{{ $props.item.value5 }}</div>
-            <div class="inline-tag" :class="{ empty: !$props.item.value6 }">{{ $props.item.value6 }}</div>
-            <div class="inline-tag" :class="{ empty: !$props.item.value7 }">{{ $props.item.value7 }}</div>
-            <div class="inline-tag" :class="{ empty: !$props.item.value8 }">{{ $props.item.value8 }}</div>
-            <div class="inline-tag" :class="{ empty: !$props.item.value9 }">{{ $props.item.value9 }}</div>
-            <div class="inline-tag" :class="{ empty: !$props.item.value10 }">{{ $props.item.value10 }}</div>
+            <div
+                class="inline-tag"
+                :class="{ empty: !$props.item.value5 }"
+                :title="$props.item.tag5 + ': ' + $props.item.value5"
+            >
+                {{ $props.item.value5 }}
+            </div>
+            <div
+                class="inline-tag"
+                :class="{ empty: !$props.item.tag6 }"
+                :title="$props.item.tag6 + ': ' + $props.item.value6"
+            >
+                {{ $props.item.value6 }}
+            </div>
+
+            <div
+                class="inline-tag"
+                :class="{ empty: !$props.item.value7 }"
+                :title="$props.item.tag7 + ': ' + $props.item.value7"
+            >
+                {{ $props.item.value7 }}
+            </div>
+            <div
+                class="inline-tag"
+                :class="{ empty: !$props.item.value8 }"
+                :title="$props.item.tag8 + ': ' + $props.item.value8"
+            >
+                {{ $props.item.value8 }}
+            </div>
+            <div
+                class="inline-tag"
+                :class="{ empty: !$props.item.value9 }"
+                :title="$props.item.tag9 + ': ' + $props.item.value9"
+            >
+                {{ $props.item.value9 }}
+            </div>
+            <div
+                class="inline-tag"
+                :class="{ empty: !$props.item.value10 }"
+                :title="$props.item.tag10 + ': ' + $props.item.value10"
+            >
+                {{ $props.item.value10 }}
+            </div>
         </div>
     </div>
 </template>

src/components/ui/SkeletonDescriptor.vue

@@ -1,10 +1,39 @@
 <template>
     <div id="descriptor-skeleton">
-        <div class="col q-pl-sm q-pa-sm">
-            <QSkeleton type="text" square height="45px" />
-            <QSkeleton type="text" square height="18px" />
-            <QSkeleton type="text" square height="18px" />
-            <QSkeleton type="text" square height="18px" />
+        <div class="row justify-between q-pa-sm">
+            <QSkeleton square size="40px" />
+            <QSkeleton square size="40px" />
+            <QSkeleton square height="40px" width="20px" />
+        </div>
+        <div class="col justify-between q-pa-sm q-gutter-y-xs">
+            <QSkeleton square height="40px" width="150px" />
+            <QSkeleton square height="30px" width="70px" />
+        </div>
+        <div class="col q-pl-sm q-pa-sm q-mb-md">
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
+            <div class="row justify-between">
+                <QSkeleton type="text" square height="30px" width="20%" />
+                <QSkeleton type="text" square height="30px" width="60%" />
+            </div>
         </div>
 
         <QCardActions>

src/components/ui/VnFilterPanel.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
+import { useRoute } from 'vue-router';
 import toDate from 'filters/toDate';
 
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
@@ -52,6 +53,7 @@ const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
 const arrayData = useArrayData(props.dataKey, {
     exprBuilder: props.exprBuilder,
 });
+const route = useRoute();
 const store = arrayData.store;
 const userParams = ref({});
 
@@ -63,6 +65,18 @@ onMounted(() => {
     emit('init', { params: userParams.value });
 });
 
+watch(
+    () => route.query.params,
+    (val) => {
+        if (!val) {
+            userParams.value = {};
+        } else {
+            const parsedParams = JSON.parse(val);
+            userParams.value = { ...parsedParams };
+        }
+    }
+);
+
 const isLoading = ref(false);
 async function search() {
     isLoading.value = true;
@@ -220,7 +234,9 @@ function formatValue(value) {
             </QItem>
             <QSeparator />
         </QList>
-        <slot name="body" :params="userParams" :search-fn="search"></slot>
+        <QList dense class="list q-gutter-y-sm q-mt-sm">
+            <slot name="body" :params="userParams" :search-fn="search"></slot>
+        </QList>
         <template v-if="props.searchButton">
             <QItem>
                 <QItemSection class="q-py-sm">
@@ -246,6 +262,12 @@ function formatValue(value) {
     />
 </template>
 
+<style scoped lang="scss">
+.list {
+    width: 256px;
+}
+</style>
+
 <i18n>
 es:
     No filters applied: No se han aplicado filtros

src/components/ui/VnLv.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed } from 'vue';
 import { dashIfEmpty } from 'src/filters';
+import { useI18n } from 'vue-i18n';
+import { useClipboard } from 'src/composables/useClipboard';
 
 const $props = defineProps({
     label: { type: String, default: null },
@@ -10,8 +12,20 @@ const $props = defineProps({
     },
     info: { type: String, default: null },
     dash: { type: Boolean, default: true },
+    copy: { type: Boolean, default: false },
 });
+
+const { t } = useI18n();
 const isBooleanValue = computed(() => typeof $props.value === 'boolean');
+const { copyText } = useClipboard();
+
+function copyValueText() {
+    copyText($props.value, {
+        component: {
+            copyValue: $props.value,
+        },
+    });
+}
 </script>
 <style scoped>
 .label,
@@ -42,11 +56,29 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
             </slot>
         </div>
         <div class="info" v-if="$props.info">
-            <QIcon name="info">
+            <QIcon name="info" class="cursor-pointer" size="xs" color="grey">
                 <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
                     {{ $props.info }}
                 </QTooltip>
             </QIcon>
         </div>
+        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
+            <QIcon name="Content_Copy" color="primary">
+                <QTooltip>{{ t('globals.copyClipboard') }}</QTooltip>
+            </QIcon>
+        </div>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.vn-label-value:hover .copy {
+    visibility: visible;
+    cursor: pointer;
+}
+.copy {
+    visibility: hidden;
+}
+.info {
+    margin-left: 5px;
+}
+</style>

src/components/ui/VnNotes.vue

@@ -39,14 +39,14 @@ async function insert() {
             ref="vnPaginateRef"
         >
             <template #body="{ rows }">
-                <QCard class="q-pa-md q-mb-md" v-for="(note, index) in rows" :key="index">
+                <QCard class="q-pa-xs q-mb-md" v-for="(note, index) in rows" :key="index">
                     <QCardSection horizontal>
                         <slot name="picture">
                             <VnAvatar :descriptor="false" :worker-id="note.workerFk" />
                         </slot>
                         <QItem class="full-width justify-between items-start">
                             <VnUserLink
-                                :name="`${note.worker.firstName} ${note.worker.lastName}`"
+                                :name="`${note.worker.user.nickname}`"
                                 :worker-id="note.worker.id"
                             />
 
@@ -55,7 +55,7 @@ async function insert() {
                             </slot>
                         </QItem>
                     </QCardSection>
-                    <QCardSection>
+                    <QCardSection class="q-pa-sm">
                         <slot name="text">
                             {{ note.text }}
                         </slot>
@@ -63,15 +63,8 @@ async function insert() {
                 </QCard>
             </template>
         </VnPaginate>
-        <QPageSticky position="bottom-right" :offset="[25, 25]">
-            <QBtn
-                v-if="addNote"
-                color="primary"
-                icon="add"
-                size="lg"
-                round
-                @click="noteModal = true"
-            />
+        <QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
+            <QBtn color="primary" icon="add" size="lg" round @click="noteModal = true" />
         </QPageSticky>
         <QDialog v-model="noteModal" @hide="newNote = ''">
             <QCard>

src/components/ui/VnRow.vue

@@ -1,9 +1,15 @@
 <template>
-    <div id="row">
+    <div id="row" class="q-gutter-md q-mb-md">
         <slot></slot>
     </div>
 </template>
 <style lang="scss" scopped>
+#row {
+    display: flex;
+    > * {
+        flex: 1;
+    }
+}
 @media screen and (max-width: 800px) {
     #row {
         flex-direction: column;

src/components/ui/VnSearchbar.vue

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

src/components/ui/VnSubToolbar.vue

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

src/components/ui/VnTree.vue

@@ -1,20 +1,21 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useState } from 'src/composables/useState';
 import { useQuasar } from 'quasar';
-
+import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
 import CreateDepartmentChild from '../CreateDepartmentChild.vue';
-
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import { useRouter } from 'vue-router';
 
 const quasar = useQuasar();
 const { t } = useI18n();
-const router = useRouter();
 const { notify } = useNotify();
+const state = useState();
+const router = useRouter();
 
-const treeRef = ref(null);
+const treeRef = ref();
 const showCreateNodeFormVal = ref(false);
 const creationNodeSelectedId = ref(null);
 const expanded = ref([]);
@@ -24,30 +25,35 @@ 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
+        fetchNodeLeaves(nodeKeysArray.at(-1));
     }
+
+    state.set('Tree', nodeKeysArray);
 };
 
 const fetchNodeLeaves = async (nodeKey) => {
     try {
-        const node = treeRef.value.getNodeByKey(nodeKey);
+        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 = [{}];
+            node.children = response.data.map((n) => {
+                const hasChildrens = n.sons > 0;
+
+                n.children = hasChildrens ? [{}] : null;
+                n.clickable = true;
+                return n;
             });
         }
+
+        state.set('Tree', node);
     } catch (err) {
-        console.error('Error fetching department leaves');
+        console.error('Error fetching department leaves', err);
         throw new Error();
     }
 };
@@ -84,10 +90,49 @@ const onNodeCreated = async () => {
     await fetchNodeLeaves(creationNodeSelectedId.value);
 };
 
-const redirectToDepartmentSummary = (id) => {
-    if (!id) return;
-    router.push({ name: 'DepartmentSummary', params: { id } });
-};
+onMounted(async (n) => {
+    const tree = [...state.get('Tree'), 1];
+    const lastStateTree = state.get('TreeState');
+    if (tree) {
+        for (let n of tree) {
+            await fetchNodeLeaves(n);
+        }
+        expanded.value = tree;
+
+        if (lastStateTree) {
+            tree.push(lastStateTree);
+            await fetchNodeLeaves(lastStateTree);
+        }
+    }
+    setTimeout(() => {
+        if (lastStateTree) {
+            document.getElementById(lastStateTree).scrollIntoView();
+        }
+    }, 1000);
+});
+
+function handleEvent(type, event, node) {
+    const isParent = node.sons > 0;
+    const lastId = isParent ? node.id : node.parentFk;
+
+    switch (type) {
+        case 'path':
+            state.set('TreeState', lastId);
+            node.id && router.push({ path: `/department/department/${node.id}/summary` });
+            break;
+
+        case 'tab':
+            state.set('TreeState', lastId);
+            node.id &&
+                window.open(`#/department/department/${node.id}/summary`, '_blank');
+            break;
+
+        default:
+            node.id &&
+                router.push({ path: `#/department/department/${node.id}/summary` });
+            break;
+    }
+}
 </script>
 
 <template>
@@ -99,15 +144,27 @@ const redirectToDepartmentSummary = (id) => {
             label-key="name"
             v-model:expanded="expanded"
             @update:expanded="onNodeExpanded($event)"
+            :default-expand-all="true"
         >
             <template #default-header="{ node }">
                 <div
-                    class="row justify-between full-width q-pr-md cursor-pointer"
-                    @click.stop="redirectToDepartmentSummary(node.id)"
+                    :id="node.id"
+                    class="qtr row justify-between full-width q-pr-md cursor-pointer"
                 >
-                    <span class="text-uppercase">
-                        {{ node.name }}
-                    </span>
+                    <div>
+                        <span
+                            @click="handleEvent('row', $event, node)"
+                            class="cursor-pointer"
+                        >
+                            {{ node.name }}
+                            <DepartmentDescriptorProxy :id="node.id" />
+                        </span>
+                    </div>
+                    <div
+                        @click.stop.exact="handleEvent('path', $event, node)"
+                        @click.ctrl.stop="handleEvent('tab', $event, node)"
+                        style="flex-grow: 1; width: 10px"
+                    ></div>
                     <div class="row justify-between" style="max-width: max-content">
                         <QIcon
                             v-if="node.id"
@@ -149,6 +206,11 @@ const redirectToDepartmentSummary = (id) => {
     </QCard>
 </template>
 
+<style lang="scss" scoped>
+span {
+    color: $primary;
+}
+</style>
 <i18n>
     es:
         Departments: Departamentos

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

@@ -105,7 +105,8 @@ export function useArrayData(key, userOptions) {
             for (const row of response.data) store.data.push(row);
         } else {
             store.data = response.data;
-            updateRouter && updateStateParams();
+            if (!document.querySelectorAll('[role="dialog"]'))
+                updateRouter && updateStateParams();
         }
 
         store.isLoading = false;

src/composables/useCapitalize.js

@@ -1,3 +1,3 @@
-export function useFirstUpper(str) {
+export function useCapitalize(str) {
     return str && str.charAt(0).toUpperCase() + str.substr(1);
 }

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

@@ -9,6 +9,7 @@ const user = ref({
     lang: '',
     darkMode: null,
     companyFk: null,
+    warehouseFk: null,
 });
 
 const roles = ref([]);
@@ -25,6 +26,7 @@ export function useState() {
                 lang: user.value.lang,
                 darkMode: user.value.darkMode,
                 companyFk: user.value.companyFk,
+                warehouseFk: user.value.warehouseFk,
             };
         });
     }
@@ -37,6 +39,7 @@ export function useState() {
             lang: data.lang,
             darkMode: data.darkMode,
             companyFk: data.companyFk,
+            warehouseFk: data.warehouseFk,
         };
     }
 

src/composables/useSummaryDialog.js

@@ -0,0 +1,15 @@
+import VnSummaryDialog from 'src/components/common/VnSummaryDialog.vue';
+import { useQuasar } from 'quasar';
+
+export function useSummaryDialog() {
+    const quasar = useQuasar();
+
+    function viewSummary(id, summary) {
+        quasar.dialog({
+            component: VnSummaryDialog,
+            componentProps: { id, summary },
+        });
+    }
+
+    return { viewSummary };
+}

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/composables/useValidator.js

@@ -30,6 +30,15 @@ export function useValidator() {
     const { t } = useI18n();
     const validations = function (validation) {
         return {
+            format: (value) => {
+                const { allowNull, with: format, allowBlank } = validation;
+                const message = t(validation.message) || validation.message;
+                if (!allowBlank && value === '') return message;
+                if (!allowNull && value === null) return message;
+
+                const isValid = new RegExp(format).test(value);
+                if (!isValid) return message;
+            },
             presence: (value) => {
                 let message = `Value can't be empty`;
                 if (validation.message)

src/css/app.scss

@@ -17,9 +17,9 @@ a {
 // Removes chrome autofill background
 input:-webkit-autofill,
 select:-webkit-autofill {
-    color:  var(--vn-text) ;
+    color: var(--vn-text);
     font-family: $typography-font-family;
-    -webkit-text-fill-color: var(--vn-text) ;
+    -webkit-text-fill-color: var(--vn-text);
     -webkit-background-clip: text !important;
     background-clip: text !important;
 }
@@ -48,13 +48,44 @@ 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;
+}
+
+.bg-vn-primary-row {
+    background-color: var(--vn-dark);
+}
+
+.bg-vn-secondary-row {
+    background-color: var(--vn-light-gray);
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';
 }
+
+input[type='number'] {
+    -moz-appearance: textfield;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+}

src/css/icons.scss

@@ -1,412 +1,387 @@
 @font-face {
-    font-family: 'icomoon';
-    src: url('fonts/icomoon.eot?g6kvgn');
-    src: url('fonts/icomoon.eot?g6kvgn#iefix') format('embedded-opentype'),
-        url('fonts/icomoon.ttf?g6kvgn') format('truetype'),
-        url('fonts/icomoon.woff?g6kvgn') format('woff'),
-        url('fonts/icomoon.svg?g6kvgn#icomoon') format('svg');
-    font-weight: normal;
-    font-style: normal;
-    font-display: block;
+  font-family: 'icon';
+  src:  url('fonts/icon.eot?7zbcv0');
+  src:  url('fonts/icon.eot?7zbcv0#iefix') format('embedded-opentype'),
+    url('fonts/icon.ttf?7zbcv0') format('truetype'),
+    url('fonts/icon.woff?7zbcv0') format('woff'),
+    url('fonts/icon.svg?7zbcv0#icon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
 }
 
-[class^='icon-'],
-[class*=' icon-'] {
-    /* use !important to prevent issues with browser extensions that change fonts */
-    font-family: 'icomoon' !important;
-    speak: never;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
 
-    /* Better Font Rendering =========== */
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-frozen:before {
-    content: '\e900';
-}
-.icon-Person:before {
-    content: '\e901';
-}
-.icon-handmadeArtificial:before {
-    content: '\e902';
-}
-.icon-fruit:before {
-    content: '\e903';
-}
-.icon-funeral:before {
-    content: '\e904';
-}
-.icon-noPayMethod:before {
-    content: '\e905';
-}
-.icon-preserved:before {
-    content: '\e906';
-}
-.icon-greenery:before {
-    content: '\e907';
-}
-.icon-plant:before {
-    content: '\e908';
-}
-.icon-handmade:before {
-    content: '\e909';
-}
-.icon-accessory:before {
-    content: '\e90a';
-}
-.icon-artificial:before {
-    content: '\e90b';
-}
-.icon-flower:before {
-    content: '\e90c';
-}
-.icon-fixedPrice:before {
-    content: '\e90d';
-}
-.icon-addperson:before {
-    content: '\e90e';
-}
-.icon-supplierfalse:before {
-    content: '\e90f';
-}
-.icon-invoice-out:before {
-    content: '\e910';
-}
-.icon-invoice-in:before {
-    content: '\e911';
-}
-.icon-invoice-in-create:before {
-    content: '\e912';
-}
-.icon-basketadd:before {
-    content: '\e913';
-}
-.icon-basket:before {
-    content: '\e914';
-}
-.icon-uniE915:before {
-    content: '\e915';
-}
-.icon-uniE916:before {
-    content: '\e916';
-}
-.icon-uniE917:before {
-    content: '\e917';
-}
-.icon-uniE918:before {
-    content: '\e918';
-}
-.icon-uniE919:before {
-    content: '\e919';
-}
-.icon-uniE91A:before {
-    content: '\e91a';
-}
-.icon-isTooLittle:before {
-    content: '\e91b';
-}
-.icon-deliveryprices:before {
-    content: '\e91c';
-}
-.icon-onlinepayment:before {
-    content: '\e91d';
-}
-.icon-risk:before {
-    content: '\e91e';
-}
-.icon-noweb:before {
-    content: '\e91f';
-}
-.icon-no036:before {
-    content: '\e920';
-}
-.icon-disabled:before {
-    content: '\e921';
-}
-.icon-treatments:before {
-    content: '\e922';
-}
-.icon-invoice:before {
-    content: '\e923';
-}
-.icon-photo:before {
-    content: '\e924';
-}
-.icon-supplier:before {
-    content: '\e925';
-}
-.icon-languaje:before {
-    content: '\e926';
-}
-.icon-credit:before {
-    content: '\e927';
-}
-.icon-client:before {
-    content: '\e928';
-}
-.icon-shipment-01:before {
-    content: '\e929';
-}
-.icon-account:before {
-    content: '\e92a';
-}
-.icon-inventory:before {
-    content: '\e92b';
-}
-.icon-unavailable:before {
-    content: '\e92c';
-}
-.icon-wiki:before {
-    content: '\e92d';
-}
-.icon-attach:before {
-    content: '\e92e';
-}
-.icon-exit:before {
-    content: '\e92f';
-}
-.icon-anonymous:before {
-    content: '\e930';
-}
-.icon-net:before {
-    content: '\e931';
-}
-.icon-buyrequest:before {
-    content: '\e932';
-}
-.icon-thermometer:before {
-    content: '\e933';
-}
-.icon-entry:before {
-    content: '\e934';
-}
-.icon-deletedTicket:before {
-    content: '\e935';
-}
-.icon-logout:before {
-    content: '\e936';
-}
-.icon-catalog:before {
-    content: '\e937';
-}
-.icon-agency:before {
-    content: '\e938';
-}
-.icon-delivery:before {
-    content: '\e939';
-}
-.icon-wand:before {
-    content: '\e93a';
-}
-.icon-buscaman:before {
-    content: '\e93b';
-}
-.icon-pbx:before {
-    content: '\e93c';
-}
-.icon-calendar:before {
-    content: '\e93d';
-}
-.icon-splitline:before {
-    content: '\e93e';
-}
-.icon-consignatarios:before {
-    content: '\e93f';
-}
-.icon-tax:before {
-    content: '\e940';
-}
-.icon-notes:before {
-    content: '\e941';
-}
-.icon-lines:before {
-    content: '\e942';
-}
-.icon-zone:before {
-    content: '\e943';
-}
-.icon-greuge:before {
-    content: '\e944';
-}
-.icon-ticketAdd:before {
-    content: '\e945';
-}
-.icon-components:before {
-    content: '\e946';
-}
-.icon-pets:before {
-    content: '\e947';
-}
-.icon-linesprepaired:before {
-    content: '\e948';
-}
-.icon-control:before {
-    content: '\e949';
-}
-.icon-revision:before {
-    content: '\e94a';
-}
-.icon-deaulter:before {
-    content: '\e94b';
-}
-.icon-services:before {
-    content: '\e94c';
-}
-.icon-albaran:before {
-    content: '\e94d';
-}
-.icon-solunion:before {
-    content: '\e94e';
-}
-.icon-stowaway:before {
-    content: '\e94f';
-}
-.icon-apps:before {
-    content: '\e951';
-}
-.icon-info:before {
-    content: '\e952';
-}
-.icon-columndelete:before {
-    content: '\e953';
-}
-.icon-columnadd:before {
-    content: '\e954';
-}
-.icon-deleteline:before {
-    content: '\e955';
-}
-.icon-item:before {
-    content: '\e956';
-}
-.icon-worker:before {
-    content: '\e957';
-}
-.icon-headercol:before {
-    content: '\e958';
-}
-.icon-reserva:before {
-    content: '\e959';
-}
 .icon-100:before {
-    content: '\e95a';
-}
-.icon-sign:before {
-    content: '\e95d';
-}
-.icon-polizon:before {
-    content: '\e95e';
-}
-.icon-solclaim:before {
-    content: '\e95f';
-}
-.icon-actions:before {
-    content: '\e960';
-}
-.icon-details:before {
-    content: '\e961';
-}
-.icon-traceability:before {
-    content: '\e962';
-}
-.icon-claims:before {
-    content: '\e963';
-}
-.icon-regentry:before {
-    content: '\e964';
-}
-.icon-transaction:before {
-    content: '\e966';
+  content: "\e926";
 }
 .icon-History:before {
-    content: '\e968';
+  content: "\e964";
 }
-.icon-mana:before {
-    content: '\e96a';
+.icon-Person:before {
+  content: "\e984";
 }
-.icon-ticket:before {
-    content: '\e96b';
+.icon-accessory:before {
+  content: "\e948";
 }
-.icon-niche:before {
-    content: '\e96c';
+.icon-account:before {
+  content: "\e927";
 }
-.icon-tags:before {
-    content: '\e96d';
+.icon-actions:before {
+  content: "\e928";
 }
-.icon-volume:before {
-    content: '\e96e';
-}
-.icon-bin:before {
-    content: '\e96f';
-}
-.icon-splur:before {
-    content: '\e970';
-}
-.icon-barcode:before {
-    content: '\e971';
-}
-.icon-botanical:before {
-    content: '\e972';
-}
-.icon-clone:before {
-    content: '\e973';
-}
-.icon-sms:before {
-    content: '\e975';
-}
-.icon-eye:before {
-    content: '\e976';
-}
-.icon-doc:before {
-    content: '\e977';
-}
-.icon-package:before {
-    content: '\e978';
-}
-.icon-settings:before {
-    content: '\e979';
-}
-.icon-bucket:before {
-    content: '\e97a';
-}
-.icon-mandatory:before {
-    content: '\e97b';
-}
-.icon-recovery:before {
-    content: '\e97c';
-}
-.icon-payment:before {
-    content: '\e97e';
-}
-.icon-grid:before {
-    content: '\e980';
-}
-.icon-web:before {
-    content: '\e982';
-}
-.icon-dfiscales:before {
-    content: '\e984';
-}
-.icon-trolley:before {
-    content: '\e95c';
+.icon-addperson:before {
+  content: "\e929";
 }
 .icon-agency-term:before {
-    content: '\e950';
+  content: "\e92b";
 }
-.icon-client-unpaid:before {
-    content: '\e95b';
+.icon-anonymous:before {
+  content: "\e92d";
+}
+.icon-apps:before {
+  content: "\e92e";
+}
+.icon-artificial:before {
+  content: "\e92f";
+}
+.icon-attach:before {
+  content: "\e930";
+}
+.icon-barcode:before {
+  content: "\e932";
+}
+.icon-basket:before {
+  content: "\e933";
+}
+.icon-basketadd:before {
+  content: "\e934";
+}
+.icon-bin:before {
+  content: "\e935";
+}
+.icon-botanical:before {
+  content: "\e936";
+}
+.icon-bucket:before {
+  content: "\e937";
+}
+.icon-buscaman:before {
+  content: "\e938";
+}
+.icon-buyrequest:before {
+  content: "\e939";
+}
+.icon-calc_volum:before {
+  content: "\e93a";
+}
+.icon-calendar:before {
+  content: "\e940";
+}
+.icon-catalog:before {
+  content: "\e941";
+}
+.icon-claims:before {
+  content: "\e942";
+}
+.icon-client:before {
+  content: "\e943";
+}
+.icon-clone:before {
+  content: "\e945";
+}
+.icon-columnadd:before {
+  content: "\e946";
+}
+.icon-columndelete:before {
+  content: "\e947";
+}
+.icon-components:before {
+  content: "\e949";
+}
+.icon-consignatarios:before {
+  content: "\e94b";
+}
+.icon-control:before {
+  content: "\e94c";
+}
+.icon-credit:before {
+  content: "\e94d";
+}
+.icon-deaulter:before {
+  content: "\e94e";
+}
+.icon-deletedTicket:before {
+  content: "\e94f";
+}
+.icon-deleteline:before {
+  content: "\e950";
+}
+.icon-delivery:before {
+  content: "\e951";
+}
+.icon-deliveryprices:before {
+  content: "\e952";
+}
+.icon-details:before {
+  content: "\e954";
+}
+.icon-dfiscales:before {
+  content: "\e955";
+}
+.icon-disabled:before {
+  content: "\e965";
+}
+.icon-doc:before {
+  content: "\e956";
+}
+.icon-entry:before {
+  content: "\e958";
+}
+.icon-exit:before {
+  content: "\e959";
+}
+.icon-eye:before {
+  content: "\e95a";
+}
+.icon-fixedPrice:before {
+  content: "\e95b";
+}
+.icon-flower:before {
+  content: "\e95c";
+}
+.icon-frozen:before {
+  content: "\e95d";
+}
+.icon-fruit:before {
+  content: "\e95e";
+}
+.icon-funeral:before {
+  content: "\e95f";
+}
+.icon-greenery:before {
+  content: "\e91e";
+}
+.icon-greuge:before {
+  content: "\e960";
+}
+.icon-grid:before {
+  content: "\e961";
+}
+.icon-handmade:before {
+  content: "\e94a";
+}
+.icon-handmadeArtificial:before {
+  content: "\e962";
+}
+.icon-headercol:before {
+  content: "\e963";
+}
+.icon-info:before {
+  content: "\e966";
+}
+.icon-inventory:before {
+  content: "\e967";
+}
+.icon-invoice:before {
+  content: "\e969";
+}
+.icon-invoice-in:before {
+  content: "\e96a";
+}
+.icon-invoice-in-create:before {
+  content: "\e96b";
+}
+.icon-invoice-out:before {
+  content: "\e96c";
+}
+.icon-isTooLittle:before {
+  content: "\e96e";
+}
+.icon-item:before {
+  content: "\e96f";
+}
+.icon-languaje:before {
+  content: "\e912";
+}
+.icon-lines:before {
+  content: "\e971";
+}
+.icon-linesprepaired:before {
+  content: "\e972";
+}
+.icon-link-to-corrected:before {
+  content: "\e900";
+}
+.icon-link-to-correcting:before {
+  content: "\e906";
+}
+.icon-logout:before {
+  content: "\e90a";
+}
+.icon-mana:before {
+  content: "\e974";
+}
+.icon-mandatory:before {
+  content: "\e975";
+}
+.icon-net:before {
+  content: "\e976";
+}
+.icon-newalbaran:before {
+  content: "\e977";
+}
+.icon-niche:before {
+  content: "\e979";
+}
+.icon-no036:before {
+  content: "\e97a";
+}
+.icon-noPayMethod:before {
+  content: "\e97b";
+}
+.icon-notes:before {
+  content: "\e97c";
+}
+.icon-noweb:before {
+  content: "\e97e";
+}
+.icon-onlinepayment:before {
+  content: "\e97f";
+}
+.icon-package:before {
+  content: "\e980";
+}
+.icon-payment:before {
+  content: "\e982";
+}
+.icon-pbx:before {
+  content: "\e983";
+}
+.icon-pets:before {
+  content: "\e985";
+}
+.icon-photo:before {
+  content: "\e986";
+}
+.icon-plant:before {
+  content: "\e987";
+}
+.icon-polizon:before {
+  content: "\e989";
+}
+.icon-preserved:before {
+  content: "\e98a";
+}
+.icon-recovery:before {
+  content: "\e98b";
+}
+.icon-regentry:before {
+  content: "\e901";
+}
+.icon-reserva:before {
+  content: "\e902";
+}
+.icon-revision:before {
+  content: "\e903";
+}
+.icon-risk:before {
+  content: "\e904";
+}
+.icon-services:before {
+  content: "\e905";
+}
+.icon-settings:before {
+  content: "\e907";
+}
+.icon-shipment:before {
+  content: "\e908";
+}
+.icon-sign:before {
+  content: "\e909";
+}
+.icon-sms:before {
+  content: "\e90b";
+}
+.icon-solclaim:before {
+  content: "\e90c";
+}
+.icon-solunion:before {
+  content: "\e90d";
+}
+.icon-splitline:before {
+  content: "\e90e";
+}
+.icon-splur:before {
+  content: "\e90f";
+}
+.icon-stowaway:before {
+  content: "\e910";
+}
+.icon-supplier:before {
+  content: "\e911";
+}
+.icon-supplierfalse:before {
+  content: "\e913";
+}
+.icon-tags:before {
+  content: "\e914";
+}
+.icon-tax:before {
+  content: "\e915";
+}
+.icon-thermometer:before {
+  content: "\e916";
+}
+.icon-ticket:before {
+  content: "\e917";
+}
+.icon-ticketAdd:before {
+  content: "\e918";
+}
+.icon-traceability:before {
+  content: "\e919";
+}
+.icon-treatments:before {
+  content: "\e91c";
 }
 .icon-trolley:before {
-    content: '\e95c';
-}
-.icon-grafana:before {
-    content: '\e965';
+  content: "\e91a";
 }
 .icon-troncales:before {
-    content: '\e967';
+  content: "\e91b";
+}
+.icon-unavailable:before {
+  content: "\e91d";
+}
+.icon-volume:before {
+  content: "\e91f";
+}
+.icon-wand:before {
+  content: "\e920";
+}
+.icon-web:before {
+  content: "\e921";
+}
+.icon-wiki:before {
+  content: "\e922";
+}
+.icon-worker:before {
+  content: "\e923";
+}
+.icon-zone:before {
+  content: "\e924";
 }

src/css/quasar.variables.scss

@@ -13,6 +13,7 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
 $primary: #ec8916;
+$primary-light: lighten($primary, 35%);
 $secondary: #26a69a;
 $accent: #9c27b0;
 $white: #fff;

src/filters/index.js

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

src/filters/isValidDate.js

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

src/filters/toHour.js

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

src/i18n/en/index.js

@@ -24,6 +24,7 @@ export default {
         dataCreated: 'Data created',
         add: 'Add',
         create: 'Create',
+        edit: 'Edit',
         save: 'Save',
         remove: 'Remove',
         reset: 'Reset',
@@ -62,9 +63,26 @@ export default {
         selectRows: 'Select all { numberRows } row(s)',
         allRows: 'All { numberRows } row(s)',
         markAll: 'Mark all',
+        requiredField: 'Required field',
+        class: 'clase',
+        type: 'Type',
+        reason: 'reason',
         noResults: 'No results',
         results: 'Results',
         system: 'System',
+        warehouse: 'Warehouse',
+        company: 'Company',
+        fieldRequired: 'Field required',
+        allowedFilesText: 'Allowed file types: { allowedContentTypes }',
+        confirmDeletion: 'Confirm deletion',
+        confirmDeletionMessage: 'Are you sure you want to delete this?',
+        description: 'Description',
+        id: 'Id',
+        order: 'Order',
+        original: 'Original',
+        file: 'File',
+        selectFile: 'Select a file',
+        copyClipboard: 'Copy on clipboard',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -72,7 +90,7 @@ export default {
         statusBadGateway: 'It seems that the server has fall down',
         statusGatewayTimeout: 'Could not contact the server',
         userConfig: 'Error fetching user config',
-        create: 'Error during creation',
+        writeRequest: 'The requested operation could not be completed',
     },
     login: {
         title: 'Login',
@@ -132,6 +150,8 @@ export default {
             log: 'Log',
             sms: 'Sms',
             creditManagement: 'Credit management',
+            creditContracts: 'Credit contracts',
+            creditOpinion: 'Credit opinion',
             others: 'Others',
         },
         list: {
@@ -159,7 +179,7 @@ export default {
             fiscalAddress: 'Fiscal address',
             fiscalData: 'Fiscal data',
             billingData: 'Billing data',
-            consignee: 'Consignee',
+            consignee: 'Default consignee',
             businessData: 'Business data',
             financialData: 'Financial data',
             customerId: 'Customer ID',
@@ -212,6 +232,8 @@ export default {
             recoverySince: 'Recovery since',
             businessType: 'Business Type',
             city: 'City',
+            rating: 'Rating',
+            recommendCredit: 'Recommended credit',
         },
         basicData: {
             socialName: 'Fiscal name',
@@ -262,12 +284,130 @@ export default {
         pageTitles: {
             entries: 'Entries',
             list: 'List',
-            createEntry: 'New entry',
             summary: 'Summary',
+            basicData: 'Basic data',
+            buys: 'Buys',
+            notes: 'Notes',
+            dms: 'File management',
+            log: 'Log',
             create: 'Create',
+            latestBuys: 'Latest buys',
         },
         list: {
             newEntry: 'New entry',
+            landed: 'Landed',
+            invoiceNumber: 'Invoice number',
+            supplier: 'Supplier',
+            booked: 'Booked',
+            confirmed: 'Confirmed',
+            ordered: 'Ordered',
+        },
+        summary: {
+            commission: 'Commission',
+            currency: 'Currency',
+            company: 'Company',
+            reference: 'Reference',
+            invoiceNumber: 'Invoice number',
+            ordered: 'Ordered',
+            confirmed: 'Confirmed',
+            booked: 'Booked',
+            raid: 'Raid',
+            excludedFromAvailable: 'Inventory',
+            travelReference: 'Reference',
+            travelAgency: 'Agency',
+            travelShipped: 'Shipped',
+            travelWarehouseOut: 'Warehouse Out',
+            travelDelivered: 'Delivered',
+            travelLanded: 'Landed',
+            travelWarehouseIn: 'Warehouse In',
+            travelReceived: 'Received',
+            buys: 'Buys',
+            quantity: 'Quantity',
+            stickers: 'Stickers',
+            package: 'Package',
+            weight: 'Weight',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            buyingValue: 'Buying value',
+            import: 'Import',
+            pvp: 'PVP',
+            item: 'Item',
+        },
+        basicData: {
+            supplier: 'Supplier',
+            travel: 'Travel',
+            reference: 'Reference',
+            invoiceNumber: 'Invoice number',
+            company: 'Company',
+            currency: 'Currency',
+            commission: 'Commission',
+            observation: 'Observation',
+            ordered: 'Ordered',
+            confirmed: 'Confirmed',
+            booked: 'Booked',
+            raid: 'Raid',
+            excludedFromAvailable: 'Inventory',
+            agency: 'Agency',
+            warehouseOut: 'Warehouse Out',
+            warehouseIn: 'Warehouse In',
+            shipped: 'Shipped',
+            landed: 'Landed',
+            id: 'ID',
+        },
+        buys: {
+            groupingPrice: 'Grouping price',
+            packingPrice: 'Packing price',
+            reference: 'Reference',
+            observations: 'Observations',
+            item: 'Item',
+            size: 'Size',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            buyingValue: 'Buying value',
+            packagingFk: 'Box',
+            file: 'File',
+            name: 'Name',
+            producer: 'Producer',
+            type: 'Type',
+            color: 'Color',
+            id: 'ID',
+        },
+        notes: {
+            observationType: 'Observation type',
+        },
+        descriptor: {
+            agency: 'Agency',
+            landed: 'Landed',
+            warehouseOut: 'Warehouse Out',
+        },
+        latestBuys: {
+            picture: 'Picture',
+            itemFk: 'Item ID',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            quantity: 'Quantity',
+            size: 'Size',
+            tags: 'Tags',
+            type: 'Type',
+            intrastat: 'Intrastat',
+            origin: 'Origin',
+            weightByPiece: 'Weight/Piece',
+            isActive: 'Active',
+            family: 'Family',
+            entryFk: 'Entry',
+            buyingValue: 'Buying value',
+            freightValue: 'Freight value',
+            comissionValue: 'Commission value',
+            packageValue: 'Package value',
+            isIgnored: 'Is ignored',
+            price2: 'Grouping',
+            price3: 'Packing',
+            minPrice: 'Min',
+            ektFk: 'Ekt',
+            weight: 'Weight',
+            packagingFk: 'Package',
+            packingOut: 'Package out',
+            landing: 'Landing',
         },
     },
     ticket: {
@@ -332,7 +472,6 @@ export default {
             visible: 'Visible',
             available: 'Available',
             quantity: 'Quantity',
-            description: 'Description',
             price: 'Price',
             discount: 'Discount',
             packing: 'Packing',
@@ -424,7 +563,6 @@ export default {
             landed: 'Landed',
             quantity: 'Quantity',
             claimed: 'Claimed',
-            description: 'Description',
             price: 'Price',
             discount: 'Discount',
             total: 'Total',
@@ -440,6 +578,7 @@ export default {
             responsible: 'Responsible',
             worker: 'Worker',
             redelivery: 'Redelivery',
+            returnOfMaterial: 'RMA',
         },
         basicData: {
             customer: 'Customer',
@@ -578,6 +717,7 @@ export default {
             vat: 'VAT',
             dueDay: 'Due day',
             intrastat: 'Intrastat',
+            corrective: 'Corrective',
             log: 'Logs',
         },
         list: {
@@ -684,7 +824,6 @@ export default {
             orderTicketList: 'Order Ticket List',
             details: 'Details',
             item: 'Item',
-            description: 'Description',
             quantity: 'Quantity',
             price: 'Price',
             amount: 'Amount',
@@ -828,6 +967,10 @@ export default {
         pageTitles: {
             routes: 'Routes',
             cmrsList: 'External CMRs list',
+            RouteList: 'List',
+            create: 'Create',
+            basicData: 'Basic Data',
+            summary: 'Summary',
         },
         cmr: {
             list: {
@@ -898,6 +1041,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: {
@@ -908,8 +1117,8 @@ export default {
             extraCommunity: 'Extra community',
             travelCreate: 'New travel',
             basicData: 'Basic data',
-            history: 'History',
-            thermographs: 'Termographs',
+            history: 'Log',
+            thermographs: 'Thermograph',
         },
         summary: {
             confirmed: 'Confirmed',
@@ -921,7 +1130,10 @@ export default {
             entries: 'Entries',
             cloneShipping: 'Clone travel',
             CloneTravelAndEntries: 'Clone travel and his entries',
+            deleteTravel: 'Delete travel',
             AddEntry: 'Add entry',
+            thermographs: 'Thermographs',
+            hb: 'HB',
         },
         variables: {
             search: 'Id/Reference',
@@ -933,6 +1145,49 @@ export default {
             continent: 'Continent out',
             totalEntries: 'Total entries',
         },
+        basicData: {
+            reference: 'Reference',
+            agency: 'Agency',
+            shipped: 'Shipped',
+            landed: 'Landed',
+            warehouseOut: 'Warehouse Out',
+            warehouseIn: 'Warehouse In',
+            delivered: 'Delivered',
+            received: 'Received',
+        },
+        thermographs: {
+            code: 'Code',
+            temperature: 'Temperature',
+            state: 'State',
+            destination: 'Destination',
+            created: 'Created',
+            thermograph: 'Thermograph',
+            reference: 'Reference',
+            type: 'Type',
+            company: 'Company',
+            warehouse: 'Warehouse',
+            travelFileDescription: 'Travel id { travelId }',
+            file: 'File',
+        },
+    },
+    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: {},
@@ -946,7 +1201,6 @@ export default {
             clone: 'Clone',
             openCard: 'View',
             openSummary: 'Summary',
-            viewDescription: 'Description',
         },
         cardDescriptor: {
             mainList: 'Main list',
@@ -957,5 +1211,9 @@ export default {
             addToPinned: 'Add to pinned',
             removeFromPinned: 'Remove from pinned',
         },
+        VnLv: {
+            copyText: '{copyValue} has been copied to the clipboard',
+        },
+        iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789',
     },
 };

src/i18n/es/index.js

@@ -24,6 +24,7 @@ export default {
         dataCreated: 'Datos creados',
         add: 'Añadir',
         create: 'Crear',
+        edit: 'Modificar',
         save: 'Guardar',
         remove: 'Eliminar',
         reset: 'Restaurar',
@@ -62,9 +63,26 @@ export default {
         selectRows: 'Seleccionar las { numberRows } filas(s)',
         allRows: 'Todo { numberRows } filas(s)',
         markAll: 'Marcar todo',
+        requiredField: 'Campo obligatorio',
+        class: 'clase',
+        type: 'Tipo',
+        reason: 'motivo',
         noResults: 'Sin resultados',
         system: 'Sistema',
-        results: 'resultados'
+        results: 'resultados',
+        warehouse: 'Almacén',
+        company: 'Empresa',
+        fieldRequired: 'Campo requerido',
+        allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }',
+        confirmDeletion: 'Confirmar eliminación',
+        confirmDeletionMessage: '¿Seguro que quieres eliminar?',
+        description: 'Descripción',
+        id: 'Id',
+        order: 'Orden',
+        original: 'Original',
+        file: 'Fichero',
+        selectFile: 'Seleccione un fichero',
+        copyClipboard: 'Copiar en portapapeles',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -72,7 +90,7 @@ export default {
         statusBadGateway: 'Parece ser que el servidor ha caído',
         statusGatewayTimeout: 'No se ha podido contactar con el servidor',
         userConfig: 'Error al obtener configuración de usuario',
-        create: 'Error al crear',
+        writeRequest: 'No se pudo completar la operación solicitada',
     },
     login: {
         title: 'Inicio de sesión',
@@ -132,6 +150,8 @@ export default {
             log: 'Historial',
             sms: 'Sms',
             creditManagement: 'Gestión de crédito',
+            creditContracts: 'Contratos de crédito',
+            creditOpinion: 'Opinión de crédito',
             others: 'Otros',
         },
         list: {
@@ -158,7 +178,7 @@ export default {
             fiscalAddress: 'Dirección fiscal',
             fiscalData: 'Datos fiscales',
             billingData: 'Datos de facturación',
-            consignee: 'Consignatario',
+            consignee: 'Consignatario pred.',
             businessData: 'Datos comerciales',
             financialData: 'Datos financieros',
             customerId: 'ID cliente',
@@ -211,6 +231,8 @@ export default {
             recoverySince: 'Recobro desde',
             businessType: 'Tipo de negocio',
             city: 'Población',
+            rating: 'Clasificación',
+            recommendCredit: 'Crédito recomendado',
         },
         basicData: {
             socialName: 'Nombre fiscal',
@@ -262,10 +284,129 @@ export default {
             entries: 'Entradas',
             list: 'Listado',
             summary: 'Resumen',
+            basicData: 'Datos básicos',
+            buys: 'Compras',
+            notes: 'Notas',
+            dms: 'Gestión documental',
+            log: 'Historial',
             create: 'Crear',
+            latestBuys: 'Últimas compras',
         },
         list: {
             newEntry: 'Nueva entrada',
+            landed: 'F. entrega',
+            invoiceNumber: 'Núm. factura',
+            supplier: 'Proveedor',
+            booked: 'Asentado',
+            confirmed: 'Confirmado',
+            ordered: 'Pedida',
+        },
+        summary: {
+            commission: 'Comisión',
+            currency: 'Moneda',
+            company: 'Empresa',
+            reference: 'Referencia',
+            invoiceNumber: 'Núm. factura',
+            ordered: 'Pedida',
+            confirmed: 'Confirmado',
+            booked: 'Asentado',
+            raid: 'Redada',
+            excludedFromAvailable: 'Inventario',
+            travelReference: 'Referencia',
+            travelAgency: 'Agencia',
+            travelShipped: 'F. envio',
+            travelWarehouseOut: 'Alm. salida',
+            travelDelivered: 'Enviada',
+            travelLanded: 'F. entrega',
+            travelWarehouseIn: 'Alm. entrada',
+            travelReceived: 'Recibida',
+            buys: 'Compras',
+            quantity: 'Cantidad',
+            stickers: 'Etiquetas',
+            package: 'Embalaje',
+            weight: 'Peso',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            buyingValue: 'Coste',
+            import: 'Importe',
+            pvp: 'PVP',
+            item: 'Artículo',
+        },
+        basicData: {
+            supplier: 'Proveedor',
+            travel: 'Envío',
+            reference: 'Referencia',
+            invoiceNumber: 'Núm. factura',
+            company: 'Empresa',
+            currency: 'Moneda',
+            observation: 'Observación',
+            commission: 'Comisión',
+            ordered: 'Pedida',
+            confirmed: 'Confirmado',
+            booked: 'Asentado',
+            raid: 'Redada',
+            excludedFromAvailable: 'Inventario',
+            agency: 'Agencia',
+            warehouseOut: 'Alm. salida',
+            warehouseIn: 'Alm. entrada',
+            shipped: 'F. envío',
+            landed: 'F. entrega',
+            id: 'ID',
+        },
+        buys: {
+            groupingPrice: 'Precio grouping',
+            packingPrice: 'Precio packing',
+            reference: 'Referencia',
+            observations: 'Observaciónes',
+            item: 'Artículo',
+            size: 'Medida',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            buyingValue: 'Coste',
+            packagingFk: 'Embalaje',
+            file: 'Fichero',
+            name: 'Nombre',
+            producer: 'Productor',
+            type: 'Tipo',
+            color: 'Color',
+            id: 'ID',
+        },
+        notes: {
+            observationType: 'Tipo de observación',
+        },
+        descriptor: {
+            agency: 'Agencia',
+            landed: 'F. entrega',
+            warehouseOut: 'Alm. salida',
+        },
+        latestBuys: {
+            picture: 'Foto',
+            itemFk: 'ID Artículo',
+            packing: 'Packing',
+            grouping: 'Grouping',
+            quantity: 'Cantidad',
+            size: 'Medida',
+            tags: 'Etiquetas',
+            type: 'Tipo',
+            intrastat: 'Intrastat',
+            origin: 'Origen',
+            weightByPiece: 'Peso (gramos)/tallo',
+            isActive: 'Activo',
+            family: 'Familia',
+            entryFk: 'Entrada',
+            buyingValue: 'Coste',
+            freightValue: 'Porte',
+            comissionValue: 'Comisión',
+            packageValue: 'Embalaje',
+            isIgnored: 'Ignorado',
+            price2: 'Grouping',
+            price3: 'Packing',
+            minPrice: 'Min',
+            ektFk: 'Ekt',
+            weight: 'Peso',
+            packagingFk: 'Embalaje',
+            packingOut: 'Embalaje envíos',
+            landing: 'Llegada',
         },
     },
     ticket: {
@@ -349,7 +490,6 @@ export default {
             visible: 'Visible',
             available: 'Disponible',
             quantity: 'Cantidad',
-            description: 'Descripción',
             price: 'Precio',
             discount: 'Descuento',
             packing: 'Encajado',
@@ -422,7 +562,6 @@ export default {
             landed: 'Entregado',
             quantity: 'Cantidad',
             claimed: 'Reclamado',
-            description: 'Descripción',
             price: 'Precio',
             discount: 'Descuento',
             total: 'Total',
@@ -438,6 +577,7 @@ export default {
             responsible: 'Responsable',
             worker: 'Trabajador',
             redelivery: 'Devolución',
+            returnOfMaterial: 'RMA',
         },
         basicData: {
             customer: 'Cliente',
@@ -592,7 +732,6 @@ export default {
             orderTicketList: 'Tickets del pedido',
             details: 'Detalles',
             item: 'Item',
-            description: 'Descripción',
             quantity: 'Cantidad',
             price: 'Precio',
             amount: 'Monto',
@@ -636,6 +775,7 @@ export default {
             vat: 'IVA',
             dueDay: 'Vencimiento',
             intrastat: 'Intrastat',
+            corrective: 'Rectificativa',
             log: 'Registros de auditoría',
         },
         list: {
@@ -827,6 +967,10 @@ export default {
         pageTitles: {
             routes: 'Rutas',
             cmrsList: 'Listado de CMRs externos',
+            RouteList: 'Listado',
+            create: 'Crear',
+            basicData: 'Datos básicos',
+            summary: 'Summary',
         },
         cmr: {
             list: {
@@ -897,6 +1041,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: {
@@ -920,7 +1130,10 @@ export default {
             entries: 'Entradas',
             cloneShipping: 'Clonar envío',
             CloneTravelAndEntries: 'Clonar travel y sus entradas',
+            deleteTravel: 'Eliminar envío',
             AddEntry: 'Añadir entrada',
+            thermographs: 'Termógrafos',
+            hb: 'HB',
         },
         variables: {
             search: 'Id/Referencia',
@@ -932,6 +1145,49 @@ export default {
             continent: 'Cont. Salida',
             totalEntries: 'Ent. totales',
         },
+        basicData: {
+            reference: 'Referencia',
+            agency: 'Agencia',
+            shipped: 'F. Envío',
+            landed: 'F. entrega',
+            warehouseOut: 'Alm. salida',
+            warehouseIn: 'Alm. entrada',
+            delivered: 'Enviada',
+            received: 'Recibida',
+        },
+        thermographs: {
+            code: 'Código',
+            temperature: 'Temperatura',
+            state: 'Estado',
+            destination: 'Destino',
+            created: 'Fecha creación',
+            thermograph: 'Termógrafo',
+            reference: 'Referencia',
+            type: 'Tipo',
+            company: 'Empresa',
+            warehouse: 'Almacén',
+            travelFileDescription: 'Id envío { travelId }',
+            file: 'Fichero',
+        },
+    },
+    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: {},
@@ -945,7 +1201,6 @@ export default {
             clone: 'Clonar',
             openCard: 'Ficha',
             openSummary: 'Detalles',
-            viewDescription: 'Descripción',
         },
         cardDescriptor: {
             mainList: 'Listado principal',
@@ -956,5 +1211,9 @@ export default {
             addToPinned: 'Añadir a fijados',
             removeFromPinned: 'Eliminar de fijados',
         },
+        VnLv: {
+            copyText: '{copyValue} se ha copiado al portapepeles',
+        },
+        iban_tooltip: 'IBAN: ES21 1234 5678 90 0123456789',
     },
 };

src/pages/Claim/Card/ClaimAction.vue

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

src/pages/Claim/Card/ClaimCard.vue

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

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toPercentage } from 'src/filters';
@@ -10,6 +10,7 @@ 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';
+import { getUrl } from 'src/composables/getUrl';
 
 const $props = defineProps({
     id: {
@@ -22,7 +23,7 @@ const $props = defineProps({
 const route = useRoute();
 const state = useState();
 const { t } = useI18n();
-
+const salixUrl = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
@@ -71,11 +72,10 @@ const filter = {
 };
 
 const STATE_COLOR = {
-    pending: 'positive',
-    managed: 'warning',
-    resolved: 'negative',
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
 };
-
 function stateColor(code) {
     return STATE_COLOR[code];
 }
@@ -85,6 +85,9 @@ const setData = (entity) => {
     data.value = useCardDescription(entity.client.name, entity.id);
     state.set('ClaimDescriptor', entity);
 };
+onMounted(async () => {
+    salixUrl.value = await getUrl('');
+});
 </script>
 
 <template>
@@ -145,7 +148,7 @@ const setData = (entity) => {
             />
             <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
             <VnLv
-                :label="t('claim.card.zone')"
+                :label="t('claimRate')"
                 :value="toPercentage(entity.client?.claimsRatio?.claimingRate)"
             />
         </template>
@@ -167,6 +170,20 @@ const setData = (entity) => {
                 >
                     <QTooltip>{{ t('claim.card.claimedTicket') }}</QTooltip>
                 </QBtn>
+                <QBtn
+                    size="md"
+                    icon="assignment"
+                    color="primary"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
+                >
+                </QBtn>
+                <QBtn
+                    size="md"
+                    icon="visibility"
+                    color="primary"
+                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
+                >
+                </QBtn>
             </QCardActions>
         </template>
     </CardDescriptor>
@@ -176,3 +193,9 @@ const setData = (entity) => {
     margin-top: 0;
 }
 </style>
+<i18n>
+    en:
+        claimRate: Claming rate
+    es:
+        claimRate: Ratio de reclamación
+</i18n>

src/pages/Claim/Card/ClaimLines.vue

@@ -4,14 +4,14 @@ 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';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -158,23 +158,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
@@ -232,7 +230,14 @@ function showImportDialog() {
                                 </QPopupEdit>
                             </QTd>
                         </template>
-
+                        <template #body-cell-description="{ row, value }">
+                            <QTd auto-width align="right" class="text-primary">
+                                {{ value }}
+                                <ItemDescriptorProxy
+                                    :id="row.sale.itemFk"
+                                ></ItemDescriptorProxy>
+                            </QTd>
+                        </template>
                         <template #body-cell-discount="{ row, value, rowIndex }">
                             <QTd auto-width align="right" class="text-primary">
                                 {{ value }}

src/pages/Claim/Card/ClaimNotes.vue

@@ -19,6 +19,12 @@ const claimFilter = {
         relation: 'worker',
         scope: {
             fields: ['id', 'firstName', 'lastName'],
+            include: {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'nickname'],
+                },
+            },
         },
     },
 };
@@ -30,7 +36,8 @@ const body = {
 </script>
 <template>
     <div class="column items-center">
-        <VnNotes style="overflow-y: scroll;"
+        <VnNotes
+            style="overflow-y: scroll"
             :add-note="$props.addNote"
             :id="id"
             url="claimObservations"

src/pages/Claim/Card/ClaimSummary.vue

@@ -10,6 +10,7 @@ import { useSession } from 'src/composables/useSession';
 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';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -34,7 +35,6 @@ const claimDmsFilter = ref({
             relation: 'dms',
         },
     ],
-    where: { claimFk: entityId.value },
 });
 
 onMounted(async () => {
@@ -42,11 +42,6 @@ onMounted(async () => {
     claimUrl.value = salixUrl.value + `claim/${entityId.value}/`;
 });
 
-watch(entityId, async (id) => {
-    claimDmsFilter.value.where = { claimFk: id };
-    await claimDmsRef.value.fetch();
-});
-
 const detailsColumns = ref([
     {
         name: 'item',
@@ -101,11 +96,9 @@ const detailsColumns = ref([
 ]);
 
 const STATE_COLOR = {
-    pending: 'positive',
-
-    managed: 'warning',
-
-    resolved: 'negative',
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
 };
 function stateColor(code) {
     return STATE_COLOR[code];
@@ -147,6 +140,11 @@ const claimDms = ref([]);
 const multimediaDialog = ref();
 const multimediaSlide = ref();
 
+async function getClaimDms() {
+    claimDmsFilter.value.where = { claimFk: entityId.value };
+    await claimDmsRef.value.fetch();
+}
+
 function setClaimDms(data) {
     claimDms.value = [];
     data.forEach((media) => {
@@ -169,11 +167,13 @@ function openDialog(dmsId) {
         url="ClaimDms"
         :filter="claimDmsFilter"
         @on-fetch="(data) => setClaimDms(data)"
-        limit="20"
-        auto-load
         ref="claimDmsRef"
     />
-    <CardSummary ref="summary" :url="`Claims/${entityId}/getSummary`">
+    <CardSummary
+        ref="summary"
+        :url="`Claims/${entityId}/getSummary`"
+        @on-fetch="getClaimDms"
+    >
         <template #header="{ entity: { claim } }">
             {{ claim.id }} - {{ claim.client.name }}
         </template>
@@ -210,15 +210,29 @@ function openDialog(dmsId) {
                         />
                     </template>
                 </VnLv>
+                <VnLv :label="t('claim.summary.customer')">
+                    <template #value>
+                        <VnUserLink
+                            :name="claim.client?.name"
+                            :worker-id="claim.client?.id"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('claim.summary.returnOfMaterial')" :value="claim.rma" />
+                <QCheckbox
+                    :align-items="right"
+                    :label="t('claim.basicData.picked')"
+                    v-model="claim.hasToPickUp"
+                />
             </QCard>
-            <QCard class="vn-max claimVnNotes">
+            <QCard class="vn-three claimVnNotes full-height">
                 <a class="header" :href="`#/claim/${entityId}/notes`">
                     {{ t('claim.summary.notes') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
                 <ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
             </QCard>
-            <QCard class="vn-max" v-if="salesClaimed.length > 0">
+            <QCard class="vn-two" v-if="salesClaimed.length > 0">
                 <a class="header" :href="`#/claim/${entityId}/lines`">
                     {{ t('claim.summary.details') }}
                     <QIcon name="open_in_new" color="primary" />
@@ -231,6 +245,41 @@ function openDialog(dmsId) {
                             </QTh>
                         </QTr>
                     </template>
+                    <template #body="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                <span v-if="col.name != 'description'">{{
+                                    t(col.value)
+                                }}</span>
+                                <QBtn
+                                    v-if="col.name == 'description'"
+                                    flat
+                                    color="blue"
+                                    >{{ col.value }}</QBtn
+                                >
+                                <ItemDescriptorProxy
+                                    v-if="col.name == 'description'"
+                                    :id="props.row.id"
+                                    :sale-fk="props.row.saleFk"
+                                ></ItemDescriptorProxy>
+                            </QTh>
+                        </QTr>
+                    </template>
+                </QTable>
+            </QCard>
+            <QCard class="vn-two" v-if="developments.length > 0">
+                <a class="header" :href="claimUrl + 'development'">
+                    {{ t('claim.summary.development') }}
+                    <QIcon name="open_in_new" color="primary" />
+                </a>
+                <QTable :columns="developmentColumns" :rows="developments" flat>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
+                    </template>
                 </QTable>
             </QCard>
             <QCard class="vn-max" v-if="claimDms.length > 0">
@@ -275,22 +324,8 @@ function openDialog(dmsId) {
                     </div>
                 </div>
             </QCard>
-            <QCard class="vn-two" v-if="developments.length > 0">
-                <a class="header" :href="claimUrl + 'development'">
-                    {{ t('claim.summary.development') }}
-                    <QIcon name="open_in_new" color="primary" />
-                </a>
-                <QTable :columns="developmentColumns" :rows="developments" flat>
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
-            <QCard class="vn-max" v-if="developments.length > 0">
+
+            <QCard class="vn-max">
                 <a class="header" :href="claimUrl + 'action'">
                     {{ t('claim.summary.actions') }}
                     <QIcon name="open_in_new" color="primary" />

src/pages/Claim/ClaimFilter.vue

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

src/pages/Claim/ClaimList.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useQuasar } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
@@ -9,35 +8,33 @@ import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import ClaimFilter from './ClaimFilter.vue';
 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 VnUserLink from 'src/components/ui/VnUserLink.vue';
+import ClaimSummary from './Card/ClaimSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { getUrl } from 'src/composables/getUrl';
 
 const stateStore = useStateStore();
 const router = useRouter();
-const quasar = useQuasar();
 const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
 
 const STATE_COLOR = {
-    pending: 'positive',
-    managed: 'warning',
-    resolved: 'negative',
+    pending: 'warning',
+    managed: 'info',
+    resolved: 'positive',
 };
+function getApiUrl() {
+    return new URL(window.location).origin;
+}
 function stateColor(code) {
     return STATE_COLOR[code];
 }
-function navigate(id) {
+function navigate(event, id) {
+    if (event.ctrlKey || event.metaKey)
+        return window.open(`${getApiUrl()}/#/claim/${id}/summary`);
     router.push({ path: `/claim/${id}` });
 }
-
-function viewSummary(id) {
-    quasar.dialog({
-        component: ClaimSummaryDialog,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
@@ -71,11 +68,11 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ClaimList"
                 url="Claims/filter"
-                order="claimStateFk"
+                :order="['priority ASC', 'created DESC']"
                 auto-load
             >
                 <template #body="{ rows }">
@@ -83,11 +80,11 @@ function viewSummary(id) {
                         :id="row.id"
                         :key="row.id"
                         :title="row.clientName"
-                        @click="navigate(row.id)"
+                        @click="navigate($event, row.id)"
                         v-for="row of rows"
                     >
                         <template #list-items>
-                            <VnLv :label="t('claim.list.customer')" @click.stop>
+                            <VnLv :label="t('claim.list.customer')">
                                 <template #value>
                                     <span class="link" @click.stop>
                                         {{ row.clientName }}
@@ -125,7 +122,7 @@ function viewSummary(id) {
                                 outline
                             />
                             <QBtn
-                                :label="t('components.smartCard.viewDescription')"
+                                :label="t('globals.description')"
                                 @click.stop
                                 class="bg-vn-dark"
                                 outline
@@ -135,7 +132,7 @@ function viewSummary(id) {
                             </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id)"
+                                @click.stop="viewSummary(row.id, ClaimSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />
@@ -147,13 +144,6 @@ function viewSummary(id) {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search claim: Buscar reclamación

src/pages/Claim/ClaimRmaList.vue

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

src/pages/Customer/Card/CustomerBalance.vue

@@ -1,3 +1,282 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { date, QCheckbox, QBtn, useQuasar } from 'quasar';
+
+import { toCurrency } from 'src/filters';
+import { useStateStore } from 'stores/useStateStore';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const quasar = useQuasar();
+const stateStore = useStateStore();
+
+const clientRisks = ref(null);
+const companiesOptions = ref([]);
+const companyId = ref(442);
+const rows = ref(null);
+const workerId = ref(0);
+const receiptsRef = ref(null);
+const clientRisksRef = ref(null);
+
+const filterCompanies = { order: ['code'] };
+const params = {
+    clientId: `${route.params.id}`,
+    companyId: companyId.value,
+    filter: { limit: 20 },
+};
+const filter = {
+    include: { relation: 'company', scope: { fields: ['code'] } },
+    where: { clientFk: `${route.params.id}`, companyFk: companyId.value },
+};
+
+const tableColumnComponents = {
+    payed: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    created: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    userName: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            workerId.value = prop.row.clientFk;
+        },
+    },
+    description: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    bankFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    debit: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    credit: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    balance: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    isConciliate: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'payed',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY'),
+        label: t('Date'),
+        name: 'payed',
+    },
+    {
+        align: 'left',
+        field: 'created',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm'),
+        label: t('Creation date'),
+        name: 'created',
+    },
+    {
+        align: 'left',
+        field: 'userName',
+        label: t('Employee'),
+        name: 'userName',
+    },
+    {
+        align: 'left',
+        field: 'description',
+        label: t('Reference'),
+        name: 'description',
+    },
+    {
+        align: 'left',
+        field: 'bankFk',
+        label: t('Bank'),
+        name: 'bankFk',
+    },
+    {
+        align: 'left',
+        field: 'debit',
+        label: t('Debit'),
+        name: 'debit',
+    },
+    {
+        align: 'left',
+        field: 'credit',
+        format: (value) => toCurrency(value),
+        label: t('Havings'),
+        name: 'credit',
+    },
+    {
+        align: 'left',
+        field: (value) => value.debit - value.credit,
+        format: (value) => toCurrency(value),
+        label: t('Balance'),
+        name: 'balance',
+    },
+    {
+        align: 'left',
+        field: 'isConciliate',
+        label: t('Conciliated'),
+        name: 'isConciliate',
+    },
+]);
+
+const getData = () => {
+    stateStore.rightDrawer = true;
+    receiptsRef.value?.fetch();
+    clientRisksRef.value?.fetch();
+};
+
+const showNewPaymentDialog = () => {
+    quasar.dialog({
+        component: CustomerNewPayment,
+        componentProps: {
+            companyId: companyId.value,
+            totalCredit: clientRisks.value[0]?.amount,
+            promise: getData,
+        },
+    });
+};
+
+const updateCompanyId = (id) => {
+    if (id) companyId.value = id;
+    getData();
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Balance</div>
+    <FetchData
+        :filter="filterCompanies"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+        url="Companies"
+    />
+    <FetchData
+        :params="params"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        ref="receiptsRef"
+        url="Receipts/filter"
+    />
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (clientRisks = data)"
+        auto-load
+        ref="clientRisksRef"
+        url="ClientRisks"
+    />
+
+    <QTable
+        :columns="columns"
+        :pagination="{ rowsPerPage: 12 }"
+        :rows="rows"
+        class="full-width q-mt-md"
+        row-key="id"
+        v-if="rows?.length"
+    >
+        <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)"
+                    >
+                        <template v-if="props.col.name !== 'isConciliate'">
+                            {{ props.value }}
+                        </template>
+                        <WorkerDescriptorProxy :id="workerId" />
+                    </component>
+                </QTr>
+            </QTd>
+        </template>
+    </QTable>
+
+    <h5 class="flex justify-center label-color" v-else>
+        {{ t('globals.noResults') }}
+    </h5>
+
+    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
+        <div class="q-mt-xl q-px-md">
+            <VnSelectFilter
+                :label="t('Company')"
+                :options="companiesOptions"
+                @update:model-value="updateCompanyId($event)"
+                hide-selected
+                option-label="code"
+                option-value="id"
+                v-model="companyId"
+            />
+        </div>
+
+        <QCard class="q-ma-md q-pa-md q-mt-lg" v-if="rows?.length">
+            <QCardSection>
+                <div class="flex justify-center text-subtitle1 text-bold">
+                    {{ t('Total by company') }}
+                </div>
+                <div class="flex justify-center">
+                    <div class="q-mr-sm" v-if="clientRisks?.length">
+                        {{ clientRisks[0].company.code }}:
+                    </div>
+                    <div v-if="clientRisks?.length">
+                        {{ toCurrency(clientRisks[0].amount) }}
+                    </div>
+                </div>
+            </QCardSection>
+        </QCard>
+    </QDrawer>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="showNewPaymentDialog()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New payment') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<i18n>
+es:
+    Company: Empresa
+    Total by company: Total por empresa
+    New payment: Añadir pago
+    Date: Fecha
+    Creation date: Fecha de creación
+    Employee: Empleado
+    Reference: Referencia
+    Bank: Caja
+    Debit: Debe
+    Havings: Haber
+    Balance: Balance
+    Conciliated: Conciliado
+</i18n>

src/pages/Customer/Card/CustomerBillingData.vue

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

src/pages/Customer/Card/CustomerConsignees.vue

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

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

src/pages/Customer/Card/CustomerCreditOpinion.vue

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

src/pages/Customer/Card/CustomerCredits.vue

@@ -1,3 +1,139 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date, QBtn } from 'quasar';
+
+import { toCurrency } 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);
+const rows = computed(() => arrayData.value.store.data);
+
+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;
+});
+
+const tableColumnComponents = {
+    created: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    employee: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            selectWorkerId(prop.row.clientFk);
+        },
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'created',
+        label: t('Since'),
+        name: 'created',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm:ss'),
+    },
+    {
+        align: 'left',
+        field: (value) => value.worker.user.name,
+        label: t('Employee'),
+        name: 'employee',
+    },
+    {
+        align: 'left',
+        field: 'amount',
+        label: t('Credit'),
+        name: 'amount',
+        format: (value) => toCurrency(value),
+    },
+]);
+
+const selectWorkerId = (id) => {
+    workerId.value = id;
+};
+
+const toCustomerCreditCreate = () => {
+    router.push({ name: 'CustomerCreditCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Credits</div>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                            class="rounded-borders q-pa-sm"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                        >
+                            {{ props.value }}
+                            <WorkerDescriptorProxy :id="workerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerCreditCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New credit') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<i18n>
+es:
+    Since: Desde
+    Employee: Empleado
+    Credit: Credito
+    New credit: Nuevo credito
+</i18n>

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -19,10 +19,8 @@ const $props = defineProps({
         default: null,
     },
 });
-
 const route = useRoute();
 const { t } = useI18n();
-
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });

src/pages/Customer/Card/CustomerDescriptorProxy.vue

@@ -1,6 +1,6 @@
 <script setup>
 import CustomerDescriptor from './CustomerDescriptor.vue';
-import CustomerSummaryDialog from './CustomerSummaryDialog.vue';
+import CustomerSummary from './CustomerSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -12,10 +12,6 @@ const $props = defineProps({
 
 <template>
     <QPopupProxy>
-        <CustomerDescriptor
-            v-if="$props.id"
-            :id="$props.id"
-            :summary="CustomerSummaryDialog"
-        />
+        <CustomerDescriptor v-if="$props.id" :id="$props.id" :summary="CustomerSummary" />
     </QPopupProxy>
 </template>

src/pages/Customer/Card/CustomerFiscalData.vue

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

src/pages/Customer/Card/CustomerGreuges.vue

@@ -1,3 +1,202 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date, QBtn } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+
+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 totalAmount = ref(0);
+const workerId = ref(0);
+const rows = computed(() => arrayData.value.store.data);
+
+onBeforeMount(async () => {
+    const filter = {
+        include: [
+            {
+                relation: 'greugeType',
+                scope: {
+                    fields: ['id', 'name'],
+                },
+            },
+            {
+                relation: 'user',
+                scope: {
+                    fields: ['id', 'name'],
+                },
+            },
+        ],
+        order: 'shipped DESC, amount',
+        where: {
+            clientFk: `${route.params.id}`,
+        },
+        limit: 20,
+    };
+
+    arrayData.value = useArrayData('CustomerGreugesCard', {
+        url: 'greuges',
+        filter,
+    });
+    await arrayData.value.fetch({ append: false });
+    totalAmount.value = arrayData.value.store.data.reduce((accumulator, currentValue) => {
+        return accumulator + currentValue.amount;
+    }, 0);
+    stateStore.rightDrawer = true;
+});
+
+const tableColumnComponents = {
+    date: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    createdBy: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            selectWorkerId(prop.row.clientFk);
+        },
+    },
+    comment: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    type: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'shipped',
+        label: t('Date'),
+        name: 'date',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm:ss'),
+    },
+    {
+        align: 'left',
+        field: (value) => value.user.name,
+        label: t('Created by'),
+        name: 'createdBy',
+    },
+    {
+        align: 'left',
+        field: 'description',
+        label: t('Comment'),
+        name: 'comment',
+    },
+    {
+        align: 'left',
+        field: (value) => value.greugeType.name,
+        label: t('Type'),
+        name: 'type',
+    },
+    {
+        align: 'left',
+        field: 'amount',
+        label: t('Amount'),
+        name: 'amount',
+        format: (value) => toCurrency(value),
+    },
+]);
+
+const selectWorkerId = (id) => {
+    workerId.value = id;
+};
+
+const toCustomerGreugeCreate = () => {
+    router.push({ name: 'CustomerGreugeCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Greuges</div>
+    <QPage class="column items-center q-pa-md">
+        <QCard class="full-width" v-if="totalAmount">
+            <h6 class="flex justify-end q-my-lg q-pr-lg">
+                <span class="label-color q-mr-md">{{ t('Total') }}:</span>
+                {{ toCurrency(totalAmount) }}
+            </h6>
+        </QCard>
+
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+            v-if="rows?.length"
+        >
+            <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 :id="workerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+
+        <QCard class="full-width" v-else>
+            <h5 class="flex justify-center label-color">
+                {{ t('globals.noResults') }}
+            </h5>
+        </QCard>
+    </QPage>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerGreugeCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New greuge') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss">
+.consignees-card {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.label-color {
+    color: var(--vn-label);
+}
+</style>
+
+<i18n>
+es:
+    Total: Total
+    Date: Fecha
+    Created by: Creado por
+    Comment: Comentario
+    Type: Tipo
+    Amount: Importe
+    New greuge: Nuevo greuge
+</i18n>

src/pages/Customer/Card/CustomerLog.vue

@@ -1,3 +1,262 @@
+<script setup>
+import { onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { useStateStore } from 'stores/useStateStore';
+
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const stateStore = useStateStore();
+
+const clientLogs = ref(null);
+const urlClientLogsEditors = ref(null);
+const urlClientLogsModels = ref(null);
+const clientLogsModelsOptions = ref([]);
+const clientLogsOptions = ref([]);
+const clientLogsEditorsOptions = ref([]);
+const radioButtonValue = ref('all');
+const insert = ref(false);
+const update = ref(false);
+const deletes = ref(false);
+const select = ref(false);
+const neq = ref(null);
+const inq = ref([]);
+
+const filterClientLogs = {
+    fields: [
+        'id',
+        'originFk',
+        'userFk',
+        'action',
+        'changedModel',
+        'oldInstance',
+        'newInstance',
+        'creationDate',
+        'changedModel',
+        'changedModelId',
+        'changedModelValue',
+        'description',
+    ],
+    include: [
+        {
+            relation: 'user',
+            scope: {
+                fields: ['nickname', 'name', 'image'],
+                include: { relation: 'worker', scope: { fields: ['id'] } },
+            },
+        },
+    ],
+    order: ['creationDate DESC', 'id DESC'],
+    limit: 20,
+};
+const filterClientLogsEditors = {
+    fields: ['id', 'nickname', 'name', 'image'],
+    order: 'nickname',
+    limit: 30,
+};
+const filterClientLogsModels = { order: ['changedModel'] };
+const urlBase = `ClientLogs/${route.params.id}`;
+
+onBeforeMount(() => {
+    stateStore.rightDrawer = true;
+    filterClientLogs.where = {
+        and: [
+            { originFk: `${route.params.id}` },
+            { userFk: { neq: radioButtonValue.value } },
+            { action: { inq: inq.value } },
+        ],
+    };
+    urlClientLogsEditors.value = `${urlBase}/editors`;
+    urlClientLogsModels.value = `${urlBase}/models`;
+});
+
+const getClientLogs = async (value, status) => {
+    if (status === 'neq') {
+        neq.value = value;
+    } else {
+        setInq(value, status);
+    }
+    filterClientLogs.where = {
+        and: [
+            { originFk: `${route.params.id}` },
+            { userFk: { neq: neq.value } },
+            { action: { inq: inq.value } },
+        ],
+    };
+    clientLogs.value?.fetch();
+};
+
+const setInq = (value, status) => {
+    if (status) {
+        if (!inq.value.includes(value)) {
+            inq.value.push(value);
+        }
+    } else {
+        inq.value = inq.value.filter((item) => item !== value);
+    }
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Log</div>
+    <FetchData
+        :filter="filterClientLogs"
+        @on-fetch="(data) => (clientLogsOptions = data)"
+        auto-load
+        url="ClientLogs"
+        ref="clientLogs"
+    />
+    <FetchData
+        :filter="filterClientLogsEditors"
+        @on-fetch="(data) => (clientLogsEditorsOptions = data)"
+        auto-load
+        :url="urlClientLogsEditors"
+    />
+    <FetchData
+        :filter="filterClientLogsModels"
+        @on-fetch="(data) => (clientLogsModelsOptions = data)"
+        auto-load
+        :url="urlClientLogsModels"
+    />
+
+    <h5 class="flex justify-center label-color">
+        {{ t('globals.noResults') }}
+    </h5>
+
+    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
+        <div class="q-mt-sm q-px-md">
+            <VnInput :label="t('Search')">
+                <template #append>
+                    <QIcon name="info" class="cursor-pointer">
+                        <QTooltip>
+                            {{ t('Search by id or concept') }}
+                        </QTooltip>
+                    </QIcon>
+                </template>
+            </VnInput>
+            <VnSelectFilter
+                :label="t('Entity')"
+                :options="[]"
+                class="q-mt-md"
+                hide-selected
+                option-label="name"
+                option-value="id"
+            />
+
+            <div class="q-mt-lg">
+                <QRadio
+                    :dark="true"
+                    :label="t('All')"
+                    @update:model-value="getClientLogs($event, 'neq')"
+                    dense
+                    v-model="radioButtonValue"
+                    val="all"
+                />
+            </div>
+            <div class="q-mt-md">
+                <QRadio
+                    :dark="true"
+                    :label="t('User')"
+                    @update:model-value="getClientLogs($event, 'neq')"
+                    dense
+                    v-model="radioButtonValue"
+                    val="user"
+                />
+            </div>
+            <div class="q-mt-md">
+                <QRadio
+                    :dark="true"
+                    :label="t('System')"
+                    @update:model-value="getClientLogs($event, 'neq')"
+                    dense
+                    v-model="radioButtonValue"
+                    val="system"
+                />
+            </div>
+
+            <VnSelectFilter
+                :label="t('User')"
+                :options="[]"
+                class="q-mt-sm"
+                hide-selected
+                option-label="name"
+                option-value="id"
+            />
+            <VnInput :label="t('Changes')" class="q-mt-sm">
+                <template #append>
+                    <QIcon name="info" class="cursor-pointer">
+                        <QTooltip>
+                            {{ t('Search by changes') }}
+                        </QTooltip>
+                    </QIcon>
+                </template>
+            </VnInput>
+
+            <div class="q-mt-md">
+                <QCheckbox
+                    :label="t('Creates')"
+                    @update:model-value="getClientLogs('insert', $event)"
+                    v-model="insert"
+                />
+            </div>
+            <div>
+                <QCheckbox
+                    :label="t('Edits')"
+                    @update:model-value="getClientLogs('update', $event)"
+                    v-model="update"
+                />
+            </div>
+            <div>
+                <QCheckbox
+                    :label="t('Deletes')"
+                    @update:model-value="getClientLogs('delete', $event)"
+                    v-model="deletes"
+                />
+            </div>
+            <div>
+                <QCheckbox
+                    :label="t('Accesses')"
+                    @update:model-value="getClientLogs('select', $event)"
+                    v-model="select"
+                />
+            </div>
+
+            <VnInputDate :label="t('Date')" class="q-mt-sm" />
+            <VnInput :label="t('To')" class="q-mt-md" />
+        </div>
+    </QDrawer>
+
+    <QPageSticky
+        :offset="[18, 18]"
+        v-if="radioButtonValue !== 'all' || insert || update || deletes || select"
+    >
+        <QBtn color="primary" fab icon="filter_alt_off" />
+        <QTooltip>
+            {{ t('Quit filter') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<i18n>
+es:
+    Search: Buscar
+    Search by id or concept: xxx
+    Entity: Entidad
+    All: Todo
+    User: Usuario
+    System: Sistema
+    Changes: Cambios
+    Search by changes: xxx
+    Creates: Crea
+    Edits: Modifica
+    Deletes: Elimina
+    Accesses: Accede
+    Date: Fecha
+    To: Hasta
+    Quit filter: Quitar filtro
+</i18n>

src/pages/Customer/Card/CustomerNotes.vue

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

@@ -1,3 +1,157 @@
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { date, QBtn } from 'quasar';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'src/filters';
+
+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);
+const rows = computed(() => arrayData.value.store.data);
+
+onBeforeMount(async () => {
+    const filter = {
+        where: { clientFk: `${route.params.id}` },
+        order: ['started DESC'],
+        limit: 20,
+    };
+
+    arrayData.value = useArrayData('CustomerRecoveriesCard', {
+        url: 'Recoveries',
+        filter,
+    });
+    await arrayData.value.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
+
+const tableColumnComponents = {
+    since: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    to: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    amount: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    period: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'started',
+        label: t('Since'),
+        name: 'since',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY'),
+    },
+    {
+        align: 'left',
+        field: 'finished',
+        label: t('To'),
+        name: 'to',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY'),
+    },
+    {
+        align: 'left',
+        field: 'amount',
+        label: t('Amount'),
+        name: 'amount',
+        format: (value) => toCurrency(value),
+    },
+    {
+        align: 'left',
+        field: 'period',
+        label: t('Period'),
+        name: 'period',
+    },
+]);
+
+const toCustomerRecoverieCreate = () => {
+    router.push({ name: 'CustomerRecoverieCreate' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Recoveries</div>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 12 }"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+            v-if="rows?.length"
+        >
+            <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 :id="workerId" />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+
+        <QCard class="full-width" v-else>
+            <h5 class="flex justify-center label-color">
+                {{ t('globals.noResults') }}
+            </h5>
+        </QCard>
+    </QPage>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerRecoverieCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New recoverie') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss">
+.consignees-card {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.label-color {
+    color: var(--vn-label);
+}
+</style>
+
+<i18n>
+es:
+    Since: Desde
+    To: Hasta
+    Amount: Importe
+    Period: Periodo
+    New recoverie: Nuevo recobro
+</i18n>

src/pages/Customer/Card/CustomerSummary.vue

@@ -62,7 +62,7 @@ const creditWarning = computed(() => {
     <CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
         <template #body="{ entity }">
             <QCard class="vn-one">
-                <a class="header" :href="clientUrl + `basic-data`">
+                <a class="header" :href="`#/customer/${entityId}/basic-data`">
                     {{ t('customer.summary.basicData') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
@@ -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"
@@ -96,7 +96,7 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a class="header" :href="clientUrl + `fiscal-data`">
+                <a class="header" :href="`#/customer/${entityId}/fiscal-data`">
                     {{ t('customer.summary.fiscalAddress') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
@@ -121,8 +121,8 @@ const creditWarning = computed(() => {
                 <VnLv :label="t('customer.summary.street')" :value="entity.street" />
             </QCard>
             <QCard class="vn-one">
-                <a class="header link" :href="clientUrl + `fiscal-data`" link>
-                    {{ t('customer.summary.fiscalAddress') }}
+                <a class="header link" :href="`#/customer/${entityId}/fiscal-data`" link>
+                    {{ t('customer.summary.fiscalData') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
                 <VnLv
@@ -149,7 +149,7 @@ const creditWarning = computed(() => {
                 <VnLv :label="t('customer.summary.vies')" :value="entity.isVies" />
             </QCard>
             <QCard class="vn-one">
-                <a class="header link" :href="clientUrl + `billing-data`" link>
+                <a class="header link" :href="`#/customer/${entityId}/billing-data`" link>
                     {{ t('customer.summary.billingData') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
@@ -170,7 +170,7 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.defaultAddress">
-                <a class="header link" :href="clientUrl + `address/index`" link>
+                <a class="header link" :href="`#/customer/${entityId}/consignees`" link>
                     {{ t('customer.summary.consignee') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
@@ -188,7 +188,7 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
-                <a class="header link" :href="clientUrl + `web-access`">
+                <a class="header link" :href="`#/customer/${entityId}/web-access`">
                     {{ t('customer.summary.webAccess') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
@@ -235,7 +235,8 @@ const creditWarning = computed(() => {
                     link
                 >
                     {{ t('customer.summary.financialData') }}
-                    <QIcon name="vn:grafana" color="primary" />
+                    <QIcon name="open_in_new" color="primary" />
+                    <!-- Pendiente de añadir el icono <QIcon name="vn:grafana" color="primary" /> -->
                 </a>
                 <VnLv
                     :label="t('customer.summary.risk')"
@@ -276,7 +277,30 @@ const creditWarning = computed(() => {
                     :label="t('customer.summary.recoverySince')"
                     :value="toDate(entity.recovery.started)"
                 />
+                <VnLv
+                    :label="t('customer.summary.rating')"
+                    :value="entity.rating"
+                    :info="t('valueInfo', { min: 1, max: 20 })"
+                />
+
+                <VnLv
+                    :label="t('customer.summary.recommendCredit')"
+                    :value="entity.recommendedCredit"
+                />
             </QCard>
         </template>
     </CardSummary>
 </template>
+<style lang="scss" scoped>
+@media (min-width: $breakpoint-md) {
+    .summary .vn-one {
+        min-width: 300px;
+    }
+}
+</style>
+<i18n>
+en:
+    valueInfo: Value from {min} to {max}. The higher the better value
+es:
+    valueInfo: Valor de {min} a {max}. Cuanto más alto, mejor valor
+</i18n>

src/pages/Customer/Card/CustomerSummaryDialog.vue

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

src/pages/Customer/Card/CustomerWebAccess.vue

@@ -1,3 +1,69 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const filter = { where: { id: `${route.params.id}` } };
+</script>
+
 <template>
-    <div class="flex justify-center">Web access</div>
+    <FormModel
+        :filter="filter"
+        :observe-form-changes="false"
+        :url-update="`Clients/${route.params.id}/updateUser`"
+        :url="'VnUsers/preview'"
+        model="client"
+    >
+        <template #form="{ data }">
+            <div
+                v-for="(item, index) in data"
+                :key="index"
+                :class="{
+                    'q-mb-md': index < data.length - 1,
+                }"
+            >
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QCheckbox
+                            :label="t('Enable web access')"
+                            v-model="item.active"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput :label="t('User')" v-model="item.name" />
+                    </div>
+                    <div class="col">
+                        <VnInput :label="t('Recovery email')" v-model="item.email">
+                            <template #append>
+                                <QIcon name="info" class="cursor-pointer">
+                                    <QTooltip>{{
+                                        t(
+                                            'This email is used for user to regain access their account'
+                                        )
+                                    }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </VnInput>
+                    </div>
+                </VnRow>
+            </div>
+        </template>
+    </FormModel>
 </template>
+
+<i18n>
+es:
+    Enable web access: Habilitar acceso web
+    User: Usuario
+    Recovery email: Correo de recuperacion
+    This email is used for user to regain access their account: Este correo electrónico se usa para que el usuario recupere el acceso a su cuenta
+</i18n>

src/pages/Customer/CustomerCreate.vue

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

src/pages/Customer/CustomerFilter.vue

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