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

.husky/addReferenceTag.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+
+function getCurrentBranchName(p = process.cwd()) {
+    if (!fs.existsSync(p)) return false;
+
+    const gitHeadPath = path.join(p, '.git', 'HEAD');
+
+    if (!fs.existsSync(gitHeadPath))
+        return getCurrentBranchName(path.resolve(p, '..'));
+
+    const headContent = fs.readFileSync(gitHeadPath, 'utf-8');
+    return headContent.trim().split('/')[2];
+}
+
+const branchName = getCurrentBranchName();
+
+if (branchName) {
+    const msgPath = `.git/COMMIT_EDITMSG`;
+    const msg = fs.readFileSync(msgPath, 'utf-8');
+    const reference = branchName.match(/^\d+/);
+
+    const referenceTag = `refs #${reference}`;
+    if (!msg.includes(referenceTag) && reference) {
+        const splitedMsg = msg.split(':');
+
+        if (splitedMsg.length > 1) {
+            const finalMsg = splitedMsg[0] + ': ' + referenceTag + splitedMsg.slice(1).join(':');
+            fs.writeFileSync(msgPath, finalMsg);
+        }
+    }
+}
+

.husky/commit-msg

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "Running husky commit-msg hook"
+npx --no-install commitlint --edit
+echo "Adding reference tag to commit message"
+node .husky/addReferenceTag.js
+

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

package.json

@@ -13,7 +13,10 @@
         "test:e2e:ci": "cd ../salix && gulp docker && cd ../salix-front && cypress run",
         "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
         "test:unit": "vitest",
-        "test:unit:ci": "vitest run"
+        "test:unit:ci": "vitest run",
+        "commitlint": "commitlint --edit",
+        "prepare": "npx husky install",
+        "addReferenceTag": "node .husky/addReferenceTag.js"
     },
     "dependencies": {
         "@quasar/cli": "^2.3.0",
@@ -29,6 +32,8 @@
         "vue-router": "^4.2.1"
     },
     "devDependencies": {
+        "@commitlint/cli": "^19.2.1",
+        "@commitlint/config-conventional": "^19.1.0",
         "@intlify/unplugin-vue-i18n": "^0.8.1",
         "@pinia/testing": "^0.1.2",
         "@quasar/app-vite": "^1.7.3",
@@ -41,6 +46,7 @@
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-cypress": "^2.13.3",
         "eslint-plugin-vue": "^9.14.1",
+        "husky": "^8.0.0",
         "postcss": "^8.4.23",
         "prettier": "^2.8.8",
         "vitest": "^0.31.1"

src/components/NavBar.vue

@@ -7,7 +7,7 @@ import { useQuasar } from 'quasar';
 import PinnedModules from './PinnedModules.vue';
 import UserPanel from 'components/UserPanel.vue';
 import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
-import VnImg from 'src/components/ui/VnImg.vue';
+import VnAvatar from './ui/VnAvatar.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -72,22 +72,13 @@ const pinnedModulesRef = ref();
                     </QTooltip>
                     <PinnedModules ref="pinnedModulesRef" />
                 </QBtn>
-                <QBtn
+                <QBtn class="q-pa-none" rounded dense flat no-wrap id="user">
-                    :class="{ 'q-pa-none': quasar.platform.is.mobile }"
+                    <VnAvatar
-                    rounded
+                        :worker-id="user.id"
-                    dense
+                        :title="user.name"
-                    flat
+                        size="lg"
-                    no-wrap
+                        color="transparent"
-                    id="user"
-                >
-                    <QAvatar size="lg">
-                        <VnImg
-                            :id="user.id"
-                            collection="user"
-                            size="160x160"
-                            :zoom-size="null"
                     />
-                    </QAvatar>
                     <QTooltip bottom>
                         {{ t('globals.userPanel') }}
                     </QTooltip>

src/components/UserPanel.vue

@@ -11,8 +11,8 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import { useClipboard } from 'src/composables/useClipboard';
-import VnImg from 'src/components/ui/VnImg.vue';
 import { useRole } from 'src/composables/useRole';
+import VnAvatar from './ui/VnAvatar.vue';
 
 const state = useState();
 const session = useSession();
@@ -136,7 +136,7 @@ const isEmployee = computed(() => useRole().isEmployee());
                     @update:model-value="saveLanguage"
                     :label="t(`globals.lang['${userLocale}']`)"
                     icon="public"
-                    color="orange"
+                    color="primary"
                     false-value="es"
                     true-value="en"
                 />
@@ -145,7 +145,7 @@ const isEmployee = computed(() => useRole().isEmployee());
                     @update:model-value="saveDarkMode"
                     :label="t(`globals.darkMode`)"
                     checked-icon="dark_mode"
-                    color="orange"
+                    color="primary"
                     unchecked-icon="light_mode"
                 />
             </div>
@@ -153,10 +153,20 @@ const isEmployee = computed(() => useRole().isEmployee());
             <QSeparator vertical inset class="q-mx-lg" />
 
             <div class="col column items-center q-mb-sm">
-                <QAvatar size="80px">
+                <VnAvatar
-                    <VnImg :id="user.id" collection="user" size="160x160" />
+                    :worker-id="user.id"
-                </QAvatar>
+                    :title="user.name"
-
+                    size="xxl"
+                    color="transparent"
+                />
+                <QBtn
+                    v-if="isEmployee"
+                    class="q-mt-sm q-px-md"
+                    :to="`/worker/${user.id}`"
+                    color="primary"
+                    :label="t('My account')"
+                    dense
+                />
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>
@@ -168,7 +178,7 @@ const isEmployee = computed(() => useRole().isEmployee());
                 </div>
                 <QBtn
                     id="logout"
-                    color="orange"
+                    color="primary"
                     flat
                     :label="t('globals.logOut')"
                     size="sm"
@@ -260,3 +270,7 @@ const isEmployee = computed(() => useRole().isEmployee());
     }
 }
 </style>
+<i18n>
+es:
+    My account: Mi cuenta
+</i18n>

src/components/VnTable/VnColumn.vue

@@ -151,7 +151,7 @@ const col = computed(() => {
         };
     }
     if (
-        (newColumn.name.startsWith('is') || newColumn.name.startsWith('has')) &&
+        (/^is[A-Z]/.test(newColumn.name) || /^has[A-Z]/.test(newColumn.name)) &&
         newColumn.component == null
     )
         newColumn.component = 'checkbox';

src/components/VnTable/VnTable.vue

@@ -108,6 +108,8 @@ const CrudModelRef = ref({});
 const showForm = ref(false);
 const splittedColumns = ref({ columns: [] });
 const columnsVisibilitySkiped = ref();
