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

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"]	
+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.8.0",
+    "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,12 +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",
@@ -30,11 +31,11 @@
     "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",
+        "cypress": "^13.6.6",
         "eslint": "^8.41.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-cypress": "^2.13.3",
@@ -46,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"
     }
 }

quasar.config.js

@@ -67,7 +67,7 @@ module.exports = configure(function (/* ctx */) {
             // analyze: true,
             // env: {},
             rawDefine: {
-                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
             },
             // ignorePublicFolder: true,
             // minify: false,
@@ -92,7 +92,7 @@ module.exports = configure(function (/* ctx */) {
             vitePlugins: [
                 [
                     VueI18nPlugin({
-                        runtimeOnly: false
+                        runtimeOnly: false,
                     }),
                     {
                         // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
@@ -123,9 +123,6 @@ module.exports = configure(function (/* ctx */) {
         framework: {
             config: {
                 config: {
-                    brand: {
-                        primary: 'orange',
-                    },
                     dark: 'auto',
                 },
             },

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,
                 },
@@ -317,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

@@ -272,7 +272,7 @@ const makeRequest = async () => {
                                         class="cursor-pointer q-mr-sm"
                                         @click="openInputFile()"
                                     >
-                                        <!-- <QTooltip>{{ t('Select a file') }}</QTooltip> -->
+                                        <!-- <QTooltip>{{ t('globals.selectFile') }}</QTooltip> -->
                                     </QIcon>
                                     <QIcon name="info" class="cursor-pointer">
                                         <QTooltip>{{

src/components/FetchData.vue

@@ -59,11 +59,4 @@ async function fetch(fetchFilter = {}) {
         //
     }
 }
-
-const render = () => {
-    return h('div', []);
-};
 </script>
-<template>
-    <render />
-</template>

src/components/FormModel.vue

@@ -1,6 +1,7 @@
 <script setup>
 import axios from 'axios';
 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']);
@@ -75,9 +81,8 @@ onMounted(async () => {
     });
 
     // 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();
     }
 
@@ -90,6 +95,19 @@ onMounted(async () => {
     }
 });
 
+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);
 });
@@ -138,17 +156,20 @@ async function save() {
     try {
         const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
         let response;
-        if ($props.urlCreate) {
-            response = await axios.post($props.urlCreate, body);
-            notify('globals.dataCreated', 'positive');
-        } else {
-            response = await axios.patch($props.urlUpdate || $props.url, body);
-        }
+        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;
 }
@@ -249,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/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/VnInputDate.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { toDate } from 'src/filters';
+import VnInput from 'components/common/VnInput.vue';
+import isValidDate from "filters/isValidDate";
 
 const props = defineProps({
     modelValue: {
@@ -17,12 +18,25 @@ const props = defineProps({
     },
 });
 const emit = defineEmits(['update:modelValue']);
+
+const joinDateAndTime = (date, time) => {
+    if (!date) {
+        return null;
+    }
+    if (!time) {
+        return new Date(date).toISOString();
+    }
+    const [year, month, day] = date.split('/');
+    return new Date(`${year}-${month}-${day}T${time}`).toISOString();
+};
+
+const time = computed(() => (props.modelValue ? props.modelValue.split('T')?.[1] : null));
 const value = computed({
     get() {
         return props.modelValue;
     },
     set(value) {
-        emit('update:modelValue', value ? new Date(value).toISOString() : null);
+        emit('update:modelValue', joinDateAndTime(value, time.value));
     },
 });
 
@@ -40,6 +54,16 @@ const formatDate = (dateString) => {
         date.getDate()
     )}`;
 };
+const displayDate = (dateString) => {
+    if (!dateString || !isValidDate(dateString)) {
+        return '';
+    }
+    return new Date(dateString).toLocaleDateString([], {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    });
+};
 
 const styleAttrs = computed(() => {
     return props.isOutlined
@@ -53,12 +77,12 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <QInput
+    <VnInput
         class="vn-input-date"
-        rounded
-        readonly
-        :model-value="toDate(value)"
+        :model-value="displayDate(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
+        readonly
+        @click="isPopupOpen = true"
     >
         <template #append>
             <QIcon name="event" class="cursor-pointer">
@@ -76,7 +100,7 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </QInput>
+    </VnInput>
 </template>
 
 <style lang="scss">

src/components/common/VnInputTime.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { toHour } from 'src/filters';
 import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
+import VnInput from "components/common/VnInput.vue";
 
 const props = defineProps({
     modelValue: {
@@ -26,8 +26,8 @@ const value = computed({
     },
     set(value) {
         const [hours, minutes] = value.split(':');
-        const date = new Date();
-        date.setUTCHours(
+        const date = new Date(props.modelValue);
+        date.setHours(
             Number.parseInt(hours) || 0,
             Number.parseInt(minutes) || 0,
             0,
@@ -37,6 +37,7 @@ const value = computed({
     },
 });
 
+const isPopupOpen = ref(false);
 const onDateUpdate = (date) => {
     internalValue.value = date;
 };
@@ -45,7 +46,7 @@ const save = () => {
     value.value = internalValue.value;
 };
 const formatTime = (dateString) => {
-    if (!isValidDate(dateString)) {
+    if (!dateString || !isValidDate(dateString)) {
         return '';
     }
 
@@ -70,16 +71,17 @@ const styleAttrs = computed(() => {
 </script>
 
 <template>
-    <QInput
+    <VnInput
         class="vn-input-time"
-        rounded
         readonly
-        :model-value="toHour(value)"
+        :model-value="formatTime(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
+        @click="isPopupOpen = true"
     >
         <template #append>
             <QIcon name="event" class="cursor-pointer">
                 <QPopupProxy
+                    v-model="isPopupOpen"
                     cover
                     transition-show="scale"
                     transition-hide="scale"
@@ -109,7 +111,7 @@ const styleAttrs = computed(() => {
                 </QPopupProxy>
             </QIcon>
         </template>
-    </QInput>
+    </VnInput>
 </template>
 
 <style lang="scss">

src/components/common/VnLocation.vue

@@ -50,7 +50,10 @@ const value = computed({
         return $props.modelValue;
     },
     set(value) {
-        emit('update:modelValue', value);
+        emit(
+            'update:modelValue',
+            postcodesOptions.value.find((p) => p.code === value)
+        );
     },
 });
 
@@ -101,16 +104,11 @@ function handleFetch(data) {
         :label="t('Location')"
         :placeholder="t('search_by_postalcode')"
         @input-value="locationFilter"
-        :default-filter="true"
+        :default-filter="false"
         :input-debounce="300"
         :class="{ required: $attrs.required }"
         v-bind="$attrs"
-        emit-value
-        map-options
-        use-input
         clearable
-        hide-selected
-        fill-input
     >
         <template #form>
             <CreateNewPostcode @on-data-saved="locationFilter()" />

src/components/common/VnLog.vue

@@ -1046,7 +1046,7 @@ es:
     tooltips:
         search: Buscar por identificador o concepto
         changes: Buscar por cambios. Los atributos deben buscarse por su nombre interno, para obtenerlo situar el cursor sobre el atributo.
-    Audit logs: Registros de auditoría
+    Audit logs: Historial
     Property: Propiedad
     Before: Antes
     After: Después

src/components/common/VnSelectFilter.vue

@@ -116,14 +116,14 @@ async function fetchFilter(val) {
 }
 
 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(
-        async () => {
-            if (!$props.defaultFilter) return;
-            if ($props.url) {
-                myOptions.value = await fetchFilter(val);
-                return;
-            }
-            myOptions.value = filter(val, myOptionsOriginal.value);
+        () => {
+            myOptions.value = newOptions;
         },
         (ref) => {
             if (val !== '' && ref.options.length > 0) {

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,11 +174,10 @@ 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.'
-        minAmount: 'A minimum amount of 50€ (VAT excluded) is required for your order 
+        minAmount: 'A minimum amount of 50€ (VAT excluded) is required for your order
             { orderId } of { shipped } to receive it without additional shipping costs.'
         orderChanges: 'Order {orderId} of { shipped }: { changes }'
     en: English
@@ -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
@@ -205,7 +193,7 @@ es:
     templates:
         pendingPayment: 'Su pedido está pendiente de pago.
             Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
-        minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido 
+        minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido
             { orderId } del día { shipped } para recibirlo sin portes adicionales.'
         orderChanges: 'Pedido {orderId} día { shipped }: { changes }'
     en: Inglés
@@ -222,7 +210,7 @@ fr:
     templates:
         pendingPayment: 'Votre commande est en attente de paiement.
             Veuillez vous connecter sur le site web et effectuer le paiement par carte. Merci beaucoup.'
-        minAmount: 'Un montant minimum de 50€ (TVA non incluse) est requis pour votre commande 
+        minAmount: 'Un montant minimum de 50€ (TVA non incluse) est requis pour votre commande
             { orderId } du { shipped } afin de la recevoir sans frais de port supplémentaires.'
         orderChanges: 'Commande { orderId } du { shipped }: { changes }'
     en: Anglais
@@ -239,7 +227,7 @@ pt:
     templates:
         pendingPayment: 'Seu pedido está pendente de pagamento.
             Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.'
-        minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido 
+        minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido
             { orderId } do dia { shipped } para recebê-lo sem custos de envio adicionais.'
         orderChanges: 'Pedido { orderId } dia { shipped }: { changes }'
     en: Inglês

src/components/ui/CardDescriptor.vue

@@ -171,6 +171,7 @@ const emit = defineEmits(['onFetch']);
 
 <style lang="scss">
 .body {
+    background-color: var(--vn-gray);
     .text-h5 {
         padding-top: 5px;
         padding-bottom: 5px;
@@ -188,16 +189,19 @@ const emit = defineEmits(['onFetch']);
         .label {
             color: var(--vn-label);
             font-size: 12px;
-            width: 47%;
+
+            &:not(:has(a))::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;
@@ -221,8 +225,6 @@ const emit = defineEmits(['onFetch']);
     margin-bottom: 15px;
 }
 .list-box {
-    background-color: var(--vn-gray);
-
     .q-item__label {
         color: var(--vn-label);
     }

src/components/ui/CardSummary.vue

@@ -46,7 +46,7 @@ watch(props, async () => {
         <QCard class="cardSummary">
             <SkeletonSummary v-if="!entity" />
             <template v-if="entity">
-                <div class="summaryHeader bg-primary q-pa-md text-weight-bolder">
+                <div class="summaryHeader bg-primary q-pa-sm text-weight-bolder">
                     <slot name="header-left">
                         <span></span>
                     </slot>
@@ -85,8 +85,8 @@ watch(props, async () => {
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: space-evenly;
-        gap: 15px;
-        padding: 15px;
+        gap: 10px;
+        padding: 10px;
         background-color: var(--vn-gray);
 
         > .q-card.vn-one {
@@ -105,14 +105,14 @@ watch(props, async () => {
         > .q-card {
             width: 100%;
             background-color: var(--vn-gray);
-            padding: 15px;
+            padding: 7px;
             font-size: 16px;
             min-width: 275px;
 
             .vn-label-value {
                 display: flex;
                 flex-direction: row;
-                margin-top: 5px;
+                margin-top: 2px;
                 .label {
                     color: var(--vn-label);
                     width: 8em;
@@ -131,13 +131,26 @@ watch(props, async () => {
             .header {
                 color: $primary;
                 font-weight: bold;
-                margin-bottom: 25px;
+                margin-bottom: 10px;
                 font-size: 20px;
                 display: inline-block;
             }
             .header.link:hover {
                 color: lighten($primary, 20%);
             }
+            .q-checkbox {
+                display: flex;
+                margin-bottom: 9px;
+                & .q-checkbox__label {
+                    margin-left: 31px;
+                    color: var(--vn-text);
+                }
+                & .q-checkbox__inner {
+                    position: absolute;
+                    left: 0;
+                    color: var(--vn-label);
+                }
+            }
         }
     }
 

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

@@ -1,8 +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 },
     value: {
@@ -13,8 +13,8 @@ const $props = defineProps({
     dash: { type: Boolean, default: true },
     copy: { type: Boolean, default: false },
 });
-const isBooleanValue = computed(() => typeof $props.value === 'boolean');
 
+const { t } = useI18n();
 const { copyText } = useClipboard();
 
 function copyValueText() {
@@ -40,36 +40,36 @@ function copyValueText() {
             </slot>
         </div>
         <div class="value">
-            <span v-if="isBooleanValue">
-                <QIcon
-                    :name="$props.value ? `check` : `close`"
-                    :color="$props.value ? `positive` : `negative`"
-                    size="sm"
-                />
-            </span>
-            <slot v-else name="value">
+            <slot name="value">
                 <span :title="$props.value">
                     {{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
                 </span>
             </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" />
+            <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 {
-    &:hover {
-        cursor: pointer;
-    }
+    visibility: hidden;
+}
+.info {
+    margin-left: 5px;
 }
 </style>

src/components/ui/VnNotes.vue

@@ -8,7 +8,6 @@ import VnPaginate from './VnPaginate.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
 
 const $props = defineProps({
-    id: { type: String, required: true },
     url: { type: String, default: null },
     filter: { type: Object, default: () => {} },
     body: { type: Object, default: () => {} },
@@ -28,7 +27,7 @@ async function insert() {
 }
 </script>
 <template>
-    <div class="column items-center full-height">
+    <div class="column items-center full-height full-width">
         <VnPaginate
             :data-key="$props.url"
             :url="$props.url"
@@ -39,28 +38,38 @@ async function insert() {
             ref="vnPaginateRef"
         >
             <template #body="{ rows }">
-                <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.user.nickname}`"
-                                :worker-id="note.worker.id"
-                            />
-
-                            <slot name="actions">
-                                {{ toDateHour(note.created) }}
+                <div class="column items-center full-width">
+                    <QCard
+                        class="q-pa-xs q-mb-sm full-width"
+                        v-for="(note, index) in rows"
+                        :key="index"
+                    >
+                        <QCardSection horizontal>
+                            <slot name="picture">
+                                <VnAvatar
+                                    :descriptor="false"
+                                    :worker-id="note.workerFk"
+                                    size="md"
+                                />
                             </slot>
-                        </QItem>
-                    </QCardSection>
-                    <QCardSection class="q-pa-sm">
-                        <slot name="text">
-                            {{ note.text }}
-                        </slot>
-                    </QCardSection>
-                </QCard>
+                            <div class="full-width row justify-between q-pa-xs">
+                                <VnUserLink
+                                    :name="`${note.worker.user.nickname}`"
+                                    :worker-id="note.worker.id"
+                                />
+
+                                <slot name="actions">
+                                    {{ toDateHour(note.created) }}
+                                </slot>
+                            </div>
+                        </QCardSection>
+                        <QCardSection class="q-pa-xs q-my-none q-py-none">
+                            <slot name="text">
+                                {{ note.text }}
+                            </slot>
+                        </QCardSection>
+                    </QCard>
+                </div>
             </template>
         </VnPaginate>
         <QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
@@ -108,8 +117,10 @@ async function insert() {
 </template>
 <style lang="scss" scoped>
 .q-card {
-    max-width: 80em;
-
+    width: 90%;
+    @media (max-width: $breakpoint-sm) {
+        width: 100%;
+    }
     &__section {
         word-wrap: break-word;
     }

src/components/ui/VnPaginate.vue

@@ -138,7 +138,7 @@ async function onLoad(...params) {
 </script>
 
 <template>
-    <div>
+    <div class="full-width">
         <div
             v-if="!props.autoLoad && !store.data && !isLoading"
             class="info-row q-pa-md text-center"
@@ -175,6 +175,7 @@ async function onLoad(...params) {
         @load="onLoad"
         :offset="offset"
         class="full-width full-height"
+        v-bind="$attrs"
     >
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">

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

@@ -81,8 +81,9 @@ onMounted(() => {
 });
 
 async function search() {
-    const staticParams = Object.entries(store.userParams)
-        .filter(([key, value]) => value && (props.staticParams || []).includes(key));
+    const staticParams = Object.entries(store.userParams).filter(
+        ([key, value]) => value && (props.staticParams || []).includes(key)
+    );
     await arrayData.applyFilter({
         params: {
             ...Object.fromEntries(staticParams),
@@ -155,11 +156,9 @@ async function search() {
 .cursor-info {
     cursor: help;
 }
-
-.body--light #searchbar {
+#searchbar {
     .q-field--standout.q-field--highlighted .q-field__control {
-        background-color: $grey-7;
-        color: #333;
+        background-color: var(--vn-text);
     }
 }
 </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/useCardSize.js

@@ -0,0 +1,7 @@
+import { useQuasar } from 'quasar';
+
+export default function() {
+    const quasar = useQuasar();
+   return quasar.screen.gt.xs ? 'q-pa-md': 'q-pa-xs';
+
+}

src/css/app.scss

@@ -1,17 +1,59 @@
 // app global css in SCSS form
 @import './icons.scss';
 
+body.body--light {
+    --fount-color: black;
+    --vn-sectionColor: #ffffff;
+    --vn-pageColor: #e0e0e0;
+    background-color: var(--vn-pageColor);
+    .q-header .q-toolbar {
+        color: var(--fount-color);
+    }
+    --vn-text: var(--fount-color);
+    --vn-gray: var(--vn-sectionColor);
+    --vn-label: #5f5f5f;
+    --vn-dark: var(--vn-sectionColor);
+    --vn-light-gray: #e7e3e3;
+}
+
+body.body--dark {
+    --vn-pageColor: #222;
+    --vn-SectionColor: #3c3b3b;
+    background-color: var(--vn-pageColor);
+    --vn-text: white;
+    --vn-gray: var(--vn-SectionColor);
+    --vn-label: #a8a8a8;
+    --vn-dark: var(--vn-SectionColor);
+    --vn-light-gray: #424242;
+}
+
 a {
     text-decoration: none;
 }
 
 .link {
-    color: $primary;
+    color: $color-link;
     cursor: pointer;
 }
 
+.tx-color-link {
+    color: $color-link !important;
+}
+
+.header-link {
+    color: $color-link !important;
+    cursor: pointer;
+    border-bottom: solid $primary;
+    border-width: 2px;
+    width: 100%;
+    .q-icon {
+        float: right;
+    }
+    text-transform: uppercase;
+}
+
 .link:hover {
-    color: $orange-4;
+    text-decoration: underline;
 }
 
 // Removes chrome autofill background
@@ -24,26 +66,6 @@ select:-webkit-autofill {
     background-clip: text !important;
 }
 
-body.body--light {
-    .q-header .q-toolbar {
-        background-color: $white;
-        color: #555;
-    }
-    --vn-text: #000000;
-    --vn-gray: #f5f5f5;
-    --vn-label: #5f5f5f;
-    --vn-dark: white;
-    --vn-light-gray: #e7e3e3;
-}
-
-body.body--dark {
-    --vn-text: #ffffff;
-    --vn-gray: #313131;
-    --vn-label: #a8a8a8;
-    --vn-dark: #292929;
-    --vn-light-gray: #424242;
-}
-
 .bg-vn-dark {
     background-color: var(--vn-dark);
 }

src/css/icons.scss

@@ -1,10 +1,10 @@
 @font-face {
   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');
+  src:  url('fonts/icon.eot?2omjsr');
+  src:  url('fonts/icon.eot?2omjsr#iefix') format('embedded-opentype'),
+    url('fonts/icon.ttf?2omjsr') format('truetype'),
+    url('fonts/icon.woff?2omjsr') format('woff'),
+    url('fonts/icon.svg?2omjsr#icon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -28,6 +28,9 @@
 .icon-100:before {
   content: "\e926";
 }
+.icon-Client_unpaid:before {
+  content: "\e925";
+}
 .icon-History:before {
   content: "\e964";
 }
@@ -46,9 +49,15 @@
 .icon-addperson:before {
   content: "\e929";
 }
+.icon-agency:before {
+  content: "\e92a";
+}
 .icon-agency-term:before {
   content: "\e92b";
 }
+.icon-albaran:before {
+  content: "\e92c";
+}
 .icon-anonymous:before {
   content: "\e92d";
 }
@@ -172,6 +181,9 @@
 .icon-funeral:before {
   content: "\e95f";
 }
+.icon-grafana:before {
+  content: "\e931";
+}
 .icon-greenery:before {
   content: "\e91e";
 }
@@ -355,6 +367,9 @@
 .icon-traceability:before {
   content: "\e919";
 }
+.icon-transaction:before {
+  content: "\e93b";
+}
 .icon-treatments:before {
   content: "\e91c";
 }

src/css/quasar.variables.scss

@@ -11,25 +11,32 @@
 // It's highly recommended to change the default colors
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
-
+// Tip: to add new colors https://quasar.dev/style/color-palette/#adding-your-own-colors
 $primary: #ec8916;
-$secondary: #26a69a;
-$accent: #9c27b0;
-$white: #fff;
-
+$secondary: $primary;
 $positive: #21ba45;
 $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
-$vnColor: #8ebb27;
-
 // Pendiente de cuadrar con la base de datos
 $success: $positive;
 $alert: $negative;
+$white: #fff;
+$dark: #3c3b3b;
+// custom
+$color-link: #66bfff;
+$color-spacer-light: #a3a3a31f;
+$color-spacer: #7979794d;
+$border-thin-light: 1px solid $color-spacer-light;
+$primary-light: lighten($primary, 35%);
+$dark-shadow-color: black;
+$layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
+$spacing-md: 16px;
 
 .bg-success {
     background-color: $positive;
 }
+
 .bg-notice {
     background-color: $info;
 }
@@ -39,12 +46,3 @@ $alert: $negative;
 .bg-alert {
     background-color: $negative;
 }
-
-$color-spacer-light: rgba(255, 255, 255, 0.12);
-$color-spacer: rgba(255, 255, 255, 0.3);
-$border-thin-light: 1px solid $color-spacer-light;
-
-$dark-shadow-color: #000;
-$dark: #292929;
-$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
-$spacing-md: 16px;

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',
@@ -64,12 +65,24 @@ export default {
         markAll: 'Mark all',
         requiredField: 'Required field',
         class: 'clase',
-        type: 'type',
+        type: 'Type',
         reason: 'reason',
         noResults: 'No 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',
+        salesPerson: 'SalesPerson',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -77,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',
@@ -160,13 +173,14 @@ export default {
             hasDebt: 'Customer has debt',
             notChecked: 'Customer not checked',
             noWebAccess: 'Web access is disabled',
+            businessTypeFk: 'Business type',
         },
         summary: {
             basicData: 'Basic data',
             fiscalAddress: 'Fiscal address',
             fiscalData: 'Fiscal data',
             billingData: 'Billing data',
-            consignee: 'Consignee',
+            consignee: 'Default consignee',
             businessData: 'Business data',
             financialData: 'Financial data',
             customerId: 'Customer ID',
@@ -219,6 +233,8 @@ export default {
             recoverySince: 'Recovery since',
             businessType: 'Business Type',
             city: 'City',
+            rating: 'Rating',
+            recommendCredit: 'Recommended credit',
         },
         basicData: {
             socialName: 'Fiscal name',
@@ -273,6 +289,7 @@ export default {
             basicData: 'Basic data',
             buys: 'Buys',
             notes: 'Notes',
+            dms: 'File management',
             log: 'Log',
             create: 'Create',
             latestBuys: 'Latest buys',
@@ -344,7 +361,6 @@ export default {
             reference: 'Reference',
             observations: 'Observations',
             item: 'Item',
-            description: 'Description',
             size: 'Size',
             packing: 'Packing',
             grouping: 'Grouping',
@@ -359,7 +375,6 @@ export default {
         },
         notes: {
             observationType: 'Observation type',
-            description: 'Description',
         },
         descriptor: {
             agency: 'Agency',
@@ -372,7 +387,6 @@ export default {
             packing: 'Packing',
             grouping: 'Grouping',
             quantity: 'Quantity',
-            description: 'Description',
             size: 'Size',
             tags: 'Tags',
             type: 'Type',
@@ -425,6 +439,7 @@ export default {
             shipped: 'Shipped',
             warehouse: 'Warehouse',
             customerCard: 'Customer card',
+            alias: 'Alias',
         },
         boxing: {
             expedition: 'Expedition',
@@ -458,7 +473,6 @@ export default {
             visible: 'Visible',
             available: 'Available',
             quantity: 'Quantity',
-            description: 'Description',
             price: 'Price',
             discount: 'Discount',
             packing: 'Packing',
@@ -516,6 +530,8 @@ export default {
             ticketId: 'Ticket ID',
             customerSummary: 'Customer summary',
             claimedTicket: 'Claimed ticket',
+            saleTracking: 'Sale tracking',
+            ticketTracking: 'Ticket tracking',
             commercial: 'Commercial',
             province: 'Province',
             zone: 'Zone',
@@ -531,7 +547,6 @@ export default {
             landed: 'Landed',
             quantity: 'Quantity',
             claimed: 'Claimed',
-            description: 'Description',
             price: 'Price',
             discount: 'Discount',
             total: 'Total',
@@ -793,7 +808,6 @@ export default {
             orderTicketList: 'Order Ticket List',
             details: 'Details',
             item: 'Item',
-            description: 'Description',
             quantity: 'Quantity',
             price: 'Price',
             amount: 'Amount',
@@ -1138,7 +1152,6 @@ export default {
             warehouse: 'Warehouse',
             travelFileDescription: 'Travel id { travelId }',
             file: 'File',
-            description: 'Description',
         },
     },
     item: {
@@ -1172,7 +1185,6 @@ export default {
             clone: 'Clone',
             openCard: 'View',
             openSummary: 'Summary',
-            viewDescription: 'Description',
         },
         cardDescriptor: {
             mainList: 'Main list',

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',
@@ -64,12 +65,24 @@ export default {
         markAll: 'Marcar todo',
         requiredField: 'Campo obligatorio',
         class: 'clase',
-        type: 'tipo',
+        type: 'Tipo',
         reason: 'motivo',
         noResults: 'Sin resultados',
         system: 'Sistema',
+        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',
+        salesPerson: 'Comercial',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -77,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',
@@ -159,13 +172,14 @@ export default {
             hasDebt: 'El cliente tiene riesgo',
             notChecked: 'El cliente no está comprobado',
             noWebAccess: 'El acceso web está desactivado',
+            businessTypeFk: 'Tipo de negocio',
         },
         summary: {
             basicData: 'Datos básicos',
             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',
@@ -218,6 +232,8 @@ export default {
             recoverySince: 'Recobro desde',
             businessType: 'Tipo de negocio',
             city: 'Población',
+            rating: 'Clasificación',
+            recommendCredit: 'Crédito recomendado',
         },
         basicData: {
             socialName: 'Nombre fiscal',
@@ -272,6 +288,7 @@ export default {
             basicData: 'Datos básicos',
             buys: 'Compras',
             notes: 'Notas',
+            dms: 'Gestión documental',
             log: 'Historial',
             create: 'Crear',
             latestBuys: 'Últimas compras',
@@ -343,7 +360,6 @@ export default {
             reference: 'Referencia',
             observations: 'Observaciónes',
             item: 'Artículo',
-            description: 'Descripción',
             size: 'Medida',
             packing: 'Packing',
             grouping: 'Grouping',
@@ -358,7 +374,6 @@ export default {
         },
         notes: {
             observationType: 'Tipo de observación',
-            description: 'Descripción',
         },
         descriptor: {
             agency: 'Agencia',
@@ -371,7 +386,6 @@ export default {
             packing: 'Packing',
             grouping: 'Grouping',
             quantity: 'Cantidad',
-            description: 'Descripción',
             size: 'Medida',
             tags: 'Etiquetas',
             type: 'Tipo',
@@ -424,6 +438,7 @@ export default {
             shipped: 'Enviado',
             warehouse: 'Almacén',
             customerCard: 'Ficha del cliente',
+            alias: 'Alias',
         },
         boxing: {
             expedition: 'Expedición',
@@ -457,7 +472,6 @@ export default {
             visible: 'Visible',
             available: 'Disponible',
             quantity: 'Cantidad',
-            description: 'Descripción',
             price: 'Precio',
             discount: 'Descuento',
             packing: 'Encajado',
@@ -489,7 +503,7 @@ export default {
             rma: 'RMA',
             development: 'Trazabilidad',
             photos: 'Fotos',
-            log: 'Registros de auditoría',
+            log: 'Historial',
             notes: 'Notas',
             action: 'Acción',
         },
@@ -515,6 +529,8 @@ export default {
             ticketId: 'ID ticket',
             customerSummary: 'Resumen del cliente',
             claimedTicket: 'Ticket reclamado',
+            saleTracking: 'Líneas preparadas',
+            ticketTracking: 'Estados del ticket',
             commercial: 'Comercial',
             province: 'Provincia',
             zone: 'Zona',
@@ -530,7 +546,6 @@ export default {
             landed: 'Entregado',
             quantity: 'Cantidad',
             claimed: 'Reclamado',
-            description: 'Descripción',
             price: 'Precio',
             discount: 'Descuento',
             total: 'Total',
@@ -701,7 +716,6 @@ export default {
             orderTicketList: 'Tickets del pedido',
             details: 'Detalles',
             item: 'Item',
-            description: 'Descripción',
             quantity: 'Cantidad',
             price: 'Precio',
             amount: 'Monto',
@@ -714,7 +728,7 @@ export default {
             create: 'Crear',
             summary: 'Resumen',
             basicData: 'Datos básicos',
-            log: 'Registros de auditoría',
+            log: 'Historial',
         },
         list: {
             parking: 'Parking',
@@ -746,7 +760,7 @@ export default {
             dueDay: 'Vencimiento',
             intrastat: 'Intrastat',
             corrective: 'Rectificativa',
-            log: 'Registros de auditoría',
+            log: 'Historial',
         },
         list: {
             ref: 'Referencia',
@@ -1138,7 +1152,6 @@ export default {
             warehouse: 'Almacén',
             travelFileDescription: 'Id envío { travelId }',
             file: 'Fichero',
-            description: 'Descripción',
         },
     },
     item: {
@@ -1172,7 +1185,6 @@ export default {
             clone: 'Clonar',
             openCard: 'Ficha',
             openSummary: 'Detalles',
-            viewDescription: 'Descripción',
         },
         cardDescriptor: {
             mainList: 'Listado principal',

src/layouts/OutLayout.vue

@@ -40,7 +40,7 @@ const langs = ['en', 'es'];
 
 <template>
     <QLayout view="hHh LpR fFf">
-        <QHeader reveal class="bg-dark">
+        <QHeader reveal class="bg-vn-dark">
             <QToolbar class="justify-end">
                 <QBtn
                     id="switchLanguage"

src/pages/Claim/Card/ClaimAction.vue

@@ -135,7 +135,7 @@ async function regularizeClaim() {
         message: t('globals.dataSaved'),
         type: 'positive',
     });
-    await onUpdateGreugeAccept();
+    if (multiplicatorValue.value) await onUpdateGreugeAccept();
 }
 
 async function onUpdateGreugeAccept() {

src/pages/Claim/Card/ClaimCard.vue

@@ -5,6 +5,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -28,7 +29,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Claim/Card/ClaimDescriptor.vue

@@ -105,7 +105,6 @@ onMounted(async () => {
             <ClaimDescriptorMenu :claim="entity" />
         </template>
         <template #body="{ entity }">
-            <VnLv :label="t('claim.card.created')" :value="toDate(entity.created)" />
             <VnLv v-if="entity.claimState" :label="t('claim.card.state')">
                 <template #value>
                     <QBadge :color="stateColor(entity.claimState.code)" dense>
@@ -113,13 +112,13 @@ onMounted(async () => {
                     </QBadge>
                 </template>
             </VnLv>
-            <VnLv :label="t('claim.card.ticketId')">
+            <VnLv :label="t('claim.card.created')" :value="toDate(entity.created)" />
+            <VnLv :label="t('claim.card.commercial')">
                 <template #value>
-                    <span class="link">
-                        {{ entity.ticketFk }}
-
-                        <TicketDescriptorProxy :id="entity.ticketFk" />
-                    </span>
+                    <VnUserLink
+                        :name="entity.client?.salesPersonUser?.name"
+                        :worker-id="entity.client?.salesPersonFk"
+                    />
                 </template>
             </VnLv>
             <VnLv
@@ -134,19 +133,20 @@ onMounted(async () => {
                     />
                 </template>
             </VnLv>
-            <VnLv :label="t('claim.card.commercial')">
-                <template #value>
-                    <VnUserLink
-                        :name="entity.client?.salesPersonUser?.name"
-                        :worker-id="entity.client?.salesPersonFk"
-                    />
-                </template>
-            </VnLv>
+            <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
             <VnLv
                 :label="t('claim.card.province')"
                 :value="entity.ticket?.address?.province?.name"
             />
-            <VnLv :label="t('claim.card.zone')" :value="entity.ticket?.zone?.name" />
+            <VnLv :label="t('claim.card.ticketId')">
+                <template #value>
+                    <span class="link">
+                        {{ entity.ticketFk }}
+
+                        <TicketDescriptorProxy :id="entity.ticketFk" />
+                    </span>
+                </template>
+            </VnLv>
             <VnLv
                 :label="t('claimRate')"
                 :value="toPercentage(entity.client?.claimsRatio?.claimingRate)"
@@ -176,6 +176,7 @@ onMounted(async () => {
                     color="primary"
                     :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
                 >
+                    <QTooltip>{{ t('claim.card.saleTracking') }}</QTooltip>
                 </QBtn>
                 <QBtn
                     size="md"
@@ -183,6 +184,7 @@ onMounted(async () => {
                     color="primary"
                     :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
                 >
+                    <QTooltip>{{ t('claim.card.ticketTracking') }}</QTooltip>
                 </QBtn>
             </QCardActions>
         </template>

src/pages/Claim/Card/ClaimNotes.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useState } from 'src/composables/useState';
 import VnNotes from 'src/components/ui/VnNotes.vue';
@@ -6,14 +7,15 @@ import VnNotes from 'src/components/ui/VnNotes.vue';
 const route = useRoute();
 const state = useState();
 const user = state.getUser();
-const id = route.params.id;
 
 const $props = defineProps({
+    id: { type: Number, default: null },
     addNote: { type: Boolean, default: true },
 });
+const claimId = computed(() => $props.id || route.params.id);
 
 const claimFilter = {
-    where: { claimFk: id },
+    where: { claimFk: claimId.value },
     fields: ['created', 'workerFk', 'text'],
     include: {
         relation: 'worker',
@@ -30,19 +32,16 @@ const claimFilter = {
 };
 
 const body = {
-    claimFk: id,
+    claimFk: claimId.value,
     workerFk: user.value.id,
 };
 </script>
 <template>
-    <div class="column items-center">
-        <VnNotes
-            style="overflow-y: scroll"
-            :add-note="$props.addNote"
-            :id="id"
-            url="claimObservations"
-            :filter="claimFilter"
-            :body="body"
-        />
-    </div>
+    <VnNotes
+        style="overflow-y: auto"
+        :add-note="$props.addNote"
+        url="claimObservations"
+        :filter="claimFilter"
+        :body="body"
+    />
 </template>

src/pages/Claim/Card/ClaimSummary.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, watch } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters';
@@ -35,7 +35,6 @@ const claimDmsFilter = ref({
             relation: 'dms',
         },
     ],
-    where: { claimFk: entityId.value },
 });
 
 onMounted(async () => {
@@ -71,7 +70,7 @@ const detailsColumns = ref([
     },
     {
         name: 'description',
-        label: 'claim.summary.description',
+        label: 'globals.description',
         field: (row) => row.sale.concept,
     },
     {
@@ -141,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) => {
@@ -163,18 +167,21 @@ function openDialog(dmsId) {
         url="ClaimDms"
         :filter="claimDmsFilter"
         @on-fetch="(data) => setClaimDms(data)"
-        limit="20"
         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>
         <template #body="{ entity: { claim, salesClaimed, developments } }">
             <QCard class="vn-one">
-                <a class="header" :href="`#/claim/${entityId}/basic-data`">
+                <a class="header header-link" :href="`#/claim/${entityId}/basic-data`">
                     {{ t('claim.pageTitles.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <VnLv
                     :label="t('claim.summary.created')"
@@ -187,19 +194,19 @@ function openDialog(dmsId) {
                         </QChip>
                     </template>
                 </VnLv>
-                <VnLv :label="t('claim.summary.assignedTo')">
+                <VnLv :label="t('globals.salesPerson')">
                     <template #value>
                         <VnUserLink
-                            :name="claim.worker?.user?.nickname"
-                            :worker-id="claim.workerFk"
+                            :name="claim.client?.salesPersonUser?.name"
+                            :worker-id="claim.client?.salesPersonFk"
                         />
                     </template>
                 </VnLv>
                 <VnLv :label="t('claim.summary.attendedBy')">
                     <template #value>
                         <VnUserLink
-                            :name="claim.client?.salesPersonUser?.name"
-                            :worker-id="claim.client?.salesPersonFk"
+                            :name="claim.worker?.user?.nickname"
+                            :worker-id="claim.workerFk"
                         />
                     </template>
                 </VnLv>
@@ -211,26 +218,37 @@ function openDialog(dmsId) {
                         />
                     </template>
                 </VnLv>
-                <VnLv :label="t('claim.summary.returnOfMaterial')" :value="claim.rma" />
                 <QCheckbox
-                    :align-items="right"
                     :label="t('claim.basicData.picked')"
                     v-model="claim.hasToPickUp"
+                    :disable="true"
                 />
             </QCard>
-            <QCard class="vn-three claimVnNotes full-height">
-                <a class="header" :href="`#/claim/${entityId}/notes`">
+            <QCard class="vn-three">
+                <a class="header header-link" :href="`#/claim/${entityId}/notes`">
                     {{ t('claim.summary.notes') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
-                <ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
+                <ClaimNotes
+                    :id="entityId"
+                    :add-note="false"
+                    style="max-height: 300px"
+                    order="created ASC"
+                />
             </QCard>
             <QCard class="vn-two" v-if="salesClaimed.length > 0">
-                <a class="header" :href="`#/claim/${entityId}/lines`">
+                <a class="header header-link" :href="`#/claim/${entityId}/lines`">
                     {{ t('claim.summary.details') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
-                <QTable :columns="detailsColumns" :rows="salesClaimed" flat>
+                <QTable
+                    :columns="detailsColumns"
+                    :rows="salesClaimed"
+                    flat
+                    dense
+                    :rows-per-page-options="[0]"
+                    hide-bottom
+                >
                     <template #header="props">
                         <QTr :props="props">
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
@@ -252,7 +270,8 @@ function openDialog(dmsId) {
                                 >
                                 <ItemDescriptorProxy
                                     v-if="col.name == 'description'"
-                                    :id="2"
+                                    :id="props.row.id"
+                                    :sale-fk="props.row.saleFk"
                                 ></ItemDescriptorProxy>
                             </QTh>
                         </QTr>
@@ -260,11 +279,19 @@ function openDialog(dmsId) {
                 </QTable>
             </QCard>
             <QCard class="vn-two" v-if="developments.length > 0">
-                <a class="header" :href="claimUrl + 'development'">
+                <a class="header header-link" :href="claimUrl + 'development'">
                     {{ t('claim.summary.development') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
-                <QTable :columns="developmentColumns" :rows="developments" flat>
+
+                <QTable
+                    :columns="developmentColumns"
+                    :rows="developments"
+                    flat
+                    dense
+                    :rows-per-page-options="[0]"
+                    hide-bottom
+                >
                     <template #header="props">
                         <QTr :props="props">
                             <QTh v-for="col in props.cols" :key="col.name" :props="props">
@@ -274,11 +301,10 @@ function openDialog(dmsId) {
                     </template>
                 </QTable>
             </QCard>
-
             <QCard class="vn-max" v-if="claimDms.length > 0">
-                <a class="header" :href="`#/claim/${entityId}/photos`">
+                <a class="header header-link" :href="`#/claim/${entityId}/photos`">
                     {{ t('claim.summary.photos') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <div class="container">
                     <div
@@ -295,7 +321,7 @@ function openDialog(dmsId) {
                                 v-if="media.isVideo"
                                 @click.stop="openDialog(media.dmsFk)"
                             >
-                                <QTooltip>Video</QTooltip>
+                                <QTooltip>Video</QTooltip>header
                             </QIcon>
                             <QCard class="multimedia relative-position">
                                 <QImg
@@ -319,9 +345,9 @@ function openDialog(dmsId) {
             </QCard>
 
             <QCard class="vn-max">
-                <a class="header" :href="claimUrl + 'action'">
+                <a class="header header-link" :href="claimUrl + 'action'">
                     {{ t('claim.summary.actions') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" class="link" />
                 </a>
                 <div id="slider-container" class="q-px-xl q-py-md">
                     <QSlider
@@ -329,7 +355,7 @@ function openDialog(dmsId) {
                         label
                         :label-value="t('claim.summary.responsibility')"
                         label-always
-                        color="primary"
+                        color="var()"
                         markers
                         :marker-labels="[
                             { value: 1, label: t('claim.summary.company') },
@@ -383,13 +409,7 @@ function openDialog(dmsId) {
         </template>
     </CardSummary>
 </template>
-<style lang="scss">
-.claimVnNotes {
-    .q-card {
-        max-width: 100%;
-    }
-}
-</style>
+
 <style lang="scss" scoped>
 .q-dialog__inner--minimized > div {
     max-width: 80%;
@@ -399,7 +419,6 @@ function openDialog(dmsId) {
     flex-direction: row;
     flex-wrap: wrap;
     gap: 15px;
-    flex-basis: 30%;
 }
 .multimedia-container {
     flex: 1 0 21%;

src/pages/Claim/ClaimList.vue

@@ -116,7 +116,7 @@ function navigate(event, id) {
                         </template>
                         <template #actions>
                             <QBtn
-                                :label="t('components.smartCard.viewDescription')"
+                                :label="t('globals.description')"
                                 @click.stop
                                 class="bg-vn-dark"
                                 outline

src/pages/Customer/Card/CustomerCard.vue

@@ -6,6 +6,7 @@ import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -30,7 +31,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -40,6 +40,15 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
         data-key="customerData"
     >
         <template #body="{ entity }">
+            <VnLv :label="t('customer.card.payMethod')" :value="entity.payMethod.name" />
+
+            <VnLv :label="t('customer.card.credit')" :value="toCurrency(entity.credit)" />
+            <VnLv
+                :label="t('customer.card.securedCredit')"
+                :value="toCurrency(entity.creditInsurance)"
+            />
+
+            <VnLv :label="t('customer.card.debt')" :value="toCurrency(entity.debt)" />
             <VnLv v-if="entity.salesPersonUser" :label="t('customer.card.salesPerson')">
                 <template #value>
                     <VnUserLink
@@ -48,13 +57,10 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
                     />
                 </template>
             </VnLv>
-            <VnLv :label="t('customer.card.credit')" :value="toCurrency(entity.credit)" />
             <VnLv
-                :label="t('customer.card.securedCredit')"
-                :value="toCurrency(entity.creditInsurance)"
+                :label="t('customer.card.businessTypeFk')"
+                :value="entity.businessTypeFk"
             />
-            <VnLv :label="t('customer.card.payMethod')" :value="entity.payMethod.name" />
-            <VnLv :label="t('customer.card.debt')" :value="toCurrency(entity.debt)" />
         </template>
         <template #icons="{ entity }">
             <QCardActions>

src/pages/Customer/Card/CustomerSummary.vue

@@ -62,9 +62,9 @@ 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 header-link" :href="`#/customer/${entityId}/basic-data`">
                     {{ t('customer.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <VnLv :label="t('customer.summary.customerId')" :value="entity.id" />
                 <VnLv :label="t('customer.summary.name')" :value="entity.name" />
@@ -96,9 +96,12 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a class="header" :href="clientUrl + `fiscal-data`">
+                <a
+                    class="header header-link"
+                    :href="`#/customer/${entityId}/fiscal-data`"
+                >
                     {{ t('customer.summary.fiscalAddress') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <VnLv
                     :label="t('customer.summary.socialName')"
@@ -121,37 +124,58 @@ 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') }}
-                    <QIcon name="open_in_new" color="primary" />
+                <a
+                    class="header header-link"
+                    :href="`#/customer/${entityId}/fiscal-data`"
+                    link
+                >
+                    {{ t('customer.summary.fiscalData') }}
+                    <QIcon name="open_in_new" />
                 </a>
-                <VnLv
+                <QCheckbox
                     :label="t('customer.summary.isEqualizated')"
-                    :value="entity.isEqualizated"
+                    v-model="entity.isEqualizated"
+                    :disable="true"
                 />
-                <VnLv :label="t('customer.summary.isActive')" :value="entity.isActive" />
-                <VnLv
+                <QCheckbox
+                    :label="t('customer.summary.isActive')"
+                    v-model="entity.isActive"
+                    :disable="true"
+                />
+                <QCheckbox
                     :label="t('customer.summary.invoiceByAddress')"
-                    :value="entity.hasToInvoiceByAddress"
+                    v-model="entity.hasToInvoiceByAddress"
+                    :disable="true"
                 />
-                <VnLv
+                <QCheckbox
                     :label="t('customer.summary.verifiedData')"
-                    :value="entity.isTaxDataChecked"
+                    v-model="entity.isTaxDataChecked"
+                    :disable="true"
                 />
-                <VnLv
+                <QCheckbox
                     :label="t('customer.summary.hasToInvoice')"
-                    :value="entity.hasToInvoice"
+                    v-model="entity.hasToInvoice"
+                    :disable="true"
                 />
-                <VnLv
+                <QCheckbox
                     :label="t('customer.summary.notifyByEmail')"
-                    :value="entity.isToBeMailed"
+                    v-model="entity.isToBeMailed"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('customer.summary.vies')"
+                    v-model="entity.isVies"
+                    :disable="true"
                 />
-                <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 header-link"
+                    :href="`#/customer/${entityId}/billing-data`"
+                    link
+                >
                     {{ t('customer.summary.billingData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <VnLv
                     :label="t('customer.summary.payMethod')"
@@ -159,20 +183,32 @@ const creditWarning = computed(() => {
                 />
                 <VnLv :label="t('customer.summary.bankAccount')" :value="entity.iban" />
                 <VnLv :label="t('customer.summary.dueDay')" :value="entity.dueDay" />
-                <VnLv :label="t('customer.summary.hasLcr')" :value="entity.hasLcr" />
-                <VnLv
-                    :label="t('customer.summary.hasCoreVnl')"
-                    :value="entity.hasCoreVnl"
+                <QCheckbox
+                    style="padding: 0"
+                    :label="t('customer.summary.hasLcr')"
+                    v-model="entity.hasLcr"
+                    :disable="true"
                 />
-                <VnLv
+                <QCheckbox
+                    :label="t('customer.summary.hasCoreVnl')"
+                    v-model="entity.hasCoreVnl"
+                    :disable="true"
+                />
+
+                <QCheckbox
                     :label="t('customer.summary.hasB2BVnl')"
-                    :value="entity.hasSepaVnl"
+                    v-model="entity.hasSepaVnl"
+                    :disable="true"
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.defaultAddress">
-                <a class="header link" :href="clientUrl + `address/index`" link>
+                <a
+                    class="header header-link"
+                    :href="`#/customer/${entityId}/consignees`"
+                    link
+                >
                     {{ t('customer.summary.consignee') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <VnLv
                     :label="t('customer.summary.addressName')"
@@ -188,21 +224,22 @@ const creditWarning = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
-                <a class="header link" :href="clientUrl + `web-access`">
+                <a class="header header-link" :href="`#/customer/${entityId}/web-access`">
                     {{ t('customer.summary.webAccess') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <VnLv
                     :label="t('customer.summary.username')"
                     :value="entity.account.name"
                 />
-                <VnLv
+                <QCheckbox
                     :label="t('customer.summary.webAccess')"
-                    :value="entity.account.active"
+                    v-model="entity.account.active"
+                    :disable="true"
                 />
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
-                <div class="header">
+                <div class="header header-link">
                     {{ t('customer.summary.businessData') }}
                 </div>
                 <VnLv
@@ -230,12 +267,12 @@ const creditWarning = computed(() => {
             </QCard>
             <QCard class="vn-one" v-if="entity.account">
                 <a
-                    class="header link"
+                    class="header header-link"
                     :href="`https://grafana.verdnatura.es/d/40buzE4Vk/comportamiento-pagos-clientes?orgId=1&var-clientFk=${entityId}`"
                     link
                 >
                     {{ t('customer.summary.financialData') }}
-                    <QIcon name="vn:grafana" color="primary" />
+                    <QIcon name="vn:grafana" />
                 </a>
                 <VnLv
                     :label="t('customer.summary.risk')"
@@ -276,7 +313,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/ExtendedList/CustomerExtendedList.vue

@@ -13,7 +13,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
-import { dashIfEmpty, toDate } from 'src/filters';
+import { toDate } from 'src/filters';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -477,17 +477,11 @@ const stopEventPropagation = (event, col) => {
     event.stopPropagation();
 };
 
-const navigateToTravelId = (id) => {
-    router.push({ path: `/customer/${id}` });
-};
+const navigateToTravelId = (id) => router.push({ path: `/customer/${id}` });
 
-const selectCustomerId = (id) => {
-    selectedCustomerId.value = id;
-};
+const selectCustomerId = (id) => (selectedCustomerId.value = id);
 
-const selectSalesPersonId = (id) => {
-    selectedSalesPersonId.value = id;
-};
+const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
 </script>
 
 <template>
@@ -521,37 +515,50 @@ const selectSalesPersonId = (id) => {
             class="full-width q-mt-md"
             row-key="id"
             :visible-columns="visibleColumns"
+            @row-click="(evt, row, id) => navigateToTravelId(row.id)"
         >
-            <template #body="props">
-                <QTr
-                    :props="props"
-                    @click="navigateToTravelId(props.row.id)"
-                    class="cursor-pointer"
-                >
-                    <QTd
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                        @click="stopEventPropagation($event, col)"
+            <template #body-cell="{ col, value }">
+                <QTd @click="stopEventPropagation($event, col)">
+                    {{ value }}
+                </QTd>
+            </template>
+            <template #body-cell-id="props">
+                <QTd @click="stopEventPropagation($event, props.col)">
+                    <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)"
                     >
-                        <component
-                            :is="tableColumnComponents[col.name].component"
-                            class="col-content"
-                            v-bind="tableColumnComponents[col.name].props(props)"
-                            @click="tableColumnComponents[col.name].event(props)"
-                        >
-                            {{ dashIfEmpty(col.value) }}
-                            <WorkerDescriptorProxy
-                                v-if="props.row.salesPersonFk"
-                                :id="selectedSalesPersonId"
-                            />
-                            <CustomerDescriptorProxy
-                                v-if="props.row.id"
-                                :id="selectedCustomerId"
-                            />
-                        </component>
-                    </QTd>
-                </QTr>
+                        <CustomerDescriptorProxy :id="props.row.id" />
+                        {{ props.row.id }}
+                    </component>
+                </QTd>
+            </template>
+            <template #body-cell-salesPersonFk="props">
+                <QTd @click="stopEventPropagation($event, props.col)">
+                    <component
+                        v-if="props.row.salesPerson"
+                        class="col-content"
+                        :is="tableColumnComponents[props.col.name].component"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    >
+                        <WorkerDescriptorProxy :id="props.row.salesPersonFk" />
+                        {{ props.row.salesPerson }}
+                    </component>
+                    <span class="col-content" v-else>-</span>
+                </QTd>
+            </template>
+            <template #body-cell-actions="props">
+                <QTd @click="stopEventPropagation($event, props.col)">
+                    <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)"
+                    />
+                </QTd>
             </template>
         </QTable>
     </QPage>

src/pages/Customer/Payments/CustomerPaymentsFilter.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -12,10 +12,6 @@ const props = defineProps({
         required: true,
     },
 });
-
-function isValidNumber(value) {
-    return /^(\d|\d+(\.|,)?\d+)$/.test(value);
-}
 </script>
 
 <template>
@@ -51,28 +47,9 @@ function isValidNumber(value) {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
-                        :label="t('Amount')"
-                        v-model="params.amount"
-                        is-outlined
-                        @update:model-value="
-                            (value) => {
-                                if (value.includes(','))
-                                    params.amount = params.amount.replace(',', '.');
-                            }
-                        "
-                        :rules="[
-                            (val) => isValidNumber(val) || !val || 'Please type a number',
-                        ]"
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="euro" size="sm" />
-                        </template>
-                    </VnInput>
+                    <VnCurrency v-model="params.amount" is-outlined />
                 </QItemSection>
             </QItem>
-
             <QItem>
                 <QItemSection>
                     <VnInputDate v-model="params.from" :label="t('From')" is-outlined />

src/pages/Customer/components/CustomerConsigneeCreate.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
 import axios from 'axios';
-
+import VnLocation from 'src/components/common/VnLocation.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -20,13 +20,9 @@ const router = useRouter();
 
 const formInitialData = reactive({ isDefaultAddress: false });
 
-const townsFetchDataRef = ref(null);
-const postcodeFetchDataRef = ref(null);
 const urlCreate = ref('');
 
 const postcodesOptions = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
@@ -36,14 +32,6 @@ onBeforeMount(() => {
     getCustomsAgents();
 });
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
-    await postcodeFetchDataRef.value.fetch();
-    await townsFetchDataRef.value.fetch();
-    formData.postalCode = code;
-    formData.provinceFk = provinceFk;
-    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
-};
-
 const getCustomsAgents = async () => {
     const { data } = await axios.get('CustomsAgents');
     customsAgents.value = data;
@@ -61,26 +49,16 @@ const toCustomerConsignees = () => {
         },
     });
 };
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postalCode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
-    <FetchData
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (citiesLocationOptions = data)"
-        auto-load
-        ref="townsFetchDataRef"
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
     <fetch-data
         @on-fetch="(data) => (agencyModes = data)"
         auto-load
@@ -113,83 +91,17 @@ const toCustomerConsignees = () => {
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectDialog
-                        :label="t('Postcode')"
-                        :options="postcodesOptions"
-                        :roles-allowed-to-create="['deliveryAssistant']"
+                    <VnLocation
                         :rules="validate('Worker.postcode')"
-                        hide-selected
-                        option-label="code"
-                        option-value="code"
-                        v-model="data.postalCode"
-                    >
-                        <template #form>
-                            <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event, data)"
-                            />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ scope.opt.code }} -
-                                        {{ scope.opt.town.name }}
-                                        ({{ scope.opt.town.province.name }},
-                                        {{ scope.opt.town.province.country.country }})
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectDialog>
-                </div>
-                <div class="col">
-                    <!-- ciudades -->
-                    <VnSelectFilter
-                        :label="t('City')"
-                        :options="citiesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="name"
-                        v-model="data.city"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{
-                                            `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
-                                        }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        v-model="data.location"
+                        @update:model-value="(location) => handleLocation(data, location)"
+                    ></VnLocation>
                 </div>
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Province')"
-                        :options="provincesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.provinceFk"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{
-                                        `${scope.opt.name} (${scope.opt.country.country})`
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
                 <div class="col">
                     <VnSelectFilter
                         :label="t('Agency')"

src/pages/Customer/components/CustomerConsigneeEdit.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import axios from 'axios';
-
+import VnLocation from 'src/components/common/VnLocation.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
@@ -17,13 +17,8 @@ import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCus
 const { t } = useI18n();
 const route = useRoute();
 
-const townsFetchDataRef = ref(null);
-const postcodeFetchDataRef = ref(null);
 const urlUpdate = ref('');
-
 const postcodesOptions = ref([]);
-const citiesLocationOptions = ref([]);
-const provincesLocationOptions = ref([]);
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
@@ -34,14 +29,6 @@ onBeforeMount(() => {
     urlUpdate.value = `Clients/${route.params.id}/updateAddress/${route.params.consigneeId}`;
 });
 
-const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
-    await postcodeFetchDataRef.value.fetch();
-    await townsFetchDataRef.value.fetch();
-    formData.postalCode = code;
-    formData.provinceFk = provinceFk;
-    formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
-};
-
 const getData = async (observations) => {
     observationTypes.value = observations;
 
@@ -97,26 +84,16 @@ const onDataSaved = () => {
     };
     axios.post('AddressObservations/crud', payload);
 };
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postalCode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
-    <FetchData
-        ref="postcodeFetchDataRef"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-        url="Postcodes/location"
-    />
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (citiesLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
-    <FetchData
-        @on-fetch="(data) => (provincesLocationOptions = data)"
-        auto-load
-        url="Provinces/location"
-    />
     <fetch-data
         @on-fetch="(data) => (agencyModes = data)"
         auto-load
@@ -168,83 +145,17 @@ const onDataSaved = () => {
 
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <VnSelectDialog
-                        :label="t('Postcode')"
-                        :options="postcodesOptions"
-                        :roles-allowed-to-create="['deliveryAssistant']"
+                    <VnLocation
                         :rules="validate('Worker.postcode')"
-                        hide-selected
-                        option-label="code"
-                        option-value="code"
-                        v-model="data.postalCode"
-                    >
-                        <template #form>
-                            <CustomerCreateNewPostcode
-                                @on-data-saved="onPostcodeCreated($event, data)"
-                            />
-                        </template>
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection v-if="scope.opt">
-                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ scope.opt.code }} -
-                                        {{ scope.opt.town.name }}
-                                        ({{ scope.opt.town.province.name }},
-                                        {{ scope.opt.town.province.country.country }})
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectDialog>
-                </div>
-                <div class="col">
-                    <!-- ciudades -->
-                    <VnSelectFilter
-                        :label="t('City')"
-                        :options="citiesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="name"
-                        v-model="data.city"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{
-                                            `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
-                                        }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        v-model="data.location"
+                        @update:model-value="(location) => handleLocation(data, location)"
+                    ></VnLocation>
                 </div>
             </VnRow>
 
             <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelectFilter
-                        :label="t('Province')"
-                        :options="provincesLocationOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.provinceFk"
-                    >
-                        <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{
-                                        `${scope.opt.name} (${scope.opt.country.country})`
-                                    }}</QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelectFilter>
-                </div>
                 <div class="col">
                     <VnSelectFilter
                         :label="t('Agency')"

src/pages/Customer/components/CustomerNewPayment.vue

@@ -112,7 +112,7 @@ const onDataSaved = async () => {
             :filter="filterBanks"
             @on-fetch="(data) => (bankOptions = data)"
             auto-load
-            url="Banks"
+            url="Accountings"
         />
         <fetch-data
             :filter="filterClientFindOne"

src/pages/Department/Card/DepartmentDescriptorProxy.vue

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

src/pages/Department/Card/DepartmentSummary.vue

@@ -36,9 +36,12 @@ onMounted(async () => {
         </template>
         <template #body="{ entity: department }">
             <QCard class="column">
-                <a class="header" :href="department + `basic-data`">
+                <a
+                    class="header header-link"
+                    :href="`#/department/department/${entityId}/basic-data`"
+                >
                     {{ t('Basic data') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <div class="full-width row wrap justify-between content-between">
                     <div class="column" style="min-width: 50%">

src/pages/Department/Card/DepartmentSummaryDialog.vue

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

src/pages/Entry/Card/EntryBuysImport.vue

@@ -44,7 +44,7 @@ const columns = computed(() => [
         align: 'left',
     },
     {
-        label: t('entry.buys.description'),
+        label: t('globals.description'),
         name: 'description',
         field: 'description',
         align: 'left',
@@ -214,7 +214,7 @@ const redirectToBuysView = () => {
                                 class="cursor-pointer"
                                 @click="inputFileRef.pickFiles()"
                             >
-                                <QTooltip>{{ t('Select a file') }}</QTooltip>
+                                <QTooltip>{{ t('globals.selectFile') }}</QTooltip>
                             </QIcon>
                         </template>
                     </QFile>
@@ -292,6 +292,6 @@ const redirectToBuysView = () => {
 
 <i18n>
 es:
-    Select a file: Selecciona un fichero
+    globals.selectFile: Selecciona un fichero
     Some of the imported buys does not have an item: Algunas de las compras importadas no tienen un artículo
 </i18n>

src/pages/Entry/Card/EntryCard.vue

@@ -7,6 +7,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import EntryDescriptor from './EntryDescriptor.vue';
 
 import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -33,7 +34,9 @@ const stateStore = useStateStore();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Entry/Card/EntryDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 

src/pages/Entry/Card/EntryDms.vue

@@ -0,0 +1,11 @@
+<script setup>
+import VnDmsList from 'src/components/common/VnDmsList.vue';
+</script>
+<template>
+    <VnDmsList
+        model="EntryDms"
+        update-model="EntryDms"
+        default-dms-code="entry"
+        filter="entryFk"
+    />
+</template>

src/pages/Entry/Card/EntryNotes.vue

@@ -50,25 +50,23 @@ onMounted(() => {
                     :key="index"
                     class="row q-gutter-md q-mb-md"
                 >
-                    <div class="col-3">
-                        <VnSelectFilter
-                            :label="t('entry.notes.observationType')"
-                            v-model="row.observationTypeFk"
-                            :options="entryObservationsOptions"
-                            :disable="!!row.id"
-                            option-label="description"
-                            option-value="id"
-                            hide-selected
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            :label="t('entry.notes.description')"
-                            v-model="row.description"
-                            :rules="validate('EntryObservation.description')"
-                        />
-                    </div>
-                    <div class="col-1 row justify-center items-center">
+                    <VnSelectFilter
+                        :label="t('entry.notes.observationType')"
+                        v-model="row.observationTypeFk"
+                        :options="entryObservationsOptions"
+                        :disable="!!row.id"
+                        option-label="description"
+                        option-value="id"
+                        hide-selected
+                    />
+
+                    <VnInput
+                        :label="t('globals.description')"
+                        v-model="row.description"
+                        :rules="validate('EntryObservation.description')"
+                    />
+
+                    <div class="row justify-center items-center">
                         <QIcon
                             name="delete"
                             size="sm"
@@ -82,19 +80,17 @@ onMounted(() => {
                         </QIcon>
                     </div>
                 </VnRow>
-                <VnRow>
-                    <QIcon
-                        name="add"
-                        size="sm"
-                        class="cursor-pointer"
-                        color="primary"
-                        @click="entryObservationsRef.insert()"
-                    >
-                        <QTooltip>
-                            {{ t('Add note') }}
-                        </QTooltip>
-                    </QIcon>
-                </VnRow>
+                <QIcon
+                    name="add"
+                    size="sm"
+                    class="cursor-pointer"
+                    color="primary"
+                    @click="entryObservationsRef.insert()"
+                >
+                    <QTooltip>
+                        {{ t('Add note') }}
+                    </QTooltip>
+                </QIcon>
             </QCard>
         </template>
     </CrudModel>

src/pages/Entry/Card/EntrySummary.vue

@@ -39,30 +39,47 @@ onMounted(async () => {
 const tableColumnComponents = {
     quantity: {
         component: () => 'span',
+        props: () => {},
     },
     stickers: {
         component: () => 'span',
+        props: () => {},
+        event: () => {},
     },
     packagingFk: {
         component: () => 'span',
+        props: () => {},
+        event: () => {},
     },
     weight: {
         component: () => 'span',
+        props: () => {},
+        event: () => {},
     },
     packing: {
         component: () => 'span',
+        props: () => {},
+        event: () => {},
     },
     grouping: {
         component: () => 'span',
+        props: () => {},
+        event: () => {},
     },
     buyingValue: {
         component: () => 'span',
+        props: () => {},
+        event: () => {},
     },
     amount: {
         component: () => 'span',
+        props: () => {},
+        event: () => {},
     },
     pvp: {
         component: () => 'span',
+        props: () => {},
+        event: () => {},
     },
 };
 
@@ -148,7 +165,7 @@ const fetchEntryBuys = async () => {
         @on-fetch="(data) => setEntryData(data)"
     >
         <template #header-left>
-            <a class="header link" :href="entryUrl">
+            <a class="header-link" :href="entryUrl">
                 <QIcon name="open_in_new" color="white" size="sm" />
             </a>
         </template>
@@ -158,133 +175,104 @@ const fetchEntryBuys = async () => {
 
         <template #body>
             <QCard class="vn-one">
-                <a class="header link" :href="entryUrl">
+                <a class="header header-link" :href="`#/entry/${entityId}/basic-data`">
                     {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
-                <VnRow>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.commission')"
-                            :value="entry.commission"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.currency')"
-                            :value="entry.currency.name"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.company')"
-                            :value="entry.company.code"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.reference')"
-                            :value="entry.reference"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.invoiceNumber')"
-                            :value="entry.invoiceNumber"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.ordered')"
-                            :value="entry.isOrdered"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.confirmed')"
-                            :value="entry.isConfirmed"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.booked')"
-                            :value="entry.isBooked"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv :label="t('entry.summary.raid')" :value="entry.isRaid" />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.excludedFromAvailable')"
-                            :value="entry.isExcludedFromAvailable"
-                        />
-                    </div>
-                </VnRow>
+
+                <VnLv :label="t('entry.summary.commission')" :value="entry.commission" />
+
+                <VnLv :label="t('entry.summary.currency')" :value="entry.currency.name" />
+
+                <VnLv :label="t('entry.summary.company')" :value="entry.company.code" />
+
+                <VnLv :label="t('entry.summary.reference')" :value="entry.reference" />
+
+                <VnLv
+                    :label="t('entry.summary.invoiceNumber')"
+                    :value="entry.invoiceNumber"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.ordered')"
+                    v-model="entry.isOrdered"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.confirmed')"
+                    v-model="entry.isConfirmed"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.booked')"
+                    v-model="entry.isBooked"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.raid')"
+                    v-model="entry.isRaid"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('entry.summary.excludedFromAvailable')"
+                    v-model="entry.isExcludedFromAvailable"
+                    :disable="true"
+                />
             </QCard>
             <QCard class="vn-one">
-                <a class="header link" :href="entryUrl">
+                <a class="header header-link" :href="entryUrl">
                     {{ t('Travel data') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
-                <VnRow>
-                    <div class="col">
-                        <VnLv :label="t('entry.summary.travelReference')">
-                            <template #value>
-                                <span class="link">
-                                    {{ entry.travel.ref }}
-                                    <TravelDescriptorProxy :id="entry.travel.id" />
-                                </span>
-                            </template>
-                        </VnLv>
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.travelAgency')"
-                            :value="entry.travel.agency.name"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.travelShipped')"
-                            :value="toDate(entry.travel.shipped)"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.travelWarehouseOut')"
-                            :value="entry.travel.warehouseOut.name"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.travelDelivered')"
-                            :value="entry.travel.isDelivered"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.travelLanded')"
-                            :value="toDate(entry.travel.landed)"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.travelWarehouseIn')"
-                            :value="entry.travel.warehouseIn.name"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnLv
-                            :label="t('entry.summary.travelReceived')"
-                            :value="entry.travel.isReceived"
-                        />
-                    </div>
-                </VnRow>
+
+                <VnLv :label="t('entry.summary.travelReference')">
+                    <template #value>
+                        <span class="link">
+                            {{ entry.travel.ref }}
+                            <TravelDescriptorProxy :id="entry.travel.id" />
+                        </span>
+                    </template>
+                </VnLv>
+
+                <VnLv
+                    :label="t('entry.summary.travelAgency')"
+                    :value="entry.travel.agency.name"
+                />
+
+                <VnLv
+                    :label="t('entry.summary.travelShipped')"
+                    :value="toDate(entry.travel.shipped)"
+                />
+
+                <VnLv
+                    :label="t('entry.summary.travelWarehouseOut')"
+                    :value="entry.travel.warehouseOut.name"
+                />
+
+                <QCheckbox
+                    :label="t('entry.summary.travelDelivered')"
+                    v-model="entry.isDelivered"
+                    :disable="true"
+                />
+                <VnLv
+                    :label="t('entry.summary.travelLanded')"
+                    :value="toDate(entry.travel.landed)"
+                />
+
+                <VnLv
+                    :label="t('entry.summary.travelWarehouseIn')"
+                    :value="entry.travel.warehouseIn.name"
+                />
+
+                <QCheckbox
+                    :label="t('entry.summary.travelReceived')"
+                    v-model="entry.isReceived"
+                    :disable="true"
+                />
             </QCard>
             <QCard class="vn-two" style="min-width: 100%">
-                <a class="header">
+                <a class="header header-link">
                     {{ t('entry.summary.buys') }}
+                    <QIcon name="open_in_new" />
                 </a>
                 <QTable
                     :rows="entryBuys"
@@ -297,7 +285,10 @@ const fetchEntryBuys = async () => {
                         <QTr no-hover>
                             <QTd v-for="col in cols" :key="col.name">
                                 <component
-                                    :is="tableColumnComponents[col.name].component()"
+                                    :is="tableColumnComponents[col.name].component(props)"
+                                    v-bind="tableColumnComponents[col.name].props(props)"
+                                    @click="tableColumnComponents[col.name].event(props)"
+                                    class="col-content"
                                 >
                                     <template
                                         v-if="

src/pages/Entry/EntryLatestBuys.vue

@@ -59,7 +59,7 @@ const columns = computed(() => [
         align: 'left',
     },
     {
-        label: t('entry.latestBuys.description'),
+        label: t('globals.description'),
         field: 'description',
         name: 'description',
         align: 'left',
@@ -214,7 +214,7 @@ const editTableCellFormFieldsOptions = [
     { field: 'grouping', label: t('entry.latestBuys.grouping') },
     { field: 'packageValue', label: t('entry.latestBuys.packageValue') },
     { field: 'weight', label: t('entry.latestBuys.weight') },
-    { field: 'description', label: t('entry.latestBuys.description') },
+    { field: 'description', label: t('globals.description') },
     { field: 'size', label: t('entry.latestBuys.size') },
     { field: 'weightByPiece', label: t('entry.latestBuys.weightByPiece') },
     { field: 'packingOut', label: t('entry.latestBuys.packingOut') },

src/pages/InvoiceIn/Card/InvoiceInBasicData.vue

@@ -174,7 +174,12 @@ async function upsert() {
         @on-fetch="(data) => (userConfig = data)"
         auto-load
     />
-    <FormModel v-if="invoiceIn" :url="`InvoiceIns/${route.params.id}`" model="invoiceIn">
+    <FormModel
+        v-if="invoiceIn"
+        :url="`InvoiceIns/${route.params.id}`"
+        model="invoiceIn"
+        :auto-load="true"
+    >
         <template #form="{ data }">
             <div class="row q-gutter-md q-mb-md">
                 <div class="col">
@@ -186,6 +191,7 @@ async function upsert() {
                         url="Suppliers"
                         :fields="['id', 'nickname']"
                         sort-by="nickname"
+                        :is-clearable="false"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -508,7 +514,7 @@ async function upsert() {
                                 @click="inputFileRef.pickFiles()"
                             >
                                 <QTooltip>
-                                    {{ t('Select a file') }}
+                                    {{ t('globals.selectFile') }}
                                 </QTooltip>
                             </QBtn>
                             <QBtn icon="info" flat round padding="xs">
@@ -617,7 +623,7 @@ async function upsert() {
                                 @click="inputFileRef.pickFiles()"
                             >
                                 <QTooltip>
-                                    {{ t('Select a file') }}
+                                    {{ t('globals.selectFile') }}
                                 </QTooltip>
                             </QBtn>
                             <QBtn icon="info" flat round padding="xs">
@@ -686,7 +692,6 @@ async function upsert() {
         Generate identifier for original file: Generar identificador para archivo original
         File: Fichero
         Create document: Crear documento
-        Select a file: Seleccione un fichero
         Allowed content types: Tipos de archivo permitidos
         The company can't be empty: La empresa no puede estar vacía
         The warehouse can't be empty: El almacén no puede estar vacío

src/pages/InvoiceIn/Card/InvoiceInCard.vue

@@ -8,6 +8,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -74,7 +75,9 @@ watch(
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/InvoiceIn/Card/InvoiceInDueDay.vue

@@ -8,6 +8,7 @@ import { useArrayData } from 'src/composables/useArrayData';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -74,7 +75,12 @@ async function insert() {
 }
 </script>
 <template>
-    <FetchData url="Banks" auto-load limit="30" @on-fetch="(data) => (banks = data)" />
+    <FetchData
+        url="Accountings"
+        auto-load
+        limit="30"
+        @on-fetch="(data) => (banks = data)"
+    />
     <CrudModel
         v-if="invoiceIn"
         ref="invoiceInFormRef"
@@ -158,7 +164,12 @@ async function insert() {
                 </template>
                 <template #body-cell-amount="{ row }">
                     <QTd>
-                        <QInput v-model="row.amount" clearable clear-icon="close" />
+                        <VnCurrency
+                            v-model="row.amount"
+                            :is-outlined="false"
+                            clearable
+                            clear-icon="close"
+                        />
                     </QTd>
                 </template>
                 <template #body-cell-foreignvalue="{ row }">

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -209,9 +209,9 @@ function getLink(param) {
             <!--Basic Data-->
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header" :href="getLink('basic-data')">
+                    <a class="header header-link" :href="getLink('basic-data')">
                         {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
+                        <QIcon name="open_in_new" />
                     </a>
                 </QCardSection>
                 <VnLv
@@ -233,9 +233,9 @@ function getLink(param) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header" :href="getLink('basic-data')">
+                    <a class="header header-link" :href="getLink('basic-data')">
                         {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
+                        <QIcon name="open_in_new" />
                     </a>
                 </QCardSection>
                 <VnLv
@@ -258,9 +258,9 @@ function getLink(param) {
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header" :href="getLink('basic-data')">
+                    <a class="header header-link" :href="getLink('basic-data')">
                         {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
+                        <QIcon name="open_in_new" />
                     </a>
                 </QCardSection>
                 <VnLv
@@ -275,16 +275,17 @@ function getLink(param) {
                     :label="t('invoiceIn.summary.company')"
                     :value="invoiceIn.company?.code"
                 />
-                <VnLv
+                <QCheckbox
                     :label="t('invoiceIn.summary.booked')"
-                    :value="invoiceIn.isBooked"
+                    v-model="invoiceIn.isBooked"
+                    :disable="true"
                 />
             </QCard>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a class="header" :href="getLink('basic-data')">
+                    <a class="header header-link" :href="getLink('basic-data')">
                         {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
+                        <QIcon name="open_in_new" />
                     </a>
                 </QCardSection>
                 <QCardSection class="q-pa-none">
@@ -318,9 +319,9 @@ function getLink(param) {
             </QCard>
             <!--Vat-->
             <QCard v-if="invoiceIn.invoiceInTax.length">
-                <a class="header" :href="getLink('vat')">
+                <a class="header header-link" :href="getLink('vat')">
                     {{ t('invoiceIn.card.vat') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <QTable
                     :columns="vatColumns"
@@ -351,9 +352,9 @@ function getLink(param) {
             </QCard>
             <!--Due Day-->
             <QCard v-if="invoiceIn.invoiceInDueDay.length">
-                <a class="header" :href="getLink('due-day')">
+                <a class="header header-link" :href="getLink('due-day')">
                     {{ t('invoiceIn.card.dueDay') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <QTable
                     class="full-width"
@@ -381,9 +382,9 @@ function getLink(param) {
             </QCard>
             <!--Intrastat-->
             <QCard v-if="invoiceIn.invoiceInIntrastat.length">
-                <a class="header" :href="getUrl('intrastat')">
+                <a class="header header-link" :href="getLink('intrastat')">
                     {{ t('invoiceIn.card.intrastat') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <QTable
                     :columns="intrastatColumns"

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -9,6 +9,7 @@ import { toCurrency } from 'src/filters';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import CrudModel from 'src/components/CrudModel.vue';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -225,7 +226,7 @@ async function addExpense() {
                 </template>
                 <template #body-cell-taxablebase="{ row }">
                     <QTd>
-                        <QInput
+                        <VnCurrency
                             :class="{
                                 'no-pointer-events': isNotEuro(invoiceIn.currency.code),
                             }"
@@ -234,11 +235,7 @@ async function addExpense() {
                             clear-icon="close"
                             v-model="row.taxableBase"
                             clearable
-                        >
-                            <template #prepend>
-                                <QIcon name="euro" size="xs" flat />
-                            </template>
-                        </QInput>
+                        />
                     </QTd>
                 </template>
                 <template #body-cell-sageiva="{ row, col }">
@@ -328,7 +325,7 @@ async function addExpense() {
                                     </VnSelectFilter>
                                 </QItem>
                                 <QItem>
-                                    <QInput
+                                    <VnCurrency
                                         :label="t('Taxable base')"
                                         :class="{
                                             'no-pointer-events': isNotEuro(
@@ -340,11 +337,7 @@ async function addExpense() {
                                         clear-icon="close"
                                         v-model="props.row.taxableBase"
                                         clearable
-                                    >
-                                        <template #append>
-                                            <QIcon name="euro" size="xs" flat />
-                                        </template>
-                                    </QInput>
+                                    />
                                 </QItem>
                                 <QItem>
                                     <VnSelectFilter

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -8,6 +8,7 @@ import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import { useCapitalize } from 'src/composables/useCapitalize';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -137,16 +138,7 @@ const suppliersRef = ref();
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
-                        :label="t('Amount')"
-                        v-model="params.amount"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="euro" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
+                    <VnCurrency v-model="params.amount" is-outlined />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-md">

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -5,6 +5,7 @@ import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -28,7 +29,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/InvoiceOut/Card/InvoiceOutSummary.vue

@@ -101,9 +101,10 @@ const ticketsColumns = ref([
         </template>
         <template #body="{ entity: { invoiceOut } }">
             <QCard class="vn-one">
-                <div class="header">
+                <a class="header header-link">
                     {{ t('invoiceOut.pageTitles.basicData') }}
-                </div>
+                    <QIcon name="open_in_new" />
+                </a>
                 <VnLv
                     :label="t('invoiceOut.summary.issued')"
                     :value="toDate(invoiceOut.issued)"
@@ -126,9 +127,10 @@ const ticketsColumns = ref([
                 />
             </QCard>
             <QCard class="vn-three">
-                <div class="header">
+                <a class="header header-link">
                     {{ t('invoiceOut.summary.taxBreakdown') }}
-                </div>
+                    <QIcon name="open_in_new" />
+                </a>
                 <QTable :columns="taxColumns" :rows="invoiceOut.taxesBreakdown" flat>
                     <template #header="props">
                         <QTr :props="props">
@@ -140,9 +142,10 @@ const ticketsColumns = ref([
                 </QTable>
             </QCard>
             <QCard class="vn-three">
-                <div class="header">
+                <a class="header header-link">
                     {{ t('invoiceOut.summary.tickets') }}
-                </div>
+                    <QIcon name="open_in_new" />
+                </a>
                 <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
                     <template #header="props">
                         <QTr :props="props">

src/pages/InvoiceOut/InvoiceOutFilter.vue

@@ -6,6 +6,7 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -57,7 +58,11 @@ function setWorkers(data) {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput :label="t('Amount')" v-model="params.amount" is-outlined />
+                    <VnCurrency
+                        :label="t('Amount')"
+                        v-model="params.amount"
+                        is-outlined
+                    />
                 </QItemSection>
             </QItem>
             <QItem>

src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -84,7 +85,7 @@ const props = defineProps({
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
+                    <VnCurrency
                         v-model="params.amount"
                         :label="t('invoiceOut.negativeBases.amount')"
                         is-outlined

src/pages/Item/Card/ItemCard.vue

@@ -4,6 +4,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import ItemDescriptor from './ItemDescriptor.vue';
 
 import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 </script>
@@ -19,7 +20,9 @@ const stateStore = useStateStore();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Item/Card/ItemDescriptor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { computed, ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
@@ -14,6 +14,7 @@ import EditPictureForm from 'components/EditPictureForm.vue';
 import { useState } from 'src/composables/useState';
 import useCardDescription from 'src/composables/useCardDescription';
 import { useSession } from 'src/composables/useSession';
+import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 
 const $props = defineProps({
@@ -30,6 +31,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    saleFk: {
+        type: Number,
+        default: null,
+    },
 });
 
 const quasar = useQuasar();
@@ -51,6 +56,7 @@ const available = ref(null);
 const visible = ref(null);
 const _warehouseFk = ref(null);
 const warehouseText = ref(null);
+const salixUrl = ref();
 const warehouseFk = computed({
     get() {
         return _warehouseFk.value;
@@ -69,6 +75,7 @@ const showEditPhotoForm = ref(false);
 onMounted(async () => {
     await getItemAvatar();
     warehouseFk.value = user.value.warehouseFk;
+    salixUrl.value = await getUrl('');
 });
 
 const getItemAvatar = async () => {
@@ -276,7 +283,16 @@ const openCloneDialog = async () => {
         <template #actions="{}">
             <QCardActions class="row justify-center">
                 <QBtn
-                    :to="{ name: 'ItemDiary' }"
+                    :href="
+                        salixUrl +
+                        'item/' +
+                        entityId +
+                        '/diary?' +
+                        'warehouseFk=' +
+                        warehouseFk +
+                        '&lineFk=' +
+                        $props.saleFk
+                    "
                     size="md"
                     icon="vn:transaction"
                     color="primary"

src/pages/Item/Card/ItemDescriptorProxy.vue

@@ -11,6 +11,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    saleFk: {
+        type: Number,
+        default: null,
+    },
 });
 </script>
 
@@ -21,6 +25,7 @@ const $props = defineProps({
             :id="$props.id"
             :summary="ItemSummary"
             :dated="dated"
+            :sale-fk="saleFk"
         />
     </QPopupProxy>
 </template>

src/pages/Login/LoginMain.vue

@@ -69,12 +69,12 @@ async function onSubmit() {
 <template>
     <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
         <VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
-
         <VnInput
             v-model="username"
             :label="t('login.username')"
             lazy-rules
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
+            color="primary"
         />
         <VnInput
             type="password"
@@ -82,9 +82,8 @@ async function onSubmit() {
             :label="t('login.password')"
             lazy-rules
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
+            class="red"
         />
-        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
-
         <div>
             <QBtn
                 :label="t('login.submit')"
@@ -95,6 +94,7 @@ async function onSubmit() {
                 unelevated
             />
         </div>
+        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
     </QForm>
 </template>
 
@@ -104,6 +104,9 @@ async function onSubmit() {
     min-width: 300px;
 }
 
+.q-input {
+    color: $primary;
+}
 @media (max-width: $breakpoint-xs-max) {
     .formCard {
         min-width: 100%;

src/pages/Login/VerifyEmail.vue

@@ -99,6 +99,8 @@ onMounted(async () => {
 </i18n>
 
 <style lang="scss">
+$vnColor: #8ebb27;
+
 .formCard {
     max-width: 1500px;
     min-width: 700px;

src/pages/Order/Card/OrderSummary.vue

@@ -31,7 +31,7 @@ const detailsColumns = ref([
     },
     {
         name: 'description',
-        label: t('order.summary.description'),
+        label: t('globals.description'),
         field: (row) => row?.item?.name,
     },
     {
@@ -167,7 +167,7 @@ const detailsColumns = ref([
                         <template #header="props">
                             <QTr :props="props">
                                 <QTh auto-width>{{ t('order.summary.item') }}</QTh>
-                                <QTh>{{ t('order.summary.description') }}</QTh>
+                                <QTh>{{ t('globals.description') }}</QTh>
                                 <QTh auto-width>{{ t('order.summary.quantity') }}</QTh>
                                 <QTh auto-width>{{ t('order.summary.price') }}</QTh>
                                 <QTh auto-width>{{ t('order.summary.amount') }}</QTh>

src/pages/Route/Card/RouteSummary.vue

@@ -199,7 +199,7 @@ const openBuscaman = async (route, ticket) => {
                 </QCard>
                 <QCard class="vn-one">
                     <div class="header">
-                        {{ t('route.summary.description') }}
+                        {{ t('globals.description') }}
                     </div>
                     <p>
                         {{ dashIfEmpty(entity?.route?.description) }}

src/pages/Shelving/Card/ShelvingSummary.vue

@@ -6,7 +6,7 @@ import { useStateStore } from 'stores/useStateStore';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
-import VnUserLink from "components/ui/VnUserLink.vue";
+import VnUserLink from 'components/ui/VnUserLink.vue';
 
 const $props = defineProps({
     id: {
@@ -71,11 +71,11 @@ const filter = {
             <template #body="{ entity }">
                 <QCard class="vn-one">
                     <RouterLink
-                        class="header"
+                        class="header header-link"
                         :to="{ name: 'ShelvingBasicData', params: { id: entityId } }"
                     >
                         {{ t('shelving.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
+                        <QIcon name="open_in_new" />
                     </RouterLink>
                     <VnLv :label="t('shelving.summary.code')" :value="entity.code" />
                     <VnLv

src/pages/Supplier/Card/SupplierAddressesCreate.vue

@@ -10,6 +10,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -55,27 +56,16 @@ onMounted(() => {
         updateAddressForm(addressData);
     }
 });
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postalCode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
-    <FetchData
-        ref="postcodeFetchDataRef"
-        url="Postcodes/location"
-        @on-fetch="(data) => (postcodesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        ref="provincesFetchDataRef"
-        @on-fetch="(data) => (provincesOptions = data)"
-        auto-load
-        url="Provinces"
-    />
-    <FetchData
-        ref="townsFetchDataRef"
-        @on-fetch="(data) => (townsLocationOptions = data)"
-        auto-load
-        url="Towns/location"
-    />
     <QPage>
         <FormModel
             model="supplierAddresses"
@@ -104,59 +94,15 @@ onMounted(() => {
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <VnSelectDialog
-                            v-model="data.postalCode"
-                            :label="t('supplier.addresses.postcode')"
-                            :rules="validate('supplierAddress.postcode')"
+                        <VnLocation
+                            :rules="validate('Worker.postcode')"
                             :roles-allowed-to-create="['deliveryAssistant']"
                             :options="postcodesOptions"
-                            option-label="code"
-                            option-value="code"
-                            hide-selected
-                        >
-                            <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>
-                        </VnSelectDialog>
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('supplier.addresses.city')"
-                            :options="townsLocationOptions"
-                            v-model="data.city"
-                            hide-selected
-                            option-label="name"
-                            option-value="id"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnSelectFilter
-                            :label="t('supplier.addresses.province')"
-                            :options="provincesOptions"
-                            hide-selected
-                            map-options
-                            option-label="name"
-                            option-value="id"
-                            v-model="data.provinceFk"
-                        />
+                            v-model="data.location"
+                            @update:model-value="
+                                (location) => handleLocation(data, location)
+                            "
+                        ></VnLocation>
                     </div>
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">

src/pages/Supplier/Card/SupplierCard.vue

@@ -5,6 +5,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import SupplierDescriptor from './SupplierDescriptor.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -30,7 +31,9 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Supplier/Card/SupplierFiscalData.vue

@@ -21,7 +21,7 @@ const postcodesOptions = ref([]);
 
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
-    data.postcode = code;
+    data.postCode = code;
     data.city = town;
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;

src/pages/Supplier/Card/SupplierSummary.vue

@@ -52,7 +52,7 @@ const isAdministrative = computed(() => {
         @on-fetch="(data) => setData(data)"
     >
         <template #header-left>
-            <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+            <a v-if="isAdministrative" class="header header-link" :href="supplierUrl">
                 <QIcon name="open_in_new" color="white" size="sm" />
             </a>
         </template>
@@ -62,9 +62,13 @@ const isAdministrative = computed(() => {
 
         <template #body>
             <QCard class="vn-one">
-                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                <a
+                    v-if="isAdministrative"
+                    class="header header-link"
+                    :href="`#/supplier/${entityId}/basic-data`"
+                >
                     {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <span v-else> {{ t('globals.summary.basicData') }}</span>
                 <VnLv label="Id" :value="supplier.id" />
@@ -82,32 +86,25 @@ const isAdministrative = computed(() => {
                         <span> {{ dashIfEmpty(supplier.note) }} </span>
                     </template>
                 </VnLv>
-
-                <VnLv :label="t('supplier.summary.verified')" class="q-mb-xs">
-                    <template #value>
-                        <QCheckbox
-                            v-model="supplier.isSerious"
-                            dense
-                            disable
-                            class="full-width q-mb-xs"
-                        />
-                    </template>
-                </VnLv>
-                <VnLv :label="t('supplier.summary.isActive')" class="q-mb-xs">
-                    <template #value>
-                        <QCheckbox
-                            v-model="supplier.isActive"
-                            dense
-                            disable
-                            class="full-width q-mb-xs"
-                        />
-                    </template>
-                </VnLv>
+                <QCheckbox
+                    :label="t('supplier.summary.verified')"
+                    v-model="supplier.isSerious"
+                    :disable="true"
+                />
+                <QCheckbox
+                    :label="t('supplier.summary.isActive')"
+                    v-model="supplier.isActive"
+                    :disable="true"
+                />
             </QCard>
             <QCard class="vn-one">
-                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                <a
+                    v-if="isAdministrative"
+                    class="header header-link"
+                    :href="`#/supplier/${entityId}/billing-data`"
+                >
                     {{ t('supplier.summary.billingData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <span v-else> {{ t('supplier.summary.billingData') }}</span>
                 <VnLv
@@ -124,9 +121,13 @@ const isAdministrative = computed(() => {
                 <VnLv :label="t('supplier.summary.account')" :value="supplier.account" />
             </QCard>
             <QCard class="vn-one">
-                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                <a
+                    v-if="isAdministrative"
+                    class="header header-link"
+                    :href="`#/supplier/${entityId}/fiscal-data`"
+                >
                     {{ t('supplier.summary.fiscalData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <span v-else> {{ t('supplier.summary.fiscalData') }}</span>
                 <VnLv
@@ -155,9 +156,13 @@ const isAdministrative = computed(() => {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a v-if="isAdministrative" class="header link" :href="supplierUrl">
+                <a
+                    v-if="isAdministrative"
+                    class="header header-link"
+                    :href="`#/supplier/${entityId}/fiscal-data`"
+                >
                     {{ t('supplier.summary.fiscalAddress') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <span v-else> {{ t('supplier.summary.fiscalAddress') }}</span>
                 <VnLv :label="t('supplier.summary.socialName')" :value="supplier.name" />

src/pages/Ticket/Card/TicketCard.vue

@@ -5,6 +5,7 @@ import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -29,7 +30,9 @@ const { t } = useI18n();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Ticket/Card/TicketDescriptor.vue

@@ -88,14 +88,6 @@ const setData = (entity) =>
             <TicketDescriptorMenu :ticket="entity" />
         </template>
         <template #body="{ entity }">
-            <VnLv v-if="entity.ticketState" :label="t('ticket.card.state')">
-                <template #value>
-                    <QBadge :color="entity.ticketState.state.classColor">
-                        {{ entity.ticketState.state.name }}
-                    </QBadge>
-                </template>
-            </VnLv>
-            <VnLv :label="t('ticket.card.shipped')" :value="toDate(entity.shipped)" />
             <VnLv :label="t('ticket.card.customerId')">
                 <template #value>
                     <span class="link">
@@ -104,6 +96,13 @@ const setData = (entity) =>
                     </span>
                 </template>
             </VnLv>
+            <VnLv v-if="entity.ticketState" :label="t('ticket.card.state')">
+                <template #value>
+                    <QBadge :color="entity.ticketState.state.classColor">
+                        {{ entity.ticketState.state.name }}
+                    </QBadge>
+                </template>
+            </VnLv>
             <VnLv :label="t('ticket.summary.salesPerson')">
                 <template #value>
                     <VnUserLink
@@ -112,12 +111,14 @@ const setData = (entity) =>
                     />
                 </template>
             </VnLv>
-            <VnLv :label="t('ticket.card.warehouse')" :value="entity.warehouse?.name" />
+            <VnLv :label="t('ticket.card.shipped')" :value="toDate(entity.shipped)" />
             <VnLv
                 v-if="entity.agencyMode"
                 :label="t('ticket.card.agency')"
                 :value="entity.agencyMode.name"
             />
+            <VnLv :label="t('ticket.card.warehouse')" :value="entity.warehouse?.name" />
+            <VnLv :label="t('ticket.card.alias')" :value="entity.nickname" />
         </template>
         <template #icons="{ entity }">
             <QCardActions>

src/pages/Ticket/Card/TicketSummary.vue

@@ -147,9 +147,9 @@ async function changeState(value) {
                 </div>
             </QCard>
             <QCard class="vn-one">
-                <a class="header link" :href="ticketUrl + 'basic-data/step-one'">
+                <a class="header header-link" :href="ticketUrl + 'basic-data/step-one'">
                     {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <VnLv :label="t('ticket.summary.state')">
                     <template #value>
@@ -193,9 +193,9 @@ async function changeState(value) {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a class="header link" :href="ticketUrl + 'basic-data/step-one'">
+                <a class="header header-link" :href="ticketUrl + 'basic-data/step-one'">
                     {{ t('globals.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <VnLv
                     :label="t('ticket.summary.shipped')"
@@ -236,9 +236,9 @@ async function changeState(value) {
                 />
             </QCard>
             <QCard class="vn-one">
-                <a class="header link" :href="ticketUrl + 'observation'">
+                <a class="header header-link" :href="ticketUrl + 'observation'">
                     {{ t('ticket.pageTitles.notes') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <VnLv
                     v-for="note in ticket.notes"
@@ -258,9 +258,9 @@ async function changeState(value) {
                 </VnLv>
             </QCard>
             <QCard class="vn-max">
-                <a class="header link" :href="ticketUrl + 'sale'">
+                <a class="header header-link" :href="ticketUrl + 'sale'">
                     {{ t('ticket.summary.saleLines') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <QTable :rows="ticket.sales">
                     <template #header="props">
@@ -270,7 +270,7 @@ async function changeState(value) {
                             <QTh auto-width>{{ t('ticket.summary.visible') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.available') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.quantity') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.description') }}</QTh>
+                            <QTh auto-width>{{ t('globals.description') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.discount') }}</QTh>
                             <QTh auto-width>{{ t('globals.amount') }}</QTh>
@@ -396,9 +396,9 @@ async function changeState(value) {
                 class="vn-max"
                 v-if="ticket.packagings.length > 0 || ticket.services.length > 0"
             >
-                <a class="header link" :href="ticketUrl + 'package'">
+                <a class="header header-link" :href="ticketUrl + 'package'">
                     {{ t('globals.packages') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <QTable :rows="ticket.packagings" flat>
                     <template #header="props">
@@ -417,15 +417,15 @@ async function changeState(value) {
                     </template>
                 </QTable>
 
-                <a class="header link q-mt-xl" :href="ticketUrl + 'service'">
+                <a class="header header-link q-mt-xl" :href="ticketUrl + 'service'">
                     {{ t('ticket.summary.service') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <QTable :rows="ticket.services" flat>
                     <template #header="props">
                         <QTr :props="props">
                             <QTh auto-width>{{ t('ticket.summary.quantity') }}</QTh>
-                            <QTh auto-width>{{ t('ticket.summary.description') }}</QTh>
+                            <QTh auto-width>{{ t('globals.description') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.price') }}</QTh>
                             <QTh auto-width>{{ t('ticket.summary.taxClass') }}</QTh>
                             <QTh auto-width>{{ t('globals.amount') }}</QTh>

src/pages/Travel/Card/TravelCard.vue

@@ -3,6 +3,7 @@ import { useStateStore } from 'stores/useStateStore';
 import TravelDescriptor from './TravelDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 </script>
@@ -17,7 +18,9 @@ const stateStore = useStateStore();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Travel/Card/TravelSummary.vue

@@ -269,15 +269,11 @@ async function setTravelData(travelData) {
                     :label="t('globals.wareHouseOut')"
                     :value="travel.warehouseOut?.name"
                 />
-                <VnLv :label="t('travel.summary.delivered')" class="q-mb-xs">
-                    <template #value>
-                        <QIcon
-                            :name="travel.isDelivered ? 'check' : 'close'"
-                            :color="travel.isDelivered ? 'positive' : 'negative'"
-                            size="sm"
-                        />
-                    </template>
-                </VnLv>
+                <QCheckbox
+                    :label="t('travel.summary.delivered')"
+                    v-model="travel.isDelivered"
+                    :disable="true"
+                />
             </QCard>
             <QCard class="vn-one">
                 <VnLv :label="t('globals.landed')" :value="toDate(travel.landed)" />
@@ -285,15 +281,11 @@ async function setTravelData(travelData) {
                     :label="t('globals.wareHouseIn')"
                     :value="travel.warehouseIn?.name"
                 />
-                <VnLv :label="t('travel.summary.received')" class="q-mb-xs">
-                    <template #value>
-                        <QIcon
-                            :name="travel.isReceived ? 'check' : 'close'"
-                            :color="travel.isReceived ? 'positive' : 'negative'"
-                            size="sm"
-                        />
-                    </template>
-                </VnLv>
+                <QCheckbox
+                    :label="t('travel.summary.received')"
+                    v-model="travel.isReceived"
+                    :disable="true"
+                />
             </QCard>
             <QCard class="vn-one">
                 <VnLv :label="t('globals.agency')" :value="travel.agency?.name" />
@@ -302,7 +294,7 @@ async function setTravelData(travelData) {
                 <VnLv :label="t('globals.totalEntries')" :value="travel.totalEntries" />
             </QCard>
             <QCard class="full-width" v-if="entriesTableRows.length > 0">
-                <span class="header">
+                <span class="header header-link">
                     {{ t('travel.summary.entries') }}
                 </span>
                 <QTable
@@ -361,14 +353,14 @@ async function setTravelData(travelData) {
 
             <QCard class="full-width" v-if="thermographs.length > 0">
                 <RouterLink
-                    class="header"
+                    class="header header-link"
                     :to="{
                         name: 'TravelThermographsIndex',
                         params: { id: travel.id },
                     }"
                 >
                     {{ t('travel.summary.thermographs') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </RouterLink>
                 <QTable
                     :rows="thermographs"

src/pages/Travel/Card/TravelThermographsForm.vue

@@ -300,7 +300,7 @@ const onThermographCreated = async (data) => {
                 <VnRow v-if="viewAction === 'edit'" class="row q-gutter-md q-mb-md">
                     <div class="col">
                         <QInput
-                            :label="t('travel.thermographs.description')"
+                            :label="t('globals.description')"
                             type="textarea"
                             v-model="thermographForm.description"
                             fill-input

src/pages/Travel/ExtraCommunity.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
-import { QBtn, QField, QPopupEdit } from 'quasar';
+import { onMounted, ref, computed, watch } from 'vue';
+import { QBtn } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -46,7 +46,12 @@ const arrayData = useArrayData('ExtraCommunity', {
     },
 });
 
-const rows = computed(() => arrayData.store.data || []);
+const rows = ref([]);
+const originalRowDataCopy = ref([]);
+const draggedRowIndex = ref(null);
+const targetRowIndex = ref(null);
+const entryRowIndex = ref(null);
+const draggedEntry = ref(null);
 
 const tableColumnComponents = {
     id: {
@@ -55,7 +60,12 @@ const tableColumnComponents = {
     },
     cargoSupplierNickname: {
         component: QBtn,
-        attrs: { flat: true, color: 'primary', dense: true },
+        attrs: {
+            flat: true,
+            color: 'primary',
+            dense: true,
+            class: 'supplier-name-button',
+        },
     },
     agencyModeName: {
         component: 'span',
@@ -66,16 +76,24 @@ const tableColumnComponents = {
         attrs: {},
     },
     ref: {
-        component: QField,
-        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
+        component: VnInput,
+        attrs: { dense: true },
+        event: (val, field, rowIndex) => ({
+            'keyup.enter': () => saveFieldValue(val, field, rowIndex),
+            blur: () => saveFieldValue(val, field, rowIndex),
+        }),
     },
     stickers: {
         component: 'span',
         attrs: {},
     },
     kg: {
-        component: QField,
-        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
+        component: VnInput,
+        attrs: { dense: true, type: 'number', min: 0, class: 'input-number' },
+        event: (val, field, rowIndex) => ({
+            'keyup.enter': () => saveFieldValue(val, field, rowIndex),
+            blur: () => saveFieldValue(val, field, rowIndex),
+        }),
     },
     loadedKg: {
         component: 'span',
@@ -199,7 +217,7 @@ const columns = computed(() => [
         align: 'left',
         showValue: true,
         sortable: true,
-        format: (value) => toDate(value.substring(0, 10)),
+        format: (value) => toDate(value),
     },
     {
         label: t('globals.wareHouseIn'),
@@ -216,7 +234,7 @@ const columns = computed(() => [
         align: 'left',
         showValue: true,
         sortable: true,
-        format: (value) => toDate(value.substring(0, 10)),
+        format: (value) => toDate(value),
     },
 ]);
 
@@ -224,6 +242,22 @@ async function getData() {
     await arrayData.fetch({ append: false });
 }
 
+const onStoreDataChange = () => {
+    const newData = JSON.parse(JSON.stringify(arrayData.store.data)) || [];
+    rows.value = newData;
+    // el objetivo de esto es guardar una copia de los valores iniciales de todas las rows para corroborar si la data cambio antes de guardar los cambios
+    originalRowDataCopy.value = JSON.parse(JSON.stringify(newData));
+};
+
+watch(
+    arrayData.store,
+    () => {
+        if (!arrayData.store.data) return;
+        onStoreDataChange();
+    },
+    { deep: true, immediate: true }
+);
+
 const openReportPdf = () => {
     const params = {
         ...arrayData.store.userParams,
@@ -235,9 +269,14 @@ const openReportPdf = () => {
 
 const saveFieldValue = async (val, field, index) => {
     try {
+        // Evitar la solicitud de guardado si el valor no ha cambiado
+        if (originalRowDataCopy.value[index][field] == val) return;
+
         const id = rows.value[index].id;
         const params = { [field]: val };
         await axios.patch(`Travels/${id}`, params);
+        // Actualizar la copia de los datos originales con el nuevo valor
+        originalRowDataCopy.value[index][field] = val;
     } catch (err) {
         console.error('Error updating travel');
     }
@@ -248,6 +287,7 @@ const navigateToTravelId = (id) => {
 };
 
 const stopEventPropagation = (event, col) => {
+    // Detener la propagación del evento de los siguientes elementos para evitar el click sobre la row que dispararía  la función navigateToTravelId
     if (!['ref', 'id', 'cargoSupplierNickname', 'kg'].includes(col.name)) return;
     event.preventDefault();
     event.stopPropagation();
@@ -263,6 +303,121 @@ onMounted(async () => {
     landedTo.value.setHours(23, 59, 59, 59);
     await getData();
 });
+
+// Handler del evento @dragstart (inicio del drag) y guarda información inicial
+const handleDragStart = (event, rowIndex, entryIndex) => {
+    draggedRowIndex.value = rowIndex;
+    entryRowIndex.value = entryIndex;
+    event.dataTransfer.effectAllowed = 'move';
+};
+
+// Handler del evento @dragenter (cuando haces drag sobre une elemento y lo arrastras sobre un posible target de drop) y actualiza el targetIndex
+const handleDragEnter = (_, targetIndex) => {
+    targetRowIndex.value = targetIndex;
+};
+
+const saveRowDrop = async (targetRowIndex) => {
+    const entryId = draggedEntry.value.id;
+    const travelId = rows.value[targetRowIndex].id;
+    await axios.patch(`Entries/${entryId}`, { travelFk: travelId });
+};
+
+const moveRow = async (draggedRowIndex, targetRowIndex, entryIndex) => {
+    try {
+        if (draggedRowIndex === targetRowIndex) return;
+        // Remover entry de la row original
+        draggedEntry.value = rows.value[draggedRowIndex].entries.splice(entryIndex, 1)[0];
+        //Si la row de destino por alguna razón no tiene la propiedad entry la creamos
+        if (!rows.value[targetRowIndex].entries) rows.value[targetRowIndex].entries = [];
+        // Añadir entry a la row de destino
+        rows.value[targetRowIndex].entries.push(draggedEntry.value);
+
+        await saveRowDrop(targetRowIndex);
+    } catch (err) {
+        cleanDragAndDropData();
+        console.error('Error moving row', err);
+    }
+};
+
+// Handler de cuando haces un drop tanto dentro como fuera de la tabla para limpiar acciones y data
+const handleDragEnd = () => {
+    stopScroll();
+    cleanDragAndDropData();
+};
+
+// Handler del evento @drop (cuando soltas el elemento draggeado sobre un target)
+const handleDrop = () => {
+    if (
+        !draggedRowIndex.value &&
+        draggedRowIndex.value !== 0 &&
+        !targetRowIndex.value &&
+        draggedRowIndex.value !== 0
+    )
+        return;
+    moveRow(draggedRowIndex.value, targetRowIndex.value, entryRowIndex.value);
+    handleDragEnd();
+};
+
+const cleanDragAndDropData = () => {
+    draggedRowIndex.value = null;
+    targetRowIndex.value = null;
+    entryRowIndex.value = null;
+    draggedEntry.value = null;
+};
+
+const scrollInterval = ref(null);
+
+const startScroll = (direction) => {
+    // Iniciar el scroll en la dirección especificada
+    if (!scrollInterval.value) {
+        scrollInterval.value = requestAnimationFrame(() => scroll(direction));
+    }
+};
+
+const stopScroll = () => {
+    if (scrollInterval.value) {
+        cancelAnimationFrame(scrollInterval.value);
+        scrollInterval.value = null;
+    }
+};
+
+const scroll = (direction) => {
+    // Controlar el desplazamiento en la dirección especificada
+    const yOffset = direction === 'up' ? -2 : 2;
+    window.scrollBy(0, yOffset);
+
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.body.offsetHeight;
+
+    // Verificar si se alcanzaron los límites de la ventana para detener el desplazamiento
+    if (
+        (direction === 'up' && window.scrollY > 0) ||
+        (direction === 'down' && windowHeight + window.scrollY < documentHeight)
+    ) {
+        scrollInterval.value = requestAnimationFrame(() => scroll(direction));
+    } else {
+        stopScroll();
+    }
+};
+
+// Handler del scroll mientras se hace el drag de una row
+const handleDragScroll = (event) => {
+    // Obtener la posición y dimensiones del cursor
+    const y = event.clientY;
+    const windowHeight = window.innerHeight;
+
+    // Verificar si el cursor está cerca del borde superior o inferior de la ventana
+    const nearTop = y < 150;
+    const nearBottom = y > windowHeight - 100;
+
+    if (nearTop) {
+        startScroll('up');
+    } else if (nearBottom) {
+        startScroll('down');
+    } else {
+        stopScroll();
+    }
+};
 </script>
 
 <template>
@@ -302,59 +457,60 @@ onMounted(async () => {
             row-key="clientId"
             :pagination="{ rowsPerPage: 0 }"
             class="full-width"
+            table-style="user-select: none;"
+            @drag="handleDragScroll($event)"
+            @dragend="handleDragEnd($event)"
+            :separator="!targetRowIndex && targetRowIndex !== 0 ? 'horizontal' : 'none'"
         >
             <template #body="props">
                 <QTr
                     :props="props"
-                    @click="navigateToTravelId(props.row.id)"
                     class="cursor-pointer bg-vn-primary-row"
+                    @click="navigateToTravelId(props.row.id)"
+                    @dragenter="handleDragEnter($event, props.rowIndex)"
+                    @dragover.prevent
+                    @drop="handleDrop()"
+                    :class="{
+                        'dashed-border --top --left --right':
+                            targetRowIndex === props.rowIndex,
+                        '--bottom':
+                            targetRowIndex === props.rowIndex &&
+                            (!props.row.entries || props.row.entries.length === 0),
+                    }"
                 >
                     <QTd
                         v-for="col in props.cols"
                         :key="col.name"
                         :props="props"
                         @click="stopEventPropagation($event, col)"
+                        auto-width
                     >
                         <component
                             :is="tableColumnComponents[col.name].component"
                             v-bind="tableColumnComponents[col.name].attrs"
+                            v-model="rows[props.rowIndex][col.field]"
+                            v-on="
+                                tableColumnComponents[col.name].event
+                                    ? tableColumnComponents[col.name].event(
+                                          rows[props.rowIndex][col.field],
+                                          col.field,
+                                          props.rowIndex
+                                      )
+                                    : {}
+                            "
                         >
-                            <!-- Editable 'ref' and 'kg' QField slot -->
-                            <template
-                                v-if="col.name === 'ref' || col.name === 'kg'"
-                                #control
-                            >
-                                <div
-                                    class="self-center full-width no-outline"
-                                    tabindex="0"
-                                >
-                                    {{ col.value }}
-                                </div>
-                                <QPopupEdit
-                                    :key="col.name"
-                                    v-model="col.value"
-                                    label-set="Save"
-                                    label-cancel="Close"
-                                >
-                                    <VnInput
-                                        v-model="rows[props.pageIndex][col.field]"
-                                        dense
-                                        autofocus
-                                        @keyup.enter="
-                                            saveFieldValue(
-                                                rows[props.pageIndex][col.field],
-                                                col.field,
-                                                props.rowIndex
-                                            )
-                                        "
-                                    />
-                                </QPopupEdit>
-                            </template>
-
                             <template v-if="col.showValue">
-                                {{ col.value }}
+                                <span
+                                    :class="[
+                                        'text-left',
+                                        {
+                                            'supplier-name':
+                                                col.name === 'cargoSupplierNickname',
+                                        },
+                                    ]"
+                                    >{{ col.value }}</span
+                                >
                             </template>
-
                             <!-- Main Row Descriptors -->
                             <TravelDescriptorProxy
                                 v-if="col.name === 'id'"
@@ -367,13 +523,27 @@ onMounted(async () => {
                         </component>
                     </QTd>
                 </QTr>
+
                 <QTr
-                    v-for="entry in props.row.entries"
-                    :key="entry.id"
+                    v-for="(entry, index) in props.row.entries"
+                    :key="index"
                     :props="props"
-                    class="bg-vn-secondary-row"
+                    class="bg-vn-secondary-row cursor-pointer"
+                    @dragstart="handleDragStart($event, props.rowIndex, index)"
+                    @dragenter="handleDragEnter($event, props.rowIndex)"
+                    @dragover.prevent
+                    @drop="handleDrop()"
+                    :draggable="true"
+                    :class="{
+                        'dragged-row':
+                            entryRowIndex === index && props.rowIndex === draggedRowIndex,
+                        'dashed-border --left --right': targetRowIndex === props.rowIndex,
+                        '--bottom':
+                            targetRowIndex === props.rowIndex &&
+                            index === props.row.entries.length - 1,
+                    }"
                 >
-                    <QTd class="row justify-center">
+                    <QTd>
                         <QBtn flat color="primary">{{ entry.id }} </QBtn>
                         <EntryDescriptorProxy :id="entry.id" />
                     </QTd>
@@ -381,33 +551,75 @@ onMounted(async () => {
                         <QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn>
                         <SupplierDescriptorProxy :id="entry.supplierFk" />
                     </QTd>
+                    <QTd />
+                    <QTd>
+                        <span>{{ toCurrency(entry.invoiceAmount) }}</span>
+                    </QTd>
+                    <QTd>
+                        <span>{{ entry.reference }}</span>
+                    </QTd>
+                    <QTd>
+                        <span>{{ entry.stickers }}</span>
+                    </QTd>
                     <QTd></QTd>
-                    <QTd
-                        ><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.reference }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.stickers }}</span></QTd
-                    >
-                    <QTd></QTd>
-                    <QTd
-                        ><span>{{ entry.loadedkg }}</span></QTd
-                    >
-                    <QTd
-                        ><span>{{ entry.volumeKg }}</span></QTd
-                    >
-                    <QTd></QTd>
-                    <QTd></QTd>
-                    <QTd></QTd>
-                    <QTd></QTd>
+                    <QTd>
+                        <span>{{ entry.loadedkg }}</span>
+                    </QTd>
+                    <QTd>
+                        <span>{{ entry.volumeKg }}</span>
+                    </QTd>
+                    <QTd />
+                    <QTd />
+                    <QTd />
+                    <QTd />
                 </QTr>
             </template>
         </QTable>
     </QPage>
 </template>
 
+<style scoped lang="scss">
+:deep(.q-table) {
+    border-collapse: collapse;
+}
+
+.dashed-border {
+    &.--left {
+        border-left: 1px dashed #ccc;
+    }
+
+    &.--right {
+        border-right: 1px dashed #ccc;
+    }
+
+    &.--top {
+        border-top: 1px dashed #ccc;
+    }
+
+    &.--bottom {
+        border-bottom: 1px dashed #ccc;
+    }
+}
+
+.dragged-row {
+    background-color: $primary-light;
+}
+
+.supplier-name {
+    display: flex;
+    max-width: 150px;
+
+    @media (max-width: $breakpoint-md-max) {
+        max-width: 100px;
+    }
+}
+
+.supplier-name-button {
+    white-space: normal;
+    width: max-content;
+}
+</style>
+
 <i18n>
 en:
     searchExtraCommunity: Search for extra community shipping

src/pages/Travel/ExtraCommunityFilter.vue

@@ -65,7 +65,7 @@ const decrement = (paramsObj, key) => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params }">
+        <template #body="{ params, searchFn }">
             <QItem>
                 <QItemSection>
                     <VnInput label="id" v-model="params.id" is-outlined />
@@ -116,6 +116,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.agencyModeFk')"
                         v-model="params.agencyModeFk"
+                        @update:model-value="searchFn()"
                         :options="agenciesOptions"
                         option-value="agencyFk"
                         option-label="name"
@@ -129,8 +130,9 @@ const decrement = (paramsObj, key) => {
             <QItem>
                 <QItemSection>
                     <VnInputDate
-                        v-model="params.shippedFrom"
                         :label="t('params.shippedFrom')"
+                        v-model="params.shippedFrom"
+                        @update:model-value="searchFn()"
                         is-outlined
                     />
                 </QItemSection>
@@ -138,8 +140,9 @@ const decrement = (paramsObj, key) => {
             <QItem>
                 <QItemSection>
                     <VnInputDate
-                        v-model="params.landedTo"
                         :label="t('params.landedTo')"
+                        v-model="params.landedTo"
+                        @update:model-value="searchFn()"
                         is-outlined
                     />
                 </QItemSection>
@@ -149,6 +152,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.warehouseOutFk')"
                         v-model="params.warehouseOutFk"
+                        @update:model-value="searchFn()"
                         :options="warehousesOptions"
                         option-value="id"
                         option-label="name"
@@ -164,6 +168,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.warehouseInFk')"
                         v-model="params.warehouseInFk"
+                        @update:model-value="searchFn()"
                         :options="warehousesOptions"
                         option-value="id"
                         option-label="name"
@@ -179,6 +184,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('supplier.pageTitles.supplier')"
                         v-model="params.cargoSupplierFk"
+                        @update:model-value="searchFn()"
                         :options="suppliersOptions"
                         option-value="id"
                         option-label="name"
@@ -194,6 +200,7 @@ const decrement = (paramsObj, key) => {
                     <VnSelectFilter
                         :label="t('params.continent')"
                         v-model="params.continent"
+                        @update:model-value="searchFn()"
                         :options="continentsOptions"
                         option-value="code"
                         option-label="name"
@@ -208,19 +215,6 @@ const decrement = (paramsObj, key) => {
     </VnFilterPanel>
 </template>
 
-<style scoped>
-.input-number >>> input[type='number'] {
-    -moz-appearance: textfield;
-}
-
-.input-number >>> input::-webkit-outer-spin-button,
-.input-number >>> input::-webkit-inner-spin-button {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-}
-</style>
-
 <i18n>
 en:
     params:

src/pages/Wagon/Card/WagonCard.vue

@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute } from 'vue-router';
 import LeftMenu from 'components/LeftMenu.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const route = useRoute();
@@ -17,7 +18,9 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Worker/Card/WorkerCard.vue

@@ -5,6 +5,7 @@ import WorkerDescriptor from './WorkerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -29,7 +30,9 @@ const { t } = useI18n();
         <QPage>
             <VnSubToolbar />
 
-            <div class="q-pa-md"><RouterView></RouterView></div>
+            <div :class="useCardSize()">
+                <RouterView></RouterView>
+            </div>
         </QPage>
     </QPageContainer>
 </template>

src/pages/Worker/Card/WorkerSummary.vue

@@ -71,14 +71,14 @@ const filter = {
         </template>
         <template #body="{ entity: worker }">
             <QCard class="vn-one">
-                <a class="header" :href="workerUrl + `basic-data`">
+                <a class="header header-link" :href="workerUrl + `basic-data`">
                     {{ t('worker.summary.basicData') }}
-                    <QIcon name="open_in_new" color="primary" />
+                    <QIcon name="open_in_new" />
                 </a>
                 <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
                 <VnLv
                     :label="t('worker.list.department')"
-                    :value="worker.department.department.name"
+                    :value="worker.department?.department?.name"
                 />
                 <VnLv :label="t('worker.list.email')" :value="worker.user.email" copy />
                 <VnLv :label="t('worker.summary.boss')" link>
@@ -102,16 +102,16 @@ const filter = {
                         <VnLinkPhone :phone-number="worker.phone" />
                     </template>
                 </VnLv>
-                <VnLv :value="worker.client.phone">
+                <VnLv :value="worker.client?.phone">
                     <template #label>
                         {{ t('worker.summary.personalPhone') }}
-                        <VnLinkPhone :phone-number="worker.client.phone" />
+                        <VnLinkPhone :phone-number="worker.client?.phone" />
                     </template>
                 </VnLv>
                 <VnLv :label="t('worker.summary.locker')" :value="worker.locker" />
             </QCard>
             <QCard class="vn-one">
-                <div class="header">
+                <div class="header header-link">
                     {{ t('worker.summary.userData') }}
                 </div>
                 <VnLv :label="t('worker.summary.userId')" :value="worker.user.id" />

src/router/modules/claim.js

@@ -16,10 +16,10 @@ export default {
             'ClaimLines',
             'ClaimRma',
             'ClaimPhotos',
-            'ClaimLog',
             'ClaimNotes',
             'ClaimDevelopment',
             'ClaimAction',
+            'ClaimLog',
         ],
     },
     children: [
@@ -103,6 +103,15 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimPhoto.vue'),
                 },
+                {
+                    name: 'ClaimNotes',
+                    path: 'notes',
+                    meta: {
+                        title: 'notes',
+                        icon: 'draft',
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
+                },
                 {
                     name: 'ClaimDevelopment',
                     path: 'development',
@@ -113,24 +122,6 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimDevelopment.vue'),
                 },
-                {
-                    name: 'ClaimLog',
-                    path: 'log',
-                    meta: {
-                        title: 'log',
-                        icon: 'history',
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimLog.vue'),
-                },
-                {
-                    name: 'ClaimNotes',
-                    path: 'notes',
-                    meta: {
-                        title: 'notes',
-                        icon: 'draft',
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimNotes.vue'),
-                },
                 {
                     name: 'ClaimAction',
                     path: 'action',
@@ -140,6 +131,15 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimAction.vue'),
                 },
+                {
+                    name: 'ClaimLog',
+                    path: 'log',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Claim/Card/ClaimLog.vue'),
+                },
             ],
         },
     ],