From 062de82bca0dff200083ec0b94500ab454a22255 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 28 May 2024 17:30:39 -0300
Subject: [PATCH 01/22] Account list

---
 src/pages/Account/AccountFilter.vue       | 205 ++++------------------
 src/pages/Account/AccountList.vue         |  52 ++++--
 src/pages/Account/Card/AccountSummary.vue |  23 +--
 src/pages/Account/locale/en.yml           |   4 +
 src/pages/Account/locale/es.yml           |   6 +-
 5 files changed, 80 insertions(+), 210 deletions(-)

diff --git a/src/pages/Account/AccountFilter.vue b/src/pages/Account/AccountFilter.vue
index 23b72266c..0a93afab2 100644
--- a/src/pages/Account/AccountFilter.vue
+++ b/src/pages/Account/AccountFilter.vue
@@ -6,7 +6,6 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -16,22 +15,24 @@ const props = defineProps({
     },
 });
 
-const workers = ref();
-const states = ref();
+const rolesOptions = ref([]);
 </script>
 
 <template>
-    <FetchData url="AccountStates" @on-fetch="(data) => (states = data)" auto-load />
     <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (workers = data)"
+        url="VnRoles"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (rolesOptions = data)"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :search-button="true"
+        :hidden-tags="['search']"
+    >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <strong>{{ t(`account.filterPanel.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
@@ -39,187 +40,43 @@ const states = ref();
             <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInput
-                        :label="t('Customer ID')"
-                        v-model="params.clientFk"
+                        :label="t('account.filterPanel.name')"
+                        v-model="params.name"
                         lazy-rules
                         is-outlined
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="xs"></QIcon> </template
-                    ></VnInput>
+                    />
                 </QItemSection>
             </QItem>
-            <QItem class="q-mb-sm">
+            <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInput
-                        :label="t('Client Name')"
-                        v-model="params.clientName"
+                        :label="t('account.filterPanel.nickname')"
+                        v-model="params.nickname"
                         lazy-rules
                         is-outlined
                     />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <VnSelect
-                        :label="t('Salesperson')"
-                        v-model="params.salesPersonFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <VnSelect
-                        :label="t('Attender')"
-                        v-model="params.attenderFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <VnSelect
-                        :label="t('Responsible')"
-                        v-model="params.accountResponsibleFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!states">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="states">
-                    <VnSelect
-                        :label="t('State')"
-                        v-model="params.accountStateFk"
-                        @update:model-value="searchFn()"
-                        :options="states"
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        map-options
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
                 <QItemSection>
-                    <QCheckbox
-                        v-model="params.myTeam"
-                        :label="t('myTeam')"
-                        toggle-indeterminate
+                    <VnSelect
+                        :label="t('account.filterPanel.roleFk')"
+                        v-model="params.roleFk"
+                        @update:model-value="searchFn()"
+                        :options="rolesOptions"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        map-options
+                        use-input
+                        hide-selected
+                        dense
+                        outlined
+                        rounded
+                        :input-debounce="0"
                     />
                 </QItemSection>
             </QItem>
-            <QSeparator />
-            <QExpansionItem :label="t('More options')" expand-separator>
-                <!-- <QItem>
-                        <QItemSection>
-                            <qSelect
-                                :label="t('Item')"
-                                v-model="params.itemFk"
-                                :options="items"
-                                :loading="loading"
-                                @filter="filterFn"
-                                @virtual-scroll="onScroll"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </QItemSection>
-                    </QItem> -->
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.created"
-                            :label="t('Created')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>
-
-<i18n>
-en:
-    params:
-        search: Contains
-        clientFk: Customer
-        clientName: Customer
-        salesPersonFk: Salesperson
-        attenderFk: Attender
-        accountResponsibleFk: Responsible
-        accountStateFk: State
-        created: Created
-    myTeam: My team
-es:
-    params:
-        search: Contiene
-        clientFk: Cliente
-        clientName: Cliente
-        salesPersonFk: Comercial
-        attenderFk: Asistente
-        accountResponsibleFk: Responsable
-        accountStateFk: Estado
-        created: Creada
-    Customer ID: ID cliente
-    Client Name: Nombre del cliente
-    Salesperson: Comercial
-    Attender: Asistente
-    Responsible: Responsable
-    State: Estado
-    Item: Artículo
-    Created: Creada
-    More options: Más opciones
-    myTeam: Mi equipo
-</i18n>
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index 56d54a47d..e94f6c7a5 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -1,34 +1,53 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'filters/index';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import AccountFilter from './AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import AccountSummary from './Card/AccountSummary.vue';
+import AccountFilter from './AccountFilter.vue';
+
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useStateStore } from 'stores/useStateStore';
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
+
 const filter = {
     fields: ['id', 'nickname', 'name', 'role'],
     include: { relation: 'role', scope: { fields: ['id', 'name'] } },
 };
 
-function getApiUrl() {
-    return new URL(window.location).origin;
-}
-function navigate(event, id) {
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { id: value }
+                : {
+                      or: [
+                          { name: { like: `%${value}%` } },
+                          { nickname: { like: `%${value}%` } },
+                      ],
+                  };
+        case 'name':
+        case 'nickname':
+            return { [param]: { like: `%${value}%` } };
+        case 'roleFk':
+            return { [param]: value };
+    }
+};
+
+const getApiUrl = () => new URL(window.location).origin;
+
+const navigate = (event, id) => {
     if (event.ctrlKey || event.metaKey)
         return window.open(`${getApiUrl()}/#/account/${id}/summary`);
     router.push({ path: `/account/${id}` });
-}
+};
 </script>
 
 <template>
@@ -36,6 +55,8 @@ function navigate(event, id) {
         <Teleport to="#searchbar">
             <VnSearchbar
                 data-key="AccountList"
+                url="VnUsers/preview"
+                :expr-builder="exprBuilder"
                 :label="t('account.search')"
                 :info="t('You can search by account id or customer name')"
             />
@@ -58,7 +79,7 @@ function navigate(event, id) {
     </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <!-- <AccountFilter data-key="AccountList" /> -->
+            <AccountFilter data-key="AccountList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
@@ -71,11 +92,11 @@ function navigate(event, id) {
             >
                 <template #body="{ rows }">
                     <CardList
+                        v-for="row of rows"
                         :id="row.id"
                         :key="row.id"
-                        :title="row.clientName"
+                        :title="row.nickname"
                         @click="navigate($event, row.id)"
-                        v-for="row of rows"
                     >
                         <template #list-items>
                             <VnLv :label="t('account.card.name')" :value="row.nickname">
@@ -87,13 +108,6 @@ function navigate(event, id) {
                             </VnLv>
                         </template>
                         <template #actions>
-                            <QBtn
-                                :label="t('globals.description')"
-                                @click.stop
-                                outline
-                                style="margin-top: 15px"
-                            >
-                            </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
                                 @click.stop="viewSummary(row.id, AccountSummary)"
diff --git a/src/pages/Account/Card/AccountSummary.vue b/src/pages/Account/Card/AccountSummary.vue
index fb2bf6a2a..1c7f79f0e 100644
--- a/src/pages/Account/Card/AccountSummary.vue
+++ b/src/pages/Account/Card/AccountSummary.vue
@@ -1,22 +1,15 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { toDate, toCurrency } from 'src/filters';
+
 import CardSummary from 'components/ui/CardSummary.vue';
-import FetchData from 'components/FetchData.vue';
-import { getUrl } from 'src/composables/getUrl';
-import { useSession } from 'src/composables/useSession';
 import VnLv from 'src/components/ui/VnLv.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import VnTitle from 'src/components/common/VnTitle.vue';
-import axios from 'axios';
-import dashIfEmpty from 'src/filters/dashIfEmpty';
+
 import { useArrayData } from 'src/composables/useArrayData';
 
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 
 const $props = defineProps({
     id: {
@@ -38,7 +31,7 @@ const filter = {
 <template>
     <CardSummary
         ref="AccountSummary"
-        :url="`VnUsers/preview`"
+        url="VnUsers/preview"
         :filter="filter"
         @on-fetch="(data) => (account = data)"
     >
@@ -46,13 +39,13 @@ const filter = {
         <template #body>
             <QCard class="vn-one">
                 <QCardSection class="q-pa-none">
-                    <a
+                    <router-link
+                        :to="{ name: 'AccountBasicData', params: { id: entityId } }"
                         class="header header-link"
-                        :href="`#/VnUser/${entityId}/basic-data`"
                     >
                         {{ t('globals.pageTitles.basicData') }}
                         <QIcon name="open_in_new" />
-                    </a>
+                    </router-link>
                 </QCardSection>
                 <VnLv :label="t('account.card.nickname')" :value="account.nickname" />
                 <VnLv :label="t('account.card.role')" :value="account.role.name" />
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 2464d3728..a110c52fd 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -32,6 +32,10 @@ account:
             sync: Sync
             delete: Delete
     search: Search user
+    filterPanel:
+        name: Name
+        nickname: User
+        roleFk: Role
 role:
     pageTitles:
         inheritedRoles: Inherited Roles
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index dd242fe63..aeff20365 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -40,8 +40,11 @@ account:
                 name: Eliminar
                 title: El usuario será eliminado
                 subtitle: ¿Seguro que quieres continuar?
-
     search: Buscar usuario
+    filterPanel:
+        name: Nombre
+        nickname: Usuario
+        roleFk: Rol
 role:
     pageTitles:
         inheritedRoles: Roles heredados
@@ -51,7 +54,6 @@ role:
         description: Descripción
         id: Idd
         name: Nombre
-
 ldap:
     enableSync: Habilitar sincronización
     server: Servidor
-- 
2.40.1


From fd7f46cbe2aad0c08589e9dd425534c3953e620c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 28 May 2024 18:33:18 -0300
Subject: [PATCH 02/22] several changes

---
 src/pages/Account/AccountFilter.vue |  8 ++++----
 src/pages/Account/AccountList.vue   | 13 +++++++++++++
 src/pages/Account/locale/en.yml     |  7 +++----
 src/pages/Account/locale/es.yml     |  7 +++----
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/pages/Account/AccountFilter.vue b/src/pages/Account/AccountFilter.vue
index 0a93afab2..0cddd3253 100644
--- a/src/pages/Account/AccountFilter.vue
+++ b/src/pages/Account/AccountFilter.vue
@@ -32,7 +32,7 @@ const rolesOptions = ref([]);
     >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
-                <strong>{{ t(`account.filterPanel.${tag.label}`) }}: </strong>
+                <strong>{{ t(`account.card.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
@@ -40,7 +40,7 @@ const rolesOptions = ref([]);
             <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInput
-                        :label="t('account.filterPanel.name')"
+                        :label="t('account.card.name')"
                         v-model="params.name"
                         lazy-rules
                         is-outlined
@@ -50,7 +50,7 @@ const rolesOptions = ref([]);
             <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInput
-                        :label="t('account.filterPanel.nickname')"
+                        :label="t('account.card.nickname')"
                         v-model="params.nickname"
                         lazy-rules
                         is-outlined
@@ -60,7 +60,7 @@ const rolesOptions = ref([]);
             <QItem class="q-mb-sm">
                 <QItemSection>
                     <VnSelect
-                        :label="t('account.filterPanel.roleFk')"
+                        :label="t('account.card.nickname')"
                         v-model="params.roleFk"
                         @update:model-value="searchFn()"
                         :options="rolesOptions"
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index e94f6c7a5..d173f1e09 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { computed } from 'vue';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -11,11 +12,15 @@ import AccountFilter from './AccountFilter.vue';
 
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useStateStore } from 'stores/useStateStore';
+import { useRole } from 'src/composables/useRole';
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
+const roleState = useRole();
+
+const isItManagement = computed(() => roleState.hasAny(['itManagement']));
 
 const filter = {
     fields: ['id', 'nickname', 'name', 'role'],
@@ -48,6 +53,8 @@ const navigate = (event, id) => {
         return window.open(`${getApiUrl()}/#/account/${id}/summary`);
     router.push({ path: `/account/${id}` });
 };
+
+const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
 </script>
 
 <template>
@@ -119,5 +126,11 @@ const navigate = (event, id) => {
                 </template>
             </VnPaginate>
         </div>
+        <QPageSticky v-if="isItManagement" :offset="[20, 20]">
+            <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
+            <QTooltip class="text-no-wrap">
+                {{ t('account.card.newUser') }}
+            </QTooltip>
+        </QPageSticky>
     </QPage>
 </template>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index a110c52fd..6cad60a0a 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -15,6 +15,7 @@ account:
         privileges: Privileges
         mailAlias: Mail Alias
         mailForwarding: Mail Forwarding
+        accountCreate: New user
     card:
         name: Name
         nickname: User
@@ -22,6 +23,8 @@ account:
         email: Email
         alias: Alias
         lang: Language
+        roleFk: Role
+        newUser: New user
         actions:
             setPassword: Set password
             disableAccount:
@@ -32,10 +35,6 @@ account:
             sync: Sync
             delete: Delete
     search: Search user
-    filterPanel:
-        name: Name
-        nickname: User
-        roleFk: Role
 role:
     pageTitles:
         inheritedRoles: Inherited Roles
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index aeff20365..f3b83adbc 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -15,6 +15,7 @@ account:
         privileges: Privilegios
         mailAlias: Alias de correo
         mailForwarding: Reenvío de correo
+        accountCreate: Nuevo usuario
     card:
         nickname: Usuario
         name: Nombre
@@ -22,6 +23,8 @@ account:
         email: Mail
         alias: Alias
         lang: dioma
+        roleFk: Rol
+        newUser: Nuevo usuario
         actions:
             setPassword: Establecer contraseña
             disableAccount:
@@ -41,10 +44,6 @@ account:
                 title: El usuario será eliminado
                 subtitle: ¿Seguro que quieres continuar?
     search: Buscar usuario
-    filterPanel:
-        name: Nombre
-        nickname: Usuario
-        roleFk: Rol
 role:
     pageTitles:
         inheritedRoles: Roles heredados
-- 
2.40.1


From 5c9f62bd59fbfb0cb4e220138a14a2ac3b1170c7 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 29 May 2024 08:26:07 -0300
Subject: [PATCH 03/22] Remove unnecesary files

---
 src/pages/Account/AccountAccounts.vue         | 111 ---------
 src/pages/Account/AccountAcls.vue             | 114 ---------
 src/pages/Account/AccountAlias.vue            |  75 ------
 src/pages/Account/AccountConnections.vue      |  75 ------
 src/pages/Account/AccountCreate.vue           | 159 -------------
 src/pages/Account/AccountLdap.vue             |  65 -----
 src/pages/Account/AccountSamba.vue            |  82 -------
 src/pages/Account/Role/AccountRoles.vue       |  95 --------
 src/pages/Account/Role/AccountRolesFilter.vue | 225 ------------------
 .../Account/Role/Card/InheritedRoles.vue      |   6 -
 src/pages/Account/Role/Card/RoleBasicData.vue |  29 ---
 src/pages/Account/Role/Card/RoleCard.vue      |  15 --
 .../Account/Role/Card/RoleDescriptor.vue      |  93 --------
 src/pages/Account/Role/Card/RoleForm.vue      |  47 ----
 src/pages/Account/Role/Card/RoleLog.vue       |   6 -
 src/pages/Account/Role/Card/RoleSummary.vue   |  98 --------
 src/pages/Account/Role/Card/SubRoles.vue      |   6 -
 17 files changed, 1301 deletions(-)
 delete mode 100644 src/pages/Account/AccountAccounts.vue
 delete mode 100644 src/pages/Account/AccountAcls.vue
 delete mode 100644 src/pages/Account/AccountAlias.vue
 delete mode 100644 src/pages/Account/AccountConnections.vue
 delete mode 100644 src/pages/Account/AccountCreate.vue
 delete mode 100644 src/pages/Account/AccountLdap.vue
 delete mode 100644 src/pages/Account/AccountSamba.vue
 delete mode 100644 src/pages/Account/Role/AccountRoles.vue
 delete mode 100644 src/pages/Account/Role/AccountRolesFilter.vue
 delete mode 100644 src/pages/Account/Role/Card/InheritedRoles.vue
 delete mode 100644 src/pages/Account/Role/Card/RoleBasicData.vue
 delete mode 100644 src/pages/Account/Role/Card/RoleCard.vue
 delete mode 100644 src/pages/Account/Role/Card/RoleDescriptor.vue
 delete mode 100644 src/pages/Account/Role/Card/RoleForm.vue
 delete mode 100644 src/pages/Account/Role/Card/RoleLog.vue
 delete mode 100644 src/pages/Account/Role/Card/RoleSummary.vue
 delete mode 100644 src/pages/Account/Role/Card/SubRoles.vue

diff --git a/src/pages/Account/AccountAccounts.vue b/src/pages/Account/AccountAccounts.vue
deleted file mode 100644
index dc6690487..000000000
--- a/src/pages/Account/AccountAccounts.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<script setup>
-import { reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'src/filters';
-
-const { t } = useI18n();
-
-const newAccountForm = reactive({
-    supplierFk: null,
-    travelFk: null,
-    companyFk: null,
-});
-</script>
-
-<template>
-    <QPage>
-        <VnSubToolbar />
-        <pre>TODO <b>Cuentas</b></pre>
-
-        <FormModel
-            url-create="Entries"
-            model="account"
-            :form-initial-data="newAccountForm"
-        >
-            <template #form="{ data, validate }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('Supplier')"
-                            class="full-width"
-                            v-model="data.supplierFk"
-                            :options="suppliersOptions"
-                            option-value="id"
-                            option-label="nickname"
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.supplierFk')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            #{{ scope.opt?.id }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('Travel')"
-                            class="full-width"
-                            v-model="data.travelFk"
-                            :options="travelsOptions"
-                            option-value="id"
-                            option-label="warehouseInName"
-                            map-options
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.travelFk')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            >{{ scope.opt?.agencyModeName }} -
-                                            {{ scope.opt?.warehouseInName }} ({{
-                                                toDate(scope.opt?.shipped)
-                                            }}) &#x2192;
-                                            {{ scope.opt?.warehouseOutName }} ({{
-                                                toDate(scope.opt?.landed)
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('Company')"
-                            class="full-width"
-                            v-model="data.companyFk"
-                            :options="companiesOptions"
-                            option-value="id"
-                            option-label="code"
-                            map-options
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.companyFk')"
-                        />
-                    </div>
-                </VnRow>
-            </template>
-        </FormModel>
-    </QPage>
-</template>
diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
deleted file mode 100644
index 8de4d3dc1..000000000
--- a/src/pages/Account/AccountAcls.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import AccountFilter from './AccountFilter.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import AccountSummary from './Card/AccountSummary.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-
-const stateStore = useStateStore();
-const router = useRouter();
-const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-
-const STATE_COLOR = {
-    pending: 'warning',
-    managed: 'info',
-    resolved: 'positive',
-};
-function getApiUrl() {
-    return new URL(window.location).origin;
-}
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-function navigate(event, id) {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
-}
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" />
-        </QScrollArea>
-    </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="AccountList"
-                url="Accounts/filter"
-                :order="['priority ASC', 'created DESC']"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.clientName"
-                        @click="navigate($event, row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('account.list.customer')">
-                                <template #value>
-                                    <span class="link" @click.stop>
-                                        {{ row.clientName }}
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv :label="t('account.list.assignedTo')">
-                                <template #value>
-                                    <span @click.stop>
-                                        <VnUserLink
-                                            :name="row.workerName"
-                                            :worker-id="row.workerFk"
-                                        />
-                                    </span>
-                                </template>
-                            </VnLv>
-                            <VnLv
-                                :label="t('account.list.created')"
-                                :value="toDate(row.created)"
-                            />
-                            <VnLv :label="t('account.list.state')">
-                                <template #value>
-                                    <QBadge
-                                        text-color="black"
-                                        :color="stateColor(row.stateCode)"
-                                        dense
-                                    >
-                                        {{ row.stateDescription }}
-                                    </QBadge>
-                                </template>
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('globals.description')"
-                                @click.stop
-                                outline
-                                style="margin-top: 15px"
-                            >
-                                <CustomerDescriptorProxy :id="row.clientFk" />
-                            </QBtn>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AccountSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-</template>
diff --git a/src/pages/Account/AccountAlias.vue b/src/pages/Account/AccountAlias.vue
deleted file mode 100644
index dd484bc8c..000000000
--- a/src/pages/Account/AccountAlias.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup>
-import { onMounted, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-
-const { t } = useI18n();
-const filter = computed(() => ({
-    fields: ['id', 'created', 'userId'],
-    include: { relation: 'user', scope: { fields: ['username'] } },
-    order: 'created DESC',
-    limit: 20,
-}));
-const $props = defineProps({
-    id: {
-        type: Number,
-        default: 0,
-    },
-});
-
-const urlPath = computed(() => `AccessTokens`);
-const entityId = computed(() => $props.id || useRoute().params.id);
-
-onMounted(async () => {});
-</script>
-
-<template>
-    <QPage class="column items-center q-pa-md">
-        <div class="full-width" style="max-width: 400px">
-            <VnPaginate
-                ref="paginateRef"
-                data-key="AccessTokens"
-                :filter="filter"
-                :url="urlPath"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <QTable :rows="data" :columns="columns" hide-header>
-                        <template #body="{ row, rowIndex }">
-                            <QTr>
-                                <QTd>
-                                    <span>{{ row.warehouse?.name }}</span>
-                                </QTd>
-                                <QTd style="width: 50px !important">
-                                    <QIcon
-                                        name="delete"
-                                        size="sm"
-                                        class="cursor-pointer"
-                                        color="primary"
-                                        @click="
-                                            openConfirmationModal(
-                                                t('warehouses.deleteTitle'),
-                                                t('warehouses.deleteSubtitle'),
-                                                () => deleteWarehouse(row, rows, rowIndex)
-                                            )
-                                        "
-                                    >
-                                        <QTooltip>
-                                            {{ t('warehouses.delete') }}
-                                        </QTooltip>
-                                    </QIcon>
-                                </QTd>
-                            </QTr>
-                        </template>
-                    </QTable>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="createMailAlias()">
-                <QTooltip>{{ t('warehouses.add') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
-</template>
diff --git a/src/pages/Account/AccountConnections.vue b/src/pages/Account/AccountConnections.vue
deleted file mode 100644
index 1128205b8..000000000
--- a/src/pages/Account/AccountConnections.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup>
-import { onMounted, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import VnPaginate from 'components/ui/VnPaginate.vue';
-
-const { t } = useI18n();
-const filter = computed(() => ({
-    fields: ['id', 'created', 'userId'],
-    include: { relation: 'user', scope: { fields: ['username'] } },
-    order: 'created DESC',
-    limit: 20,
-}));
-const $props = defineProps({
-    id: {
-        type: Number,
-        default: 0,
-    },
-});
-
-const urlPath = computed(() => `AccessTokens`);
-const entityId = computed(() => $props.id || useRoute().params.id);
-
-onMounted(async () => {});
-</script>
-
-<template>
-    <QPage class="column items-center q-pa-md">
-        <div class="full-width" style="max-width: 400px">
-            <VnPaginate
-                ref="paginateRef"
-                data-key="AccessTokens"
-                :filter="filter"
-                :url="urlPath"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <QTable :rows="data" :columns="columns" hide-header>
-                        <template #body="{ row, rowIndex }">
-                            <QTr>
-                                <QTd>
-                                    <span>{{ row.warehouse?.name }}</span>
-                                </QTd>
-                                <QTd style="width: 50px !important">
-                                    <QIcon
-                                        name="delete"
-                                        size="sm"
-                                        class="cursor-pointer"
-                                        color="primary"
-                                        @click="
-                                            openConfirmationModal(
-                                                t('warehouses.deleteTitle'),
-                                                t('warehouses.deleteSubtitle'),
-                                                () => deleteWarehouse(row, rows, rowIndex)
-                                            )
-                                        "
-                                    >
-                                        <QTooltip>
-                                            {{ t('warehouses.delete') }}
-                                        </QTooltip>
-                                    </QIcon>
-                                </QTd>
-                            </QTr>
-                        </template>
-                    </QTable>
-                </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="refresh" color="primary" @click="refresh()">
-                <QTooltip>{{ t('warehouses.refresh') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
-</template>
diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
deleted file mode 100644
index ca69fbb00..000000000
--- a/src/pages/Account/AccountCreate.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<script setup>
-import { reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import { useState } from 'src/composables/useState';
-import { toDate } from 'src/filters';
-
-const state = useState();
-const { t } = useI18n();
-const route = useRoute();
-const stateStore = useStateStore();
-
-const user = state.getUser();
-const newAccountForm = reactive({
-    supplierFk: null,
-    travelFk: Number(route.query?.travelFk) || null,
-    companyFk: user.value.companyFk || null,
-});
-const suppliersOptions = ref([]);
-const travelsOptions = ref([]);
-const companiesOptions = ref([]);
-</script>
-
-<template>
-    <FetchData
-        url="Suppliers"
-        :filter="{ fields: ['id', 'nickname'] }"
-        order="nickname"
-        @on-fetch="(data) => (suppliersOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Travels/filter"
-        :filter="{ fields: ['id', 'warehouseInName'] }"
-        order="id"
-        @on-fetch="(data) => (travelsOptions = data)"
-        auto-load
-    />
-    <FetchData
-        ref="companiesRef"
-        url="Companies"
-        :filter="{ fields: ['id', 'code'] }"
-        order="code"
-        @on-fetch="(data) => (companiesOptions = data)"
-        auto-load
-    />
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                url="Entries/filter"
-                custom-route-redirect-name="AccountSummary"
-                data-key="AccountSummary"
-                :label="t('Search entries')"
-                :info="t('You can search by account reference')"
-            />
-        </Teleport>
-    </template>
-    <QPage>
-        <VnSubToolbar />
-        <FormModel
-            url-create="Entries"
-            model="account"
-            :form-initial-data="newAccountForm"
-        >
-            <template #form="{ data, validate }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('Supplier')"
-                            class="full-width"
-                            v-model="data.supplierFk"
-                            :options="suppliersOptions"
-                            option-value="id"
-                            option-label="nickname"
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.supplierFk')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            #{{ scope.opt?.id }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('Travel')"
-                            class="full-width"
-                            v-model="data.travelFk"
-                            :options="travelsOptions"
-                            option-value="id"
-                            option-label="warehouseInName"
-                            map-options
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.travelFk')"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            >{{ scope.opt?.agencyModeName }} -
-                                            {{ scope.opt?.warehouseInName }} ({{
-                                                toDate(scope.opt?.shipped)
-                                            }}) &#x2192;
-                                            {{ scope.opt?.warehouseOutName }} ({{
-                                                toDate(scope.opt?.landed)
-                                            }})</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('Company')"
-                            class="full-width"
-                            v-model="data.companyFk"
-                            :options="companiesOptions"
-                            option-value="id"
-                            option-label="code"
-                            map-options
-                            hide-selected
-                            :required="true"
-                            :rules="validate('account.companyFk')"
-                        />
-                    </div>
-                </VnRow>
-            </template>
-        </FormModel>
-    </QPage>
-</template>
-
-<i18n>
-    es:
-        Supplier: Proveedor
-        Travel: Envío
-        Company: Empresa
-</i18n>
diff --git a/src/pages/Account/AccountLdap.vue b/src/pages/Account/AccountLdap.vue
deleted file mode 100644
index 4d5fdfb34..000000000
--- a/src/pages/Account/AccountLdap.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup>
-import { reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-const { t } = useI18n();
-
-const newAccountForm = reactive({
-    supplierFk: null,
-    travelFk: null,
-    companyFk: null,
-});
-</script>
-
-<template>
-    <QPage>
-        <VnSubToolbar> </VnSubToolbar>
-        <pre>TODO <b>LDAP</b></pre>
-        <FormModel
-            url-create="Entries"
-            model="account"
-            :form-initial-data="newAccountForm"
-        >
-            <template #moreActions>
-                <QBtnGroup push class="q-gutter-x-sm">
-                    <QBtn round flat color="primary" :label="t('ldap.testConnection')">
-                        <QTooltip>
-                            {{ t('ldap.testConnection') }}
-                        </QTooltip>
-                    </QBtn>
-                </QBtnGroup>
-            </template>
-            <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QCheckbox
-                            :label="t('ldap.enableSync')"
-                            v-model="data.enableSync"
-                        />
-                    </div>
-                </VnRow>
-                <template v-if="data.enableSync">
-                    <VnInput :label="t('ldap.server')" clearable v-model="data.server" />
-                    <VnInput :label="t('ldap.rdn')" clearable v-model="data.rdn" />
-                    <VnInput
-                        :label="t('ldap.passwordAD')"
-                        clearable
-                        type="password"
-                        v-model="data.passwordAD"
-                    />
-                    <VnInput :label="t('ldap.userDN')" clearable v-model="data.userDN" />
-                    <VnInput
-                        :label="t('ldap.groupDN')"
-                        clearable
-                        v-model="data.groupDN"
-                    />
-                </template>
-            </template>
-        </FormModel>
-    </QPage>
-</template>
diff --git a/src/pages/Account/AccountSamba.vue b/src/pages/Account/AccountSamba.vue
deleted file mode 100644
index d04ba1ed5..000000000
--- a/src/pages/Account/AccountSamba.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup>
-import { reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-const { t } = useI18n();
-
-const newAccountForm = reactive({
-    supplierFk: null,
-    travelFk: null,
-    companyFk: null,
-});
-</script>
-
-<template>
-    <QPage>
-        <VnSubToolbar></VnSubToolbar>
-        <pre>TODO <b>SAMBA</b></pre>
-        <FormModel
-            url-create="Entries"
-            model="account"
-            :form-initial-data="newAccountForm"
-        >
-            <template #moreActions>
-                <QBtn round flat color="primary" :label="t('samba.testConnection')">
-                    <QTooltip>
-                        {{ t('samba.testConnection') }}
-                    </QTooltip>
-                </QBtn>
-                <QBtn round flat color="primary" :label="t('samba.verifyCertificate')">
-                    <QTooltip>
-                        {{ t('samba.verifyCertificate') }}
-                    </QTooltip>
-                </QBtn>
-            </template>
-            <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QCheckbox
-                            :label="t('samba.enableSync')"
-                            v-model="data.enableSync"
-                        />
-                    </div>
-                </VnRow>
-                <template v-if="data.enableSync">
-                    <VnInput
-                        :label="t('samba.domainController')"
-                        clearable
-                        v-model="data.domainController"
-                    />
-                    <VnInput
-                        :label="t('samba.domainAD')"
-                        clearable
-                        v-model="data.domainAD"
-                    />
-                    <VnInput
-                        :label="t('samba.groupDN')"
-                        clearable
-                        v-model="data.groupDN"
-                    />
-
-                    <VnInput :label="t('samba.userAD')" clearable v-model="data.userAD" />
-                    <VnInput
-                        :label="t('samba.passwordAD')"
-                        clearable
-                        type="password"
-                        v-model="data.passwordAD"
-                    />
-                    <VnInput
-                        :label="t('samba.domainPart')"
-                        clearable
-                        v-model="data.domainPart"
-                    />
-                </template>
-            </template>
-        </FormModel>
-    </QPage>
-</template>
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
deleted file mode 100644
index 2109a3ab4..000000000
--- a/src/pages/Account/Role/AccountRoles.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'filters/index';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import AccountSummary from '../Card/AccountSummary.vue';
-import { ref } from 'vue';
-import RoleForm from './Card/RoleForm.vue';
-
-const stateStore = useStateStore();
-const router = useRouter();
-const { t } = useI18n();
-const roleCreateDialogRef = ref(null);
-
-const openCreateModal = () => {
-    roleCreateDialogRef.value.show();
-};
-function getApiUrl() {
-    return new URL(window.location).origin;
-}
-function navigate(event, id) {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/role/${id}/summary` });
-}
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <!-- <AccountFilter data-key="RolesList" /> -->
-        </QScrollArea>
-    </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate data-key="RolesList" url="VnRoles" auto-load>
-                <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.clientName"
-                        @click="navigate($event, row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <div style="flex-direction: column; width: 100%">
-                                <VnLv :label="t('role.card.name')" :value="row.name">
-                                </VnLv>
-                                <VnLv
-                                    :label="t('role.card.description')"
-                                    :value="row.description"
-                                >
-                                </VnLv>
-                            </div>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('globals.description')"
-                                @click.stop
-                                outline
-                                style="margin-top: 15px"
-                            >
-                            </QBtn>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AccountSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="roleCreateDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <RoleForm />
-        </QDialog>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="openCreateModal()" />
-            <QTooltip>
-                {{ t('account.pageTitles.newRole') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
-</template>
-<i18n>
-    New rol: Nuevo role
-</i18n>
diff --git a/src/pages/Account/Role/AccountRolesFilter.vue b/src/pages/Account/Role/AccountRolesFilter.vue
deleted file mode 100644
index 23b72266c..000000000
--- a/src/pages/Account/Role/AccountRolesFilter.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import FetchData from 'components/FetchData.vue';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-
-const { t } = useI18n();
-const props = defineProps({
-    dataKey: {
-        type: String,
-        required: true,
-    },
-});
-
-const workers = ref();
-const states = ref();
-</script>
-
-<template>
-    <FetchData url="AccountStates" @on-fetch="(data) => (states = data)" auto-load />
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (workers = data)"
-        auto-load
-    />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #tags="{ tag, formatFn }">
-            <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>{{ formatFn(tag.value) }}</span>
-            </div>
-        </template>
-        <template #body="{ params, searchFn }">
-            <QItem class="q-my-sm">
-                <QItemSection>
-                    <VnInput
-                        :label="t('Customer ID')"
-                        v-model="params.clientFk"
-                        lazy-rules
-                        is-outlined
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="xs"></QIcon> </template
-                    ></VnInput>
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection>
-                    <VnInput
-                        :label="t('Client Name')"
-                        v-model="params.clientName"
-                        lazy-rules
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <VnSelect
-                        :label="t('Salesperson')"
-                        v-model="params.salesPersonFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <VnSelect
-                        :label="t('Attender')"
-                        v-model="params.attenderFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <VnSelect
-                        :label="t('Responsible')"
-                        v-model="params.accountResponsibleFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!states">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="states">
-                    <VnSelect
-                        :label="t('State')"
-                        v-model="params.accountStateFk"
-                        @update:model-value="searchFn()"
-                        :options="states"
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        map-options
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <QCheckbox
-                        v-model="params.myTeam"
-                        :label="t('myTeam')"
-                        toggle-indeterminate
-                    />
-                </QItemSection>
-            </QItem>
-            <QSeparator />
-            <QExpansionItem :label="t('More options')" expand-separator>
-                <!-- <QItem>
-                        <QItemSection>
-                            <qSelect
-                                :label="t('Item')"
-                                v-model="params.itemFk"
-                                :options="items"
-                                :loading="loading"
-                                @filter="filterFn"
-                                @virtual-scroll="onScroll"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </QItemSection>
-                    </QItem> -->
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.created"
-                            :label="t('Created')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-            </QExpansionItem>
-        </template>
-    </VnFilterPanel>
-</template>
-
-<i18n>
-en:
-    params:
-        search: Contains
-        clientFk: Customer
-        clientName: Customer
-        salesPersonFk: Salesperson
-        attenderFk: Attender
-        accountResponsibleFk: Responsible
-        accountStateFk: State
-        created: Created
-    myTeam: My team
-es:
-    params:
-        search: Contiene
-        clientFk: Cliente
-        clientName: Cliente
-        salesPersonFk: Comercial
-        attenderFk: Asistente
-        accountResponsibleFk: Responsable
-        accountStateFk: Estado
-        created: Creada
-    Customer ID: ID cliente
-    Client Name: Nombre del cliente
-    Salesperson: Comercial
-    Attender: Asistente
-    Responsible: Responsable
-    State: Estado
-    Item: Artículo
-    Created: Creada
-    More options: Más opciones
-    myTeam: Mi equipo
-</i18n>
diff --git a/src/pages/Account/Role/Card/InheritedRoles.vue b/src/pages/Account/Role/Card/InheritedRoles.vue
deleted file mode 100644
index cfcf224c7..000000000
--- a/src/pages/Account/Role/Card/InheritedRoles.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script setup>
-import VnLog from 'src/components/common/VnLog.vue';
-</script>
-<template>
-    <VnLog model="Account"></VnLog>
-</template>
diff --git a/src/pages/Account/Role/Card/RoleBasicData.vue b/src/pages/Account/Role/Card/RoleBasicData.vue
deleted file mode 100644
index 4607ef15c..000000000
--- a/src/pages/Account/Role/Card/RoleBasicData.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-const route = useRoute();
-const { t } = useI18n();
-</script>
-<template>
-    <FormModel :url="`VnRoles/${route.params.id}`" model="VnRole" auto-load>
-        <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.name" :label="t('role.card.name')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.description"
-                        :label="t('role.card.description')"
-                    />
-                </div>
-            </VnRow>
-        </template>
-    </FormModel>
-</template>
diff --git a/src/pages/Account/Role/Card/RoleCard.vue b/src/pages/Account/Role/Card/RoleCard.vue
deleted file mode 100644
index 7f5a45d8b..000000000
--- a/src/pages/Account/Role/Card/RoleCard.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup>
-import VnCard from 'components/common/VnCard.vue';
-import RoleDescriptor from './RoleDescriptor.vue';
-</script>
-<template>
-    <VnCard
-        data-key="Role"
-        base-url="VnRoles"
-        :descriptor="RoleDescriptor"
-        searchbar-data-key="RoleList"
-        searchbar-url="Roles/filter"
-        searchbar-label="Search Role"
-        searchbar-info="You can search by Role id or customer name"
-    />
-</template>
diff --git a/src/pages/Account/Role/Card/RoleDescriptor.vue b/src/pages/Account/Role/Card/RoleDescriptor.vue
deleted file mode 100644
index 2df191950..000000000
--- a/src/pages/Account/Role/Card/RoleDescriptor.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useState } from 'src/composables/useState';
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import useCardDescription from 'src/composables/useCardDescription';
-import { useQuasar } from 'quasar';
-
-import axios from 'axios';
-import useNotify from 'src/composables/useNotify.js';
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: false,
-        default: null,
-    },
-});
-
-const route = useRoute();
-
-const quasar = useQuasar();
-const router = useRouter();
-
-const { notify } = useNotify();
-const { t } = useI18n();
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
-const filter = {
-    where: { id: entityId },
-};
-const removeRole = () => {
-    quasar
-        .dialog({
-            title: 'Are you sure you want to delete it?',
-            message: 'Delete department',
-            ok: {
-                push: true,
-                color: 'primary',
-            },
-            cancel: true,
-        })
-        .onOk(async () => {
-            try {
-                await axios.post(
-                    `/Departments/${entityId.value}/removeChild`,
-                    entityId.value
-                );
-                router.push({ name: 'WorkerDepartment' });
-                notify('department.departmentRemoved', 'positive');
-            } catch (err) {
-                console.error('Error removing department');
-            }
-        });
-};
-</script>
-
-<template>
-    <CardDescriptor
-        ref="descriptor"
-        :url="`VnRoles`"
-        :filter="filter"
-        module="Account"
-        @on-fetch="setData"
-        data-key="accountData"
-        :title="data.title"
-        :subtitle="data.subtitle"
-    >
-        <template #menu>
-            <QItem v-ripple clickable @click="removeRole()">
-                <QItemSection>{{ t('Delete') }}</QItemSection>
-            </QItem>
-        </template>
-        <template #body="{ entity }">
-            <VnLv :label="t('role.card.description')" :value="entity.description" />
-        </template>
-    </CardDescriptor>
-</template>
-<style scoped>
-.q-item__label {
-    margin-top: 0;
-}
-</style>
-<i18n>
-    en:
-        accountRate: Claming rate
-    es:
-        accountRate: Ratio de reclamación
-</i18n>
diff --git a/src/pages/Account/Role/Card/RoleForm.vue b/src/pages/Account/Role/Card/RoleForm.vue
deleted file mode 100644
index 0fef124c6..000000000
--- a/src/pages/Account/Role/Card/RoleForm.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import FormModelPopup from 'components/FormModelPopup.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-const route = useRoute();
-const { t } = useI18n();
-const shelvingId = route.params?.id || null;
-const isNew = Boolean(!shelvingId);
-const defaultInitialData = {
-    name: null,
-    description: null,
-};
-</script>
-<template>
-    <FormModelPopup
-        :title="t('Create role')"
-        ref="formModelPopupRef"
-        url-create="VnRoles"
-        model="VnRole"
-        :form-initial-data="defaultInitialData"
-        @on-data-saved="onSave"
-    >
-        <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.name" :label="t('role.card.name')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.description"
-                        :label="t('role.card.description')"
-                    />
-                </div>
-            </VnRow>
-        </template>
-    </FormModelPopup>
-</template>
-
-<i18n>
-    es:
-        Create role: Crear role
-</i18n>
diff --git a/src/pages/Account/Role/Card/RoleLog.vue b/src/pages/Account/Role/Card/RoleLog.vue
deleted file mode 100644
index 48f5eb23a..000000000
--- a/src/pages/Account/Role/Card/RoleLog.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script setup>
-import VnLog from 'src/components/common/VnLog.vue';
-</script>
-<template>
-    <VnLog model="VnRoles"></VnLog>
-</template>
diff --git a/src/pages/Account/Role/Card/RoleSummary.vue b/src/pages/Account/Role/Card/RoleSummary.vue
deleted file mode 100644
index 05fee63a2..000000000
--- a/src/pages/Account/Role/Card/RoleSummary.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import CardSummary from 'components/ui/CardSummary.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import { useArrayData } from 'src/composables/useArrayData';
-
-const route = useRoute();
-const { t } = useI18n();
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        default: 0,
-    },
-});
-
-const { store } = useArrayData('Role');
-const role = ref(store.data);
-const entityId = computed(() => $props.id || route.params.id);
-const filter = {
-    where: { id: entityId },
-};
-</script>
-
-<template>
-    <CardSummary
-        ref="summary"
-        :url="`VnRoles`"
-        :filter="filter"
-        @on-fetch="(data) => (role = data)"
-    >
-        <template #header> {{ role.id }} - {{ role.name }} </template>
-        <template #body>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <a
-                        class="header header-link"
-                        :href="`#/VnUser/${entityId}/basic-data`"
-                    >
-                        {{ t('globals.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </a>
-                </QCardSection>
-                <VnLv :label="t('role.card.id')" :value="role.id" />
-                <VnLv :label="t('role.card.name')" :value="role.name" />
-                <VnLv :label="t('role.card.description')" :value="role.description" />
-            </QCard>
-        </template>
-    </CardSummary>
-</template>
-
-<style lang="scss" scoped>
-.q-dialog__inner--minimized > div {
-    max-width: 80%;
-}
-.container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 15px;
-}
-.multimedia-container {
-    flex: 1 0 21%;
-}
-.multimedia {
-    transition: all 0.5s;
-    opacity: 1;
-    height: 250px;
-
-    .q-img {
-        object-fit: cover;
-        background-color: black;
-    }
-    video {
-        object-fit: cover;
-        background-color: black;
-    }
-}
-
-.multimedia:hover {
-    opacity: 0.5;
-}
-
-.close-button {
-    top: 1%;
-    right: 10%;
-}
-
-.zindex {
-    z-index: 1;
-}
-
-.change-state {
-    width: 10%;
-}
-</style>
diff --git a/src/pages/Account/Role/Card/SubRoles.vue b/src/pages/Account/Role/Card/SubRoles.vue
deleted file mode 100644
index 48f5eb23a..000000000
--- a/src/pages/Account/Role/Card/SubRoles.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script setup>
-import VnLog from 'src/components/common/VnLog.vue';
-</script>
-<template>
-    <VnLog model="VnRoles"></VnLog>
-</template>
-- 
2.40.1


From 6c34a250dbe1a17ff8cfe787c5aed51a614f9b00 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 29 May 2024 08:28:17 -0300
Subject: [PATCH 04/22] Remove more unnecesary files

---
 .../Account/Card/AccountInheritedRoles.vue    | 256 -------------
 src/pages/Account/Card/AccountLog.vue         |   6 -
 src/pages/Account/Card/AccountMailAlias.vue   | 256 -------------
 .../Account/Card/AccountMailForwarding.vue    | 256 -------------
 src/pages/Account/Card/AccountPrivileges.vue  | 338 ------------------
 5 files changed, 1112 deletions(-)
 delete mode 100644 src/pages/Account/Card/AccountInheritedRoles.vue
 delete mode 100644 src/pages/Account/Card/AccountLog.vue
 delete mode 100644 src/pages/Account/Card/AccountMailAlias.vue
 delete mode 100644 src/pages/Account/Card/AccountMailForwarding.vue
 delete mode 100644 src/pages/Account/Card/AccountPrivileges.vue

diff --git a/src/pages/Account/Card/AccountInheritedRoles.vue b/src/pages/Account/Card/AccountInheritedRoles.vue
deleted file mode 100644
index d8a43c623..000000000
--- a/src/pages/Account/Card/AccountInheritedRoles.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import CrudModel from 'components/CrudModel.vue';
-import FetchData from 'components/FetchData.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import { tMobile } from 'composables/tMobile';
-
-const route = useRoute();
-
-const { t } = useI18n();
-
-const accountDevelopmentForm = ref();
-const accountReasons = ref([]);
-const accountResults = ref([]);
-const accountResponsibles = ref([]);
-const accountRedeliveries = ref([]);
-const workers = ref([]);
-const selected = ref([]);
-const saveButtonRef = ref();
-
-const developmentsFilter = {
-    fields: [
-        'id',
-        'accountFk',
-        'accountReasonFk',
-        'accountResultFk',
-        'accountResponsibleFk',
-        'workerFk',
-        'accountRedeliveryFk',
-    ],
-    where: {
-        accountFk: route.params.id,
-    },
-};
-
-const columns = computed(() => [
-    {
-        name: 'accountReason',
-        label: t('Reason'),
-        field: (row) => row.accountReasonFk,
-        sortable: true,
-        options: accountReasons.value,
-        required: true,
-        model: 'accountReasonFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 1,
-        align: 'left',
-    },
-    {
-        name: 'accountResult',
-        label: t('Result'),
-        field: (row) => row.accountResultFk,
-        sortable: true,
-        options: accountResults.value,
-        required: true,
-        model: 'accountResultFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 2,
-        align: 'left',
-    },
-    {
-        name: 'accountResponsible',
-        label: t('Responsible'),
-        field: (row) => row.accountResponsibleFk,
-        sortable: true,
-        options: accountResponsibles.value,
-        required: true,
-        model: 'accountResponsibleFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 3,
-        align: 'left',
-    },
-    {
-        name: 'worker',
-        label: t('Worker'),
-        field: (row) => row.workerFk,
-        sortable: true,
-        options: workers.value,
-        model: 'workerFk',
-        optionValue: 'id',
-        optionLabel: 'nickname',
-        tabIndex: 4,
-        align: 'left',
-    },
-    {
-        name: 'accountRedelivery',
-        label: t('Redelivery'),
-        field: (row) => row.accountRedeliveryFk,
-        sortable: true,
-        options: accountRedeliveries.value,
-        required: true,
-        model: 'accountRedeliveryFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 5,
-        align: 'left',
-    },
-]);
-</script>
-<template>
-    <FetchData
-        url="AccountReasons"
-        order="description"
-        @on-fetch="(data) => (accountReasons = data)"
-        auto-load
-    />
-    <FetchData
-        url="AccountResults"
-        order="description"
-        @on-fetch="(data) => (accountResults = data)"
-        auto-load
-    />
-    <FetchData
-        url="AccountResponsibles"
-        order="description"
-        @on-fetch="(data) => (accountResponsibles = data)"
-        auto-load
-    />
-    <FetchData
-        url="AccountRedeliveries"
-        order="description"
-        @on-fetch="(data) => (accountRedeliveries = data)"
-        auto-load
-    />
-    <FetchData
-        url="Workers/search"
-        :where="{ active: 1 }"
-        order="name ASC"
-        @on-fetch="(data) => (workers = data)"
-        auto-load
-    />
-    <CrudModel
-        data-key="AccountDevelopments"
-        url="AccountDevelopments"
-        model="accountDevelopment"
-        :filter="developmentsFilter"
-        ref="accountDevelopmentForm"
-        :data-required="{ accountFk: route.params.id }"
-        v-model:selected="selected"
-        auto-load
-        @save-changes="$router.push(`/account/${route.params.id}/action`)"
-        :default-save="false"
-    >
-        <template #body="{ rows }">
-            <QTable
-                :columns="columns"
-                :rows="rows"
-                row-key="$index"
-                selection="multiple"
-                v-model:selected="selected"
-                :grid="$q.screen.lt.md"
-                table-header-class="text-left"
-            >
-                <template #body-cell="{ row, col }">
-                    <QTd
-                        auto-width
-                        @keyup.ctrl.enter.stop="accountDevelopmentForm.saveChanges()"
-                    >
-                        <VnSelect
-                            v-model="row[col.model]"
-                            :options="col.options"
-                            :option-value="col.optionValue"
-                            :option-label="col.optionLabel"
-                            :autofocus="col.tabIndex == 1"
-                            input-debounce="0"
-                            hide-selected
-                        >
-                            <template #option="scope" v-if="col.name == 'worker'">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            {{ scope.opt?.nickname }}
-                                            {{ scope.opt?.code }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </QTd>
-                </template>
-                <template #item="props">
-                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
-                        <QCard
-                            bordered
-                            flat
-                            @keyup.ctrl.enter.stop="accountDevelopmentForm?.saveChanges()"
-                        >
-                            <QCardSection>
-                                <QCheckbox v-model="props.selected" dense />
-                            </QCardSection>
-                            <QSeparator />
-                            <QList dense>
-                                <QItem v-for="col in props.cols" :key="col.name">
-                                    <QItemSection>
-                                        <VnSelect
-                                            :label="col.label"
-                                            v-model="props.row[col.model]"
-                                            :options="col.options"
-                                            :option-value="col.optionValue"
-                                            :option-label="col.optionLabel"
-                                            dense
-                                            input-debounce="0"
-                                            :autofocus="col.tabIndex == 1"
-                                            hide-selected
-                                        />
-                                    </QItemSection>
-                                </QItem>
-                            </QList>
-                        </QCard>
-                    </div>
-                </template>
-            </QTable>
-        </template>
-        <template #moreAfterActions>
-            <QBtn
-                :label="tMobile('globals.save')"
-                ref="saveButtonRef"
-                color="primary"
-                icon="save"
-                :disable="!accountDevelopmentForm?.hasChanges"
-                @click="accountDevelopmentForm?.onSubmit"
-                :title="t('globals.save')"
-            />
-        </template>
-    </CrudModel>
-    <QPageSticky position="bottom-right" :offset="[25, 25]">
-        <QBtn
-            fab
-            color="primary"
-            icon="add"
-            @keydown.tab.prevent="saveButtonRef.$el.focus()"
-            @click="accountDevelopmentForm.insert()"
-        />
-    </QPageSticky>
-</template>
-
-<style lang="scss" scoped>
-.grid-style-transition {
-    transition: transform 0.28s, background-color 0.28s;
-}
-</style>
-
-<i18n>
-es:
-    Reason: Motivo
-    Result: Consecuencia
-    Responsible: Responsable
-    Worker: Trabajador
-    Redelivery: Devolución
-</i18n>
diff --git a/src/pages/Account/Card/AccountLog.vue b/src/pages/Account/Card/AccountLog.vue
deleted file mode 100644
index 8f809dd87..000000000
--- a/src/pages/Account/Card/AccountLog.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<script setup>
-import VnLog from 'src/components/common/VnLog.vue';
-</script>
-<template>
-    <VnLog model="VnUser"></VnLog>
-</template>
diff --git a/src/pages/Account/Card/AccountMailAlias.vue b/src/pages/Account/Card/AccountMailAlias.vue
deleted file mode 100644
index d8a43c623..000000000
--- a/src/pages/Account/Card/AccountMailAlias.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import CrudModel from 'components/CrudModel.vue';
-import FetchData from 'components/FetchData.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import { tMobile } from 'composables/tMobile';
-
-const route = useRoute();
-
-const { t } = useI18n();
-
-const accountDevelopmentForm = ref();
-const accountReasons = ref([]);
-const accountResults = ref([]);
-const accountResponsibles = ref([]);
-const accountRedeliveries = ref([]);
-const workers = ref([]);
-const selected = ref([]);
-const saveButtonRef = ref();
-
-const developmentsFilter = {
-    fields: [
-        'id',
-        'accountFk',
-        'accountReasonFk',
-        'accountResultFk',
-        'accountResponsibleFk',
-        'workerFk',
-        'accountRedeliveryFk',
-    ],
-    where: {
-        accountFk: route.params.id,
-    },
-};
-
-const columns = computed(() => [
-    {
-        name: 'accountReason',
-        label: t('Reason'),
-        field: (row) => row.accountReasonFk,
-        sortable: true,
-        options: accountReasons.value,
-        required: true,
-        model: 'accountReasonFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 1,
-        align: 'left',
-    },
-    {
-        name: 'accountResult',
-        label: t('Result'),
-        field: (row) => row.accountResultFk,
-        sortable: true,
-        options: accountResults.value,
-        required: true,
-        model: 'accountResultFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 2,
-        align: 'left',
-    },
-    {
-        name: 'accountResponsible',
-        label: t('Responsible'),
-        field: (row) => row.accountResponsibleFk,
-        sortable: true,
-        options: accountResponsibles.value,
-        required: true,
-        model: 'accountResponsibleFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 3,
-        align: 'left',
-    },
-    {
-        name: 'worker',
-        label: t('Worker'),
-        field: (row) => row.workerFk,
-        sortable: true,
-        options: workers.value,
-        model: 'workerFk',
-        optionValue: 'id',
-        optionLabel: 'nickname',
-        tabIndex: 4,
-        align: 'left',
-    },
-    {
-        name: 'accountRedelivery',
-        label: t('Redelivery'),
-        field: (row) => row.accountRedeliveryFk,
-        sortable: true,
-        options: accountRedeliveries.value,
-        required: true,
-        model: 'accountRedeliveryFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 5,
-        align: 'left',
-    },
-]);
-</script>
-<template>
-    <FetchData
-        url="AccountReasons"
-        order="description"
-        @on-fetch="(data) => (accountReasons = data)"
-        auto-load
-    />
-    <FetchData
-        url="AccountResults"
-        order="description"
-        @on-fetch="(data) => (accountResults = data)"
-        auto-load
-    />
-    <FetchData
-        url="AccountResponsibles"
-        order="description"
-        @on-fetch="(data) => (accountResponsibles = data)"
-        auto-load
-    />
-    <FetchData
-        url="AccountRedeliveries"
-        order="description"
-        @on-fetch="(data) => (accountRedeliveries = data)"
-        auto-load
-    />
-    <FetchData
-        url="Workers/search"
-        :where="{ active: 1 }"
-        order="name ASC"
-        @on-fetch="(data) => (workers = data)"
-        auto-load
-    />
-    <CrudModel
-        data-key="AccountDevelopments"
-        url="AccountDevelopments"
-        model="accountDevelopment"
-        :filter="developmentsFilter"
-        ref="accountDevelopmentForm"
-        :data-required="{ accountFk: route.params.id }"
-        v-model:selected="selected"
-        auto-load
-        @save-changes="$router.push(`/account/${route.params.id}/action`)"
-        :default-save="false"
-    >
-        <template #body="{ rows }">
-            <QTable
-                :columns="columns"
-                :rows="rows"
-                row-key="$index"
-                selection="multiple"
-                v-model:selected="selected"
-                :grid="$q.screen.lt.md"
-                table-header-class="text-left"
-            >
-                <template #body-cell="{ row, col }">
-                    <QTd
-                        auto-width
-                        @keyup.ctrl.enter.stop="accountDevelopmentForm.saveChanges()"
-                    >
-                        <VnSelect
-                            v-model="row[col.model]"
-                            :options="col.options"
-                            :option-value="col.optionValue"
-                            :option-label="col.optionLabel"
-                            :autofocus="col.tabIndex == 1"
-                            input-debounce="0"
-                            hide-selected
-                        >
-                            <template #option="scope" v-if="col.name == 'worker'">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            {{ scope.opt?.nickname }}
-                                            {{ scope.opt?.code }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </QTd>
-                </template>
-                <template #item="props">
-                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
-                        <QCard
-                            bordered
-                            flat
-                            @keyup.ctrl.enter.stop="accountDevelopmentForm?.saveChanges()"
-                        >
-                            <QCardSection>
-                                <QCheckbox v-model="props.selected" dense />
-                            </QCardSection>
-                            <QSeparator />
-                            <QList dense>
-                                <QItem v-for="col in props.cols" :key="col.name">
-                                    <QItemSection>
-                                        <VnSelect
-                                            :label="col.label"
-                                            v-model="props.row[col.model]"
-                                            :options="col.options"
-                                            :option-value="col.optionValue"
-                                            :option-label="col.optionLabel"
-                                            dense
-                                            input-debounce="0"
-                                            :autofocus="col.tabIndex == 1"
-                                            hide-selected
-                                        />
-                                    </QItemSection>
-                                </QItem>
-                            </QList>
-                        </QCard>
-                    </div>
-                </template>
-            </QTable>
-        </template>
-        <template #moreAfterActions>
-            <QBtn
-                :label="tMobile('globals.save')"
-                ref="saveButtonRef"
-                color="primary"
-                icon="save"
-                :disable="!accountDevelopmentForm?.hasChanges"
-                @click="accountDevelopmentForm?.onSubmit"
-                :title="t('globals.save')"
-            />
-        </template>
-    </CrudModel>
-    <QPageSticky position="bottom-right" :offset="[25, 25]">
-        <QBtn
-            fab
-            color="primary"
-            icon="add"
-            @keydown.tab.prevent="saveButtonRef.$el.focus()"
-            @click="accountDevelopmentForm.insert()"
-        />
-    </QPageSticky>
-</template>
-
-<style lang="scss" scoped>
-.grid-style-transition {
-    transition: transform 0.28s, background-color 0.28s;
-}
-</style>
-
-<i18n>
-es:
-    Reason: Motivo
-    Result: Consecuencia
-    Responsible: Responsable
-    Worker: Trabajador
-    Redelivery: Devolución
-</i18n>
diff --git a/src/pages/Account/Card/AccountMailForwarding.vue b/src/pages/Account/Card/AccountMailForwarding.vue
deleted file mode 100644
index d8a43c623..000000000
--- a/src/pages/Account/Card/AccountMailForwarding.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import CrudModel from 'components/CrudModel.vue';
-import FetchData from 'components/FetchData.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import { tMobile } from 'composables/tMobile';
-
-const route = useRoute();
-
-const { t } = useI18n();
-
-const accountDevelopmentForm = ref();
-const accountReasons = ref([]);
-const accountResults = ref([]);
-const accountResponsibles = ref([]);
-const accountRedeliveries = ref([]);
-const workers = ref([]);
-const selected = ref([]);
-const saveButtonRef = ref();
-
-const developmentsFilter = {
-    fields: [
-        'id',
-        'accountFk',
-        'accountReasonFk',
-        'accountResultFk',
-        'accountResponsibleFk',
-        'workerFk',
-        'accountRedeliveryFk',
-    ],
-    where: {
-        accountFk: route.params.id,
-    },
-};
-
-const columns = computed(() => [
-    {
-        name: 'accountReason',
-        label: t('Reason'),
-        field: (row) => row.accountReasonFk,
-        sortable: true,
-        options: accountReasons.value,
-        required: true,
-        model: 'accountReasonFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 1,
-        align: 'left',
-    },
-    {
-        name: 'accountResult',
-        label: t('Result'),
-        field: (row) => row.accountResultFk,
-        sortable: true,
-        options: accountResults.value,
-        required: true,
-        model: 'accountResultFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 2,
-        align: 'left',
-    },
-    {
-        name: 'accountResponsible',
-        label: t('Responsible'),
-        field: (row) => row.accountResponsibleFk,
-        sortable: true,
-        options: accountResponsibles.value,
-        required: true,
-        model: 'accountResponsibleFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 3,
-        align: 'left',
-    },
-    {
-        name: 'worker',
-        label: t('Worker'),
-        field: (row) => row.workerFk,
-        sortable: true,
-        options: workers.value,
-        model: 'workerFk',
-        optionValue: 'id',
-        optionLabel: 'nickname',
-        tabIndex: 4,
-        align: 'left',
-    },
-    {
-        name: 'accountRedelivery',
-        label: t('Redelivery'),
-        field: (row) => row.accountRedeliveryFk,
-        sortable: true,
-        options: accountRedeliveries.value,
-        required: true,
-        model: 'accountRedeliveryFk',
-        optionValue: 'id',
-        optionLabel: 'description',
-        tabIndex: 5,
-        align: 'left',
-    },
-]);
-</script>
-<template>
-    <FetchData
-        url="AccountReasons"
-        order="description"
-        @on-fetch="(data) => (accountReasons = data)"
-        auto-load
-    />
-    <FetchData
-        url="AccountResults"
-        order="description"
-        @on-fetch="(data) => (accountResults = data)"
-        auto-load
-    />
-    <FetchData
-        url="AccountResponsibles"
-        order="description"
-        @on-fetch="(data) => (accountResponsibles = data)"
-        auto-load
-    />
-    <FetchData
-        url="AccountRedeliveries"
-        order="description"
-        @on-fetch="(data) => (accountRedeliveries = data)"
-        auto-load
-    />
-    <FetchData
-        url="Workers/search"
-        :where="{ active: 1 }"
-        order="name ASC"
-        @on-fetch="(data) => (workers = data)"
-        auto-load
-    />
-    <CrudModel
-        data-key="AccountDevelopments"
-        url="AccountDevelopments"
-        model="accountDevelopment"
-        :filter="developmentsFilter"
-        ref="accountDevelopmentForm"
-        :data-required="{ accountFk: route.params.id }"
-        v-model:selected="selected"
-        auto-load
-        @save-changes="$router.push(`/account/${route.params.id}/action`)"
-        :default-save="false"
-    >
-        <template #body="{ rows }">
-            <QTable
-                :columns="columns"
-                :rows="rows"
-                row-key="$index"
-                selection="multiple"
-                v-model:selected="selected"
-                :grid="$q.screen.lt.md"
-                table-header-class="text-left"
-            >
-                <template #body-cell="{ row, col }">
-                    <QTd
-                        auto-width
-                        @keyup.ctrl.enter.stop="accountDevelopmentForm.saveChanges()"
-                    >
-                        <VnSelect
-                            v-model="row[col.model]"
-                            :options="col.options"
-                            :option-value="col.optionValue"
-                            :option-label="col.optionLabel"
-                            :autofocus="col.tabIndex == 1"
-                            input-debounce="0"
-                            hide-selected
-                        >
-                            <template #option="scope" v-if="col.name == 'worker'">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                        <QItemLabel caption>
-                                            {{ scope.opt?.nickname }}
-                                            {{ scope.opt?.code }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </QTd>
-                </template>
-                <template #item="props">
-                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
-                        <QCard
-                            bordered
-                            flat
-                            @keyup.ctrl.enter.stop="accountDevelopmentForm?.saveChanges()"
-                        >
-                            <QCardSection>
-                                <QCheckbox v-model="props.selected" dense />
-                            </QCardSection>
-                            <QSeparator />
-                            <QList dense>
-                                <QItem v-for="col in props.cols" :key="col.name">
-                                    <QItemSection>
-                                        <VnSelect
-                                            :label="col.label"
-                                            v-model="props.row[col.model]"
-                                            :options="col.options"
-                                            :option-value="col.optionValue"
-                                            :option-label="col.optionLabel"
-                                            dense
-                                            input-debounce="0"
-                                            :autofocus="col.tabIndex == 1"
-                                            hide-selected
-                                        />
-                                    </QItemSection>
-                                </QItem>
-                            </QList>
-                        </QCard>
-                    </div>
-                </template>
-            </QTable>
-        </template>
-        <template #moreAfterActions>
-            <QBtn
-                :label="tMobile('globals.save')"
-                ref="saveButtonRef"
-                color="primary"
-                icon="save"
-                :disable="!accountDevelopmentForm?.hasChanges"
-                @click="accountDevelopmentForm?.onSubmit"
-                :title="t('globals.save')"
-            />
-        </template>
-    </CrudModel>
-    <QPageSticky position="bottom-right" :offset="[25, 25]">
-        <QBtn
-            fab
-            color="primary"
-            icon="add"
-            @keydown.tab.prevent="saveButtonRef.$el.focus()"
-            @click="accountDevelopmentForm.insert()"
-        />
-    </QPageSticky>
-</template>
-
-<style lang="scss" scoped>
-.grid-style-transition {
-    transition: transform 0.28s, background-color 0.28s;
-}
-</style>
-
-<i18n>
-es:
-    Reason: Motivo
-    Result: Consecuencia
-    Responsible: Responsable
-    Worker: Trabajador
-    Redelivery: Devolución
-</i18n>
diff --git a/src/pages/Account/Card/AccountPrivileges.vue b/src/pages/Account/Card/AccountPrivileges.vue
deleted file mode 100644
index f754ddc47..000000000
--- a/src/pages/Account/Card/AccountPrivileges.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<script setup>
-import axios from 'axios';
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
-import { useRoute } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
-import { useArrayData } from 'composables/useArrayData';
-import { toDate, toCurrency, toPercentage } from 'filters/index';
-import CrudModel from 'components/CrudModel.vue';
-import FetchData from 'components/FetchData.vue';
-import VnDiscount from 'components/common/vnDiscount.vue';
-
-const quasar = useQuasar();
-const route = useRoute();
-const { t } = useI18n();
-
-const stateStore = useStateStore();
-const arrayData = useArrayData('AccountLines');
-const store = arrayData.store;
-
-const accountFilter = {
-    fields: ['ticketFk'],
-};
-const linesFilter = {
-    include: {
-        relation: 'sale',
-        scope: {
-            fields: ['concept', 'ticketFk', 'price', 'quantity', 'discount', 'itemFk'],
-            include: {
-                relation: 'ticket',
-            },
-        },
-    },
-};
-
-const accountLinesForm = ref();
-const account = ref(null);
-async function onFetchAccount(data) {
-    account.value = data;
-    fetchMana();
-}
-
-const amount = ref();
-const amountAccounted = ref();
-async function onFetch(rows, newRows) {
-    if (newRows) rows = newRows;
-    amount.value = 0;
-    amountAccounted.value = 0;
-    if (!rows || !rows.length) return;
-
-    for (const row of rows) {
-        const { sale } = row;
-        amount.value = amount.value + totalRow(sale);
-        const price = row.quantity * sale.price;
-        const discount = (sale.discount * price) / 100;
-        amountAccounted.value = amountAccounted.value + (price - discount);
-    }
-}
-
-function totalRow({ price, quantity, discount }) {
-    const amount = price * quantity;
-    const appliedDiscount = (discount * amount) / 100;
-    return amount - appliedDiscount;
-}
-
-const columns = computed(() => [
-    {
-        name: 'dated',
-        label: t('Delivered'),
-        field: ({ sale: { ticket } }) => toDate(ticket.landed),
-        sortable: true,
-    },
-    {
-        name: 'quantity',
-        label: t('Quantity'),
-        field: ({ sale }) => sale.quantity,
-        sortable: true,
-    },
-    {
-        name: 'accounted',
-        label: t('Accounted'),
-        field: (row) => row.quantity,
-        sortable: true,
-    },
-    {
-        name: 'description',
-        label: t('Description'),
-        field: ({ sale }) => sale.concept,
-    },
-    {
-        name: 'price',
-        label: t('Price'),
-        field: ({ sale }) => sale.price,
-        format: (value) => toCurrency(value),
-        sortable: true,
-    },
-    {
-        name: 'discount',
-        label: t('Discount'),
-        field: ({ sale }) => sale.discount,
-        format: (value) => toPercentage(value / 100),
-        sortable: true,
-    },
-    {
-        name: 'total',
-        label: t('Total'),
-        field: ({ sale }) => totalRow(sale),
-        format: (value) => toCurrency(value),
-        sortable: true,
-    },
-]);
-
-const selected = ref([]);
-const mana = ref(0);
-async function fetchMana() {
-    const ticketId = account.value.ticketFk;
-    const response = await axios.get(`Tickets/${ticketId}/getSalesPersonMana`);
-    mana.value = response.data;
-}
-
-async function updateDiscount({ saleFk, discount, canceller }) {
-    const body = { salesIds: [saleFk], newDiscount: discount };
-    const accountId = account.value.ticketFk;
-    const query = `Tickets/${accountId}/updateDiscount`;
-
-    await axios.post(query, body, {
-        signal: canceller.signal,
-    });
-    await accountLinesForm.value.reload();
-}
-
-function onUpdateDiscount(response) {
-    const row = store.data[response.rowIndex];
-    row.sale.discount = response.discount;
-    quasar.notify({
-        message: t('Discount updated'),
-        type: 'positive',
-    });
-}
-
-async function saveWhenHasChanges() {
-    if (accountLinesForm.value.getChanges().updates) {
-        await accountLinesForm.value.onSubmit();
-        await accountLinesForm.value.reload();
-    }
-}
-</script>
-<template>
-    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
-        <div class="row q-gutter-md">
-            <div>
-                {{ t('Amount') }}
-                <QChip :dense="$q.screen.lt.sm" text-color="white">
-                    {{ toCurrency(amount) }}
-                </QChip>
-            </div>
-            <QSeparator dark vertical />
-            <div>
-                {{ t('Amount Accounted') }}
-                <QChip color="positive" :dense="$q.screen.lt.sm">
-                    {{ toCurrency(amountAccounted) }}
-                </QChip>
-            </div>
-        </div>
-    </Teleport>
-
-    <FetchData
-        :url="`Accounts/${route.params.id}`"
-        :filter="accountFilter"
-        @on-fetch="onFetchAccount"
-        auto-load
-    />
-    <div class="q-pa-md">
-        <CrudModel
-            data-key="AccountLines"
-            ref="accountLinesForm"
-            :url="`Accounts/${route.params.id}/lines`"
-            save-url="AccountBeginnings/crud"
-            :filter="linesFilter"
-            @on-fetch="onFetch"
-            v-model:selected="selected"
-            :default-save="false"
-            :default-reset="false"
-            auto-load
-            :limit="0"
-        >
-            <template #body="{ rows }">
-                <QTable
-                    :columns="columns"
-                    :rows="rows"
-                    :dense="$q.screen.lt.md"
-                    row-key="id"
-                    selection="multiple"
-                    v-model:selected="selected"
-                    :grid="$q.screen.lt.md"
-                >
-                    <template #body-cell-accounted="{ row }">
-                        <QTd auto-width align="right" class="text-primary">
-                            <QInput
-                                v-model="row.quantity"
-                                type="number"
-                                dense
-                                @keyup.enter="saveWhenHasChanges()"
-                                @blur="saveWhenHasChanges()"
-                            />
-                        </QTd>
-                    </template>
-                    <template #body-cell-description="{ row, value }">
-                        <QTd auto-width align="right" class="text-primary">
-                            {{ value }} {{ row }}
-                        </QTd>
-                    </template>
-                    <template #body-cell-discount="{ row, value, rowIndex }">
-                        <QTd auto-width align="right" class="text-primary">
-                            {{ value }}
-                            <VnDiscount
-                                :quantity="row.quantity"
-                                :price="row.sale.price"
-                                :discount="row.sale.discount"
-                                :mana="mana"
-                                :promise="updateDiscount"
-                                :data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
-                                @on-update="onUpdateDiscount"
-                            />
-                        </QTd>
-                    </template>
-                    <!-- View for grid mode -->
-                    <template #item="props">
-                        <div
-                            class="q-mb-md col-12 grid-style-transition"
-                            :style="props.selected ? 'transform: scale(0.95);' : ''"
-                        >
-                            <QCard>
-                                <QCardSection>
-                                    <QCheckbox v-model="props.selected" />
-                                </QCardSection>
-                                <QSeparator inset />
-                                <QList dense>
-                                    <QItem
-                                        v-for="column of props.cols"
-                                        :key="column.name"
-                                    >
-                                        <QItemSection>
-                                            <QItemLabel caption>
-                                                {{ column.label }}
-                                            </QItemLabel>
-                                        </QItemSection>
-                                        <QItemSection side>
-                                            <template v-if="column.name === 'accounted'">
-                                                <QItemLabel class="text-primary">
-                                                    <QInput
-                                                        v-model="props.row.quantity"
-                                                        type="number"
-                                                        dense
-                                                        autofocus
-                                                        @keyup.enter="
-                                                            saveWhenHasChanges()
-                                                        "
-                                                        @blur="saveWhenHasChanges()"
-                                                    />
-                                                </QItemLabel>
-                                            </template>
-                                            <template
-                                                v-else-if="column.name === 'discount'"
-                                            >
-                                                <QItemLabel class="text-primary">
-                                                    {{ column.value }}
-                                                    <VnDiscount
-                                                        :quantity="props.row.quantity"
-                                                        :price="props.row.sale.price"
-                                                        :discount="
-                                                            props.row.sale.discount
-                                                        "
-                                                        :mana="mana"
-                                                        :promise="updateDiscount"
-                                                        :data="{
-                                                            saleFk: props.row.sale.id,
-                                                            rowIndex: props.rowIndex,
-                                                        }"
-                                                        @on-update="onUpdateDiscount"
-                                                    />
-                                                </QItemLabel>
-                                            </template>
-                                            <template v-else>
-                                                <QItemLabel>
-                                                    {{ column.value }}
-                                                </QItemLabel>
-                                            </template>
-                                        </QItemSection>
-                                    </QItem>
-                                </QList>
-                            </QCard>
-                        </div>
-                    </template>
-                </QTable>
-            </template>
-        </CrudModel>
-    </div>
-
-    <QPageSticky position="bottom-right" :offset="[25, 25]">
-        <QBtn fab color="primary" icon="add" @click="showImportDialog()" />
-    </QPageSticky>
-</template>
-
-<style lang="scss" scoped>
-.list {
-    padding-top: 50px;
-    max-width: 900px;
-    width: 100%;
-}
-.grid-style-transition {
-    transition: transform 0.28s, background-color 0.28s;
-}
-</style>
-
-<i18n>
-en:
-    You are about to remove {count} rows: '
-        You are about to remove <strong>{count}</strong> row |
-        You are about to remove  <strong>{count}</strong> rows'
-es:
-    Delivered: Entregado
-    Quantity: Cantidad
-    Accounted: Reclamada
-    Description: Descripción
-    Price: Precio
-    Discount: Descuento
-    Actions: Acciones
-    Amount: Total
-    Amount Accounted: Cantidad reclamada
-    Delete accounted sales: Eliminar ventas reclamadas
-    Discount updated: Descuento actualizado
-    Accounted quantity: Cantidad reclamada
-    You are about to remove {count} rows: '
-        Vas a eliminar <strong>{count}</strong> línea |
-        Vas a eliminar <strong>{count}</strong> líneas'
-</i18n>
-- 
2.40.1


From e47bda0afc0c2d3765ad685afd2e2e4c920d16c7 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 29 May 2024 08:47:33 -0300
Subject: [PATCH 05/22] small changes

---
 src/components/ui/VnFilterPanel.vue | 8 ++++++--
 src/pages/Account/AccountFilter.vue | 5 +++++
 src/pages/Account/AccountList.vue   | 2 +-
 src/pages/Account/locale/en.yml     | 1 +
 src/pages/Account/locale/es.yml     | 1 +
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 386594750..fd508cea3 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -46,6 +46,10 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    redirect: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
@@ -93,7 +97,7 @@ async function search() {
 
     isLoading.value = false;
     emit('search');
-    navigate(store.data, {});
+    if (props.redirect) navigate(store.data, {});
 }
 
 async function reload() {
@@ -104,7 +108,7 @@ async function reload() {
     if (!props.showAll && !params.length) store.data = [];
     isLoading.value = false;
     emit('refresh');
-    navigate(store.data, {});
+    if (props.redirect) navigate(store.data, {});
 }
 
 async function clearFilters() {
diff --git a/src/pages/Account/AccountFilter.vue b/src/pages/Account/AccountFilter.vue
index 0cddd3253..72893472f 100644
--- a/src/pages/Account/AccountFilter.vue
+++ b/src/pages/Account/AccountFilter.vue
@@ -13,6 +13,10 @@ const props = defineProps({
         type: String,
         required: true,
     },
+    exprBuilder: {
+        type: Function,
+        default: null,
+    },
 });
 
 const rolesOptions = ref([]);
@@ -29,6 +33,7 @@ const rolesOptions = ref([]);
         :data-key="props.dataKey"
         :search-button="true"
         :hidden-tags="['search']"
+        :redirect="false"
     >
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index d173f1e09..e71af0d8c 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -65,7 +65,7 @@ const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
                 url="VnUsers/preview"
                 :expr-builder="exprBuilder"
                 :label="t('account.search')"
-                :info="t('You can search by account id or customer name')"
+                :info="t('account.searchInfo')"
             />
         </Teleport>
         <Teleport to="#actions-append">
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 6cad60a0a..40327f350 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -35,6 +35,7 @@ account:
             sync: Sync
             delete: Delete
     search: Search user
+    searchInfo: You can search by id, name or nickname
 role:
     pageTitles:
         inheritedRoles: Inherited Roles
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index f3b83adbc..89b626891 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -44,6 +44,7 @@ account:
                 title: El usuario será eliminado
                 subtitle: ¿Seguro que quieres continuar?
     search: Buscar usuario
+    searchInfo: Puedes buscar por id, nombre o usuario
 role:
     pageTitles:
         inheritedRoles: Roles heredados
-- 
2.40.1


From 1414b93633f791b62e9b08e563ef72aedf8bdbcd Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 29 May 2024 11:53:11 -0300
Subject: [PATCH 06/22] Account create

---
 src/pages/Account/AccountCreate.vue         | 122 ++++++++++++++++++++
 src/pages/Account/AccountList.vue           |   2 +-
 src/pages/Account/Card/AccountBasicData.vue |   2 -
 src/pages/Account/locale/en.yml             |   7 ++
 src/pages/Account/locale/es.yml             |   7 ++
 5 files changed, 137 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/Account/AccountCreate.vue

diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
new file mode 100644
index 000000000..6eed24297
--- /dev/null
+++ b/src/pages/Account/AccountCreate.vue
@@ -0,0 +1,122 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const newAccountForm = reactive({
+    active: true,
+});
+const rolesOptions = ref([]);
+
+const redirectToEntryBasicData = (_, { id }) => {
+    router.push({ name: 'AccountBasicData', params: { id } });
+};
+</script>
+
+<template>
+    <FetchData
+        url="VnRoles"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        @on-fetch="(data) => (rolesOptions = data)"
+        auto-load
+    />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="AccountList"
+                url="VnUsers/preview"
+                :label="t('account.search')"
+                :info="t('account.searchInfo')"
+                custom-route-redirect-name="AccountList"
+            />
+        </Teleport>
+    </template>
+    <QPage>
+        <VnSubToolbar />
+        <FormModel
+            url-create="VnUsers"
+            model="users"
+            :form-initial-data="newAccountForm"
+            @on-data-saved="redirectToEntryBasicData"
+        >
+            <template #form="{ data, validate }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.name"
+                            :label="t('account.create.name')"
+                            :rules="validate('VnUser.name')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.nickname"
+                            :label="t('account.create.nickname')"
+                            :rules="validate('VnUser.nickname')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.email"
+                            :label="t('account.create.email')"
+                            type="email"
+                            :rules="validate('VnUser.email')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('account.create.role')"
+                            v-model="data.roleFk"
+                            :options="rolesOptions"
+                            option-value="id"
+                            option-label="name"
+                            map-options
+                            hide-selected
+                            :rules="validate('VnUser.roleFk')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInput
+                            v-model="data.password"
+                            :label="t('account.create.password')"
+                            type="password"
+                            :rules="validate('VnUser.password')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QCheckbox
+                            :label="t('account.create.active')"
+                            v-model="data.active"
+                            :toggle-indeterminate="false"
+                            :rules="validate('VnUser.active')"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index e71af0d8c..de9a13300 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -126,7 +126,7 @@ const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
                 </template>
             </VnPaginate>
         </div>
-        <QPageSticky v-if="isItManagement" :offset="[20, 20]">
+        <QPageSticky :offset="[20, 20]">
             <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
             <QTooltip class="text-no-wrap">
                 {{ t('account.card.newUser') }}
diff --git a/src/pages/Account/Card/AccountBasicData.vue b/src/pages/Account/Card/AccountBasicData.vue
index 232e18d52..386b7f83b 100644
--- a/src/pages/Account/Card/AccountBasicData.vue
+++ b/src/pages/Account/Card/AccountBasicData.vue
@@ -1,12 +1,10 @@
 <script setup>
-import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
 
 const route = useRoute();
 const { t } = useI18n();
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 40327f350..e39137643 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -36,6 +36,13 @@ account:
             delete: Delete
     search: Search user
     searchInfo: You can search by id, name or nickname
+    create:
+        name: Name
+        nickname: Nickname
+        email: Email
+        role: Role
+        password: Password
+        active: Active
 role:
     pageTitles:
         inheritedRoles: Inherited Roles
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index 89b626891..daca18185 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -45,6 +45,13 @@ account:
                 subtitle: ¿Seguro que quieres continuar?
     search: Buscar usuario
     searchInfo: Puedes buscar por id, nombre o usuario
+    create:
+        name: Nombre
+        nickname: Nombre mostrado
+        email: Email
+        role: Rol
+        password: Contraseña
+        active: Activo
 role:
     pageTitles:
         inheritedRoles: Roles heredados
-- 
2.40.1


From 56dd5e0a7653b38cbc8902eb6ea2b570b4267e80 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 29 May 2024 16:27:44 -0300
Subject: [PATCH 07/22] change fn name

---
 src/pages/Account/AccountCreate.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
index 6eed24297..204c8ffeb 100644
--- a/src/pages/Account/AccountCreate.vue
+++ b/src/pages/Account/AccountCreate.vue
@@ -22,7 +22,7 @@ const newAccountForm = reactive({
 });
 const rolesOptions = ref([]);
 
-const redirectToEntryBasicData = (_, { id }) => {
+const redirectToAccountBasicData = (_, { id }) => {
     router.push({ name: 'AccountBasicData', params: { id } });
 };
 </script>
@@ -51,7 +51,7 @@ const redirectToEntryBasicData = (_, { id }) => {
             url-create="VnUsers"
             model="users"
             :form-initial-data="newAccountForm"
-            @on-data-saved="redirectToEntryBasicData"
+            @on-data-saved="redirectToAccountBasicData"
         >
             <template #form="{ data, validate }">
                 <VnRow class="row q-gutter-md q-mb-md">
-- 
2.40.1


From 5b9d64128b6ac8c0d9090d57769e308be96a1268 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 31 May 2024 09:45:01 +0200
Subject: [PATCH 08/22] fix: AccountFilter

---
 src/pages/Account/AccountFilter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Account/AccountFilter.vue b/src/pages/Account/AccountFilter.vue
index 72893472f..784c925bc 100644
--- a/src/pages/Account/AccountFilter.vue
+++ b/src/pages/Account/AccountFilter.vue
@@ -55,7 +55,7 @@ const rolesOptions = ref([]);
             <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInput
-                        :label="t('account.card.nickname')"
+                        :label="t('account.card.alias')"
                         v-model="params.nickname"
                         lazy-rules
                         is-outlined
@@ -65,7 +65,7 @@ const rolesOptions = ref([]);
             <QItem class="q-mb-sm">
                 <QItemSection>
                     <VnSelect
-                        :label="t('account.card.nickname')"
+                        :label="t('account.card.role')"
                         v-model="params.roleFk"
                         @update:model-value="searchFn()"
                         :options="rolesOptions"
-- 
2.40.1


From 67b3888f8c8c16b446434321f34dd50f9f0ab015 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 31 May 2024 10:10:15 +0200
Subject: [PATCH 09/22] feat: AccountForm as dialog

---
 src/pages/Account/AccountCreate.vue | 165 +++++++++++++---------------
 src/pages/Account/AccountList.vue   |  22 ++--
 2 files changed, 89 insertions(+), 98 deletions(-)

diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
index 204c8ffeb..486a9b06b 100644
--- a/src/pages/Account/AccountCreate.vue
+++ b/src/pages/Account/AccountCreate.vue
@@ -3,19 +3,14 @@ import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import FormModel from 'components/FormModel.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
-import { useStateStore } from 'stores/useStateStore';
-
 const { t } = useI18n();
 const router = useRouter();
-const stateStore = useStateStore();
 
 const newAccountForm = reactive({
     active: true,
@@ -34,89 +29,77 @@ const redirectToAccountBasicData = (_, { id }) => {
         @on-fetch="(data) => (rolesOptions = data)"
         auto-load
     />
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountList"
-                url="VnUsers/preview"
-                :label="t('account.search')"
-                :info="t('account.searchInfo')"
-                custom-route-redirect-name="AccountList"
-            />
-        </Teleport>
-    </template>
-    <QPage>
-        <VnSubToolbar />
-        <FormModel
-            url-create="VnUsers"
-            model="users"
-            :form-initial-data="newAccountForm"
-            @on-data-saved="redirectToAccountBasicData"
-        >
-            <template #form="{ data, validate }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.name"
-                            :label="t('account.create.name')"
-                            :rules="validate('VnUser.name')"
-                        />
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.nickname"
-                            :label="t('account.create.nickname')"
-                            :rules="validate('VnUser.nickname')"
-                        />
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.email"
-                            :label="t('account.create.email')"
-                            type="email"
-                            :rules="validate('VnUser.email')"
-                        />
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('account.create.role')"
-                            v-model="data.roleFk"
-                            :options="rolesOptions"
-                            option-value="id"
-                            option-label="name"
-                            map-options
-                            hide-selected
-                            :rules="validate('VnUser.roleFk')"
-                        />
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnInput
-                            v-model="data.password"
-                            :label="t('account.create.password')"
-                            type="password"
-                            :rules="validate('VnUser.password')"
-                        />
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QCheckbox
-                            :label="t('account.create.active')"
-                            v-model="data.active"
-                            :toggle-indeterminate="false"
-                            :rules="validate('VnUser.active')"
-                        />
-                    </div>
-                </VnRow>
-            </template>
-        </FormModel>
-    </QPage>
+
+    <FormModelPopup
+        :title="t('account.card.newUser')"
+        url-create="VnUsers"
+        model="users"
+        :form-initial-data="newAccountForm"
+        @on-data-saved="redirectToAccountBasicData"
+    >
+        <template #form-inputs="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.name"
+                        :label="t('account.create.name')"
+                        :rules="validate('VnUser.name')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.nickname"
+                        :label="t('account.create.nickname')"
+                        :rules="validate('VnUser.nickname')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.email"
+                        :label="t('account.create.email')"
+                        type="email"
+                        :rules="validate('VnUser.email')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelect
+                        :label="t('account.create.role')"
+                        v-model="data.roleFk"
+                        :options="rolesOptions"
+                        option-value="id"
+                        option-label="name"
+                        map-options
+                        hide-selected
+                        :rules="validate('VnUser.roleFk')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.password"
+                        :label="t('account.create.password')"
+                        type="password"
+                        :rules="validate('VnUser.password')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        :label="t('account.create.active')"
+                        v-model="data.active"
+                        :toggle-indeterminate="false"
+                        :rules="validate('VnUser.active')"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModelPopup>
 </template>
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index de9a13300..dee019fed 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -9,18 +9,19 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import AccountFilter from './AccountFilter.vue';
+import AccountCreate from './AccountCreate.vue';
 
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useStateStore } from 'stores/useStateStore';
 import { useRole } from 'src/composables/useRole';
+import { QDialog } from 'quasar';
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
-const roleState = useRole();
-
-const isItManagement = computed(() => roleState.hasAny(['itManagement']));
+const accountCreateDialogRef = ref(null);
+const showNewUserBtn = computed(() => useRole().hasAny(['itManagement']));
 
 const filter = {
     fields: ['id', 'nickname', 'name', 'role'],
@@ -54,7 +55,7 @@ const navigate = (event, id) => {
     router.push({ path: `/account/${id}` });
 };
 
-const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
+const openCreateModal = () => accountCreateDialogRef.value.show();
 </script>
 
 <template>
@@ -126,8 +127,15 @@ const redirectToItemCreate = () => router.push({ name: 'AccountCreate' });
                 </template>
             </VnPaginate>
         </div>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
+        <QDialog
+            ref="accountCreateDialogRef"
+            transition-hide="scale"
+            transition-show="scale"
+        >
+            <AccountCreate />
+        </QDialog>
+        <QPageSticky :offset="[20, 20]" v-if="showNewUserBtn">
+            <QBtn @click="openCreateModal" color="primary" fab icon="add" />
             <QTooltip class="text-no-wrap">
                 {{ t('account.card.newUser') }}
             </QTooltip>
-- 
2.40.1


From c2dd7831d13e9d746e34bc526879cb6684f2fec3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 31 May 2024 10:17:44 +0200
Subject: [PATCH 10/22] perf: remove unnecessary components

---
 src/pages/Account/Card/AccountDescriptor.vue | 11 +----------
 src/pages/Account/locale/en.yml              | 19 ++++++++++++++-----
 src/router/modules/account.js                | 19 ++-----------------
 3 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index 55ae92b92..f7a7a16cc 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -1,15 +1,10 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { toDate, toPercentage } from 'src/filters';
-import { useState } from 'src/composables/useState';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
-import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import { getUrl } from 'src/composables/getUrl';
-import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
 import { useSession } from 'src/composables/useSession';
 const $props = defineProps({
     id: {
@@ -20,7 +15,6 @@ const $props = defineProps({
 });
 
 const route = useRoute();
-const state = useState();
 const { t } = useI18n();
 const salixUrl = ref();
 const { getTokenMultimedia } = useSession();
@@ -66,9 +60,6 @@ function getAccountAvatar() {
                 </QTooltip>
             </QBtn>
         </template>
-        <template #menu="{ entity }">
-            <AccountDescriptorMenu :account="entity" />
-        </template>
         <template #before>
             <QImg :src="getAccountAvatar()" class="photo">
                 <template #error>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index e39137643..37537bab1 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -29,11 +29,20 @@ account:
             setPassword: Set password
             disableAccount:
                 name: Disable account
-                title: La cuenta será deshabilitada
-                subtitle: ¿Seguro que quieres continuar?
-            disableUser: Disable user
-            sync: Sync
-            delete: Delete
+                title: The account will be disabled
+                subtitle: Are you sure you want to continue?
+            disableUser:
+                name: Disable user
+                title: The user will be disabled
+                subtitle: Are you sure you want to continue?
+            sync:
+                name: Sync
+                title: The account will be sync
+                subtitle: Are you sure you want to continue?
+            delete:
+                name: Delete
+                title: The account will be deleted
+                subtitle: Are you sure you want to continue?
     search: Search user
     searchInfo: You can search by id, name or nickname
     create:
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 0f38d8a40..eca959712 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -11,23 +11,8 @@ export default {
     component: RouterView,
     redirect: { name: 'AccountMain' },
     menus: {
-        main: [
-            'AccountList',
-            'AccountRoles',
-            'AccountAlias',
-            'AccountAccounts',
-            'AccountLdap',
-            'AccountSamba',
-            'AccountConnections',
-        ],
-        card: [
-            'AccountBasicData',
-            'AccountInheritedRoles',
-            'AccountMailForwarding',
-            'AccountMailAlias',
-            'AccountPrivileges',
-            'AccountLog',
-        ],
+        main: ['AccountList'],
+        card: [],
     },
     children: [
         {
-- 
2.40.1


From 8e1f7c24a4b5c2880d197bc5066afa268f45bad4 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sun, 2 Jun 2024 13:26:46 -0300
Subject: [PATCH 11/22] submodules WIP

---
 src/pages/Account/Card/AccountCard.vue        |  26 ++-
 .../Account/Card/AccountInheritedRoles.vue    |   7 +
 .../Account/Card/AccountMailForwarding.vue    | 151 ++++++++++++++++++
 src/pages/Account/InheritedRoles.vue          |  99 ++++++++++++
 src/pages/Account/locale/en.yml               |   4 +
 src/pages/Account/locale/es.yml               |   4 +
 src/router/modules/account.js                 |   2 +-
 7 files changed, 287 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/Account/Card/AccountInheritedRoles.vue
 create mode 100644 src/pages/Account/Card/AccountMailForwarding.vue
 create mode 100644 src/pages/Account/InheritedRoles.vue

diff --git a/src/pages/Account/Card/AccountCard.vue b/src/pages/Account/Card/AccountCard.vue
index 4fa3bad7f..29151b095 100644
--- a/src/pages/Account/Card/AccountCard.vue
+++ b/src/pages/Account/Card/AccountCard.vue
@@ -1,15 +1,31 @@
 <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',
+};
 </script>
+
 <template>
     <VnCard
         data-key="Account"
-        base-url="Accounts"
         :descriptor="AccountDescriptor"
-        searchbar-data-key="AccountList"
-        searchbar-url="Accounts/filter"
-        searchbar-label="Search account"
-        searchbar-info="You can search by account id or customer name"
+        :search-data-key="searchBarDataKeys[routeName]"
+        :search-custom-route-redirect="customRouteRedirectName"
+        :search-redirect="!!customRouteRedirectName"
+        :searchbar-label="t('account.search')"
+        :searchbar-info="t('account.searchInfo')"
     />
 </template>
diff --git a/src/pages/Account/Card/AccountInheritedRoles.vue b/src/pages/Account/Card/AccountInheritedRoles.vue
new file mode 100644
index 000000000..530a35449
--- /dev/null
+++ b/src/pages/Account/Card/AccountInheritedRoles.vue
@@ -0,0 +1,7 @@
+<script setup>
+import InheritedRoles from '../InheritedRoles.vue';
+</script>
+
+<template>
+    <InheritedRoles data-key="AccountInheritedRoles" />
+</template>
diff --git a/src/pages/Account/Card/AccountMailForwarding.vue b/src/pages/Account/Card/AccountMailForwarding.vue
new file mode 100644
index 000000000..d4f794e64
--- /dev/null
+++ b/src/pages/Account/Card/AccountMailForwarding.vue
@@ -0,0 +1,151 @@
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnRow from 'components/ui/VnRow.vue';
+
+import axios from 'axios';
+import { useStateStore } from 'stores/useStateStore';
+import useNotify from 'src/composables/useNotify.js';
+
+const { t } = useI18n();
+const route = useRoute();
+const stateStore = useStateStore();
+const { notify } = useNotify();
+
+const formData = ref({
+    forwardTo: null,
+    account: null,
+});
+
+const hasAccount = ref(false);
+const hasData = ref(false);
+const loading = ref(false);
+
+const fetchAccountExistence = async () => {
+    try {
+        const { data } = await axios.get(`Accounts/${route.params.id}/exists`);
+        return data.exists;
+    } catch (error) {
+        console.error('Error fetching account existence', error);
+        return false;
+    }
+};
+
+const fetchMailForwards = async () => {
+    try {
+        const response = await axios.get(`MailForwards/${route.params.id}`);
+        return response.data;
+    } catch (err) {
+        console.error('Error fetching mail forwards', err);
+        return null;
+    }
+};
+
+const deleteMailForward = async () => {
+    try {
+        await axios.delete(`MailForwards/${route.params.id}`);
+        formData.value.forwardTo = null;
+        notify(t('globals.dataSaved'), 'positive');
+    } catch (err) {
+        console.error('Error deleting mail forward', err);
+    }
+};
+
+const updateMailForward = async () => {
+    try {
+        await axios.patch('MailForwards', formData.value);
+    } catch (err) {
+        console.error('Error creating mail forward', err);
+    }
+};
+
+const onSubmit = async () => {
+    if (hasData.value) await updateMailForward();
+    else await deleteMailForward();
+};
+
+const setInitialData = async () => {
+    loading.value = true;
+    formData.value.account = route.params.id;
+    hasAccount.value = await fetchAccountExistence(route.params.id);
+    if (!hasAccount.value) {
+        loading.value = false;
+        return;
+    }
+
+    const result = await fetchMailForwards(route.params.id);
+    const forwardTo = result ? result.forwardTo : null;
+    formData.value.forwardTo = forwardTo;
+
+    hasData.value = hasAccount.value && !!forwardTo;
+    loading.value = false;
+};
+
+watch(
+    () => route.params.id,
+    () => setInitialData()
+);
+
+onMounted(async () => {
+    await setInitialData();
+});
+</script>
+<template>
+    <FetchData
+        :url="`Accounts/${route.params.id}/exists`"
+        @on-fetch="(data) => (hasAccount = data)"
+        auto-load
+    />
+    <div class="flex justify-center">
+        <QSpinner v-if="loading" color="primary" size="md" />
+        <QForm
+            v-else-if="hasAccount"
+            @submit="onSubmit()"
+            class="full-width"
+            style="max-width: 800px"
+        >
+            <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+                <div>
+                    <QBtnGroup push class="q-gutter-x-sm">
+                        <slot name="moreActions" />
+                        <QBtn
+                            color="primary"
+                            icon="restart_alt"
+                            flat
+                            @click="reset()"
+                            :label="t('globals.reset')"
+                        />
+                        <QBtn
+                            color="primary"
+                            icon="save"
+                            @click="onSubmit()"
+                            :label="t('globals.save')"
+                        />
+                    </QBtnGroup>
+                </div>
+            </Teleport>
+            <QCard class="q-pa-lg">
+                <VnRow class="row q-mb-md">
+                    <QCheckbox
+                        v-model="hasData"
+                        :label="t('account.mailForwarding.enableMailForwarding')"
+                        :toggle-indeterminate="false"
+                    />
+                </VnRow>
+                <VnRow v-if="hasData" class="row q-gutter-md q-mb-md">
+                    <VnInput
+                        v-model="formData.forwardTo"
+                        :label="t('account.mailForwarding.forwardingMail')"
+                    />
+                </VnRow>
+            </QCard>
+        </QForm>
+        <h5 v-else class="text-center">
+            {{ t('account.mailForwarding.accountNotEnabled') }}
+        </h5>
+    </div>
+</template>
diff --git a/src/pages/Account/InheritedRoles.vue b/src/pages/Account/InheritedRoles.vue
new file mode 100644
index 000000000..cb7413b3b
--- /dev/null
+++ b/src/pages/Account/InheritedRoles.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import { computed, ref, watch } from 'vue';
+
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { useArrayData } from 'composables/useArrayData';
+
+const props = defineProps({
+    dataKey: { type: String, required: true },
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const paginateRef = ref(null);
+
+const arrayData = useArrayData(props.dataKey);
+const store = arrayData.store;
+
+const data = computed(() => {
+    const dataCopy = store.data;
+    return dataCopy.sort((a, b) => a.inherits?.name.localeCompare(b.inherits?.name));
+});
+
+const filter = computed(() => ({
+    where: { role: route.params.id },
+    include: {
+        relation: 'inherits',
+        scope: {
+            fields: ['id', 'name', 'description'],
+        },
+    },
+}));
+
+const urlPath = computed(() => 'RoleRoles');
+
+const columns = computed(() => [
+    {
+        name: 'name',
+    },
+]);
+
+watch(
+    () => route.params.id,
+    () => {
+        store.url = urlPath.value;
+        store.filter = filter.value;
+        fetchSubRoles();
+    }
+);
+
+const fetchSubRoles = () => paginateRef.value.fetch();
+
+const redirectToRoleSummary = (id) =>
+    router.push({ name: 'RoleSummary', params: { id } });
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="full-width" style="max-width: 400px">
+            <VnPaginate
+                ref="paginateRef"
+                :data-key="dataKey"
+                :filter="filter"
+                :url="urlPath"
+                auto-load
+            >
+                <template #body>
+                    <QTable :rows="data" :columns="columns" hide-header>
+                        <template #body="{ row }">
+                            <QTr
+                                @click="redirectToRoleSummary(row.inherits?.id)"
+                                class="cursor-pointer"
+                            >
+                                <QTd>
+                                    <div class="column">
+                                        <span>{{ row.inherits?.name }}</span>
+                                        <span class="color-vn-label">{{
+                                            row.inherits?.description
+                                        }}</span>
+                                    </div>
+                                </QTd>
+                            </QTr>
+                        </template>
+                    </QTable>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    Role removed. Changes will take a while to fully propagate.: Rol eliminado. Los cambios tardaran un tiempo en propagarse completamente.
+    Role added! Changes will take a while to fully propagate.: ¡Rol añadido! Los cambios tardaran un tiempo en propagarse completamente.
+    El rol va a ser eliminado: Role will be removed
+    ¿Seguro que quieres continuar?: Are you sure you want to continue?
+</i18n>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index e39137643..3c462d420 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -43,6 +43,10 @@ account:
         role: Role
         password: Password
         active: Active
+    mailForwarding:
+        forwardingMail: Dirección de reenvío
+        accountNotEnabled: Account not enabled
+        enableMailForwarding: Enable mail forwarding
 role:
     pageTitles:
         inheritedRoles: Inherited Roles
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index daca18185..bb724e31d 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -52,6 +52,10 @@ account:
         role: Rol
         password: Contraseña
         active: Activo
+    mailForwarding:
+        forwardingMail: Dirección de reenvío
+        accountNotEnabled: Cuenta no habilitada
+        enableMailForwarding: Habilitar redirección de correo
 role:
     pageTitles:
         inheritedRoles: Roles heredados
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 0f38d8a40..db4c86c0d 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -147,7 +147,7 @@ export default {
                 },
                 {
                     name: 'AccountInheritedRoles',
-                    path: 'inherited-oles',
+                    path: 'inherited-roles',
                     meta: {
                         title: 'inheritedRoles',
                         icon: 'group',
-- 
2.40.1


From 02d8254df9eac229db1aee4e0ef95dcc23657877 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 3 Jun 2024 08:47:32 -0300
Subject: [PATCH 12/22] rest of submodules

---
 src/components/FormModel.vue                  |   1 +
 src/components/common/VnInput.vue             |  10 +-
 src/pages/Account/Card/AccountCard.vue        |   3 +
 src/pages/Account/Card/AccountLog.vue         |   6 +
 src/pages/Account/Card/AccountMailAlias.vue   | 187 ++++++++++++++++++
 .../Card/AccountMailAliasCreateForm.vue       |  51 +++++
 .../Account/Card/AccountMailForwarding.vue    |  13 +-
 src/pages/Account/Card/AccountPrivileges.vue  |  65 ++++++
 src/pages/Account/locale/en.yml               |   1 +
 src/pages/Account/locale/es.yml               |   1 +
 10 files changed, 328 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/Account/Card/AccountLog.vue
 create mode 100644 src/pages/Account/Card/AccountMailAlias.vue
 create mode 100644 src/pages/Account/Card/AccountMailAliasCreateForm.vue
 create mode 100644 src/pages/Account/Card/AccountPrivileges.vue

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 2c2acb61c..7406dcc05 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -236,6 +236,7 @@ defineExpose({
     save,
     isLoading,
     hasChanges,
+    reset,
 });
 </script>
 <template>
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 8358cd6e6..df91a9bb2 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -13,6 +13,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    info: {
+        type: String,
+        default: '',
+    },
 });
 
 const { t } = useI18n();
@@ -74,7 +78,6 @@ const inputRules = [
             <template v-if="$slots.prepend" #prepend>
                 <slot name="prepend" />
             </template>
-            
             <template #append>
                 <slot name="append" v-if="$slots.append && !$attrs.disabled" />
                 <QIcon
@@ -83,6 +86,11 @@ const inputRules = [
                     v-if="$slots.append && hover && value && !$attrs.disabled"
                     @click="value = null"
                 ></QIcon>
+                <QIcon v-if="info" name="info">
+                    <QTooltip max-width="350px">
+                        {{ info }}
+                    </QTooltip>
+                </QIcon>
             </template>
         </QInput>
     </div>
diff --git a/src/pages/Account/Card/AccountCard.vue b/src/pages/Account/Card/AccountCard.vue
index 29151b095..e4db3ee2b 100644
--- a/src/pages/Account/Card/AccountCard.vue
+++ b/src/pages/Account/Card/AccountCard.vue
@@ -15,6 +15,9 @@ const searchBarDataKeys = {
     AccountSummary: 'AccountSummary',
     AccountInheritedRoles: 'AccountInheritedRoles',
     AccountMailForwarding: 'AccountMailForwarding',
+    AccountMailAlias: 'AccountMailAlias',
+    AccountPrivileges: 'AccountPrivileges',
+    AccountLog: 'AccountLog',
 };
 </script>
 
diff --git a/src/pages/Account/Card/AccountLog.vue b/src/pages/Account/Card/AccountLog.vue
new file mode 100644
index 000000000..0f6cfb93f
--- /dev/null
+++ b/src/pages/Account/Card/AccountLog.vue
@@ -0,0 +1,6 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="User" />
+</template>
diff --git a/src/pages/Account/Card/AccountMailAlias.vue b/src/pages/Account/Card/AccountMailAlias.vue
new file mode 100644
index 000000000..9d79520f4
--- /dev/null
+++ b/src/pages/Account/Card/AccountMailAlias.vue
@@ -0,0 +1,187 @@
+<script setup>
+import { computed, ref, watch, onMounted, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import AccountMailAliasCreateForm from './AccountMailAliasCreateForm.vue';
+
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useArrayData } from 'composables/useArrayData';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+
+const { t } = useI18n();
+const route = useRoute();
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
+
+const paginateRef = ref(null);
+const createMailAliasDialogRef = ref(null);
+
+const arrayData = useArrayData('AccountMailAliases');
+const store = arrayData.store;
+
+const loading = ref(false);
+const hasAccount = ref(false);
+const data = computed(() => {
+    const dataCopy = store.data;
+    return dataCopy.sort((a, b) => a.alias?.alias.localeCompare(b.alias?.alias));
+});
+
+const filter = computed(() => ({
+    where: { account: route.params.id },
+    include: {
+        relation: 'alias',
+        scope: {
+            fields: ['id', 'alias', 'description'],
+        },
+    },
+}));
+
+const urlPath = 'MailAliasAccounts';
+
+const columns = computed(() => [
+    {
+        name: 'name',
+    },
+    {
+        name: 'action',
+    },
+]);
+
+const fetchAccountExistence = async () => {
+    try {
+        const { data } = await axios.get(`Accounts/${route.params.id}/exists`);
+        return data.exists;
+    } catch (error) {
+        console.error('Error fetching account existence', error);
+        return false;
+    }
+};
+
+const deleteMailAlias = async (row) => {
+    try {
+        await axios.delete(`${urlPath}/${row.id}`);
+        fetchMailAliases();
+        notify(t('Unsubscribed from alias!'), 'positive');
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const createMailAlias = async (mailAliasFormData) => {
+    try {
+        await axios.post(urlPath, mailAliasFormData);
+        notify(t('Subscribed to alias!'), 'positive');
+        fetchMailAliases();
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const fetchMailAliases = async () => {
+    await nextTick();
+    paginateRef.value.fetch();
+};
+
+const getAccountData = async () => {
+    loading.value = true;
+    hasAccount.value = await fetchAccountExistence();
+    if (!hasAccount.value) {
+        loading.value = false;
+        store.data = [];
+        return;
+    }
+    await fetchMailAliases();
+    loading.value = false;
+};
+
+const openCreateMailAliasForm = () => createMailAliasDialogRef.value.show();
+
+watch(
+    () => route.params.id,
+    () => {
+        store.url = urlPath;
+        store.filter = filter.value;
+        getAccountData();
+    }
+);
+
+onMounted(async () => await getAccountData());
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="full-width" style="max-width: 400px">
+            <QSpinner v-if="loading" color="primary" size="md" />
+            <VnPaginate
+                ref="paginateRef"
+                data-key="AccountMailAliases"
+                :filter="filter"
+                :url="urlPath"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QTable
+                        v-if="hasAccount && !loading"
+                        :rows="data"
+                        :columns="columns"
+                        hide-header
+                    >
+                        <template #body="{ row, rowIndex }">
+                            <QTr>
+                                <QTd>
+                                    <div class="column">
+                                        <span>{{ row.alias?.alias }}</span>
+                                        <span class="color-vn-label">{{
+                                            row.alias?.description
+                                        }}</span>
+                                    </div>
+                                </QTd>
+                                <QTd style="width: 50px !important">
+                                    <QIcon
+                                        name="delete"
+                                        size="sm"
+                                        class="cursor-pointer"
+                                        color="primary"
+                                        @click.stop.prevent="
+                                            openConfirmationModal(
+                                                t('User will be removed from alias'),
+                                                t('¿Seguro que quieres continuar?'),
+                                                () => deleteMailAlias(row, rows, rowIndex)
+                                            )
+                                        "
+                                    >
+                                        <QTooltip>
+                                            {{ t('globals.delete') }}
+                                        </QTooltip>
+                                    </QIcon>
+                                </QTd>
+                            </QTr>
+                        </template>
+                    </QTable>
+                </template>
+            </VnPaginate>
+            <h5 v-if="!hasAccount" class="text-center">
+                {{ t('account.mailForwarding.accountNotEnabled') }}
+            </h5>
+        </div>
+        <QDialog ref="createMailAliasDialogRef">
+            <AccountMailAliasCreateForm @on-submit-create-alias="createMailAlias" />
+        </QDialog>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn fab icon="add" color="primary" @click="openCreateMailAliasForm()">
+                <QTooltip>{{ t('warehouses.add') }}</QTooltip>
+            </QBtn>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    Unsubscribed from alias!: ¡Desuscrito del alias!
+    Subscribed to alias!: ¡Suscrito al alias!
+    User will be removed from alias: El usuario será borrado del alias
+    ¿Seguro que quieres continuar?: Are you sure you want to continue?
+</i18n>
diff --git a/src/pages/Account/Card/AccountMailAliasCreateForm.vue b/src/pages/Account/Card/AccountMailAliasCreateForm.vue
new file mode 100644
index 000000000..8f6d57091
--- /dev/null
+++ b/src/pages/Account/Card/AccountMailAliasCreateForm.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FormPopup from 'components/FormPopup.vue';
+
+const emit = defineEmits(['onSubmitCreateAlias']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const aliasFormData = reactive({
+    mailAlias: null,
+    account: route.params.id,
+});
+
+const aliasOptions = ref([]);
+</script>
+
+<template>
+    <FetchData
+        url="MailAliases"
+        :filter="{ fields: ['id', 'alias'], order: 'alias ASC' }"
+        auto-load
+        @on-fetch="(data) => (aliasOptions = data)"
+    />
+    <FormPopup
+        model="ZoneWarehouse"
+        @on-submit="emit('onSubmitCreateAlias', aliasFormData)"
+    >
+        <template #form-inputs>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelect
+                        :label="t('account.card.alias')"
+                        v-model="aliasFormData.mailAlias"
+                        :options="aliasOptions"
+                        option-value="id"
+                        option-label="alias"
+                        hide-selected
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormPopup>
+</template>
diff --git a/src/pages/Account/Card/AccountMailForwarding.vue b/src/pages/Account/Card/AccountMailForwarding.vue
index d4f794e64..6d0f273aa 100644
--- a/src/pages/Account/Card/AccountMailForwarding.vue
+++ b/src/pages/Account/Card/AccountMailForwarding.vue
@@ -90,16 +90,9 @@ watch(
     () => setInitialData()
 );
 
-onMounted(async () => {
-    await setInitialData();
-});
+onMounted(async () => await setInitialData());
 </script>
 <template>
-    <FetchData
-        :url="`Accounts/${route.params.id}/exists`"
-        @on-fetch="(data) => (hasAccount = data)"
-        auto-load
-    />
     <div class="flex justify-center">
         <QSpinner v-if="loading" color="primary" size="md" />
         <QForm
@@ -140,7 +133,9 @@ onMounted(async () => {
                     <VnInput
                         v-model="formData.forwardTo"
                         :label="t('account.mailForwarding.forwardingMail')"
-                    />
+                        :info="t('account.mailForwarding.mailInputInfo')"
+                    >
+                    </VnInput>
                 </VnRow>
             </QCard>
         </QForm>
diff --git a/src/pages/Account/Card/AccountPrivileges.vue b/src/pages/Account/Card/AccountPrivileges.vue
new file mode 100644
index 000000000..30c33f359
--- /dev/null
+++ b/src/pages/Account/Card/AccountPrivileges.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FormModel from 'components/FormModel.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const loading = ref(false);
+const rolesOptions = ref([]);
+const formModelRef = ref(null);
+
+watch(
+    () => route.params.id,
+    () => formModelRef.value.reset()
+);
+</script>
+<template>
+    <FetchData
+        url="VnRoles"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (rolesOptions = data)"
+    />
+    <div class="flex justify-center">
+        <QSpinner v-if="loading" color="primary" size="md" />
+        <FormModel
+            v-else
+            ref="formModelRef"
+            model="AccountPrivileges"
+            :url="`VnUsers/${route.params.id}`"
+            :url-create="`VnUsers/${route.params.id}/privileges`"
+            auto-load
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <QCheckbox
+                            v-model="data.hasGrant"
+                            :label="t('account.card.nickname')"
+                        />
+                    </div>
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelect
+                            :label="t('account.card.role')"
+                            v-model="data.roleFk"
+                            :options="rolesOptions"
+                            option-value="id"
+                            option-label="name"
+                            hide-selected
+                            :required="true"
+                        />
+                    </div>
+                </VnRow>
+            </template>
+        </FormModel>
+    </div>
+</template>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 3c462d420..0a8e6b8ec 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -47,6 +47,7 @@ account:
         forwardingMail: Dirección de reenvío
         accountNotEnabled: Account not enabled
         enableMailForwarding: Enable mail forwarding
+        mailInputInfo: All emails will be forwarded to the specified address.
 role:
     pageTitles:
         inheritedRoles: Inherited Roles
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index bb724e31d..33ba2765e 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -56,6 +56,7 @@ account:
         forwardingMail: Dirección de reenvío
         accountNotEnabled: Cuenta no habilitada
         enableMailForwarding: Habilitar redirección de correo
+        mailInputInfo: Todos los correos serán reenviados a la dirección especificada, no se mantendrá copia de los mismos en el buzón del usuario.
 role:
     pageTitles:
         inheritedRoles: Roles heredados
-- 
2.40.1


From 84ad1745e2bc94959a9340783dd63215c832cdb2 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 4 Jun 2024 09:10:40 -0300
Subject: [PATCH 13/22] several changes

---
 src/components/common/VnLog.vue               |  6 +++++-
 src/pages/Account/Card/AccountMailAlias.vue   |  2 +-
 .../Account/Card/AccountMailForwarding.vue    | 17 +++++++++++++--
 src/pages/Account/InheritedRoles.vue          | 21 ++++++++++++-------
 src/pages/Account/locale/en.yml               |  4 ++--
 5 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 340a9e550..c6796bca6 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
@@ -376,6 +376,10 @@ async function clearFilter() {
 }
 
 setLogTree();
+
+onUnmounted(() => {
+    stateStore.rightDrawer = false;
+});
 </script>
 <template>
     <FetchData
diff --git a/src/pages/Account/Card/AccountMailAlias.vue b/src/pages/Account/Card/AccountMailAlias.vue
index 9d79520f4..99ce3ab22 100644
--- a/src/pages/Account/Card/AccountMailAlias.vue
+++ b/src/pages/Account/Card/AccountMailAlias.vue
@@ -183,5 +183,5 @@ es:
     Unsubscribed from alias!: ¡Desuscrito del alias!
     Subscribed to alias!: ¡Suscrito al alias!
     User will be removed from alias: El usuario será borrado del alias
-    ¿Seguro que quieres continuar?: Are you sure you want to continue?
+    Are you sure you want to continue?: ¿Seguro que quieres continuar?
 </i18n>
diff --git a/src/pages/Account/Card/AccountMailForwarding.vue b/src/pages/Account/Card/AccountMailForwarding.vue
index 6d0f273aa..24b30f2b3 100644
--- a/src/pages/Account/Card/AccountMailForwarding.vue
+++ b/src/pages/Account/Card/AccountMailForwarding.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnRow from 'components/ui/VnRow.vue';
 
@@ -16,6 +15,7 @@ const route = useRoute();
 const stateStore = useStateStore();
 const { notify } = useNotify();
 
+const initialData = ref({});
 const formData = ref({
     forwardTo: null,
     account: null,
@@ -24,6 +24,11 @@ const formData = ref({
 const hasAccount = ref(false);
 const hasData = ref(false);
 const loading = ref(false);
+const hasDataChanged = computed(
+    () =>
+        formData.value.forwardTo !== initialData.value.forwardTo ||
+        initialData.value.hasData !== hasData.value
+);
 
 const fetchAccountExistence = async () => {
     try {
@@ -49,6 +54,8 @@ const deleteMailForward = async () => {
     try {
         await axios.delete(`MailForwards/${route.params.id}`);
         formData.value.forwardTo = null;
+        initialData.value.forwardTo = null;
+        initialData.value.hasData = hasData.value;
         notify(t('globals.dataSaved'), 'positive');
     } catch (err) {
         console.error('Error deleting mail forward', err);
@@ -58,6 +65,8 @@ const deleteMailForward = async () => {
 const updateMailForward = async () => {
     try {
         await axios.patch('MailForwards', formData.value);
+        initialData.value = { ...formData.value };
+        initialData.value.hasData = hasData.value;
     } catch (err) {
         console.error('Error creating mail forward', err);
     }
@@ -70,6 +79,7 @@ const onSubmit = async () => {
 
 const setInitialData = async () => {
     loading.value = true;
+    initialData.value.account = route.params.id;
     formData.value.account = route.params.id;
     hasAccount.value = await fetchAccountExistence(route.params.id);
     if (!hasAccount.value) {
@@ -80,7 +90,9 @@ const setInitialData = async () => {
     const result = await fetchMailForwards(route.params.id);
     const forwardTo = result ? result.forwardTo : null;
     formData.value.forwardTo = forwardTo;
+    initialData.value.forwardTo = forwardTo;
 
+    initialData.value.hasData = hasAccount.value && !!forwardTo;
     hasData.value = hasAccount.value && !!forwardTo;
     loading.value = false;
 };
@@ -116,6 +128,7 @@ onMounted(async () => await setInitialData());
                             color="primary"
                             icon="save"
                             @click="onSubmit()"
+                            :disable="!hasDataChanged"
                             :label="t('globals.save')"
                         />
                     </QBtnGroup>
diff --git a/src/pages/Account/InheritedRoles.vue b/src/pages/Account/InheritedRoles.vue
index cb7413b3b..41e718bb5 100644
--- a/src/pages/Account/InheritedRoles.vue
+++ b/src/pages/Account/InheritedRoles.vue
@@ -20,20 +20,23 @@ const store = arrayData.store;
 
 const data = computed(() => {
     const dataCopy = store.data;
-    return dataCopy.sort((a, b) => a.inherits?.name.localeCompare(b.inherits?.name));
+    return dataCopy.sort((a, b) => a.role?.name.localeCompare(b.role?.name));
 });
 
 const filter = computed(() => ({
-    where: { role: route.params.id },
+    where: {
+        prindicpalType: 'USER',
+        principalId: route.params.id,
+    },
     include: {
-        relation: 'inherits',
+        relation: 'role',
         scope: {
             fields: ['id', 'name', 'description'],
         },
     },
 }));
 
-const urlPath = computed(() => 'RoleRoles');
+const urlPath = 'RoleMappings';
 
 const columns = computed(() => [
     {
@@ -44,8 +47,9 @@ const columns = computed(() => [
 watch(
     () => route.params.id,
     () => {
-        store.url = urlPath.value;
+        store.url = urlPath;
         store.filter = filter.value;
+        store.limit = 0;
         fetchSubRoles();
     }
 );
@@ -64,20 +68,21 @@ const redirectToRoleSummary = (id) =>
                 :data-key="dataKey"
                 :filter="filter"
                 :url="urlPath"
+                :limit="0"
                 auto-load
             >
                 <template #body>
                     <QTable :rows="data" :columns="columns" hide-header>
                         <template #body="{ row }">
                             <QTr
-                                @click="redirectToRoleSummary(row.inherits?.id)"
+                                @click="redirectToRoleSummary(row.role?.id)"
                                 class="cursor-pointer"
                             >
                                 <QTd>
                                     <div class="column">
-                                        <span>{{ row.inherits?.name }}</span>
+                                        <span>{{ row.role?.name }}</span>
                                         <span class="color-vn-label">{{
-                                            row.inherits?.description
+                                            row.role?.description
                                         }}</span>
                                     </div>
                                 </QTd>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 0a8e6b8ec..b9d9a684a 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -19,7 +19,7 @@ account:
     card:
         name: Name
         nickname: User
-        role: Rol
+        role: Role
         email: Email
         alias: Alias
         lang: Language
@@ -44,7 +44,7 @@ account:
         password: Password
         active: Active
     mailForwarding:
-        forwardingMail: Dirección de reenvío
+        forwardingMail: Forward email
         accountNotEnabled: Account not enabled
         enableMailForwarding: Enable mail forwarding
         mailInputInfo: All emails will be forwarded to the specified address.
-- 
2.40.1


From 253b54379c2f572aaddf15c254f416a4fc7cb86b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 4 Jun 2024 09:14:48 -0300
Subject: [PATCH 14/22] Add submodules routes again

---
 src/router/modules/account.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 0a1203587..dd545618e 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -12,7 +12,14 @@ export default {
     redirect: { name: 'AccountMain' },
     menus: {
         main: ['AccountList'],
-        card: [],
+        card: [
+            'AccountBasicData',
+            'AccountInheritedRoles',
+            'AccountMailForwarding',
+            'AccountMailAlias',
+            'AccountPrivileges',
+            'AccountLog',
+        ],
     },
     children: [
         {
-- 
2.40.1


From ddc149b6fcad620176ea8505060678e831374b8e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 4 Jun 2024 09:25:03 -0300
Subject: [PATCH 15/22] adapt account privileges to new formModel changes

---
 src/components/FormModel.vue                 | 1 +
 src/pages/Account/Card/AccountPrivileges.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 767d1da8d..634e93f7f 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -247,6 +247,7 @@ defineExpose({
     isLoading,
     hasChanges,
     reset,
+    fetch,
 });
 </script>
 <template>
diff --git a/src/pages/Account/Card/AccountPrivileges.vue b/src/pages/Account/Card/AccountPrivileges.vue
index 30c33f359..52975ce3b 100644
--- a/src/pages/Account/Card/AccountPrivileges.vue
+++ b/src/pages/Account/Card/AccountPrivileges.vue
@@ -36,6 +36,7 @@ watch(
             :url="`VnUsers/${route.params.id}`"
             :url-create="`VnUsers/${route.params.id}/privileges`"
             auto-load
+            @on-data-saved="formModelRef.fetch()"
         >
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
-- 
2.40.1


From 0bb649806187e40cb34f77e27f5a1e1a5b161500 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 4 Jun 2024 20:33:24 +0200
Subject: [PATCH 16/22] fix: minor i18n

---
 src/pages/Account/Card/AccountPrivileges.vue | 2 +-
 src/pages/Account/locale/en.yml              | 3 +++
 src/pages/Account/locale/es.yml              | 5 ++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/Account/Card/AccountPrivileges.vue b/src/pages/Account/Card/AccountPrivileges.vue
index 52975ce3b..64efb3cda 100644
--- a/src/pages/Account/Card/AccountPrivileges.vue
+++ b/src/pages/Account/Card/AccountPrivileges.vue
@@ -43,7 +43,7 @@ watch(
                     <div class="col">
                         <QCheckbox
                             v-model="data.hasGrant"
-                            :label="t('account.card.nickname')"
+                            :label="t('account.card.privileges.delegate')"
                         />
                     </div>
                 </VnRow>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 2fa4fc0ce..c7372db78 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -25,6 +25,9 @@ account:
         lang: Language
         roleFk: Role
         newUser: New user
+        ticketTracking: Ticket tracking
+        privileges:
+            delegate: Can delegate privileges
         actions:
             setPassword: Set password
             disableAccount:
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index 33ba2765e..9b6e717f2 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -22,9 +22,12 @@ account:
         role: Rol
         email: Mail
         alias: Alias
-        lang: dioma
+        lang: Idioma
         roleFk: Rol
+        ticketTracking: Estados del ticket
         newUser: Nuevo usuario
+        privileges:
+            delegate: Puede delegar privilegios
         actions:
             setPassword: Establecer contraseña
             disableAccount:
-- 
2.40.1


From 3227d299e958e83fe106fdb45efb56699fa24674 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 5 Jun 2024 10:57:12 +0200
Subject: [PATCH 17/22] updates

---
 src/components/FetchData.vue                  |  6 +-
 src/components/UserPanel.vue                  |  1 +
 src/pages/Account/Card/AccountDescriptor.vue  | 53 +++++++++--
 .../Account/Card/AccountDescriptorMenu.vue    | 92 ++++++++++++++++---
 src/pages/Account/locale/en.yml               | 18 +++-
 src/pages/Account/locale/es.yml               | 17 +++-
 src/pages/InvoiceIn/Card/InvoiceInCard.vue    |  7 ++
 .../InvoiceIn/Card/InvoiceInIntrastat.vue     |  8 +-
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue |  6 ++
 9 files changed, 173 insertions(+), 35 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 2a0864d3e..8134b15ac 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -7,6 +7,10 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
+    dataKey: {
+        type: Boolean,
+        default: false,
+    },
     url: {
         type: String,
         default: '',
@@ -49,7 +53,7 @@ async function fetch(fetchFilter = {}) {
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;
 
-        const { data } = await axios.get($props.url, {
+        const { data } = await axios($props.url, {
             params: { filter: JSON.stringify(filter), ...$props.params },
         });
 
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 3ae05a268..6489f54f8 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -96,6 +96,7 @@ function copyUserToken() {
 <template>
     <FetchData
         url="Warehouses"
+        data-key
         order="name"
         @on-fetch="(data) => (warehousesData = data)"
         auto-load
diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index f7a7a16cc..3acbb8e77 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
+import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
 import { useSession } from 'src/composables/useSession';
 const $props = defineProps({
     id: {
@@ -33,16 +34,22 @@ function getAccountAvatar() {
     const token = getTokenMultimedia();
     return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
 }
+const hasAccount = ref(false);
 </script>
 
 <template>
+    <FetchData
+        :url="`Accounts/${entityId}/exists`"
+        auto-load
+        @on-fetch="(data) => (hasAccount = data.exists)"
+    />
     <CardDescriptor
         ref="descriptor"
         :url="`VnUsers/preview`"
         :filter="filter"
         module="Account"
         @on-fetch="setData"
-        data-key="accountData"
+        data-key="AccountId"
         :title="data.title"
         :subtitle="data.subtitle"
     >
@@ -60,6 +67,10 @@ function getAccountAvatar() {
                 </QTooltip>
             </QBtn>
         </template>
+        <template #menu>
+            {{}}
+            <AccountDescriptorMenu />
+        </template>
         <template #before>
             <QImg :src="getAccountAvatar()" class="photo">
                 <template #error>
@@ -83,18 +94,40 @@ function getAccountAvatar() {
             <VnLv :label="t('account.card.role')" :value="entity.role.name" />
         </template>
         <template #actions="{ entity }">
-            <QCardActions>
-                <QBtn
-                    round
-                    flat
-                    size="md"
+            <QCardActions class="q-gutter-x-md">
+                <QIcon
+                    v-if="entity.hasAccount"
                     color="primary"
+                    name="contact_mail"
+                    flat
+                    round
+                    size="sm"
                     class="fill-icon"
-                    icon="contact_mail"
-                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
                 >
-                    <QTooltip>{{ t('account.card.ticketTracking') }}</QTooltip>
-                </QBtn>
+                    <QTooltip>{{ t('account.card.enabled') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="!entity.hasAccount"
+                    color="primary"
+                    name="contact_mail"
+                    flat
+                    round
+                    size="sm"
+                    class="fill-icon"
+                >
+                    <QTooltip>{{ t('account.card.disabled') }}</QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="!entity.active"
+                    color="primary"
+                    name="vn:disabled"
+                    flat
+                    round
+                    size="sm"
+                    class="fill-icon"
+                >
+                    <QTooltip>{{ t('account.card.deactivated') }}</QTooltip>
+                </QIcon>
             </QCardActions>
         </template>
     </CardDescriptor>
diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
index bfec789ed..b67ac6309 100644
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -1,26 +1,62 @@
 <script setup>
 import axios from 'axios';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { usePrintService } from 'composables/usePrintService';
-
-const $props = defineProps({
-    account: {
-        type: Object,
-        required: true,
-    },
-});
 import { useVnConfirm } from 'composables/useVnConfirm';
+import { useRoute } from 'vue-router';
+import { useArrayData } from 'src/composables/useArrayData';
+
+const quasar = useQuasar();
 
 const { t } = useI18n();
 const { openReport } = usePrintService();
 const { openConfirmationModal } = useVnConfirm();
+const route = useRoute();
 
-const account = ref($props.account);
+const account = computed(() => useArrayData('AccountId').store.data[0]);
+const entityId = computed(() => route.params.id);
+
+async function setPassword() {
+    await axios.post(`Accounts`, { id: entityId });
+}
+async function enableAccount() {
+    await axios.post(`Accounts`, { id: entityId });
+    account.value.hasAccount = true;
+    quasar.notify({
+        message: t('globals.dataSaved'),
+        type: 'positive',
+    });
+}
+async function disableAccount() {
+    await axios.post(`Accounts`, { id: entityId });
+    account.value.hasAccount = false;
+    quasar.notify({
+        message: t('globals.dataSaved'),
+        type: 'positive',
+    });
+}
+async function activateUser() {
+    await axios.patch(`VnUsers/${entityId.value}`, { active: true });
+    account.value.active = true;
+    // quasar.notify({
+    //     message: t('globals.dataSaved'),
+    //     type: 'positive',
+    // });
+}
+async function deactivateUser() {
+    await axios.patch(`VnUsers/${entityId.value}`, { active: false });
+    account.value.active = false;
+    // quasar.notify({
+    //     message: t('globals.dataSaved'),
+    //     type: 'positive',
+    // });
+}
 </script>
 <template>
+    {{ account }}
     <QItem
         v-ripple
         clickable
@@ -35,6 +71,21 @@ const account = ref($props.account);
         <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'),
+                enableAccount
+            )
+        "
+    >
+        <QItemSection>{{ t('account.card.actions.enableAccount.name') }}</QItemSection>
+    </QItem>
+    <QItem
+        v-if="account.hasAccount"
         v-ripple
         clickable
         @click="
@@ -48,17 +99,32 @@ const account = ref($props.account);
         <QItemSection>{{ t('account.card.actions.disableAccount.name') }}</QItemSection>
     </QItem>
     <QItem
+        v-if="account.active"
         v-ripple
         clickable
         @click="
             openConfirmationModal(
-                t('account.card.actions.disableUser.title'),
-                t('account.card.actions.disableUser.title'),
-                actiondisableUser
+                t('account.card.actions.deactivateUser.title'),
+                t('account.card.actions.deactivateUser.title'),
+                deactivateUser
             )
         "
     >
-        <QItemSection>{{ t('account.card.actions.disableUser.name') }}</QItemSection>
+        <QItemSection>{{ t('account.card.actions.deactivateUser.name') }}</QItemSection>
+    </QItem>
+    <QItem
+        v-if="!account.active"
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('account.card.actions.activateUser.title'),
+                t('account.card.actions.activateUser.title'),
+                activateUser
+            )
+        "
+    >
+        <QItemSection>{{ t('account.card.actions.activateUser.name') }}</QItemSection>
     </QItem>
     <QItem
         v-ripple
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index c7372db78..567588186 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -28,14 +28,28 @@ account:
         ticketTracking: Ticket tracking
         privileges:
             delegate: Can delegate privileges
+        enabled: Account enabled!
+        disabled: Account disabled!
+        willActivated: User will activated
+        willDeactivated: User will be deactivated
+        activated: User activated!
+        deactivated: User deactivated!
         actions:
             setPassword: Set password
             disableAccount:
                 name: Disable account
                 title: The account will be disabled
                 subtitle: Are you sure you want to continue?
-            disableUser:
-                name: Disable user
+            enableAccount:
+                name: Enable account
+                title: The account will be enabled
+                subtitle: Are you sure you want to continue?
+            deactivateUser:
+                name: Deactivate user
+                title: The user will be deactivated
+                subtitle: Are you sure you want to continue?
+            activateUser:
+                name: Activate user
                 title: The user will be disabled
                 subtitle: Are you sure you want to continue?
             sync:
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index 9b6e717f2..65c54d9dd 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -24,7 +24,12 @@ account:
         alias: Alias
         lang: Idioma
         roleFk: Rol
-        ticketTracking: Estados del ticket
+        enabled: ¡Cuenta habilitada!
+        disabled: ¡Cuenta deshabilitada!
+        willActivated: El usuario será activado
+        willDeactivated: El usuario será desactivado
+        activated: ¡Usuario activado!
+        deactivated: ¡Usuario desactivado!
         newUser: Nuevo usuario
         privileges:
             delegate: Puede delegar privilegios
@@ -34,10 +39,18 @@ account:
                 name: Deshabilitar cuenta
                 title: La cuenta será deshabilitada
                 subtitle: ¿Seguro que quieres continuar?
-            disableUser:
+            enableAccount:
+                name: Habilitar cuenta
+                title: La cuenta será habilitada
+                subtitle: ¿Seguro que quieres continuar?
+            deactivateUser:
                 name: Desactivar usuario
                 title: El usuario será deshabilitado
                 subtitle: ¿Seguro que quieres continuar?
+            activateUser:
+                name: Activar usuario
+                title: El usuario será activado
+                subtitle: ¿Seguro que quieres continuar?
             sync:
                 name: Sincronizar
                 title: El usuario será sincronizado
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index 912713f23..37b841033 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -21,6 +21,13 @@ const filter = {
 };
 </script>
 <template>
+    <FetchData
+        url="Countries"
+        data-key
+        auto-load
+        @on-fetch="(data) => (countries = data)"
+        sort-by="name"
+    />
     <VnCard
         data-key="InvoiceIn"
         base-url="InvoiceIns"
diff --git a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
index 1d1205d9e..687059e0a 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
@@ -16,7 +16,7 @@ const currency = computed(
 );
 const invoceInIntrastat = ref([]);
 const rowsSelected = ref([]);
-const countries = ref([]);
+const countries = computed(() => useArrayData('Countries').store.data);
 const intrastats = ref([]);
 const invoiceInFormRef = ref();
 const invoiceInId = computed(() => +route.params.id);
@@ -76,12 +76,6 @@ const getTotal = (data, key) =>
     data.reduce((acc, cur) => acc + +String(cur[key]).replace(',', '.'), 0);
 </script>
 <template>
-    <FetchData
-        url="Countries"
-        auto-load
-        @on-fetch="(data) => (countries = data)"
-        sort-by="name"
-    />
     <FetchData
         url="Intrastats"
         sort-by="id"
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index 3ee90b5c2..7fae4c388 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -182,6 +182,12 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
 </script>
 
 <template>
+    <FetchData
+        url="Countries"
+        auto-load
+        @on-fetch="(data) => (countries = data)"
+        sort-by="name"
+    />
     <CardSummary
         data-key="InvoiceInSummary"
         :url="`InvoiceIns/${entityId}/summary`"
-- 
2.40.1


From c87629f2ec637308712bef0ded2743855cdfefe2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 5 Jun 2024 11:35:48 +0200
Subject: [PATCH 18/22] fix: accountBasicData after update

---
 src/pages/Account/Card/AccountBasicData.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/pages/Account/Card/AccountBasicData.vue b/src/pages/Account/Card/AccountBasicData.vue
index 386b7f83b..067c9c287 100644
--- a/src/pages/Account/Card/AccountBasicData.vue
+++ b/src/pages/Account/Card/AccountBasicData.vue
@@ -5,23 +5,32 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import { ref, watch } from 'vue';
 
 const route = useRoute();
 const { t } = useI18n();
+const formModelRef = ref(null);
 
 const accountFilter = {
     where: { id: route.params.id },
     fields: ['id', 'email', 'nickname', 'name', 'accountStateFk', 'packages', 'pickup'],
     include: [],
 };
+
+watch(
+    () => route.params.id,
+    () => formModelRef.value.reset()
+);
 </script>
 <template>
     <FormModel
+        ref="formModelRef"
         :url="`VnUsers/preview`"
         :url-update="`VnUsers/${route.params.id}/update-user`"
         :filter="accountFilter"
         model="Accounts"
         auto-load
+        @on-data-saved="formModelRef.fetch()"
     >
         <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
-- 
2.40.1


From 30c912fa62fc78244298d5aeffed8c5e592af3ee Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 5 Jun 2024 11:38:10 +0200
Subject: [PATCH 19/22] reset changes

---
 src/components/FetchData.vue                    | 6 +-----
 src/components/UserPanel.vue                    | 1 -
 src/pages/InvoiceIn/Card/InvoiceInCard.vue      | 7 -------
 src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue | 8 +++++++-
 src/pages/InvoiceIn/Card/InvoiceInSummary.vue   | 6 ------
 5 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/src/components/FetchData.vue b/src/components/FetchData.vue
index 8134b15ac..2a0864d3e 100644
--- a/src/components/FetchData.vue
+++ b/src/components/FetchData.vue
@@ -7,10 +7,6 @@ const $props = defineProps({
         type: Boolean,
         default: false,
     },
-    dataKey: {
-        type: Boolean,
-        default: false,
-    },
     url: {
         type: String,
         default: '',
@@ -53,7 +49,7 @@ async function fetch(fetchFilter = {}) {
         if ($props.sortBy) filter.order = $props.sortBy;
         if ($props.limit) filter.limit = $props.limit;
 
-        const { data } = await axios($props.url, {
+        const { data } = await axios.get($props.url, {
             params: { filter: JSON.stringify(filter), ...$props.params },
         });
 
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 6489f54f8..3ae05a268 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -96,7 +96,6 @@ function copyUserToken() {
 <template>
     <FetchData
         url="Warehouses"
-        data-key
         order="name"
         @on-fetch="(data) => (warehousesData = data)"
         auto-load
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index 37b841033..912713f23 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -21,13 +21,6 @@ const filter = {
 };
 </script>
 <template>
-    <FetchData
-        url="Countries"
-        data-key
-        auto-load
-        @on-fetch="(data) => (countries = data)"
-        sort-by="name"
-    />
     <VnCard
         data-key="InvoiceIn"
         base-url="InvoiceIns"
diff --git a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
index 687059e0a..1d1205d9e 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInIntrastat.vue
@@ -16,7 +16,7 @@ const currency = computed(
 );
 const invoceInIntrastat = ref([]);
 const rowsSelected = ref([]);
-const countries = computed(() => useArrayData('Countries').store.data);
+const countries = ref([]);
 const intrastats = ref([]);
 const invoiceInFormRef = ref();
 const invoiceInId = computed(() => +route.params.id);
@@ -76,6 +76,12 @@ const getTotal = (data, key) =>
     data.reduce((acc, cur) => acc + +String(cur[key]).replace(',', '.'), 0);
 </script>
 <template>
+    <FetchData
+        url="Countries"
+        auto-load
+        @on-fetch="(data) => (countries = data)"
+        sort-by="name"
+    />
     <FetchData
         url="Intrastats"
         sort-by="id"
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index 7fae4c388..3ee90b5c2 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -182,12 +182,6 @@ const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
 </script>
 
 <template>
-    <FetchData
-        url="Countries"
-        auto-load
-        @on-fetch="(data) => (countries = data)"
-        sort-by="name"
-    />
     <CardSummary
         data-key="InvoiceInSummary"
         :url="`InvoiceIns/${entityId}/summary`"
-- 
2.40.1


From de488169b7bf58dce5675f052c5f4b9f74af7447 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 5 Jun 2024 15:09:43 +0200
Subject: [PATCH 20/22] feat: AccountDescriptor

---
 src/components/ui/VnConfirm.vue               |   1 +
 src/pages/Account/Card/AccountDescriptor.vue  |  38 ++--
 .../Account/Card/AccountDescriptorMenu.vue    | 188 +++++++++---------
 src/pages/Account/locale/en.yml               |   9 +
 src/pages/Account/locale/es.yml               |   9 +
 src/pages/Customer/Card/CustomerWebAccess.vue |   7 -
 .../components/CustomerChangePassword.vue     |  19 +-
 7 files changed, 139 insertions(+), 132 deletions(-)

diff --git a/src/components/ui/VnConfirm.vue b/src/components/ui/VnConfirm.vue
index f8715f685..0480650db 100644
--- a/src/components/ui/VnConfirm.vue
+++ b/src/components/ui/VnConfirm.vue
@@ -67,6 +67,7 @@ async function confirm() {
             </QCardSection>
             <QCardSection class="row items-center">
                 <span v-html="message"></span>
+                <slot name="customHTML"></slot>
             </QCardSection>
             <QCardActions align="right">
                 <QBtn
diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index 3acbb8e77..612c32d57 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -7,6 +7,8 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
 import { useSession } from 'src/composables/useSession';
+import FetchData from 'src/components/FetchData.vue';
+
 const $props = defineProps({
     id: {
         type: Number,
@@ -68,8 +70,7 @@ const hasAccount = ref(false);
             </QBtn>
         </template>
         <template #menu>
-            {{}}
-            <AccountDescriptorMenu />
+            <AccountDescriptorMenu :has-account="hasAccount" />
         </template>
         <template #before>
             <QImg :src="getAccountAvatar()" class="photo">
@@ -95,28 +96,6 @@ const hasAccount = ref(false);
         </template>
         <template #actions="{ entity }">
             <QCardActions class="q-gutter-x-md">
-                <QIcon
-                    v-if="entity.hasAccount"
-                    color="primary"
-                    name="contact_mail"
-                    flat
-                    round
-                    size="sm"
-                    class="fill-icon"
-                >
-                    <QTooltip>{{ t('account.card.enabled') }}</QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="!entity.hasAccount"
-                    color="primary"
-                    name="contact_mail"
-                    flat
-                    round
-                    size="sm"
-                    class="fill-icon"
-                >
-                    <QTooltip>{{ t('account.card.disabled') }}</QTooltip>
-                </QIcon>
                 <QIcon
                     v-if="!entity.active"
                     color="primary"
@@ -128,6 +107,17 @@ const hasAccount = ref(false);
                 >
                     <QTooltip>{{ t('account.card.deactivated') }}</QTooltip>
                 </QIcon>
+                <QIcon
+                    color="primary"
+                    name="contact_mail"
+                    v-if="entity.hasAccount"
+                    flat
+                    round
+                    size="sm"
+                    class="fill-icon"
+                >
+                    <QTooltip>{{ t('account.card.enabled') }}</QTooltip>
+                </QIcon>
             </QCardActions>
         </template>
     </CardDescriptor>
diff --git a/src/pages/Account/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
index b67ac6309..60510394d 100644
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ b/src/pages/Account/Card/AccountDescriptorMenu.vue
@@ -1,73 +1,109 @@
 <script setup>
 import axios from 'axios';
-import { computed, ref } from 'vue';
+import { computed, ref, toRefs } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { usePrintService } from 'composables/usePrintService';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
+import CustomerChangePassword from 'src/pages/Customer/components/CustomerChangePassword.vue';
+import VnConfirm from 'src/components/ui/VnConfirm.vue';
 
 const quasar = useQuasar();
-
+const $props = defineProps({
+    hasAccount: {
+        type: Boolean,
+        default: false,
+        required: true,
+    },
+});
 const { t } = useI18n();
-const { openReport } = usePrintService();
+const { hasAccount } = toRefs($props);
 const { openConfirmationModal } = useVnConfirm();
 const route = useRoute();
 
 const account = computed(() => useArrayData('AccountId').store.data[0]);
-const entityId = computed(() => route.params.id);
+account.value.hasAccount = hasAccount.value;
+const entityId = computed(() => +route.params.id);
 
-async function setPassword() {
-    await axios.post(`Accounts`, { id: entityId });
-}
-async function enableAccount() {
-    await axios.post(`Accounts`, { id: entityId });
-    account.value.hasAccount = true;
+async function updateStatusAccount(active) {
+    if (active) {
+        await axios.post(`Accounts`, { id: entityId.value });
+    } else {
+        await axios.delete(`Accounts/${entityId.value}`);
+    }
+
+    account.value.hasAccount = active;
+    const status = active ? 'enable' : 'disable';
     quasar.notify({
-        message: t('globals.dataSaved'),
+        message: t(`account.card.${status}Account.success`),
         type: 'positive',
     });
 }
-async function disableAccount() {
-    await axios.post(`Accounts`, { id: entityId });
-    account.value.hasAccount = false;
+async function updateStatusUser(active) {
+    await axios.patch(`VnUsers/${entityId.value}`, { active });
+    account.value.active = active;
+    const status = active ? 'activate' : 'deactivate';
     quasar.notify({
-        message: t('globals.dataSaved'),
+        message: t(`account.card.actions.${status}User.success`),
         type: 'positive',
     });
 }
-async function activateUser() {
-    await axios.patch(`VnUsers/${entityId.value}`, { active: true });
-    account.value.active = true;
-    // quasar.notify({
-    //     message: t('globals.dataSaved'),
-    //     type: 'positive',
-    // });
+function setPassword() {
+    quasar.dialog({
+        component: CustomerChangePassword,
+        componentProps: {
+            id: entityId.value,
+        },
+    });
 }
-async function deactivateUser() {
-    await axios.patch(`VnUsers/${entityId.value}`, { active: false });
-    account.value.active = false;
-    // quasar.notify({
-    //     message: t('globals.dataSaved'),
-    //     type: 'positive',
-    // });
+const showSyncDialog = ref(false);
+const syncPassword = ref(null);
+const shouldSyncPassword = ref(false);
+async function sync() {
+    const params = { force: true };
+    if (shouldSyncPassword.value) params.password = syncPassword.value;
+    await axios.patch(`Accounts/${account.value.name}/sync`, {
+        params,
+    });
+    quasar.notify({
+        message: t('account.card.actions.sync.success'),
+        type: 'positive',
+    });
 }
 </script>
 <template>
-    {{ account }}
-    <QItem
-        v-ripple
-        clickable
-        @click="
-            openConfirmationModal(
-                t('Confirm deletion'),
-                t('Are you sure...TODO'),
-                setPassword
-            )
-        "
+    <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
@@ -78,7 +114,7 @@ async function deactivateUser() {
             openConfirmationModal(
                 t('account.card.actions.enableAccount.title'),
                 t('account.card.actions.enableAccount.subtitle'),
-                enableAccount
+                () => updateStatusAccount(true)
             )
         "
     >
@@ -92,12 +128,27 @@ async function deactivateUser() {
             openConfirmationModal(
                 t('account.card.actions.disableAccount.title'),
                 t('account.card.actions.disableAccount.subtitle'),
-                disableAccount
+                () => updateStatusAccount(false)
             )
         "
     >
         <QItemSection>{{ t('account.card.actions.disableAccount.name') }}</QItemSection>
     </QItem>
+
+    <QItem
+        v-if="!account.active"
+        v-ripple
+        clickable
+        @click="
+            openConfirmationModal(
+                t('account.card.actions.activateUser.title'),
+                t('account.card.actions.activateUser.title'),
+                () => updateStatusUser(true)
+            )
+        "
+    >
+        <QItemSection>{{ t('account.card.actions.activateUser.name') }}</QItemSection>
+    </QItem>
     <QItem
         v-if="account.active"
         v-ripple
@@ -106,37 +157,13 @@ async function deactivateUser() {
             openConfirmationModal(
                 t('account.card.actions.deactivateUser.title'),
                 t('account.card.actions.deactivateUser.title'),
-                deactivateUser
+                () => updateStatusUser(false)
             )
         "
     >
         <QItemSection>{{ t('account.card.actions.deactivateUser.name') }}</QItemSection>
     </QItem>
-    <QItem
-        v-if="!account.active"
-        v-ripple
-        clickable
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.activateUser.title'),
-                t('account.card.actions.activateUser.title'),
-                activateUser
-            )
-        "
-    >
-        <QItemSection>{{ t('account.card.actions.activateUser.name') }}</QItemSection>
-    </QItem>
-    <QItem
-        v-ripple
-        clickable
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.sync.title'),
-                t('account.card.actions.sync.subtitle'),
-                sync
-            )
-        "
-    >
+    <QItem v-ripple clickable @click="showSyncDialog = true">
         <QItemSection>{{ t('account.card.actions.sync.name') }}</QItemSection>
     </QItem>
 
@@ -158,24 +185,3 @@ async function deactivateUser() {
         <QItemSection>{{ t('account.card.actions.delete.name') }}</QItemSection>
     </QItem>
 </template>
-
-<i18n>
-{
-    "en": {
-        "pickupOrder": "Pickup order",
-        "openPickupOrder": "Open pickup order",
-        "sendPickupOrder": "Send pickup order",
-        "deleteAccount": "Delete account",
-        "confirmDeletion": "Confirm deletion",
-        "confirmDeletionMessage": "Are you sure you want to delete this account?"
-    },
-    "es": {
-        "pickupOrder": "Orden de recogida",
-        "openPickupOrder": "Abrir orden de recogida",
-        "sendPickupOrder": "Enviar orden de recogida",
-        "deleteAccount": "Eliminar reclamación",
-        "confirmDeletion": "Confirmar eliminación",
-        "confirmDeletionMessage": "Seguro que quieres eliminar esta reclamación?"
-    }
-}
-</i18n>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 567588186..215273de8 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -40,26 +40,35 @@ account:
                 name: Disable account
                 title: The account will be disabled
                 subtitle: Are you sure you want to continue?
+                success: 'Account disabled!'
             enableAccount:
                 name: Enable account
                 title: The account will be enabled
                 subtitle: Are you sure you want to continue?
+                success: 'Account enabled!'
             deactivateUser:
                 name: Deactivate user
                 title: The user will be deactivated
                 subtitle: Are you sure you want to continue?
+                success: 'User deactivated!'
             activateUser:
                 name: Activate user
                 title: The user will be disabled
                 subtitle: Are you sure you want to continue?
+                success: 'User activated!'
             sync:
                 name: Sync
                 title: The account will be sync
                 subtitle: Are you sure you want to continue?
+                success: 'User synchronized!'
+                checkbox: Synchronize password
+                message: Do you want to synchronize user?
+                tooltip: If password is not specified, just user attributes are synchronized
             delete:
                 name: Delete
                 title: The account will be deleted
                 subtitle: Are you sure you want to continue?
+                success: ''
     search: Search user
     searchInfo: You can search by id, name or nickname
     create:
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index 65c54d9dd..9739473cd 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -39,26 +39,35 @@ account:
                 name: Deshabilitar cuenta
                 title: La cuenta será deshabilitada
                 subtitle: ¿Seguro que quieres continuar?
+                success: '¡Cuenta deshabilitada!'
             enableAccount:
                 name: Habilitar cuenta
                 title: La cuenta será habilitada
                 subtitle: ¿Seguro que quieres continuar?
+                success: '¡Cuenta habilitada!'
             deactivateUser:
                 name: Desactivar usuario
                 title: El usuario será deshabilitado
                 subtitle: ¿Seguro que quieres continuar?
+                success: '¡Usuario desactivado!'
             activateUser:
                 name: Activar usuario
                 title: El usuario será activado
                 subtitle: ¿Seguro que quieres continuar?
+                success: '¡Usuario activado!'
             sync:
                 name: Sincronizar
                 title: El usuario será sincronizado
                 subtitle: ¿Seguro que quieres continuar?
+                success: '¡Usuario sincronizado!'
+                checkbox: Sincronizar contraseña
+                message: ¿Quieres sincronizar el usuario?
+                tooltip: Si la contraseña no se especifica solo se sincronizarán lo atributos del usuario
             delete:
                 name: Eliminar
                 title: El usuario será eliminado
                 subtitle: ¿Seguro que quieres continuar?
+                success: ''
     search: Buscar usuario
     searchInfo: Puedes buscar por id, nombre o usuario
     create:
diff --git a/src/pages/Customer/Card/CustomerWebAccess.vue b/src/pages/Customer/Card/CustomerWebAccess.vue
index 9e534235c..33659dd77 100644
--- a/src/pages/Customer/Card/CustomerWebAccess.vue
+++ b/src/pages/Customer/Card/CustomerWebAccess.vue
@@ -28,7 +28,6 @@ const isLoading = ref(false);
 const name = ref(null);
 const usersPreviewRef = ref(null);
 const user = ref([]);
-const userPasswords = ref(0);
 
 const dataChanges = computed(() => {
     return (
@@ -45,7 +44,6 @@ const showChangePasswordDialog = () => {
         component: CustomerChangePassword,
         componentProps: {
             id: route.params.id,
-            userPasswords: userPasswords.value,
             promise: usersPreviewRef.value.fetch(),
         },
     });
@@ -97,11 +95,6 @@ const onSubmit = async () => {
         @on-fetch="(data) => (canChangePassword = data)"
         auto-load
     />
-    <FetchData
-        @on-fetch="(data) => (userPasswords = data[0])"
-        auto-load
-        url="UserPasswords"
-    />
 
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <QBtnGroup push class="q-gutter-x-sm">
diff --git a/src/pages/Customer/components/CustomerChangePassword.vue b/src/pages/Customer/components/CustomerChangePassword.vue
index f0be5e510..1bfc5e103 100644
--- a/src/pages/Customer/components/CustomerChangePassword.vue
+++ b/src/pages/Customer/components/CustomerChangePassword.vue
@@ -9,6 +9,7 @@ import useNotify from 'src/composables/useNotify';
 
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import FetchData from 'src/components/FetchData.vue';
 
 const { dialogRef } = useDialogPluginComponent();
 const { notify } = useNotify();
@@ -19,15 +20,12 @@ const $props = defineProps({
         type: String,
         required: true,
     },
-    userPasswords: {
-        type: Object,
-        required: true,
-    },
     promise: {
         type: Function,
         required: true,
     },
 });
+const userPasswords = ref({});
 
 const closeButton = ref(null);
 const isLoading = ref(false);
@@ -60,6 +58,11 @@ const onSubmit = async () => {
 
 <template>
     <QDialog ref="dialogRef">
+        <FetchData
+            @on-fetch="(data) => (userPasswords = data[0])"
+            auto-load
+            url="UserPasswords"
+        />
         <QCard class="q-pa-lg">
             <QCardSection>
                 <QForm @submit.prevent="onSubmit">
@@ -71,7 +74,7 @@ const onSubmit = async () => {
                         <QIcon name="close" size="sm" />
                     </span>
 
-                    <VnRow class="row q-gutter-md q-mb-md">
+                    <VnRow class="row q-gutter-md q-mb-md" style="flex-direction: column">
                         <div class="col">
                             <VnInput
                                 :label="t('New password')"
@@ -84,11 +87,7 @@ const onSubmit = async () => {
                                         <QTooltip>
                                             {{
                                                 t('customer.card.passwordRequirements', {
-                                                    length: $props.userPasswords.length,
-                                                    nAlpha: $props.userPasswords.nAlpha,
-                                                    nDigits: $props.userPasswords.nDigits,
-                                                    nPunct: $props.userPasswords.nPunct,
-                                                    nUpper: $props.userPasswords.nUpper,
+                                                    ...userPasswords,
                                                 })
                                             }}
                                         </QTooltip>
-- 
2.40.1


From cd8e99e1dffd261998ca83b1bc2681ae810165f5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 18 Jun 2024 10:52:55 +0200
Subject: [PATCH 21/22] perf: remove CLI warnings

---
 src/pages/Account/Card/AccountDescriptor.vue | 1 -
 src/pages/Travel/Card/TravelDescriptor.vue   | 3 +--
 src/pages/Travel/TravelCreate.vue            | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index 612c32d57..2ff8afa33 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -19,7 +19,6 @@ const $props = defineProps({
 
 const route = useRoute();
 const { t } = useI18n();
-const salixUrl = ref();
 const { getTokenMultimedia } = useSession();
 const entityId = computed(() => {
     return $props.id || route.params.id;
diff --git a/src/pages/Travel/Card/TravelDescriptor.vue b/src/pages/Travel/Card/TravelDescriptor.vue
index 975beb9ab..6d3707828 100644
--- a/src/pages/Travel/Card/TravelDescriptor.vue
+++ b/src/pages/Travel/Card/TravelDescriptor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -7,7 +7,6 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import TravelDescriptorMenuItems from './TravelDescriptorMenuItems.vue';
 
-import useCardDescription from 'src/composables/useCardDescription';
 import { toDate } from 'src/filters';
 
 const $props = defineProps({
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index 0c734a367..09bf58765 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { reactive, ref, onBeforeMount } from 'vue';
+import { ref, onBeforeMount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
-- 
2.40.1


From ae75908e46e13f8dfbd242fc856836bb30c9c9df Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 18 Jun 2024 10:53:21 +0200
Subject: [PATCH 22/22] refactor: simplify code

---
 src/pages/Account/AccountCreate.vue          | 104 +++++++------------
 src/pages/Account/Card/AccountBasicData.vue  |  34 ++----
 src/pages/Account/Card/AccountPrivileges.vue |  73 +++++--------
 3 files changed, 78 insertions(+), 133 deletions(-)

diff --git a/src/pages/Account/AccountCreate.vue b/src/pages/Account/AccountCreate.vue
index 486a9b06b..1c0f9fee6 100644
--- a/src/pages/Account/AccountCreate.vue
+++ b/src/pages/Account/AccountCreate.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import FormModelPopup from 'components/FormModelPopup.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -29,7 +28,6 @@ const redirectToAccountBasicData = (_, { id }) => {
         @on-fetch="(data) => (rolesOptions = data)"
         auto-load
     />
-
     <FormModelPopup
         :title="t('account.card.newUser')"
         url-create="VnUsers"
@@ -38,68 +36,46 @@ const redirectToAccountBasicData = (_, { id }) => {
         @on-data-saved="redirectToAccountBasicData"
     >
         <template #form-inputs="{ data, validate }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.name"
-                        :label="t('account.create.name')"
-                        :rules="validate('VnUser.name')"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.nickname"
-                        :label="t('account.create.nickname')"
-                        :rules="validate('VnUser.nickname')"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.email"
-                        :label="t('account.create.email')"
-                        type="email"
-                        :rules="validate('VnUser.email')"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelect
-                        :label="t('account.create.role')"
-                        v-model="data.roleFk"
-                        :options="rolesOptions"
-                        option-value="id"
-                        option-label="name"
-                        map-options
-                        hide-selected
-                        :rules="validate('VnUser.roleFk')"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.password"
-                        :label="t('account.create.password')"
-                        type="password"
-                        :rules="validate('VnUser.password')"
-                    />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <QCheckbox
-                        :label="t('account.create.active')"
-                        v-model="data.active"
-                        :toggle-indeterminate="false"
-                        :rules="validate('VnUser.active')"
-                    />
-                </div>
-            </VnRow>
+            <div class="column q-gutter-sm">
+                <VnInput
+                    v-model="data.name"
+                    :label="t('account.create.name')"
+                    :rules="validate('VnUser.name')"
+                />
+                <VnInput
+                    v-model="data.nickname"
+                    :label="t('account.create.nickname')"
+                    :rules="validate('VnUser.nickname')"
+                />
+                <VnInput
+                    v-model="data.email"
+                    :label="t('account.create.email')"
+                    type="email"
+                    :rules="validate('VnUser.email')"
+                />
+                <VnSelect
+                    :label="t('account.create.role')"
+                    v-model="data.roleFk"
+                    :options="rolesOptions"
+                    option-value="id"
+                    option-label="name"
+                    map-options
+                    hide-selected
+                    :rules="validate('VnUser.roleFk')"
+                />
+                <VnInput
+                    v-model="data.password"
+                    :label="t('account.create.password')"
+                    type="password"
+                    :rules="validate('VnUser.password')"
+                />
+                <QCheckbox
+                    :label="t('account.create.active')"
+                    v-model="data.active"
+                    :toggle-indeterminate="false"
+                    :rules="validate('VnUser.active')"
+                />
+            </div>
         </template>
     </FormModelPopup>
 </template>
diff --git a/src/pages/Account/Card/AccountBasicData.vue b/src/pages/Account/Card/AccountBasicData.vue
index 067c9c287..3a9d5c9bf 100644
--- a/src/pages/Account/Card/AccountBasicData.vue
+++ b/src/pages/Account/Card/AccountBasicData.vue
@@ -33,30 +33,16 @@ watch(
         @on-data-saved="formModelRef.fetch()"
     >
         <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.name" :label="t('account.card.nickname')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.email" :label="t('account.card.email')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnSelect
-                        v-model="data.lang"
-                        :options="['es', 'en']"
-                        :label="t('account.card.lang')"
-                    />
-                </div>
-            </VnRow>
+            <div class="q-gutter-y-sm">
+                <VnInput v-model="data.name" :label="t('account.card.nickname')" />
+                <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
+                <VnInput v-model="data.email" :label="t('account.card.email')" />
+                <VnSelect
+                    v-model="data.lang"
+                    :options="['es', 'en']"
+                    :label="t('account.card.lang')"
+                />
+            </div>
         </template>
     </FormModel>
 </template>
diff --git a/src/pages/Account/Card/AccountPrivileges.vue b/src/pages/Account/Card/AccountPrivileges.vue
index 64efb3cda..f1f24f19b 100644
--- a/src/pages/Account/Card/AccountPrivileges.vue
+++ b/src/pages/Account/Card/AccountPrivileges.vue
@@ -1,24 +1,17 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 
-const loading = ref(false);
 const rolesOptions = ref([]);
-const formModelRef = ref(null);
-
-watch(
-    () => route.params.id,
-    () => formModelRef.value.reset()
-);
+const formModelRef = ref();
 </script>
 <template>
     <FetchData
@@ -27,40 +20,30 @@ watch(
         auto-load
         @on-fetch="(data) => (rolesOptions = data)"
     />
-    <div class="flex justify-center">
-        <QSpinner v-if="loading" color="primary" size="md" />
-        <FormModel
-            v-else
-            ref="formModelRef"
-            model="AccountPrivileges"
-            :url="`VnUsers/${route.params.id}`"
-            :url-create="`VnUsers/${route.params.id}/privileges`"
-            auto-load
-            @on-data-saved="formModelRef.fetch()"
-        >
-            <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <QCheckbox
-                            v-model="data.hasGrant"
-                            :label="t('account.card.privileges.delegate')"
-                        />
-                    </div>
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <div class="col">
-                        <VnSelect
-                            :label="t('account.card.role')"
-                            v-model="data.roleFk"
-                            :options="rolesOptions"
-                            option-value="id"
-                            option-label="name"
-                            hide-selected
-                            :required="true"
-                        />
-                    </div>
-                </VnRow>
-            </template>
-        </FormModel>
-    </div>
+    <FormModel
+        ref="formModelRef"
+        model="AccountPrivileges"
+        :url="`VnUsers/${route.params.id}`"
+        :url-create="`VnUsers/${route.params.id}/privileges`"
+        auto-load
+        @on-data-saved="formModelRef.fetch()"
+    >
+        <template #form="{ data }">
+            <div class="q-gutter-y-sm">
+                <QCheckbox
+                    v-model="data.hasGrant"
+                    :label="t('account.card.privileges.delegate')"
+                />
+                <VnSelect
+                    :label="t('account.card.role')"
+                    v-model="data.roleFk"
+                    :options="rolesOptions"
+                    option-value="id"
+                    option-label="name"
+                    hide-selected
+                    :required="true"
+                />
+            </div>
+        </template>
+    </FormModel>
 </template>
-- 
2.40.1