+const createForm = ref();
+
 const tableModes = [
     {
         icon: 'view_column',
@@ -139,6 +141,14 @@ onMounted(() => {
             .map((c) => c.name),
         ...['tableActions'],
     ];
+    createForm.value = $props.create;
+    if ($props.create && route?.query?.createForm) {
+        showForm.value = true;
+        createForm.value = {
+            ...createForm.value,
+            ...{ formInitialData: JSON.parse(route?.query?.createForm) },
+        };
+    }
 });
 
 watch(
@@ -154,16 +164,16 @@ watch(
 
 const isTableMode = computed(() => mode.value == TABLE_MODE);
 
-function setUserParams(watchedParams) {
+function setUserParams(watchedParams, watchedOrder) {
     if (!watchedParams) return;
 
     if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
     const filter =
         typeof watchedParams?.filter == 'string'
-            ? JSON.parse(watchedParams?.filter)
+            ? JSON.parse(watchedParams?.filter ?? '{}')
             : watchedParams?.filter;
     const where = filter?.where;
-    const order = filter?.order;
+    const order = watchedOrder ?? filter?.order;
 
     watchedParams = { ...watchedParams, ...where };
     delete watchedParams.filter;
@@ -615,14 +625,14 @@ defineExpose({
     <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
         <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
         <QTooltip>
-            {{ create.title }}
+            {{ createForm.title }}
         </QTooltip>
     </QPageSticky>
     <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
         <FormModelPopup
-            v-bind="create"
+            v-bind="createForm"
             :model="$attrs['data-key'] + 'Create'"
-            @on-data-saved="(_, res) => create.onDataSaved(res)"
+            @on-data-saved="(_, res) => createForm.onDataSaved(res)"
         >
             <template #form-inputs="{ data }">
                 <div class="grid-create">

src/components/VnTable/VnVisibleColumn.vue

@@ -65,7 +65,7 @@ async function fetchViewConfigData() {
         const userConfig = await getConfig('UserConfigViews', {
             where: {
                 ...defaultFilter.where,
-                ...{ userFk: user.id },
+                ...{ userFk: user.value.id },
             },
         });
 

src/components/common/RightMenu.vue

@@ -46,7 +46,7 @@ const stateStore = useStateStore();
         </div>
     </Teleport>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+        <QScrollArea class="fit">
             <div id="right-panel"></div>
             <slot v-if="!hasContent" name="right-panel" />
         </QScrollArea>

src/components/common/VnCard.vue

@@ -17,13 +17,7 @@ const props = defineProps({
     descriptor: { type: Object, required: true },
     filterPanel: { type: Object, default: undefined },
     searchDataKey: { type: String, default: undefined },
-    searchUrl: { type: String, default: undefined },
+    searchbarProps: { type: Object, default: undefined },
-    searchbarLabel: { type: String, default: '' },
-    searchbarInfo: { type: String, default: '' },
-    searchCustomRouteRedirect: { type: String, default: undefined },
-    searchRedirect: { type: Boolean, default: true },
-    searchMakeFetch: { type: Boolean, default: true },
-    searchUrlQuery: { type: String, default: undefined },
 });
 
 const stateStore = useStateStore();
@@ -66,15 +60,7 @@ if (props.baseUrl) {
         </QScrollArea>
     </QDrawer>
     <slot name="searchbar" v-if="props.searchDataKey">
-        <VnSearchbar
+        <VnSearchbar :data-key="props.searchDataKey" v-bind="props.searchbarProps" />
-            :data-key="props.searchDataKey"
-            :url="props.searchUrl"
-            :label="props.searchbarLabel"
-            :info="props.searchbarInfo"
-            :search-url="props.searchUrlQuery"
-            :custom-route-redirect-name="searchCustomRouteRedirect"
-            :redirect="searchRedirect"
-        />
     </slot>
     <slot v-else name="searchbar" />
     <RightMenu>

src/components/common/VnCurrency.vue

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

src/components/common/VnLog.vue

@@ -214,7 +214,7 @@ function getLogTree(data) {
         }
         nLogs++;
         modelLog.logs.push(log);
-
+        modelLog.summaryId = modelLog.logs[0].summaryId;
         // Changes
         const notDelete = log.action != 'delete';
         const olds = (notDelete ? log.oldInstance : null) || {};
@@ -407,9 +407,12 @@ watch(
         @on-fetch="
             (data) =>
                 (actions = data.map((item) => {
+                    const changedModel = item.changedModel;
                     return {
-                        locale: useCapitalize(validations[item.changedModel].locale.name),
+                        locale: useCapitalize(
-                        value: item.changedModel,
+                            validations[changedModel]?.locale?.name ?? changedModel
+                        ),
+                        value: changedModel,
                     };
                 }))
         "
@@ -472,12 +475,17 @@ watch(
                             >
                                 {{ t(modelLog.modelI18n) }}
                             </QChip>
-                            <span class="model-id" v-if="modelLog.summaryId"
+
-                                >#{{ modelLog.summaryId }}</span
+                            <span
-                            >
+                                class="model-id q-mr-xs"
-                            <span class="model-value" :title="modelLog.showValue">
+                                v-if="modelLog.summaryId"
-                                {{ modelLog.showValue }}
+                                v-text="`#${modelLog.summaryId}`"
-                            </span>
+                            />
+                            <span
+                                class="model-value"
+                                :title="modelLog.showValue"
+                                v-text="modelLog.showValue"
+                            />
                             <QBtn
                                 flat
                                 round

src/components/ui/CatalogItem.vue

@@ -31,7 +31,7 @@ const dialog = ref(null);
     <div class="container order-catalog-item overflow-hidden">
         <QCard class="card shadow-6">
             <div class="img-wrapper">
-                <VnImg :id="item.id" zoom-size="lg" class="image" />
+                <VnImg :id="item.id" class="image" />
                 <div v-if="item.hex && isCatalog" class="item-color-container">
                     <div
                         class="item-color"

src/components/ui/QCalendarMonthWrapper.vue

@@ -73,8 +73,7 @@ const containerClasses = computed(() => {
 .q-calendar-month__head--workweek,
 .q-calendar-month__head--weekday,
 // .q-calendar-month__workweek.q-past-day,
-.q-calendar-month__week :nth-child(6),
+.q-calendar-month__week :nth-child(n+6):nth-child(-n+7) {
-:nth-child(7) {
     color: var(--vn-label-color);
 }
 

src/components/ui/VnAvatar.vue

@@ -1,45 +1,62 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
 import { useColor } from 'src/composables/useColor';
+import { getCssVar } from 'quasar';
 
 const $props = defineProps({
     workerId: { type: Number, required: true },
     description: { type: String, default: null },
-    size: { type: String, default: null },
     title: { type: String, default: null },
+    color: { type: String, default: null },
 });
+
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
 const { t } = useI18n();
 
-const title = computed(() => $props.title ?? t('globals.system'));
+const src = computed(
+    () => `/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`
+);
+const title = computed(() => $props.title?.toUpperCase() || t('globals.system'));
 const showLetter = ref(false);
+const backgroundColor = computed(() => {
+    const color = $props.color || useColor(title.value);
+    return getCssVar(color) || color;
+});
+
+watch(src, () => (showLetter.value = false));
 </script>
 <template>
-    <div class="avatar-picture column items-center">
+    <div class="column items-center">
         <QAvatar
-            :style="{
+            :style="{ backgroundColor }"
-                backgroundColor: useColor(title),
+            v-bind="$attrs"
-            }"
+            :title="title || t('globals.system')"
-            :size="$props.size"
-            :title="title"
         >
-            <template v-if="showLetter">{{ title.charAt(0) }}</template>
+            <template v-if="showLetter">
-            <QImg
+                {{ title.charAt(0) }}
-                v-else
+            </template>
-                :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
+            <QImg v-else :src="src" spinner-color="white" @error="showLetter = true" />
-                spinner-color="white"
-                @error="showLetter = true"
-            />
         </QAvatar>
         <div class="description">
-            <slot name="description" v-if="$props.description">
+            <slot name="description" v-if="description">
-                <p>
+                <p v-text="description" />
-                    {{ $props.description }}
-                </p>
             </slot>
         </div>
     </div>
 </template>
+<style lang="scss" scoped>
+[size='xxl'] {
+    .q-avatar,
+    .q-img {
+        width: 80px;
+        height: 80px;
+    }
+
+    .q-img {
+        object-fit: cover;
+    }
+}
+</style>

src/components/ui/VnFilterPanel.vue

@@ -82,23 +82,26 @@ onMounted(() => {
 });
 
 function setUserParams(watchedParams) {
-    if (!watchedParams) return;
+    if (!watchedParams || Object.keys(watchedParams).length == 0) return;
 
     if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
+    if (typeof watchedParams?.filter == 'string')
+        watchedParams.filter = JSON.parse(watchedParams.filter);
+
     watchedParams = { ...watchedParams, ...watchedParams.filter?.where };
+    const order = watchedParams.filter?.order;
+
     delete watchedParams.filter;
-    userParams.value = { ...userParams.value, ...watchedParams };
+    userParams.value = { ...userParams.value, ...sanitizer(watchedParams) };
-    emit('setUserParams', userParams.value);
+    emit('setUserParams', userParams.value, order);
 }
 
 watch(
-    () => route.query[$props.searchUrl],
+    () => [route.query[$props.searchUrl], arrayData.store.userParams],
-    (val) => setUserParams(val)
+    ([newSearchUrl, newUserParams], [oldSearchUrl, oldUserParams]) => {
-);
+        if (newSearchUrl || oldSearchUrl) setUserParams(newSearchUrl);
-
+        if (newUserParams || oldUserParams) setUserParams(newUserParams);
-watch(
+    }
-    () => arrayData.store.userParams,
-    (val) => setUserParams(val)
 );
 
 watch(

src/components/ui/VnImg.vue

@@ -1,6 +1,8 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useSession } from 'src/composables/useSession';
+import noImage from '/no-user.png';
+import { useRole } from 'src/composables/useRole';
 
 const $props = defineProps({
     storage: {
@@ -11,14 +13,17 @@ const $props = defineProps({
         type: String,
         default: 'catalog',
     },
-    size: {
+    resolution: {
         type: String,
         default: '200x200',
     },
-    zoomSize: {
+    zoomResolution: {
         type: String,
-        required: false,
+        default: null,
-        default: 'lg',
+    },
+    zoom: {
+        type: Boolean,
+        default: true,
     },
     id: {
         type: Number,
@@ -28,14 +33,16 @@ const $props = defineProps({
 const show = ref(false);
 const token = useSession().getTokenMultimedia();
 const timeStamp = ref(`timestamp=${Date.now()}`);
-import noImage from '/no-user.png';
-import { useRole } from 'src/composables/useRole';
-const url = computed(() => {
 const isEmployee = useRole().isEmployee();
+
+const getUrl = (zoom = false) => {
+    const curResolution = zoom
+        ? $props.zoomResolution || $props.resolution
+        : $props.resolution;
     return isEmployee
-        ? `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
+        ? `/api/${$props.storage}/${$props.collection}/${curResolution}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
         : noImage;
-});
+};
 const reload = () => {
     timeStamp.value = `timestamp=${Date.now()}`;
 };
@@ -45,23 +52,21 @@ defineExpose({
 </script>
 <template>
     <QImg
-        :class="{ zoomIn: $props.zoomSize }"
+        :class="{ zoomIn: zoom }"
-        :src="url"
+        :src="getUrl()"
         v-bind="$attrs"
-        @click="show = !show"
+        @click.stop="show = $props.zoom ? true : false"
         spinner-color="primary"
     />
-    <QDialog v-model="show" v-if="$props.zoomSize">
+    <QDialog v-if="$props.zoom" v-model="show">
         <QImg
-            :src="url"
+            :src="getUrl(true)"
-            size="full"
-            class="img_zoom"
             v-bind="$attrs"
             spinner-color="primary"
+            class="img_zoom"
         />
     </QDialog>
 </template>
-
 <style lang="scss" scoped>
 .q-img {
     &.zoomIn {

src/components/ui/VnPaginate.vue

@@ -221,7 +221,7 @@ defineExpose({ fetch, addFilter, paginate });
     >
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">
-            <QSpinner color="orange" size="md" />
+            <QSpinner color="primary" size="md" />
         </div>
     </QInfiniteScroll>
 </template>

src/components/ui/VnRow.vue

@@ -1,15 +1,12 @@
-<script setup>
-defineProps({ wrap: { type: Boolean, default: false } });
-</script>
 <template>
-    <div class="vn-row q-gutter-md q-mb-md" :class="{ wrap }">
+    <div class="vn-row q-gutter-md q-mb-md">
-        <slot></slot>
+        <slot />
     </div>
 </template>
-<style lang="scss" scopped>
+<style lang="scss" scoped>
 .vn-row {
     display: flex;
-    > * {
+    > :deep(*) {
         flex: 1;
     }
 }

src/composables/useSession.js

@@ -3,12 +3,14 @@ import { useRole } from './useRole';
 import { useAcl } from './useAcl';
 import { useUserConfig } from './useUserConfig';
 import axios from 'axios';
+import { useRouter } from 'vue-router';
 import useNotify from './useNotify';
 import { useTokenConfig } from './useTokenConfig';
 const TOKEN_MULTIMEDIA = 'tokenMultimedia';
 const TOKEN = 'token';
 
 export function useSession() {
+    const router = useRouter();
     const { notify } = useNotify();
     let isCheckingToken = false;
     let intervalId = null;
@@ -102,6 +104,31 @@ export function useSession() {
         startInterval();
     }
 
+    async function setLogin(data) {
+        const {
+            data: { multimediaToken },
+        } = await axios.get('VnUsers/ShareToken', {
+            headers: { Authorization: data.token },
+        });
+
+        if (!multimediaToken) return;
+
+        await login({
+            ...data,
+            created: Date.now(),
+            tokenMultimedia: multimediaToken.id,
+        });
+
+        notify('login.loginSuccess', 'positive');
+
+        const currentRoute = router.currentRoute.value;
+        if (currentRoute.query?.redirect) {
+            router.push(currentRoute.query.redirect);
+        } else {
+            router.push({ name: 'Dashboard' });
+        }
+    }
+
     function isLoggedIn() {
         const localToken = localStorage.getItem(TOKEN);
         const sessionToken = sessionStorage.getItem(TOKEN);
@@ -163,6 +190,7 @@ export function useSession() {
         setToken,
         destroy,
         login,
+        setLogin,
         isLoggedIn,
         checkValidity,
         setSession,

src/i18n/locale/en.yml

@@ -262,6 +262,7 @@ globals:
     unsavedPopup:
         title: Unsaved changes will be lost
         subtitle: Are you sure exit without saving?
+    createInvoiceIn: Create invoice in
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred

src/i18n/locale/es.yml

@@ -264,6 +264,8 @@ globals:
     unsavedPopup:
         title: Los cambios que no haya guardado se perderán
         subtitle: ¿Seguro que quiere salir sin guardar?
+    createInvoiceIn: Crear factura recibida
+
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor

src/pages/Account/Alias/Card/AliasCard.vue

@@ -25,9 +25,11 @@ const searchBarDataKeys = {
         base-url="MailAliases"
         :descriptor="AliasDescriptor"
         :search-data-key="searchBarDataKeys[routeName]"
-        :search-custom-route-redirect="customRouteRedirectName"
+        :searchbar-props="{
-        :search-redirect="!!customRouteRedirectName"
+            redirect: !!customRouteRedirectName,
-        :searchbar-label="t('mailAlias.search')"
+            customRouteRedirectName,
-        :searchbar-info="t('mailAlias.searchInfo')"
+            info: t('mailAlias.searchInfo'),
+            label: t('mailAlias.search'),
+        }"
     />
 </template>

src/pages/Account/Card/AccountCard.vue

@@ -11,8 +11,12 @@ const { t } = useI18n();
         data-key="Account"
         :descriptor="AccountDescriptor"
         search-data-key="AccountUsers"
-        search-url="VnUsers/preview"
+        :searchbar-props="{
-        :searchbar-label="t('account.search')"
+            url: 'VnUsers/preview',
-        :searchbar-info="t('account.searchInfo')"
+            redirect: !!customRouteRedirectName,
+            customRouteRedirectName,
+            label: t('account.search'),
+            info: t('account.searchInfo'),
+        }"
     />
 </template>

src/pages/Account/Card/AccountDescriptor.vue

@@ -54,7 +54,7 @@ const hasAccount = ref(false);
         </template>
         <template #before>
             <!-- falla id :id="entityId.value" collection="user" size="160x160" -->
-            <VnImg :id="entityId" collection="user" size="160x160" class="photo">
+            <VnImg :id="entityId" collection="user" resolution="160x160" class="photo">
                 <template #error>
                     <div
                         class="absolute-full picture text-center q-pa-md flex flex-center"

src/pages/Account/Role/Card/RoleCard.vue

@@ -10,8 +10,12 @@ const { t } = useI18n();
         data-key="Role"
         :descriptor="RoleDescriptor"
         search-data-key="AccountRoles"
-        search-url="VnRoles"
+        :searchbar-props="{
-        :searchbar-label="t('role.searchRoles')"
+            url: 'VnRoles',
-        :searchbar-info="t('role.searchInfo')"
+            redirect: !!customRouteRedirectName,
+            customRouteRedirectName,
+            label: t('role.searchRoles'),
+            info: t('role.searchInfo'),
+        }"
     />
 </template>

src/pages/Claim/Card/ClaimBasicData.vue

@@ -10,13 +10,10 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 import axios from 'axios';
-// import { useSession } from 'src/composables/useSession';
+import VnAvatar from 'src/components/ui/VnAvatar.vue';
-import VnImg from 'src/components/ui/VnImg.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-// const { getTokenMultimedia } = useSession();
-// const token = getTokenMultimedia();
 
 const claimStates = ref([]);
 const claimStatesCopy = ref([]);
@@ -94,15 +91,14 @@ const statesFilter = {
                     :rules="validate('claim.claimStateFk')"
                 >
                     <template #before>
-                        <QAvatar color="orange">
+                        <VnAvatar
-                            <VnImg
+                            :worker-id="data.workerFk"
-                                v-if="data.workerFk"
+                            size="md"
-                                :size="'160x160'"
+                            :title="
-                                :id="data.workerFk"
+                                workersOptions.find(({ id }) => id == data.workerFk)?.name
-                                collection="user"
+                            "
-                                spinner-color="white"
+                            color="primary"
                         />
-                        </QAvatar>
                     </template>
                 </VnSelect>
                 <QSelect

src/pages/Claim/Card/ClaimCard.vue

@@ -11,9 +11,11 @@ import filter from './ClaimFilter.js';
         :descriptor="ClaimDescriptor"
         :filter-panel="ClaimFilter"
         search-data-key="ClaimList"
-        search-url="Claims/filter"
-        searchbar-label="Search claim"
-        searchbar-info="You can search by claim id or customer name"
         :filter="filter"
+        :searchbar-props="{
+            url: 'Claims/filter',
+            label: 'Search claim',
+            info: 'You can search by claim id or customer name',
+        }"
     />
 </template>

src/pages/Customer/Card/CustomerBasicData.vue

@@ -7,14 +7,15 @@ import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnImg from 'src/components/ui/VnImg.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnAvatar from 'src/components/ui/VnAvatar.vue';
 
 const route = useRoute();
 const { t } = useI18n();
 
 const businessTypes = ref([]);
 const contactChannels = ref([]);
+const title = ref();
 </script>
 <template>
     <FetchData
@@ -95,16 +96,15 @@ const contactChannels = ref([]);
                     :label="t('customer.basicData.salesPerson')"
                     :rules="validate('client.salesPersonFk')"
                     :use-like="false"
+                    :emit-value="false"
+                    @update:model-value="(val) => (title = val?.nickname)"
                 >
                     <template #prepend>
-                        <QAvatar color="orange">
+                        <VnAvatar
-                            <VnImg
+                            :worker-id="data.salesPersonFk"
-                                v-if="data.salesPersonFk"
+                            color="primary"
-                                :id="data.salesPersonFk"
+                            :title="title"
-                                collection="user"
-                                spinner-color="white"
                         />
-                        </QAvatar>
                     </template>
                 </VnSelect>
                 <QSelect

src/pages/Customer/Card/CustomerCard.vue

@@ -10,8 +10,10 @@ import CustomerFilter from '../CustomerFilter.vue';
         :descriptor="CustomerDescriptor"
         :filter-panel="CustomerFilter"
         search-data-key="CustomerList"
-        search-url="Clients/extendedListFilter"
+        :searchbar-props="{
-        searchbar-label="Search customer"
+            url: 'Clients/extendedListFilter',
-        searchbar-info="You can search by customer id or name"
+            label: 'Search customer',
+            info: 'You can search by customer id or name',
+        }"
     />
 </template>

src/pages/Customer/Card/CustomerDescriptor.vue

@@ -139,7 +139,7 @@ const setData = (entity) => (data.value = useCardDescription(entity?.name, entit
                 <QBtn
                     :to="{
                         name: 'TicketList',
-                        query: { params: JSON.stringify({ clientFk: entity.id }) },
+                        query: { table: JSON.stringify({ clientFk: entity.id }) },
                     }"
                     size="md"
                     icon="vn:ticket"
@@ -150,7 +150,7 @@ const setData = (entity) => (data.value = useCardDescription(entity?.name, entit
                 <QBtn
                     :to="{
                         name: 'InvoiceOutList',
-                        query: { params: JSON.stringify({ clientFk: entity.id }) },
+                        query: { table: JSON.stringify({ clientFk: entity.id }) },
                     }"
                     size="md"
                     icon="vn:invoice-out"
@@ -161,7 +161,7 @@ const setData = (entity) => (data.value = useCardDescription(entity?.name, entit
                 <QBtn
                     :to="{
                         name: 'OrderCreate',
-                        query: { clientFk: entity.id },
+                        query: { clientId: entity.id },
                     }"
                     size="md"
                     icon="vn:basketadd"
@@ -169,8 +169,19 @@ const setData = (entity) => (data.value = useCardDescription(entity?.name, entit
                 >
                     <QTooltip>{{ t('New order') }}</QTooltip>
                 </QBtn>
-                <QBtn size="md" icon="face" color="primary">
+                <QBtn
-                    <!-- TODO:: Redirigir a la vista de usuario cuando exista -->
+                    :to="{
+                        name: 'AccountList',
+                        query: {
+                            table: JSON.stringify({
+                                filter: { where: { id: entity.id } },
+                            }),
+                        },
+                    }"
+                    size="md"
+                    icon="face"
+                    color="primary"
+                >
                     <QTooltip>{{ t('Go to user') }}</QTooltip>
                 </QBtn>
             </QCardActions>

src/pages/Customer/Payments/CustomerPaymentsFilter.vue

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

src/pages/Entry/Card/EntryCard.vue

@@ -10,8 +10,10 @@ import EntryFilter from '../EntryFilter.vue';
         :descriptor="EntryDescriptor"
         :filter-panel="EntryFilter"
         search-data-key="EntryList"
-        search-url="Entries/filter"
+        :searchbar-props="{
-        searchbar-label="Search entries"
+            url: 'Entries/filter',
-        searchbar-info="You can search by entry reference"
+            label: 'Search entries',
+            info: 'You can search by entry reference',
+        }"
     />
 </template>

src/pages/InvoiceIn/Card/InvoiceInDescriptor.vue

@@ -130,8 +130,6 @@ onBeforeMount(async () => {
 });
 
 onBeforeRouteUpdate(async (to, from) => {
-    invoiceInCorrection.correcting.length = 0;
-    invoiceInCorrection.corrected = null;
     if (to.params.id !== from.params.id) {
         await setInvoiceCorrection(to.params.id);
         const { data } = await axios.get(`InvoiceIns/${to.params.id}/getTotals`);
@@ -140,6 +138,8 @@ onBeforeRouteUpdate(async (to, from) => {
 });
 
 async function setInvoiceCorrection(id) {
+    invoiceInCorrection.correcting.length = 0;
+    invoiceInCorrection.corrected = null;
     const { data: correctingData } = await axios.get('InvoiceInCorrections', {
         params: { filter: { where: { correctingFk: id } } },
     });
@@ -198,7 +198,6 @@ async function cloneInvoice() {
 const isAdministrative = () => hasAny(['administrative']);
 
 const isAgricultural = () => {
-    console.error(config);
     if (!config.value) return false;
     return (
         invoiceIn.value?.supplier?.sageFarmerWithholdingFk ===

src/pages/InvoiceIn/Card/InvoiceInDueDay.vue

@@ -8,9 +8,10 @@ import { useArrayData } from 'src/composables/useArrayData';
 import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnCurrency from 'src/components/common/VnCurrency.vue';
 import { toCurrency } from 'src/filters';
 import useNotify from 'src/composables/useNotify.js';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 
 const route = useRoute();
 const { notify } = useNotify();
@@ -22,9 +23,6 @@ const rowsSelected = ref([]);
 const banks = ref([]);
 const invoiceInFormRef = ref();
 const invoiceId = +route.params.id;
-
-const placeholder = 'yyyy/mm/dd';
-
 const filter = { where: { invoiceInFk: invoiceId } };
 
 const columns = computed(() => [
@@ -104,42 +102,7 @@ const getTotalAmount = (rows) => rows.reduce((acc, { amount }) => acc + +amount,
             >
                 <template #body-cell-duedate="{ row }">
                     <QTd>
-                        <QInput
+                        <VnInputDate v-model="row.dueDated" />
-                            v-model="row.dueDated"
-                            mask="date"
-                            :placeholder="placeholder"
-                            clearable
-                            clear-icon="close"
-                        >
-                            <template #append>
-                                <QIcon name="event" class="cursor-pointer">
-                                    <QPopupProxy
-                                        cover
-                                        transition-show="scale"
-                                        transition-hide="scale"
-                                    >
-                                        <QDate v-model="row.dueDated" landscape>
-                                            <div
-                                                class="row items-center justify-end q-gutter-sm"
-                                            >
-                                                <QBtn
-                                                    :label="t('globals.cancel')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                                <QBtn
-                                                    :label="t('globals.confirm')"
-                                                    color="primary"
-                                                    flat
-                                                    v-close-popup
-                                                />
-                                            </div>
-                                        </QDate>
-                                    </QPopupProxy>
-                                </QIcon>
-                            </template>
-                        </QInput>
                     </QTd>
                 </template>
                 <template #body-cell-bank="{ row, col }">
@@ -164,7 +127,7 @@ const getTotalAmount = (rows) => rows.reduce((acc, { amount }) => acc + +amount,
                 </template>
                 <template #body-cell-amount="{ row }">
                     <QTd>
-                        <VnCurrency
+                        <VnInputNumber
                             v-model="row.amount"
                             :is-outlined="false"
                             clearable
@@ -174,7 +137,7 @@ const getTotalAmount = (rows) => rows.reduce((acc, { amount }) => acc + +amount,
                 </template>
                 <template #body-cell-foreignvalue="{ row }">
                     <QTd>
-                        <QInput
+                        <VnInputNumber
                             :class="{
                                 'no-pointer-events': !isNotEuro(invoiceIn.currency.code),
                             }"
@@ -207,51 +170,11 @@ const getTotalAmount = (rows) => rows.reduce((acc, { amount }) => acc + +amount,
                             <QSeparator />
                             <QList>
                                 <QItem>
-                                    <QInput
+                                    <VnInputDate
                                         class="full-width"
                                         :label="t('Date')"
                                         v-model="props.row.dueDated"
-                                        mask="date"
-                                        :placeholder="placeholder"
-                                        clearable
-                                        clear-icon="close"
-                                    >
-                                        <template #append>
-                                            <QIcon name="event" class="cursor-pointer">
-                                                <QPopupProxy
-                                                    cover
-                                                    transition-show="scale"
-                                                    transition-hide="scale"
-                                                >
-                                                    <QDate
-                                                        v-model="props.row.dueDated"
-                                                        landscape
-                                                    >
-                                                        <div
-                                                            class="row items-center justify-end q-gutter-sm"
-                                                        >
-                                                            <QBtn
-                                                                :label="
-                                                                    t('globals.cancel')
-                                                                "
-                                                                color="primary"
-                                                                flat
-                                                                v-close-popup
                                     />
-                                                            <QBtn
-                                                                :label="
-                                                                    t('globals.confirm')
-                                                                "
-                                                                color="primary"
-                                                                flat
-                                                                v-close-popup
-                                                            />
-                                                        </div>
-                                                    </QDate>
-                                                </QPopupProxy>
-                                            </QIcon>
-                                        </template>
-                                    </QInput>
                                 </QItem>
                                 <QItem>
                                     <VnSelect
@@ -274,16 +197,14 @@ const getTotalAmount = (rows) => rows.reduce((acc, { amount }) => acc + +amount,
                                     </VnSelect>
                                 </QItem>
                                 <QItem>
-                                    <QInput
+                                    <VnInputNumber
                                         :label="t('Amount')"
                                         class="full-width"
                                         v-model="props.row.amount"
-                                        clearable
-                                        clear-icon="close"
                                     />
                                 </QItem>
                                 <QItem>
-                                    <QInput
+                                    <VnInputNumber
                                         :label="t('Foreign value')"
                                         class="full-width"
                                         :class="{

src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue

@@ -7,6 +7,7 @@ import CrudModel from 'src/components/CrudModel.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import { useArrayData } from 'src/composables/useArrayData';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 
 const { t } = useI18n();
 
@@ -115,11 +116,7 @@ const formatOpt = (row, { model, options }, prop) => {
                 >
                     <template #body-cell="{ row, col }">
                         <QTd>
-                            <QInput
+                            <VnInputNumber v-model="row[col.name]" />
-                                v-model="row[col.name]"
-                                clearable
-                                clear-icon="close"
-                            />
                         </QTd>
                     </template>
                     <template #body-cell-code="{ row, col }">
@@ -203,7 +200,7 @@ const formatOpt = (row, { model, options }, prop) => {
                                         ]"
                                         :key="index"
                                     >
-                                        <QInput
+                                        <VnInputNumber
                                             :label="t(value)"
                                             class="full-width"
                                             v-model="props.row[value]"

src/pages/InvoiceIn/Card/InvoiceInSummary.vue

@@ -120,7 +120,6 @@ const intrastatColumns = ref([
         },
         sortable: true,
         align: 'left',
-        style: 'width: 10px',
     },
     {
         name: 'amount',
@@ -128,7 +127,6 @@ const intrastatColumns = ref([
         field: (row) => toCurrency(row.amount, currency.value),
         sortable: true,
         align: 'left',
-        style: 'width: 10px',
     },
     {
         name: 'net',
@@ -415,6 +413,11 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
                             </QTh>
                         </QTr>
                     </template>
+                    <template #body-cell-code="{ value: codeCell }">
+                        <QTd :title="codeCell" shrink>
+                            {{ codeCell }}
+                        </QTd>
+                    </template>
                     <template #bottom-row>
                         <QTr class="bg">
                             <QTd></QTd>

src/pages/InvoiceIn/Card/InvoiceInVat.vue

@@ -9,7 +9,8 @@ import { toCurrency } from 'src/filters';
 import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import CrudModel from 'src/components/CrudModel.vue';
-import VnCurrency from 'src/components/common/VnCurrency.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
@@ -205,7 +206,7 @@ const formatOpt = (row, { model, options }, prop) => {
                 :grid="$q.screen.lt.sm"
             >
                 <template #body-cell-expense="{ row, col }">
-                    <QTd auto-width>
+                    <QTd>
                         <VnSelect
                             v-model="row[col.model]"
                             :options="col.options"
@@ -223,6 +224,7 @@ const formatOpt = (row, { model, options }, prop) => {
                                     name="close"
                                     @click.stop="value = null"
                                     class="cursor-pointer"
+                                    size="xs"
                                 />
                                 <QIcon
                                     @click.stop.prevent="newExpenseRef.show()"
@@ -240,7 +242,7 @@ const formatOpt = (row, { model, options }, prop) => {
                 </template>
                 <template #body-cell-taxablebase="{ row }">
                     <QTd>
-                        <VnCurrency
+                        <VnInputNumber
                             :class="{
                                 'no-pointer-events': isNotEuro(invoiceIn.currency.code),
                             }"
@@ -308,7 +310,7 @@ const formatOpt = (row, { model, options }, prop) => {
                 </template>
                 <template #body-cell-foreignvalue="{ row }">
                     <QTd>
-                        <QInput
+                        <VnInputNumber
                             :class="{
                                 'no-pointer-events': !isNotEuro(invoiceIn.currency.code),
                             }"
@@ -356,7 +358,7 @@ const formatOpt = (row, { model, options }, prop) => {
                                     </VnSelect>
                                 </QItem>
                                 <QItem>
-                                    <VnCurrency
+                                    <VnInputNumber
                                         :label="t('Taxable base')"
                                         :class="{
                                             'no-pointer-events': isNotEuro(
@@ -421,7 +423,7 @@ const formatOpt = (row, { model, options }, prop) => {
                                     {{ toCurrency(taxRate(props.row), currency) }}
                                 </QItem>
                                 <QItem>
-                                    <QInput
+                                    <VnInputNumber
                                         :label="t('Foreign value')"
                                         class="full-width"
                                         :class="{
@@ -453,7 +455,11 @@ const formatOpt = (row, { model, options }, prop) => {
             </QCardSection>
             <QCardSection class="q-pt-none">
                 <QItem>
-                    <QInput :label="`${t('Code')}*`" v-model="newExpense.code" />
+                    <VnInput
+                        :label="`${t('Code')}*`"
+                        v-model="newExpense.code"
+                        :required="true"
+                    />
                     <QCheckbox
                         dense
                         size="sm"
@@ -462,7 +468,7 @@ const formatOpt = (row, { model, options }, prop) => {
                     />
                 </QItem>
                 <QItem>
-                    <QInput
+                    <VnInput
                         :label="`${t('Descripction')}*`"
                         v-model="newExpense.description"
                     />

src/pages/InvoiceIn/InvoiceInCreate.vue

@@ -26,8 +26,7 @@ const newInvoiceIn = reactive({
     companyFk: user.value.companyFk || null,
     issued: Date.vnNew(),
 });
-const suppliersOptions = ref([]);
+const companies = ref([]);
-const companiesOptions = ref([]);
 
 const redirectToInvoiceInBasicData = (__, { id }) => {
     router.push({ name: 'InvoiceInBasicData', params: { id } });
@@ -35,19 +34,12 @@ const redirectToInvoiceInBasicData = (__, { id }) => {
 </script>
 
 <template>
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname'] }"
-        order="nickname"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
     <FetchData
         ref="companiesRef"
         url="Companies"
         :filter="{ fields: ['id', 'code'] }"
         order="code"
-        @on-fetch="(data) => (companiesOptions = data)"
+        @on-fetch="(data) => (companies = data)"
         auto-load
     />
     <template v-if="stateStore.isHeaderMounted()">
@@ -69,9 +61,10 @@ const redirectToInvoiceInBasicData = (__, { id }) => {
             <template #form="{ data, validate }">
                 <VnRow>
                     <VnSelect
+                        url="Suppliers"
+                        :fields="['id', 'nickname']"
                         :label="t('Supplier')"
                         v-model="data.supplierFk"
-                        :options="suppliersOptions"
                         option-value="id"
                         option-label="nickname"
                         hide-selected
@@ -98,7 +91,7 @@ const redirectToInvoiceInBasicData = (__, { id }) => {
                     <VnSelect
                         :label="t('Company')"
                         v-model="data.companyFk"
-                        :options="companiesOptions"
+                        :options="companies"
                         option-value="id"
                         option-label="code"
                         map-options

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -6,8 +6,8 @@ import VnSelect from 'components/common/VnSelect.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import VnCurrency from 'src/components/common/VnCurrency.vue';
 import FetchData from 'components/FetchData.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
 
 const { t } = useI18n();
 defineProps({ dataKey: { type: String, required: true } });
@@ -28,6 +28,22 @@ const activities = ref([]);
             </div>
         </template>
         <template #body="{ params, searchFn }">
+            <QItem>
+                <QItemSection>
+                    <VnSelect
+                        v-model="params.supplierFk"
+                        url="Suppliers"
+                        :fields="['id', 'nickname']"
+                        :label="t('params.supplierFk')"
+                        option-value="id"
+                        option-label="nickname"
+                        dense
+                        outlined
+                        rounded
+                        :filter-options="['id', 'name']"
+                    />
+                </QItemSection>
+            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -50,17 +66,30 @@ const activities = ref([]);
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
+                    <VnInput
-                        v-model="params.supplierFk"
+                        :label="t('params.serialNumber')"
-                        url="Suppliers"
+                        v-model="params.serialNumber"
-                        :fields="['id', 'nickname']"
+                        is-outlined
-                        :label="t('params.supplierFk')"
+                        lazy-rules
-                        option-value="id"
+                    />
-                        option-label="nickname"
+                </QItemSection>
-                        dense
+            </QItem>
-                        outlined
+            <QItem>
-                        rounded
+                <QItemSection>
-                        :filter-options="['id', 'name']"
+                    <VnInput
+                        :label="t('params.serial')"
+                        v-model="params.serial"
+                        is-outlined
+                        lazy-rules
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('Issued')"
+                        v-model="params.issued"
+                        is-outlined
                     />
                 </QItemSection>
             </QItem>
@@ -76,39 +105,20 @@ const activities = ref([]);
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnCurrency v-model="params.amount" is-outlined />
+                    <VnInput
-                </QItemSection>
+                        :label="t('params.awb')"
-            </QItem>
+                        v-model="params.awbCode"
-            <QItem>
-                <QItemSection>
-                    <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        :label="t('Issued')"
-                        v-model="params.issued"
                         is-outlined
+                        lazy-rules
                     />
                 </QItemSection>
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnSelect
+                    <VnInputNumber
-                        :label="t('params.supplierActivityFk')"
+                        :label="t('Amount')"
-                        v-model="params.supplierActivityFk"
+                        v-model="params.amount"
-                        dense
+                        is-outlined
-                        outlined
-                        rounded
-                        option-value="code"
-                        option-label="name"
-                        :options="activities"
                     />
                 </QItemSection>
             </QItem>
@@ -133,32 +143,16 @@ const activities = ref([]);
             <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
                     <QItemSection>
-                        <VnInput
+                        <VnInputDate
-                            :label="t('params.serialNumber')"
+                            :label="t('From')"
-                            v-model="params.serialNumber"
+                            v-model="params.from"
                             is-outlined
-                            lazy-rules
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInput
+                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                            :label="t('params.serial')"
-                            v-model="params.serial"
-                            is-outlined
-                            lazy-rules
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInput
-                            :label="t('params.awb')"
-                            v-model="params.awbCode"
-                            is-outlined
-                            lazy-rules
-                        />
                     </QItemSection>
                 </QItem>
             </QExpansionItem>

src/pages/InvoiceIn/InvoiceInList.vue

@@ -1,18 +1,19 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDate, toCurrency } from 'src/filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
 import InvoiceInFilter from './InvoiceInFilter.vue';
 import InvoiceInSummary from './Card/InvoiceInSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import InvoiceInSearchbar from 'src/pages/InvoiceIn/InvoiceInSearchbar.vue';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
 
 const stateStore = useStateStore();
 const { viewSummary } = useSummaryDialog();
@@ -20,8 +21,91 @@ const { t } = useI18n();
 
 onMounted(async () => (stateStore.rightDrawer = true));
 onUnmounted(() => (stateStore.rightDrawer = false));
-</script>
 
+const tableRef = ref();
+const cols = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: 'Id',
+    },
+    {
+        align: 'left',
+        name: 'supplierFk',
+        label: t('invoiceIn.list.supplier'),
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Suppliers',
+                fields: ['id', 'name'],
+            },
+        },
+        columnClass: 'expand',
+    },
+    {
+        align: 'left',
+        name: 'supplierRef',
+        label: t('invoiceIn.list.supplierRef'),
+    },
+
+    {
+        align: 'left',
+        name: 'serialNumber',
+        label: t('invoiceIn.list.serialNumber'),
+    },
+    {
+        align: 'left',
+        name: 'serial',
+        label: t('invoiceIn.list.serial'),
+    },
+    {
+        align: 'left',
+        label: t('invoiceIn.list.issued'),
+        name: 'issued',
+        component: null,
+        columnFilter: {
+            component: 'date',
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.issued)),
+    },
+    {
+        align: 'left',
+        name: 'isBooked',
+        label: t('invoiceIn.list.isBooked'),
+        columnFilter: false,
+    },
+    {
+        align: 'left',
+        name: 'awbCode',
+        label: t('invoiceIn.list.awb'),
+    },
+    {
+        align: 'left',
+        name: 'amount',
+        label: t('invoiceIn.list.amount'),
+        format: ({ amount }) => toCurrency(amount),
+    },
+    {
+        align: 'right',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('components.smartCard.openSummary'),
+                icon: 'preview',
+                type: 'submit',
+                action: (row) => viewSummary(row.id, InvoiceInSummary),
+            },
+            {
+                title: t('globals.download'),
+                icon: 'download',
+                type: 'submit',
+                isPrimary: true,
+                action: (row) => downloadFile(row.dmsFk),
+            },
+        ],
+    },
+]);
+</script>
 <template>
     <InvoiceInSearchbar />
     <RightMenu>
@@ -29,92 +113,63 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <InvoiceInFilter data-key="InvoiceInList" />
         </template>
     </RightMenu>
-    <QPage class="column items-center q-pa-md">
+    <VnTable
-        <div class="vn-card-list">
+        ref="tableRef"
-            <VnPaginate
         data-key="InvoiceInList"
         url="InvoiceIns/filter"
-                order="issued DESC, id DESC"
+        :order="['issued DESC', 'id DESC']"
-                auto-load
+        :create="{
+            urlCreate: 'InvoiceIns',
+            title: t('globals.createInvoiceIn'),
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {},
+        }"
+        redirect="invoice-in"
+        :columns="cols"
+        :right-search="false"
+        :disable-option="{ card: true }"
+        :auto-load="!!$route.query.params"
     >
-                <template #body="{ rows }">
+        <template #column-supplierFk="{ row }">
-                    <CardList
+            <span class="link" @click.stop>
-                        v-for="(row, index) of rows"
-                        :key="index"
-                        :title="row.supplierRef"
-                        @click="$router.push({ path: `/invoice-in/${row.id}` })"
-                        :id="row.id"
-                    >
-                        <template #list-items>
-                            <VnLv
-                                :label="t('invoiceIn.list.supplierRef')"
-                                :value="row.supplierRef"
-                            />
-                            <VnLv
-                                :label="t('invoiceIn.list.supplier')"
-                                :value="row.supplierName"
-                                @click.stop
-                            >
-                                <template #value>
-                                    <span class="link">
                 {{ row.supplierName }}
                 <SupplierDescriptorProxy :id="row.supplierFk" />
             </span>
         </template>
-                            </VnLv>
+        <template #more-create-dialog="{ data }">
-                            <VnLv
+            <VnSelect
-                                :label="t('invoiceIn.list.serialNumber')"
+                v-model="data.supplierFk"
-                                :value="row.serialNumber"
+                url="Suppliers"
-                            />
+                :fields="['id', 'nickname']"
-                            <VnLv
+                :label="t('Supplier')"
-                                :label="t('invoiceIn.list.serial')"
+                option-value="id"
-                                :value="row.serial"
+                option-label="nickname"
-                            />
+                :filter-options="['id', 'name']"
-                            <VnLv
+                :required="true"
-                                :label="t('invoiceIn.list.issued')"
+            >
-                                :value="toDate(row.issued)"
+                <template #option="scope">
-                            />
+                    <QItem v-bind="scope.itemProps">
-                            <VnLv :label="t('invoiceIn.list.awb')" :value="row.awbCode" />
+                        <QItemSection>
-                            <VnLv
+                            <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                :label="t('invoiceIn.list.amount')"
+                            <QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
-                                :value="toCurrency(row.amount)"
+                        </QItemSection>
-                            />
+                    </QItem>
-                            <VnLv
-                                :label="t('invoiceIn.list.isBooked')"
-                                :value="!!row.isBooked"
-                            />
                 </template>
-                        <template #actions>
+            </VnSelect>
-                            <QBtn
+            <VnInput
-                                :label="t('components.smartCard.openCard')"
+                :label="t('invoiceIn.summary.supplierRef')"
-                                @click.stop="
+                v-model="data.supplierRef"
-                                    $router.push({ path: `/invoice-in/${row.id}` })
-                                "
-                                outline
-                                type="reset"
             />
-
+            <VnSelect
-                            <QBtn
+                url="Companies"
-                                :label="t('components.smartCard.openSummary')"
+                :label="t('Company')"
-                                @click.stop="viewSummary(row.id, InvoiceInSummary)"
+                :fields="['id', 'code']"
-                                color="primary"
+                v-model="data.companyFk"
-                                type="submit"
+                option-value="id"
-                                class="q-mt-sm"
+                option-label="code"
-                            />
+                :required="true"
-                            <QBtn
-                                :label="t('globals.download')"
-                                class="q-mt-sm"
-                                @click.stop="downloadFile(row.dmsFk)"
-                                type="submit"
-                                color="primary"
             />
+            <VnInputDate :label="t('invoiceIn.summary.issued')" v-model="data.issued" />
         </template>
-                    </CardList>
+    </VnTable>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-    <QPageSticky position="bottom-right" :offset="[20, 20]">
-        <QBtn color="primary" icon="add" size="lg" round :href="`/#/invoice-in/create`" />
-    </QPageSticky>
 </template>

src/pages/InvoiceOut/Card/InvoiceOutCard.vue

@@ -10,8 +10,10 @@ import InvoiceOutFilter from '../InvoiceOutFilter.vue';
         :descriptor="InvoiceOutDescriptor"
         :filter-panel="InvoiceOutFilter"
         search-data-key="InvoiceOutList"
-        search-url="InvoiceOuts/filter"
+        :searchbar-props="{
-        searchbar-label="Search invoice"
+            url: 'InvoiceOuts/filter',
-        searchbar-info="You can search by invoice reference"
+            label: 'Search invoice',
+            info: 'You can search by invoice reference',
+        }"
     />
 </template>

src/pages/InvoiceOut/InvoiceOutFilter.vue

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

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -64,7 +64,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'clientSocialName',
+        name: 'clientFk',
         label: t('invoiceOutModule.customer'),
         cardVisible: true,
         component: 'select',
@@ -215,7 +215,7 @@ watchEffect(selectedRows);
             selection: 'multiple',
         }"
     >
-        <template #column-clientSocialName="{ row }">
+        <template #column-clientFk="{ row }">
             <span class="link" @click.stop>
                 {{ row.clientSocialName }}
                 <CustomerDescriptorProxy :id="row.clientFk" />

src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue

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

src/pages/Item/Card/ItemBasicData.vue

@@ -36,15 +36,6 @@ const onIntrastatCreated = (response, formData) => {
         @on-fetch="(data) => (itemTypesOptions = data)"
         auto-load
     />
-    <FetchData
-        url="Items/withName"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'id DESC',
-        }"
-        @on-fetch="(data) => (itemsWithNameOptions = data)"
-        auto-load
-    />
     <FetchData
         url="Intrastats"
         :filter="{
@@ -73,7 +64,7 @@ const onIntrastatCreated = (response, formData) => {
         <template #form="{ data }">
             <VnRow>
                 <VnSelect
-                    :label="t('basicData.type')"
+                    :label="t('itemBasicData.type')"
                     v-model="data.typeFk"
                     :options="itemTypesOptions"
                     option-value="id"
@@ -92,19 +83,21 @@ const onIntrastatCreated = (response, formData) => {
                         </QItem>
                     </template>
                 </VnSelect>
-                <VnInput :label="t('basicData.reference')" v-model="data.comment" />
+                <VnInput :label="t('itemBasicData.reference')" v-model="data.comment" />
-                <VnInput :label="t('basicData.relevancy')" v-model="data.relevancy" />
+                <VnInput :label="t('itemBasicData.relevancy')" v-model="data.relevancy" />
             </VnRow>
             <VnRow>
-                <VnInput :label="t('basicData.stems')" v-model="data.stems" />
+                <VnInput :label="t('itemBasicData.stems')" v-model="data.stems" />
                 <VnInput
-                    :label="t('basicData.multiplier')"
+                    :label="t('itemBasicData.multiplier')"
                     v-model="data.stemMultiplier"
                 />
                 <VnSelectDialog
-                    :label="t('basicData.generic')"
+                    :label="t('itemBasicData.generic')"
                     v-model="data.genericFk"
-                    :options="itemsWithNameOptions"
+                    url="Items/withName"
+                    :fields="['id', 'name']"
+                    sort-by="id DESC"
                     option-value="id"
                     option-label="name"
                     map-options
@@ -129,7 +122,7 @@ const onIntrastatCreated = (response, formData) => {
             </VnRow>
             <VnRow>
                 <VnSelectDialog
-                    :label="t('basicData.intrastat')"
+                    :label="t('itemBasicData.intrastat')"
                     v-model="data.intrastatFk"
                     :options="intrastatsOptions"
                     option-value="id"
@@ -156,7 +149,7 @@ const onIntrastatCreated = (response, formData) => {
                 </VnSelectDialog>
                 <div class="col">
                     <VnSelect
-                        :label="t('basicData.expense')"
+                        :label="t('itemBasicData.expense')"
                         v-model="data.expenseFk"
                         :options="expensesOptions"
                         option-value="id"
@@ -168,61 +161,64 @@ const onIntrastatCreated = (response, formData) => {
             </VnRow>
             <VnRow>
                 <VnInput
-                    :label="t('basicData.weightByPiece')"
+                    :label="t('itemBasicData.weightByPiece')"
                     v-model.number="data.weightByPiece"
                     :min="0"
                     type="number"
                 />
                 <VnInput
-                    :label="t('basicData.boxUnits')"
+                    :label="t('itemBasicData.boxUnits')"
                     v-model.number="data.packingOut"
                     :min="0"
                     type="number"
                 />
                 <VnInput
-                    :label="t('basicData.recycledPlastic')"
+                    :label="t('itemBasicData.recycledPlastic')"
                     v-model.number="data.recycledPlastic"
                     :min="0"
                     type="number"
                 />
                 <VnInput
-                    :label="t('basicData.nonRecycledPlastic')"
+                    :label="t('itemBasicData.nonRecycledPlastic')"
                     v-model.number="data.nonRecycledPlastic"
                     :min="0"
                     type="number"
                 />
             </VnRow>
             <VnRow>
-                <QCheckbox v-model="data.isActive" :label="t('basicData.isActive')" />
+                <QCheckbox v-model="data.isActive" :label="t('itemBasicData.isActive')" />
-                <QCheckbox v-model="data.hasKgPrice" :label="t('basicData.hasKgPrice')" />
+                <QCheckbox
+                    v-model="data.hasKgPrice"
+                    :label="t('itemBasicData.hasKgPrice')"
+                />
                 <div>
                     <QCheckbox
                         v-model="data.isFragile"
-                        :label="t('basicData.isFragile')"
+                        :label="t('itemBasicData.isFragile')"
                         class="q-mr-sm"
                     />
                     <QIcon name="info" class="cursor-pointer" size="xs">
                         <QTooltip max-width="300px">
-                            {{ t('basicData.isFragileTooltip') }}
+                            {{ t('itemBasicData.isFragileTooltip') }}
                         </QTooltip>
                     </QIcon>
                 </div>
                 <div>
                     <QCheckbox
                         v-model="data.isPhotoRequested"
-                        :label="t('basicData.isPhotoRequested')"
+                        :label="t('itemBasicData.isPhotoRequested')"
                         class="q-mr-sm"
                     />
                     <QIcon name="info" class="cursor-pointer" size="xs">
                         <QTooltip>
-                            {{ t('basicData.isPhotoRequestedTooltip') }}
+                            {{ t('itemBasicData.isPhotoRequestedTooltip') }}
                         </QTooltip>
                     </QIcon>
                 </div>
             </VnRow>
             <VnRow>
                 <VnInput
-                    :label="t('basicData.description')"
+                    :label="t('itemBasicData.description')"
                     type="textarea"
                     v-model="data.description"
                     fill-input

src/pages/Item/Card/ItemCard.vue

@@ -10,8 +10,10 @@ import ItemListFilter from '../ItemListFilter.vue';
         :descriptor="ItemDescriptor"
         :filter-panel="ItemListFilter"
         search-data-key="ItemList"
-        search-url="Items/filter"
+        :searchbar-props="{
-        searchbar-label="searchbar.label"
+            url: 'Items/filter',
-        searchbar-info="searchbar.info"
+            label: 'searchbar.labelr',
+            info: 'searchbar.info',
+        }"
     />
 </template>

src/pages/Item/Card/ItemDescriptor.vue

@@ -112,7 +112,7 @@ const openCloneDialog = async () => {
         .dialog({
             component: VnConfirm,
             componentProps: {
-                title: t("All it's properties will be copied"),
+                title: t('All its properties will be copied'),
                 message: t('Do you want to clone this item?'),
             },
         })
@@ -215,7 +215,7 @@ const openCloneDialog = async () => {
 <i18n>
 es:
     Regularize stock: Regularizar stock
-    All it's properties will be copied: Todas sus propiedades serán copiadas
+    All its properties will be copied: Todas sus propiedades serán copiadas
     Do you want to clone this item?: ¿Desea clonar este artículo?
 </i18n>
 

src/pages/Item/Card/ItemDescriptorImage.vue

@@ -64,7 +64,7 @@ const handlePhotoUpdated = (evt = false) => {
 
 <template>
     <div class="relative-position">
-        <VnImg ref="image" :id="$props.entityId" @refresh="handlePhotoUpdated(true)">
+        <VnImg ref="image" :id="$props.entityId" zoom-resolution="1600x900">
             <template #error>
                 <div class="absolute-full picture text-center q-pa-md flex flex-center">
                     <div>

src/pages/Item/Card/ItemLastEntries.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, onUnmounted, reactive, ref } from 'vue';
+import { onMounted, computed, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { dateRange } from 'src/filters';
@@ -11,6 +11,7 @@ import { toDateTimeFormat } from 'src/filters/date.js';
 import { dashIfEmpty } from 'src/filters';
 import { toCurrency } from 'filters/index';
 import { useArrayData } from 'composables/useArrayData';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -35,26 +36,8 @@ const exprBuilder = (param, value) => {
     }
 };
 
-const datedRange = reactive({
+const from = ref();
-    from: null,
+const to = ref();
-    to: null,
-});
-
-const from = computed({
-    get: () => datedRange.from,
-    set: (val) => {
-        updateFrom(val);
-        updateFilter();
-    },
-});
-
-const to = computed({
-    get: () => datedRange.to,
-    set: (val) => {
-        updateTo(val);
-        updateFilter();
-    },
-});
 
 const arrayData = useArrayData('ItemLastEntries', {
     url: 'Items/lastEntriesFilter',
@@ -162,41 +145,48 @@ const fetchItemLastEntries = async () => {
     itemLastEntries.value = data;
 };
 
-const updateFrom = async (date) => {
+const getDate = (date, type) => {
+    if (type == 'from') {
         date.setHours(0, 0, 0, 0);
-    datedRange.from = date.toISOString();
+    } else if (type == 'to') {
-};
+        date.setHours(23, 59, 59, 999);
-
+    }
-const updateTo = async (date) => {
+    return date.toISOString();
-    date.setHours(23, 59, 59, 59);
-    datedRange.to = date.toISOString();
 };
 
 const updateFilter = async () => {
-    arrayData.store.userFilter.where.landed = {
+    let filter;
-        between: [datedRange.from, datedRange.to],
+    if (!from.value && to.value) filter = { lte: to.value };
-    };
+    else if (from.value && !to.value) filter = { gte: from.value };
+    else if (from.value && to.value) filter = { between: [from.value, to.value] };
+
+    arrayData.store.userFilter.where.landed = filter;
     await fetchItemLastEntries();
 };
 
 onMounted(async () => {
     const _from = Date.vnNew();
     _from.setDate(_from.getDate() - 75);
-    updateFrom(_from);
+    from.value = getDate(_from, 'from');
-
     const _to = Date.vnNew();
     _to.setDate(_to.getDate() + 10);
-    updateTo(_to);
+    to.value = getDate(Date.vnNew(), 'to');
 
     updateFilter();
+
+    watch([from, to], ([nFrom, nTo], [oFrom, oTo]) => {
+        if (nFrom && nFrom != oFrom) nFrom = getDate(new Date(nFrom), 'from');
+        if (nTo && nTo != oTo) nTo = getDate(new Date(nTo), 'to');
+        updateFilter();
+    });
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <QToolbar class="justify-end">
+    <VnSubToolbar>
-        <div id="st-data" class="row">
+        <template #st-data>
             <VnInputDate
                 :label="t('lastEntries.since')"
                 dense
@@ -204,11 +194,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 class="q-mr-lg"
             />
             <VnInputDate :label="t('lastEntries.to')" dense v-model="to" />
-        </div>
+        </template>
-        <QSpace />
+    </VnSubToolbar>
-        <div id="st-actions"></div>
+    <QPage class="column items-center q-pa-xd">
-    </QToolbar>
-    <QPage class="column items-center q-pa-md">
         <QTable
             :rows="itemLastEntries"
             :columns="columns"

src/pages/Item/Card/ItemTags.vue

@@ -42,9 +42,10 @@ const onItemTagsFetched = async (itemTags) => {
     });
 };
 
-const handleTagSelected = (rows, index, tag) => {
+const handleTagSelected = (rows, index, tagId) => {
+    const tag = tagOptions.value.find((t) => t.id === tagId);
     rows[index].tag = tag;
-    rows[index].tagFk = tag.id;
+    rows[index].tagFk = tagId;
     rows[index].value = null;
     getSelectedTagValues(rows[index]);
 };
@@ -94,7 +95,6 @@ const insertTag = (rows) => {
                 :filter="{
                     fields: ['id', 'itemFk', 'tagFk', 'value', 'priority'],
                     where: { itemFk: route.params.id },
-                    order: 'priority ASC',
                     include: {
                         relation: 'tag',
                         scope: {
@@ -102,16 +102,13 @@ const insertTag = (rows) => {
                         },
                     },
                 }"
+                order="priority"
                 auto-load
                 @on-fetch="onItemTagsFetched"
             >
                 <template #body="{ rows, validate }">
-                    <QCard class="q-pl-lg q-py-md">
+                    <QCard class="q-px-lg q-pt-md q-pb-sm">
-                        <VnRow
+                        <VnRow v-for="(row, index) in rows" :key="index">
-                            v-for="(row, index) in rows"
-                            :key="index"
-                            class="row q-gutter-md q-mb-md"
-                        >
                             <VnSelect
                                 :label="t('itemTags.tag')"
                                 :options="tagOptions"
@@ -119,7 +116,7 @@ const insertTag = (rows) => {
                                 option-label="name"
                                 hide-selected
                                 @update:model-value="
-                                    ($event) => handleTagSelected(rows, index, $event)
+                                    (val) => handleTagSelected(rows, index, val)
                                 "
                                 :required="true"
                                 :rules="validate('itemTag.tagFk')"
@@ -146,7 +143,6 @@ const insertTag = (rows) => {
                                 v-model="row.value"
                                 :label="t('itemTags.value')"
                                 :is-clearable="false"
-                                style="width: 100%"
                             />
                             <VnInput
                                 :label="t('itemTags.relevancy')"
@@ -155,7 +151,7 @@ const insertTag = (rows) => {
                                 :required="true"
                                 :rules="validate('itemTag.priority')"
                             />
-                            <div class="col-1 row justify-center items-center">
+                            <div class="row justify-center items-center" style="flex: 0">
                                 <QIcon
                                     @click="itemTagsRef.remove([row])"
                                     class="fill-icon-on-hover"
@@ -169,7 +165,7 @@ const insertTag = (rows) => {
                                 </QIcon>
                             </div>
                         </VnRow>
-                        <VnRow>
+                        <VnRow class="justify-center items-center">
                             <QIcon
                                 @click="insertTag(rows)"
                                 class="cursor-pointer"
@@ -177,6 +173,7 @@ const insertTag = (rows) => {
                                 color="primary"
                                 name="add"
                                 size="sm"
+                                style="flex: 0"
                             >
                                 <QTooltip>
                                     {{ t('itemTags.addTag') }}

src/pages/Item/locale/en.yml

@@ -25,7 +25,7 @@ itemDiary:
     showBefore: Show what's before the inventory
     since: Since
     warehouse: Warehouse
-basicData:
+itemBasicData:
     type: Type
     reference: Reference
     relevancy: Relevancy

src/pages/Item/locale/es.yml

@@ -25,7 +25,7 @@ itemDiary:
     showBefore: Mostrar lo anterior al inventario
     since: Desde
     warehouse: Almacén
-basicData:
+itemBasicData:
     type: Tipo
     reference: Referencia
     relevancy: Relevancia

src/pages/Login/LoginMain.vue

@@ -28,35 +28,10 @@ async function onSubmit() {
     };
     try {
         const { data } = await axios.post('Accounts/login', params);
-
         if (!data) return;
-        const {
-            data: { multimediaToken },
-        } = await axios.get('VnUsers/ShareToken', {
-            headers: { Authorization: data.token },
-        });
 
-        if (!multimediaToken) return;
+        data.keepLogin = keepLogin.value;
-
+        await session.setLogin(data);
-        const login = {
-            ...data,
-            created: Date.now(),
-            tokenMultimedia: multimediaToken.id,
-            keepLogin: keepLogin.value,
-        };
-        await session.login(login);
-
-        quasar.notify({
-            message: t('login.loginSuccess'),
-            type: 'positive',
-        });
-
-        const currentRoute = router.currentRoute.value;
-        if (currentRoute.query && currentRoute.query.redirect) {
-            router.push(currentRoute.query.redirect);
-        } else {
-            router.push({ name: 'Dashboard' });
-        }
     } catch (res) {
         if (res.response?.data?.error?.code === 'REQUIRES_2FA') {
             Notify.create({

src/pages/Login/TwoFactor.vue

@@ -25,21 +25,10 @@ async function onSubmit() {
     try {
         params.code = code.value;
         const { data } = await axios.post('VnUsers/validate-auth', params);
-
         if (!data) return;
 
-        await session.login(data.token, params.keepLogin);
+        data.keepLogin = params.keepLogin;
-        quasar.notify({
+        await session.setLogin(data);
-            message: t('login.loginSuccess'),
-            type: 'positive',
-        });
-
-        const currentRoute = router.currentRoute.value;
-        if (currentRoute.query && currentRoute.query.redirect) {
-            router.push(currentRoute.query.redirect);
-        } else {
-            router.push({ name: 'Dashboard' });
-        }
     } catch (e) {
         quasar.notify({
             message: e.response?.data?.error.message,

src/pages/Parking/Card/ParkingCard.vue

@@ -16,8 +16,10 @@ const filter = {
         :descriptor="ParkingDescriptor"
         :filter-panel="ParkingFilter"
         search-data-key="ParkingList"
-        search-url="Parkings"
+        :searchbar-props="{
-        searchbar-label="parking.searchBar.label"
+            url: 'Parkings',
-        searchbar-info="parking.searchBar.info"
+            label: 'parking.searchBar.label',
+            info: 'parking.searchBar.info',
+        }"
     />
 </template>

src/pages/Route/Agency/Card/AgencyCard.vue

@@ -8,8 +8,10 @@ import VnCard from 'components/common/VnCard.vue';
         base-url="Agencies"
         :descriptor="AgencyDescriptor"
         search-data-key="AgencyList"
-        search-url="Agencies"
+        :searchbar-props="{
-        searchbar-label="agency.searchBar.label"
+            url: 'Agencies',
-        searchbar-info="agency.searchBar.info"
+            label: 'agency.searchBar.label',
+            info: 'agency.searchBar.info',
+        }"
     />
 </template>

src/pages/Route/Card/RouteFilter.vue

@@ -119,6 +119,7 @@ const emit = defineEmits(['search']);
                         sort-by="numberPlate ASC"
                         option-value="id"
                         option-label="numberPlate"
+                        option-filter-value="numberPlate"
                         dense
                         outlined
                         rounded

src/pages/Route/Card/RouteForm.vue

@@ -142,11 +142,6 @@ const onSave = (data, response) => {
                     <QInput
                         v-model.number="data.kmEnd"
                         :label="t('Km End')"
-                        :rules="[
-                            (val) =>
-                                val < maxDistance ||
-                                t('Distance must be lesser than', { maxDistance }),
-                        ]"
                         clearable
                         type="number"
                     />
@@ -194,7 +189,7 @@ es:
     Description: Descripción
     Is served: Se ha servido
     Created: Creado
-    Distance must be lesser than: La distancia debe ser inferior a {maxDistance}
+    The km can not exceed: La distancia debe ser inferior a {maxDistance}
 en:
-    Distance must be lesser than: Distance must be lesser than {maxDistance}
+    The km can not exceed: Distance must be lesser than {maxDistance}
 </i18n>

src/pages/Route/Roadmap/RoadmapCard.vue

@@ -10,8 +10,10 @@ import RoadmapFilter from 'pages/Route/Roadmap/RoadmapFilter.vue';
         :descriptor="RoadmapDescriptor"
         :filter-panel="RoadmapFilter"
         search-data-key="RoadmapList"
-        search-url="Roadmaps"
+        :searchbar-props="{
-        searchbar-label="Search roadmap"
+            url: 'Roadmaps',
-        searchbar-info="You can search by roadmap id or customer name"
+            label: 'Search roadmap',
+            info: 'You can search by roadmap id or customer name',
+        }"
     />
 </template>

src/pages/Route/RouteAutonomous.vue

@@ -214,7 +214,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 @click="openDmsUploadDialog"
             >
                 <QTooltip>
-                    {{ t('Create invoiceIn') }}
+                    {{ t('globals.createInvoiceIn') }}
                 </QTooltip>
             </QBtn>
         </QCard>
@@ -267,7 +267,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 es:
     Search autonomous: Buscar autónomos
     You can search by autonomous reference: Puedes buscar por referencia del autónomo
-    Create invoiceIn: Crear factura recibida
     Two autonomous cannot be counted at the same time: Dos autonónomos no pueden ser contabilizados al mismo tiempo
     Date: Fecha
     Agency route: Agencia Ruta

src/pages/Route/RouteList.vue

@@ -99,6 +99,7 @@ const columns = computed(() => [
             url: 'vehicles',
             fields: ['id', 'numberPlate'],
             optionLabel: 'numberPlate',
+            optionFilterValue: 'numberPlate',
             find: {
                 value: 'vehicleFk',
                 label: 'vehiclePlateNumber',

src/pages/Supplier/Card/SupplierCard.vue

@@ -10,8 +10,10 @@ import SupplierListFilter from '../SupplierListFilter.vue';
         :descriptor="SupplierDescriptor"
         :filter-panel="SupplierListFilter"
         search-data-key="SupplierList"
-        search-url="Suppliers/filter"
+        :searchbar-props="{
-        searchbar-label="Search suppliers"
+            url: 'Suppliers/filter',
-        search-url-query="table"
+            searchUrl: 'table',
+            label: 'Search suppliers',
+        }"
     />
 </template>

src/pages/Supplier/Card/SupplierDescriptor.vue

@@ -177,7 +177,7 @@ const getEntryQueryParams = (supplier) => {
                     icon="vn:invoice-in-create"
                     color="primary"
                 >
-                    <QTooltip>{{ t('Create invoiceIn') }}</QTooltip>
+                    <QTooltip>{{ t('globals.createInvoiceIn') }}</QTooltip>
                 </QBtn>
             </QCardActions>
         </template>
@@ -188,7 +188,6 @@ const getEntryQueryParams = (supplier) => {
 es:
     All entries with current supplier: Todas las entradas con proveedor actual
     Go to client: Ir a cliente
-    Create invoiceIn: Crear factura recibida
     Go to module index: Ir al índice del módulo
     Inactive supplier: Proveedor inactivo
     Unverified supplier: Proveedor no verificado

src/pages/Ticket/Card/TicketBoxing.vue

@@ -105,14 +105,14 @@ async function getVideoList(expeditionId, timed) {
                             label
                             markers
                             snap
-                            color="orange"
+                            color="primary"
                         />
                     </QItemSection>
                 </QItem>
                 <QItem v-if="lastExpedition && videoList.length">
                     <QItemSection>
                         <QSelect
-                            color="orange"
+                            color="primary"
                             v-model="slide"
                             :options="videoList"
                             :label="t('ticket.boxing.selectVideo')"

src/pages/Ticket/Card/TicketCard.vue

@@ -11,6 +11,7 @@ const { t } = useI18n();
 const route = useRoute();
 
 const routeName = computed(() => route.name);
+const customRouteRedirectName = computed(() => routeName.value);
 </script>
 <template>
     <VnCard
@@ -19,8 +20,10 @@ const routeName = computed(() => route.name);
         :filter-panel="TicketFilter"
         :descriptor="TicketDescriptor"
         search-data-key="TicketList"
-        :search-custom-route-redirect="routeName"
+        :searchbar-props="{
-        :searchbar-label="t('card.search')"
+            customRouteRedirectName,
-        :searchbar-info="t('card.searchInfo')"
+            label: t('card.search'),
+            info: t('card.searchInfo'),
+        }"
     />
 </template>

src/pages/Ticket/Card/TicketEditMana.vue

@@ -34,7 +34,7 @@ const cancel = () => {
 <template>
     <QPopupProxy ref="QPopupProxyRef">
         <div class="container">
-            <QSpinner v-if="!mana" color="orange" size="md" />
+            <QSpinner v-if="!mana" color="primary" size="md" />
             <div v-else>
                 <div class="header">Mana: {{ toCurrency(mana) }}</div>
                 <div class="q-pa-md">

src/pages/Ticket/TicketList.vue

@@ -298,6 +298,7 @@ onMounted(() => (stateStore.rightDrawer = true));
                 <div class="col">
                     <VnSelect
                         url="Warehouses"
+                        :sort-by="['name']"
                         :label="t('ticket.create.warehouse')"
                         v-model="data.warehouseId"
                         :options="warehousesOptions"

src/pages/Travel/Card/TravelCard.vue

@@ -35,10 +35,12 @@ const filter = {
         data-key="Travel"
         base-url="Travels"
         search-data-key="TravelList"
-        searchbar-label="Search travel"
-        searchbar-info="You can search by travel id or name"
-        search-url="Travels"
         :filter="filter"
         :descriptor="TravelDescriptor"
+        :searchbar-props="{
+            url: 'Travels',
+            label: 'Search travel',
+            info: 'You can search by travel id or name',
+        }"
     />
 </template>

src/pages/Wagon/WagonCounter.vue

@@ -64,7 +64,12 @@ function confirm() {
     <QList class="row q-mx-auto q-mt-xl">
         <QItem v-for="(props, name) in counters" :key="name" class="col-6">
             <QItemSection>
-                <VnImg :id="props.id" width="130px" @click="handleEvent(name, 'add')" />
+                <VnImg
+                    :id="props.id"
+                    width="130px"
+                    @click="handleEvent(name, 'add')"
+                    :zoom="false"
+                />
                 <p class="title">{{ props.title }}</p>
             </QItemSection>
             <QItemSection class="q-ma-none">

src/pages/Worker/Card/WorkerBasicData.vue

@@ -139,23 +139,19 @@ const maritalStatus = [
 
             <VnRow>
                 <VnInput v-model="data.SSN" :label="t('SSN')" clearable />
-                <VnInput
-                    v-model="data.locker"
-                    type="number"
-                    :label="t('Locker')"
-                    clearable
-                />
-            </VnRow>
-            <VnRow>
                 <VnInputDate :label="t('fiDueDate')" v-model="data.fiDueDate" />
-
-                <VnInput v-model="data.sex" :label="t('sex')" clearable />
             </VnRow>
             <VnRow>
+                <VnSelect
+                    :label="t('sex')"
+                    :options="['M', 'F']"
+                    hide-selected
+                    v-model="data.sex"
+                />
                 <VnInputDate :label="t('seniority')" v-model="data.seniority" />
-                <VnInput v-model="data.fi" :label="t('fi')" />
             </VnRow>
             <VnRow>
+                <VnInput v-model="data.fi" :label="t('fi')" />
                 <VnInputDate :label="t('birth')" v-model="data.birth" />
             </VnRow>
             <VnRow>

src/pages/Worker/Card/WorkerCalendar.vue

@@ -171,8 +171,7 @@ watch([year, businessFk], () => refreshData());
         ref="WorkerFreelanceRef"
         auto-load
     />
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-        <QScrollArea class="fit text-grey-8">
         <WorkerCalendarFilter
             ref="workerCalendarFilterRef"
             v-model:business-fk="businessFk"
@@ -181,8 +180,7 @@ watch([year, businessFk], () => refreshData());
             :contract-holidays="contractHolidays"
             :year-holidays="yearHolidays"
         />
-        </QScrollArea>
+    </Teleport>
-    </QDrawer>
     <QPage class="column items-center">
         <QCard v-if="workerIsFreelance">
             <QCardSection class="text-center">

src/pages/Worker/Card/WorkerCard.vue

@@ -5,13 +5,15 @@ import WorkerFilter from '../WorkerFilter.vue';
 </script>
 <template>
     <VnCard
-        data-key="Workers"
+        data-key="Worker"
         base-url="Workers"
         :descriptor="WorkerDescriptor"
         :filter-panel="WorkerFilter"
         search-data-key="WorkerList"
-        search-url="Workers/filter"
+        :searchbar-props="{
-        searchbar-label="Search worker"
+            url: 'Workers/filter',
-        searchbar-info="You can search by worker id or name"
+            label: 'Search worker',
+            info: 'You can search by worker id or name',
+        }"
     />
 </template>

src/pages/Worker/Card/WorkerDescriptor.vue

@@ -147,7 +147,7 @@ const refetch = async () => await cardDescriptorRef.value.getData();
             <VnImg
                 :id="parseInt(entityId)"
                 collection="user"
-                size="520x520"
+                resolution="520x520"
                 class="photo"
             >
                 <template #error>

src/pages/Worker/Card/WorkerSummary.vue

@@ -11,6 +11,7 @@ import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 import RoleDescriptorProxy from 'src/pages/Account/Role/Card/RoleDescriptorProxy.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
+import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -84,10 +85,14 @@ const filter = {
                     :text="t('worker.summary.basicData')"
                 />
                 <VnLv :label="t('worker.card.name')" :value="worker.user?.nickname" />
-                <VnLv
+                <VnLv :label="t('worker.list.department')">
-                    :label="t('worker.list.department')"
+                    <template #value>
-                    :value="worker.department?.department?.name"
+                        <span class="link" v-text="worker.department?.department?.name" />
+                        <DepartmentDescriptorProxy
+                            :id="worker.department?.department?.id"
                         />
+                    </template>
+                </VnLv>
                 <VnLv :label="t('worker.list.email')" :value="worker.user.email" copy />
                 <VnLv :label="t('worker.summary.boss')" link>
                     <template #value>

src/pages/Worker/Card/WorkerTimeControl.vue

@@ -489,7 +489,7 @@ onMounted(async () => {
             </QBtnGroup>
         </div>
     </Teleport>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="260" class="q-pa-md">
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
         <div class="q-pa-md q-mb-md" style="border: 2px solid #222">
             <QCardSection horizontal>
                 <span class="text-weight-bold text-subtitle1 text-center full-width">
@@ -515,7 +515,7 @@ onMounted(async () => {
             @click-date="onInputChange"
             @on-moved="getMailStates"
         />
-    </QDrawer>
+    </Teleport>
     <QPage class="column items-center">
         <QTable :columns="columns" :rows="['']" hide-bottom class="full-width">
             <template #header="props">

src/pages/Zone/Card/ZoneCard.vue

@@ -28,11 +28,12 @@ const searchBarDataKeys = {
         data-key="Zone"
         :descriptor="ZoneDescriptor"
         :search-data-key="searchBarDataKeys[routeName]"
-        :search-custom-route-redirect="customRouteRedirectName"
+        :filter-panel="ZoneFilterPanel"
-        :search-redirect="!!customRouteRedirectName"
+        :searchbar-props="{
-        :search-make-fetch="searchbarMakeFetch"
+            url: 'Zones',
-        :searchbar-label="t('list.searchZone')"
+            label: t('list.searchZone'),
-        :searchbar-info="t('list.searchInfo')"
+            info: t('list.searchInfo'),
+        }"
     >
         <template #searchbar>
             <ZoneSearchbar />

test/cypress/integration/invoiceIn/invoiceInIntrastat.spec.js

@@ -1,8 +1,9 @@
 /// <reference types="cypress" />
 describe('InvoiceInIntrastat', () => {
-    const inputBtns = 'label button';
+    const firstRow = 'tbody > :nth-child(1)';
     const thirdRow = 'tbody > :nth-child(3)';
-    const firstLineCode = 'tbody > :nth-child(1) > :nth-child(2)';
+    const firstRowCode = `${firstRow} > :nth-child(2)`;
+    const firstRowAmount = `${firstRow} > :nth-child(3)`;
 
     beforeEach(() => {
         cy.login('developer');
@@ -10,10 +11,10 @@ describe('InvoiceInIntrastat', () => {
     });
 
     it('should edit the first line', () => {
-        cy.selectOption(firstLineCode, 'Plantas vivas: Esqueje/injerto, Vid');
+        cy.selectOption(firstRowCode, 'Plantas vivas: Esqueje/injerto, Vid');
-        cy.get(inputBtns).eq(1).click();
+        cy.get(firstRowAmount).clear();
         cy.saveCard();
-        cy.get(`${firstLineCode} span`).should(
+        cy.get(`${firstRowCode} span`).should(
             'have.text',
             '6021010:Plantas vivas: Esqueje/injerto, Vid'
         );

test/cypress/integration/invoiceIn/invoiceInList.spec.js

@@ -1,23 +1,23 @@
 /// <reference types="cypress" />
 describe('InvoiceInList', () => {
-    const firstCard = '.q-card:nth-child(1)';
+    const firstRow = 'tbody.q-virtual-scroll__content tr:nth-child(1)';
-    const firstChipId =
+    const firstId = `${firstRow} > td:nth-child(1) span`;
-        ':nth-child(1) > :nth-child(1) > .justify-between > .flex > .q-chip > .q-chip__content';
+    const firstDetailBtn = `${firstRow} .q-btn:nth-child(1)`;
-    const firstDetailBtn = '.q-card:nth-child(1) .q-btn:nth-child(2)';
     const summaryHeaders = '.summaryBody .header-link';
 
     beforeEach(() => {
         cy.viewport(1920, 1080);
         cy.login('developer');
         cy.visit(`/#/invoice-in/list`);
+        cy.get('#searchbar input').type('{enter}');
     });
 
     it('should redirect on clicking a invoice', () => {
-        cy.get(firstChipId)
+        cy.get(firstId)
             .invoke('text')
             .then((content) => {
                 const id = content.replace(/\D/g, '');
-                cy.get(firstCard).click();
+                cy.get(firstRow).click();
                 cy.url().should('include', `/invoice-in/${id}/summary`);
             });
     });

test/cypress/integration/invoiceIn/invoiceInVat.spec.js

@@ -4,8 +4,7 @@ describe('InvoiceInVat', () => {
     const firstLineVat = 'tbody > :nth-child(1) > :nth-child(4)';
     const dialogInputs = '.q-dialog label input';
     const dialogBtns = '.q-dialog button';
-    const acrossInput =
+    const acrossInput = 'tbody tr:nth-child(1) td:nth-child(2) .default-icon';
-        ':nth-child(1) > .q-td.q-table--col-auto-width > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .default-icon';
     const randomInt = Math.floor(Math.random() * 100);
 
     beforeEach(() => {

test/cypress/integration/logout.spec.js

@@ -7,10 +7,8 @@ describe('Logout', () => {
     });
     describe('by user', () => {
         it('should logout', () => {
-            cy.get(
+            cy.get('#user').click();
-                '#user > .q-btn__content > .q-avatar > .q-avatar__content > .q-img > .q-img__container > .q-img__image'
+            cy.get('#logout').click();
-            ).click();
-            cy.get('.block').click();
         });
     });
     describe('not user', () => {

test/cypress/integration/worker/workerLocker.spec.js

@@ -2,7 +2,7 @@ describe('WorkerLocker', () => {
     const workerId = 1109;
     const lockerCode = '2F';
     const input = '.q-card input';
-    const thirdOpt = '[role="listbox"] .q-item:nth-child(3)';
+    const thirdOpt = '[role="listbox"] .q-item:nth-child(1)';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('productionBoss');

test/vitest/__tests__/pages/Login/Login.spec.js

@@ -25,18 +25,20 @@ describe('Login', () => {
         vi.spyOn(axios, 'post').mockResolvedValueOnce({ data: { token: 'token' } });
         vi.spyOn(axios, 'get').mockImplementation((url) => {
             if (url === 'VnUsers/acls') return Promise.resolve({ data: [] });
-            return Promise.resolve({data: { roles: [], user: expectedUser , multimediaToken: {id:'multimediaToken' }}});
+            return Promise.resolve({
+                data: {
+                    roles: [],
+                    user: expectedUser,
+                    multimediaToken: { id: 'multimediaToken' },
+                },
+            });
         });
-        vi.spyOn(vm.quasar, 'notify');
 
         expect(vm.session.getToken()).toEqual('');
 
         await vm.onSubmit();
 
         expect(vm.session.getToken()).toEqual('token');
-        expect(vm.quasar.notify).toHaveBeenCalledWith(
-            expect.objectContaining({ type: 'positive' })
-        );
         await vm.session.destroy();
     });