src/components/FormModel.vue

@@ -87,6 +87,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    defaultTrim: {
+        type: Boolean,
+        default: true,
+    },
 });
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 const modelValue = computed(
@@ -195,6 +199,7 @@ async function save() {
 
     isLoading.value = true;
     try {
+        formData.value = trimData(formData.value);
         const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
         const method = $props.urlCreate ? 'post' : 'patch';
         const url =
@@ -253,6 +258,14 @@ function updateAndEmit(evt, val, res) {
     emit(evt, state.get(modelValue), res);
 }
 
+function trimData(data) {
+    if (!$props.defaultTrim) return data;
+    for (const key in data) {
+        if (typeof data[key] == 'string') data[key] = data[key].trim();
+    }
+    return data;
+}
+
 defineExpose({
     save,
     isLoading,

src/components/UserPanel.vue

@@ -159,6 +159,14 @@ const isEmployee = computed(() => useRole().isEmployee());
                     size="xxl"
                     color="transparent"
                 />
+                <QBtn
+                    v-if="isEmployee"
+                    class="q-mt-sm q-px-md"
+                    :to="`/worker/${user.id}`"
+                    color="primary"
+                    :label="t('globals.myAccount')"
+                    dense
+                />
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>

src/components/VnTable/VnTable.vue

@@ -315,7 +315,7 @@ defineExpose({
                                 col?.columnFilter !== false &&
                                 col?.name !== 'tableActions'
                             "
-                            v-model="orders[col.name]"
+                            v-model="orders[col.orderBy ?? col.name]"
                             :name="col.orderBy ?? col.name"
                             :data-key="$attrs['data-key']"
                             :search-url="searchUrl"
@@ -409,7 +409,7 @@ defineExpose({
                                     style="height: 30px"
                                 >
                                     <VnTableOrder
-                                        v-model="orders[col.name]"
+                                        v-model="orders[col.orderBy ?? col.name]"
                                         :name="col.orderBy ?? col.name"
                                         :label="col?.label"
                                         :data-key="$attrs['data-key']"

src/components/common/VnCard.vue

@@ -26,7 +26,10 @@ const url = computed(() => {
     if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
     return props.customUrl;
 });
-
+const searchRightDataKey = computed(() => {
+    if (!props.searchDataKey) return route.name;
+    return props.searchDataKey;
+});
 const arrayData = useArrayData(props.dataKey, {
     url: url.value,
     filter: props.filter,
@@ -62,10 +65,9 @@ if (props.baseUrl) {
     <slot name="searchbar" v-if="props.searchDataKey">
         <VnSearchbar :data-key="props.searchDataKey" v-bind="props.searchbarProps" />
     </slot>
-    <slot v-else name="searchbar" />
     <RightMenu>
         <template #right-panel v-if="props.filterPanel">
-            <component :is="props.filterPanel" :data-key="props.searchDataKey" />
+            <component :is="props.filterPanel" :data-key="searchRightDataKey" />
         </template>
     </RightMenu>
     <QPageContainer>

src/components/common/VnLog.vue

@@ -407,9 +407,12 @@ watch(
         @on-fetch="
             (data) =>
                 (actions = data.map((item) => {
+                    const changedModel = item.changedModel;
                     return {
-                        locale: useCapitalize(validations[item.changedModel].locale.name),
-                        value: item.changedModel,
+                        locale: useCapitalize(
+                            validations[changedModel]?.locale?.name ?? changedModel
+                        ),
+                        value: changedModel,
                     };
                 }))
         "

src/components/ui/VnFilterPanel.vue

@@ -37,7 +37,7 @@ const $props = defineProps({
     },
     hiddenTags: {
         type: Array,
-        default: () => ['filter'],
+        default: () => ['filter', 'search', 'or', 'and'],
     },
     customTags: {
         type: Array,
@@ -111,21 +111,23 @@ watch(
 
 const isLoading = ref(false);
 async function search(evt) {
-    if (evt && $props.disableSubmitEvent) return;
+    try {
+        if (evt && $props.disableSubmitEvent) return;
 
-    store.filter.where = {};
-    isLoading.value = true;
-    const filter = { ...userParams.value, ...$props.modelValue };
-    store.userParamsChanged = true;
-    const { params: newParams } = await arrayData.addFilter({
-        params: filter,
-    });
-    userParams.value = newParams;
+        store.filter.where = {};
+        isLoading.value = true;
+        const filter = { ...userParams.value, ...$props.modelValue };
+        store.userParamsChanged = true;
+        const { params: newParams } = await arrayData.addFilter({
+            params: filter,
+        });
+        userParams.value = newParams;
 
-    if (!$props.showAll && !Object.values(filter).length) store.data = [];
-
-    isLoading.value = false;
-    emit('search');
+        if (!$props.showAll && !Object.values(filter).length) store.data = [];
+        emit('search');
+    } finally {
+        isLoading.value = false;
+    }
 }
 
 async function reload() {
@@ -140,29 +142,31 @@ async function reload() {
 }
 
 async function clearFilters() {
-    isLoading.value = true;
-    store.userParamsChanged = true;
-    arrayData.reset(['skip', 'filter.skip', 'page']);
-    // Filtrar los params no removibles
-    const removableFilters = Object.keys(userParams.value).filter((param) =>
-        $props.unRemovableParams.includes(param)
-    );
-    const newParams = {};
-    // Conservar solo los params que no son removibles
-    for (const key of removableFilters) {
-        newParams[key] = userParams.value[key];
-    }
-    userParams.value = {};
-    userParams.value = { ...newParams }; // Actualizar los params con los removibles
-    await arrayData.applyFilter({ params: userParams.value });
+    try {
+        isLoading.value = true;
+        store.userParamsChanged = true;
+        arrayData.reset(['skip', 'filter.skip', 'page']);
+        // Filtrar los params no removibles
+        const removableFilters = Object.keys(userParams.value).filter((param) =>
+            $props.unRemovableParams.includes(param)
+        );
+        const newParams = {};
+        // Conservar solo los params que no son removibles
+        for (const key of removableFilters) {
+            newParams[key] = userParams.value[key];
+        }
+        userParams.value = {};
+        userParams.value = { ...newParams }; // Actualizar los params con los removibles
+        await arrayData.applyFilter({ params: userParams.value });
 
-    if (!$props.showAll) {
-        store.data = [];
+        if (!$props.showAll) {
+            store.data = [];
+        }
+        emit('clear');
+        emit('update:modelValue', userParams.value);
+    } finally {
+        isLoading.value = false;
     }
-
-    isLoading.value = false;
-    emit('clear');
-    emit('update:modelValue', userParams.value);
 }
 
 const tagsList = computed(() => {
@@ -198,8 +202,10 @@ function formatValue(value) {
 
 function sanitizer(params) {
     for (const [key, value] of Object.entries(params)) {
-        if (typeof value == 'object')
-            params[key] = Object.values(value)[0].replaceAll('%', '');
+        if (typeof value == 'object') {
+            const param = Object.values(value)[0];
+            if (typeof param == 'string') params[key] = param.replaceAll('%', '');
+        }
     }
     return params;
 }

src/components/ui/VnOutForm.vue

@@ -0,0 +1,32 @@
+<script setup>
+const emit = defineEmits(['submit']);
+defineProps({
+    icon: { type: String, required: false, default: 'phonelink_lock' },
+    title: { type: String, required: true },
+});
+</script>
+<template>
+    <QForm @submit="emit('submit')" class="q-gutter-y-md q-pa-lg formCard">
+        <div class="column items-center">
+            <QIcon v-if="icon != false" :name="icon" size="xl" color="primary" />
+            <h5 class="text-center q-my-md">
+                {{ title }}
+            </h5>
+        </div>
+        <slot></slot>
+        <div class="q-mt-lg">
+            <slot name="buttons"></slot>
+        </div>
+    </QForm>
+</template>
+<style lang="scss" scoped>
+.formCard {
+    max-width: 350px;
+    min-width: 300px;
+}
+@media (max-width: $breakpoint-xs-max) {
+    .formCard {
+        min-width: 100%;
+    }
+}
+</style>

src/components/ui/VnRow.vue

@@ -9,6 +9,9 @@
     > :deep(*) {
         flex: 1;
     }
+    &[wrap] {
+        flex-wrap: wrap;
+    }
 }
 @media screen and (max-width: 800px) {
     .vn-row {

src/components/ui/VnSearchbar.vue

@@ -104,9 +104,7 @@ onMounted(() => {
 });
 
 async function search() {
-    const staticParams = Object.entries(store.userParams).filter(
-        ([key, value]) => value && (props.staticParams || []).includes(key)
-    );
+    const staticParams = Object.entries(store.userParams);
     arrayData.reset(['skip', 'page']);
 
     if (props.makeFetch)

src/components/ui/VnSubToolbar.vue

@@ -43,20 +43,9 @@ onBeforeUnmount(() => stateStore.toggleSubToolbar());
         </slot>
     </QToolbar>
 </template>
-<style lang="scss">
-.q-toolbar {
-    background: var(--vn-section-color);
-}
-</style>
 <style lang="scss" scoped>
 .sticky {
     position: sticky;
-    top: 61px;
     z-index: 1;
 }
-@media (max-width: $breakpoint-sm) {
-    .sticky {
-        top: 90px;
-    }
-}
 </style>

src/css/app.scss

@@ -190,6 +190,10 @@ select:-webkit-autofill {
     font-size: medium;
 }
 
+.q-toolbar {
+    background: var(--vn-section-color);
+}
+
 .q-card__actions {
     justify-content: center;
 }

src/filters/getParamWhere.js

@@ -0,0 +1,21 @@
+// parsing JSON safely
+function parseJSON(str, fallback) {
+    try {
+        return JSON.parse(str ?? '{}');
+    } catch (e) {
+        console.error('Error parsing JSON:', e);
+        return fallback;
+    }
+}
+export default function (route, param) {
+    // catch route query params
+    const params = parseJSON(route?.query?.params, {});
+
+    // extract and parse filter from params
+    const { filter: filterStr = '{}' } = params;
+    const where = parseJSON(filterStr, {})?.where;
+    if (where && where[param] !== undefined) {
+        return where[param];
+    }
+    return null;
+}

src/filters/index.js

@@ -11,6 +11,7 @@ import dashIfEmpty from './dashIfEmpty';
 import dateRange from './dateRange';
 import toHour from './toHour';
 import dashOrCurrency from './dashOrCurrency';
+import getParamWhere from './getParamWhere';
 
 export {
     toLowerCase,
@@ -26,4 +27,5 @@ export {
     toPercentage,
     dashIfEmpty,
     dateRange,
+    getParamWhere,
 };

src/i18n/locale/en.yml

@@ -93,6 +93,7 @@ globals:
     since: Since
     from: From
     to: To
+    notes: Notes
     pageTitles:
         logIn: Login
         summary: Summary
@@ -251,6 +252,9 @@ globals:
         privileges: Privileges
         ldap: LDAP
         samba: Samba
+        twoFactor: Two factor
+        recoverPassword: Recover password
+        resetPassword: Reset password
     created: Created
     worker: Worker
     now: Now
@@ -263,6 +267,7 @@ globals:
         title: Unsaved changes will be lost
         subtitle: Are you sure exit without saving?
     createInvoiceIn: Create invoice in
+    myAccount: My account
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
@@ -288,14 +293,17 @@ twoFactor:
     explanation: >-
         Please, enter the verification code that we have sent to your email in the
         next 5 minutes
-    pageTitles:
-        twoFactor: Two-Factor
 verifyEmail:
     pageTitles:
         verifyEmail: Email verification
-dashboard:
-    pageTitles:
-
+recoverPassword:
+    userOrEmail: User or recovery email
+    explanation: >-
+        We will sent you an email to recover your password
+resetPassword:
+    repeatPassword: Repeat password
+    passwordNotMatch: Passwords don't match
+    passwordChanged: Password changed
 customer:
     list:
         phone: Phone

src/i18n/locale/es.yml

@@ -93,6 +93,7 @@ globals:
     since: Desde
     from: Desde
     to: Hasta
+    notes: Notas
     pageTitles:
         logIn: Inicio de sesión
         summary: Resumen
@@ -253,6 +254,9 @@ globals:
         packages: Bultos
         ldap: LDAP
         samba: Samba
+        twoFactor: Doble factor
+        recoverPassword: Recuperar contraseña
+        resetPassword: Restablecer contraseña
     created: Fecha creación
     worker: Trabajador
     now: Ahora
@@ -265,7 +269,7 @@ globals:
         title: Los cambios que no haya guardado se perderán
         subtitle: ¿Seguro que quiere salir sin guardar?
     createInvoiceIn: Crear factura recibida
-
+    myAccount: Mi cuenta
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
@@ -289,14 +293,17 @@ twoFactor:
     validate: Validar
     insert: Introduce el código de verificación
     explanation: Por favor introduce el código de verificación que te hemos enviado a tu email en los próximos 5 minutos
-    pageTitles:
-        twoFactor: Doble factor
 verifyEmail:
     pageTitles:
         verifyEmail: Verificación de correo
-dashboard:
-    pageTitles:
-
+recoverPassword:
+    userOrEmail: Usuario o correo de recuperación
+    explanation: >-
+        Te enviaremos un correo para restablecer tu contraseña
+resetPassword:
+    repeatPassword: Repetir contraseña
+    passwordNotMatch: Las contraseñas no coinciden
+    passwordChanged: Contraseña cambiada
 customer:
     list:
         phone: Teléfono
@@ -876,7 +883,7 @@ worker:
     card:
         workerId: ID Trabajador
         name: Nombre
-        email: Email
+        email: Correo personal
         phone: Teléfono
         mobile: Móvil
         active: Activo

src/pages/Account/AccountAcls.vue

@@ -41,14 +41,12 @@ const columns = computed(() => [
         name: 'id',
         label: t('id'),
         isId: true,
-        field: 'id',
         cardVisible: true,
     },
     {
         align: 'left',
         name: 'model',
         label: t('model'),
-        field: 'model',
         cardVisible: true,
         create: true,
     },
@@ -56,15 +54,19 @@ const columns = computed(() => [
         align: 'left',
         name: 'principalId',
         label: t('principalId'),
-        field: 'principalId',
         cardVisible: true,
+        component: 'select',
+        attrs: {
+            url: 'VnRoles',
+            optionLabel: 'name',
+            optionValue: 'name',
+        },
         create: true,
     },
     {
         align: 'left',
         name: 'property',
         label: t('property'),
-        field: 'property',
         cardVisible: true,
         create: true,
     },
@@ -72,7 +74,10 @@ const columns = computed(() => [
         align: 'left',
         name: 'accessType',
         label: t('accessType'),
-        field: 'accessType',
+        component: 'select',
+        attrs: {
+            options: ['READ', 'WRITE', '*'],
+        },
         cardVisible: true,
         create: true,
     },
@@ -118,13 +123,6 @@ const deleteAcl = async ({ id }) => {
 </script>
 
 <template>
-    <FetchData
-        url="VnRoles"
-        :filter="{ fields: ['name'], order: 'name ASC' }"
-        @on-fetch="(data) => (rolesOptions = data)"
-        auto-load
-    />
-
     <VnSearchbar
         data-key="AccountAcls"
         url="ACLs"
@@ -147,7 +145,6 @@ const deleteAcl = async ({ id }) => {
         order="id DESC"
         :columns="columns"
         default-mode="table"
-        auto-load
         :right-search="true"
         :is-editable="true"
         :use-model="true"
@@ -162,4 +159,15 @@ es:
     Are you sure you want to continue?: ¿Seguro que quieres continuar?
     Remove ACL: Eliminar Acl
     Do you want to remove this ACL?: ¿Quieres eliminar este ACL?
+    principalId: Rol
+    model: Modelo
+en:
+    New ACL: New ACL
+    ACL removed: ACL removed
+    ACL will be removed: ACL will be removed
+    Are you sure you want to continue?: Are you sure you want to continue?
+    Remove ACL: Remove ACL
+    Do you want to remove this ACL?: Do you want to remove this ACL?
+    principalId: Rol
+    model: Models
 </i18n>

src/pages/Account/AccountAliasList.vue

@@ -60,7 +60,7 @@ const columns = computed(() => [
     <VnTable
         ref="tableRef"
         data-key="AccountAliasList"
-        :url="`MailAliases`"
+        url="MailAliases"
         :create="{
             urlCreate: 'MailAliases',
             title: 'Create MailAlias',
@@ -70,7 +70,6 @@ const columns = computed(() => [
         order="id DESC"
         :columns="columns"
         default-mode="table"
-        auto-load
         redirect="account/alias"
         :is-editable="true"
         :use-model="true"

src/pages/Account/AccountList.vue

@@ -48,6 +48,14 @@ const columns = computed(() => [
         cardVisible: true,
         create: true,
     },
+    {
+        align: 'left',
+        name: 'email',
+        label: t('email'),
+        component: 'input',
+        create: true,
+        visible: false,
+    },
     {
         align: 'right',
         label: '',
@@ -83,9 +91,9 @@ const exprBuilder = (param, value) => {
 
 <template>
     <VnSearchbar
-        :label="t('account.search')"
         data-key="AccountUsers"
         :expr-builder="exprBuilder"
+        :label="t('account.search')"
         :info="t('account.searchInfo')"
     />
 
@@ -96,7 +104,6 @@ const exprBuilder = (param, value) => {
         order="id DESC"
         :columns="columns"
         default-mode="table"
-        auto-load
         redirect="account"
         :use-model="true"
     />

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

@@ -1,22 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { computed } from 'vue';
-
 import VnCard from 'components/common/VnCard.vue';
 import AliasDescriptor from './AliasDescriptor.vue';
-
 const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => {
-    return routeName.value;
-});
-const searchBarDataKeys = {
-    AliasBasicData: 'AliasBasicData',
-    AliasUsers: 'AliasUsers',
-};
 </script>
 
 <template>
@@ -24,12 +10,12 @@ const searchBarDataKeys = {
         data-key="Alias"
         base-url="MailAliases"
         :descriptor="AliasDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        search-data-key="AccountAliasList"
         :searchbar-props="{
-            redirect: !!customRouteRedirectName,
-            customRouteRedirectName,
+            url: 'MailAliases',
             info: t('mailAlias.searchInfo'),
             label: t('mailAlias.search'),
+            searchUrl: 'table',
         }"
     />
 </template>

src/pages/Account/Card/AccountBasicData.vue

@@ -37,9 +37,11 @@ watch(
                 <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
                 <VnInput v-model="data.email" :label="t('account.card.email')" />
                 <VnSelect
+                    url="Languages"
                     v-model="data.lang"
-                    :options="['es', 'en']"
                     :label="t('account.card.lang')"
+                    option-value="code"
+                    option-label="code"
                 />
             </div>
         </template>

src/pages/Account/Card/AccountCard.vue

@@ -1,36 +1,21 @@
 <script setup>
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
 import VnCard from 'components/common/VnCard.vue';
 import AccountDescriptor from './AccountDescriptor.vue';
 
 const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => routeName.value);
-const searchBarDataKeys = {
-    AccountSummary: 'AccountSummary',
-    AccountInheritedRoles: 'AccountInheritedRoles',
-    AccountMailForwarding: 'AccountMailForwarding',
-    AccountMailAlias: 'AccountMailAlias',
-    AccountPrivileges: 'AccountPrivileges',
-    AccountLog: 'AccountLog',
-};
 </script>
 
 <template>
     <VnCard
         data-key="Account"
         :descriptor="AccountDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        search-data-key="AccountUsers"
         :searchbar-props="{
-            redirect: !!customRouteRedirectName,
-            customRouteRedirectName,
+            url: 'VnUsers/preview',
             label: t('account.search'),
             info: t('account.searchInfo'),
+            searchUrl: 'table',
         }"
     />
 </template>

src/pages/Account/Card/AccountDescriptorMenu.vue

@@ -82,6 +82,54 @@ const removeAccount = async () => {
 };
 </script>
 <template>
+    <VnConfirm
+        v-model="showSyncDialog"
+        :message="t('account.card.actions.sync.message')"
+        :title="t('account.card.actions.sync.title')"
+        :promise="sync"
+    >
+        <template #customHTML>
+            {{ shouldSyncPassword }}
+            <QCheckbox
+                :label="t('account.card.actions.sync.checkbox')"
+                v-model="shouldSyncPassword"
+                class="full-width"
+                clearable
+                clear-icon="close"
+            >
+                <QIcon style="padding-left: 10px" color="primary" name="info" size="sm">
+                    <QTooltip>{{ t('account.card.actions.sync.tooltip') }}</QTooltip>
+                </QIcon></QCheckbox
+            >
+            <QInput
+                v-if="shouldSyncPassword"
+                :label="t('login.password')"
+                v-model="syncPassword"
+                class="full-width"
+                clearable
+                clear-icon="close"
+                type="password"
+            />
+        </template>
+    </VnConfirm>
+    <!-- <QItem v-ripple clickable @click="setPassword">
+        <QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
+    </QItem>
+    <QItem
+        v-if="!account.hasAccount"
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('account.card.actions.enableAccount.title'),
+                t('account.card.actions.enableAccount.subtitle'),
+                () => updateStatusAccount(true)
+            )
+        "
+    >
+        <QItemSection>{{ t('account.card.actions.enableAccount.name') }}</QItemSection>
+    </QItem> -->
+
     <QItem
         v-if="account.hasAccount"
         v-ripple

src/pages/Account/Card/AccountPrivileges.vue

@@ -14,16 +14,11 @@ const rolesOptions = ref([]);
 const formModelRef = ref();
 </script>
 <template>
-    <FetchData
-        url="VnRoles"
-        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
-        auto-load
-        @on-fetch="(data) => (rolesOptions = data)"
-    />
+    <FetchData url="VnRoles" auto-load @on-fetch="(data) => (rolesOptions = data)" />
     <FormModel
         ref="formModelRef"
         model="AccountPrivileges"
-        :url="`VnUsers/${route.params.id}`"
+        :url="`VnUsers/${route.params.id}/privileges`"
         :url-create="`VnUsers/${route.params.id}/privileges`"
         auto-load
         @on-data-saved="formModelRef.fetch()"

src/pages/Account/Role/AccountRoles.vue

@@ -5,6 +5,8 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import { useRoute } from 'vue-router';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import { useStateStore } from 'stores/useStateStore';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import RoleSummary from './Card/RoleSummary.vue';
 const route = useRoute();
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -16,7 +18,7 @@ const $props = defineProps({
 });
 const tableRef = ref();
 const entityId = computed(() => $props.id || route.params.id);
-
+const { viewSummary } = useSummaryDialog();
 const columns = computed(() => [
     {
         align: 'left',
@@ -42,6 +44,18 @@ const columns = computed(() => [
         cardVisible: true,
         create: true,
     },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('View Summary'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, RoleSummary),
+            },
+        ],
+    },
 ]);
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -62,16 +76,12 @@ const exprBuilder = (param, value) => {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="Roles"
-                :expr-builder="exprBuilder"
-                :label="t('role.searchRoles')"
-                :info="t('role.searchInfo')"
-            />
-        </Teleport>
-    </template>
+    <VnSearchbar
+        data-key="Roles"
+        :expr-builder="exprBuilder"
+        :label="t('role.searchRoles')"
+        :info="t('role.searchInfo')"
+    />
     <VnTable
         ref="tableRef"
         data-key="Roles"
@@ -87,8 +97,6 @@ const exprBuilder = (param, value) => {
         order="id ASC"
         :columns="columns"
         default-mode="table"
-        auto-load
         redirect="account/role"
-        :is-editable="true"
     />
 </template>

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

@@ -23,11 +23,6 @@ const { t } = useI18n();
                     />
                 </div>
             </VnRow>
-            <VnRow>
-                <div class="col">
-                    <QCheckbox :label="t('mailAlias.isPublic')" v-model="data.isPublic" />
-                </div>
-            </VnRow>
         </template>
     </FormModel>
 </template>

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

@@ -1,33 +1,20 @@
 <script setup>
-import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 import VnCard from 'components/common/VnCard.vue';
 import RoleDescriptor from './RoleDescriptor.vue';
 
 const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => routeName.value);
-const searchBarDataKeys = {
-    RoleSummary: 'RoleSummary',
-    RoleBasicData: 'RoleBasicData',
-    SubRoles: 'SubRoles',
-    InheritedRoles: 'InheritedRoles',
-    RoleLog: 'RoleLog',
-};
 </script>
 <template>
     <VnCard
         data-key="Role"
         :descriptor="RoleDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
+        search-data-key="AccountRoles"
         :searchbar-props="{
-            redirect: !!customRouteRedirectName,
-            customRouteRedirectName,
+            url: 'VnRoles',
             label: t('role.searchRoles'),
             info: t('role.searchInfo'),
+            searchUrl: 'table',
         }"
     />
 </template>

src/pages/Claim/ClaimList.vue

@@ -50,7 +50,7 @@ const columns = computed(() => [
         align: 'left',
         label: t('claim.attendedBy'),
         name: 'attendedBy',
-        cardVisible: true,
+        orderBy: 'workerFk',
         columnFilter: {
             component: 'select',
             attrs: {
@@ -63,6 +63,7 @@ const columns = computed(() => [
                 optionFilter: 'firstName',
             },
         },
+        cardVisible: true,
     },
     {
         align: 'left',

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, ref, computed } from 'vue';
+import { onMounted, onUnmounted, ref, computed, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -12,7 +12,6 @@ import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import { toCurrency, toDate } from 'src/filters/index';
 import { useStateStore } from 'stores/useStateStore';
 import { QBtn } from 'quasar';
-import { watchEffect } from 'vue';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
 
 const { t } = useI18n();
@@ -222,14 +221,17 @@ watchEffect(selectedRows);
             </span>
         </template>
         <template #more-create-dialog="{ data }">
-            <VnSelect
-                url="Tickets"
-                v-model="data.ticketFk"
-                :label="t('invoiceOutList.tableVisibleColumns.ticket')"
-                :options="ticketsOptions"
-                option-label="nickname"
-                option-value="id"
-            />
+            <div class="flex no-wrap flex-center">
+                <VnSelect
+                    url="Tickets"
+                    v-model="data.ticketFk"
+                    :label="t('invoiceOutList.tableVisibleColumns.ticket')"
+                    :options="ticketsOptions"
+                    option-label="nickname"
+                    option-value="id"
+                />
+                <span class="q-ml-md">O</span>
+            </div>
             <VnSelect
                 url="Clients"
                 v-model="data.clientFk"
@@ -238,10 +240,6 @@ watchEffect(selectedRows);
                 option-label="name"
                 option-value="id"
             />
-            <VnInputDate
-                :label="t('invoiceOutList.tableVisibleColumns.dueDate')"
-                v-model="data.maxShipped"
-            />
             <VnSelect
                 url="InvoiceOutSerials"
                 v-model="data.invoiceOutSerial"
@@ -250,6 +248,10 @@ watchEffect(selectedRows);
                 option-label="description"
                 option-value="code"
             />
+            <VnInputDate
+                :label="t('invoiceOutList.tableVisibleColumns.dueDate')"
+                v-model="data.maxShipped"
+            />
             <VnSelect
                 url="TaxAreas"
                 v-model="data.area"

src/pages/InvoiceOut/InvoiceOutNegativeBases.vue

@@ -74,6 +74,9 @@ const columns = computed(() => [
         align: 'left',
         name: 'amount',
         label: t('invoiceOutModule.amount'),
+        columnFilter: {
+            type: 'number',
+        },
         format: (row) => toCurrency(row.amount),
         cardVisible: true,
     },

src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue

@@ -19,7 +19,7 @@ const props = defineProps({
     <VnFilterPanel
         :data-key="props.dataKey"
         :search-button="true"
-        :unremovable-params="['from', 'to']"
+        :un-removable-params="['from', 'to']"
         :hidden-tags="['from', 'to']"
     >
         <template #tags="{ tag, formatFn }">

src/pages/Login/LoginMain.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import { Notify, useQuasar } from 'quasar';
+import { Notify } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -11,7 +11,6 @@ import VnLogo from 'components/ui/VnLogo.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import axios from 'axios';
 
-const quasar = useQuasar();
 const session = useSession();
 const loginCache = useLogin();
 const router = useRouter();
@@ -72,7 +71,8 @@ async function onSubmit() {
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
             class="red"
         />
-        <div>
+        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
+        <div class="column flex-center q-mt-lg">
             <QBtn
                 :label="t('login.submit')"
                 type="submit"
@@ -81,11 +81,15 @@ async function onSubmit() {
                 rounded
                 unelevated
             />
+            <RouterLink
+                class="q-mt-md text-primary"
+                :to="`/recoverPassword?user=${username}`"
+            >
+                {{ t('I do not remember my password') }}
+            </RouterLink>
         </div>
-        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
     </QForm>
 </template>
-
 <style lang="scss" scoped>
 .formCard {
     max-width: 350px;
@@ -101,3 +105,7 @@ async function onSubmit() {
     }
 }
 </style>
+<i18n>
+es:
+    I do not remember my password: No recuerdo mi contraseña
+</i18n>

src/pages/Login/RecoverPassword.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import axios from 'axios';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnOutForm from 'src/components/ui/VnOutForm.vue';
+
+const quasar = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const user = ref(route.query.user);
+
+async function onSubmit() {
+    try {
+        await axios.post('VnUsers/recoverPassword', { user: user.value, app: 'lilium' });
+        router.push('Login');
+        quasar.notify({
+            message: t('globals.notificationSent'),
+            type: 'positive',
+        });
+    } catch (e) {
+        quasar.notify({
+            message: e.response?.data?.error.message,
+            type: 'negative',
+        });
+    }
+}
+</script>
+<template>
+    <VnOutForm @submit="onSubmit" :title="t('globals.pageTitles.recoverPassword')">
+        <template #default>
+            <VnInput
+                v-model="user"
+                :label="t('recoverPassword.userOrEmail')"
+                :hint="t('recoverPassword.explanation')"
+                autofocus
+                required
+            >
+                <template #prepend>
+                    <QIcon name="contact_mail" />
+                </template>
+            </VnInput>
+        </template>
+        <template #buttons>
+            <QBtn
+                :label="t('globals.pageTitles.recoverPassword')"
+                type="submit"
+                color="primary"
+                class="full-width q-mt-md"
+                rounded
+                unelevated
+            />
+        </template>
+    </VnOutForm>
+</template>

src/pages/Login/ResetPassword.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+import axios from 'axios';
+
+import VnInput from 'components/common/VnInput.vue';
+import VnOutForm from 'components/ui/VnOutForm.vue';
+
+const quasar = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const { t } = useI18n();
+
+const newPassword = ref();
+const repeatPassword = ref();
+const passRequirements = ref({});
+
+onMounted(async () => {
+    passRequirements.value = (await axios('UserPasswords/findOne')).data;
+});
+
+async function onSubmit() {
+    if (newPassword.value != repeatPassword.value)
+        return quasar.notify({
+            message: t('resetPassword.passwordNotMatch'),
+            type: 'negative',
+        });
+
+    const headers = {
+        Authorization: route.query.access_token,
+    };
+
+    try {
+        console.log('newPassword: ', newPassword);
+        await axios.post(
+            'VnUsers/reset-password',
+            { newPassword: newPassword.value },
+            { headers }
+        );
+        router.push('Login');
+        quasar.notify({
+            message: t('resetPassword.passwordChanged'),
+            type: 'positive',
+        });
+    } catch (e) {
+        quasar.notify({
+            message: e.response?.data?.error.message,
+            type: 'negative',
+        });
+    }
+}
+</script>
+<template>
+    <VnOutForm @submit="onSubmit" :title="t('globals.pageTitles.resetPassword')">
+        <template #default>
+            <VnInput
+                type="password"
+                :label="t('login.password')"
+                v-model="newPassword"
+                :info="
+                    t('passwordRequirements', {
+                        length: passRequirements.length,
+                        nAlpha: passRequirements.nAlpha,
+                        nUpper: passRequirements.nUpper,
+                        nDigits: passRequirements.nDigits,
+                        nPunct: passRequirements.nPunct,
+                    })
+                "
+                required
+            >
+                <template #prepend>
+                    <QIcon name="password" />
+                </template>
+            </VnInput>
+            <VnInput
+                type="password"
+                :label="t('resetPassword.repeatPassword')"
+                v-model="repeatPassword"
+                required
+            >
+                <template #prepend>
+                    <QIcon name="password" />
+                </template>
+            </VnInput>
+        </template>
+        <template #buttons>
+            <QBtn
+                :label="t('globals.pageTitles.resetPassword')"
+                type="submit"
+                color="primary"
+                class="full-width q-mt-md"
+                rounded
+                unelevated
+            />
+        </template>
+    </VnOutForm>
+</template>

src/pages/Login/TwoFactor.vue

@@ -8,6 +8,7 @@ import axios from 'axios';
 import { useSession } from 'src/composables/useSession';
 import { useLogin } from 'src/composables/useLogin';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnOutForm from 'src/components/ui/VnOutForm.vue';
 
 const quasar = useQuasar();
 const session = useSession();
@@ -38,24 +39,22 @@ async function onSubmit() {
 }
 </script>
 <template>
-    <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
-        <div class="column items-center">
-            <QIcon name="phonelink_lock" size="xl" color="primary" />
-            <h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
-        </div>
-        <VnInput
-            v-model="code"
-            :hint="t('twoFactor.explanation')"
-            mask="# # # # # #"
-            fill-mask
-            unmasked-value
-            autofocus
-        >
-            <template #prepend>
-                <QIcon name="lock" />
-            </template>
-        </VnInput>
-        <div class="q-mt-xl">
+    <VnOutForm @submit="onSubmit" :title="t('twoFactor.insert')">
+        <template #default>
+            <VnInput
+                v-model="code"
+                :hint="t('twoFactor.explanation')"
+                mask="# # # # # #"
+                fill-mask
+                unmasked-value
+                autofocus
+            >
+                <template #prepend>
+                    <QIcon name="lock" />
+                </template>
+            </VnInput>
+        </template>
+        <template #buttons>
             <QBtn
                 :label="t('twoFactor.validate')"
                 type="submit"
@@ -64,18 +63,6 @@ async function onSubmit() {
                 rounded
                 unelevated
             />
-        </div>
-    </QForm>
+        </template>
+    </VnOutForm>
 </template>
-<style lang="scss" scoped>
-.formCard {
-    max-width: 350px;
-    min-width: 300px;
-}
-
-@media (max-width: $breakpoint-xs-max) {
-    .formCard {
-        min-width: 100%;
-    }
-}
-</style>

src/pages/Order/Card/OrderBasicData.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
@@ -7,6 +7,7 @@ import { useState } from 'composables/useState';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelect from 'components/common/VnSelect.vue';
+import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
@@ -15,7 +16,6 @@ const route = useRoute();
 const state = useState();
 const ORDER_MODEL = 'order';
 
-const router = useRouter();
 const isNew = Boolean(!route.params.id);
 const clientList = ref([]);
 const agencyList = ref([]);
@@ -64,13 +64,6 @@ const fetchOrderDetails = (order) => {
     fetchAgencyList(order?.landed, order?.addressFk);
 };
 
-const orderMapper = (order) => {
-    return {
-        addressId: order.addressFk,
-        agencyModeId: order.agencyModeFk,
-        landed: new Date(order.landed).toISOString(),
-    };
-};
 const orderFilter = {
     include: [
         { relation: 'agencyMode', scope: { fields: ['name'] } },
@@ -106,10 +99,6 @@ const onClientChange = async (clientId) => {
         console.error('Error al cambiar el cliente:', error);
     }
 };
-
-async function onDataSaved({ id }) {
-    await router.push({ path: `/order/${id}/catalog` });
-}
 </script>
 
 <template>
@@ -117,9 +106,8 @@ async function onDataSaved({ id }) {
     <div class="q-pa-md">
         <FormModel
             :url="`Orders/${route.params.id}`"
-            @on-data-saved="onDataSaved"
+            :url-update="`Orders/${route.params.id}/updateBasicData`"
             :model="ORDER_MODEL"
-            :mapper="orderMapper"
             :filter="orderFilter"
             @on-fetch="fetchOrderDetails"
             auto-load
@@ -180,8 +168,6 @@ async function onDataSaved({ id }) {
                             () => fetchAgencyList(data.landed, data.addressFk)
                         "
                     />
-                </VnRow>
-                <VnRow>
                     <VnSelect
                         :label="t('order.form.agencyModeFk')"
                         v-model="data.agencyModeFk"
@@ -189,9 +175,29 @@ async function onDataSaved({ id }) {
                         option-value="agencyModeFk"
                         option-label="agencyMode"
                         hide-selected
-                        :disable="!agencyList?.length"
-                    >
-                    </VnSelect>
+                        :disable="!agencyList?.length && data.isConfirmed === 1"
+                        clearable
+                        emit-value
+                        map-options
+                        :model-value="
+                            !data.isConfirmed &&
+                            agencyList?.length &&
+                            agencyList.some(
+                                (agency) => agency.agencyModeFk === data.agency_id
+                            )
+                                ? data.agencyModeFk
+                                : null
+                        "
+                    />
+                </VnRow>
+                <VnRow>
+                    <VnInput
+                        :label="t('globals.notes')"
+                        type="textarea"
+                        v-model="data.note"
+                        fill-input
+                        autogrow
+                    />
                 </VnRow>
             </template>
         </FormModel>

src/pages/Order/Card/OrderCard.vue

@@ -1,16 +1,35 @@
 <script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 import VnCard from 'components/common/VnCard.vue';
 import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
 import OrderFilter from './OrderFilter.vue';
 import OrderSearchbar from './OrderSearchbar.vue';
+import OrderCatalogFilter from './OrderCatalogFilter.vue';
+const config = {
+    OrderCatalog: OrderCatalogFilter,
+};
+const route = useRoute();
+
+const routeName = computed(() => route.name);
+const customRouteRedirectName = computed(() => {
+    const route = config[routeName.value];
+    if (route) return null;
+    return 'OrderList';
+});
+const customFilterPanel = computed(() => {
+    const filterPanel = config[routeName.value] ?? OrderFilter;
+    return filterPanel;
+});
 </script>
+
 <template>
     <VnCard
         data-key="Order"
         base-url="Orders"
         :descriptor="OrderDescriptor"
-        :filter-panel="OrderFilter"
-        search-data-key="OrderList"
+        :filter-panel="customFilterPanel"
+        :search-data-key="customRouteRedirectName"
     >
         <template #searchbar>
             <OrderSearchbar />

src/pages/Order/Card/OrderCatalog.vue

@@ -1,17 +1,24 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { onMounted, onUnmounted, ref } from 'vue';
+import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import CatalogItem from 'components/ui/CatalogItem.vue';
 import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const route = useRoute();
+const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
+const tags = ref([]);
 
-onMounted(() => (stateStore.rightDrawer = true));
+onMounted(() => {
+    stateStore.rightDrawer = true;
+    checkOrderConfirmation();
+});
 onUnmounted(() => (stateStore.rightDrawer = false));
 
 const catalogParams = {
@@ -19,7 +26,12 @@ const catalogParams = {
     orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
 };
 
-const tags = ref([]);
+async function checkOrderConfirmation() {
+    const response = await axios.get(`Orders/${route.params.id}`);
+    if (response.data.isConfirmed === 1) {
+        router.push(`/order/${route.params.id}/line`);
+    }
+}
 
 function extractTags(items) {
     const resultTags = [];
@@ -52,6 +64,15 @@ function extractValueTags(items) {
 </script>
 
 <template>
+    <VnSearchbar
+        data-key="OrderCatalogList"
+        :user-params="catalogParams"
+        :static-params="['orderFk', 'orderBy']"
+        :redirect="false"
+        url="Orders/CatalogFilter"
+        :label="t('Search items')"
+        :info="t('You can search items by name or id')"
+    />
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
             <OrderCatalogFilter
@@ -68,7 +89,6 @@ function extractValueTags(items) {
                 url="Orders/CatalogFilter"
                 :limit="50"
                 :user-params="catalogParams"
-                auto-load
                 @on-fetch="extractTags"
                 :update-router="false"
             >
@@ -106,3 +126,8 @@ function extractValueTags(items) {
     text-align: center;
 }
 </style>
+
+<i18n>
+es:
+    You can search items by name or id: Puedes buscar items por nombre o id
+</i18n>

src/pages/Order/Card/OrderCatalogFilter.vue

@@ -7,8 +7,8 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
-import { useValidator } from 'src/composables/useValidator';
 import VnInput from 'src/components/common/VnInput.vue';
+import getParamWhere from 'src/filters/getParamWhere';
 
 const { t } = useI18n();
 
@@ -27,19 +27,26 @@ const props = defineProps({
         required: true,
     },
 });
-
 const categoryList = ref(null);
-const selectedCategoryFk = ref(null);
-const typeList = ref(null);
+const selectedCategoryFk = ref(getParamWhere(route, 'categoryFk'));
+const typeList = ref([]);
 const selectedTypeFk = ref(null);
-const validationsStore = useValidator();
-const selectedOrder = ref(null);
-const selectedOrderField = ref(null);
-const moreFields = ref([]);
-const moreFieldsOrder = ref([]);
 const selectedTag = ref(null);
 const tagValues = ref([{}]);
 const tagOptions = ref([]);
+const vnFilterPanelRef = ref();
+const orderByList = ref([
+    { id: 'relevancy DESC, name', name: t('params.relevancy'), priority: 999 },
+    { id: 'showOrder, price', name: t('params.colorAndPrice'), priority: 999 },
+    { id: 'name', name: t('params.name'), priority: 999 },
+    { id: 'price', name: t('params.price'), priority: 999 },
+]);
+const orderWayList = ref([
+    { id: 'ASC', name: t('params.ASC') },
+    { id: 'DESC', name: t('params.DESC') },
+]);
+const orderBySelected = ref('relevancy DESC, name');
+const orderWaySelected = ref('ASC');
 
 const createValue = (val, done) => {
     if (val.length > 2) {
@@ -72,7 +79,7 @@ const selectCategory = (params, category, search) => {
     search();
 };
 
-const loadTypes = async (categoryFk) => {
+const loadTypes = async (categoryFk = selectedCategoryFk.value) => {
     const { data } = await axios.get(`Orders/${route.params.id}/getItemTypeAvailable`, {
         params: { itemCategoryId: categoryFk },
     });
@@ -84,7 +91,14 @@ const selectedCategory = computed(() =>
         (category) => category?.id === selectedCategoryFk.value
     )
 );
-
+function filterFn(val, update) {
+    update(() => {
+        const needle = val.toLowerCase();
+        tagOptions.value = props.tagValue.filter(
+            (v) => v.toLowerCase().indexOf(needle) > -1
+        );
+    });
+}
 const selectedType = computed(() => {
     return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
 });
@@ -95,7 +109,8 @@ function exprBuilder(param, value) {
         case 'typeFk':
             return { [param]: value };
         case 'search':
-            return { 'i.name': { like: `%${value}%` } };
+            if (/^\d+$/.test(value)) return { 'i.id': value };
+            else return { 'i.name': { like: `%${value}%` } };
     }
 }
 
@@ -132,36 +147,6 @@ const removeTagChip = (selection, params, search) => {
     search();
 };
 
-const onOrderChange = (value, params) => {
-    const tagObj = JSON.parse(params.orderBy);
-    tagObj.way = value.name;
-    params.orderBy = JSON.stringify(tagObj);
-};
-
-const onOrderFieldChange = (value, params) => {
-    const tagObj = JSON.parse(params.orderBy);
-    switch (value) {
-        case 'Relevancy':
-            tagObj.name = value + ' DESC, name';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-        case 'ColorAndPrice':
-            tagObj.name = 'showOrder, price';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-        case 'Name':
-            tagObj.name = 'name';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-        case 'Price':
-            tagObj.name = 'price';
-            params.orderBy = JSON.stringify(tagObj);
-            break;
-    }
-};
-
-const _moreFields = ['ASC', 'DESC'];
-const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
 const setCategoryList = (data) => {
     categoryList.value = (data || [])
         .filter((category) => category.display)
@@ -169,8 +154,8 @@ const setCategoryList = (data) => {
             ...category,
             icon: `vn:${(category.icon || '').split('-')[1]}`,
         }));
-    moreFields.value = useLang(_moreFields);
-    moreFieldsOrder.value = useLang(_moreFieldsTypes);
+
+    selectedCategoryFk.value && loadTypes();
 };
 
 const getCategoryClass = (category, params) => {
@@ -179,27 +164,22 @@ const getCategoryClass = (category, params) => {
     }
 };
 
-const useLang = (values) => {
-    const { models } = validationsStore;
-    const properties = models.Item?.properties || {};
-    return values.map((name) => {
-        let prop = properties[name];
-        const label = t(`params.${name}`);
-        return {
-            name,
-            label,
-            type: prop ? prop.type : null,
-        };
-    });
-};
+function addOrder(value, field, params) {
+    let { orderBy } = params;
+    orderBy = JSON.parse(orderBy);
+    orderBy[field] = value;
+    params.orderBy = JSON.stringify(orderBy);
+    vnFilterPanelRef.value.search();
+}
 </script>
 
 <template>
     <FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
     <VnFilterPanel
+        ref="vnFilterPanelRef"
         :data-key="props.dataKey"
         :hidden-tags="['orderFk', 'orderBy']"
-        :unremovable-params="['orderFk', 'orderBy']"
+        :un-removable-params="['orderFk', 'orderBy']"
         :expr-builder="exprBuilder"
         :custom-tags="['tagGroups']"
         @remove="clearFilter"
@@ -289,33 +269,29 @@ const useLang = (values) => {
                 </QItemSection>
             </QItem>
             <QSeparator />
-            <QItem class="q-my-md">
-                <QItemSection>
-                    <VnSelect
-                        :label="t('Order')"
-                        v-model="selectedOrder"
-                        :options="moreFields"
-                        option-label="label"
-                        option-value="way"
-                        dense
-                        outlined
-                        rounded
-                        @update:model-value="(value) => onOrderChange(value, params)"
-                    />
-                </QItemSection>
-            </QItem>
             <QItem class="q-mb-md">
                 <QItemSection>
                     <VnSelect
                         :label="t('Order by')"
-                        v-model="selectedOrderField"
-                        :options="moreFieldsOrder"
-                        option-label="label"
-                        option-value="name"
+                        v-model="orderBySelected"
+                        :options="orderByList"
                         dense
                         outlined
                         rounded
-                        @update:model-value="(value) => onOrderFieldChange(value, params)"
+                        @update:model-value="(value) => addOrder(value, 'field', params)"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('Order')"
+                        v-model="orderWaySelected"
+                        :options="orderWayList"
+                        dense
+                        outlined
+                        rounded
+                        @update:model-value="(value) => addOrder(value, 'way', params)"
                     />
                 </QItemSection>
             </QItem>
@@ -352,7 +328,7 @@ const useLang = (values) => {
                     v-if="!selectedTag"
                     :label="t('params.value')"
                     v-model="value.value"
-                    :options="tagValue || []"
+                    :options="tagOptions || []"
                     option-value="value"
                     option-label="value"
                     dense
@@ -362,6 +338,8 @@ const useLang = (values) => {
                     use-input
                     class="filter-input"
                     @new-value="createValue"
+                    @filter="filterFn"
+                    @update:model-value="applyTagFilter(params, searchFn)"
                 />
                 <VnSelect
                     v-else-if="selectedTag === 1"
@@ -377,6 +355,7 @@ const useLang = (values) => {
                     use-input
                     class="filter-input"
                     @new-value="createValue"
+                    @update:model-value="applyTagFilter(params, searchFn)"
                 />
                 <VnInput
                     v-else
@@ -386,6 +365,7 @@ const useLang = (values) => {
                     outlined
                     rounded
                     class="filter-input"
+                    @keyup.enter="applyTagFilter(params, searchFn)"
                 />
                 <QIcon
                     name="delete"
@@ -400,7 +380,7 @@ const useLang = (values) => {
                     @click="tagValues.push({})"
                 />
             </QItem>
-            <QItem>
+            <!-- <QItem>
                 <QItemSection class="q-py-sm">
                     <QBtn
                         :label="t('Search')"
@@ -414,7 +394,7 @@ const useLang = (values) => {
                         @click.stop="applyTagFilter(params, searchFn)"
                     />
                 </QItemSection>
-            </QItem>
+            </QItem> -->
             <QSeparator />
         </template>
     </VnFilterPanel>
@@ -477,10 +457,10 @@ en:
         order: Order
         ASC: Ascendant
         DESC: Descendant
-        Relevancy: Relevancy
-        ColorAndPrice: Color and price
-        Name: Name
-        Price: Price
+        relevancy: Relevancy
+        colorAndPrice: Color and price
+        name: Name
+        price: Price
 es:
     params:
         type: Tipo
@@ -490,10 +470,10 @@ es:
         order: Orden
         ASC: Ascendiente
         DESC: Descendiente
-        Relevancy: Relevancia
-        ColorAndPrice: Color y precio
-        Name: Nombre
-        Price: Precio
+        relevancy: Relevancia
+        colorAndPrice: Color y precio
+        name: Nombre
+        price: Precio
     Order: Orden
     Order by: Ordenar por
     Plant: Planta

src/pages/Order/Card/OrderCatalogItemDialog.vue

@@ -5,10 +5,12 @@ import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useRoute } from 'vue-router';
 import useNotify from 'composables/useNotify';
+import { useArrayData } from 'composables/useArrayData';
 
 const { t } = useI18n();
-const route = useRoute();
 const { notify } = useNotify();
+const emit = defineEmits(['added']);
+const route = useRoute();
 const props = defineProps({
     prices: {
         type: Array,
@@ -16,9 +18,8 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['added']);
-
 const fields = ref((props.prices || []).map((item) => ({ ...item, quantity: 0 })));
+const descriptorData = useArrayData('orderData');
 
 const addToOrder = async () => {
     const items = (fields.value || []).filter((item) => Number(item.quantity) > 0);
@@ -28,19 +29,20 @@ const addToOrder = async () => {
     });
     notify(t('globals.dataSaved'), 'positive');
     emit('added');
+    descriptorData.fetch({});
 };
 </script>
 
 <template>
-    <div class="container order-catalog-item q-pb-md">
+    <div class="container order-catalog-item q-pa-md">
         <QForm @submit="addToOrder">
             <QMarkupTable class="shadow-0">
                 <tbody>
                     <tr v-for="item in fields" :key="item.warehouse">
-                        <td class="text-bold q-py-lg">
+                        <td class="text-bold q-pr-md td" style="width: 35%">
                             {{ item.warehouse }}
                         </td>
-                        <td class="text-right">
+                        <td class="text-right" style="width: 35%">
                             <span
                                 class="link"
                                 @click="
@@ -75,8 +77,11 @@ const addToOrder = async () => {
 </template>
 
 <style lang="scss" scoped>
-.container {
-    max-width: 448px;
-    width: 100%;
+// .container {
+//     max-width: 768px;
+//     width: 100%;
+// }
+.td {
+    width: 200px;
 }
 </style>

src/pages/Order/Card/OrderDescriptor.vue

@@ -4,13 +4,13 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency, toDate } from 'src/filters';
 import { useState } from 'src/composables/useState';
-
 import useCardDescription from 'src/composables/useCardDescription';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
 import FetchData from 'components/FetchData.vue';
+import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
 const DEFAULT_ITEMS = 0;
 
@@ -25,6 +25,8 @@ const $props = defineProps({
 const route = useRoute();
 const state = useState();
 const { t } = useI18n();
+const data = ref(useCardDescription());
+const getTotalRef = ref();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
@@ -57,11 +59,11 @@ const filter = {
     ],
 };
 
-const data = ref(useCardDescription());
 const setData = (entity) => {
     if (!entity) return;
+    getTotalRef.value && getTotalRef.value.fetch();
     data.value = useCardDescription(entity?.client?.name, entity?.id);
-    state.set('OrderDescriptor', entity);
+    state.set('orderData', entity);
 };
 
 const getConfirmationValue = (isConfirmed) => {
@@ -69,13 +71,17 @@ const getConfirmationValue = (isConfirmed) => {
 };
 
 const total = ref(null);
+
+function ticketFilter(order) {
+    return JSON.stringify({ id: order.id });
+}
 </script>
 
 <template>
     <FetchData
+        ref="getTotalRef"
         :url="`Orders/${entityId}/getTotal`"
         @on-fetch="(response) => (total = response)"
-        auto-load
     />
     <CardDescriptor
         ref="descriptor"
@@ -120,7 +126,7 @@ const total = ref(null);
                     color="primary"
                     :to="{
                         name: 'TicketList',
-                        query: { params: JSON.stringify({ orderFk: entity.id }) },
+                        query: { table: ticketFilter(entity) },
                     }"
                 >
                     <QTooltip>{{ t('order.summary.orderTicketList') }}</QTooltip>

src/pages/Order/Card/OrderFilter.vue

@@ -21,15 +21,13 @@ const salesPersonFilter = {
     fields: ['id', 'nickname'],
 };
 const salesPersonList = ref(null);
-const sourceFilter = { fields: ['value'] };
-const sourceList = ref(null);
+const sourceList = ref([]);
 </script>
 
 <template>
     <FetchData
         url="AgencyModes/isActive"
         :filter="agencyFilter"
-        limit="30"
         sort-by="name ASC"
         auto-load
         @on-fetch="(data) => (agencyList = data)"
@@ -37,7 +35,6 @@ const sourceList = ref(null);
     <FetchData
         url="Workers/search"
         :filter="salesPersonFilter"
-        limit="30"
         sort-by="nickname ASC"
         @on-fetch="(data) => (salesPersonList = data)"
         :params="{ departmentCodes: ['VT'] }"
@@ -45,8 +42,7 @@ const sourceList = ref(null);
     />
     <FetchData
         url="Orders/getSourceValues"
-        :filter="sourceFilter"
-        limit="30"
+        :filter="{ fields: ['value'] }"
         sort-by="value ASC"
         @on-fetch="(data) => (sourceList = data)"
         auto-load
@@ -59,148 +55,88 @@ const sourceList = ref(null);
             </div>
         </template>
         <template #body="{ params }">
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        is-outlined
-                        :label="t('customerId')"
-                        v-model="params.clientFk"
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection v-if="agencyList">
-                    <VnSelect
-                        :label="t('agency')"
-                        v-model="params.agencyModeFk"
-                        :options="agencyList"
-                        option-value="id"
-                        option-label="name"
-                        dense
-                        outlined
-                        rounded
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection v-if="salesPersonList">
-                    <VnSelect
-                        :label="t('salesPerson')"
-                        v-model="params.workerFk"
-                        :options="salesPersonList"
-                        option-value="id"
-                        option-label="name"
-                        dense
-                        outlined
-                        rounded
-                        emit-value
-                        map-options
-                        use-input
-                        :input-debounce="0"
-                    >
-                        <template #option="{ itemProps, opt }">
-                            <QItem v-bind="itemProps">
-                                <QItemSection>
-                                    <QItemLabel>{{ opt.name }}</QItemLabel>
-                                    <QItemLabel caption>
-                                        {{ opt.nickname }},{{ opt.code }}
-                                    </QItemLabel>
-                                </QItemSection>
-                            </QItem>
-                        </template>
-                    </VnSelect>
-                </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        v-model="params.from"
-                        :label="t('fromLanded')"
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInputDate
-                        v-model="params.to"
-                        :label="t('toLanded')"
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('orderId')"
-                        v-model="params.orderFk"
-                        lazy-rules
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection v-if="sourceList">
-                    <VnSelect
-                        :label="t('application')"
-                        v-model="params.sourceApp"
-                        :options="sourceList"
-                        option-label="value"
-                        emit-value
-                        map-options
-                        use-input
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <QCheckbox
-                        v-model="params.myTeam"
-                        :label="t('myTeam')"
-                        toggle-indeterminate
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <QCheckbox
-                        v-model="params.isConfirmed"
-                        :label="t('isConfirmed')"
-                        toggle-indeterminate
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
-                </QItemSection>
-            </QItem>
+            <div class="q-px-md q-gutter-y-sm">
+                <VnInput
+                    :label="t('customerId')"
+                    v-model="params.clientFk"
+                    lazy-rules
+                    dense
+                    outlined
+                    rounded
+                />
+                <VnSelect
+                    :label="t('agency')"
+                    v-model="params.agencyModeFk"
+                    :options="agencyList"
+                    :input-debounce="0"
+                    dense
+                    outlined
+                    rounded
+                />
+                <VnSelect
+                    :label="t('salesPerson')"
+                    v-model="params.workerFk"
+                    url="Workers/search"
+                    :filter="{ departmentCodes: ['VT'] }"
+                    sort-by="nickname ASC"
+                    option-label="nickname"
+                    dense
+                    outlined
+                    rounded
+                >
+                    <template #option="{ itemProps, opt }">
+                        <QItem v-bind="itemProps">
+                            <QItemSection>
+                                <QItemLabel>{{ opt.name }}</QItemLabel>
+                                <QItemLabel caption>
+                                    {{ opt.nickname }},{{ opt.code }}
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
+                <VnInputDate
+                    v-model="params.from"
+                    :label="t('fromLanded')"
+                    dense
+                    outlined
+                    rounded
+                />
+                <VnInputDate
+                    v-model="params.to"
+                    :label="t('toLanded')"
+                    dense
+                    outlined
+                    rounded
+                />
+                <VnInput
+                    :label="t('orderId')"
+                    v-model="params.orderFk"
+                    lazy-rules
+                    is-outlined
+                />
+                <VnSelect
+                    :label="t('application')"
+                    v-model="params.sourceApp"
+                    :options="sourceList"
+                    option-label="value"
+                    dense
+                    outlined
+                    rounded
+                    :input-debounce="0"
+                />
+                <QCheckbox
+                    v-model="params.myTeam"
+                    :label="t('myTeam')"
+                    toggle-indeterminate
+                />
+                <QCheckbox
+                    v-model="params.isConfirmed"
+                    :label="t('isConfirmed')"
+                    toggle-indeterminate
+                />
+                <QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
+            </div>
         </template>
     </VnFilterPanel>
 </template>

src/pages/Order/Card/OrderLines.vue

@@ -1,23 +1,26 @@
 <script setup>
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
+import axios from 'axios';
+import { useStateStore } from 'stores/useStateStore';
+import { useArrayData } from 'composables/useArrayData';
+import { toCurrency, toDate } from 'src/filters';
 
 import VnConfirm from 'components/ui/VnConfirm.vue';
-import { toCurrency, toDate } from 'src/filters';
-import axios from 'axios';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import FetchedTags from 'src/components/ui/FetchedTags.vue';
-import { useStateStore } from 'stores/useStateStore';
 
+const router = useRouter();
 const stateStore = useStateStore();
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
+const descriptorData = useArrayData('orderData');
 const componentKey = ref(0);
 const tableLinesRef = ref();
 const order = ref();
@@ -25,6 +28,8 @@ const orderSummary = ref({
     total: null,
     vat: null,
 });
+const getTotalRef = ref();
+const getVATRef = ref();
 
 const lineFilter = ref({
     include: [
@@ -59,6 +64,13 @@ const lineFilter = ref({
                 fields: ['id', 'name'],
             },
         },
+        {
+            relation: 'order',
+            scope: {
+                fields: ['id', 'isConfirmed'],
+                where: { id: route.params.id },
+            },
+        },
     ],
     where: { orderFk: route.params.id },
 });
@@ -104,6 +116,7 @@ const columns = computed(() => [
             component: null,
         },
         format: (row) => row?.item?.name,
+        columnClass: 'expand',
     },
     {
         align: 'left',
@@ -147,7 +160,6 @@ const columns = computed(() => [
         align: 'left',
         name: 'amount',
         label: t('lines.amount'),
-        format: (row) => toCurrency(row.amount),
     },
     {
         align: 'right',
@@ -155,8 +167,9 @@ const columns = computed(() => [
         name: 'tableActions',
         actions: [
             {
-                title: t('delete'),
+                title: t('Delete'),
                 icon: 'delete',
+                show: (row) => !row.order.isConfirmed,
                 action: (row) => confirmRemove(row),
                 isPrimary: true,
             },
@@ -185,6 +198,9 @@ async function remove(item) {
         type: 'positive',
     });
     tableLinesRef.value.reload();
+    descriptorData.fetch({});
+    getTotalRef.value.fetch();
+    getVATRef.value.fetch();
 }
 
 async function confirmOrder() {
@@ -193,7 +209,22 @@ async function confirmOrder() {
         message: t('globals.confirm'),
         type: 'positive',
     });
+    router.push({
+        name: 'TicketList',
+        query: {
+            table: JSON.stringify({ clientFk: descriptorData.store.data.clientFk }),
+        },
+    });
 }
+
+watch(
+    () => router.currentRoute.value.params.id,
+    () => {
+        lineFilter.value.where.orderFk = router.currentRoute.value.params.id;
+
+        tableLinesRef.value.reload();
+    }
+);
 </script>
 
 <template>
@@ -204,78 +235,80 @@ async function confirmOrder() {
         auto-load
     />
     <FetchData
+        ref="getTotalRef"
         :key="componentKey"
         :url="`Orders/${route.params.id}/getTotal`"
         @on-fetch="(data) => (orderSummary.total = data)"
         auto-load
     />
     <FetchData
+        ref="getVATRef"
         :key="componentKey"
         :url="`Orders/${route.params.id}/getVAT`"
         @on-fetch="(data) => (orderSummary.vat = data)"
         auto-load
     />
     <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
-        <QCard class="order-lines-summary q-pa-lg">
+        <QCard
+            class="order-lines-summary q-pa-lg"
+            v-if="orderSummary.vat && orderSummary.total"
+        >
             <p class="header text-right block">
                 {{ t('summary') }}
             </p>
             <VnLv
-                v-if="orderSummary.vat && orderSummary.total"
                 :label="t('subtotal') + ': '"
                 :value="toCurrency(orderSummary.total - orderSummary.vat)"
             />
-            <VnLv
-                v-if="orderSummary.vat"
-                :label="t('VAT') + ': '"
-                :value="toCurrency(orderSummary?.vat)"
-            />
-            <VnLv
-                v-if="orderSummary.total"
-                :label="t('total') + ': '"
-                :value="toCurrency(orderSummary?.total)"
-            />
+            <VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
+            <VnLv :label="t('total') + ': '" :value="toCurrency(orderSummary?.total)" />
         </QCard>
     </QDrawer>
-    <QPage :key="componentKey" class="column items-center">
-        <div class="order-list full-width">
-            <div v-if="!orderSummary.total" class="no-result">
-                {{ t('globals.noResults') }}
-            </div>
-            <VnTable
-                ref="tableLinesRef"
-                data-key="OrderLines"
-                url="OrderRows"
-                :columns="columns"
-                :right-search="false"
-                :use-model="true"
-                auto-load
-                :user-filter="lineFilter"
-            >
-                <template #column-image="{ row }">
-                    <div class="image-wrapper">
-                        <VnImg :id="parseInt(row?.item?.image)" class="rounded" />
-                    </div>
-                </template>
 
-                <template #column-itemFk="{ row }">
-                    <div class="row column full-width justify-between items-start">
-                        {{ row?.item?.name }}
-                        <div v-if="row?.item?.subName" class="subName">
-                            {{ row?.item?.subName.toUpperCase() }}
-                        </div>
-                    </div>
-                    <FetchedTags :item="row?.item" :max-length="6" />
-                </template>
-            </VnTable>
-        </div>
-        <QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
-            <QBtn fab icon="check" color="primary" @click="confirmOrder()" />
-            <QTooltip>
-                {{ t('confirm') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
+    <VnTable
+        ref="tableLinesRef"
+        data-key="OrderLines"
+        url="OrderRows"
+        :columns="columns"
+        :right-search="false"
+        :use-model="true"
+        auto-load
+        :user-filter="lineFilter"
+    >
+        <template #column-image="{ row }">
+            <div class="image-wrapper">
+                <VnImg :id="parseInt(row?.item?.image)" class="rounded" />
+            </div>
+        </template>
+
+        <template #column-itemFk="{ row }">
+            <div class="row column full-width justify-between items-start">
+                {{ row?.item?.name }}
+                <div v-if="row?.item?.subName" class="subName">
+                    {{ row?.item?.subName.toUpperCase() }}
+                </div>
+            </div>
+            <FetchedTags :item="row?.item" :max-length="6" />
+        </template>
+        <template #column-amount="{ row }">
+            {{ toCurrency(row.quantity * row.price) }}
+        </template>
+        <template #column-tableActions="{ row }">
+            <QIcon
+                v-if="row.order?.isConfirmed === 0"
+                name="delete"
+                icon="delete"
+                @click="confirmRemove(row)"
+                class="cursor-pointer"
+            />
+        </template>
+    </VnTable>
+    <QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
+        <QBtn fab icon="check" color="primary" @click="confirmOrder()" />
+        <QTooltip>
+            {{ t('confirm') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
 
 <style lang="scss" scoped>

src/pages/Order/Card/OrderSummary.vue

@@ -180,15 +180,17 @@ const detailsColumns = ref([
                                         <ItemDescriptorProxy :id="props.row.item?.id" />
                                     </span>
                                 </QTd>
-                                <QTd key="description" :props="props" class="description">
-                                    <div class="name">
-                                        <span>{{ props.row.item.name }}</span>
-                                        <span
-                                            v-if="props.row.item.subName"
-                                            class="subName"
-                                        >
-                                            {{ props.row.item.subName }}
-                                        </span>
+                                <QTd key="description" :props="props">
+                                    <div class="description">
+                                        <div class="name">
+                                            {{ props.row.item.name }}
+                                            <span
+                                                v-if="props.row.item.subName"
+                                                class="subName"
+                                            >
+                                                {{ props.row.item.subName }}
+                                            </span>
+                                        </div>
                                     </div>
                                     <FetchedTags :item="props.row.item" :max-length="5" />
                                 </QTd>
@@ -228,24 +230,13 @@ const detailsColumns = ref([
 }
 
 .description {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
     text-align: left;
-    height: auto;
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding-top: 15px;
+    padding-bottom: 15px;
 
     .name {
-        display: flex;
-        align-items: center;
-        padding-bottom: 8px;
-
-        & > * {
-            flex: 1;
-        }
-
         .subName {
+            margin-left: 5%;
             text-transform: uppercase;
             color: var(--vn-label-color);
         }

src/pages/Order/Card/OrderVolume.vue

@@ -0,0 +1,140 @@
+<script setup>
+import axios from 'axios';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { dashIfEmpty } from 'src/filters';
+
+import FetchData from 'components/FetchData.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import ItemDescriptorProxy from 'pages/Item/Card/ItemDescriptorProxy.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const volumeSummary = ref(null);
+const volumeRef = ref();
+const volumes = ref([]);
+const volumeFilter = ref({
+    include: [
+        {
+            relation: 'item',
+        },
+    ],
+    where: { orderFk: route.params.id },
+});
+
+const columns = [
+    {
+        name: 'itemFk',
+        label: t('item'),
+        align: 'left',
+    },
+    {
+        name: 'description',
+        label: t('globals.description'),
+        align: 'left',
+    },
+    {
+        name: 'quantity',
+        label: t('quantity'),
+        align: 'left',
+    },
+    {
+        name: 'volume',
+        label: t('volume'),
+        align: 'left',
+    },
+];
+
+const loadVolumes = async (rows) => {
+    if (!rows) return;
+    const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
+    rows.forEach((order) => {
+        (data.volumes || []).forEach((volume) => {
+            if (order.itemFk === volume.itemFk) order.volume = volume.volume;
+        });
+    });
+    volumes.value = rows;
+};
+</script>
+
+<template>
+    <FetchData
+        :url="`Orders/${route.params.id}/getTotalVolume`"
+        @on-fetch="(data) => (volumeSummary = data)"
+        auto-load
+    />
+    <QCard v-if="volumeSummary" class="order-volume-summary q-pa-lg">
+        <VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
+        <VnLv
+            :label="t('boxes')"
+            :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
+        />
+    </QCard>
+    <VnTable
+        ref="volumeRef"
+        data-key="OrderCatalogVolume"
+        url="OrderRows"
+        :columns="columns"
+        auto-load
+        :user-filter="volumeFilter"
+        order="itemFk"
+        @on-fetch="(data) => loadVolumes(data)"
+        :right-search="false"
+        :column-search="false"
+    >
+        <template #column-itemFk="{ row }">
+            <span class="link">
+                {{ row.itemFk }}
+                <ItemDescriptorProxy :id="row.itemFk" />
+            </span>
+        </template>
+        <template #column-description="{ row }">
+            <FetchedTags :item="row.item" :max-length="5" />
+        </template>
+        <template #column-volume="{ rowIndex }">
+            {{ volumes?.[rowIndex]?.volume }}
+        </template>
+    </VnTable>
+</template>
+
+<style lang="scss">
+.order-volume-summary {
+    .vn-label-value {
+        display: flex;
+        justify-content: flex-end;
+        gap: 2%;
+
+        .label {
+            color: var(--vn-label-color);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .value {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}
+</style>
+<i18n>
+en:
+    summary: Summary
+    total: Total
+    boxes: Boxes
+    item: Item
+    quantity: Quantity
+    volume: m³ per quantity
+es:
+    summary: Resumen
+    total: Total
+    boxes: Cajas
+    item: Artículo
+    quantity: Cantidad
+    volume: m³ por cantidad
+</i18n>

src/pages/Order/OrderList.vue

@@ -3,19 +3,21 @@ import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import { computed, ref } from 'vue';
 import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import OrderSearchbar from './Card/OrderSearchbar.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import OrderFilter from './Card/OrderFilter.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
-const clientList = ref([]);
 const agencyList = ref([]);
-const selectedAddress = ref();
+const addressesList = ref([]);
+const clientId = ref();
 
 const columns = computed(() => [
     {
@@ -29,7 +31,7 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'clientName',
+        name: 'clientFk',
         label: t('module.customer'),
         isTitle: true,
         cardVisible: true,
@@ -41,20 +43,26 @@ const columns = computed(() => [
         columnField: {
             component: null,
         },
+        format: (row) => row?.clientName,
     },
     {
         align: 'left',
-        name: 'name',
+        name: 'salesPersonFk',
         label: t('module.salesPerson'),
-        component: 'select',
-        attrs: {
-            url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'name'],
-            where: { role: 'salesPerson' },
-        },
-        columnField: {
-            component: null,
+        columnFilter: {
+            component: 'select',
+            inWhere: true,
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                where: { role: 'salesPerson' },
+                useLike: false,
+                optionValue: 'id',
+                optionLabel: 'name',
+                optionFilter: 'firstName',
+            },
         },
+        format: (row) => row?.name,
     },
     {
         align: 'left',
@@ -92,17 +100,21 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'agencyName',
+        name: 'agencyModeFk',
         label: t('module.agency'),
-        component: 'select',
+        format: (row) => row?.agencyName,
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'agencyModes',
+                fields: ['id', 'name'],
+                find: {
+                    value: 'agencyModeFk',
+                    label: 'agencyName',
+                },
+            },
+        },
         cardVisible: true,
-        attrs: {
-            url: 'Agencies',
-            fields: ['id', 'name'],
-        },
-        columnField: {
-            component: null,
-        },
     },
     {
         align: 'left',
@@ -125,22 +137,36 @@ const columns = computed(() => [
     },
 ]);
 
-async function fetchClientAddress(id, data) {
-    const clientData = await axios.get(`Clients/${id}`);
-    selectedAddress.value = clientData.data.defaultAddressFk;
-    data.addressId = selectedAddress.value;
+async function fetchClientAddress(id, formData) {
+    const { data } = await axios.get(`Clients/${id}`, {
+        params: { filter: { include: { relation: 'addresses' } } },
+    });
+    addressesList.value = data.addresses;
+    formData.addressId = data.defaultAddressFk;
+    fetchAgencies(formData);
+}
+
+async function fetchAgencies({ landed, addressId }) {
+    if (!landed || !addressId) return (agencyList.value = []);
+
+    const { data } = await axios.get('Agencies/landsThatDay', {
+        params: { addressFk: addressId, landed },
+    });
+    agencyList.value = data;
 }
 </script>
 <template>
-    <VnSearchbar
-        data-key="OrderList"
-        :label="t('Search order')"
-        :info="t('You can search orders by reference')"
-    />
+    <OrderSearchbar />
+    <RightMenu>
+        <template #right-panel>
+            <OrderFilter data-key="OrderList" />
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="OrderList"
         url="Orders/filter"
+        :order="['landed DESC', 'clientFk ASC', 'id DESC']"
         :create="{
             urlCreate: 'Orders/new',
             title: 'Create Order',
@@ -152,36 +178,49 @@ async function fetchClientAddress(id, data) {
                 addressId: null,
             },
         }"
+        :user-params="{ showEmpty: false }"
+        :right-search="false"
         :columns="columns"
         redirect="order"
-        auto-load
     >
         <template #more-create-dialog="{ data }">
             <VnSelect
                 url="Clients"
-                v-model="data.id"
+                :include="{ relation: 'addresses' }"
+                v-model="clientId"
                 :label="t('module.customer')"
-                :options="clientList"
-                option-value="id"
-                option-label="name"
                 @update:model-value="(id) => fetchClientAddress(id, data)"
             />
             <VnSelect
-                url="Clients"
-                v-model="selectedAddress"
+                v-model="data.addressId"
+                :options="addressesList"
                 :label="t('module.address')"
-                :options="selectedAddress"
-                option-value="defaultAddressFk"
-                option-label="street"
+                option-value="id"
+                option-label="nickname"
+                @update:model-value="() => fetchAgencies(data)"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel>
+                                {{ scope.opt?.nickname }}: {{ scope.opt?.street }},
+                                {{ scope.opt?.city }}</QItemLabel
+                            >
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+            <VnInputDate
+                v-model="data.landed"
+                :label="t('module.landed')"
+                @update:model-value="() => fetchAgencies(data)"
             />
-            <VnInputDate v-model="data.landed" :label="t('module.landed')" />
             <VnSelect
-                url="Agencies"
                 v-model="data.agencyModeId"
                 :label="t('module.agency')"
                 :options="agencyList"
-                option-value="id"
-                option-label="name"
+                option-value="agencyModeFk"
+                option-label="agencyMode"
             />
         </template>
     </VnTable>

src/pages/Order/OrderVolume.vue

@@ -1,156 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
-
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import FetchData from 'components/FetchData.vue';
-import VnLv from 'components/ui/VnLv.vue';
-import CardList from 'components/ui/CardList.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
-
-import { dashIfEmpty } from 'src/filters';
-import axios from 'axios';
-
-const route = useRoute();
-const { t } = useI18n();
-const volumeSummary = ref(null);
-
-const loadVolumes = async (rows) => {
-    const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
-    (rows || []).forEach((order) => {
-        (data.volumes || []).forEach((volume) => {
-            if (order.itemFk === volume.itemFk) {
-                order.volume = volume.volume;
-            }
-        });
-    });
-};
-</script>
-
-<template>
-    <FetchData
-        :url="`Orders/${route.params.id}/getTotalVolume`"
-        @on-fetch="(data) => (volumeSummary = data)"
-        auto-load
-    />
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <div
-                v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
-                class="no-result"
-            >
-                {{ t('globals.noResults') }}
-            </div>
-            <QCard v-else class="order-volume-summary q-pa-lg">
-                <p class="header text-right block">
-                    {{ t('summary') }}
-                </p>
-                <VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
-                <VnLv
-                    :label="t('boxes')"
-                    :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
-                />
-            </QCard>
-            <VnPaginate
-                data-key="OrderCatalogVolume"
-                url="OrderRows"
-                :limit="20"
-                auto-load
-                :filter="{
-                    include: {
-                        relation: 'item',
-                    },
-                    where: { orderFk: route.params.id },
-                }"
-                order="itemFk"
-                @on-fetch="(data) => loadVolumes(data)"
-            >
-                <template #body="{ rows }">
-                    <div class="catalog-list q-mt-xl">
-                        <CardList
-                            v-for="row in rows"
-                            :key="row.id"
-                            :id="row.id"
-                            :title="row?.item?.name"
-                            class="cursor-inherit"
-                        >
-                            <template #list-items>
-                                <div class="q-mb-sm">
-                                    <FetchedTags :item="row.item" :max-length="5" />
-                                </div>
-                                <VnLv :label="t('item')" :value="row.item.id" />
-                                <VnLv :label="t('subName')">
-                                    <template #value>
-                                        <span class="text-uppercase">
-                                            {{ row.item.subName }}
-                                        </span>
-                                    </template>
-                                </VnLv>
-                                <VnLv :label="t('quantity')" :value="row.quantity" />
-                                <VnLv :label="t('volume')" :value="row.volume" />
-                            </template>
-                        </CardList>
-                    </div>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-</template>
-
-<style lang="scss">
-.order-volume-summary {
-    .vn-label-value {
-        display: flex;
-        justify-content: flex-end;
-        gap: 2%;
-
-        .label {
-            color: var(--vn-label-color);
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .value {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-}
-</style>
-<style lang="scss" scoped>
-.header {
-    color: $primary;
-    font-weight: bold;
-    margin-bottom: 25px;
-    font-size: 20px;
-    display: inline-block;
-}
-
-.no-result {
-    font-size: 24px;
-    font-weight: bold;
-    color: var(--vn-label-color);
-    text-align: center;
-}
-</style>
-<i18n>
-en:
-    summary: Summary
-    total: Total
-    boxes: Boxes
-    item: Item
-    subName: Subname
-    quantity: Quantity
-    volume: m³ per quantity
-es:
-    summary: Resumen
-    total: Total
-    boxes: Cajas
-    item: Artículo
-    subName: Subname
-    quantity: Cantidad
-    volume: m³ por cantidad
-</i18n>

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/Worker/Card/WorkerBasicData.vue

@@ -12,9 +12,12 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 const route = useRoute();
 const { t } = useI18n();
 
-const workersOptions = ref([]);
-const countriesOptions = ref([]);
-const educationLevelsOptions = ref([]);
+const educationLevels = ref([]);
+const countries = ref([]);
+const maritalStatus = [
+    { code: 'M', name: t('Married') },
+    { code: 'S', name: t('Single') },
+];
 
 const workerFilter = {
     include: [
@@ -29,44 +32,21 @@ const workerFilter = {
         { relation: 'department', scope: { include: { relation: 'department' } } },
     ],
 };
-const workersFilter = {
-    fields: ['id', 'nickname'],
-    order: 'nickname ASC',
-    limit: 30,
-};
-const countriesFilter = {
-    fields: ['id', 'name', 'code'],
-    order: 'name ASC',
-    limit: 30,
-};
-const educationLevelsFilter = { fields: ['id', 'name'], order: 'name ASC', limit: 30 };
-
-const maritalStatus = [
-    { code: 'M', name: t('Married') },
-    { code: 'S', name: t('Single') },
-];
 </script>
 
 <template>
     <FetchData
-        :filter="workersFilter"
-        @on-fetch="(data) => (workersOptions = data)"
-        auto-load
-        url="Workers/search"
-    />
-    <FetchData
-        :filter="countriesFilter"
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-        url="Countries"
-    />
-    <FetchData
-        :filter="educationLevelsFilter"
-        @on-fetch="(data) => (educationLevelsOptions = data)"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (educationLevels = data)"
         auto-load
         url="EducationLevels"
     />
-
+    <FetchData
+        url="Countries"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (countries = data)"
+        auto-load
+    />
     <FormModel
         :filter="workerFilter"
         :url="`Workers/${route.params.id}`"
@@ -90,7 +70,7 @@ const maritalStatus = [
             <VnRow>
                 <VnSelect
                     :label="t('Boss')"
-                    :options="workersOptions"
+                    url="Workers/search"
                     hide-selected
                     option-label="nickname"
                     option-value="id"
@@ -121,7 +101,7 @@ const maritalStatus = [
             <VnRow>
                 <VnSelect
                     :label="t('Origin country')"
-                    :options="countriesOptions"
+                    :options="countries"
                     hide-selected
                     option-label="name"
                     option-value="id"
@@ -129,7 +109,7 @@ const maritalStatus = [
                 />
                 <VnSelect
                     :label="t('Education level')"
-                    :options="educationLevelsOptions"
+                    :options="educationLevels"
                     hide-selected
                     option-label="name"
                     option-value="id"

src/pages/Worker/Card/WorkerFormation.vue

@@ -108,7 +108,7 @@ const columns = computed(() => [
         :filter="courseFilter"
         :create="{
             urlCreate: 'trainingCourses',
-            title: 'Create trainingCourse',
+            title: t('Create training course'),
             onDataSaved: () => tableRef.reload(),
             formInitialData: {
                 workerFk: entityId,
@@ -122,3 +122,7 @@ const columns = computed(() => [
         :use-model="true"
     />
 </template>
+<i18n>
+es:
+    Create training course: Crear curso de formación
+</i18n>

src/pages/Worker/WorkerFilter.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -26,7 +27,7 @@ const departments = ref();
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params, searchFn }">
+        <template #body="{ params }">
             <QItem>
                 <QItemSection>
                     <VnInput :label="t('FI')" v-model="params.fi" is-outlined
@@ -67,20 +68,17 @@ const departments = ref();
                     <QSkeleton type="QInput" class="full-width" />
                 </QItemSection>
                 <QItemSection v-if="departments">
-                    <QSelect
+                    <VnSelect
                         :label="t('Department')"
                         v-model="params.departmentFk"
-                        @update:model-value="searchFn()"
                         :options="departments"
                         option-value="id"
                         option-label="name"
                         emit-value
                         map-options
-                        use-input
                         dense
                         outlined
                         rounded
-                        :input-debounce="0"
                     />
                 </QItemSection>
             </QItem>
@@ -107,6 +105,7 @@ en:
         userName: User
         extension: Extension
         departmentFk: Department
+        id: ID
 es:
     params:
         search: Contiene
@@ -116,6 +115,7 @@ es:
         userName: Usuario
         extension: Extensión
         departmentFk: Departamento
+        id: ID
     FI: NIF
     First Name: Nombre
     Last Name: Apellidos

src/pages/Worker/WorkerList.vue

@@ -14,6 +14,8 @@ import VnLocation from 'src/components/common/VnLocation.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
 import FetchData from 'src/components/FetchData.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import WorkerFilter from './WorkerFilter.vue';
 
 const { t } = useI18n();
 const tableRef = ref();
@@ -28,14 +30,8 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'id',
-        label: t('tableColumns.id'),
-        columnFilter: {
-            alias: 'w',
-            inWhere: true,
-        },
-        chip: {
-            condition: () => true,
-        },
+        label: t('id'),
+        field: 'id',
         isId: true,
     },
     {
@@ -44,7 +40,7 @@ const columns = computed(() => [
         label: t('tableColumns.name'),
         isTitle: true,
         columnFilter: {
-            name: 'search',
+            name: 'firstName',
         },
     },
     {
@@ -54,8 +50,7 @@ const columns = computed(() => [
         cardVisible: true,
         columnFilter: {
             component: 'select',
-            inWhere: true,
-            alias: 'wd',
+            name: 'departmentFk',
             attrs: {
                 url: 'Departments',
             },
@@ -130,6 +125,11 @@ function uppercaseStreetModel(data) {
         @on-fetch="(data) => (bankEntitiesOptions = data)"
         auto-load
     />
+    <RightMenu>
+        <template #right-panel>
+            <WorkerFilter data-key="Worker" />
+        </template>
+    </RightMenu>
     <VnTable
         ref="tableRef"
         data-key="Worker"
@@ -145,6 +145,7 @@ function uppercaseStreetModel(data) {
         :columns="columns"
         default-mode="table"
         redirect="worker"
+        :right-search="false"
         auto-load
     >
         <template #more-create-dialog="{ data }">

src/router/index.js

@@ -46,7 +46,7 @@ export { Router };
 export default route(function (/* { store, ssrContext } */) {
     Router.beforeEach(async (to, from, next) => {
         const { isLoggedIn } = session;
-        const outLayout = ['Login', 'TwoFactor', 'VerifyEmail'];
+        const outLayout = Router.options.routes[0].children.map((r) => r.name);
         if (!isLoggedIn() && !outLayout.includes(to.name)) {
             return next({ name: 'Login', query: { redirect: to.fullPath } });
         }

src/router/modules/account.js

@@ -65,13 +65,13 @@ export default {
                     component: () => import('src/pages/Account/AccountAliasList.vue'),
                 },
                 {
-                    path: 'connections',
-                    name: 'AccountConnections',
+                    path: 'acls',
+                    name: 'AccountAcls',
                     meta: {
-                        title: 'connections',
+                        title: 'acls',
                         icon: 'check',
                     },
-                    component: () => import('src/pages/Account/AccountConnections.vue'),
+                    component: () => import('src/pages/Account/AccountAcls.vue'),
                 },
                 {
                     path: 'accounts',
@@ -104,13 +104,13 @@ export default {
                     component: () => import('src/pages/Account/AccountSamba.vue'),
                 },
                 {
-                    path: 'acls',
-                    name: 'AccountAcls',
+                    path: 'connections',
+                    name: 'AccountConnections',
                     meta: {
-                        title: 'acls',
-                        icon: 'check',
+                        title: 'connections',
+                        icon: 'share',
                     },
-                    component: () => import('src/pages/Account/AccountAcls.vue'),
+                    component: () => import('src/pages/Account/AccountConnections.vue'),
                 },
                 {
                     path: 'acl-form',

src/router/modules/order.js

@@ -63,7 +63,7 @@ export default {
                         title: 'basicData',
                         icon: 'vn:settings',
                     },
-                    component: () => import('src/pages/Order/Card/OrderForm.vue'),
+                    component: () => import('src/pages/Order/Card/OrderBasicData.vue'),
                 },
                 {
                     name: 'OrderCatalog',
@@ -72,7 +72,7 @@ export default {
                         title: 'catalog',
                         icon: 'vn:basket',
                     },
-                    component: () => import('src/pages/Order/OrderCatalog.vue'),
+                    component: () => import('src/pages/Order/Card/OrderCatalog.vue'),
                 },
                 {
                     name: 'OrderVolume',
@@ -81,7 +81,7 @@ export default {
                         title: 'volume',
                         icon: 'vn:volume',
                     },
-                    component: () => import('src/pages/Order/OrderVolume.vue'),
+                    component: () => import('src/pages/Order/Card/OrderVolume.vue'),
                 },
                 {
                     name: 'OrderLines',
@@ -90,7 +90,7 @@ export default {
                         title: 'lines',
                         icon: 'vn:lines',
                     },
-                    component: () => import('src/pages/Order/OrderLines.vue'),
+                    component: () => import('src/pages/Order/Card/OrderLines.vue'),
                 },
             ],
         },

src/router/routes.js

@@ -46,6 +46,18 @@ const routes = [
                 meta: { title: 'verifyEmail' },
                 component: () => import('../pages/Login/VerifyEmail.vue'),
             },
+            {
+                path: '/recoverPassword',
+                name: 'RecoverPassword',
+                meta: { title: 'recoverPassword' },
+                component: () => import('../pages/Login/RecoverPassword.vue'),
+            },
+            {
+                path: '/resetPassword',
+                name: 'ResetPassword',
+                meta: { title: 'resetPassword' },
+                component: () => import('../pages/Login/ResetPassword.vue'),
+            },
         ],
     },
     {

test/cypress/integration/outLogin/logout.spec.js

@@ -8,7 +8,7 @@ describe('Logout', () => {
     describe('by user', () => {
         it('should logout', () => {
             cy.get('#user').click();
-            cy.get('.block').click();
+            cy.get('#logout').click();
         });
     });
     describe('not user', () => {

test/cypress/integration/outLogin/recoverPassword.spec.js

@@ -0,0 +1,54 @@
+/// <reference types="cypress" />
+describe('Recover Password', () => {
+    const username = 'trainee';
+    beforeEach(() => {
+        cy.visit('/#/login');
+        cy.get('#switchLanguage').click();
+        cy.get('.q-menu > :nth-child(1) > .q-item').click();
+    });
+
+    it('should go to recover password section and send notification', () => {
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get(`a[href="#/recoverPassword?user=${username}"]`).click();
+
+        cy.waitForElement('input[aria-label="User or recovery email"]');
+        cy.get('input[aria-label="User or recovery email"]').should(
+            'have.value',
+            username
+        );
+
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should('have.text', 'Notification sent');
+    });
+
+    it('should change password to user', () => {
+        // Get token from mail
+        cy.request(
+            `http://localhost:3000/api/Mails?filter=%7B%22where%22%3A%20%7B%22receiver%22%3A%20%22${username}%40mydomain.com%22%7D%2C%20%22order%22%3A%20%5B%22id%20DESC%22%5D%7D&access_token=DEFAULT_TOKEN`
+        ).then((response) => {
+            const regex = /access_token=([a-zA-Z0-9]+)/;
+            const [match] = response.body[0].body.match(regex);
+
+            const resetUrl = '/#/resetPassword?' + match;
+            cy.visit(resetUrl);
+        });
+
+        // Change password
+        const newPassword = 'test.1234';
+        cy.waitForElement('input[aria-label="Password"]');
+        cy.waitForElement('input[aria-label="Repeat password"]');
+        cy.get('input[aria-label="Password"]').type(newPassword);
+        cy.get('input[aria-label="Repeat password"]').type(newPassword);
+
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should('have.text', 'Password changed');
+
+        // Try to login successfully
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get('input[aria-label="Password"]').type(newPassword);
+        cy.get('button[type="submit"]').click();
+        cy.url().should('contain', '/dashboard');
+
+        // ❗The password cannot be returned because "nightmare" does not meet the requirements
+    });
+});

test/cypress/integration/outLogin/twoFactor.spec.js

@@ -0,0 +1,56 @@
+/// <reference types="cypress" />
+describe('Two Factor', () => {
+    const username = 'sysadmin';
+    const userId = 66;
+    beforeEach(() => {
+        cy.visit('/#/login');
+        cy.get('#switchLanguage').click();
+        cy.get('.q-menu > :nth-child(1) > .q-item').click();
+    });
+
+    it('should enable two factor to sysadmin', () => {
+        cy.request(
+            'PATCH',
+            `http://localhost:3000/api/VnUsers/${userId}/update-user?access_token=DEFAULT_TOKEN`,
+            { twoFactor: 'email' }
+        );
+    });
+
+    it('should fail when login with incorrect two factor', () => {
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get('input[aria-label="Password"]').type('nightmare');
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Two-factor verification required'
+        );
+
+        cy.get('input[type="text"]').type('123456');
+        cy.get('button[type="submit"]').click();
+        cy.url().should('contain', '/twoFactor');
+    });
+
+    it('should login with correct two factor', () => {
+        cy.get('input[aria-label="Username"]').type(username);
+        cy.get('input[aria-label="Password"]').type('nightmare');
+        cy.get('button[type="submit"]').click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Two-factor verification required'
+        );
+
+        // Get code from mail
+        cy.request(
+            `http://localhost:3000/api/Mails?filter=%7B%22where%22%3A%20%7B%22receiver%22%3A%20%22${username}%40mydomain.com%22%7D%2C%20%22order%22%3A%20%5B%22id%20DESC%22%5D%7D&access_token=DEFAULT_TOKEN`
+        ).then((response) => {
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = response.body[0].body;
+            const codeElement = tempDiv.querySelector('.code');
+            const code = codeElement ? codeElement.textContent.trim() : null;
+
+            cy.get('input[type="text"]').type(code);
+            cy.get('button[type="submit"]').click();
+            cy.url().should('contain', '/dashboard');
+        });
+    });
+});

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

@@ -1,4 +1,7 @@
 describe('WorkerList', () => {
+    const inputName = '.q-drawer .q-form input[aria-label="First Name"]';
+    const searchBtn = '.q-drawer button:nth-child(3)';
+    const descriptorTitle = '.descriptor .title span';
     beforeEach(() => {
         cy.viewport(1280, 720);
         cy.login('developer');
@@ -6,6 +9,11 @@ describe('WorkerList', () => {
     });
 
     it('should open the worker summary', () => {
-        cy.get('.q-drawer .q-form input[aria-label="Name"]').type('jessica jones{enter}');
+        cy.get(inputName).type('jessica{enter}');
+        cy.get(searchBtn).click();
+        cy.intercept('GET', /\/api\/Workers\/\d+/).as('worker');
+        cy.wait('@worker').then(() =>
+            cy.get(descriptorTitle).should('include.text', 'Jessica')
+        );
     });
 });

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

@@ -44,10 +44,6 @@ describe('Login', () => {
 
     it('should not set the token into session if any error occurred', async () => {
         vi.spyOn(axios, 'post').mockReturnValue({ data: null });
-        vi.spyOn(vm.quasar, 'notify');
-
         await vm.onSubmit();
-
-        expect(vm.quasar.notify).not.toHaveBeenCalled();
     });
 });