Merge pull request 'InvoiceOut change columns order' (!1415 ) from minor_requested_changes_invoiceOutList into dev

Reviewed-on: #1415
Merge pull request 'Add `vitest ui` as devDependency' (!1688 ) from vitest_ui into dev
2025-04-08 13:29:12 +00:00 · 2025-04-08 13:24:42 +00:00 · 2025-04-08 13:10:43 +00:00 · 2025-04-08 12:58:50 +00:00 · 2025-04-08 12:57:32 +00:00 · 2025-04-08 12:31:23 +00:00
340 changed files with 8119 additions and 6195 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,6 +0,0 @@
-/dist
-/src-capacitor
-/src-cordova
-/.quasar
-/node_modules
-.eslintrc.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,75 +0,0 @@
-export default {
-    // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
-    // This option interrupts the configuration hierarchy at this file
-    // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
-    root: true,
-
-    parserOptions: {
-        ecmaVersion: '2021', // Allows for the parsing of modern ECMAScript features
-    },
-
-    env: {
-        node: true,
-        browser: true,
-        'vue/setup-compiler-macros': true,
-    },
-
-    // Rules order is important, please avoid shuffling them
-    extends: [
-        // Base ESLint recommended rules
-        'eslint:recommended',
-
-        // Uncomment any of the lines below to choose desired strictness,
-        // but leave only one uncommented!
-        // See https://eslint.vuejs.org/rules/#available-rules
-        // 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
-        'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
-        // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
-
-        // https://github.com/prettier/eslint-config-prettier#installation
-        // usage with Prettier, provided by 'eslint-config-prettier'.
-        'prettier',
-    ],
-
-    plugins: [
-        // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
-        // required to lint *.vue files
-        'vue',
-
-        // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
-        // Prettier has not been included as plugin to avoid performance impact
-        // add it as an extension for your IDE
-    ],
-
-    globals: {
-        ga: 'readonly', // Google Analytics
-        cordova: 'readonly',
-        __statics: 'readonly',
-        __QUASAR_SSR__: 'readonly',
-        __QUASAR_SSR_SERVER__: 'readonly',
-        __QUASAR_SSR_CLIENT__: 'readonly',
-        __QUASAR_SSR_PWA__: 'readonly',
-        process: 'readonly',
-        Capacitor: 'readonly',
-        chrome: 'readonly',
-    },
-
-    // add your custom rules here
-    rules: {
-        'prefer-promise-reject-errors': 'off',
-        'no-unused-vars': 'warn',
-        'vue/no-multiple-template-root': 'off',
-        // allow debugger during development only
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    },
-    overrides: [
-        {
-            files: ['test/cypress/**/*.*'],
-            extends: [
-                // Add Cypress-specific lint rules, globals and Cypress plugin
-                // See https://github.com/cypress-io/eslint-plugin-cypress#rules
-                'plugin:cypress/recommended',
-            ],
-        },
-    ],
-};
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,3 @@
+{
+    "extends": ["plugin:cypress/recommended"]
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,214 @@
+# Version 25.12 - 2025-03-25
+
+### Added 🆕
+
+- chore: add junit-merge dependency to package.json by:alexm
+- chore: downgrade version from 25.14.0 to 25.12.0 in package.json by:alexm
+- chore: reduce page load timeout in Cypress configuration by:alexm
+- chore: refs #6695 update Cypress to version 14.1.0 and simplify test execution in Jenkinsfile by:alexm
+- chore: refs #8602 add comments for clarity in Cypress commands file by:pablone
+- chore: refs #8602 enhance Cypress support files with detailed comments and organization by:pablone
+- ci: refs #6695 feat jenkins parallel e2e by:alexm
+- feat: integrate vue-router to enhance routing capabilities in ZoneCard component by:alexm
+- feat: refs #6695 implement parallel Cypress testing and enhance timeout configurations by:alexm
+- feat: refs #6695 update Cypress parallel test execution to use 3 instances by:alexm
+- feat: refs #6802 add dash placeholder for empty department names in InvoiceOut list by:jgallego
+- feat: refs #6802 add DepartmentDescriptorProxy to InvoiceOutList and update translations by:jgallego
+- feat: refs #6802 add DepartmentDescriptorProxy to various components and update department handling by:jgallego
+- feat: refs #7587 add 'ticketClaimed' translation and implement claims retrieval in TicketDescriptor by:jtubau
+- feat: refs #7949 show new field in ticket sales by:Jon
+- feat: refs #8045 added new logic to show the correct icon and the correct path to redirect by:Jon
+- feat: refs #8045 modified icon and route to redirect from CardDescriptor by:Jon
+- feat: refs #8074 modified spinner size by:Jon
+- feat: refs #8600 added calendar e2e and modified basic data by:Jon
+- feat: refs #8600 added deliveryDays and modified warehouse E2Es by:Jon
+- feat: refs #8600 added new tests for zoneSummary & zoneLocations by:provira
+- feat: refs #8602 add custom Cypress commands for improved element interaction and request handling by:pablone
+- feat: refs #8602 add new Cypress command for clicking buttons with icons by:pablone
+- feat: refs #8602 add remove functionality for tag filters in EntryBuys component by:pablone
+- feat: refs #8602 add sorting options for select fields and update locale files with supplier name by:pablone
+- feat: refs #8602 refactor EntryBuys component and enhance observation tests by:pablone
+- feat: refs #8602 remove unused state property from useArrayDataStore by:pablone
+- feat: refs #8602 remove unused URL property from VnTable in ClaimList component by:pablone
+- feat: refs #8602 skip warehouse creation and removal test in ZoneWarehouse spec by:pablone
+- feat: refs #8602 streamline beforeSaveFn execution in CrudModel component by:pablone
+- feat: refs #8602 streamline beforeSaveFn execution in VnTable component by:pablone
+- feat: refs #8602 streamline filter logic in EntryBuys component by:pablone
+- feat: refs #8602 update entry components and tests, add data-cy attributes for Cypress integration by:pablone
+- feat: refs #8602 update localization for purchased spaces and enhance Entry components with new labels by:pablone
+- feat: refs #8606 adapt module to VnCatdBeta by:Jon
+- feat: refs #8612 added summary button & changed e2e tests by:provira
+- feat: refs #8612 changed shelving to VnTable & created e2e tests by:provira
+- feat: refs #8616 add summary prop to CardDescriptor in RoadmapDescriptor and WorkerDescriptor by:jtubau
+- feat: refs #8616 add VnCheckbox component to VnFilter and update prop types in VnFilterPanel and VnSearchbar by:jtubau
+- feat: refs #8630 add Agency and Vehicle descriptor components with summary props by:jtubau
+- feat: refs #8638 add AWB field to travel and entry forms, update translations and styles by:pablone
+- feat: refs #8638 add data attributes for transfer buys functionality in EntryBuys.vue and corresponding tests by:pablone
+- feat: refs #8648 enhance roadmapList tests with improved selectors and additional scenarios by:jtubau
+- feat: refs #8664 add CmrFilter component and integrate it into CmrList for enhanced filtering options by:jtubau
+- feat: refs #8721 add ticket navigation and update route columns by:jtubau
+- feat: run.sh build neccessary images by:alexm
+- feat: update Jenkinsfile to pull Docker images for back and db services by:alexm
+- feat: update labels and add department selection in InvoiceOut filter and list by:jgallego
+- refactor: refs #8626 update button styles and improve route redirection logic by:jtubau
+- style: refs #8041 new variable by:benjaminedc
+
+### Changed 📦
+
+- feat: refs #8602 refactor EntryBuys component and enhance observation tests by:pablone
+- refactor(cypress): refs #6695 simplify parallel test execution script by:alexm
+- refactor: deleted useless (origin/Warmfix-DepartmentIcon) by:Jon
+- refactor: refs #6695 enable ClaimNotes test suite by:alexm
+- refactor: refs #6695 fix invoiceOutSummary by:alexm
+- refactor: refs #6695 improve notification check and extend waitForElement timeout by:alexm
+- refactor: refs #6695 remove mocha dependency and optimize Cypress command execution by:alexm
+- refactor: refs #6695 skips by:alexm
+- refactor: refs #6695 skip zoneWarehouse by:alexm
+- refactor: refs #6695 streamline Cypress test execution and remove deprecated configurations by:alexm
+- refactor: refs #6802 replace salesPerson references with department in claims and tickets by:jgallego
+- refactor: refs #6802 replace 'salesPerson' terminology with 'team' across multiple locales and components by:jgallego
+- refactor: refs #6802 update import paths for DepartmentDescriptorProxy to use Worker directory by:jgallego
+- refactor: refs #6802 update InvoiceOutNegativeBases to use Department instead of Worker by:jgallego
+- refactor: refs #6802 update TicketFilter and TicketSale components to use departmentFk and adjust API endpoints by:jgallego
+- refactor: refs #8041 unify class link and unify titles to VnTitles by:benjaminedc
+- refactor: refs #8045 modified icon and module const by:Jon
+- refactor: refs #8197 rename VnCardBeta to VnCard by:alexm
+- refactor: refs #8197 simplify menu retrieval logic in LeftMenu component by:alexm
+- refactor: refs #8322 changed Wagon component to use VnSection/VnCardBeta by:provira
+- refactor: refs #8322 remove keyBinding from Wagon router module by:alexm
+- refactor: refs #8322 update WagonCard component and routing structure by:alexm
+- refactor: refs #8370 modified function to get the correct date by:Jon
+- refactor: refs #8472 remove added div and add class to VnInput by:jtubau
+- refactor: refs #8472 unified styling for the more-create-dialog slot to ensure consistency across all scenarios by:jtubau
+- refactor: refs #8472 update class names from q-span-2 to col-span-2 for consistency in layout by:jtubau
+- refactor: refs #8600 changed test case description by:provira
+- refactor: refs #8600 modified make invoice and send dialog e2es by:Jon
+- refactor: refs #8600 modified upcomingDeliveries e2e and created deliveryDays by:Jon
+- refactor: refs #8600 modified zoneSummary e2e by:Jon
+- refactor: refs #8602 remove redundant date input test from entryList.spec.js by:pablone
+- refactor: refs #8606 clear some warnings by:Jon
+- refactor: refs #8606 deleted code and fixed translation by:Jon
+- refactor: refs #8606 merged previous and e2e changes and corrected minor errors by:Jon
+- refactor: refs #8606 requested changes by:Jon
+- refactor: refs #8616 integrate summary dialog and update navigation in Agency and Vehicle components by:jtubau
+- refactor: refs #8616 integrate VnSelectWorker component in RouteList and optimize format functions by:jtubau
+- refactor: refs #8616 simplify template bindings and improve link generation in VehicleSummary by:jtubau
+- refactor: refs #8616 update routing components for AgencyList and RouteRoadmap in route.js by:jtubau
+- refactor: refs #8619 simplify empty data check in RouteDescriptor component by:jtubau
+- refactor: refs #8626 add cardVisible property to RouteList columns by:jtubau
+- refactor: refs #8626 add formatting for agency and vehicle columns in RouteList by:jtubau
+- refactor: refs #8626 enhance Worker and Agency components with data attributes and improved routing by:jtubau
+- refactor: refs #8626 improve test messages and selectors in route tests by:jtubau
+- refactor: refs #8626 update button styles and improve route redirection logic by:jtubau
+- refactor: refs #8626 update RouteList columns and enable AgencyWorkCenter tests by:jtubau
+- refactor: refs #8630 add vehicle translations and enhance route list columns by:jtubau
+- refactor: refs #8648 update roadmap deletion test to use current element text by:jtubau
+- refactor: refs #8664 enhance CmrList component with query initialization and user parameters by:jtubau
+- refactor: refs #8664 localization files by:jtubau
+- refactor: refs #8664 remove CmrFilter and replace with VnSearchbar in CmrList by:jtubau
+- refactor: remove unnecessary login and reload calls in ClaimDevelopment tests by:alexm
+- refactor: simplify client selection in order creation test by:alexm
+- refactor: update client ID input selector and remove viewport setting by:alexm
+- test: refs #8197 comment out ticket list tests for refactoring by:alexm
+- test: refs #8626 refactor notification check in routeList.spec.js by:jtubau
+- test: refs #8626 refactor routeList.spec.js to use a constant for summary URL by:jtubau
+- test: refs #8626 refactor routeList.spec.js to use selectors and improve readability by:jtubau
+
+### Fixed 🛠️
+
+- fix: add --init flag to Docker container for Cypress tests by:alexm
+- fix: agency list filters by:jtubau
+- fix: align Article label to the left in EntryBuys component by:alexm
+- fix: card descriptor imports by:Jon
+- fix: card descriptor merge by:Jon
+- fix(ClaimAction): update shelving options to use URL instead of static data by:jgallego
+- fix(ClaimSummary): clean url by:alexm
+- fix(cypress.config.js): refs #6695 update reporter to junit and remove unused dependencies by:alexm
+- fix(cypressParallel.sh): refs #6695 improve script readability by:alexm
+- fix(cypressParallel.sh): refs #6695 improve test execution output for clarity by:alexm
+- fix(cypressParallel.sh): refs #6695 simplify test execution output format by:alexm
+- fix(cypress scripts): refs #6695 improve cleanup process and adjust output redirection by:alexm
+- fix: fixed department descriptor icon by:Jon
+- fix: fixed submodule descriptors icons by:Jon
+- fix(invoiceOutSummary.spec.js): refs #6695 remove unnecessary visibility check for descriptor by:alexm
+- fix(Jenkinsfile): reduce parallel Cypress test execution from 3 to 2 by:alexm
+- fix(Jenkinsfile): refs #6695 add credentials for Docker login in E2E stage by:alexm
+- fix(Jenkinsfile): refs #6695 change parallel test execution from 4 to 2 by:alexm
+- fix(Jenkinsfile): refs #6695 increase parallel test execution from 2 to 4 by:alexm
+- fix(Jenkinsfile): refs #6695 update parallel test execution to 4 by:alexm
+- fix(LeftMenu): refs #8197 handle missing children in findRoute and update menu structure by:alexm
+- fix: refs #6695 update Cypress configuration and test result paths by:alexm
+- fix: refs #6695 update Jenkinsfile to build Docker image correctly and modify logout test visit method by:alexm
+- fix: refs #6695 update Jenkinsfile to remove specific e2e XML files and adjust Cypress parallel execution by:alexm
+- fix: refs #6695 update Jenkinsfile to source cypressParallel.sh correctly by:alexm
+- fix: refs #6695 update visit method in TicketLackDetail.spec.js to prevent page reload by:alexm
+- fix: refs #6802 update import path for DepartmentDescriptorProxy in OrderList.vue by:jgallego
+- fix: refs #6802 update OrderFilter to use department relation instead of salesPerson by:jgallego
+- fix: refs #8041 update redirection from preview to summary in ShelvingList tests by:benjaminedc
+- fix: refs #8041 update selector for summary header in ParkingList tests by:benjaminedc
+- fix: refs #8041 update summaryHeader selector in ParkingList test by:benjaminedc
+- fix: refs #8322 update order property for WagonList component by:alexm
+- fix: refs #8370 change param rely on month by:Jon
+- fix: refs #8417 added data-cy to all files and fixed test by:provira
+- fix: refs #8417 added data-cy to delete button by:provira
+- fix: refs #8417 fixed claimPhoto e2e by:provira
+- fix: refs #8417 fixed claimPhoto e2e test by:provira
+- fix: refs #8417 fixed e2e test by:provira
+- fix: refs #8417 fixed e2e test case by:provira
+- fix: refs #8417 fixed failing test case by:provira
+- fix: refs #8417 fixed invoiceOutSummary e2e test by:provira
+- fix: refs #8417 removed .only by:provira
+- fix: refs #8583 basicData, business, summary by:carlossa
+- fix: refs #8583 basicData e2e by:carlossa
+- fix: refs #8583 basicData timeControl by:carlossa
+- fix: refs #8583 cypressconf by:carlossa
+- fix: refs #8583 dataCy operator by:carlossa
+- fix: refs #8583 fix AddCard by:carlossa
+- fix: refs #8583 mutual create by:carlossa
+- fix: refs #8583 operator by:carlossa
+- fix: refs #8583 remove workerTimeControl by:carlossa
+- fix: refs #8583 tMutual, tNotes, TOperator by:carlossa
+- fix: refs #8583 wBusiness by:carlossa
+- fix: refs #8583 wBusiness e2e by:carlossa
+- fix: refs #8583 workerBasicData & workerTimeControl by:carlossa
+- fix: refs #8583 workerBusiness by:carlossa
+- fix: refs #8583 workerBusiness e2e by:carlossa
+- fix: refs #8583 workerBusiness test by:carlossa
+- fix: refs #8583 workerE2E by:carlossa
+- fix: refs #8583 worker mutual e2e by:carlossa
+- fix: refs #8583 workerSummary test by:carlossa
+- fix: refs #8583 workerTimeControl by:carlossa
+- fix: refs #8583 workerTimeControl e2e by:carlossa
+- fix: refs #8600 e2e by:Jon
+- fix: refs #8600 fixed calendar e2e by:Jon
+- fix: refs #8600 fixed e2e and skip client ones by:Jon
+- fix: refs #8600 fixed e2e by:Jon
+- fix: refs #8600 fixed invoiceOut summary e2e by:Jon
+- fix: refs #8600 fixed zoneList & added test case to zoneSummary by:provira
+- fix: refs #8600 zone basic data e2e and skip intermitent invoice out summary it by:Jon
+- fix: refs #8602 delete unused entryDms and stockBought test files (origin/8581-e2eInvoiceIn) by:pablone
+- fix: refs #8606 deleted code by:Jon
+- fix: refs #8612 changed QCheckbox for VnCheckbox by:provira
+- fix: refs #8612 fixed shelving e2e tests by:provira
+- fix: refs #8616 add conditional for SupplierDescriptorProxy and bind attributes in CardDescriptor by:jtubau
+- fix: refs #8616 remove redundant v-on binding from QCheckbox in VnCheckbox.vue by:jtubau
+- fix: refs #8616 update binding syntax for is-editable prop in AgencyList.vue by:jtubau
+- fix: refs #8616 update FormModel prop from 'update-url' to 'url-update' in Agency and RoadMap BasicData by:jtubau
+- fix: refs #8619 handle empty ticket records in RouteDescriptor component by:jtubau
+- fix: refs #8619 update route descriptor to handle empty ticket records and adjust test cases by:jtubau
+- fix: refs #8626 remove duplicate ref attribute from RouteList.vue by:jtubau
+- fix: refs #8630 remove duplicated locations by:jtubau
+- fix: refs #8638 restore invoiceInBasicData by:pablone
+- fix: refs #8638 update comment formatting in VnTable.vue by:pablone
+- fix: refs #8638 update null check for maxlength validation in VnInput.vue by:pablone
+- fix: simplify menu structure in monitor router module (origin/fix_monitor_leftMenu) by:Javier Segarra
+- refactor: refs #6695 fix invoiceOutSummary by:alexm
+- refactor: refs #8606 deleted code and fixed translation by:Jon
+- test: fix intermitent e2e by:alexm
+- test: fix orderList e2e, unestables by:alexm
+- test(OrderList): fix inconsistency by:alexm
+- test(TicketList): fix inconsistency by:alexm
+
 # Version 25.10 - 2025-03-11

 ### Added 🆕
--- a/7
+++ b/7
@ -115,6 +115,7 @@ pipeline {
                    steps {
                        script {
                            sh 'rm -f junit/e2e-*.xml'
+                            sh 'rm -rf test/cypress/screenshots'
                            env.COMPOSE_TAG = PROTECTED_BRANCH.contains(env.CHANGE_TARGET) ? env.CHANGE_TARGET : 'dev'

                            def image = docker.build('lilium-dev', '-f docs/Dockerfile.dev docs')
@ -124,14 +125,17 @@ pipeline {
                            sh "docker-compose ${env.COMPOSE_PARAMS} pull db"
                            sh "docker-compose ${env.COMPOSE_PARAMS} up -d"

+                            def modules = sh(script: 'node test/cypress/docker/find/find.js', returnStdout: true).trim()
+                            echo "E2E MODULES: ${modules}"
                            image.inside("--network ${env.COMPOSE_PROJECT}_default -e CI -e TZ --init") {
-                                sh 'sh test/cypress/cypressParallel.sh 2'
+                                sh "sh test/cypress/docker/cypressParallel.sh 1 '${modules}'"
                            }
                        }
                    }
                    post {
                        always {
                            sh "docker-compose ${env.COMPOSE_PARAMS} down -v"
+                            archiveArtifacts artifacts: 'test/cypress/screenshots/**/*', allowEmptyArchive: true
                            junit(
                                testResults: 'junit/e2e-*.xml',
                                allowEmptyResults: true
@ -181,3 +185,4 @@ pipeline {
        }
    }
 }
+
--- a/README.md
+++ b/README.md
@ -49,3 +49,9 @@ pnpm run test:e2e:summary
 ```bash
 quasar build
 ```
+
+### Serve the app for production
+
+```bash
+quasar build quasar serve dist/spa --host 0.0.0.0 --proxy=./proxy-serve.js
+```
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,87 @@
+import cypress from 'eslint-plugin-cypress';
+import eslint from 'eslint-plugin-import';
+import globals from 'globals';
+import js from '@eslint/js';
+import vue from 'eslint-plugin-vue';
+export default {
+    plugins: { vue, eslint, cypress },
+    languageOptions: {
+        globals: {
+            ...globals.node,
+            ...globals.browser,
+            ...vue.configs['vue3-strongly-recommended'].globals,
+            ...cypress.environments.globals.globals,
+            ga: 'readonly',
+            cordova: 'readonly',
+            __statics: 'readonly',
+            __QUASAR_SSR__: 'readonly',
+            __QUASAR_SSR_SERVER__: 'readonly',
+            __QUASAR_SSR_CLIENT__: 'readonly',
+            __QUASAR_SSR_PWA__: 'readonly',
+            process: 'readonly',
+            Capacitor: 'readonly',
+            chrome: 'readonly',
+        },
+
+        ecmaVersion: 2020,
+        sourceType: 'module',
+
+        parserOptions: {
+            parser: '@babel/eslint-parser',
+        },
+    },
+    rules: {
+        ...vue.rules['flat/strongly-recommended'],
+        ...js.configs.recommended.rules,
+        semi: 'off',
+        'generator-star-spacing': 'warn',
+        'arrow-parens': 'warn',
+        'no-var': 'error',
+        'prefer-const': 'error',
+        'prefer-template': 'warn',
+        'prefer-destructuring': 'off',
+        'prefer-spread': 'warn',
+        'prefer-rest-params': 'warn',
+        'prefer-object-spread': 'warn',
+        'prefer-arrow-callback': 'warn',
+        'prefer-numeric-literals': 'warn',
+        'prefer-exponentiation-operator': 'warn',
+        'prefer-regex-literals': 'warn',
+        'one-var': [
+            'error',
+            {
+                let: 'never',
+                const: 'never',
+            },
+        ],
+        'no-void': 'off',
+        'prefer-promise-reject-errors': 'error',
+        'multiline-ternary': 'warn',
+        'no-restricted-imports': 'warn',
+        'no-import-assign': 'warn',
+        'no-duplicate-imports': 'warn',
+        'no-useless-rename': 'warn',
+        'eslint/no-named-as-default': 'warn',
+        'eslint/no-named-as-default-member': 'warn',
+        'no-unsafe-optional-chaining': 'warn',
+        'no-undef': 'error',
+        'no-unused-vars': 'error',
+        'no-console': 'error',
+        'no-debugger': 'error',
+        'no-useless-escape': 'error',
+        'no-prototype-builtins': 'error',
+        'no-async-promise-executor': 'error',
+        'no-irregular-whitespace': 'error',
+        'no-constant-condition': 'error',
+        'no-unsafe-finally': 'error',
+        'no-extend-native': 'error',
+    },
+    ignores: [
+        '/dist',
+        '/src-capacitor',
+        '/src-cordova',
+        '/.quasar',
+        '/node_modules',
+        '.eslintrc.js',
+    ],
+};
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "salix-front",
-    "version": "25.12.0",
+    "version": "25.16.0",
    "description": "Salix frontend",
    "productName": "Salix",
    "author": "Verdnatura",
@ -9,7 +9,8 @@
    "type": "module",
    "scripts": {
        "resetDatabase": "cd ../salix && gulp docker",
-        "lint": "eslint --ext .js,.vue ./",
+        "lint": "eslint \"**/*.{vue,js}\" ",
+        "lint:fix": "eslint \"**/*.{vue,js}\" --fix ",
        "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
        "test:e2e": "cypress open",
        "test:e2e:ci": "npm run resetDatabase && cd ../salix-front && cypress run",
@ -17,6 +18,8 @@
        "test:e2e:summary": "bash ./test/cypress/summary.sh",
        "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
        "test:front": "vitest",
+        "test:ui": "vitest --ui",
+        "test:coverage": "vitest run --coverage",
        "test:front:ci": "vitest run",
        "commitlint": "commitlint --edit",
        "prepare": "npx husky install",
@ -26,43 +29,53 @@
        "docs:preview": "vitepress preview docs"
    },
    "dependencies": {
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.20.0",
        "@quasar/cli": "^2.4.1",
        "@quasar/extras": "^1.16.16",
        "axios": "^1.4.0",
        "chromium": "^3.0.3",
        "croppie": "^2.6.5",
+        "es-module-lexer": "^1.6.0",
+        "fast-glob": "^3.3.3",
        "moment": "^2.30.1",
        "pinia": "^2.1.3",
        "quasar": "^2.17.7",
        "validator": "^13.9.0",
        "vue": "^3.5.13",
-        "vue-i18n": "^9.3.0",
+        "vue-i18n": "^9.4.0",
        "vue-router": "^4.2.5"
    },
    "devDependencies": {
        "@commitlint/cli": "^19.2.1",
        "@commitlint/config-conventional": "^19.1.0",
-        "@intlify/unplugin-vue-i18n": "^0.8.2",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.20.0",
+        "@intlify/unplugin-vue-i18n": "^4.0.0",
        "@pinia/testing": "^0.1.2",
        "@quasar/app-vite": "^2.0.8",
        "@quasar/quasar-app-extension-qcalendar": "^4.0.2",
        "@quasar/quasar-app-extension-testing-unit-vitest": "^0.4.0",
+        "@vitest/ui": "3.1.1",
+        "@vue/compiler-sfc": "^3.5.13",
        "@vue/test-utils": "^2.4.4",
        "autoprefixer": "^10.4.14",
        "cypress": "^14.1.0",
        "cypress-mochawesome-reporter": "^3.8.2",
        "eslint": "^9.18.0",
        "eslint-config-prettier": "^10.0.1",
+        "eslint-import-resolver-alias": "^1.1.2",
        "eslint-plugin-cypress": "^4.1.0",
+        "eslint-plugin-import": "^2.31.0",
        "eslint-plugin-vue": "^9.32.0",
+        "globals": "^16.0.0",
        "husky": "^8.0.0",
        "junit-merge": "^2.0.0",
        "mocha": "^11.1.0",
        "postcss": "^8.4.23",
        "prettier": "^3.4.2",
        "sass": "^1.83.4",
-        "vitepress": "^1.6.3",
-        "vitest": "^0.34.0",
+        "vitest": "^3.0.3",
        "xunit-viewer": "^10.6.1"
    },
    "engines": {
@ -76,4 +89,4 @@
        "vite": "^6.0.11",
        "vitest": "^0.31.1"
    }
-}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/quasar.config.js
+++ b/quasar.config.js
@ -53,7 +53,7 @@ export default configure(function (/* ctx */) {
        build: {
            target: {
                browser: ['es2022', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
-                node: 'node18',
+                node: 'node20',
            },

            vueRouterMode: 'hash', // available values: 'hash', 'history'
@ -92,6 +92,7 @@ export default configure(function (/* ctx */) {
            vitePlugins: [
                [
                    VueI18nPlugin({
+                        strictMessage: false,
                        runtimeOnly: false,
                        include: [
                            path.resolve(__dirname, './src/i18n/locale/**'),
--- a/quasar.config.js.temporary.compiled.1744020058024.mjs
+++ b/quasar.config.js.temporary.compiled.1744020058024.mjs
@ -0,0 +1,227 @@
+/* eslint-disable */
+/**
+ * THIS FILE IS GENERATED AUTOMATICALLY.
+ * 1. DO NOT edit this file directly as it won't do anything.
+ * 2. EDIT the original quasar.config file INSTEAD.
+ * 3. DO NOT git commit this file. It should be ignored.
+ *
+ * This file is still here because there was an error in
+ * the original quasar.config file and this allows you to
+ * investigate the Node.js stack error.
+ *
+ * After you fix the original file, this file will be
+ * deleted automatically.
+ **/
+
+
+// quasar.config.js
+import { configure } from "quasar/wrappers";
+import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
+import path from "path";
+var __quasar_inject_dirname__ = "/home/jsegarra/Projects/salix-front";
+var target = `http://${process.env.CI ? "back" : "localhost"}:3000`;
+var quasar_config_default = configure(function() {
+  return {
+    eslint: {
+      // fix: true,
+      // include = [],
+      // exclude = [],
+      // rawOptions = {},
+      warnings: true,
+      errors: true
+    },
+    // https://v2.quasar.dev/quasar-cli/prefetch-feature
+    // preFetch: true,
+    // app boot file (/src/boot)
+    // --> boot files are part of "main.js"
+    // https://v2.quasar.dev/quasar-cli/boot-files
+    boot: ["i18n", "axios", "vnDate", "validations", "quasar", "quasar.defaults"],
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
+    css: ["app.scss"],
+    // https://github.com/quasarframework/quasar/tree/dev/extras
+    extras: [
+      // 'ionicons-v4',
+      // 'mdi-v5',
+      // 'fontawesome-v6',
+      // 'eva-icons',
+      // 'themify',
+      // 'line-awesome',
+      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+      "roboto-font",
+      "material-icons-outlined",
+      "material-symbols-outlined"
+    ],
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
+    build: {
+      target: {
+        browser: ["es2022", "edge88", "firefox78", "chrome87", "safari13.1"],
+        node: "node20"
+      },
+      vueRouterMode: "hash",
+      // available values: 'hash', 'history'
+      // vueRouterBase,
+      // vueDevtools,
+      // vueOptionsAPI: false,
+      // rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
+      // publicPath: '/',
+      // analyze: true,
+      // env: {},
+      rawDefine: {
+        "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
+      },
+      // ignorePublicFolder: true,
+      // minify: false,
+      // polyfillModulePreload: true,
+      // distDir
+      extendViteConf(viteConf) {
+        delete viteConf.build.polyfillModulePreload;
+        viteConf.build.modulePreload = {
+          polyfill: false
+        };
+      },
+      // viteVuePluginOptions: {},
+      alias: {
+        composables: path.join(__quasar_inject_dirname__, "./src/composables"),
+        filters: path.join(__quasar_inject_dirname__, "./src/filters")
+      },
+      vitePlugins: [
+        [
+          VueI18nPlugin({
+            strictMessage: false,
+            runtimeOnly: false,
+            include: [
+              path.resolve(__quasar_inject_dirname__, "./src/i18n/locale/**"),
+              path.resolve(__quasar_inject_dirname__, "./src/pages/**/locale/**")
+            ]
+          })
+        ]
+      ]
+    },
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#devServer
+    devServer: {
+      server: {
+        type: "http"
+      },
+      proxy: {
+        "/api": {
+          target,
+          logLevel: "debug",
+          changeOrigin: true,
+          secure: false
+        }
+      },
+      open: false,
+      allowedHosts: [
+        "front",
+        // Agrega este nombre de host
+        "localhost"
+        // Opcional, para pruebas locales
+      ]
+    },
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
+    framework: {
+      config: {
+        config: {
+          dark: "auto"
+        }
+      },
+      lang: "en-GB",
+      // iconSet: 'material-icons', // Quasar icon set
+      // lang: 'en-US', // Quasar language pack
+      // For special cases outside of where the auto-import strategy can have an impact
+      // (like functional components as one of the examples),
+      // you can manually specify Quasar components/directives to be available everywhere:
+      //
+      // components: [],
+      // directives: [],
+      // Quasar plugins
+      plugins: ["Notify", "Dialog"],
+      all: "auto",
+      autoImportComponentCase: "pascal"
+    },
+    // animations: 'all', // --- includes all animations
+    // https://v2.quasar.dev/options/animations
+    animations: [],
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#property-sourcefiles
+    // sourceFiles: {
+    //   rootComponent: 'src/App.vue',
+    //   router: 'src/router/index',
+    //   store: 'src/store/index',
+    //   registerServiceWorker: 'src-pwa/register-service-worker',
+    //   serviceWorker: 'src-pwa/custom-service-worker',
+    //   pwaManifestFile: 'src-pwa/manifest.json',
+    //   electronMain: 'src-electron/electron-main',
+    //   electronPreload: 'src-electron/electron-preload'
+    // },
+    // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
+    ssr: {
+      // ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
+      // will mess up SSR
+      // extendSSRWebserverConf (esbuildConf) {},
+      // extendPackageJson (json) {},
+      pwa: false,
+      // manualStoreHydration: true,
+      // manualPostHydrationTrigger: true,
+      prodPort: 3e3,
+      // The default port that the production server should use
+      // (gets superseded if process.env.PORT is specified at runtime)
+      middlewares: [
+        "render"
+        // keep this as last one
+      ]
+    },
+    // https://v2.quasar.dev/quasar-cli/developing-pwa/configuring-pwa
+    pwa: {
+      workboxMode: "generateSW",
+      // or 'injectManifest'
+      injectPwaMetaTags: true,
+      swFilename: "sw.js",
+      manifestFilename: "manifest.json",
+      useCredentialsForManifestTag: false
+      // useFilenameHashes: true,
+      // extendGenerateSWOptions (cfg) {}
+      // extendInjectManifestOptions (cfg) {},
+      // extendManifestJson (json) {}
+      // extendPWACustomSWConf (esbuildConf) {}
+    },
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
+    cordova: {
+      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
+    },
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
+    capacitor: {
+      hideSplashscreen: true
+    },
+    // Full list of options: https://v2.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
+    electron: {
+      // extendElectronMainConf (esbuildConf)
+      // extendElectronPreloadConf (esbuildConf)
+      inspectPort: 5858,
+      bundler: "packager",
+      // 'packager' or 'builder'
+      packager: {
+        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+        // OS X / Mac App Store
+        // appBundleId: '',
+        // appCategoryType: '',
+        // osxSign: '',
+        // protocol: 'myapp://path',
+        // Windows only
+        // win32metadata: { ... }
+      },
+      builder: {
+        // https://www.electron.build/configuration/configuration
+        appId: "salix-frontend"
+      }
+    },
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
+    bex: {
+      contentScripts: ["my-content-script"]
+      // extendBexScriptsConf (esbuildConf) {}
+      // extendBexManifestJson (json) {}
+    }
+  };
+});
+export {
+  quasar_config_default as default
+};
--- a/src/boot/tests/axios.spec.js
+++ b/src/boot/tests/axios.spec.js
@ -9,6 +9,30 @@ vi.mock('src/composables/useSession', () => ({
    }),
 }));

+// Mock axios
+vi.mock('axios', () => ({
+    default: {
+        create: vi.fn(() => ({
+            interceptors: {
+                request: { use: vi.fn() },
+                response: { use: vi.fn() },
+            },
+        })),
+        interceptors: {
+            request: { use: vi.fn() },
+            response: { use: vi.fn() },
+        },
+        defaults: {
+            baseURL: '',
+        },
+    },
+}));
+
+vi.mock('src/router', () => ({
+    Router: {
+        push: vi.fn(),
+    },
+}));
 vi.mock('src/stores/useStateQueryStore', () => ({
    useStateQueryStore: () => ({
        add: () => vi.fn(),
@ -29,7 +53,7 @@ describe('Axios boot', () => {
                        'Accept-Language': 'en-US',
                        Authorization: 'DEFAULT_TOKEN',
                    },
-                })
+                }),
            );
        });
    });
--- a/src/boot/quasar.defaults.js
+++ b/src/boot/quasar.defaults.js
@ -1,3 +1,4 @@
+/* eslint-disable eslint/export */
 export * from './defaults/qTable';
 export * from './defaults/qInput';
 export * from './defaults/qSelect';
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@ -13,13 +13,12 @@ import VnConfirm from './ui/VnConfirm.vue';
 import { tMobile } from 'src/composables/tMobile';
 import { useArrayData } from 'src/composables/useArrayData';
 import { getDifferences, getUpdatedValues } from 'src/filters';
-
 const { push } = useRouter();
 const quasar = useQuasar();
 const state = useState();
 const stateStore = useStateStore();
 const { t } = useI18n();
-const { validate } = useValidator();
+const { validate, validations } = useValidator();
 const { notify } = useNotify();
 const route = useRoute();
 const myForm = ref(null);
@ -119,7 +118,7 @@ const defaultButtons = computed(() => ({
        color: 'primary',
        icon: 'save',
        label: 'globals.save',
-        click: async () => await save(),
+        click: async (evt) => submitForm(evt),
        type: 'submit',
    },
    reset: {
@ -132,6 +131,13 @@ const defaultButtons = computed(() => ({
    ...$props.defaultButtons,
 }));

+const submitForm = async (evt) => {
+    const isFormValid = await myForm.value.validate();
+    if (isFormValid) {
+        await save(evt);
+    }
+};
+
 onMounted(async () => {
    nextTick(() => (componentIsRendered.value = true));

@ -227,10 +233,9 @@ async function save() {
        const method = $props.urlCreate ? 'post' : 'patch';
        const url =
            $props.urlCreate || $props.urlUpdate || $props.url || arrayData.store.url;
-        let response;
-
-        if ($props.saveFn) response = await $props.saveFn(body);
-        else response = await axios[method](url, body);
+        const response = await Promise.resolve(
+            $props.saveFn ? $props.saveFn(body) : axios[method](url, body),
+        );

        if ($props.urlCreate) notify('globals.dataCreated', 'positive');

@ -307,11 +312,13 @@ async function onKeyup(evt) {
            selectionStart = selectionEnd = selectionStart + 1;
            return;
        }
-        await save();
+        await myForm.value.submit(evt);
    }
 }

 defineExpose({
+    submitForm,
+    myForm,
    save,
    isLoading,
    hasChanges,
@ -325,7 +332,7 @@ defineExpose({
        <QForm
            ref="myForm"
            v-if="formData"
-            @submit.prevent
+            @submit.prevent="save"
            @keyup.prevent="onKeyup"
            @reset="reset"
            class="q-pa-md"
@ -339,6 +346,7 @@ defineExpose({
                    name="form"
                    :data="formData"
                    :validate="validate"
+                    :validations="validations()"
                    :filter="filter"
                />
                <SkeletonForm v-else />
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@ -41,9 +41,12 @@ const onDataSaved = async (formData, requestResponse) => {
    emit('onDataSaved', formData, requestResponse);
 };

-const onClick = async (saveAndContinue) => {
+const onClick = async (saveAndContinue = showSaveAndContinueBtn) => {
+    await formModelRef.value.myForm.validate(true);
    isSaveAndContinue.value = saveAndContinue;
-    await formModelRef.value.save();
+    if (formModelRef.value) {
+        await formModelRef.value.submitForm();
+    }
 };

 defineExpose({
@ -59,16 +62,23 @@ defineExpose({
        ref="formModelRef"
        :observe-form-changes="false"
        :default-actions="false"
+        @submit="onClick"
        v-bind="$attrs"
        @on-data-saved="onDataSaved"
+        :prevent-submit="false"
    >
-        <template #form="{ data, validate }">
+        <template #form="{ data, validate, validations }">
            <span ref="closeButton" class="close-icon" v-close-popup>
                <QIcon name="close" size="sm" />
            </span>
            <h1 class="title">{{ title }}</h1>
            <p>{{ subtitle }}</p>
-            <slot name="form-inputs" :data="data" :validate="validate" />
+            <slot
+                name="form-inputs"
+                :data="data"
+                :validate="validate"
+                :validations="validations"
+            />
            <div class="q-mt-lg row justify-end">
                <QBtn
                    :label="t('globals.cancel')"
@ -87,12 +97,13 @@ defineExpose({
                    :flat="showSaveAndContinueBtn"
                    :label="t('globals.save')"
                    :title="t('globals.save')"
-                    @click="onClick(false)"
+                    :type="!showSaveAndContinueBtn ? 'submit' : 'button'"
                    color="primary"
                    class="q-ml-sm"
                    :disabled="isLoading"
                    :loading="isLoading"
                    data-cy="FormModelPopup_save"
+                    @click="showSaveAndContinueBtn ? onClick(false) : null"
                    z-max
                />
                <QBtn
@ -100,12 +111,13 @@ defineExpose({
                    :label="t('globals.isSaveAndContinue')"
                    :title="t('globals.isSaveAndContinue')"
                    color="primary"
+                    :type="showSaveAndContinueBtn ? 'submit' : 'button'"
                    class="q-ml-sm"
                    :disabled="isLoading"
                    :loading="isLoading"
                    data-cy="FormModelPopup_isSaveAndContinue"
+                    @click="showSaveAndContinueBtn ? onClick(true) : null"
                    z-max
-                    @click="onClick(true)"
                />
            </div>
        </template>
--- a/src/components/ItemsFilterPanel.vue
+++ b/src/components/ItemsFilterPanel.vue
@ -198,8 +198,7 @@ const setCategoryList = (data) => {
                        v-model="params.typeFk"
                        :options="itemTypesOptions"
                        dense
-                        outlined
-                        rounded
+                        filled
                        use-input
                        :disable="!selectedCategoryFk"
                        @update:model-value="
@ -235,8 +234,7 @@ const setCategoryList = (data) => {
                        v-model="value.selectedTag"
                        :options="tagOptions"
                        dense
-                        outlined
-                        rounded
+                        filled
                        :emit-value="false"
                        use-input
                        :is-clearable="false"
@ -252,8 +250,7 @@ const setCategoryList = (data) => {
                        option-value="value"
                        option-label="value"
                        dense
-                        outlined
-                        rounded
+                        filled
                        emit-value
                        use-input
                        :disable="!value"
@ -265,7 +262,6 @@ const setCategoryList = (data) => {
                        v-model="value.value"
                        :label="t('components.itemsFilterPanel.value')"
                        :disable="!value"
-                        is-outlined
                        :is-clearable="false"
                        @keyup.enter="applyTags(params, searchFn)"
                    />
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
@ -18,6 +18,14 @@ const state = useState();
 const user = state.getUser();
 const appName = 'Lilium';
 const pinnedModulesRef = ref();
+const hostname = window.location.hostname;
+const env = ref();
+
+const getEnvironment = computed(() => {
+    env.value = hostname.split('-');
+    if (env.value.length <= 1) return;
+    return env.value[0];
+});

 onMounted(() => stateStore.setMounted());
 const refresh = () => window.location.reload();
@ -49,6 +57,9 @@ const refresh = () => window.location.reload();
                        {{ t('globals.backToDashboard') }}
                    </QTooltip>
                </QBtn>
+                <QBadge v-if="getEnvironment" color="primary" align="top">
+                    {{ getEnvironment }}
+                </QBadge>
            </RouterLink>
            <VnBreadcrumbs v-if="$q.screen.gt.sm" />
            <QSpinner
--- a/src/components/TicketProblems.vue
+++ b/src/components/TicketProblems.vue
@ -17,17 +17,6 @@ defineProps({ row: { type: Object, required: true } });
                </QTooltip>
            </QIcon>
        </router-link>
-        <QIcon
-            v-if="row?.reserved"
-            color="primary"
-            name="vn:reserva"
-            size="xs"
-            data-cy="ticketSaleReservedIcon"
-        >
-            <QTooltip>
-                {{ t('ticketSale.reserved') }}
-            </QTooltip>
-        </QIcon>
        <QIcon
            v-if="row?.isDeleted"
            color="primary"
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@ -55,6 +55,8 @@ const $props = defineProps({
    },
 });

+const label = $props.showLabel && $props.column.label ? $props.column.label : '';
+
 const defaultSelect = {
    attrs: {
        row: $props.row,
@ -62,7 +64,7 @@ const defaultSelect = {
        class: 'fit',
    },
    forceAttrs: {
-        label: $props.showLabel && $props.column.label,
+        label,
    },
 };

@ -74,7 +76,7 @@ const defaultComponents = {
            class: 'fit',
        },
        forceAttrs: {
-            label: $props.showLabel && $props.column.label,
+            label,
        },
    },
    number: {
@ -84,7 +86,7 @@ const defaultComponents = {
            class: 'fit',
        },
        forceAttrs: {
-            label: $props.showLabel && $props.column.label,
+            label,
        },
    },
    date: {
@ -96,7 +98,7 @@ const defaultComponents = {
            class: 'fit',
        },
        forceAttrs: {
-            label: $props.showLabel && $props.column.label,
+            label,
        },
    },
    time: {
@ -105,7 +107,7 @@ const defaultComponents = {
            disable: !$props.isEditable,
        },
        forceAttrs: {
-            label: $props.showLabel && $props.column.label,
+            label,
        },
    },
    checkbox: {
@ -125,7 +127,7 @@ const defaultComponents = {
            return defaultAttrs;
        },
        forceAttrs: {
-            label: $props.showLabel && $props.column.label,
+            label,
            autofocus: true,
        },
        events: {
--- a/src/components/VnTable/VnOrder.vue
+++ b/src/components/VnTable/VnOrder.vue
@ -70,7 +70,7 @@ function textAlignToFlex(textAlign) {
        :style="textAlignToFlex(align)"
    >
        <span :title="label">{{ label }}</span>
-        <div v-if="name && model?.index">
+        <div v-if="name && (model?.index || vertical)">
            <QChip
                :label="!vertical ? model?.index : ''"
                :icon="
@ -83,14 +83,14 @@ function textAlignToFlex(textAlign) {
                :size="vertical ? '' : 'sm'"
                :class="[
                    model?.index ? 'color-vn-text' : 'bg-transparent',
-                    vertical ? 'q-px-none' : '',
+                    vertical ? 'q-mx-none q-py-lg' : '',
                ]"
                class="no-box-shadow"
                :clickable="true"
                style="min-width: 40px; max-height: 30px"
            >
                <div
-                    class="column flex-center"
+                    class="column justify-center text-center"
                    v-if="vertical"
                    :style="!model?.index && 'color: #5d5d5d'"
                >
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@ -19,6 +19,7 @@ import { useQuasar, date } from 'quasar';
 import { useStateStore } from 'stores/useStateStore';
 import { useFilterParams } from 'src/composables/useFilterParams';
 import { dashIfEmpty, toDate } from 'src/filters';
+import { useTableHeight } from './filters/useTableHeight';

 import CrudModel from 'src/components/CrudModel.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
@ -117,7 +118,7 @@ const $props = defineProps({
    },
    tableHeight: {
        type: String,
-        default: '90vh',
+        default: undefined,
    },
    footer: {
        type: Boolean,
@ -140,7 +141,7 @@ const $props = defineProps({
    },
    dataCy: {
        type: String,
-        default: 'vn-table',
+        default: 'vnTable',
    },
 });

@ -166,6 +167,7 @@ const tableRef = ref();
 const params = ref(useFilterParams($attrs['data-key']).params);
 const orders = ref(useFilterParams($attrs['data-key']).orders);
 const app = inject('app');
+const tableHeight = useTableHeight();

 const editingRow = ref(null);
 const editingField = ref(null);
@ -633,6 +635,7 @@ const rowCtrlClickFunction = computed(() => {
                :data-key="$attrs['data-key']"
                :columns="columns"
                :redirect="redirect"
+                v-bind="$attrs?.['table-filter']"
            >
                <template
                    v-for="(_, slotName) in $slots"
@ -677,14 +680,14 @@ const rowCtrlClickFunction = computed(() => {
                table-header-class="bg-header"
                card-container-class="grid-three"
                flat
-                :style="isTableMode && `max-height: ${tableHeight}`"
+                :style="isTableMode && `max-height: ${$props.tableHeight || tableHeight}`"
                :virtual-scroll="isTableMode"
                @virtual-scroll="handleScroll"
                @row-click="(event, row) => handleRowClick(event, row)"
                @update:selected="emit('update:selected', $event)"
                @selection="(details) => handleSelection(details, rows)"
                :hide-selected-banner="true"
-                :data-cy="$props.dataCy ?? 'vnTable'"
+                :data-cy
            >
                <template #top-left v-if="!$props.withoutHeader">
                    <slot name="top-left"> </slot>
@ -781,6 +784,7 @@ const rowCtrlClickFunction = computed(() => {
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            "
+                            :data-cy="`vnTableCell_${col.name}`"
                        >
                            <slot
                                :name="`column-${col.name}`"
@ -895,7 +899,7 @@ const rowCtrlClickFunction = computed(() => {
                                        {{ row[splittedColumns.title.name] }}
                                    </span>
                                </QCardSection>
-                                <!-- Fields -->
+                                <!-- Fields  -->
                                <QCardSection
                                    class="q-pl-sm q-py-xs"
                                    :class="$props.cardClass"
@ -1040,7 +1044,7 @@ const rowCtrlClickFunction = computed(() => {
            :model="$attrs['data-key'] + 'Create'"
            @on-data-saved="(_, res) => createForm.onDataSaved(res)"
        >
-            <template #form-inputs="{ data }">
+            <template #form-inputs="{ data, validations }">
                <slot name="alter-create" :data="data">
                    <div :style="createComplement?.containerStyle">
                        <div
@ -1058,6 +1062,7 @@ const rowCtrlClickFunction = computed(() => {
                                :key="column.name"
                                :name="`column-create-${column.name}`"
                                :data="data"
+                                :validations="validations"
                                :column-name="column.name"
                                :label="column.label"
                            >
@ -1154,7 +1159,7 @@ es:

 .grid-create {
    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
    max-width: 100%;
    grid-gap: 20px;
    margin: 0 auto;
--- a/src/components/VnTable/VnTableFilter.vue
+++ b/src/components/VnTable/VnTableFilter.vue
@ -26,7 +26,12 @@ function columnName(col) {
 }
 </script>
 <template>
-    <VnFilterPanel v-bind="$attrs" :search-button="true" :disable-submit-event="true">
+    <VnFilterPanel
+        v-bind="$attrs"
+        :search-button="true"
+        :disable-submit-event="true"
+        :search-url
+    >
        <template #body="{ params, orders, searchFn }">
            <div
                class="container"
@ -34,13 +39,20 @@ function columnName(col) {
                :key="col.id"
            >
                <div class="filter">
-                    <VnFilter
-                        ref="tableFilterRef"
-                        :column="col"
-                        :data-key="$attrs['data-key']"
-                        v-model="params[columnName(col)]"
-                        :search-url="searchUrl"
-                    />
+                    <slot
+                        :name="`filter-${col.name}`"
+                        :params="params"
+                        :column-name="columnName(col)"
+                        :search-fn
+                    >
+                        <VnFilter
+                            ref="tableFilterRef"
+                            :column="col"
+                            :data-key="$attrs['data-key']"
+                            v-model="params[columnName(col)]"
+                            :search-url="searchUrl"
+                        />
+                    </slot>
                </div>
                <div class="order">
                    <VnTableOrder
@ -77,13 +89,13 @@ function columnName(col) {
    display: flex;
    justify-content: center;
    align-items: center;
-    height: 45px;
+    min-height: 45px;
    gap: 10px;
 }

 .filter {
    width: 70%;
-    height: 40px;
+    min-height: 40px;
    text-align: center;
 }
 .order {
--- a/src/components/VnTable/tests/VnVisibleColumns.spec.js
+++ b/src/components/VnTable/tests/VnVisibleColumns.spec.js
@ -1,8 +1,7 @@
 import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
 import { createWrapper } from 'app/test/vitest/helper';
 import VnVisibleColumn from '../VnVisibleColumn.vue';
-import { axios } from 'app/test/vitest/helper';
-
+import { default as axios } from 'axios';
 describe('VnVisibleColumns', () => {
    let wrapper;
    let vm;
--- a/src/components/VnTable/filters/useTableHeight.js
+++ b/src/components/VnTable/filters/useTableHeight.js
@ -0,0 +1,18 @@
+import { onMounted, nextTick, ref } from 'vue';
+
+export function useTableHeight() {
+    const tableHeight = ref('90vh');
+
+    onMounted(async () => {
+        await nextTick();
+        let height = 100;
+        Array.from(document.querySelectorAll('[role="toolbar"]'))
+            .filter((element) => window.getComputedStyle(element).display !== 'none')
+            .forEach(() => {
+                height -= 10;
+            });
+        tableHeight.value = `${height}vh`;
+    });
+
+    return tableHeight;
+}
--- a/src/components/tests/CrudModel.spec.js
+++ b/src/components/tests/CrudModel.spec.js
@ -1,4 +1,6 @@
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { createWrapper } from 'app/test/vitest/helper';
+import { default as axios } from 'axios';
+
 import CrudModel from 'components/CrudModel.vue';
 import { vi, afterEach, beforeEach, beforeAll, describe, expect, it } from 'vitest';

--- a/src/components/tests/EditTableCellValueForm.spec.js
+++ b/src/components/tests/EditTableCellValueForm.spec.js
@ -1,4 +1,5 @@
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { createWrapper } from 'app/test/vitest/helper';
+import { default as axios } from 'axios';
 import EditForm from 'components/EditTableCellValueForm.vue';
 import { vi, afterEach, beforeAll, describe, expect, it } from 'vitest';

--- a/src/components/tests/FilterItemForm.spec.js
+++ b/src/components/tests/FilterItemForm.spec.js
@ -1,4 +1,6 @@
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { createWrapper } from 'app/test/vitest/helper';
+import { default as axios } from 'axios';
+
 import FilterItemForm from 'src/components/FilterItemForm.vue';
 import { vi, beforeAll, describe, expect, it } from 'vitest';

@ -38,9 +40,9 @@ describe('FilterItemForm', () => {
                { relation: 'producer', scope: { fields: ['name'] } },
                { relation: 'ink', scope: { fields: ['name'] } },
            ],
-            where: {"name":{"like":"%bolas de madera%"}},
+            where: { name: { like: '%bolas de madera%' } },
        };
-        
+
        expect(axios.get).toHaveBeenCalledWith('Items/withName', {
            params: { filter: JSON.stringify(expectedFilter) },
        });
@ -79,4 +81,4 @@ describe('FilterItemForm', () => {
        vm.selectItem({ id: 12345 });
        expect(wrapper.emitted('itemSelected')[0]).toEqual([12345]);
    });
-});
+});
--- a/src/components/tests/FormModel.spec.js
+++ b/src/components/tests/FormModel.spec.js
@ -1,5 +1,7 @@
 import { describe, expect, it, beforeAll, vi, afterAll } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { createWrapper } from 'app/test/vitest/helper';
+import { default as axios } from 'axios';
+
 import FormModel from 'src/components/FormModel.vue';

 describe('FormModel', () => {
--- a/src/components/tests/Leftmenu.spec.js
+++ b/src/components/tests/Leftmenu.spec.js
@ -1,6 +1,7 @@
-import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
-import Leftmenu from 'components/LeftMenu.vue';
+import { vi, describe, expect, it, beforeAll, afterEach, beforeEach } from 'vitest';
+import { default as axios } from 'axios';
+import { createWrapper } from 'app/test/vitest/helper';
+import LeftMenu from 'components/LeftMenu.vue';
 import * as vueRouter from 'vue-router';
 import { useNavigationStore } from 'src/stores/useNavigationStore';

@ -101,7 +102,7 @@ function mount(source = 'main') {
    vi.spyOn(axios, 'get').mockResolvedValue({
        data: [],
    });
-    const wrapper = createWrapper(Leftmenu, {
+    const wrapper = createWrapper(LeftMenu, {
        propsData: {
            source,
        },
@ -164,7 +165,7 @@ describe('getRoutes', () => {
    });
 });

-describe('Leftmenu as card', () => {
+describe('LeftMenu as card', () => {
    beforeAll(() => {
        vm = mount('card').vm;
    });
@ -173,7 +174,7 @@ describe('Leftmenu as card', () => {
        vm.getRoutes();
    });
 });
-describe('Leftmenu as main', () => {
+describe('LeftMenu as main', () => {
    beforeEach(() => {
        vm = mount().vm;
    });
--- a/src/components/common/SendEmailDialog.vue
+++ b/src/components/common/SendEmailDialog.vue
@ -60,7 +60,7 @@ async function confirm() {
                    v-model="address"
                    is-outlined
                    autofocus
-                    data-cy="SendEmailNotifiactionDialogInput"
+                    data-cy="SendEmailNotificationDialogInput"
                />
            </QCardSection>
            <QCardActions align="right">
--- a/src/components/common/SendSmsDialog.vue
+++ b/src/components/common/SendSmsDialog.vue
@ -1,15 +1,15 @@
 <script setup>
-import {useDialogPluginComponent} from 'quasar';
-import {useI18n} from 'vue-i18n';
-import {computed, ref} from 'vue';
+import { useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { computed, ref } from 'vue';
 import VnInput from 'components/common/VnInput.vue';
 import axios from 'axios';
-import useNotify from "composables/useNotify";
+import useNotify from 'composables/useNotify';

 const MESSAGE_MAX_LENGTH = 160;

-const {t} = useI18n();
-const {notify} = useNotify();
+const { t } = useI18n();
+const { notify } = useNotify();
 const props = defineProps({
    title: {
        type: String,
@ -34,7 +34,7 @@ const props = defineProps({
 });

 const emit = defineEmits([...useDialogPluginComponent.emits, 'sent']);
-const {dialogRef, onDialogHide} = useDialogPluginComponent();
+const { dialogRef, onDialogHide } = useDialogPluginComponent();

 const smsRules = [
    (val) => (val && val.length > 0) || t("The message can't be empty"),
@ -43,10 +43,10 @@ const smsRules = [
        t("The message it's too long"),
 ];

-const message = ref('');
+const message = ref(t('routeDelay'));

 const charactersRemaining = computed(
-    () => MESSAGE_MAX_LENGTH - new Blob([message.value]).size
+    () => MESSAGE_MAX_LENGTH - new Blob([message.value]).size,
 );

 const charactersChipColor = computed(() => {
@ -114,7 +114,7 @@ const onSubmit = async () => {
                                <QTooltip>
                                    {{
                                        t(
-                                            'Special characters like accents counts as a multiple'
+                                            'Special characters like accents counts as a multiple',
                                        )
                                    }}
                                </QTooltip>
@ -144,7 +144,10 @@ const onSubmit = async () => {
    max-width: 450px;
 }
 </style>
+
 <i18n>
+en:
+    routeDelay: "Your order has been delayed in transit.\nDelivery will take place throughout the day.\nWe apologize for the inconvenience and appreciate your patience."
 es:
    Message: Mensaje
    Send: Enviar
@ -153,4 +156,5 @@ es:
    The destination can't be empty: El destinatario no puede estar vacio
    The message can't be empty: El mensaje no puede estar vacio
    The message it's too long: El mensaje es demasiado largo
-</i18n>
+    routeDelay: "Retraso en ruta.\nInformamos que la ruta que lleva su pedido ha sufrido un retraso y la entrega se hará a lo largo del día.\nDisculpe las molestias."
+    </i18n>
--- a/src/components/common/VnAccountNumber.vue
+++ b/src/components/common/VnAccountNumber.vue
@ -1,35 +1,14 @@
 <script setup>
-import { nextTick, ref } from 'vue';
 import VnInput from './VnInput.vue';
 import { useAccountShortToStandard } from 'src/composables/useAccountShortToStandard';

-const $props = defineProps({
-    insertable: {
-        type: Boolean,
-        default: false,
-    },
-});
-
-const emit = defineEmits(['update:modelValue', 'accountShortToStandard']);
 const model = defineModel({ prop: 'modelValue' });
-const inputRef = ref(false);
-
-function setCursorPosition(pos) {
-    const input = inputRef.value.vnInputRef.$el.querySelector('input');
-    input.focus();
-    input.setSelectionRange(pos, pos);
-}
-
-async function handleUpdateModel(val) {
-    model.value = val?.at(-1) === '.' ? useAccountShortToStandard(val) : val;
-    await nextTick(() => setCursorPosition(0));
-}
 </script>
 <template>
    <VnInput
        v-model="model"
        ref="inputRef"
-        :insertable
-        @update:model-value="handleUpdateModel"
+        @keydown.tab="model = useAccountShortToStandard($event.target.value) ?? model"
+        @input="model = $event.target.value.replace(/[^\d.]/g, '')"
    />
 </template>
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@ -1,12 +1,15 @@
 <script setup>
-import { onBeforeMount } from 'vue';
-import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
+import { onBeforeMount, computed, markRaw } from 'vue';
+import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';

+const emit = defineEmits(['onFetch']);
+
 const props = defineProps({
+    id: { type: Number, required: false, default: null },
    dataKey: { type: String, required: true },
    url: { type: String, default: undefined },
    idInWhere: { type: Boolean, default: false },
@ -16,26 +19,25 @@ const props = defineProps({
    searchDataKey: { type: String, default: undefined },
    searchbarProps: { type: Object, default: undefined },
    redirectOnError: { type: Boolean, default: false },
+    visual: { type: Boolean, default: true },
 });

+const route = useRoute();
 const stateStore = useStateStore();
 const router = useRouter();
-const arrayData = useArrayData(props.dataKey, {
-    url: props.url,
-    userFilter: props.filter,
-    oneRecord: true,
-});
+const entityId = computed(() => props.id || route?.params?.id);
+let arrayData = getArrayData(entityId.value, props.url);

 onBeforeRouteLeave(() => {
    stateStore.cardDescriptorChangeValue(null);
 });

 onBeforeMount(async () => {
-    stateStore.cardDescriptorChangeValue(props.descriptor);
+    stateStore.cardDescriptorChangeValue(markRaw(props.descriptor));

    const route = router.currentRoute.value;
    try {
-        await fetch(route.params.id);
+        await fetch(entityId.value);
    } catch {
        const { matched: matches } = route;
        const { path } = matches.at(-1);
@ -51,24 +53,41 @@ onBeforeRouteUpdate(async (to, from) => {
            router.push({ name, params: to.params });
        }
    }
-    const id = to.params.id;
-    if (id !== from.params.id) await fetch(id, true);
+    if (entityId.value !== to.params.id) await fetch(to.params.id, true);
 });

 async function fetch(id, append = false) {
-    const regex = /\/(\d+)/;
    if (props.idInWhere) arrayData.store.filter.where = { id };
-    else if (!regex.test(props.url)) arrayData.store.url = `${props.url}/${id}`;
-    else arrayData.store.url = props.url.replace(regex, `/${id}`);
+    else {
+        arrayData = getArrayData(id);
+    }
    await arrayData.fetch({ append, updateRouter: false });
+    emit('onFetch', arrayData.store.data);
 }
 function hasRouteParam(params, valueToCheck = ':addressId') {
    return Object.values(params).includes(valueToCheck);
 }
+
+function formatUrl(id) {
+    const newId = id || entityId.value;
+    const regex = /\/(\d+)/;
+    if (!regex.test(props.url)) return `${props.url}/${newId}`;
+    return props.url.replace(regex, `/${newId}`);
+}
+
+function getArrayData(id, url) {
+    return useArrayData(props.dataKey, {
+        url: url ?? formatUrl(id),
+        userFilter: props.filter,
+        oneRecord: true,
+    });
+}
 </script>
 <template>
-    <VnSubToolbar />
-    <div :class="[useCardSize(), $attrs.class]">
-        <RouterView :key="$route.path" />
-    </div>
+    <template v-if="visual">
+        <VnSubToolbar />
+        <div :class="[useCardSize(), $attrs.class]">
+            <RouterView :key="$route.path" />
+        </div>
+    </template>
 </template>
--- a/src/components/common/VnCheckbox.vue
+++ b/src/components/common/VnCheckbox.vue
@ -27,7 +27,11 @@ const checkboxModel = computed({
 </script>
 <template>
    <div>
-        <QCheckbox v-bind="$attrs" v-model="checkboxModel" />
+        <QCheckbox
+            v-bind="$attrs"
+            v-model="checkboxModel"
+            :data-cy="$attrs['data-cy'] ?? `vnCheckbox${$attrs['label'] ?? ''}`"
+        />
        <QIcon
            v-if="info"
            v-bind="$attrs"
--- a/src/components/common/VnDms.vue
+++ b/src/components/common/VnDms.vue
@ -35,6 +35,10 @@ const $props = defineProps({
        type: String,
        default: null,
    },
+    hasFile: {
+        type: Boolean,
+        default: false,
+    },
 });

 const warehouses = ref();
@ -90,6 +94,7 @@ function defaultData() {
    if ($props.formInitialData) return (dms.value = $props.formInitialData);
    return addDefaultData({
        reference: route.params.id,
+        hasFile: $props.hasFile,
    });
 }

--- a/src/components/common/VnDmsInput.vue
+++ b/src/components/common/VnDmsInput.vue
@ -0,0 +1,166 @@
+<script setup>
+import VnConfirm from '../ui/VnConfirm.vue';
+import VnInput from './VnInput.vue';
+import VnDms from './VnDms.vue';
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { downloadFile } from 'src/composables/downloadFile';
+
+const { t } = useI18n();
+const quasar = useQuasar();
+const documentDialogRef = ref({});
+const editDownloadDisabled = ref(false);
+const $props = defineProps({
+    defaultDmsCode: {
+        type: String,
+        default: 'invoiceIn',
+    },
+    disable: {
+        type: Boolean,
+        default: true,
+    },
+    data: {
+        type: Object,
+        default: null,
+    },
+    formRef: {
+        type: Object,
+        default: null,
+    },
+});
+
+function deleteFile(dmsFk) {
+    quasar
+        .dialog({
+            component: VnConfirm,
+            componentProps: {
+                title: t('globals.confirmDeletion'),
+                message: t('globals.confirmDeletionMessage'),
+            },
+        })
+        .onOk(async () => {
+            await axios.post(`dms/${dmsFk}/removeFile`);
+            $props.formRef.formData.dmsFk = null;
+            $props.formRef.formData.dms = undefined;
+            $props.formRef.hasChanges = true;
+            $props.formRef.save();
+        });
+}
+</script>
+<template>
+    <div class="row no-wrap">
+        <VnInput
+            :label="t('Document')"
+            v-model="data.dmsFk"
+            clearable
+            clear-icon="close"
+            class="full-width"
+            :disable="disable"
+        />
+        <div
+            v-if="data.dmsFk"
+            class="row no-wrap q-pa-xs q-gutter-x-xs"
+            data-cy="dms-buttons"
+        >
+            <QBtn
+                :disable="editDownloadDisabled"
+                @click="downloadFile(data.dmsFk)"
+                icon="cloud_download"
+                color="primary"
+                flat
+                :class="{
+                    'no-pointer-events': editDownloadDisabled,
+                }"
+                padding="xs"
+                round
+            >
+                <QTooltip>{{ t('Download file') }}</QTooltip>
+            </QBtn>
+            <QBtn
+                :disable="editDownloadDisabled"
+                @click="
+                    () => {
+                        documentDialogRef.show = true;
+                        documentDialogRef.dms = data.dms;
+                    }
+                "
+                icon="edit"
+                color="primary"
+                flat
+                :class="{
+                    'no-pointer-events': editDownloadDisabled,
+                }"
+                padding="xs"
+                round
+            >
+                <QTooltip>{{ t('Edit document') }}</QTooltip>
+            </QBtn>
+            <QBtn
+                :disable="editDownloadDisabled"
+                @click="deleteFile(data.dmsFk)"
+                icon="delete"
+                color="primary"
+                flat
+                round
+                :class="{
+                    'no-pointer-events': editDownloadDisabled,
+                }"
+                padding="xs"
+            >
+                <QTooltip>{{ t('Delete file') }}</QTooltip>
+            </QBtn>
+        </div>
+        <QBtn
+            v-else
+            icon="add_circle"
+            color="primary"
+            flat
+            round
+            v-shortcut="'+'"
+            padding="xs"
+            @click="
+                () => {
+                    documentDialogRef.show = true;
+                    delete documentDialogRef.dms;
+                }
+            "
+            data-cy="dms-create"
+        >
+            <QTooltip>{{ t('Create document') }}</QTooltip>
+        </QBtn>
+    </div>
+    <QDialog v-model="documentDialogRef.show">
+        <VnDms
+            model="dms"
+            :default-dms-code="defaultDmsCode"
+            :form-initial-data="documentDialogRef.dms"
+            :url="
+                documentDialogRef.dms
+                    ? `Dms/${documentDialogRef.dms.id}/updateFile`
+                    : 'Dms/uploadFile'
+            "
+            :description="documentDialogRef.supplierName"
+            @on-data-saved="
+                (_, { data }) => {
+                    let dmsData = data;
+                    if (Array.isArray(data)) dmsData = data[0];
+                    formRef.formData.dmsFk = dmsData.id;
+                    formRef.formData.dms = dmsData;
+                    formRef.hasChanges = true;
+                    formRef.save();
+                }
+            "
+        />
+    </QDialog>
+</template>
+<i18n>
+es:
+    Document: Documento
+    Download file: Descargar archivo
+    Edit document: Editar documento
+    Delete file: Eliminar archivo
+    Create document: Crear documento
+
+</i18n>
--- a/src/components/common/VnDropdown.vue
+++ b/src/components/common/VnDropdown.vue
@ -0,0 +1,53 @@
+<script setup>
+import { ref } from 'vue';
+import VnSelect from './VnSelect.vue';
+
+const stateBtnDropdownRef = ref();
+
+const emit = defineEmits(['changeState']);
+
+const $props = defineProps({
+    disable: {
+        type: Boolean,
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: null,
+    },
+    optionLabel: {
+        type: String,
+        default: 'name',
+    },
+    optionValue: {
+        type: String,
+        default: 'id',
+    },
+});
+
+async function changeState(value) {
+    stateBtnDropdownRef.value?.hide();
+    emit('changeState', value);
+}
+</script>
+
+<template>
+    <QBtnDropdown
+        ref="stateBtnDropdownRef"
+        color="black"
+        text-color="white"
+        :label="$t('globals.changeState')"
+        :disable="$props.disable"
+    >
+        <VnSelect
+            :options="$props.options"
+            :option-label="$props.optionLabel"
+            :option-value="$props.optionValue"
+            hide-selected
+            hide-dropdown-icon
+            focus-on-mount
+            @update:model-value="changeState"
+        >
+        </VnSelect>
+    </QBtnDropdown>
+</template>
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@ -84,7 +84,7 @@ const mixinRules = [
    ...($attrs.rules ?? []),
    (val) => {
        const maxlength = $props.maxlength;
-        if (maxlength && +val.length > maxlength)
+        if (maxlength && +val?.length > maxlength)
            return t(`maxLength`, { value: maxlength });
        const { min, max } = vnInputRef.value.$attrs;
        if (!min) return null;
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@ -107,7 +107,7 @@ const manageDate = (date) => {
            @click="isPopupOpen = !isPopupOpen"
            @keydown="isPopupOpen = false"
            hide-bottom-space
-            :data-cy="$attrs.dataCy ?? $attrs.label + '_inputDate'"
+            :data-cy="($attrs['data-cy'] ?? $attrs.label) + '_inputDate'"
        >
            <template #append>
                <QIcon
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
@ -10,12 +10,12 @@ import { useColor } from 'src/composables/useColor';
 import { useCapitalize } from 'src/composables/useCapitalize';
 import { useValidator } from 'src/composables/useValidator';
 import VnAvatar from '../ui/VnAvatar.vue';
-import VnJsonValue from '../common/VnJsonValue.vue';
-import FetchData from '../FetchData.vue';
-import VnSelect from './VnSelect.vue';
+import VnLogValue from './VnLogValue.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
 import VnPaginate from '../ui/VnPaginate.vue';
+import VnLogFilter from 'src/components/common/VnLogFilter.vue';
 import RightMenu from './RightMenu.vue';
+import { useFilterParams } from 'src/composables/useFilterParams';

 const stateStore = useStateStore();
 const validationsStore = useValidator();
@ -72,39 +72,8 @@ const filter = {
 };

 const paginate = ref();
-const actions = ref();
-const changeInput = ref();
-const searchInput = ref();
-const userRadio = ref();
-const userSelect = ref();
-const dateFrom = ref();
-const dateFromDialog = ref(false);
-const dateTo = ref();
-const dateToDialog = ref(false);
-const selectedFilters = ref({});
-const userTypes = [
-    { label: 'All', value: undefined },
-    { label: 'User', value: { neq: null } },
-    { label: 'System', value: null },
-];
-const checkboxOptions = ref({
-    insert: {
-        label: 'Creates',
-        selected: false,
-    },
-    update: {
-        label: 'Edits',
-        selected: false,
-    },
-    delete: {
-        label: 'Deletes',
-        selected: false,
-    },
-    select: {
-        label: 'Accesses',
-        selected: false,
-    },
-});
+const dataKey = computed(() => `${props.model}Log`);
+const userParams = ref(useFilterParams(dataKey.value).params);

 let validations = models;
 let pointRecord = ref(null);
@ -246,131 +215,55 @@ async function setLogTree(data) {
 function filterByRecord(modelLog) {
    byRecord.value = true;
    const { id, model } = modelLog;
-
-    searchInput.value = id;
-    selectedFilters.value.changedModelId = id;
-    selectedFilters.value.changedModel = model;
-    applyFilter();
+    applyFilter({ changedModelId: id, changedModel: model });
 }

-async function applyFilter() {
-    filter.where = { and: [] };
-    if (
-        !selectedFilters.value.changedModel ||
-        (!selectedFilters.value.changedModelValue &&
-            !selectedFilters.value.changedModelId)
-    )
-        byRecord.value = false;
-
-    if (!byRecord.value) filter.where.and.push({ originFk: route.params.id });
-
-    if (Object.keys(selectedFilters.value).length) {
-        filter.where.and.push(selectedFilters.value);
-    }
-
-    paginate.value.fetch({ filter });
+async function applyFilter(params = {}) {
+    paginate.value.arrayData.resetPagination();
+    paginate.value.arrayData.applyFilter({
+        filter: {},
+        params: { originFk: route.params.id, ...params },
+    });
 }

-function setDate(type) {
-    let from = dateFrom.value
-        ? date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
-        : undefined;
-    from = date.adjustDate(from, { hour: 0, minute: 0, second: 0, millisecond: 0 }, true);
-
-    let to = dateTo.value
-        ? date.formatDate(dateTo.value.split('-').reverse().join('-'), 'YYYY-MM-DD')
-        : date.formatDate(dateFrom.value.split('-').reverse().join('-'), 'YYYY-MM-DD');
-    to = date.adjustDate(
-        to,
-        { hour: 21, minute: 59, second: 59, millisecond: 999 },
-        true,
-    );
-
-    switch (type) {
-        case 'from':
-            return { between: [from, to] };
-        case 'to': {
-            if (dateFrom.value) {
+function exprBuilder(param, value) {
+    switch (param) {
+        case 'changedModelValue':
+            return { [param]: { like: `%${value}%` } };
+        case 'change':
+            if (value)
                return {
-                    between: [from, to],
+                    or: [
+                        { oldJson: { like: `%${value}%` } },
+                        { newJson: { like: `%${value}%` } },
+                        { description: { like: `%${value}%` } },
+                    ],
                };
-            }
-            return { lte: to };
-        }
+            break;
+        case 'action':
+            if (value?.length) return { [param]: { inq: value } };
+            break;
+        case 'from':
+            return { creationDate: { gte: value } };
+        case 'to':
+            return { creationDate: { lte: value } };
+        case 'userType':
+            if (value === 'User') return { userFk: { neq: null } };
+            if (value === 'System') return { userFk: null };
+            break;
+        default:
+            return { [param]: value };
    }
 }

-function selectFilter(type, dateType) {
-    const filter = {};
-    const actions = { inq: [] };
-    let reload = true;
-
-    if (type === 'search') {
-        if (/^\s*[0-9]+\s*$/.test(searchInput.value) || props.byRecord) {
-            selectedFilters.value.changedModelId = searchInput.value.trim();
-        } else if (!searchInput.value) {
-            selectedFilters.value.changedModelId = undefined;
-            selectedFilters.value.changedModelValue = undefined;
-        } else {
-            selectedFilters.value.changedModelValue = { like: `%${searchInput.value}%` };
-        }
-    }
-    if (type === 'action' && selectedFilters.value.changedModel === null) {
-        selectedFilters.value.changedModel = undefined;
-    }
-    if (type === 'userRadio') {
-        selectedFilters.value.userFk = userRadio.value;
-    }
-    if (type === 'change') {
-        if (changeInput.value)
-            selectedFilters.value.or = [
-                { oldJson: { like: `%${changeInput.value}%` } },
-                { newJson: { like: `%${changeInput.value}%` } },
-                { description: { like: `%${changeInput.value}%` } },
-            ];
-        else selectedFilters.value.or = undefined;
-    }
-    if (type === 'userSelect') {
-        selectedFilters.value.userFk =
-            userSelect.value !== null ? userSelect.value : undefined;
-    }
-    if (type === 'date') {
-        if (!dateFrom.value && !dateTo.value) {
-            selectedFilters.value.creationDate = undefined;
-        } else if (dateType === 'to') {
-            selectedFilters.value.creationDate = setDate('to');
-        } else if (dateType === 'from') {
-            selectedFilters.value.creationDate = setDate('from');
-        }
-    }
-
-    Object.keys(checkboxOptions.value).forEach((key) => {
-        if (checkboxOptions.value[key].selected) actions.inq.push(key);
-    });
-    selectedFilters.value.action = actions.inq.length ? actions : undefined;
-
-    Object.keys(selectedFilters.value).forEach((key) => {
-        if (selectedFilters.value[key]) filter[key] = selectedFilters.value[key];
-    });
-
-    if (reload) applyFilter(filter);
-}
-
 async function clearFilter() {
-    selectedFilters.value = {};
    byRecord.value = false;
-    userSelect.value = undefined;
-    searchInput.value = undefined;
-    changeInput.value = undefined;
-    dateFrom.value = undefined;
-    dateTo.value = undefined;
-    userRadio.value = undefined;
-    Object.keys(checkboxOptions.value).forEach(
-        (opt) => (checkboxOptions.value[opt].selected = false),
-    );
    await applyFilter();
 }

+onMounted(() => {
+    stateStore.rightDrawerChangeValue(true);
+});
 onUnmounted(() => {
    stateStore.rightDrawer = false;
 });
@ -383,32 +276,18 @@ watch(
 );
 </script>
 <template>
-    <FetchData
-        :url="`${props.model}Logs/${route.params.id}/models`"
-        :filter="{ order: ['changedModel'] }"
-        @on-fetch="
-            (data) =>
-                (actions = data.map((item) => {
-                    const changedModel = item.changedModel;
-                    return {
-                        locale: useCapitalize(
-                            validations[changedModel]?.locale?.name ?? changedModel,
-                        ),
-                        value: changedModel,
-                    };
-                }))
-        "
-        auto-load
-    />
    <VnPaginate
        ref="paginate"
-        :data-key="`${model}Log`"
-        :url="`${model}Logs`"
+        :data-key
+        :url="dataKey + 's'"
        :user-filter="filter"
        :skeleton="false"
        auto-load
        @on-fetch="setLogTree"
+        @on-change="setLogTree"
        search-url="logs"
+        :exprBuilder
+        :order="['creationDate DESC', 'id DESC']"
    >
        <template #body>
            <div
@ -467,6 +346,7 @@ watch(
                                            backgroundColor: useColor(modelLog.model),
                                        }"
                                        :title="`${modelLog.model} #${modelLog.id}`"
+                                        data-cy="vnLog-model-chip"
                                    >
                                        {{ t(modelLog.modelI18n) }}
                                    </QChip>
@ -560,10 +440,9 @@ watch(
                                                                            value.nameI18n
                                                                        }}:
                                                                    </span>
-                                                                    <VnJsonValue
-                                                                        :value="
-                                                                            value.val.val
-                                                                        "
+                                                                    <VnLogValue
+                                                                        :value="value.val"
+                                                                        :name="value.name"
                                                                    />
                                                                </QItem>
                                                            </QCardSection>
@ -581,6 +460,7 @@ watch(
                                                            }`,
                                                        )
                                                    "
+                                                    data-cy="vnLog-action-icon"
                                                />
                                            </div>
                                        </QItem>
@ -614,7 +494,10 @@ watch(
                                                    >
                                                        {{ prop.nameI18n }}:
                                                    </span>
-                                                    <VnJsonValue :value="prop.val.val" />
+                                                    <VnLogValue
+                                                        :value="prop.val"
+                                                        :name="prop.name"
+                                                    />
                                                    <span
                                                        v-if="
                                                            propIndex <
@ -642,8 +525,9 @@ watch(
                                                        {{ prop.nameI18n }}:
                                                    </span>
                                                    <span v-if="log.action == 'update'">
-                                                        <VnJsonValue
-                                                            :value="prop.old.val"
+                                                        <VnLogValue
+                                                            :value="prop.old"
+                                                            :name="prop.name"
                                                        />
                                                        <span
                                                            v-if="prop.old.id"
@ -652,8 +536,9 @@ watch(
                                                            #{{ prop.old.id }}
                                                        </span>
                                                        →
-                                                        <VnJsonValue
-                                                            :value="prop.val.val"
+                                                        <VnLogValue
+                                                            :value="prop.val"
+                                                            :name="prop.name"
                                                        />
                                                        <span
                                                            v-if="prop.val.id"
@ -663,8 +548,9 @@ watch(
                                                        </span>
                                                    </span>
                                                    <span v-else="prop.old.val">
-                                                        <VnJsonValue
-                                                            :value="prop.val.val"
+                                                        <VnLogValue
+                                                            :value="prop.val"
+                                                            :name="prop.name"
                                                        />
                                                        <span
                                                            v-if="prop.old.id"
@ -692,176 +578,12 @@ watch(
    </VnPaginate>
    <RightMenu>
        <template #right-panel>
-            <QList dense>
-                <QSeparator />
-                <QItem class="q-mt-sm">
-                    <QInput
-                        :label="t('globals.search')"
-                        v-model="searchInput"
-                        class="full-width"
-                        clearable
-                        clear-icon="close"
-                        @keyup.enter="() => selectFilter('search')"
-                        @focusout="() => selectFilter('search')"
-                        @clear="() => selectFilter('search')"
-                    >
-                        <template #append>
-                            <QIcon name="info" class="cursor-pointer">
-                                <QTooltip>{{ t('tooltips.search') }}</QTooltip>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                </QItem>
-                <QItem>
-                    <VnSelect
-                        class="full-width"
-                        :label="t('globals.entity')"
-                        v-model="selectedFilters.changedModel"
-                        option-label="locale"
-                        option-value="value"
-                        :options="actions"
-                        @update:model-value="selectFilter('action')"
-                        hide-selected
-                    />
-                </QItem>
-                <QItem class="q-mt-sm">
-                    <QOptionGroup
-                        size="sm"
-                        v-model="userRadio"
-                        :options="userTypes"
-                        color="primary"
-                        @update:model-value="selectFilter('userRadio')"
-                        right-label
-                    >
-                        <template #label="{ label }">
-                            {{ t(`Users.${label}`) }}
-                        </template>
-                    </QOptionGroup>
-                </QItem>
-                <QItem class="q-mt-sm">
-                    <QItemSection v-if="userRadio !== null">
-                        <VnSelect
-                            class="full-width"
-                            :label="t('globals.user')"
-                            v-model="userSelect"
-                            option-label="name"
-                            option-value="id"
-                            :url="`${model}Logs/${route.params.id}/editors`"
-                            :fields="['id', 'nickname', 'name', 'image']"
-                            sort-by="nickname"
-                            @update:model-value="selectFilter('userSelect')"
-                            hide-selected
-                        >
-                            <template #option="{ opt, itemProps }">
-                                <QItem
-                                    v-bind="itemProps"
-                                    class="q-pa-xs row items-center"
-                                >
-                                    <QItemSection class="col-3 items-center">
-                                        <VnAvatar :worker-id="opt.id" />
-                                    </QItemSection>
-                                    <QItemSection class="col-9 justify-center">
-                                        <span>{{ opt.name }}</span>
-                                        <span class="text-grey">{{ opt.nickname }}</span>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </QItemSection>
-                </QItem>
-                <QItem class="q-mt-sm">
-                    <QInput
-                        :label="t('globals.changes')"
-                        v-model="changeInput"
-                        class="full-width"
-                        clearable
-                        clear-icon="close"
-                        @keyup.enter="selectFilter('change')"
-                        @focusout="selectFilter('change')"
-                        @clear="selectFilter('change')"
-                    >
-                        <template #append>
-                            <QIcon name="info" class="cursor-pointer">
-                                <QTooltip max-width="250px">{{
-                                    t('tooltips.changes')
-                                }}</QTooltip>
-                            </QIcon>
-                        </template>
-                    </QInput>
-                </QItem>
-                <QItem
-                    :class="index == 'create' ? 'q-mt-md' : 'q-mt-xs'"
-                    v-for="(checkboxOption, index) in checkboxOptions"
-                    :key="index"
-                >
-                    <QCheckbox
-                        size="sm"
-                        v-model="checkboxOption.selected"
-                        :label="t(`actions.${checkboxOption.label}`)"
-                        @update:model-value="selectFilter"
-                    />
-                </QItem>
-                <QItem class="q-mt-sm">
-                    <QInput
-                        class="full-width"
-                        :label="t('globals.date')"
-                        @click="dateFromDialog = true"
-                        @focus="(evt) => evt.target.blur()"
-                        @clear="selectFilter('date', 'to')"
-                        v-model="dateFrom"
-                        clearable
-                        clear-icon="close"
-                    />
-                </QItem>
-                <QItem class="q-mt-sm">
-                    <QInput
-                        class="full-width"
-                        :label="t('globals.to')"
-                        @click="dateToDialog = true"
-                        @focus="(evt) => evt.target.blur()"
-                        @clear="selectFilter('date', 'from')"
-                        v-model="dateTo"
-                        clearable
-                        clear-icon="close"
-                    />
-                </QItem>
-            </QList>
+            <VnLogFilter :data-key />
        </template>
    </RightMenu>
-    <QDialog v-model="dateFromDialog">
-        <QDate
-            :years-in-month-view="false"
-            v-model="dateFrom"
-            dense
-            flat
-            minimal
-            @update:model-value="
-                (value) => {
-                    dateFromDialog = false;
-                    dateFrom = date.formatDate(value, 'DD-MM-YYYY');
-                    selectFilter('date', 'from');
-                }
-            "
-        />
-    </QDialog>
-    <QDialog v-model="dateToDialog">
-        <QDate
-            v-model="dateTo"
-            dense
-            flat
-            minimal
-            @update:model-value="
-                (value) => {
-                    dateToDialog = false;
-                    dateTo = date.formatDate(value, 'DD-MM-YYYY');
-                    selectFilter('date', 'to');
-                }
-            "
-        />
-    </QDialog>
    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <QBtn
-            v-if="Object.values(selectedFilters).some((filter) => filter !== undefined)"
+            v-if="Object.keys(userParams).some((filter) => filter !== 'originFk')"
            color="primary"
            icon="filter_alt_off"
            size="md"
--- a/src/components/common/VnLogFilter.vue
+++ b/src/components/common/VnLogFilter.vue
@ -1,77 +1,249 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnTableFilter from '../VnTable/VnTableFilter.vue';
+import VnSelect from './VnSelect.vue';
+import { useRoute } from 'vue-router';
+import VnInput from './VnInput.vue';
+import { ref, computed, watch } from 'vue';
+import VnInputDate from './VnInputDate.vue';
+import { useFilterParams } from 'src/composables/useFilterParams';
+import FetchData from '../FetchData.vue';
+import { useValidator } from 'src/composables/useValidator';
+import { useCapitalize } from 'src/composables/useCapitalize';
+import VnAvatar from '../ui/VnAvatar.vue';

-const { t } = useI18n();
-const props = defineProps({
+const $props = defineProps({
    dataKey: {
        type: String,
-        required: true,
+        default: null,
    },
 });

-const workers = ref();
+const { t } = useI18n();
+const route = useRoute();
+const validationsStore = useValidator();
+const { models } = validationsStore;
+const entities = ref([]);
+const editors = ref([]);
+const userParams = ref(useFilterParams($props.dataKey).params);
+let validations = models;
+const userTypes = [
+    { value: 'All', label: t(`Users.All`) },
+    { value: 'User', label: t(`Users.User`) },
+    { value: 'System', label: t(`Users.System`) },
+];
+const checkboxOptions = ref([
+    { name: 'insert', label: 'Creates', selected: false },
+    { name: 'update', label: 'Edits', selected: false },
+    { name: 'delete', label: 'Deletes', selected: false },
+    { name: 'select', label: 'Accesses', selected: false },
+]);
+const columns = computed(() => [
+    { name: 'changedModelValue' },
+    { name: 'changedModel' },
+    { name: 'userType', orderBy: false },
+    { name: 'userFk' },
+    { name: 'change', orderBy: false },
+    { name: 'action' },
+    { name: 'from', orderBy: 'creationDate' },
+    { name: 'to', orderBy: 'creationDate' },
+]);
+
+const userParamsWatcher = watch(
+    () => userParams.value,
+    (params) => {
+        if (params.action) {
+            params.action.forEach((option) => {
+                checkboxOptions.value.find((o) => o.name === option).selected = true;
+            });
+            userParamsWatcher();
+        }
+    },
+);
+
+function getActions() {
+    const actions = checkboxOptions.value
+        .filter((option) => option.selected)
+        ?.map((o) => o.name);
+    return actions.length ? actions : null;
+}
 </script>

 <template>
    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (workers = data)"
+        :url="`${dataKey}s/${route.params.id}/models`"
+        :filter="{ order: ['changedModel'] }"
+        @on-fetch="
+            (data) =>
+                (entities = data.map((item) => {
+                    const changedModel = item.changedModel;
+                    return {
+                        locale: useCapitalize(
+                            validations[changedModel]?.locale?.name ?? changedModel,
+                        ),
+                        value: changedModel,
+                    };
+                }))
+        "
        auto-load
    />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #tags="{ tag, formatFn }">
-            <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
+    <FetchData
+        :url="`${dataKey}s/${route.params.id}/editors`"
+        :filter="{ fields: ['id', 'nickname', 'name', 'image'] }"
+        sort-by="nickname"
+        @on-fetch="(data) => (editors = data)"
+        auto-load
+    />
+    <VnTableFilter
+        v-if="dataKey"
+        :data-key
+        :columns="columns"
+        :redirect="false"
+        :hiddenTags="['originFk', 'creationDate']"
+        search-url="logs"
+        :showTagChips="false"
+    >
+        <template #filter-changedModelValue="{ params, columnName, searchFn }">
+            <VnInput
+                :label="t('globals.search')"
+                v-model="params[columnName]"
+                @keyup.enter="searchFn"
+                @blur="searchFn"
+                @remove="searchFn"
+                :info="t('tooltips.search')"
+                dense
+                filled
+                data-cy="vnLog-search"
+            />
+        </template>
+        <template #filter-changedModel="{ params, columnName, searchFn }">
+            <VnSelect
+                :label="t('globals.entity')"
+                v-model="params[columnName]"
+                option-label="locale"
+                option-value="value"
+                :options="entities"
+                @update:model-value="() => searchFn()"
+                dense
+                filled
+                data-cy="vnLog-entity"
+            />
+        </template>
+        <template #filter-userType="{ params, columnName, searchFn }">
+            <QOptionGroup
+                class="text-left"
+                size="sm"
+                v-model="params[columnName]"
+                :options="userTypes"
+                color="primary"
+                @update:model-value="
+                    () => {
+                        params.userFk = null;
+                        searchFn();
+                    }
+                "
+            />
+        </template>
+        <template #filter-userFk="{ params, columnName, searchFn }">
+            <VnSelect
+                :label="t('globals.user')"
+                v-model="params[columnName]"
+                :options="editors"
+                @update:modelValue="() => searchFn()"
+                :disable="params.userType === 'System'"
+                dense
+                filled
+            >
+                <template #option="{ opt, itemProps }">
+                    <QItem v-bind="itemProps" class="q-pa-xs row items-center">
+                        <QItemSection class="col-3 items-center">
+                            <VnAvatar :worker-id="opt.id" />
+                        </QItemSection>
+                        <QItemSection class="col-9 justify-center">
+                            <span>{{ opt.name }}</span>
+                            <span class="text-grey">{{ opt.nickname }}</span>
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+        </template>
+        <template #filter-change="{ params, columnName, searchFn }">
+            <VnInput
+                :label="t('globals.changes')"
+                v-model="params[columnName]"
+                @keyup.enter="searchFn"
+                @blur="searchFn"
+                @remove="searchFn"
+                :info="t('tooltips.changes')"
+                dense
+                filled
+            />
+        </template>
+        <template #filter-action="{ searchFn }">
+            <div class="column">
+                <QCheckbox
+                    v-for="checkboxOption in checkboxOptions"
+                    :key="checkboxOption"
+                    size="sm"
+                    v-model="checkboxOption.selected"
+                    :label="t(`actions.${checkboxOption.label}`)"
+                    @update:model-value="
+                        () => searchFn(undefined, 'action', getActions())
+                    "
+                    data-cy="vnLog-checkbox"
+                />
            </div>
        </template>
-        <template #body="{ params, searchFn }">
-            <QDate
-                v-model="params.created"
-                @update:model-value="searchFn()"
+        <template #filter-from="{ params, columnName, searchFn }">
+            <VnInputDate
+                :label="t('globals.from')"
+                v-model="params[columnName]"
                dense
-                flat
-                minimal
-            >
-            </QDate>
-            <QSeparator />
-            <QItem>
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <QSelect
-                        :label="t('User')"
-                        v-model="params.userFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
+                filled
+                @update:modelValue="() => searchFn()"
+            />
        </template>
-    </VnFilterPanel>
+        <template #filter-to="{ params, columnName, searchFn }">
+            <VnInputDate
+                :label="t('globals.to')"
+                v-model="params[columnName]"
+                dense
+                filled
+                @update:modelValue="() => searchFn()"
+            />
+        </template>
+    </VnTableFilter>
 </template>
-
 <i18n>
-en:
-    params:
-        search: Contains
-        userFk: User
-        created: Created
 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.
+    actions:
+        Creates: Crea
+        Edits: Modifica
+        Deletes: Elimina
+        Accesses: Accede
+    Users:
+        User: Usuario
+        All: Todo
+        System: Sistema
    params:
-        search: Contiene
-        userFk: Usuario
-        created: Creada
-    User: Usuario
+        changedModel: Entity
+
+en:
+    tooltips:
+        search: Search by identifier or concept
+        changes: Search by changes. Attributes must be searched by their internal name, to get it place the cursor over the attribute.
+    actions:
+        Creates: Creates
+        Edits: Edits
+        Deletes: Deletes
+        Accesses: Accesses
+    Users:
+        User: User
+        All: All
+        System: System
+    params:
+        changedModel: Entidad
 </i18n>
--- a/src/components/common/VnLogValue.vue
+++ b/src/components/common/VnLogValue.vue
@ -0,0 +1,28 @@
+<script setup>
+import { useDescriptorStore } from 'src/stores/useDescriptorStore';
+import VnJsonValue from './VnJsonValue.vue';
+import { computed } from 'vue';
+const descriptorStore = useDescriptorStore();
+
+const $props = defineProps({
+    value: { type: Object, default: () => {} },
+    name: { type: String, default: undefined },
+});
+
+const descriptor = computed(() => descriptorStore.has($props.name));
+</script>
+<template>
+    <VnJsonValue :value="value.val" />
+    <span
+        v-if="(value.id || typeof value.val == 'number') && descriptor"
+        style="margin-left: 2px"
+    >
+        <QIcon
+            name="launch"
+            class="link"
+            :data-cy="'iconLaunch-' + $props.name"
+            style="padding-bottom: 2px"
+        />
+        <component :is="descriptor" :id="value.id ?? value.val" />
+    </span>
+</template>
--- a/src/components/common/VnSection.vue
+++ b/src/components/common/VnSection.vue
@ -40,10 +40,6 @@ const $props = defineProps({
        type: Boolean,
        default: true,
    },
-    keepData: {
-        type: Boolean,
-        default: true,
-    },
 });

 const route = useRoute();
@ -61,7 +57,6 @@ onBeforeMount(() => {
    if ($props.dataKey)
        arrayData = useArrayData($props.dataKey, {
            searchUrl: 'table',
-            keepData: $props.keepData,
            ...$props.arrayDataProps,
            navigate: $props.redirect,
        });
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@ -152,6 +152,10 @@ const value = computed({
    },
 });

+const computedSortBy = computed(() => {
+    return $props.sortBy || $props.optionLabel + ' ASC';
+});
+
 watch(options, (newValue) => {
    setOptions(newValue);
 });
@ -186,7 +190,7 @@ function findKeyInOptions() {
 }

 function setOptions(data) {
-    data = dataByOrder(data, $props.sortBy);
+    data = dataByOrder(data, computedSortBy.value);
    myOptions.value = JSON.parse(JSON.stringify(data));
    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
    emit('update:options', data);
@ -216,7 +220,8 @@ function filter(val, options) {
 async function fetchFilter(val) {
    if (!$props.url) return;

-    const { fields, include, sortBy, limit } = $props;
+    const { fields, include, limit } = $props;
+    const sortBy = computedSortBy.value;
    const key =
        optionFilterValue.value ??
        (new RegExp(/\d/g).test(val)
--- a/src/components/common/tests/VnChangePassword.spec.js
+++ b/src/components/common/tests/VnChangePassword.spec.js
@ -1,4 +1,5 @@
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import axios from 'axios';
+import { createWrapper } from 'app/test/vitest/helper';
 import VnChangePassword from 'src/components/common/VnChangePassword.vue';
 import { vi, beforeEach, afterEach, beforeAll, describe, expect, it } from 'vitest';
 import { Notify } from 'quasar';
--- a/src/components/common/tests/VnDms.spec.js
+++ b/src/components/common/tests/VnDms.spec.js
@ -1,4 +1,5 @@
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { createWrapper } from 'app/test/vitest/helper';
+import { default as axios } from 'axios';
 import { vi, afterEach, beforeEach, beforeAll, describe, expect, it } from 'vitest';
 import VnDms from 'src/components/common/VnDms.vue';

@ -40,7 +41,10 @@ describe('VnDms', () => {
        companyFk: 2,
        dmsTypeFk: 3,
        description: 'This is a test description',
-        files: { name: 'example.txt', content: new Blob(['file content'], { type: 'text/plain' })},
+        files: {
+            name: 'example.txt',
+            content: new Blob(['file content'], { type: 'text/plain' }),
+        },
    };

    const expectedBody = {
@ -59,7 +63,7 @@ describe('VnDms', () => {
                url: '/test',
                formInitialData: { id: 1, reference: 'test' },
                model: 'Worker',
-            }
+            },
        });
        wrapper = wrapper.wrapper;
        vm = wrapper.vm;
@ -98,7 +102,7 @@ describe('VnDms', () => {
            expect(vm.getUrl()).toBe('/test');
        });

-        it('should returns url dms/"props.formInitialData.id"/updateFile when prop url is null', async () => {            
+        it('should returns url dms/"props.formInitialData.id"/updateFile when prop url is null', async () => {
            await wrapper.setProps({ url: null });
            expect(vm.getUrl()).toBe('dms/1/updateFile');
        });
@ -113,7 +117,9 @@ describe('VnDms', () => {
    describe('save', () => {
        it('should save data correctly', async () => {
            await vm.save();
-            expect(postMock).toHaveBeenCalledWith(vm.getUrl(), expect.any(FormData), { params: expectedBody });
+            expect(postMock).toHaveBeenCalledWith(vm.getUrl(), expect.any(FormData), {
+                params: expectedBody,
+            });
            expect(wrapper.emitted('onDataSaved')).toBeTruthy();
        });
    });
@ -127,8 +133,8 @@ describe('VnDms', () => {
                warehouseFk: 2,
                companyFk: 3,
                dmsTypeFk: 2,
-                description: 'This is a test description'
-            }
+                description: 'This is a test description',
+            };
            await wrapper.setProps({ formInitialData: testData });
            vm.defaultData();

@ -137,10 +143,10 @@ describe('VnDms', () => {

        it('should add reference with "route.params.id" to dms if formInitialData is null', async () => {
            await wrapper.setProps({ formInitialData: null });
-            vm.route.params.id= '111';
+            vm.route.params.id = '111';
            vm.defaultData();

            expect(vm.dms.reference).toBe('111');
        });
    });
-});
+});
--- a/src/components/common/tests/VnDmsList.spec.js
+++ b/src/components/common/tests/VnDmsList.spec.js
@ -1,15 +1,20 @@
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { createWrapper } from 'app/test/vitest/helper';
+import { default as axios } from 'axios';
+
 import VnDmsList from 'src/components/common/VnDmsList.vue';
 import { vi, afterEach, beforeAll, describe, expect, it } from 'vitest';

 describe('VnDmsList', () => {
    let vm;
-    const dms = { 
-        userFk: 1, 
-        name: 'DMS 1' 
+    const dms = {
+        userFk: 1,
+        name: 'DMS 1',
    };
-    
+
    beforeAll(() => {
+        vi.mock('src/composables/getUrl', () => ({
+            getUrl: vi.fn().mockResolvedValue(''),
+        }));
        vi.spyOn(axios, 'get').mockResolvedValue({ data: [] });
        vm = createWrapper(VnDmsList, {
            props: {
@ -18,8 +23,8 @@ describe('VnDmsList', () => {
                filter: 'wd.workerFk',
                updateModel: 'Workers',
                deleteModel: 'WorkerDms',
-                downloadModel: 'WorkerDms' 
-            }
+                downloadModel: 'WorkerDms',
+            },
        }).vm;
    });

@ -29,46 +34,45 @@ describe('VnDmsList', () => {

    describe('setData()', () => {
        const data = [
-            { 
-                userFk: 1, 
+            {
+                userFk: 1,
                name: 'Jessica',
                lastName: 'Jones',
                file: '4.jpg',
-                created: '2021-07-28 21:00:00'
+                created: '2021-07-28 21:00:00',
            },
-            { 
-                userFk: 2, 
+            {
+                userFk: 2,
                name: 'Bruce',
                lastName: 'Banner',
                created: '2022-07-28 21:00:00',
                dms: {
-                    userFk: 2, 
+                    userFk: 2,
                    name: 'Bruce',
                    lastName: 'BannerDMS',
                    created: '2022-07-28 21:00:00',
                    file: '4.jpg',
-                } 
+                },
            },
            {
                userFk: 3,
                name: 'Natasha',
                lastName: 'Romanoff',
                file: '4.jpg',
-                created: '2021-10-28 21:00:00'
-            }  
-        ]
+                created: '2021-10-28 21:00:00',
+            },
+        ];

        it('Should replace objects that contain the "dms" property with the value of the same and sort by creation date', () => {
            vm.setData(data);
            expect([vm.rows][0][0].lastName).toEqual('BannerDMS');
            expect([vm.rows][0][1].lastName).toEqual('Romanoff');
-
        });
    });

    describe('parseDms()', () => {
-        const resultDms = { ...dms, userId:1};
-        
+        const resultDms = { ...dms, userId: 1 };
+
        it('Should add properties that end with "Fk" by changing the suffix to "Id"', () => {
            const parsedDms = vm.parseDms(dms);
            expect(parsedDms).toEqual(resultDms);
@ -76,12 +80,12 @@ describe('VnDmsList', () => {
    });

    describe('showFormDialog()', () => {
-        const resultDms = { ...dms, userId:1};
-        
+        const resultDms = { ...dms, userId: 1 };
+
        it('should call fn parseDms() and set show true if dms is defined', () => {
            vm.showFormDialog(dms);
            expect(vm.formDialog.show).toEqual(true);
            expect(vm.formDialog.dms).toEqual(resultDms);
        });
    });
-});	
+});
--- a/src/components/common/tests/VnLog.spec.js
+++ b/src/components/common/tests/VnLog.spec.js
@ -1,5 +1,6 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import axios from 'axios';
+import { createWrapper } from 'app/test/vitest/helper';
 import VnLog from 'src/components/common/VnLog.vue';

 describe('VnLog', () => {
@ -108,27 +109,4 @@ describe('VnLog', () => {
        expect(vm.logTree[0].originFk).toEqual(1);
        expect(vm.logTree[0].logs[0].user.name).toEqual('salesPerson');
    });
-
-    it('should correctly set the selectedFilters when filtering', () => {
-        vm.searchInput = '1';
-        vm.userSelect = '21';
-        vm.checkboxOptions.insert.selected = true;
-        vm.checkboxOptions.update.selected = true;
-
-        vm.selectFilter('search');
-        vm.selectFilter('userSelect');
-
-        expect(vm.selectedFilters.changedModelId).toEqual('1');
-        expect(vm.selectedFilters.userFk).toEqual('21');
-        expect(vm.selectedFilters.action).toEqual({ inq: ['insert', 'update'] });
-    });
-
-    it('should correctly set the date from', () => {
-        vm.dateFrom = '18-09-2023';
-        vm.selectFilter('date', 'from');
-        expect(vm.selectedFilters.creationDate.between).toEqual([
-            new Date('2023-09-18T00:00:00.000Z'),
-            new Date('2023-09-18T21:59:59.999Z'),
-        ]);
-    });
 });
--- a/src/components/common/tests/VnLogFilter.spec.js
+++ b/src/components/common/tests/VnLogFilter.spec.js
@ -0,0 +1,28 @@
+import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
+import { createWrapper } from 'app/test/vitest/helper';
+import VnLogFilter from 'src/components/common/VnLogFilter.vue';
+
+describe('VnLogFilter', () => {
+    let vm;
+    beforeAll(async () => {
+        vm = createWrapper(VnLogFilter, {
+            props: {
+                dataKey: 'ClaimLog',
+            },
+        }).vm;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should getActions selected', async () => {
+        vm.checkboxOptions.find((o) => o.name == 'insert').selected = true;
+        vm.checkboxOptions.find((o) => o.name == 'update').selected = true;
+
+        const actions = vm.getActions();
+
+        expect(actions.length).toEqual(2);
+        expect(actions).toEqual(['insert', 'update']);
+    });
+});
--- a/src/components/common/tests/VnLogValue.spec.js
+++ b/src/components/common/tests/VnLogValue.spec.js
@ -0,0 +1,26 @@
+import { describe, it, expect } from 'vitest';
+import VnLogValue from 'src/components/common/VnLogValue.vue';
+import { createWrapper } from 'app/test/vitest/helper';
+
+const buildComponent = (props) => {
+    return createWrapper(VnLogValue, {
+        props,
+        global: {},
+    }).wrapper;
+};
+
+describe('VnLogValue', () => {
+    const id = 1;
+    it('renders without descriptor', async () => {
+        expect(getIcon('inventFk').exists()).toBe(false);
+    });
+
+    it('renders with descriptor', async () => {
+        expect(getIcon('claimFk').text()).toBe('launch');
+    });
+
+    function getIcon(name) {
+        const wrapper = buildComponent({ value: { val: id }, name });
+        return wrapper.find('.q-icon');
+    }
+});
--- a/src/components/common/tests/VnNotes.spec.js
+++ b/src/components/common/tests/VnNotes.spec.js
@ -1,16 +1,7 @@
-import {
-    describe,
-    it,
-    expect,
-    vi,
-    beforeAll,
-    afterEach,
-    beforeEach,
-    afterAll,
-} from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { describe, it, expect, vi, afterEach, beforeEach, afterAll } from 'vitest';
+import { createWrapper } from 'app/test/vitest/helper';
+import { default as axios } from 'axios';
 import VnNotes from 'src/components/ui/VnNotes.vue';
-import vnDate from 'src/boot/vnDate';

 describe('VnNotes', () => {
    let vm;
@ -18,6 +9,7 @@ describe('VnNotes', () => {
    let spyFetch;
    let postMock;
    let patchMock;
+    let deleteMock;
    let expectedInsertBody;
    let expectedUpdateBody;
    const defaultOptions = {
@ -57,6 +49,7 @@ describe('VnNotes', () => {
    beforeEach(() => {
        postMock = vi.spyOn(axios, 'post');
        patchMock = vi.spyOn(axios, 'patch');
+        deleteMock = vi.spyOn(axios, 'delete');
    });

    afterEach(() => {
@ -153,4 +146,16 @@ describe('VnNotes', () => {
            );
        });
    });
+
+    describe('delete', () => {
+        it('Should call axios.delete with url and vnPaginateRef.fetch', async () => {
+            generateWrapper();
+            createSpyFetch();
+
+            await vm.deleteNote({ id: 1 });
+
+            expect(deleteMock).toHaveBeenCalledWith(`${vm.$props.url}/1`);
+            expect(spyFetch).toHaveBeenCalled();
+        });
+    });
 });
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@ -1,363 +1,38 @@
 <script setup>
-import { onBeforeMount, watch, computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
-import { useArrayData } from 'composables/useArrayData';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useState } from 'src/composables/useState';
-import { useRoute, useRouter } from 'vue-router';
-import { useClipboard } from 'src/composables/useClipboard';
-import VnMoreOptions from './VnMoreOptions.vue';
+import { ref } from 'vue';
+import VnDescriptor from './VnDescriptor.vue';

 const $props = defineProps({
-    url: {
-        type: String,
-        default: '',
-    },
-    filter: {
-        type: Object,
-        default: null,
-    },
-    title: {
-        type: String,
-        default: '',
-    },
-    subtitle: {
+    id: {
        type: Number,
-        default: null,
+        default: false,
    },
-    dataKey: {
-        type: String,
-        default: null,
-    },
-    summary: {
+    card: {
        type: Object,
        default: null,
    },
-    width: {
-        type: String,
-        default: 'md-width',
-    },
-    toModule: {
-        type: String,
-        default: null,
-    },
 });

-const state = useState();
-const route = useRoute();
-const router = useRouter();
-const { t } = useI18n();
-const { copyText } = useClipboard();
-const { viewSummary } = useSummaryDialog();
-let arrayData;
-let store;
-let entity;
-const isLoading = ref(false);
-const isSameDataKey = computed(() => $props.dataKey === route.meta.moduleName);
-const DESCRIPTOR_PROXY = 'DescriptorProxy';
-const moduleName = ref();
-const isSameModuleName = route.matched[1].meta.moduleName !== moduleName.value;
-defineExpose({ getData });
-
-onBeforeMount(async () => {
-    arrayData = useArrayData($props.dataKey, {
-        url: $props.url,
-        userFilter: $props.filter,
-        skip: 0,
-        oneRecord: true,
-    });
-    store = arrayData.store;
-    entity = computed(() => {
-        const data = store.data ?? {};
-        if (data) emit('onFetch', data);
-        return data;
-    });
-
-    // It enables to load data only once if the module is the same as the dataKey
-    if (!isSameDataKey.value || !route.params.id) await getData();
-    watch(
-        () => [$props.url, $props.filter],
-        async () => {
-            if (!isSameDataKey.value) await getData();
-        },
-    );
-});
-
-function getName() {
-    let name = $props.dataKey;
-    if ($props.dataKey.includes(DESCRIPTOR_PROXY)) {
-        name = name.split(DESCRIPTOR_PROXY)[0];
-    }
-    return name;
-}
-const routeName = computed(() => {
-    let routeName = getName();
-    return `${routeName}Summary`;
-});
-
-async function getData() {
-    store.url = $props.url;
-    store.filter = $props.filter ?? {};
-    isLoading.value = true;
-    try {
-        const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-        state.set($props.dataKey, data);
-        emit('onFetch', data);
-    } finally {
-        isLoading.value = false;
-    }
-}
-
-function getValueFromPath(path) {
-    if (!path) return;
-    const keys = path.toString().split('.');
-    let current = entity.value;
-
-    for (const key of keys) {
-        if (current[key] === undefined) return undefined;
-        else current = current[key];
-    }
-    return current;
-}
-
-function copyIdText(id) {
-    copyText(id, {
-        component: {
-            copyValue: id,
-        },
-    });
-}
-
 const emit = defineEmits(['onFetch']);
-
-const iconModule = computed(() => {
-    moduleName.value = getName();
-    if ($props.toModule) {
-        return router.getRoutes().find((r) => r.name === $props.toModule.name).meta.icon;
-    }
-    if (isSameModuleName) {
-        return router.options.routes[1].children.find((r) => r.name === moduleName.value)
-            ?.meta?.icon;
-    } else {
-        return route.matched[1].meta.icon;
-    }
-});
-
-const toModule = computed(() => {
-    moduleName.value = getName();
-    if ($props.toModule) return $props.toModule;
-    if (isSameModuleName) {
-        return router.options.routes[1].children.find((r) => r.name === moduleName.value)
-            ?.redirect;
-    } else {
-        return route.matched[1].path.split('/').length > 2
-            ? route.matched[1].redirect
-            : route.matched[1].children[0].redirect;
-    }
-});
+const entity = ref();
 </script>

 <template>
-    <div class="descriptor">
-        <template v-if="entity && !isLoading">
-            <div class="header bg-primary q-pa-sm justify-between">
-                <slot name="header-extra-action">
-                    <QBtn
-                        round
-                        flat
-                        dense
-                        size="md"
-                        :icon="iconModule"
-                        color="white"
-                        class="link"
-                        :to="toModule"
-                    >
-                        <QTooltip>
-                            {{ t('globals.goToModuleIndex') }}
-                        </QTooltip>
-                    </QBtn>
-                </slot>
-                <QBtn
-                    @click.stop="viewSummary(entity.id, $props.summary, $props.width)"
-                    round
-                    flat
-                    dense
-                    size="md"
-                    icon="preview"
-                    color="white"
-                    class="link"
-                    v-if="summary"
-                    data-cy="openSummaryBtn"
-                >
-                    <QTooltip>
-                        {{ t('components.smartCard.openSummary') }}
-                    </QTooltip>
-                </QBtn>
-                <RouterLink :to="{ name: routeName, params: { id: entity.id } }">
-                    <QBtn
-                        class="link"
-                        color="white"
-                        dense
-                        flat
-                        icon="launch"
-                        round
-                        size="md"
-                        data-cy="goToSummaryBtn"
-                    >
-                        <QTooltip>
-                            {{ t('components.cardDescriptor.summary') }}
-                        </QTooltip>
-                    </QBtn>
-                </RouterLink>
-                <VnMoreOptions v-if="$slots.menu">
-                    <template #menu="{ menuRef }">
-                        <slot name="menu" :entity="entity" :menu-ref="menuRef" />
-                    </template>
-                </VnMoreOptions>
-            </div>
-            <slot name="before" />
-            <div class="body q-py-sm">
-                <QList dense>
-                    <QItemLabel header class="ellipsis text-h5" :lines="1">
-                        <div class="title">
-                            <span v-if="$props.title" :title="getValueFromPath(title)">
-                                {{ getValueFromPath(title) ?? $props.title }}
-                            </span>
-                            <slot v-else name="description" :entity="entity">
-                                <span :title="entity.name">
-                                    {{ entity.name }}
-                                </span>
-                            </slot>
-                        </div>
-                    </QItemLabel>
-                    <QItem>
-                        <QItemLabel class="subtitle">
-                            #{{ getValueFromPath(subtitle) ?? entity.id }}
-                        </QItemLabel>
-                        <QBtn
-                            round
-                            flat
-                            dense
-                            size="sm"
-                            icon="content_copy"
-                            color="primary"
-                            @click.stop="copyIdText(entity.id)"
-                        >
-                            <QTooltip>
-                                {{ t('globals.copyId') }}
-                            </QTooltip>
-                        </QBtn>
-                    </QItem>
-                </QList>
-                <div class="list-box q-mt-xs">
-                    <slot name="body" :entity="entity" />
-                </div>
-            </div>
-            <div class="icons">
-                <slot name="icons" :entity="entity" />
-            </div>
-            <div class="actions justify-center" data-cy="descriptor_actions">
-                <slot name="actions" :entity="entity" />
-            </div>
-            <slot name="after" />
-        </template>
-        <SkeletonDescriptor v-if="!entity || isLoading" />
-    </div>
-    <QInnerLoading
-        :label="t('globals.pleaseWait')"
-        :showing="isLoading"
-        color="primary"
-    />
-</template>
-
-<style lang="scss">
-.body {
-    background-color: var(--vn-section-color);
-    .text-h5 {
-        font-size: 20px;
-        padding-top: 5px;
-        padding-bottom: 0px;
-    }
-    .q-item {
-        min-height: 20px;
-
-        .link {
-            margin-left: 10px;
-        }
-    }
-    .vn-label-value {
-        display: flex;
-        padding: 0px 16px;
-        .label {
-            color: var(--vn-label-color);
-            font-size: 14px;
-
-            &:not(:has(a))::after {
-                content: ':';
+    <component
+        :is="card"
+        :id
+        :visual="false"
+        v-bind="$attrs"
+        @on-fetch="
+            (data) => {
+                entity = data;
+                emit('onFetch', data);
            }
-        }
-        .value {
-            color: var(--vn-text-color);
-            font-size: 14px;
-            margin-left: 4px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            text-align: left;
-        }
-        .info {
-            margin-left: 5px;
-        }
-    }
-}
-</style>
-
-<style lang="scss" scoped>
-.title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    span {
-        color: var(--vn-text-color);
-        font-weight: bold;
-    }
-}
-.subtitle {
-    color: var(--vn-text-color);
-    font-size: 16px;
-    margin-bottom: 2px;
-}
-.list-box {
-    .q-item__label {
-        color: var(--vn-label-color);
-        padding-bottom: 0%;
-    }
-}
-.descriptor {
-    width: 256px;
-    .header {
-        display: flex;
-        align-items: center;
-    }
-    .icons {
-        margin: 0 10px;
-        display: flex;
-        justify-content: center;
-        .q-icon {
-            margin-right: 5px;
-        }
-    }
-    .actions {
-        margin: 0 5px;
-        justify-content: center !important;
-    }
-}
-</style>
-<i18n>
-    en:
-        globals:
-            copyId: Copy ID
-    es:
-        globals:
-            copyId: Copiar ID
-</i18n>
+        "
+    />
+    <VnDescriptor v-model="entity" v-bind="$attrs">
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+        </template>
+    </VnDescriptor>
+</template>
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@ -159,6 +159,7 @@ async function fetch() {
                display: flex;
                flex-direction: row;
                margin-top: 2px;
+                align-items: start;
                .label {
                    color: var(--vn-label-color);
                    width: 9em;
@ -169,9 +170,15 @@ async function fetch() {
                    flex-grow: 0;
                    flex-shrink: 0;
                }
+                &.ellipsis > .value {
+                    text-overflow: ellipsis;
+                    white-space: pre;
+                }
                .value {
                    color: var(--vn-text-color);
                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
                }
            }
            .header {
@ -201,6 +208,23 @@ async function fetch() {
        }
    }
 }
+
+.vn-card-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
+}
+
+.vn-card-content {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    > div {
+        max-height: 70px;
+    }
+}
 </style>
 <style lang="scss" scoped>
 .summaryHeader .vn-label-value {
--- a/src/components/ui/EntityDescriptor.vue
+++ b/src/components/ui/EntityDescriptor.vue
@ -0,0 +1,78 @@
+<script setup>
+import { onBeforeMount, watch, computed, ref } from 'vue';
+import { useArrayData } from 'composables/useArrayData';
+import { useState } from 'src/composables/useState';
+import { useRoute } from 'vue-router';
+import VnDescriptor from './VnDescriptor.vue';
+
+const $props = defineProps({
+    url: {
+        type: String,
+        default: '',
+    },
+    filter: {
+        type: Object,
+        default: null,
+    },
+    dataKey: {
+        type: String,
+        default: null,
+    },
+});
+
+const state = useState();
+const route = useRoute();
+let arrayData;
+let store;
+let entity;
+const isLoading = ref(false);
+const isSameDataKey = computed(() => $props.dataKey === route.meta.moduleName);
+defineExpose({ getData });
+
+onBeforeMount(async () => {
+    arrayData = useArrayData($props.dataKey, {
+        url: $props.url,
+        userFilter: $props.filter,
+        skip: 0,
+        oneRecord: true,
+    });
+    store = arrayData.store;
+    entity = computed(() => {
+        const data = store.data ?? {};
+        if (data) emit('onFetch', data);
+        return data;
+    });
+
+    // It enables to load data only once if the module is the same as the dataKey
+    if (!isSameDataKey.value || !route.params.id) await getData();
+    watch(
+        () => [$props.url, $props.filter],
+        async () => {
+            if (!isSameDataKey.value) await getData();
+        },
+    );
+});
+
+async function getData() {
+    store.url = $props.url;
+    store.filter = $props.filter ?? {};
+    isLoading.value = true;
+    try {
+        const { data } = await arrayData.fetch({ append: false, updateRouter: false });
+        state.set($props.dataKey, data);
+        emit('onFetch', data);
+    } finally {
+        isLoading.value = false;
+    }
+}
+
+const emit = defineEmits(['onFetch']);
+</script>
+
+<template>
+    <VnDescriptor v-model="entity" v-bind="$attrs" :module="dataKey">
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+        </template>
+    </VnDescriptor>
+</template>
--- a/src/components/ui/VnDescriptor.vue
+++ b/src/components/ui/VnDescriptor.vue
@ -0,0 +1,322 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useRoute, useRouter } from 'vue-router';
+import { useClipboard } from 'src/composables/useClipboard';
+import VnMoreOptions from './VnMoreOptions.vue';
+
+const entity = defineModel({ type: Object, default: null });
+const $props = defineProps({
+    title: {
+        type: String,
+        default: '',
+    },
+    subtitle: {
+        type: Number,
+        default: null,
+    },
+    summary: {
+        type: Object,
+        default: null,
+    },
+    width: {
+        type: String,
+        default: 'md-width',
+    },
+    module: {
+        type: String,
+        default: null,
+    },
+    toModule: {
+        type: Object,
+        default: null,
+    },
+});
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { copyText } = useClipboard();
+const { viewSummary } = useSummaryDialog();
+const DESCRIPTOR_PROXY = 'DescriptorProxy';
+const moduleName = ref();
+const isSameModuleName = route.matched[1].meta.moduleName !== moduleName.value;
+
+function getName() {
+    let name = $props.module;
+    if ($props.module.includes(DESCRIPTOR_PROXY)) {
+        name = name.split(DESCRIPTOR_PROXY)[0];
+    }
+    return name;
+}
+const routeName = computed(() => {
+    let routeName = getName();
+    return `${routeName}Summary`;
+});
+
+function getValueFromPath(path) {
+    if (!path) return;
+    const keys = path.toString().split('.');
+    let current = entity.value;
+
+    for (const key of keys) {
+        if (current[key] === undefined) return undefined;
+        else current = current[key];
+    }
+    return current;
+}
+
+function copyIdText(id) {
+    copyText(id, {
+        component: {
+            copyValue: id,
+        },
+    });
+}
+
+const emit = defineEmits(['onFetch']);
+
+const iconModule = computed(() => {
+    moduleName.value = getName();
+    if ($props.toModule) {
+        return router.getRoutes().find((r) => r.name === $props.toModule.name).meta.icon;
+    }
+    if (isSameModuleName) {
+        return router.options.routes[1].children.find((r) => r.name === moduleName.value)
+            ?.meta?.icon;
+    } else {
+        return route.matched[1].meta.icon;
+    }
+});
+
+const toModule = computed(() => {
+    moduleName.value = getName();
+    if ($props.toModule) return $props.toModule;
+    if (isSameModuleName) {
+        return router.options.routes[1].children.find((r) => r.name === moduleName.value)
+            ?.redirect;
+    } else {
+        return route.matched[1].path.split('/').length > 2
+            ? route.matched[1].redirect
+            : route.matched[1].children[0].redirect;
+    }
+});
+</script>
+
+<template>
+    <div class="descriptor" data-cy="vnDescriptor">
+        <template v-if="entity && entity?.id">
+            <div class="header bg-primary q-pa-sm justify-between">
+                <slot name="header-extra-action">
+                    <QBtn
+                        round
+                        flat
+                        dense
+                        size="md"
+                        :icon="iconModule"
+                        color="white"
+                        class="link"
+                        :to="toModule"
+                    >
+                        <QTooltip>
+                            {{ t('globals.goToModuleIndex') }}
+                        </QTooltip>
+                    </QBtn>
+                </slot>
+                <QBtn
+                    @click.stop="viewSummary(entity.id, summary, width)"
+                    round
+                    flat
+                    dense
+                    size="md"
+                    icon="preview"
+                    color="white"
+                    class="link"
+                    v-if="summary"
+                    data-cy="openSummaryBtn"
+                >
+                    <QTooltip>
+                        {{ t('components.smartCard.openSummary') }}
+                    </QTooltip>
+                </QBtn>
+                <RouterLink :to="{ name: routeName, params: { id: entity.id } }">
+                    <QBtn
+                        class="link"
+                        color="white"
+                        dense
+                        flat
+                        icon="launch"
+                        round
+                        size="md"
+                        data-cy="goToSummaryBtn"
+                    >
+                        <QTooltip>
+                            {{ t('components.vnDescriptor.summary') }}
+                        </QTooltip>
+                    </QBtn>
+                </RouterLink>
+                <VnMoreOptions v-if="$slots.menu">
+                    <template #menu="{ menuRef }">
+                        <slot name="menu" :entity="entity" :menu-ref="menuRef" />
+                    </template>
+                </VnMoreOptions>
+            </div>
+            <slot name="before" />
+            <div class="body q-py-sm">
+                <QList dense>
+                    <QItemLabel header class="ellipsis text-h5" :lines="1">
+                        <div class="title">
+                            <span
+                                v-if="title"
+                                :title="getValueFromPath(title)"
+                                :data-cy="`${$attrs['data-cy'] ?? 'vnDescriptor'}_title`"
+                            >
+                                {{ getValueFromPath(title) ?? title }}
+                            </span>
+                            <slot v-else name="description" :entity="entity">
+                                <span
+                                    :title="entity.name"
+                                    :data-cy="`${$attrs['data-cy'] ?? 'vnDescriptor'}_description`"
+                                    v-text="entity.name"
+                                />
+                            </slot>
+                        </div>
+                    </QItemLabel>
+                    <QItem>
+                        <QItemLabel
+                            class="subtitle"
+                            :data-cy="`${$attrs['data-cy'] ?? 'vnDescriptor'}_subtitle`"
+                        >
+                            #{{ getValueFromPath(subtitle) ?? entity.id }}
+                        </QItemLabel>
+                        <QBtn
+                            round
+                            flat
+                            dense
+                            size="sm"
+                            icon="content_copy"
+                            color="primary"
+                            @click.stop="copyIdText(entity.id)"
+                        >
+                            <QTooltip>
+                                {{ t('globals.copyId') }}
+                            </QTooltip>
+                        </QBtn>
+                    </QItem>
+                </QList>
+                <div
+                    class="list-box q-mt-xs"
+                    :data-cy="`${$attrs['data-cy'] ?? 'vnDescriptor'}_listbox`"
+                >
+                    <slot name="body" :entity="entity" />
+                </div>
+            </div>
+            <div class="icons">
+                <slot name="icons" :entity="entity" />
+            </div>
+            <div class="actions justify-center" data-cy="descriptor_actions">
+                <slot name="actions" :entity="entity" />
+            </div>
+            <slot name="after" />
+        </template>
+        <SkeletonDescriptor v-if="!entity" />
+    </div>
+    <QInnerLoading :label="t('globals.pleaseWait')" :showing="!entity" color="primary" />
+</template>
+
+<style lang="scss">
+.body {
+    background-color: var(--vn-section-color);
+    .text-h5 {
+        font-size: 20px;
+        padding-top: 5px;
+        padding-bottom: 0px;
+    }
+    .q-item {
+        min-height: 20px;
+
+        .link {
+            margin-left: 10px;
+        }
+    }
+    .vn-label-value {
+        display: flex;
+        padding: 0px 16px;
+        .label {
+            color: var(--vn-label-color);
+            font-size: 14px;
+
+            &:not(:has(a))::after {
+                content: ':';
+            }
+        }
+        &.ellipsis > .value {
+            text-overflow: ellipsis;
+            white-space: pre;
+        }
+        .value {
+            color: var(--vn-text-color);
+            font-size: 14px;
+            margin-left: 4px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            text-align: left;
+        }
+        .info {
+            margin-left: 5px;
+        }
+    }
+}
+</style>
+
+<style lang="scss" scoped>
+.title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    span {
+        color: var(--vn-text-color);
+        font-weight: bold;
+    }
+}
+.subtitle {
+    color: var(--vn-text-color);
+    font-size: 16px;
+    margin-bottom: 2px;
+}
+.list-box {
+    .q-item__label {
+        color: var(--vn-label-color);
+        padding-bottom: 0%;
+    }
+}
+.descriptor {
+    width: 256px;
+    .header {
+        display: flex;
+        align-items: center;
+    }
+    .icons {
+        margin: 0 10px;
+        display: flex;
+        justify-content: center;
+        .q-icon {
+            margin-right: 5px;
+        }
+    }
+    .actions {
+        margin: 0 5px;
+        justify-content: center !important;
+    }
+}
+</style>
+<i18n>
+    en:
+        globals:
+            copyId: Copy ID
+    es:
+        globals:
+            copyId: Copiar ID
+</i18n>
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@ -61,6 +61,10 @@ const $props = defineProps({
        type: Object,
        default: null,
    },
+    showTagChips: {
+        type: Boolean,
+        default: true,
+    },
 });

 const emit = defineEmits([
@ -88,13 +92,14 @@ const userOrders = ref(useFilterParams($props.dataKey).orders);
 defineExpose({ search, params: userParams, remove });

 const isLoading = ref(false);
-async function search(evt) {
+async function search(evt, name, value) {
    try {
        if (evt && $props.disableSubmitEvent) return;

        store.filter.where = {};
        isLoading.value = true;
        const filter = { ...userParams.value, ...$props.modelValue };
+        if (name) filter[name] = value;
        store.userParamsChanged = true;
        await arrayData.addFilter({
            params: filter,
@ -214,7 +219,7 @@ const getLocale = (label) => {
        </QTooltip>
    </QBtn>
    <QForm @submit="search" id="filterPanelForm" @keyup.enter="search()">
-        <QList dense>
+        <QList dense v-if="showTagChips">
            <QItem class="q-mt-xs">
                <QItemSection top>
                    <QItemLabel header lines="1" class="text-uppercase q-py-xs q-px-none">
@ -249,7 +254,7 @@ const getLocale = (label) => {
                        :key="chip.label"
                        :removable="!unremovableParams?.includes(chip.label)"
                        @remove="remove(chip.label)"
-                        data-cy="vnFilterPanelChip"
+                        :data-cy="`vnFilterPanelChip_${chip.label}`"
                    >
                        <slot
                            name="tags"
--- a/src/components/ui/VnLinkMail.vue
+++ b/src/components/ui/VnLinkMail.vue
@ -1,8 +1,11 @@
 <script setup>
+import { dashIfEmpty } from 'src/filters';
+
 defineProps({ email: { type: [String], default: null } });
 </script>
 <template>
    <QBtn
+        class="q-pr-xs"
        v-if="email"
        flat
        round
@ -13,4 +16,5 @@ defineProps({ email: { type: [String], default: null } });
        :href="`mailto:${email}`"
        @click.stop
    />
+    <span>{{ dashIfEmpty(email) }}</span>
 </template>
--- a/src/components/ui/VnLinkPhone.vue
+++ b/src/components/ui/VnLinkPhone.vue
@ -1,7 +1,7 @@
 <script setup>
 import { ref, reactive, useAttrs, onBeforeMount, capitalize } from 'vue';
 import axios from 'axios';
-import { parsePhone } from 'src/filters';
+import { dashIfEmpty, parsePhone } from 'src/filters';
 import useOpenURL from 'src/composables/useOpenURL';

 const props = defineProps({
@ -12,49 +12,65 @@ const props = defineProps({

 const phone = ref(props.phoneNumber);
 const config = reactive({
-    sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
    'say-simple': {
        icon: 'vn:saysimple',
        url: null,
        channel: props.channel,
    },
+    sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
 });
-const type = Object.keys(config).find((key) => key in useAttrs()) || 'sip';
+
+const attrs = useAttrs();
+const types = Object.keys(config)
+    .filter((key) => key in attrs)
+    .sort();
+const activeTypes = types.length ? types : ['sip'];

 onBeforeMount(async () => {
    if (!phone.value) return;
-    let { channel } = config[type];

-    if (type === 'say-simple') {
-        const { url, defaultChannel } = (await axios.get('SaySimpleConfigs/findOne'))
-            .data;
-        if (!channel) channel = defaultChannel;
+    for (const type of activeTypes) {
+        if (type === 'say-simple') {
+            let { channel } = config[type];
+            const { url, defaultChannel } = (await axios.get('SaySimpleConfigs/findOne'))
+                .data;
+            if (!channel) channel = defaultChannel;

-        phone.value = await parsePhone(props.phoneNumber, props.country?.toLowerCase());
-        config[
-            type
-        ].url = `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
+            phone.value = await parsePhone(
+                props.phoneNumber,
+                props.country?.toLowerCase(),
+            );
+            config[type].url =
+                `${url}?customerIdentity=%2B${phone.value}&channelId=${channel}`;
+        }
    }
 });

-function handleClick() {
+function handleClick(type) {
    if (config[type].url) useOpenURL(config[type].url);
    else if (config[type].href) window.location.href = config[type].href;
 }
 </script>
+
 <template>
-    <QBtn
-        v-if="phone"
-        flat
-        round
-        :icon="config[type].icon"
-        size="sm"
-        color="primary"
-        padding="none"
-        @click.stop="handleClick"
-    >
-        <QTooltip>
-            {{ capitalize(type).replace('-', '') }}
-        </QTooltip>
-    </QBtn>
+    <div class="flex items-center gap-2">
+        <template v-for="type in activeTypes">
+            <QBtn
+                :key="type"
+                v-if="phone"
+                flat
+                round
+                :icon="config[type].icon"
+                size="sm"
+                color="primary"
+                padding="none"
+                @click.stop="() => handleClick(type)"
+            >
+                <QTooltip>
+                    {{ capitalize(type).replace('-', '') }}
+                </QTooltip>
+            </QBtn></template
+        >
+        <span>{{ dashIfEmpty(phone) }}</span>
+    </div>
 </template>
--- a/src/components/ui/VnLv.vue
+++ b/src/components/ui/VnLv.vue
@ -28,13 +28,14 @@ function copyValueText() {
 const val = computed(() => $props.value);
 </script>
 <template>
-    <div class="vn-label-value">
+    <div class="vn-label-value" :data-cy="`${$attrs['data-cy'] ?? 'vnLv'}${label ?? ''}`">
        <QCheckbox
            v-if="typeof value === 'boolean'"
            v-model="val"
            :label="label"
            disable
            dense
+            size="sm"
        />
        <template v-else>
            <div v-if="label || $slots.label" class="label">
@ -42,9 +43,9 @@ const val = computed(() => $props.value);
                    <span style="color: var(--vn-label-color)">{{ label }}</span>
                </slot>
            </div>
-            <div class="value">
+            <div class="value" v-if="value || $slots.value">
                <slot name="value">
-                    <span :title="value">
+                    <span :title="value" style="text-overflow: ellipsis">
                        {{ dash ? dashIfEmpty(value) : value }}
                    </span>
                </slot>
--- a/src/components/ui/VnMoreOptions.vue
+++ b/src/components/ui/VnMoreOptions.vue
@ -9,10 +9,10 @@
        data-cy="descriptor-more-opts"
    >
        <QTooltip>
-            {{ $t('components.cardDescriptor.moreOptions') }}
+            {{ $t('components.vnDescriptor.moreOptions') }}
        </QTooltip>
        <QMenu ref="menuRef" data-cy="descriptor-more-opts-menu">
-            <QList>
+            <QList data-cy="descriptor-more-opts_list">
                <slot name="menu" :menu-ref="$refs.menuRef" />
            </QList>
        </QMenu>
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@ -18,10 +18,10 @@ import VnInput from 'components/common/VnInput.vue';

 const emit = defineEmits(['onFetch']);

-const $attrs = useAttrs();
-
-const isRequired = computed(() => {
-    return Object.keys($attrs).includes('required');
+const originalAttrs = useAttrs();
+const $attrs = computed(() => {
+    const { required, deletable, ...rest } = originalAttrs;
+    return rest;
 });

 const $props = defineProps({
@ -40,6 +40,11 @@ const quasar = useQuasar();
 const newNote = reactive({ text: null, observationTypeFk: null });
 const observationTypes = ref([]);
 const vnPaginateRef = ref();
+
+const defaultObservationType = computed(() => 
+    observationTypes.value.find(ot => ot.code === 'salesPerson')?.id
+);
+
 let originalText;

 function handleClick(e) {
@ -48,6 +53,11 @@ function handleClick(e) {
    else insert();
 }

+async function deleteNote(e) {
+    await axios.delete(`${$props.url}/${e.id}`);
+    await vnPaginateRef.value.fetch();
+}
+
 async function insert() {
    if (!newNote.text || ($props.selectType && !newNote.observationTypeFk)) return;

@ -111,14 +121,22 @@ function fetchData([data]) {
    originalText = data?.notes;
    emit('onFetch', data);
 }
+
+const handleObservationTypes = (data) => {
+    observationTypes.value = data;
+    if(defaultObservationType.value) {
+        newNote.observationTypeFk = defaultObservationType.value;
+    }
+};
+
 </script>
 <template>
    <FetchData
        v-if="selectType"
        url="ObservationTypes"
-        :filter="{ fields: ['id', 'description'] }"
+        :filter="{ fields: ['id', 'description', 'code'] }"
        auto-load
-        @on-fetch="(data) => (observationTypes = data)"
+        @on-fetch="handleObservationTypes"
    />
    <FetchData
        v-if="justInput"
@ -144,7 +162,7 @@ function fetchData([data]) {
                    v-model="newNote.observationTypeFk"
                    option-label="description"
                    style="flex: 0.15"
-                    :required="isRequired"
+                    :required="'required' in originalAttrs"
                    @keyup.enter.stop="insert"
                />
                <VnInput
@ -152,10 +170,10 @@ function fetchData([data]) {
                    type="textarea"
                    :label="$props.justInput && newNote.text ? '' : t('Add note here...')"
                    filled
-                    size="lg"
                    autogrow
+                    autofocus
                    @keyup.enter.stop="handleClick"
-                    :required="isRequired"
+                    :required="'required' in originalAttrs"
                    clearable
                >
                    <template #append>
@ -189,7 +207,6 @@ function fetchData([data]) {
        :search-url="false"
        @on-fetch="
            newNote.text = '';
-            newNote.observationTypeFk = null;
        "
    >
        <template #body="{ rows }">
@ -226,6 +243,21 @@ function fetchData([data]) {
                                </QBadge>
                            </div>
                            <span v-text="toDateHourMin(note.created)" />
+                            <div>
+                                <QIcon
+                                    v-if="'deletable' in originalAttrs"
+                                    name="delete"
+                                    size="sm"
+                                    class="cursor-pointer"
+                                    color="primary"
+                                    @click="deleteNote(note)"
+                                    data-cy="notesRemoveNoteBtn"
+                                >
+                                    <QTooltip>
+                                        {{ t('ticketNotes.removeNote') }}
+                                    </QTooltip>
+                                </QIcon>
+                            </div>
                        </div>
                    </QCardSection>
                    <QCardSection class="q-pa-xs q-my-none q-py-none">
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@ -115,7 +115,7 @@ onMounted(async () => {
 });

 onBeforeUnmount(() => {
-    if (!store.keepData) arrayData.reset(['data']);
+    arrayData.reset(['data']);
    arrayData.resetPagination();
 });

@ -215,6 +215,7 @@ defineExpose({
    paginate,
    userParams: arrayData.store.userParams,
    currentFilter: arrayData.store.currentFilter,
+    arrayData,
 });
 </script>

--- a/src/components/ui/VnToSummary.vue
+++ b/src/components/ui/VnToSummary.vue
@ -26,6 +26,7 @@ const id = props.entityId;
        :to="{ name: routeName, params: { id: id } }"
        class="header link"
        :href="url"
+        data-cy="goToSummaryBtn"
    >
        <QIcon name="open_in_new" color="white" size="sm" />
    </router-link>
--- a/src/components/ui/tests/CardSummary.spec.js
+++ b/src/components/ui/tests/CardSummary.spec.js
@ -1,5 +1,7 @@
 import { vi, describe, expect, it, beforeAll, afterEach, beforeEach } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import { createWrapper } from 'app/test/vitest/helper';
+import { default as axios } from 'axios';
+
 import CardSummary from 'src/components/ui/CardSummary.vue';
 import * as vueRouter from 'vue-router';

--- a/src/components/ui/tests/Paginate.spec.js
+++ b/src/components/ui/tests/Paginate.spec.js
@ -1,5 +1,6 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import axios from 'axios';
+import { createWrapper } from 'app/test/vitest/helper';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';

 describe('VnPaginate', () => {
--- a/src/components/ui/tests/VnLinkPhone.spec.js
+++ b/src/components/ui/tests/VnLinkPhone.spec.js
@ -1,5 +1,5 @@
 import { describe, it, expect, beforeAll, vi } from 'vitest';
-import { axios } from 'app/test/vitest/helper';
+import axios from 'axios';
 import parsePhone from 'src/filters/parsePhone';

 describe('parsePhone filter', () => {
--- a/src/components/ui/tests/VnSms.spec.js
+++ b/src/components/ui/tests/VnSms.spec.js
@ -1,5 +1,6 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import axios from 'axios';
+import { createWrapper } from 'app/test/vitest/helper';
 import VnSms from 'src/components/ui/VnSms.vue';

 describe('VnSms', () => {
--- a/src/composables/tests/downloadFile.spec.js
+++ b/src/composables/tests/downloadFile.spec.js
@ -1,15 +1,17 @@
 import { vi, describe, expect, it, beforeAll, afterAll } from 'vitest';
-import { axios } from 'app/test/vitest/helper';
+import axios from 'axios';
 import { downloadFile } from 'src/composables/downloadFile';
 import { useSession } from 'src/composables/useSession';
 const session = useSession();
 const token = session.getToken();

 describe('downloadFile', () => {
-    const baseUrl = 'http://localhost:9000';
    let defaulCreateObjectURL;

    beforeAll(() => {
+        vi.mock('src/composables/getUrl', () => ({
+            getUrl: vi.fn().mockResolvedValue(''),
+        }));
        defaulCreateObjectURL = window.URL.createObjectURL;
        window.URL.createObjectURL = vi.fn(() => 'blob:http://localhost:9000/blob-id');
    });
@ -22,15 +24,14 @@ describe('downloadFile', () => {
            headers: { 'content-disposition': 'attachment; filename="test-file.txt"' },
        };
        vi.spyOn(axios, 'get').mockImplementation((url) => {
-            if (url == 'Urls/getUrl') return Promise.resolve({ data: baseUrl });
-            else if (url.includes('downloadFile')) return Promise.resolve(res);
+            if (url.includes('downloadFile')) return Promise.resolve(res);
        });

        await downloadFile(1);

        expect(axios.get).toHaveBeenCalledWith(
-            `${baseUrl}/api/dms/1/downloadFile?access_token=${token}`,
-            { responseType: 'blob' }
+            `/api/dms/1/downloadFile?access_token=${token}`,
+            { responseType: 'blob' },
        );
    });
 });
--- a/src/composables/tests/useAcl.spec.js
+++ b/src/composables/tests/useAcl.spec.js
@ -1,5 +1,7 @@
 import { vi, describe, expect, it, beforeAll, afterAll } from 'vitest';
-import { axios, flushPromises } from 'app/test/vitest/helper';
+import axios from 'axios';
+
+import { flushPromises } from '@vue/test-utils';
 import { useAcl } from 'src/composables/useAcl';

 describe('useAcl', () => {
--- a/src/composables/tests/useArrayData.spec.js
+++ b/src/composables/tests/useArrayData.spec.js
@ -1,15 +1,39 @@
 import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
-import { axios, flushPromises } from 'app/test/vitest/helper';
+import { default as axios } from 'axios';
 import { useArrayData } from 'composables/useArrayData';
 import { useRouter } from 'vue-router';
 import * as vueRouter from 'vue-router';
+import { setActivePinia, createPinia } from 'pinia';

 describe('useArrayData', () => {
    const filter = '{"limit":20,"skip":0}';
    const params = { supplierFk: 2 };
+
    beforeEach(() => {
-        vi.spyOn(useRouter(), 'replace');
-        vi.spyOn(useRouter(), 'push');
+        setActivePinia(createPinia());
+
+        // Mock route
+        vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
+            path: 'mockSection/list',
+            matched: [],
+            query: {},
+            params: {},
+            meta: { moduleName: 'mockName' },
+        });
+
+        // Mock router
+        vi.spyOn(vueRouter, 'useRouter').mockReturnValue({
+            push: vi.fn(),
+            replace: vi.fn(),
+            currentRoute: {
+                value: {
+                    path: 'mockSection/list',
+                    params: { id: 1 },
+                    meta: { moduleName: 'mockName' },
+                    matched: [{ path: 'mockName/:id' }],
+                },
+            },
+        });
    });

    afterEach(() => {
@ -17,103 +41,69 @@ describe('useArrayData', () => {
    });

    it('should fetch and replace url with new params', async () => {
-        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [] });
+        vi.spyOn(axios, 'get').mockResolvedValueOnce({ data: [] });

-        const arrayData = useArrayData('ArrayData', { url: 'mockUrl' });
+        const arrayData = useArrayData('ArrayData', {
+            url: 'mockUrl',
+            searchUrl: 'params',
+        });

        arrayData.store.userParams = params;
-        arrayData.fetch({});
+        await arrayData.fetch({});

-        await flushPromises();
        const routerReplace = useRouter().replace.mock.calls[0][0];

-        expect(axios.get.mock.calls[0][1].params).toEqual({
-            filter,
-            supplierFk: 2,
+        expect(axios.get).toHaveBeenCalledWith('mockUrl', {
+            signal: expect.any(Object),
+            params: {
+                filter,
+                supplierFk: 2,
+            },
        });
-        expect(routerReplace.path).toEqual('mockSection/list');
+
+        expect(routerReplace.path).toBe('mockSection/list');
        expect(JSON.parse(routerReplace.query.params)).toEqual(
            expect.objectContaining(params),
        );
    });

-    it('should get data and send new URL without keeping parameters, if there is only one record', async () => {
-        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }] });
+    it('should redirect to detail when single record is returned with navigation', async () => {
+        vi.spyOn(axios, 'get').mockResolvedValueOnce({
+            data: [{ id: 1 }],
+        });

-        const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
+        const arrayData = useArrayData('ArrayData', {
+            url: 'mockUrl',
+            navigate: {},
+        });

        arrayData.store.userParams = params;
-        arrayData.fetch({});
+        await arrayData.fetch({});

-        await flushPromises();
        const routerPush = useRouter().push.mock.calls[0][0];

-        expect(axios.get.mock.calls[0][1].params).toEqual({
-            filter,
-            supplierFk: 2,
-        });
-        expect(routerPush.path).toEqual('mockName/1');
+        expect(routerPush.path).toBe('mockName/1');
        expect(routerPush.query).toBeUndefined();
    });

-    it('should get data and send new URL keeping parameters, if you have more than one record', async () => {
-        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
-
-        vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
-            matched: [],
-            query: {},
-            params: {},
-            meta: { moduleName: 'mockName' },
-            path: 'mockName/1',
-        });
-        vi.spyOn(vueRouter, 'useRouter').mockReturnValue({
-            push: vi.fn(),
-            replace: vi.fn(),
-            currentRoute: {
-                value: {
-                    params: {
-                        id: 1,
-                    },
-                    meta: { moduleName: 'mockName' },
-                    matched: [{ path: 'mockName/:id' }],
-                },
-            },
-        });
-
-        const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
-
-        arrayData.store.userParams = params;
-        arrayData.fetch({});
-
-        await flushPromises();
-        const routerPush = useRouter().push.mock.calls[0][0];
-
-        expect(axios.get.mock.calls[0][1].params).toEqual({
-            filter,
-            supplierFk: 2,
-        });
-        expect(routerPush.path).toEqual('mockName/');
-        expect(routerPush.query.params).toBeDefined();
-    });
-
-    it('should return one record', async () => {
-        vi.spyOn(axios, 'get').mockReturnValueOnce({
+    it('should return one record when oneRecord is true', async () => {
+        vi.spyOn(axios, 'get').mockResolvedValueOnce({
            data: [
                { id: 1, name: 'Entity 1' },
                { id: 2, name: 'Entity 2' },
            ],
        });
-        const arrayData = useArrayData('ArrayData', { url: 'mockUrl', oneRecord: true });
+
+        const arrayData = useArrayData('ArrayData', {
+            url: 'mockUrl',
+            oneRecord: true,
+        });
+
        await arrayData.fetch({});

-        expect(arrayData.store.data).toEqual({ id: 1, name: 'Entity 1' });
-    });
-
-    it('should handle empty data gracefully if has to return one record', async () => {
-        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [] });
-        const arrayData = useArrayData('ArrayData', { url: 'mockUrl', oneRecord: true });
-        await arrayData.fetch({});
-
-        expect(arrayData.store.data).toBeUndefined();
+        expect(arrayData.store.data).toEqual({
+            id: 1,
+            name: 'Entity 1',
+        });
    });
 });
--- a/src/composables/tests/useRole.spec.js
+++ b/src/composables/tests/useRole.spec.js
@ -1,5 +1,6 @@
 import { vi, describe, expect, it } from 'vitest';
-import { axios, flushPromises } from 'app/test/vitest/helper';
+import axios from 'axios';
+import { flushPromises } from '@vue/test-utils';
 import { useRole } from 'composables/useRole';
 const role = useRole();

@ -23,18 +24,19 @@ describe('useRole', () => {
                name: `T'Challa`,
                nickname: 'Black Panther',
                lang: 'en',
+                worker: { department: { departmentFk: 155 } },
            };
            const expectedUser = {
                id: 999,
                name: `T'Challa`,
                nickname: 'Black Panther',
                lang: 'en',
+                departmentFk: 155,
            };
            const expectedRoles = ['salesPerson', 'admin'];
-            vi.spyOn(axios, 'get')
-            .mockResolvedValueOnce({
+            vi.spyOn(axios, 'get').mockResolvedValueOnce({
                data: { roles: rolesData, user: fetchedUser },
-            })
+            });

            vi.spyOn(role.state, 'setUser');
            vi.spyOn(role.state, 'setRoles');
--- a/src/composables/tests/useSession.spec.js
+++ b/src/composables/tests/useSession.spec.js
@ -1,5 +1,5 @@
 import { vi, describe, expect, it, beforeAll, beforeEach } from 'vitest';
-import { axios } from 'app/test/vitest/helper';
+import axios from 'axios';
 import { useSession } from 'composables/useSession';
 import { useState } from 'composables/useState';

@ -75,6 +75,7 @@ describe('session', () => {
                userConfig: {
                    darkMode: false,
                },
+                worker: { department: { departmentFk: 155 } },
            };
            const rolesData = [
                {
@ -143,7 +144,7 @@ describe('session', () => {
                await session.destroy(); // this clears token and user for any other test
            });
        },
-        {}
+        {},
    );

    describe('RenewToken', () => {
@ -175,7 +176,7 @@ describe('session', () => {
            await session.checkValidity();
            expect(sessionStorage.getItem('token')).toEqual(expectedToken);
            expect(sessionStorage.getItem('tokenMultimedia')).toEqual(
-                expectedTokenMultimedia
+                expectedTokenMultimedia,
            );
        });
        it('Should renewToken', async () => {
@ -204,7 +205,7 @@ describe('session', () => {
            await session.checkValidity();
            expect(sessionStorage.getItem('token')).not.toEqual(expectedToken);
            expect(sessionStorage.getItem('tokenMultimedia')).not.toEqual(
-                expectedTokenMultimedia
+                expectedTokenMultimedia,
            );
        });
    });
--- a/src/composables/tests/useTokenConfig.spec.js
+++ b/src/composables/tests/useTokenConfig.spec.js
@ -1,5 +1,6 @@
 import { vi, describe, expect, it } from 'vitest';
-import { axios, flushPromises } from 'app/test/vitest/helper';
+import axios from 'axios';
+import { flushPromises } from '@vue/test-utils';
 import { useTokenConfig } from 'composables/useTokenConfig';
 const tokenConfig = useTokenConfig();

--- a/src/composables/downloadFile.js
+++ b/src/composables/downloadFile.js
@ -7,18 +7,33 @@ const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();

 export async function downloadFile(id, model = 'dms', urlPath = '/downloadFile', url) {
-    const appUrl = (await getUrl('', 'lilium')).replace('/#/', '');
+    const appUrl = await getAppUrl();
    const response = await axios.get(
        url ?? `${appUrl}/api/${model}/${id}${urlPath}?access_token=${token}`,
-        { responseType: 'blob' }
+        { responseType: 'blob' },
    );

+    download(response);
+}
+
+export async function downloadDocuware(url, params) {
+    const appUrl = await getAppUrl();
+    const response = await axios.get(`${appUrl}/api/` + url, {
+        responseType: 'blob',
+        params,
+    });
+
+    download(response);
+}
+
+function download(response) {
    const contentDisposition = response.headers['content-disposition'];
    const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
-    const filename =
-        matches != null && matches[1]
-            ? matches[1].replace(/['"]/g, '')
-            : 'downloaded-file';
+    const filename = matches?.[1] ? matches[1].replace(/['"]/g, '') : 'downloaded-file';

    exportFile(filename, response.data);
 }
+
+async function getAppUrl() {
+    return (await getUrl('', 'lilium')).replace('/#/', '');
+}
--- a/src/composables/useAcl.js
+++ b/src/composables/useAcl.js
@ -30,9 +30,16 @@ export function useAcl() {
        return false;
    }

+    function hasAcl(model, prop, accessType) {
+        const modelAcl = state.getAcls().value[model];
+        const propAcl = modelAcl?.[prop] || modelAcl?.['*'];
+        return !!(propAcl?.[accessType] || propAcl?.['*']);
+    }
+
    return {
        fetch,
        hasAny,
        state,
+        hasAcl,
    };
 }
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@ -5,12 +5,11 @@ import { useArrayDataStore } from 'stores/useArrayDataStore';
 import { buildFilter } from 'filters/filterPanel';
 import { isDialogOpened } from 'src/filters';

-const arrayDataStore = useArrayDataStore();
-
 export function useArrayData(key, userOptions) {
    key ??= useRoute().meta.moduleName;

    if (!key) throw new Error('ArrayData: A key is required to use this composable');
+    const arrayDataStore = useArrayDataStore(); // Move inside function

    if (!arrayDataStore.get(key)) arrayDataStore.set(key);

@ -56,7 +55,6 @@ export function useArrayData(key, userOptions) {
            'searchUrl',
            'navigate',
            'mapKey',
-            'keepData',
            'oneRecord',
        ];
        if (typeof userOptions === 'object') {
@ -108,7 +106,7 @@ export function useArrayData(key, userOptions) {
        store.hasMoreData = limit && response.data.length >= limit;

        if (!append && !isDialogOpened() && updateRouter) {
-            if (updateStateParams(response.data)?.redirect && !store.keepData) return;
+            if (updateStateParams(response.data)?.redirect) return;
        }
        store.isLoading = false;
        canceller = null;
@ -189,7 +187,7 @@ export function useArrayData(key, userOptions) {

        store.order = order;
        resetPagination();
-        fetch({});
+        await fetch({});
        index++;

        return { index, order };
--- a/src/composables/useFilterParams.js
+++ b/src/composables/useFilterParams.js
@ -14,7 +14,7 @@ export function useFilterParams(key) {
    watch(
        () => arrayData.value.store?.currentFilter,
        (val, oldValue) => (val || oldValue) && setUserParams(val),
-        { immediate: true, deep: true }
+        { immediate: true, deep: true },
    );

    function parseOrder(urlOrders) {
@ -54,7 +54,7 @@ export function useFilterParams(key) {
                    Object.assign(params, item);
                });
                delete params[key];
-            } else if (value && typeof value === 'object') {
+            } else if (value && typeof value === 'object' && !Array.isArray(value)) {
                const param = Object.values(value)[0];
                if (typeof param == 'string') params[key] = param.replaceAll('%', '');
            }
--- a/src/composables/useRole.js
+++ b/src/composables/useRole.js
@ -13,6 +13,7 @@ export function useRole() {
            name: data.user.name,
            nickname: data.user.nickname,
            lang: data.user.lang || 'es',
+            departmentFk: data.user?.worker?.department?.departmentFk,
        };
        state.setUser(userData);
        state.setRoles(roles);
--- a/src/composables/useSession.js
+++ b/src/composables/useSession.js
@ -60,7 +60,7 @@ export function useSession() {
                const { data: isValidToken } = await axios.get('VnUsers/validateToken');
                if (isValidToken)
                    destroyTokenPromises = Object.entries(tokens).map(([key, url]) =>
-                        destroyToken(url, storage, key)
+                        destroyToken(url, storage, key),
                    );
            }
        } finally {
--- a/src/composables/useValidator.js
+++ b/src/composables/useValidator.js
@ -78,7 +78,8 @@ export function useValidator() {
                if (min >= 0)
                    if (Math.floor(value) < min) return t('inputMin', { value: min });
            },
-            custom: (value) => validation.bindedFunction(value) || 'Invalid value',
+            custom: (value) =>
+                eval(`(${validation.bindedFunction})`)(value) || 'Invalid value',
        };
    };

--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -325,7 +325,6 @@ input::-webkit-inner-spin-button {
        min-height: auto !important;
        display: flex;
        align-items: flex-end;
-        padding-bottom: 2px;
        .q-field__native.row {
            min-height: auto !important;
        }
@ -341,3 +340,6 @@ input::-webkit-inner-spin-button {
 .containerShrinked {
    width: 70%;
 }
+.q-item__section--main ~ .q-item__section--side {
+    padding-inline: 0;
+}
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@ -370,6 +370,11 @@ globals:
        countryCodeFk: Country
        companyFk: Company
        nickname: Alias
+        changedModel: Entity
+        changedModelValue: Search
+        changedModelId: Entity id
+        userFk: User
+        action: Action
    model: Model
    fuel: Fuel
    active: Active
@ -646,6 +651,7 @@ worker:
        model: Model
        serialNumber: Serial number
        removePDA: Deallocate PDA
+        sendToTablet: Send to tablet
    create:
        lastName: Last name
        birth: Birth
@ -816,6 +822,7 @@ travel:
    search: Search travel
    searchInfo: You can search by travel id or name
    id: Id
+    awbFk: AWB
    travelList:
        tableVisibleColumns:
            ref: Reference
@ -840,6 +847,7 @@ travel:
        availabledHour: Availabled hour
        thermographs: Thermographs
        hb: HB
+        roundedCc: Rounded CC
    basicData:
        daysInForward: Automatic movement (Raid)
        isRaid: Raid
@ -882,7 +890,7 @@ components:
        openCard: View
        openSummary: Summary
        viewSummary: Summary
-    cardDescriptor:
+    vnDescriptor:
        mainList: Main list
        summary: Summary
        moreOptions: More options
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@ -371,6 +371,11 @@ globals:
        countryCodeFk: País
        companyFk: Empresa
        nickname: Alias
+        changedModel: Entidad
+        changedModelValue: Buscar
+        changedModelId: Id de entidad
+        userFk: Usuario
+        action: Acción
 errors:
    statusUnauthorized: Acceso denegado
    statusInternalServerError: Ha ocurrido un error interno del servidor
@ -731,6 +736,7 @@ worker:
        model: Modelo
        serialNumber: Número de serie
        removePDA: Desasignar PDA
+        sendToTablet: Enviar a la tablet
    create:
        lastName: Apellido
        birth: Fecha de nacimiento
@ -899,6 +905,7 @@ travel:
    search: Buscar envío
    searchInfo: Buscar envío por id o nombre
    id: Id
+    awbFk: Guía aérea
    travelList:
        tableVisibleColumns:
            ref: Referencia
@ -923,6 +930,7 @@ travel:
        availabled: F. Disponible
        availabledHour: Hora Disponible
        hb: HB
+        roundedCc: CC redondeado
    basicData:
        daysInForward: Desplazamiento automatico (redada)
        isRaid: Redada
@ -966,7 +974,7 @@ components:
        openCard: Ficha
        openSummary: Detalles
        viewSummary: Vista previa
-    cardDescriptor:
+    vnDescriptor:
        mainList: Listado principal
        summary: Resumen
        moreOptions: Más opciones
--- a/src/pages/Account/AccountFilter.vue
+++ b/src/pages/Account/AccountFilter.vue
@ -47,7 +47,7 @@ const rolesOptions = ref([]);
                        :label="t('globals.name')"
                        v-model="params.name"
                        lazy-rules
-                        is-outlined
+                        filled
                    />
                </QItemSection>
            </QItem>
@ -57,7 +57,7 @@ const rolesOptions = ref([]);
                        :label="t('account.card.alias')"
                        v-model="params.nickname"
                        lazy-rules
-                        is-outlined
+                        filled
                    />
                </QItemSection>
            </QItem>
@ -75,8 +75,7 @@ const rolesOptions = ref([]);
                        use-input
                        hide-selected
                        dense
-                        outlined
-                        rounded
+                        filled
                        :input-debounce="0"
                    />
                </QItemSection>
--- a/src/pages/Account/Acls/AclFilter.vue
+++ b/src/pages/Account/Acls/AclFilter.vue
@ -56,8 +56,7 @@ onBeforeMount(() => {
                        option-label="name"
                        use-input
                        dense
-                        outlined
-                        rounded
+                        filled
                    />
                </QItemSection>
            </QItem>
@ -72,8 +71,7 @@ onBeforeMount(() => {
                        option-label="name"
                        use-input
                        dense
-                        outlined
-                        rounded
+                        filled
                    />
                </QItemSection>
            </QItem>
@ -83,7 +81,7 @@ onBeforeMount(() => {
                        :label="t('acls.aclFilter.property')"
                        v-model="params.property"
                        lazy-rules
-                        is-outlined
+                        filled
                    />
                </QItemSection>
            </QItem>
@ -98,8 +96,7 @@ onBeforeMount(() => {
                        option-label="name"
                        use-input
                        dense
-                        outlined
-                        rounded
+                        filled
                    />
                </QItemSection>
            </QItem>
@ -114,8 +111,7 @@ onBeforeMount(() => {
                        option-label="name"
                        use-input
                        dense
-                        outlined
-                        rounded
+                        filled
                    />
                </QItemSection>
            </QItem>
--- a/src/pages/Account/Alias/Card/AliasDescriptor.vue
+++ b/src/pages/Account/Alias/Card/AliasDescriptor.vue
@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';

-import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import EntityDescriptor from 'components/ui/EntityDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';

 import axios from 'axios';
@ -48,7 +48,7 @@ const removeAlias = () => {
 </script>

 <template>
-    <CardDescriptor
+    <EntityDescriptor
        ref="descriptor"
        :url="`MailAliases/${entityId}`"
        data-key="Alias"
@ -63,7 +63,7 @@ const removeAlias = () => {
        <template #body="{ entity }">
            <VnLv :label="t('role.description')" :value="entity.description" />
        </template>
-    </CardDescriptor>
+    </EntityDescriptor>
 </template>

 <i18n>
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import EntityDescriptor from 'components/ui/EntityDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
@ -20,7 +20,7 @@ onMounted(async () => {
 </script>

 <template>
-    <CardDescriptor
+    <EntityDescriptor
        ref="descriptor"
        :url="`VnUsers/preview`"
        :filter="{ ...filter, where: { id: entityId } }"
@ -78,7 +78,7 @@ onMounted(async () => {
                </QIcon>
            </QCardActions>
        </template>
-    </CardDescriptor>
+    </EntityDescriptor>
 </template>
 <style scoped>
 .q-item__label {
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@ -100,12 +100,8 @@ const onChangePass = (oldPass) => {
 };

 onMounted(() => {
-    hasitManagementAccess.value = useAcl().hasAny([
-        { model: 'VnUser', props: 'higherPrivileges', accessType: 'WRITE' },
-    ]);
-    hasSysadminAccess.value = useAcl().hasAny([
-        { model: 'VnUser', props: 'adminUser', accessType: 'WRITE' },
-    ]);
+    hasitManagementAccess.value = useAcl().hasAcl('VnUser', 'higherPrivileges', 'WRITE');
+    hasSysadminAccess.value = useAcl().hasAcl('VnUser', 'adminUser', 'WRITE');
 });
 </script>
 <template>
@ -227,7 +223,7 @@ onMounted(() => {
        <QItemSection>{{ t('account.card.actions.deactivateUser.name') }}</QItemSection>
    </QItem>
    <QItem
-        v-if="useAcl().hasAny([{ model: 'VnRole', props: '*', accessType: 'WRITE' }])"
+        v-if="useAcl().hasAcl('VnRole', '*', 'WRITE')"
        v-ripple
        clickable
        @click="showSyncDialog = true"
--- a/src/pages/Account/Card/AccountDescriptorProxy.vue
+++ b/src/pages/Account/Card/AccountDescriptorProxy.vue
@ -0,0 +1,14 @@
+<script setup>
+import AccountDescriptor from './AccountDescriptor.vue';
+import AccountSummary from './AccountSummary.vue';
+</script>
+<template>
+    <QPopupProxy style="max-width: 10px">
+        <AccountDescriptor
+            v-if="$attrs.id"
+            v-bind="$attrs"
+            :summary="AccountSummary"
+            :proxy-render="true"
+        />
+    </QPopupProxy>
+</template>
--- a/src/pages/Account/Card/AccountSummary.vue
+++ b/src/pages/Account/Card/AccountSummary.vue
@ -18,7 +18,7 @@ const entityId = computed(() => $props.id || route.params.id);
        data-key="Account"
        ref="AccountSummary"
        url="VnUsers/preview"
-        :filter="filter"
+        :filter="{ ...filter, where: { id: entityId } }"
    >
        <template #header="{ entity }">{{ entity.id }} - {{ entity.nickname }}</template>
        <template #menu>
--- a/src/pages/Account/Role/AccountRolesFilter.vue
+++ b/src/pages/Account/Role/AccountRolesFilter.vue
@ -27,7 +27,7 @@ const props = defineProps({
                        :label="t('globals.name')"
                        v-model="params.name"
                        lazy-rules
-                        is-outlined
+                        filled
                    />
                </QItemSection>
            </QItem>
@ -37,7 +37,7 @@ const props = defineProps({
                        :label="t('role.description')"
                        v-model="params.description"
                        lazy-rules
-                        is-outlined
+                        filled
                    />
                </QItemSection>
            </QItem>
--- a/src/pages/Account/Role/Card/RoleDescriptor.vue
+++ b/src/pages/Account/Role/Card/RoleDescriptor.vue
@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import EntityDescriptor from 'components/ui/EntityDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@ -32,7 +32,7 @@ const removeRole = async () => {
 </script>

 <template>
-    <CardDescriptor
+    <EntityDescriptor
        url="VnRoles"
        :filter="{ where: { id: entityId } }"
        data-key="Role"
@ -47,7 +47,7 @@ const removeRole = async () => {
        <template #body="{ entity }">
            <VnLv :label="t('role.description')" :value="entity.description" />
        </template>
-    </CardDescriptor>
+    </EntityDescriptor>
 </template>
 <style scoped>
 .q-item__label {
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { getDifferences, getUpdatedValues } from 'src/filters';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
 import FetchData from 'components/FetchData.vue';
@ -9,12 +10,18 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-
 import VnAvatar from 'src/components/ui/VnAvatar.vue';

 const route = useRoute();
 const { t } = useI18n();
 const workersOptions = ref([]);
+
+function onBeforeSave(formData, originalData) {
+    return getUpdatedValues(
+        Object.keys(getDifferences(formData, originalData)),
+        formData,
+    );
+}
 </script>
 <template>
    <FetchData
@ -27,6 +34,7 @@ const workersOptions = ref([]);
    <FormModel
        model="Claim"
        :url-update="`Claims/updateClaim/${route.params.id}`"
+        :mapper="onBeforeSave"
        auto-load
    >
        <template #form="{ data, validate }">
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@ -6,7 +6,7 @@ import { toDateHourMinSec, toPercentage } from 'src/filters';
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
 import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
+import EntityDescriptor from 'components/ui/EntityDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { getUrl } from 'src/composables/getUrl';
@ -44,7 +44,7 @@ onMounted(async () => {
 </script>

 <template>
-    <CardDescriptor
+    <EntityDescriptor
        :url="`Claims/${entityId}`"
        :filter="filter"
        title="client.name"
@ -147,7 +147,7 @@ onMounted(async () => {
                </QBtn>
            </QCardActions>
        </template>
-    </CardDescriptor>
+    </EntityDescriptor>
 </template>
 <style scoped>
 .q-item__label {
--- a/src/pages/Claim/Card/ClaimDescriptorProxy.vue
+++ b/src/pages/Claim/Card/ClaimDescriptorProxy.vue
@ -0,0 +1,14 @@
+<script setup>
+import ClaimDescriptor from './ClaimDescriptor.vue';
+import ClaimSummary from './ClaimSummary.vue';
+</script>
+<template>
+    <QPopupProxy style="max-width: 10px">
+        <ClaimDescriptor
+            v-if="$attrs.id"
+            v-bind="$attrs.id"
+            :summary="ClaimSummary"
+            :proxy-render="true"
+        />
+    </QPopupProxy>
+</template>
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@ -21,6 +21,7 @@ import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorP
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import DepartmentDescriptorProxy from 'src/pages/Worker/Department/Card/DepartmentDescriptorProxy.vue';
 import ClaimDescriptorMenu from './ClaimDescriptorMenu.vue';
+import VnDropdown from 'src/components/common/VnDropdown.vue';

 const route = useRoute();
 const router = useRouter();
@ -36,7 +37,7 @@ const $props = defineProps({
 });

 const entityId = computed(() => $props.id || route.params.id);
-const ClaimStates = ref([]);
+const claimStates = ref([]);
 const claimDmsRef = ref();
 const claimDms = ref([]);
 const multimediaDialog = ref();
@ -173,7 +174,9 @@ function openDialog(dmsId) {
 }

 async function changeState(value) {
-    await axios.patch(`Claims/updateClaim/${entityId.value}`, { claimStateFk: value });
+    await axios.patch(`Claims/updateClaim/${entityId.value}`, {
+        claimStateFk: value,
+    });
    router.go(route.fullPath);
 }

@ -183,13 +186,18 @@ function claimUrl(section) {
 </script>

 <template>
+    <FetchData
+        url="ClaimStates"
+        :filter="{ fields: ['id', 'description'] }"
+        @on-fetch="(data) => (claimStates = data)"
+        auto-load
+    />
    <FetchData
        url="ClaimDms"
        :filter="claimDmsFilter"
        @on-fetch="(data) => setClaimDms(data)"
        ref="claimDmsRef"
    />
-    <FetchData url="ClaimStates" @on-fetch="(data) => (ClaimStates = data)" auto-load />
    <CardSummary
        ref="summary"
        :url="`Claims/${entityId}/getSummary`"
@ -201,34 +209,11 @@ function claimUrl(section) {
            {{ claim.id }} - {{ claim.client.name }} ({{ claim.client.id }})
        </template>
        <template #header-right>
-            <QBtnDropdown
-                side
-                top
-                color="black"
-                text-color="white"
-                :label="t('globals.changeState')"
-            >
-                <QList>
-                    <QVirtualScroll
-                        class="max-container-height"
-                        :items="ClaimStates"
-                        separator
-                        v-slot="{ item, index }"
-                    >
-                        <QItem
-                            :key="index"
-                            dense
-                            clickable
-                            v-close-popup
-                            @click="changeState(item.id)"
-                        >
-                            <QItemSection>
-                                <QItemLabel>{{ item.description }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QVirtualScroll>
-                </QList>
-            </QBtnDropdown>
+            <VnDropdown
+                :options="claimStates"
+                option-label="description"
+                @change-state="changeState"
+            />
        </template>
        <template #menu="{ entity }">
            <ClaimDescriptorMenu :claim="entity.claim" />
--- a/src/pages/Claim/Card/ClaimSummaryAction.vue
+++ b/src/pages/Claim/Card/ClaimSummaryAction.vue
@ -88,13 +88,13 @@ const columns = [
        auto-load
    >
        <template #column-itemFk="{ row }">
-            <span class="link">
+            <span class="link" @click.stop>
                {{ row.itemFk }}
                <ItemDescriptorProxy :id="row.itemFk" />
            </span>
        </template>
        <template #column-ticketFk="{ row }">
-            <span class="link">
+            <span class="link" @click.stop>
                {{ row.ticketFk }}
                <TicketDescriptorProxy :id="row.ticketFk" />
            </span>
--- a/src/pages/Claim/Card/tests/ClaimDescriptorMenu.spec.js
+++ b/src/pages/Claim/Card/tests/ClaimDescriptorMenu.spec.js
@ -1,5 +1,6 @@
 import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import axios from 'axios';
+import { createWrapper } from 'app/test/vitest/helper';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';

 describe('ClaimDescriptorMenu', () => {
--- a/src/pages/Claim/Card/tests/ClaimLines.spec.js
+++ b/src/pages/Claim/Card/tests/ClaimLines.spec.js
@ -1,5 +1,6 @@
 import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import axios from 'axios';
+import { createWrapper } from 'app/test/vitest/helper';
 import ClaimLines from '/src/pages/Claim/Card/ClaimLines.vue';

 describe('ClaimLines', () => {
--- a/src/pages/Claim/Card/tests/ClaimLinesImport.spec.js
+++ b/src/pages/Claim/Card/tests/ClaimLinesImport.spec.js
@ -1,5 +1,6 @@
 import { vi, describe, expect, it, beforeAll, beforeEach, afterEach } from 'vitest';
-import { createWrapper, axios } from 'app/test/vitest/helper';
+import axios from 'axios';
+import { createWrapper } from 'app/test/vitest/helper';
 import ClaimLinesImport from 'pages/Claim/Card/ClaimLinesImport.vue';

 describe('ClaimLinesImport', () => {
--- a/Show More
+++ b/Show More