From 5c25c77f193a9dde8486e20add53553c0160f514 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 30 May 2024 13:09:11 -0300
Subject: [PATCH 01/12] Mail aliases

---
 src/i18n/locale/en.yml                        |   2 +
 src/i18n/locale/es.yml                        |   2 +
 src/pages/Account/AccountAcls.vue             | 114 --------
 src/pages/Account/AccountAlias.vue            | 127 +++++----
 src/pages/Account/AccountConnections.vue      |  75 -----
 src/pages/Account/AccountCreate.vue           | 159 -----------
 src/pages/Account/AccountLdap.vue             |  65 -----
 src/pages/Account/AccountList.vue             | 110 +-------
 src/pages/Account/AccountSamba.vue            |  82 ------
 .../AliasCreateForm.vue}                      |  30 +-
 .../Card/AliasBasicData.vue}                  |  10 +-
 src/pages/Account/Alias/Card/AliasCard.vue    |  32 +++
 .../Card/AliasDescriptor.vue}                 |  54 ++--
 src/pages/Account/Alias/Card/AliasSummary.vue |  49 ++++
 src/pages/Account/Alias/Card/AliasUsers.vue   | 118 ++++++++
 .../Account/Card/AccountInheritedRoles.vue    | 256 ------------------
 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/RoleCard.vue      |  15 -
 src/pages/Account/Role/Card/RoleLog.vue       |   6 -
 src/pages/Account/Role/Card/RoleSummary.vue   |  98 -------
 src/pages/Account/Role/Card/SubRoles.vue      |   6 -
 src/pages/Account/locale/en.yml               |  12 +-
 src/pages/Account/locale/es.yml               |  12 +-
 src/router/modules/index.js                   |   2 +
 src/router/modules/mailAlias.js               |  57 ++++
 src/router/routes.js                          |   2 +
 28 files changed, 416 insertions(+), 1405 deletions(-)
 delete mode 100644 src/pages/Account/AccountAcls.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
 rename src/pages/Account/{Role/Card/RoleForm.vue => Alias/AliasCreateForm.vue} (63%)
 rename src/pages/Account/{Role/Card/RoleBasicData.vue => Alias/Card/AliasBasicData.vue} (73%)
 create mode 100644 src/pages/Account/Alias/Card/AliasCard.vue
 rename src/pages/Account/{Role/Card/RoleDescriptor.vue => Alias/Card/AliasDescriptor.vue} (69%)
 create mode 100644 src/pages/Account/Alias/Card/AliasSummary.vue
 create mode 100644 src/pages/Account/Alias/Card/AliasUsers.vue
 delete mode 100644 src/pages/Account/Card/AccountInheritedRoles.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/RoleCard.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
 create mode 100644 src/router/modules/mailAlias.js

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index d27267223..58b20270f 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -102,6 +102,8 @@ globals:
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
         role: Role
+        alias: Alias
+        aliasUsers: Users
     created: Created
     worker: Worker
     now: Now
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index e1c67c629..dd72f82eb 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -102,6 +102,8 @@ globals:
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
         role: Role
+        alias: Alias
+        aliasUsers: Usuarios
     created: Fecha creación
     worker: Trabajador
     now: Ahora
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
index dd484bc8c..f33572e5e 100644
--- a/src/pages/Account/AccountAlias.vue
+++ b/src/pages/Account/AccountAlias.vue
@@ -1,74 +1,105 @@
 <script setup>
-import { onMounted, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import { ref } from '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({
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import AliasSummary from './Alias/Card/AliasSummary.vue';
+import AliasCreateForm from './Alias/AliasCreateForm.vue';
+
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useStateStore } from 'stores/useStateStore';
+
+defineProps({
     id: {
         type: Number,
         default: 0,
     },
 });
 
-const urlPath = computed(() => `AccessTokens`);
-const entityId = computed(() => $props.id || useRoute().params.id);
+const { t } = useI18n();
+const { viewSummary } = useSummaryDialog();
+const router = useRouter();
+const stateStore = useStateStore();
+const aliasCreateDialogRef = ref(null);
 
-onMounted(async () => {});
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { id: value }
+                : { alias: { like: `%${value}%` } };
+    }
+};
+
+const navigate = (id) => router.push({ name: 'AliasSummary', params: { id } });
+
+const openCreateModal = () => aliasCreateDialogRef.value.show();
 </script>
 
 <template>
-    <QPage class="column items-center q-pa-md">
-        <div class="full-width" style="max-width: 400px">
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="AccountAliasList"
+                url="MailAliases"
+                :expr-builder="exprBuilder"
+                :label="t('mailAlias.search')"
+                :info="t('mailAlias.searchInfo')"
+            />
+        </Teleport>
+    </template>
+    <QPage class="flex justify-center q-pa-md">
+        <div class="vn-card-list">
             <VnPaginate
                 ref="paginateRef"
-                data-key="AccessTokens"
-                :filter="filter"
-                :url="urlPath"
+                data-key="AccountAliasList"
+                url="MailAliases"
                 auto-load
+                :expr-builder="exprBuilder"
             >
                 <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>
+                    <CardList
+                        v-for="row of rows"
+                        :id="row.id"
+                        :key="row.id"
+                        :title="row.alias"
+                        @click="navigate(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('mailAlias.alias')" :value="row.alias">
+                            </VnLv>
+                            <VnLv
+                                :label="t('mailAlias.description')"
+                                :value="row.description"
+                            >
+                            </VnLv>
                         </template>
-                    </QTable>
+                        <template #actions>
+                            <QBtn
+                                :label="t('components.smartCard.openSummary')"
+                                @click.stop="viewSummary(row.id, AliasSummary)"
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
                 </template>
             </VnPaginate>
         </div>
+        <QDialog
+            ref="aliasCreateDialogRef"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <AliasCreateForm />
+        </QDialog>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="createMailAlias()">
-                <QTooltip>{{ t('warehouses.add') }}</QTooltip>
+            <QBtn fab icon="add" color="primary" @click="openCreateModal()">
+                <QTooltip>{{ t('mailAlias.newAlias') }}</QTooltip>
             </QBtn>
         </QPageSticky>
     </QPage>
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/AccountList.vue b/src/pages/Account/AccountList.vue
index 56d54a47d..4cf27607a 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -1,109 +1 @@
-<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 { useSummaryDialog } from 'src/composables/useSummaryDialog';
-
-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) {
-    if (event.ctrlKey || event.metaKey)
-        return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
-}
-</script>
-
-<template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountList"
-                :label="t('account.search')"
-                :info="t('You can search by account id or customer name')"
-            />
-        </Teleport>
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport>
-    </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
-                :filter="filter"
-                data-key="AccountList"
-                url="VnUsers/preview"
-                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.card.name')" :value="row.nickname">
-                            </VnLv>
-                            <VnLv
-                                :label="t('account.card.nickname')"
-                                :value="row.username"
-                            >
-                            </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)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-</template>
+<template>Account list</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/Card/RoleForm.vue b/src/pages/Account/Alias/AliasCreateForm.vue
similarity index 63%
rename from src/pages/Account/Role/Card/RoleForm.vue
rename to src/pages/Account/Alias/AliasCreateForm.vue
index 0fef124c6..c8ed6fadf 100644
--- a/src/pages/Account/Role/Card/RoleForm.vue
+++ b/src/pages/Account/Alias/AliasCreateForm.vue
@@ -1,39 +1,43 @@
 <script setup>
-import { useRoute } from 'vue-router';
+import { useRouter } 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 router = useRouter();
 const { t } = useI18n();
-const shelvingId = route.params?.id || null;
-const isNew = Boolean(!shelvingId);
+
 const defaultInitialData = {
-    name: null,
+    alias: null,
     description: null,
 };
+
+const redirectToAliasBasicData = ({ id }) =>
+    router.push({ name: 'AliasBasicData', params: { id } });
 </script>
+
 <template>
     <FormModelPopup
-        :title="t('Create role')"
+        :title="t('Create alias')"
         ref="formModelPopupRef"
-        url-create="VnRoles"
-        model="VnRole"
+        url-create="MailAliases"
+        model="Alias"
         :form-initial-data="defaultInitialData"
-        @on-data-saved="onSave"
+        @on-data-saved="redirectToAliasBasicData"
     >
         <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')" />
+                    <VnInput v-model="data.alias" :label="t('mailAlias.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')"
+                        :label="t('mailAlias.description')"
                     />
                 </div>
             </VnRow>
@@ -43,5 +47,5 @@ const defaultInitialData = {
 
 <i18n>
     es:
-        Create role: Crear role
+        Create alias: Crear alias
 </i18n>
diff --git a/src/pages/Account/Role/Card/RoleBasicData.vue b/src/pages/Account/Alias/Card/AliasBasicData.vue
similarity index 73%
rename from src/pages/Account/Role/Card/RoleBasicData.vue
rename to src/pages/Account/Alias/Card/AliasBasicData.vue
index 4607ef15c..3f682fd67 100644
--- a/src/pages/Account/Role/Card/RoleBasicData.vue
+++ b/src/pages/Account/Alias/Card/AliasBasicData.vue
@@ -1,26 +1,28 @@
 <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>
+    <FormModel :url="`MailAliases/${route.params.id}`" model="Alias" 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')" />
+                    <VnInput v-model="data.alias" :label="t('mailAlias.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')"
+                        :label="t('mailAlias.description')"
                     />
                 </div>
             </VnRow>
diff --git a/src/pages/Account/Alias/Card/AliasCard.vue b/src/pages/Account/Alias/Card/AliasCard.vue
new file mode 100644
index 000000000..8b6c9c3cf
--- /dev/null
+++ b/src/pages/Account/Alias/Card/AliasCard.vue
@@ -0,0 +1,32 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+
+import VnCard from 'components/common/VnCard.vue';
+import AliasDescriptor from './AliasDescriptor.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routeName = computed(() => route.name);
+const customRouteRedirectName = computed(() => {
+    return routeName.value;
+});
+const searchBarDataKeys = {
+    AliasBasicData: 'AliasBasicData',
+    AliasUsers: 'AliasUsers',
+};
+</script>
+
+<template>
+    <VnCard
+        data-key="Alias"
+        :descriptor="AliasDescriptor"
+        :search-data-key="searchBarDataKeys[routeName]"
+        :search-custom-route-redirect="customRouteRedirectName"
+        :search-redirect="!!customRouteRedirectName"
+        :searchbar-label="t('mailAlias.search')"
+        :searchbar-info="t('mailAlias.searchInfo')"
+    />
+</template>
diff --git a/src/pages/Account/Role/Card/RoleDescriptor.vue b/src/pages/Account/Alias/Card/AliasDescriptor.vue
similarity index 69%
rename from src/pages/Account/Role/Card/RoleDescriptor.vue
rename to src/pages/Account/Alias/Card/AliasDescriptor.vue
index 2df191950..bc174aa0e 100644
--- a/src/pages/Account/Role/Card/RoleDescriptor.vue
+++ b/src/pages/Account/Alias/Card/AliasDescriptor.vue
@@ -2,14 +2,15 @@
 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 CardDescriptor from 'components/ui/CardDescriptor.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+
+import useCardDescription from 'src/composables/useCardDescription';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+
 const $props = defineProps({
     id: {
         type: Number,
@@ -18,26 +19,28 @@ const $props = defineProps({
     },
 });
 
+const { t } = useI18n();
 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 setData = (entity) => (data.value = useCardDescription(entity.alias, entity.id));
+
 const filter = {
     where: { id: entityId },
 };
-const removeRole = () => {
+
+const removeAlias = () => {
     quasar
         .dialog({
-            title: 'Are you sure you want to delete it?',
-            message: 'Delete department',
+            title: t('Alias will be removed'),
+            message: t('Are you sure you want to continue?'),
             ok: {
                 push: true,
                 color: 'primary',
@@ -46,14 +49,11 @@ const removeRole = () => {
         })
         .onOk(async () => {
             try {
-                await axios.post(
-                    `/Departments/${entityId.value}/removeChild`,
-                    entityId.value
-                );
-                router.push({ name: 'WorkerDepartment' });
-                notify('department.departmentRemoved', 'positive');
+                await axios.delete(`MailAliases/${entityId.value}`);
+                notify(t('Alias removed'), 'positive');
+                router.push({ name: 'AccountAlias' });
             } catch (err) {
-                console.error('Error removing department');
+                console.error('Error removing alias');
             }
         });
 };
@@ -62,32 +62,32 @@ const removeRole = () => {
 <template>
     <CardDescriptor
         ref="descriptor"
-        :url="`VnRoles`"
+        url="MailAliases"
         :filter="filter"
         module="Account"
         @on-fetch="setData"
-        data-key="accountData"
+        data-key="aliasData"
         :title="data.title"
         :subtitle="data.subtitle"
     >
         <template #menu>
-            <QItem v-ripple clickable @click="removeRole()">
+            <QItem v-ripple clickable @click="removeAlias()">
                 <QItemSection>{{ t('Delete') }}</QItemSection>
             </QItem>
         </template>
         <template #body="{ entity }">
-            <VnLv :label="t('role.card.description')" :value="entity.description" />
+            <VnLv :label="t('mailAlias.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
+        Delete: Eliminar
+        Alias will be removed: El alias será eliminado
+        Are you sure you want to continue?: ¿Seguro que quieres continuar?
+        Alias removed: Alias eliminado
 </i18n>
diff --git a/src/pages/Account/Alias/Card/AliasSummary.vue b/src/pages/Account/Alias/Card/AliasSummary.vue
new file mode 100644
index 000000000..cedae28b7
--- /dev/null
+++ b/src/pages/Account/Alias/Card/AliasSummary.vue
@@ -0,0 +1,49 @@
+<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('Alias');
+const alias = ref(store.data);
+const entityId = computed(() => $props.id || route.params.id);
+</script>
+
+<template>
+    <CardSummary
+        ref="summary"
+        :url="`MailAliases/${entityId}`"
+        @on-fetch="(data) => (alias = data)"
+    >
+        <template #header> {{ alias.id }} - {{ alias.alias }} </template>
+        <template #body>
+            <QCard class="vn-one">
+                <QCardSection class="q-pa-none">
+                    <router-link
+                        :to="{ name: 'AliasBasicData', params: { id: entityId } }"
+                        class="header header-link"
+                    >
+                        {{ t('globals.summary.basicData') }}
+                        <QIcon name="open_in_new" />
+                    </router-link>
+                </QCardSection>
+                <VnLv :label="t('mailAlias.id')" :value="alias.id" />
+                <VnLv :label="t('mailAlias.description')" :value="alias.description" />
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
diff --git a/src/pages/Account/Alias/Card/AliasUsers.vue b/src/pages/Account/Alias/Card/AliasUsers.vue
new file mode 100644
index 000000000..6367dcab7
--- /dev/null
+++ b/src/pages/Account/Alias/Card/AliasUsers.vue
@@ -0,0 +1,118 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useArrayData } from 'composables/useArrayData';
+import axios from 'axios';
+
+const { t } = useI18n();
+const route = useRoute();
+const { openConfirmationModal } = useVnConfirm();
+
+const paginateRef = ref(null);
+
+const arrayData = useArrayData('AliasUsers');
+const store = arrayData.store;
+
+const data = computed(() => {
+    const dataCopy = JSON.parse(JSON.stringify(store.data));
+    console.log('dataCopy', dataCopy);
+    return dataCopy.sort((a, b) => a.user?.name.localeCompare(b.user?.name));
+});
+
+const filter = {
+    include: {
+        relation: 'user',
+        scope: {
+            fields: ['id', 'name'],
+        },
+    },
+};
+
+const urlPath = computed(() => `MailAliases/${route.params.id}/accounts`);
+
+const columns = computed(() => [
+    {
+        name: 'alias',
+    },
+    {
+        name: 'action',
+    },
+]);
+
+const deleteAlias = async (row) => {
+    try {
+        await axios.delete(`${urlPath.value}/${row.id}`);
+        fetchAliases();
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+watch(
+    () => route.params.id,
+    () => {
+        store.url = urlPath.value;
+        store.filter = filter;
+        fetchAliases();
+    }
+);
+
+const fetchAliases = () => paginateRef.value.fetch();
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <div class="full-width" style="max-width: 400px">
+            <VnPaginate
+                ref="paginateRef"
+                data-key="AliasUsers"
+                :filter="filter"
+                :url="urlPath"
+                auto-load
+            >
+                <template #body>
+                    <QTable :rows="data" :columns="columns" hide-header>
+                        <template #body="{ row }">
+                            <QTr>
+                                <QTd>
+                                    <span>{{ row.user?.name }}</span>
+                                </QTd>
+                                <QTd style="width: 50px !important">
+                                    <QIcon
+                                        name="delete"
+                                        size="sm"
+                                        class="cursor-pointer"
+                                        color="primary"
+                                        @click="
+                                            openConfirmationModal(
+                                                t('User will be removed from alias'),
+                                                t('Are you sure you want to continue?'),
+                                                () => deleteAlias(row)
+                                            )
+                                        "
+                                    >
+                                        <QTooltip>
+                                            {{ t('Delete') }}
+                                        </QTooltip>
+                                    </QIcon>
+                                </QTd>
+                            </QTr>
+                        </template>
+                    </QTable>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    User will be removed from alias: El usuario será borrado del alias
+    Are you sure you want to continue?: ¿Seguro que quieres continuar?
+    Delete: Eliminar
+</i18n>
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/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/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/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>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 2464d3728..f9bd7dc18 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
+        aliasUsers: Users
     card:
         name: Name
         nickname: User
@@ -36,11 +37,20 @@ role:
     pageTitles:
         inheritedRoles: Inherited Roles
         subRoles: Sub Roles
-
     card:
         description: Description
         id: Id
         name: Name
+mailAlias:
+    pageTitles:
+        aliasUsers: Users
+    search: Search mail alias
+    searchInfo: Search alias by id or name
+    alias: Alias
+    description: Description
+    id: Id
+    newAlias: New alias
+    name: Name
 ldap:
     enableSync: Enable synchronization
     server: Server
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index dd242fe63..763143940 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
+        aliasUsers: Usuarios
     card:
         nickname: Usuario
         name: Nombre
@@ -51,7 +52,16 @@ role:
         description: Descripción
         id: Idd
         name: Nombre
-
+mailAlias:
+    pageTitles:
+        aliasUsers: Usuarios
+    search: Buscar alias de correo
+    searchInfo: Buscar alias por id o nombre
+    alias: Alias
+    description: Descripción
+    id: Id
+    newAlias: Nuevo alias
+    name: Nombre
 ldap:
     enableSync: Habilitar sincronización
     server: Servidor
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index ca60c78d8..d69098a58 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -13,6 +13,7 @@ import Travel from './travel';
 import Order from './order';
 import Department from './department';
 import Role from './role';
+import mailAlias from './mailAlias';
 import Entry from './entry';
 import roadmap from './roadmap';
 import Parking from './parking';
@@ -38,6 +39,7 @@ export default [
     invoiceIn,
     Department,
     Role,
+    mailAlias,
     Entry,
     roadmap,
     Parking,
diff --git a/src/router/modules/mailAlias.js b/src/router/modules/mailAlias.js
new file mode 100644
index 000000000..623c76b25
--- /dev/null
+++ b/src/router/modules/mailAlias.js
@@ -0,0 +1,57 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: 'account/alias',
+    name: 'Alias',
+    meta: {
+        title: 'alias',
+        icon: 'email',
+        moduleName: 'Alias',
+    },
+    component: RouterView,
+    redirect: { name: 'AccountAlias' },
+    menus: {
+        main: [],
+        card: ['AliasBasicData', 'AliasUsers'],
+    },
+    children: [
+        {
+            name: 'AliasCard',
+            path: ':id',
+            component: () => import('src/pages/Account/Alias/Card/AliasCard.vue'),
+            redirect: { name: 'AliasSummary' },
+            children: [
+                {
+                    name: 'AliasSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'launch',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Alias/Card/AliasSummary.vue'),
+                },
+                {
+                    name: 'AliasBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Alias/Card/AliasBasicData.vue'),
+                },
+                {
+                    name: 'AliasUsers',
+                    path: 'users',
+                    meta: {
+                        title: 'aliasUsers',
+                        icon: 'group',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Alias/Card/AliasUsers.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index 60cc24a75..9d3dc8710 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -11,6 +11,7 @@ import route from './modules/route';
 import travel from './modules/travel';
 import department from './modules/department';
 import role from './modules/role';
+import mailAlias from './modules/mailAlias';
 import ItemType from './modules/itemType';
 import shelving from 'src/router/modules/shelving';
 import order from 'src/router/modules/order';
@@ -76,6 +77,7 @@ const routes = [
             travel,
             department,
             role,
+            mailAlias,
             roadmap,
             entry,
             parking,

From 1c148412339ddfdba8c7b24bcf36e59ced6b2885 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 31 May 2024 14:02:50 -0300
Subject: [PATCH 02/12] Several changes

---
 src/pages/Account/AccountAccounts.vue         | 111 ------
 src/pages/Account/AccountAlias.vue            |   2 +-
 src/pages/Account/AccountFilter.vue           | 225 ------------
 src/pages/Account/Alias/AliasCreateForm.vue   |  12 +-
 src/pages/Account/Alias/Card/AliasUsers.vue   |   3 +-
 src/pages/Account/Card/AccountBasicData.vue   |  55 ---
 src/pages/Account/Card/AccountCard.vue        |  15 -
 src/pages/Account/Card/AccountDescriptor.vue  | 121 -------
 .../Account/Card/AccountDescriptorMenu.vue    | 115 ------
 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 ------------------
 src/pages/Account/Card/AccountSummary.vue     | 108 ------
 src/router/modules/account.js                 | 142 +-------
 15 files changed, 13 insertions(+), 1752 deletions(-)
 delete mode 100644 src/pages/Account/AccountAccounts.vue
 delete mode 100644 src/pages/Account/AccountFilter.vue
 delete mode 100644 src/pages/Account/Card/AccountBasicData.vue
 delete mode 100644 src/pages/Account/Card/AccountCard.vue
 delete mode 100644 src/pages/Account/Card/AccountDescriptor.vue
 delete mode 100644 src/pages/Account/Card/AccountDescriptorMenu.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
 delete mode 100644 src/pages/Account/Card/AccountSummary.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/AccountAlias.vue b/src/pages/Account/AccountAlias.vue
index f33572e5e..896804484 100644
--- a/src/pages/Account/AccountAlias.vue
+++ b/src/pages/Account/AccountAlias.vue
@@ -99,7 +99,7 @@ const openCreateModal = () => aliasCreateDialogRef.value.show();
         </QDialog>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
             <QBtn fab icon="add" color="primary" @click="openCreateModal()">
-                <QTooltip>{{ t('mailAlias.newAlias') }}</QTooltip>
+                <QTooltip class="text-no-wrap">{{ t('mailAlias.newAlias') }}</QTooltip>
             </QBtn>
         </QPageSticky>
     </QPage>
diff --git a/src/pages/Account/AccountFilter.vue b/src/pages/Account/AccountFilter.vue
deleted file mode 100644
index 23b72266c..000000000
--- a/src/pages/Account/AccountFilter.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/Alias/AliasCreateForm.vue b/src/pages/Account/Alias/AliasCreateForm.vue
index c8ed6fadf..d4d61a804 100644
--- a/src/pages/Account/Alias/AliasCreateForm.vue
+++ b/src/pages/Account/Alias/AliasCreateForm.vue
@@ -6,16 +6,22 @@ import FormModelPopup from 'components/FormModelPopup.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 
+import { useArrayData } from 'src/composables/useArrayData';
+
 const router = useRouter();
 const { t } = useI18n();
+const arrayData = useArrayData('AliasCreate');
+const { store } = arrayData;
 
 const defaultInitialData = {
     alias: null,
     description: null,
 };
 
-const redirectToAliasBasicData = ({ id }) =>
+const onDataSaved = ({ id }) => {
     router.push({ name: 'AliasBasicData', params: { id } });
+    store.data = null;
+};
 </script>
 
 <template>
@@ -23,9 +29,9 @@ const redirectToAliasBasicData = ({ id }) =>
         :title="t('Create alias')"
         ref="formModelPopupRef"
         url-create="MailAliases"
-        model="Alias"
+        model="AliasCreate"
         :form-initial-data="defaultInitialData"
-        @on-data-saved="redirectToAliasBasicData"
+        @on-data-saved="onDataSaved"
     >
         <template #form-inputs="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/pages/Account/Alias/Card/AliasUsers.vue b/src/pages/Account/Alias/Card/AliasUsers.vue
index 6367dcab7..1bc91d3ba 100644
--- a/src/pages/Account/Alias/Card/AliasUsers.vue
+++ b/src/pages/Account/Alias/Card/AliasUsers.vue
@@ -16,11 +16,10 @@ const { openConfirmationModal } = useVnConfirm();
 const paginateRef = ref(null);
 
 const arrayData = useArrayData('AliasUsers');
-const store = arrayData.store;
+const { store } = arrayData;
 
 const data = computed(() => {
     const dataCopy = JSON.parse(JSON.stringify(store.data));
-    console.log('dataCopy', dataCopy);
     return dataCopy.sort((a, b) => a.user?.name.localeCompare(b.user?.name));
 });
 
diff --git a/src/pages/Account/Card/AccountBasicData.vue b/src/pages/Account/Card/AccountBasicData.vue
deleted file mode 100644
index 232e18d52..000000000
--- a/src/pages/Account/Card/AccountBasicData.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<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();
-
-const accountFilter = {
-    where: { id: route.params.id },
-    fields: ['id', 'email', 'nickname', 'name', 'accountStateFk', 'packages', 'pickup'],
-    include: [],
-};
-</script>
-<template>
-    <FormModel
-        :url="`VnUsers/preview`"
-        :url-update="`VnUsers/${route.params.id}/update-user`"
-        :filter="accountFilter"
-        model="Accounts"
-        auto-load
-    >
-        <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>
-        </template>
-    </FormModel>
-</template>
diff --git a/src/pages/Account/Card/AccountCard.vue b/src/pages/Account/Card/AccountCard.vue
deleted file mode 100644
index 4fa3bad7f..000000000
--- a/src/pages/Account/Card/AccountCard.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup>
-import VnCard from 'components/common/VnCard.vue';
-import AccountDescriptor from './AccountDescriptor.vue';
-</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"
-    />
-</template>
diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
deleted file mode 100644
index 55ae92b92..000000000
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } 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: {
-        type: Number,
-        required: false,
-        default: null,
-    },
-});
-
-const route = useRoute();
-const state = useState();
-const { t } = useI18n();
-const salixUrl = ref();
-const { getTokenMultimedia } = useSession();
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.nickname, entity.id));
-
-const filter = {
-    where: { id: entityId },
-    fields: ['id', 'nickname', 'name', 'role'],
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
-};
-function getAccountAvatar() {
-    const token = getTokenMultimedia();
-    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
-}
-</script>
-
-<template>
-    <CardDescriptor
-        ref="descriptor"
-        :url="`VnUsers/preview`"
-        :filter="filter"
-        module="Account"
-        @on-fetch="setData"
-        data-key="accountData"
-        :title="data.title"
-        :subtitle="data.subtitle"
-    >
-        <template #header-extra-action>
-            <QBtn
-                round
-                flat
-                size="md"
-                color="white"
-                icon="face"
-                :to="{ name: 'AccountList' }"
-            >
-                <QTooltip>
-                    {{ t('Go to module index') }}
-                </QTooltip>
-            </QBtn>
-        </template>
-        <template #menu="{ entity }">
-            <AccountDescriptorMenu :account="entity" />
-        </template>
-        <template #before>
-            <QImg :src="getAccountAvatar()" class="photo">
-                <template #error>
-                    <div
-                        class="absolute-full picture text-center q-pa-md flex flex-center"
-                    >
-                        <div>
-                            <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
-                                <QIcon name="vn:claims" />
-                            </div>
-                            <div class="text-grey-5" style="opacity: 0.4">
-                                {{ t('account.imageNotFound') }}
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </QImg>
-        </template>
-        <template #body="{ entity }">
-            <VnLv :label="t('account.card.nickname')" :value="entity.nickname" />
-            <VnLv :label="t('account.card.role')" :value="entity.role.name" />
-        </template>
-        <template #actions="{ entity }">
-            <QCardActions>
-                <QBtn
-                    round
-                    flat
-                    size="md"
-                    color="primary"
-                    class="fill-icon"
-                    icon="contact_mail"
-                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
-                >
-                    <QTooltip>{{ t('account.card.ticketTracking') }}</QTooltip>
-                </QBtn>
-            </QCardActions>
-        </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/Card/AccountDescriptorMenu.vue b/src/pages/Account/Card/AccountDescriptorMenu.vue
deleted file mode 100644
index bfec789ed..000000000
--- a/src/pages/Account/Card/AccountDescriptorMenu.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script setup>
-import axios from 'axios';
-import { 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';
-
-const { t } = useI18n();
-const { openReport } = usePrintService();
-const { openConfirmationModal } = useVnConfirm();
-
-const account = ref($props.account);
-</script>
-<template>
-    <QItem
-        v-ripple
-        clickable
-        @click="
-            openConfirmationModal(
-                t('Confirm deletion'),
-                t('Are you sure...TODO'),
-                setPassword
-            )
-        "
-    >
-        <QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
-    </QItem>
-    <QItem
-        v-ripple
-        clickable
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.disableAccount.title'),
-                t('account.card.actions.disableAccount.subtitle'),
-                disableAccount
-            )
-        "
-    >
-        <QItemSection>{{ t('account.card.actions.disableAccount.name') }}</QItemSection>
-    </QItem>
-    <QItem
-        v-ripple
-        clickable
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.disableUser.title'),
-                t('account.card.actions.disableUser.title'),
-                actiondisableUser
-            )
-        "
-    >
-        <QItemSection>{{ t('account.card.actions.disableUser.name') }}</QItemSection>
-    </QItem>
-    <QItem
-        v-ripple
-        clickable
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.sync.title'),
-                t('account.card.actions.sync.subtitle'),
-                sync
-            )
-        "
-    >
-        <QItemSection>{{ t('account.card.actions.sync.name') }}</QItemSection>
-    </QItem>
-
-    <QSeparator />
-    <QItem
-        @click="
-            openConfirmationModal(
-                t('account.card.actions.delete.title'),
-                t('account.card.actions.delete.subTitle'),
-                removeAccount
-            )
-        "
-        v-ripple
-        clickable
-    >
-        <QItemSection avatar>
-            <QIcon name="delete" />
-        </QItemSection>
-        <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/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>
diff --git a/src/pages/Account/Card/AccountSummary.vue b/src/pages/Account/Card/AccountSummary.vue
deleted file mode 100644
index fb2bf6a2a..000000000
--- a/src/pages/Account/Card/AccountSummary.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script setup>
-import { onMounted, ref, computed } from 'vue';
-import { useRoute, useRouter } 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: {
-        type: Number,
-        default: 0,
-    },
-});
-const { store } = useArrayData('Account');
-const account = ref(store.data);
-
-const entityId = computed(() => $props.id || route.params.id);
-const filter = {
-    where: { id: entityId },
-    fields: ['id', 'nickname', 'name', 'role'],
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
-};
-</script>
-
-<template>
-    <CardSummary
-        ref="AccountSummary"
-        :url="`VnUsers/preview`"
-        :filter="filter"
-        @on-fetch="(data) => (account = data)"
-    >
-        <template #header>{{ account.id }} - {{ account.nickname }}</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('account.card.nickname')" :value="account.nickname" />
-                <VnLv :label="t('account.card.role')" :value="account.role.name" />
-            </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/router/modules/account.js b/src/router/modules/account.js
index 0f38d8a40..38473e052 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', 'AccountAlias'],
+        card: [],
     },
     children: [
         {
@@ -45,15 +30,6 @@ export default {
                     },
                     component: () => import('src/pages/Account/AccountList.vue'),
                 },
-                {
-                    path: 'role',
-                    name: 'AccountRoles',
-                    meta: {
-                        title: 'roles',
-                        icon: 'group',
-                    },
-                    component: () => import('src/pages/Account/Role/AccountRoles.vue'),
-                },
                 {
                     path: 'alias',
                     name: 'AccountAlias',
@@ -63,61 +39,6 @@ export default {
                     },
                     component: () => import('src/pages/Account/AccountAlias.vue'),
                 },
-                {
-                    path: 'accounts',
-                    name: 'AccountAccounts',
-                    meta: {
-                        title: 'accounts',
-                        icon: 'accessibility',
-                    },
-                    component: () => import('src/pages/Account/AccountAccounts.vue'),
-                },
-                {
-                    path: 'ldap',
-                    name: 'AccountLdap',
-                    meta: {
-                        title: 'ldap',
-                        icon: 'account_tree',
-                    },
-                    component: () => import('src/pages/Account/AccountLdap.vue'),
-                },
-                {
-                    path: 'samba',
-                    name: 'AccountSamba',
-                    meta: {
-                        title: 'samba',
-                        icon: 'preview',
-                    },
-                    component: () => import('src/pages/Account/AccountSamba.vue'),
-                },
-                {
-                    path: 'acls',
-                    name: 'AccountAcls',
-                    meta: {
-                        title: 'acls',
-                        icon: 'check',
-                    },
-                    component: () => import('src/pages/Account/AccountAcls.vue'),
-                },
-                {
-                    path: 'connections',
-                    name: 'AccountConnections',
-                    meta: {
-                        title: 'connections',
-                        icon: 'check',
-                    },
-                    component: () => import('src/pages/Account/AccountConnections.vue'),
-                },
-
-                {
-                    path: 'create',
-                    name: 'AccountCreate',
-                    meta: {
-                        title: 'accountCreate',
-                        icon: 'add',
-                    },
-                    component: () => import('src/pages/Account/AccountCreate.vue'),
-                },
             ],
         },
         {
@@ -135,65 +56,6 @@ export default {
                     },
                     component: () => import('src/pages/Account/Card/AccountSummary.vue'),
                 },
-                {
-                    name: 'AccountBasicData',
-                    path: 'basic-data',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Card/AccountBasicData.vue'),
-                },
-                {
-                    name: 'AccountInheritedRoles',
-                    path: 'inherited-oles',
-                    meta: {
-                        title: 'inheritedRoles',
-                        icon: 'group',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Card/AccountInheritedRoles.vue'),
-                },
-                {
-                    name: 'AccountMailForwarding',
-                    path: 'mail-forwarding',
-                    meta: {
-                        title: 'mailForwarding',
-                        icon: 'forward',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Card/AccountMailForwarding.vue'),
-                },
-                {
-                    name: 'AccountMailAlias',
-                    path: 'mail-alias',
-                    meta: {
-                        title: 'mailAlias',
-                        icon: 'email',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Card/AccountMailAlias.vue'),
-                },
-                {
-                    name: 'AccountPrivileges',
-                    path: 'privileges',
-                    meta: {
-                        title: 'privileges',
-                        icon: 'badge',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Card/AccountPrivileges.vue'),
-                },
-                {
-                    name: 'AccountLog',
-                    path: 'log',
-                    meta: {
-                        title: 'log',
-                        icon: 'history',
-                    },
-                    component: () => import('src/pages/Account/Card/AccountLog.vue'),
-                },
             ],
         },
     ],

From 8320a75e61c5e9d6cfbd3f1ec10143e333ed851c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 3 Jun 2024 09:03:37 -0300
Subject: [PATCH 03/12] make searchbar work

---
 .../Account/{AccountAlias.vue => AccountAliasList.vue}    | 0
 src/pages/Account/Alias/Card/AliasUsers.vue               | 4 ++++
 src/router/modules/account.js                             | 8 ++++----
 src/router/modules/mailAlias.js                           | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)
 rename src/pages/Account/{AccountAlias.vue => AccountAliasList.vue} (100%)

diff --git a/src/pages/Account/AccountAlias.vue b/src/pages/Account/AccountAliasList.vue
similarity index 100%
rename from src/pages/Account/AccountAlias.vue
rename to src/pages/Account/AccountAliasList.vue
diff --git a/src/pages/Account/Alias/Card/AliasUsers.vue b/src/pages/Account/Alias/Card/AliasUsers.vue
index 1bc91d3ba..39f881a4e 100644
--- a/src/pages/Account/Alias/Card/AliasUsers.vue
+++ b/src/pages/Account/Alias/Card/AliasUsers.vue
@@ -7,9 +7,11 @@ import VnPaginate from 'components/ui/VnPaginate.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 { notify } = useNotify();
 const route = useRoute();
 const { openConfirmationModal } = useVnConfirm();
 
@@ -46,6 +48,7 @@ const columns = computed(() => [
 const deleteAlias = async (row) => {
     try {
         await axios.delete(`${urlPath.value}/${row.id}`);
+        notify(t('User removed'), 'positive');
         fetchAliases();
     } catch (error) {
         console.error(error);
@@ -113,5 +116,6 @@ const fetchAliases = () => paginateRef.value.fetch();
 es:
     User will be removed from alias: El usuario será borrado del alias
     Are you sure you want to continue?: ¿Seguro que quieres continuar?
+    User removed: Usuario borrado
     Delete: Eliminar
 </i18n>
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 38473e052..e13215afc 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'AccountMain' },
     menus: {
-        main: ['AccountList', 'AccountAlias'],
+        main: ['AccountList', 'AccountAliasList'],
         card: [],
     },
     children: [
@@ -31,13 +31,13 @@ export default {
                     component: () => import('src/pages/Account/AccountList.vue'),
                 },
                 {
-                    path: 'alias',
-                    name: 'AccountAlias',
+                    path: 'alias-list',
+                    name: 'AccountAliasList',
                     meta: {
                         title: 'alias',
                         icon: 'email',
                     },
-                    component: () => import('src/pages/Account/AccountAlias.vue'),
+                    component: () => import('src/pages/Account/AccountAliasList.vue'),
                 },
             ],
         },
diff --git a/src/router/modules/mailAlias.js b/src/router/modules/mailAlias.js
index 623c76b25..8e0f8abdc 100644
--- a/src/router/modules/mailAlias.js
+++ b/src/router/modules/mailAlias.js
@@ -9,7 +9,7 @@ export default {
         moduleName: 'Alias',
     },
     component: RouterView,
-    redirect: { name: 'AccountAlias' },
+    redirect: { name: 'AccountAliasList' },
     menus: {
         main: [],
         card: ['AliasBasicData', 'AliasUsers'],

From 3efca6242df2ee5bbe31f5352e2606b93e3eb38c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 4 Jun 2024 08:41:41 -0300
Subject: [PATCH 04/12] Account ACLs

---
 src/i18n/locale/en.yml                        |   1 +
 src/i18n/locale/es.yml                        |   1 +
 src/pages/Account/AccountAcls.vue             | 129 +++++++++++++++++
 src/pages/Account/AccountAliasList.vue        | 106 --------------
 src/pages/Account/Acls/AclFilter.vue          | 124 ++++++++++++++++
 src/pages/Account/Acls/AclFormView.vue        | 137 ++++++++++++++++++
 src/pages/Account/Alias/AliasCreateForm.vue   |  57 --------
 .../Account/Alias/Card/AliasBasicData.vue     |  31 ----
 src/pages/Account/Alias/Card/AliasCard.vue    |  32 ----
 .../Account/Alias/Card/AliasDescriptor.vue    |  93 ------------
 src/pages/Account/Alias/Card/AliasSummary.vue |  49 -------
 src/pages/Account/Alias/Card/AliasUsers.vue   | 121 ----------------
 src/pages/Account/locale/en.yml               |  12 ++
 src/pages/Account/locale/es.yml               |  12 ++
 src/router/modules/account.js                 |  17 ++-
 src/router/modules/mailAlias.js               |  57 --------
 16 files changed, 427 insertions(+), 552 deletions(-)
 create mode 100644 src/pages/Account/AccountAcls.vue
 delete mode 100644 src/pages/Account/AccountAliasList.vue
 create mode 100644 src/pages/Account/Acls/AclFilter.vue
 create mode 100644 src/pages/Account/Acls/AclFormView.vue
 delete mode 100644 src/pages/Account/Alias/AliasCreateForm.vue
 delete mode 100644 src/pages/Account/Alias/Card/AliasBasicData.vue
 delete mode 100644 src/pages/Account/Alias/Card/AliasCard.vue
 delete mode 100644 src/pages/Account/Alias/Card/AliasDescriptor.vue
 delete mode 100644 src/pages/Account/Alias/Card/AliasSummary.vue
 delete mode 100644 src/pages/Account/Alias/Card/AliasUsers.vue
 delete mode 100644 src/router/modules/mailAlias.js

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 58b20270f..14caa8b75 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -17,6 +17,7 @@ globals:
     date: Date
     dataSaved: Data saved
     dataDeleted: Data deleted
+    delete: Delete
     search: Search
     changes: Changes
     dataCreated: Data created
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index dd72f82eb..346871f00 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -17,6 +17,7 @@ globals:
     date: Fecha
     dataSaved: Datos guardados
     dataDeleted: Datos eliminados
+    delete: Eliminar
     search: Buscar
     changes: Cambios
     dataCreated: Datos creados
diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
new file mode 100644
index 000000000..ac21861a7
--- /dev/null
+++ b/src/pages/Account/AccountAcls.vue
@@ -0,0 +1,129 @@
+<script setup>
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import CardList from 'src/components/ui/CardList.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import AclFilter from './Acls/AclFilter.vue';
+
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useStateStore } from 'stores/useStateStore';
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const { notify } = useNotify();
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+const { openConfirmationModal } = useVnConfirm();
+
+const paginateRef = ref(null);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return { model: { like: `%${value}%` } };
+        default:
+            return { [param]: value };
+    }
+};
+
+const deleteAcl = async (id) => {
+    try {
+        await axios.delete(`ACLs/${id}`);
+        paginateRef.value.fetch();
+        notify('ACL removed', 'positive');
+    } catch (error) {
+        console.error('Error deleting Acl: ', error);
+    }
+};
+
+const redirectToAclsForm = (id = undefined) =>
+    router.push({ name: 'AccountAclForm', query: { id } });
+</script>
+
+<template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="AccountAcls"
+                url="ACLs"
+                :expr-builder="exprBuilder"
+                :label="t('acls.search')"
+                :info="t('acls.searchInfo')"
+            />
+        </Teleport>
+    </template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <AclFilter data-key="AccountAcls" />
+        </QScrollArea>
+    </QDrawer>
+    <QPage class="flex justify-center q-pa-md">
+        <div class="vn-card-list">
+            <VnPaginate
+                ref="paginateRef"
+                data-key="AccountAcls"
+                url="ACLs"
+                auto-load
+                :expr-builder="exprBuilder"
+            >
+                <template #body="{ rows }">
+                    <CardList
+                        v-for="row of rows"
+                        :id="row.id"
+                        :key="row.id"
+                        :title="`${row.model}.${row.property}`"
+                        @click="redirectToAclsForm(row.id)"
+                    >
+                        <template #list-items>
+                            <VnLv :label="t('acls.role')" :value="row.principalId" />
+                            <VnLv :label="t('acls.accessType')" :value="row.accessType" />
+                            <VnLv
+                                :label="t('acls.permissions')"
+                                :value="row.permission"
+                            />
+                        </template>
+                        <template #actions>
+                            <QBtn
+                                :label="t('globals.delete')"
+                                @click.stop="
+                                    openConfirmationModal(
+                                        t('ACL will be removed'),
+                                        t('Are you sure you want to continue?'),
+                                        () => deleteAcl(row.id)
+                                    )
+                                "
+                                color="primary"
+                                style="margin-top: 15px"
+                            />
+                        </template>
+                    </CardList>
+                </template>
+            </VnPaginate>
+        </div>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn fab icon="add" color="primary" @click="redirectToAclsForm()">
+                <QTooltip class="text-no-wrap">{{ t('New ACL') }}</QTooltip>
+            </QBtn>
+        </QPageSticky>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    New ACL: Nuevo ACL
+    ACL removed: ACL eliminado
+    ACL will be removed: El ACL será eliminado
+    Are you sure you want to continue?: ¿Seguro que quieres continuar?
+</i18n>
diff --git a/src/pages/Account/AccountAliasList.vue b/src/pages/Account/AccountAliasList.vue
deleted file mode 100644
index 896804484..000000000
--- a/src/pages/Account/AccountAliasList.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script setup>
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
-
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import AliasSummary from './Alias/Card/AliasSummary.vue';
-import AliasCreateForm from './Alias/AliasCreateForm.vue';
-
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useStateStore } from 'stores/useStateStore';
-
-defineProps({
-    id: {
-        type: Number,
-        default: 0,
-    },
-});
-
-const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-const router = useRouter();
-const stateStore = useStateStore();
-const aliasCreateDialogRef = ref(null);
-
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : { alias: { like: `%${value}%` } };
-    }
-};
-
-const navigate = (id) => router.push({ name: 'AliasSummary', params: { id } });
-
-const openCreateModal = () => aliasCreateDialogRef.value.show();
-</script>
-
-<template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountAliasList"
-                url="MailAliases"
-                :expr-builder="exprBuilder"
-                :label="t('mailAlias.search')"
-                :info="t('mailAlias.searchInfo')"
-            />
-        </Teleport>
-    </template>
-    <QPage class="flex justify-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                ref="paginateRef"
-                data-key="AccountAliasList"
-                url="MailAliases"
-                auto-load
-                :expr-builder="exprBuilder"
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.alias"
-                        @click="navigate(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('mailAlias.alias')" :value="row.alias">
-                            </VnLv>
-                            <VnLv
-                                :label="t('mailAlias.description')"
-                                :value="row.description"
-                            >
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AliasSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="aliasCreateDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <AliasCreateForm />
-        </QDialog>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="openCreateModal()">
-                <QTooltip class="text-no-wrap">{{ t('mailAlias.newAlias') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
-</template>
diff --git a/src/pages/Account/Acls/AclFilter.vue b/src/pages/Account/Acls/AclFilter.vue
new file mode 100644
index 000000000..8035f92b8
--- /dev/null
+++ b/src/pages/Account/Acls/AclFilter.vue
@@ -0,0 +1,124 @@
+<script setup>
+import { ref, onBeforeMount } 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 { useValidator } from 'src/composables/useValidator';
+
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const { t } = useI18n();
+const validationsStore = useValidator();
+const { models } = validationsStore;
+
+const validations = ref([]);
+const accessTypes = [{ name: '*' }, { name: 'READ' }, { name: 'WRITE' }];
+const permissions = [{ name: 'ALLOW' }, { name: 'DENY' }];
+const rolesOptions = ref([]);
+
+onBeforeMount(() => {
+    for (let model in models) validations.value.push({ name: model });
+});
+</script>
+
+<template>
+    <FetchData
+        url="VnRoles"
+        :filter="{ fields: ['name'], order: 'name ASC' }"
+        @on-fetch="(data) => (rolesOptions = data)"
+        auto-load
+    />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`acls.aclFilter.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params, searchFn }">
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('acls.aclFilter.principalId')"
+                        v-model="params.principalId"
+                        @update:model-value="searchFn()"
+                        :options="rolesOptions"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('acls.aclFilter.model')"
+                        v-model="params.model"
+                        @update:model-value="searchFn()"
+                        :options="validations"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnInput
+                        :label="t('acls.aclFilter.property')"
+                        v-model="params.property"
+                        lazy-rules
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('acls.aclFilter.accessType')"
+                        v-model="params.accessType"
+                        @update:model-value="searchFn()"
+                        :options="accessTypes"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-mb-sm">
+                <QItemSection>
+                    <VnSelect
+                        :label="t('acls.aclFilter.permission')"
+                        v-model="params.permission"
+                        @update:model-value="searchFn()"
+                        :options="permissions"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        dense
+                        outlined
+                        rounded
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
diff --git a/src/pages/Account/Acls/AclFormView.vue b/src/pages/Account/Acls/AclFormView.vue
new file mode 100644
index 000000000..0103d1b2b
--- /dev/null
+++ b/src/pages/Account/Acls/AclFormView.vue
@@ -0,0 +1,137 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref, onBeforeMount, onMounted, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import FormModel from 'components/FormModel.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+import { useValidator } from 'src/composables/useValidator';
+import { useArrayData } from 'src/composables/useArrayData';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const arrayData = useArrayData('aclCreate');
+const { store } = arrayData;
+const validationsStore = useValidator();
+const { models } = validationsStore;
+
+const defaultFormData = ref(null);
+
+const rolesOptions = ref([]);
+const accessTypes = [{ name: '*' }, { name: 'READ' }, { name: 'WRITE' }];
+const permissions = [{ name: 'ALLOW' }, { name: 'DENY' }];
+const validations = ref([]);
+
+const id = computed(() => route.query.id || null);
+const url = ref(null);
+const urlCreate = ref(null);
+const urlUpdate = ref(null);
+
+const redirectToAclList = () => router.push({ name: 'AccountAcls' });
+
+const onDataSaved = () => {
+    store.data = undefined;
+    redirectToAclList();
+};
+
+onBeforeMount(() => {
+    for (let model in models) validations.value.push({ name: model });
+});
+
+onMounted(() => {
+    url.value = id.value ? `ACLs/${id.value}` : null;
+
+    if (url.value) urlUpdate.value = 'ACLs';
+    else {
+        defaultFormData.value = {
+            property: '*',
+            principalType: 'ROLE',
+            accessType: 'READ',
+            permission: 'ALLOW',
+        };
+        urlCreate.value = 'ACLs';
+    }
+});
+</script>
+
+<template>
+    <FetchData
+        url="VnRoles"
+        :filter="{ fields: ['name'], order: 'name ASC' }"
+        @on-fetch="(data) => (rolesOptions = data)"
+        auto-load
+    />
+    <QPage class="column items-center full-width">
+        <VnSubToolbar />
+        <FormModel
+            v-if="urlCreate || urlUpdate"
+            :url="url"
+            :url-update="urlUpdate"
+            :url-create="urlCreate"
+            :form-initial-data="defaultFormData"
+            auto-load
+            model="aclCreate"
+            @on-data-saved="onDataSaved()"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelect
+                        :label="t('acls.aclFilter.principalId')"
+                        v-model="data.principalId"
+                        :options="rolesOptions"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        rounded
+                    />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelect
+                        :label="t('acls.aclFilter.model')"
+                        v-model="data.model"
+                        :options="validations"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        rounded
+                    />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnInput
+                        :label="t('acls.aclFilter.property')"
+                        v-model="data.property"
+                        lazy-rules
+                    />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelect
+                        :label="t('acls.aclFilter.accessType')"
+                        v-model="data.accessType"
+                        :options="accessTypes"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        rounded
+                    />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelect
+                        :label="t('acls.aclFilter.permission')"
+                        v-model="data.permission"
+                        :options="permissions"
+                        option-value="name"
+                        option-label="name"
+                        use-input
+                        rounded
+                    />
+                </VnRow>
+            </template>
+        </FormModel>
+    </QPage>
+</template>
diff --git a/src/pages/Account/Alias/AliasCreateForm.vue b/src/pages/Account/Alias/AliasCreateForm.vue
deleted file mode 100644
index d4d61a804..000000000
--- a/src/pages/Account/Alias/AliasCreateForm.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup>
-import { useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-
-import FormModelPopup from 'components/FormModelPopup.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-
-import { useArrayData } from 'src/composables/useArrayData';
-
-const router = useRouter();
-const { t } = useI18n();
-const arrayData = useArrayData('AliasCreate');
-const { store } = arrayData;
-
-const defaultInitialData = {
-    alias: null,
-    description: null,
-};
-
-const onDataSaved = ({ id }) => {
-    router.push({ name: 'AliasBasicData', params: { id } });
-    store.data = null;
-};
-</script>
-
-<template>
-    <FormModelPopup
-        :title="t('Create alias')"
-        ref="formModelPopupRef"
-        url-create="MailAliases"
-        model="AliasCreate"
-        :form-initial-data="defaultInitialData"
-        @on-data-saved="onDataSaved"
-    >
-        <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.alias" :label="t('mailAlias.name')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.description"
-                        :label="t('mailAlias.description')"
-                    />
-                </div>
-            </VnRow>
-        </template>
-    </FormModelPopup>
-</template>
-
-<i18n>
-    es:
-        Create alias: Crear alias
-</i18n>
diff --git a/src/pages/Account/Alias/Card/AliasBasicData.vue b/src/pages/Account/Alias/Card/AliasBasicData.vue
deleted file mode 100644
index 3f682fd67..000000000
--- a/src/pages/Account/Alias/Card/AliasBasicData.vue
+++ /dev/null
@@ -1,31 +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';
-
-const route = useRoute();
-const { t } = useI18n();
-</script>
-
-<template>
-    <FormModel :url="`MailAliases/${route.params.id}`" model="Alias" auto-load>
-        <template #form="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput v-model="data.alias" :label="t('mailAlias.name')" />
-                </div>
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
-                <div class="col">
-                    <VnInput
-                        v-model="data.description"
-                        :label="t('mailAlias.description')"
-                    />
-                </div>
-            </VnRow>
-        </template>
-    </FormModel>
-</template>
diff --git a/src/pages/Account/Alias/Card/AliasCard.vue b/src/pages/Account/Alias/Card/AliasCard.vue
deleted file mode 100644
index 8b6c9c3cf..000000000
--- a/src/pages/Account/Alias/Card/AliasCard.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { computed } from 'vue';
-
-import VnCard from 'components/common/VnCard.vue';
-import AliasDescriptor from './AliasDescriptor.vue';
-
-const { t } = useI18n();
-const route = useRoute();
-
-const routeName = computed(() => route.name);
-const customRouteRedirectName = computed(() => {
-    return routeName.value;
-});
-const searchBarDataKeys = {
-    AliasBasicData: 'AliasBasicData',
-    AliasUsers: 'AliasUsers',
-};
-</script>
-
-<template>
-    <VnCard
-        data-key="Alias"
-        :descriptor="AliasDescriptor"
-        :search-data-key="searchBarDataKeys[routeName]"
-        :search-custom-route-redirect="customRouteRedirectName"
-        :search-redirect="!!customRouteRedirectName"
-        :searchbar-label="t('mailAlias.search')"
-        :searchbar-info="t('mailAlias.searchInfo')"
-    />
-</template>
diff --git a/src/pages/Account/Alias/Card/AliasDescriptor.vue b/src/pages/Account/Alias/Card/AliasDescriptor.vue
deleted file mode 100644
index bc174aa0e..000000000
--- a/src/pages/Account/Alias/Card/AliasDescriptor.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 { useQuasar } from 'quasar';
-
-import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-
-import useCardDescription from 'src/composables/useCardDescription';
-import axios from 'axios';
-import useNotify from 'src/composables/useNotify.js';
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: false,
-        default: null,
-    },
-});
-
-const { t } = useI18n();
-const route = useRoute();
-const quasar = useQuasar();
-const router = useRouter();
-const { notify } = useNotify();
-
-const entityId = computed(() => {
-    return $props.id || route.params.id;
-});
-
-const data = ref(useCardDescription());
-const setData = (entity) => (data.value = useCardDescription(entity.alias, entity.id));
-
-const filter = {
-    where: { id: entityId },
-};
-
-const removeAlias = () => {
-    quasar
-        .dialog({
-            title: t('Alias will be removed'),
-            message: t('Are you sure you want to continue?'),
-            ok: {
-                push: true,
-                color: 'primary',
-            },
-            cancel: true,
-        })
-        .onOk(async () => {
-            try {
-                await axios.delete(`MailAliases/${entityId.value}`);
-                notify(t('Alias removed'), 'positive');
-                router.push({ name: 'AccountAlias' });
-            } catch (err) {
-                console.error('Error removing alias');
-            }
-        });
-};
-</script>
-
-<template>
-    <CardDescriptor
-        ref="descriptor"
-        url="MailAliases"
-        :filter="filter"
-        module="Account"
-        @on-fetch="setData"
-        data-key="aliasData"
-        :title="data.title"
-        :subtitle="data.subtitle"
-    >
-        <template #menu>
-            <QItem v-ripple clickable @click="removeAlias()">
-                <QItemSection>{{ t('Delete') }}</QItemSection>
-            </QItem>
-        </template>
-        <template #body="{ entity }">
-            <VnLv :label="t('mailAlias.description')" :value="entity.description" />
-        </template>
-    </CardDescriptor>
-</template>
-
-<i18n>
-    en:
-        accountRate: Claming rate
-    es:
-        accountRate: Ratio de reclamación
-        Delete: Eliminar
-        Alias will be removed: El alias será eliminado
-        Are you sure you want to continue?: ¿Seguro que quieres continuar?
-        Alias removed: Alias eliminado
-</i18n>
diff --git a/src/pages/Account/Alias/Card/AliasSummary.vue b/src/pages/Account/Alias/Card/AliasSummary.vue
deleted file mode 100644
index cedae28b7..000000000
--- a/src/pages/Account/Alias/Card/AliasSummary.vue
+++ /dev/null
@@ -1,49 +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('Alias');
-const alias = ref(store.data);
-const entityId = computed(() => $props.id || route.params.id);
-</script>
-
-<template>
-    <CardSummary
-        ref="summary"
-        :url="`MailAliases/${entityId}`"
-        @on-fetch="(data) => (alias = data)"
-    >
-        <template #header> {{ alias.id }} - {{ alias.alias }} </template>
-        <template #body>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <router-link
-                        :to="{ name: 'AliasBasicData', params: { id: entityId } }"
-                        class="header header-link"
-                    >
-                        {{ t('globals.summary.basicData') }}
-                        <QIcon name="open_in_new" />
-                    </router-link>
-                </QCardSection>
-                <VnLv :label="t('mailAlias.id')" :value="alias.id" />
-                <VnLv :label="t('mailAlias.description')" :value="alias.description" />
-            </QCard>
-        </template>
-    </CardSummary>
-</template>
diff --git a/src/pages/Account/Alias/Card/AliasUsers.vue b/src/pages/Account/Alias/Card/AliasUsers.vue
deleted file mode 100644
index 39f881a4e..000000000
--- a/src/pages/Account/Alias/Card/AliasUsers.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup>
-import { useRoute } from 'vue-router';
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import VnPaginate from 'components/ui/VnPaginate.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 { notify } = useNotify();
-const route = useRoute();
-const { openConfirmationModal } = useVnConfirm();
-
-const paginateRef = ref(null);
-
-const arrayData = useArrayData('AliasUsers');
-const { store } = arrayData;
-
-const data = computed(() => {
-    const dataCopy = JSON.parse(JSON.stringify(store.data));
-    return dataCopy.sort((a, b) => a.user?.name.localeCompare(b.user?.name));
-});
-
-const filter = {
-    include: {
-        relation: 'user',
-        scope: {
-            fields: ['id', 'name'],
-        },
-    },
-};
-
-const urlPath = computed(() => `MailAliases/${route.params.id}/accounts`);
-
-const columns = computed(() => [
-    {
-        name: 'alias',
-    },
-    {
-        name: 'action',
-    },
-]);
-
-const deleteAlias = async (row) => {
-    try {
-        await axios.delete(`${urlPath.value}/${row.id}`);
-        notify(t('User removed'), 'positive');
-        fetchAliases();
-    } catch (error) {
-        console.error(error);
-    }
-};
-
-watch(
-    () => route.params.id,
-    () => {
-        store.url = urlPath.value;
-        store.filter = filter;
-        fetchAliases();
-    }
-);
-
-const fetchAliases = () => paginateRef.value.fetch();
-</script>
-
-<template>
-    <QPage class="column items-center q-pa-md">
-        <div class="full-width" style="max-width: 400px">
-            <VnPaginate
-                ref="paginateRef"
-                data-key="AliasUsers"
-                :filter="filter"
-                :url="urlPath"
-                auto-load
-            >
-                <template #body>
-                    <QTable :rows="data" :columns="columns" hide-header>
-                        <template #body="{ row }">
-                            <QTr>
-                                <QTd>
-                                    <span>{{ row.user?.name }}</span>
-                                </QTd>
-                                <QTd style="width: 50px !important">
-                                    <QIcon
-                                        name="delete"
-                                        size="sm"
-                                        class="cursor-pointer"
-                                        color="primary"
-                                        @click="
-                                            openConfirmationModal(
-                                                t('User will be removed from alias'),
-                                                t('Are you sure you want to continue?'),
-                                                () => deleteAlias(row)
-                                            )
-                                        "
-                                    >
-                                        <QTooltip>
-                                            {{ t('Delete') }}
-                                        </QTooltip>
-                                    </QIcon>
-                                </QTd>
-                            </QTr>
-                        </template>
-                    </QTable>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-</template>
-
-<i18n>
-es:
-    User will be removed from alias: El usuario será borrado del alias
-    Are you sure you want to continue?: ¿Seguro que quieres continuar?
-    User removed: Usuario borrado
-    Delete: Eliminar
-</i18n>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index f9bd7dc18..fd187ebfb 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -72,3 +72,15 @@ samba:
     verifyCertificate: Verify certificate
     testConnection: Test connection
     success: Samba connection established!
+acls:
+    role: Role
+    accessType: Access type
+    permissions: Permission
+    search: Search acls
+    searchInfo: Search acls by model name
+    aclFilter:
+        principalId: Role
+        model: Model
+        property: Property
+        accessType: Access type
+        permission: Permission
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index 763143940..fa40717db 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -82,3 +82,15 @@ samba:
     Verify certificate: Verificar certificado
     testConnection: Probar conexión
     success: ¡Conexión con Samba establecida!
+acls:
+    role: Rol
+    accessType: Tipo de acceso
+    permissions: Permiso
+    search: Buscar acls
+    searchInfo: Buscar acls por nombre
+    aclFilter:
+        principalId: Rol
+        model: Modelo
+        property: Propiedad
+        accessType: Tipo de acceso
+        permission: Permiso
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index e13215afc..54a91af26 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'AccountMain' },
     menus: {
-        main: ['AccountList', 'AccountAliasList'],
+        main: ['AccountList', 'AccountAcls'],
         card: [],
     },
     children: [
@@ -31,13 +31,18 @@ export default {
                     component: () => import('src/pages/Account/AccountList.vue'),
                 },
                 {
-                    path: 'alias-list',
-                    name: 'AccountAliasList',
+                    path: 'acls',
+                    name: 'AccountAcls',
                     meta: {
-                        title: 'alias',
-                        icon: 'email',
+                        title: 'acls',
+                        icon: 'check',
                     },
-                    component: () => import('src/pages/Account/AccountAliasList.vue'),
+                    component: () => import('src/pages/Account/AccountAcls.vue'),
+                },
+                {
+                    path: 'acl-form',
+                    name: 'AccountAclForm',
+                    component: () => import('src/pages/Account/Acls/AclFormView.vue'),
                 },
             ],
         },
diff --git a/src/router/modules/mailAlias.js b/src/router/modules/mailAlias.js
deleted file mode 100644
index 8e0f8abdc..000000000
--- a/src/router/modules/mailAlias.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { RouterView } from 'vue-router';
-
-export default {
-    path: 'account/alias',
-    name: 'Alias',
-    meta: {
-        title: 'alias',
-        icon: 'email',
-        moduleName: 'Alias',
-    },
-    component: RouterView,
-    redirect: { name: 'AccountAliasList' },
-    menus: {
-        main: [],
-        card: ['AliasBasicData', 'AliasUsers'],
-    },
-    children: [
-        {
-            name: 'AliasCard',
-            path: ':id',
-            component: () => import('src/pages/Account/Alias/Card/AliasCard.vue'),
-            redirect: { name: 'AliasSummary' },
-            children: [
-                {
-                    name: 'AliasSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                        icon: 'launch',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Alias/Card/AliasSummary.vue'),
-                },
-                {
-                    name: 'AliasBasicData',
-                    path: 'basic-data',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Alias/Card/AliasBasicData.vue'),
-                },
-                {
-                    name: 'AliasUsers',
-                    path: 'users',
-                    meta: {
-                        title: 'aliasUsers',
-                        icon: 'group',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Alias/Card/AliasUsers.vue'),
-                },
-            ],
-        },
-    ],
-};

From c96e6482f9ebbbacd995edab7216a76de99e16e5 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 4 Jun 2024 08:42:32 -0300
Subject: [PATCH 05/12] remove mail alias content

---
 src/router/modules/index.js | 2 --
 src/router/routes.js        | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index d69098a58..ca60c78d8 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -13,7 +13,6 @@ import Travel from './travel';
 import Order from './order';
 import Department from './department';
 import Role from './role';
-import mailAlias from './mailAlias';
 import Entry from './entry';
 import roadmap from './roadmap';
 import Parking from './parking';
@@ -39,7 +38,6 @@ export default [
     invoiceIn,
     Department,
     Role,
-    mailAlias,
     Entry,
     roadmap,
     Parking,
diff --git a/src/router/routes.js b/src/router/routes.js
index 9d3dc8710..60cc24a75 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -11,7 +11,6 @@ import route from './modules/route';
 import travel from './modules/travel';
 import department from './modules/department';
 import role from './modules/role';
-import mailAlias from './modules/mailAlias';
 import ItemType from './modules/itemType';
 import shelving from 'src/router/modules/shelving';
 import order from 'src/router/modules/order';
@@ -77,7 +76,6 @@ const routes = [
             travel,
             department,
             role,
-            mailAlias,
             roadmap,
             entry,
             parking,

From 946aa6b24de868888db7959faa5ef7252374d70c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 4 Jun 2024 15:10:00 -0300
Subject: [PATCH 06/12] Small changes

---
 src/pages/Account/Acls/AclFilter.vue   |  6 +++++-
 src/pages/Account/Acls/AclFormView.vue | 15 +++++++++++++++
 src/pages/Account/locale/en.yml        | 10 ----------
 src/pages/Account/locale/es.yml        | 10 ----------
 4 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/pages/Account/Acls/AclFilter.vue b/src/pages/Account/Acls/AclFilter.vue
index 8035f92b8..8609672b6 100644
--- a/src/pages/Account/Acls/AclFilter.vue
+++ b/src/pages/Account/Acls/AclFilter.vue
@@ -37,7 +37,11 @@ onBeforeMount(() => {
         @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(`acls.aclFilter.${tag.label}`) }}: </strong>
diff --git a/src/pages/Account/Acls/AclFormView.vue b/src/pages/Account/Acls/AclFormView.vue
index 0103d1b2b..5d77889db 100644
--- a/src/pages/Account/Acls/AclFormView.vue
+++ b/src/pages/Account/Acls/AclFormView.vue
@@ -9,13 +9,16 @@ import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 import { useValidator } from 'src/composables/useValidator';
 import { useArrayData } from 'src/composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
+const stateStore = useStateStore();
 const arrayData = useArrayData('aclCreate');
 const { store } = arrayData;
 const validationsStore = useValidator();
@@ -67,6 +70,18 @@ onMounted(() => {
         @on-fetch="(data) => (rolesOptions = data)"
         auto-load
     />
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="AccountAcls"
+                url="ACLs"
+                :expr-builder="exprBuilder"
+                :label="t('acls.search')"
+                :info="t('acls.searchInfo')"
+                custom-route-redirect-name="AccountAcls"
+            />
+        </Teleport>
+    </template>
     <QPage class="column items-center full-width">
         <VnSubToolbar />
         <FormModel
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index fd187ebfb..ab59856aa 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -41,16 +41,6 @@ role:
         description: Description
         id: Id
         name: Name
-mailAlias:
-    pageTitles:
-        aliasUsers: Users
-    search: Search mail alias
-    searchInfo: Search alias by id or name
-    alias: Alias
-    description: Description
-    id: Id
-    newAlias: New alias
-    name: Name
 ldap:
     enableSync: Enable synchronization
     server: Server
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index fa40717db..10379a059 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -52,16 +52,6 @@ role:
         description: Descripción
         id: Idd
         name: Nombre
-mailAlias:
-    pageTitles:
-        aliasUsers: Usuarios
-    search: Buscar alias de correo
-    searchInfo: Buscar alias por id o nombre
-    alias: Alias
-    description: Descripción
-    id: Id
-    newAlias: Nuevo alias
-    name: Nombre
 ldap:
     enableSync: Habilitar sincronización
     server: Servidor

From 9f6d0b4dc9132245a7d3b4c6fdc812b98965e8c6 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 4 Jun 2024 15:15:12 -0300
Subject: [PATCH 07/12] Remove roles

---
 src/router/modules/index.js |  2 -
 src/router/modules/role.js  | 76 -------------------------------------
 src/router/routes.js        |  2 -
 3 files changed, 80 deletions(-)
 delete mode 100644 src/router/modules/role.js

diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index ca60c78d8..78d4d94cc 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -12,7 +12,6 @@ import Supplier from './Supplier';
 import Travel from './travel';
 import Order from './order';
 import Department from './department';
-import Role from './role';
 import Entry from './entry';
 import roadmap from './roadmap';
 import Parking from './parking';
@@ -37,7 +36,6 @@ export default [
     Order,
     invoiceIn,
     Department,
-    Role,
     Entry,
     roadmap,
     Parking,
diff --git a/src/router/modules/role.js b/src/router/modules/role.js
deleted file mode 100644
index 6aab5f945..000000000
--- a/src/router/modules/role.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { RouterView } from 'vue-router';
-
-export default {
-    path: '/role',
-    name: 'Role',
-    meta: {
-        title: 'role',
-        icon: 'vn:greuge',
-        moduleName: 'Role',
-    },
-    component: RouterView,
-    redirect: { name: 'AccountRoles' },
-    menus: {
-        main: [],
-        card: ['RoleBasicData', 'SubRoles', 'InheritedRoles', 'RoleLog'],
-    },
-    children: [
-        {
-            name: 'RoleCard',
-            path: '/role/:id',
-            component: () => import('src/pages/Account/Role/Card/RoleCard.vue'),
-            redirect: { name: 'RoleSummary' },
-            children: [
-                {
-                    name: 'RoleSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                        icon: 'launch',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Role/Card/RoleSummary.vue'),
-                },
-                {
-                    name: 'RoleBasicData',
-                    path: 'basic-data',
-                    meta: {
-                        title: 'basicData',
-                        icon: 'vn:settings',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Role/Card/RoleBasicData.vue'),
-                },
-                {
-                    name: 'SubRoles',
-                    path: 'sub-roles',
-                    meta: {
-                        title: 'subRoles',
-                        icon: 'group',
-                    },
-                    component: () => import('src/pages/Account/Role/Card/SubRoles.vue'),
-                },
-
-                {
-                    name: 'InheritedRoles',
-                    path: 'inherited-roles',
-                    meta: {
-                        title: 'inheritedRoles',
-                        icon: 'account_tree',
-                    },
-                    component: () =>
-                        import('src/pages/Account/Role/Card/InheritedRoles.vue'),
-                },
-                {
-                    name: 'RoleLog',
-                    path: 'log',
-                    meta: {
-                        title: 'log',
-                        icon: 'history',
-                    },
-                    component: () => import('src/pages/Account/Role/Card/RoleLog.vue'),
-                },
-            ],
-        },
-    ],
-};
diff --git a/src/router/routes.js b/src/router/routes.js
index 60cc24a75..8ae50402b 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -10,7 +10,6 @@ import supplier from './modules/Supplier';
 import route from './modules/route';
 import travel from './modules/travel';
 import department from './modules/department';
-import role from './modules/role';
 import ItemType from './modules/itemType';
 import shelving from 'src/router/modules/shelving';
 import order from 'src/router/modules/order';
@@ -75,7 +74,6 @@ const routes = [
             supplier,
             travel,
             department,
-            role,
             roadmap,
             entry,
             parking,

From 807460dfada3f661ec29bdc5f69f2e7cb2d96476 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 5 Jun 2024 18:14:41 +0200
Subject: [PATCH 08/12] fix: info icon

---
 src/pages/Account/Acls/AclFormView.vue | 8 +++++++-
 src/pages/Account/locale/en.yml        | 1 +
 src/pages/Account/locale/es.yml        | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/pages/Account/Acls/AclFormView.vue b/src/pages/Account/Acls/AclFormView.vue
index 5d77889db..2e3c28b71 100644
--- a/src/pages/Account/Acls/AclFormView.vue
+++ b/src/pages/Account/Acls/AclFormView.vue
@@ -122,7 +122,13 @@ onMounted(() => {
                         :label="t('acls.aclFilter.property')"
                         v-model="data.property"
                         lazy-rules
-                    />
+                    >
+                        <template #append>
+                            <QIcon name="info" class="cursor-pointer">
+                                <QTooltip>{{ t('acls.tooltip') }}</QTooltip>
+                            </QIcon>
+                        </template></VnInput
+                    >
                 </VnRow>
                 <VnRow class="row q-gutter-md q-mb-md">
                     <VnSelect
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index ab59856aa..9d6671839 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -68,6 +68,7 @@ acls:
     permissions: Permission
     search: Search acls
     searchInfo: Search acls by model name
+    tooltip: Use * to match all properties
     aclFilter:
         principalId: Role
         model: Model
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index 10379a059..1c29303bc 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -78,6 +78,7 @@ acls:
     permissions: Permiso
     search: Buscar acls
     searchInfo: Buscar acls por nombre
+    tooltip: Usa * para marcar todas las propiedades
     aclFilter:
         principalId: Rol
         model: Modelo

From f453f42b06759902cfd6a04b911d0752169265ed Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 5 Jun 2024 19:37:53 +0200
Subject: [PATCH 09/12] feat: New and edit ACL from Popup

---
 src/components/FormModelPopup.vue      |   1 +
 src/pages/Account/AccountAcls.vue      |  24 +++-
 src/pages/Account/Acls/AclFormView.vue | 174 ++++++++++++-------------
 3 files changed, 106 insertions(+), 93 deletions(-)

diff --git a/src/components/FormModelPopup.vue b/src/components/FormModelPopup.vue
index 25213a8b7..06aa1d891 100644
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@@ -65,6 +65,7 @@ defineExpose({
         :observe-form-changes="false"
         :default-actions="false"
         :url-create="urlCreate"
+        :url="url"
         :model="model"
         @on-data-saved="onDataSaved"
     >
diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index ac21861a7..5be6be1d4 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -13,6 +13,7 @@ import { useVnConfirm } from 'composables/useVnConfirm';
 import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
+import AclFormView from './Acls/AclFormView.vue';
 
 defineProps({
     id: {
@@ -28,6 +29,7 @@ const stateStore = useStateStore();
 const { openConfirmationModal } = useVnConfirm();
 
 const paginateRef = ref(null);
+const formDialog = ref(false);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -48,8 +50,16 @@ const deleteAcl = async (id) => {
     }
 };
 
-const redirectToAclsForm = (id = undefined) =>
-    router.push({ name: 'AccountAclForm', query: { id } });
+function showFormDialog(id = null) {
+    formDialog.value = {
+        show: true,
+        id,
+        ur: `ACLs/${id}`,
+    };
+}
+
+const redirectToAclsForm = (id = undefined) => showFormDialog(id);
+// router.push({ name: 'AccountAclForm', query: { id } });
 </script>
 
 <template>
@@ -69,6 +79,7 @@ const redirectToAclsForm = (id = undefined) =>
             <AclFilter data-key="AccountAcls" />
         </QScrollArea>
     </QDrawer>
+
     <QPage class="flex justify-center q-pa-md">
         <div class="vn-card-list">
             <VnPaginate
@@ -112,8 +123,15 @@ const redirectToAclsForm = (id = undefined) =>
                 </template>
             </VnPaginate>
         </div>
+        <QDialog
+            v-model="formDialog.show"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <AclFormView :id="formDialog.id" />
+        </QDialog>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="redirectToAclsForm()">
+            <QBtn fab icon="add" color="primary" @click="showFormDialog()">
                 <QTooltip class="text-no-wrap">{{ t('New ACL') }}</QTooltip>
             </QBtn>
         </QPageSticky>
diff --git a/src/pages/Account/Acls/AclFormView.vue b/src/pages/Account/Acls/AclFormView.vue
index 2e3c28b71..e14744564 100644
--- a/src/pages/Account/Acls/AclFormView.vue
+++ b/src/pages/Account/Acls/AclFormView.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref, onBeforeMount, onMounted, computed } from 'vue';
+import { ref, onBeforeMount, onMounted, toRefs } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import FetchData from 'components/FetchData.vue';
@@ -10,6 +10,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import FormModelPopup from 'components/FormModelPopup.vue';
 
 import { useValidator } from 'src/composables/useValidator';
 import { useArrayData } from 'src/composables/useArrayData';
@@ -31,11 +32,17 @@ const accessTypes = [{ name: '*' }, { name: 'READ' }, { name: 'WRITE' }];
 const permissions = [{ name: 'ALLOW' }, { name: 'DENY' }];
 const validations = ref([]);
 
-const id = computed(() => route.query.id || null);
 const url = ref(null);
 const urlCreate = ref(null);
 const urlUpdate = ref(null);
-
+const action = ref('New');
+const $props = defineProps({
+    id: {
+        type: Object,
+        default: null,
+    },
+});
+const { id } = toRefs($props);
 const redirectToAclList = () => router.push({ name: 'AccountAcls' });
 
 const onDataSaved = () => {
@@ -50,8 +57,11 @@ onBeforeMount(() => {
 onMounted(() => {
     url.value = id.value ? `ACLs/${id.value}` : null;
 
-    if (url.value) urlUpdate.value = 'ACLs';
-    else {
+    if (url.value) {
+        urlUpdate.value = 'ACLs';
+        action.value = 'Edit';
+    } else {
+        url.value = null;
         defaultFormData.value = {
             property: '*',
             principalType: 'ROLE',
@@ -70,89 +80,73 @@ onMounted(() => {
         @on-fetch="(data) => (rolesOptions = data)"
         auto-load
     />
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="AccountAcls"
-                url="ACLs"
-                :expr-builder="exprBuilder"
-                :label="t('acls.search')"
-                :info="t('acls.searchInfo')"
-                custom-route-redirect-name="AccountAcls"
-            />
-        </Teleport>
-    </template>
-    <QPage class="column items-center full-width">
-        <VnSubToolbar />
-        <FormModel
-            v-if="urlCreate || urlUpdate"
-            :url="url"
-            :url-update="urlUpdate"
-            :url-create="urlCreate"
-            :form-initial-data="defaultFormData"
-            auto-load
-            model="aclCreate"
-            @on-data-saved="onDataSaved()"
-        >
-            <template #form="{ data }">
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelect
-                        :label="t('acls.aclFilter.principalId')"
-                        v-model="data.principalId"
-                        :options="rolesOptions"
-                        option-value="name"
-                        option-label="name"
-                        use-input
-                        rounded
-                    />
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelect
-                        :label="t('acls.aclFilter.model')"
-                        v-model="data.model"
-                        :options="validations"
-                        option-value="name"
-                        option-label="name"
-                        use-input
-                        rounded
-                    />
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <VnInput
-                        :label="t('acls.aclFilter.property')"
-                        v-model="data.property"
-                        lazy-rules
-                    >
-                        <template #append>
-                            <QIcon name="info" class="cursor-pointer">
-                                <QTooltip>{{ t('acls.tooltip') }}</QTooltip>
-                            </QIcon>
-                        </template></VnInput
-                    >
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelect
-                        :label="t('acls.aclFilter.accessType')"
-                        v-model="data.accessType"
-                        :options="accessTypes"
-                        option-value="name"
-                        option-label="name"
-                        use-input
-                        rounded
-                    />
-                </VnRow>
-                <VnRow class="row q-gutter-md q-mb-md">
-                    <VnSelect
-                        :label="t('acls.aclFilter.permission')"
-                        v-model="data.permission"
-                        :options="permissions"
-                        option-value="name"
-                        option-label="name"
-                        use-input
-                        rounded
-                    />
-                </VnRow>
-            </template>
-        </FormModel>
-    </QPage>
+    <FormModelPopup
+        :title="t(`${action} ACL`)"
+        :url="url"
+        :url-update="urlUpdate"
+        :url-create="urlCreate"
+        auto-load
+        model="aclCreate"
+        @on-data-saved="onDataSaved()"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    :label="t('acls.aclFilter.principalId')"
+                    v-model="data.principalId"
+                    :options="rolesOptions"
+                    option-value="name"
+                    option-label="name"
+                    use-input
+                    rounded
+                />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    :label="t('acls.aclFilter.model')"
+                    v-model="data.model"
+                    :options="validations"
+                    option-value="name"
+                    option-label="name"
+                    use-input
+                    rounded
+                />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    :label="t('acls.aclFilter.property')"
+                    v-model="data.property"
+                    lazy-rules
+                >
+                    <template #append>
+                        <QIcon name="info" class="cursor-pointer">
+                            <QTooltip>{{ t('acls.tooltip') }}</QTooltip>
+                        </QIcon>
+                    </template></VnInput
+                >
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    :label="t('acls.aclFilter.accessType')"
+                    v-model="data.accessType"
+                    :options="accessTypes"
+                    option-value="name"
+                    option-label="name"
+                    use-input
+                    rounded
+                />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnSelect
+                    :label="t('acls.aclFilter.permission')"
+                    v-model="data.permission"
+                    :options="permissions"
+                    option-value="name"
+                    option-label="name"
+                    use-input
+                    rounded
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
 </template>

From 9ed297207b979b0654de116d5d676ad60542259c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 5 Jun 2024 14:52:45 -0300
Subject: [PATCH 10/12] Make create form work

---
 src/pages/Account/Acls/AclFormView.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/pages/Account/Acls/AclFormView.vue b/src/pages/Account/Acls/AclFormView.vue
index e14744564..2144629ff 100644
--- a/src/pages/Account/Acls/AclFormView.vue
+++ b/src/pages/Account/Acls/AclFormView.vue
@@ -7,19 +7,13 @@ import FetchData from 'components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import FormModel from 'components/FormModel.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
 
 import { useValidator } from 'src/composables/useValidator';
 import { useArrayData } from 'src/composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
-const route = useRoute();
 const router = useRouter();
-const stateStore = useStateStore();
 const arrayData = useArrayData('aclCreate');
 const { store } = arrayData;
 const validationsStore = useValidator();
@@ -81,10 +75,12 @@ onMounted(() => {
         auto-load
     />
     <FormModelPopup
+        v-if="urlCreate || urlUpdate"
         :title="t(`${action} ACL`)"
         :url="url"
         :url-update="urlUpdate"
         :url-create="urlCreate"
+        :form-initial-data="defaultFormData"
         auto-load
         model="aclCreate"
         @on-data-saved="onDataSaved()"

From a56df4667828dae90d1eedb7b46c00107f7acb99 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 7 Jun 2024 09:07:58 +0200
Subject: [PATCH 11/12] fix(AccountAcls): fix and optimization

---
 src/components/FormModelPopup.vue      | 30 ++-------
 src/pages/Account/AccountAcls.vue      | 28 +++++----
 src/pages/Account/Acls/AclFormView.vue | 84 ++++++++++----------------
 3 files changed, 52 insertions(+), 90 deletions(-)

diff --git a/src/components/FormModelPopup.vue b/src/components/FormModelPopup.vue
index 06aa1d891..0f2b6cbf0 100644
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 import FormModel from 'components/FormModel.vue';
 
-const emit = defineEmits(['onDataSaved']);
+const emit = defineEmits(['onDataSaved', 'onDataCanceled']);
 
 defineProps({
     title: {
@@ -15,26 +15,6 @@ defineProps({
         type: String,
         default: '',
     },
-    url: {
-        type: String,
-        default: '',
-    },
-    model: {
-        type: String,
-        default: '',
-    },
-    filter: {
-        type: Object,
-        default: null,
-    },
-    urlCreate: {
-        type: String,
-        default: null,
-    },
-    formInitialData: {
-        type: Object,
-        default: () => {},
-    },
 });
 
 const { t } = useI18n();
@@ -43,8 +23,8 @@ const formModelRef = ref(null);
 const closeButton = ref(null);
 
 const onDataSaved = (formData, requestResponse) => {
-    emit('onDataSaved', formData, requestResponse);
     closeForm();
+    emit('onDataSaved', formData, requestResponse);
 };
 
 const isLoading = computed(() => formModelRef.value?.isLoading);
@@ -61,12 +41,9 @@ defineExpose({
 <template>
     <FormModel
         ref="formModelRef"
-        :form-initial-data="formInitialData"
         :observe-form-changes="false"
         :default-actions="false"
-        :url-create="urlCreate"
-        :url="url"
-        :model="model"
+        v-bind="$attrs"
         @on-data-saved="onDataSaved"
     >
         <template #form="{ data, validate }">
@@ -85,6 +62,7 @@ defineExpose({
                     flat
                     :disabled="isLoading"
                     :loading="isLoading"
+                    @click="emit('onDataCanceled')"
                     v-close-popup
                 />
                 <QBtn
diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index 5be6be1d4..f07f155f2 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -2,6 +2,7 @@
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { ref } from 'vue';
+import FetchData from 'components/FetchData.vue';
 
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -24,12 +25,12 @@ defineProps({
 
 const { notify } = useNotify();
 const { t } = useI18n();
-const router = useRouter();
 const stateStore = useStateStore();
 const { openConfirmationModal } = useVnConfirm();
 
-const paginateRef = ref(null);
+const paginateRef = ref();
 const formDialog = ref(false);
+const rolesOptions = ref([]);
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -50,19 +51,21 @@ const deleteAcl = async (id) => {
     }
 };
 
-function showFormDialog(id = null) {
+function showFormDialog(data) {
     formDialog.value = {
         show: true,
-        id,
-        ur: `ACLs/${id}`,
+        formInitialData: data,
     };
 }
-
-const redirectToAclsForm = (id = undefined) => showFormDialog(id);
-// router.push({ name: 'AccountAclForm', query: { id } });
 </script>
 
 <template>
+    <FetchData
+        url="VnRoles"
+        :filter="{ fields: ['name'], order: 'name ASC' }"
+        @on-fetch="(data) => (rolesOptions = data)"
+        auto-load
+    />
     <template v-if="stateStore.isHeaderMounted()">
         <Teleport to="#searchbar">
             <VnSearchbar
@@ -86,7 +89,6 @@ const redirectToAclsForm = (id = undefined) => showFormDialog(id);
                 ref="paginateRef"
                 data-key="AccountAcls"
                 url="ACLs"
-                auto-load
                 :expr-builder="exprBuilder"
             >
                 <template #body="{ rows }">
@@ -95,7 +97,7 @@ const redirectToAclsForm = (id = undefined) => showFormDialog(id);
                         :id="row.id"
                         :key="row.id"
                         :title="`${row.model}.${row.property}`"
-                        @click="redirectToAclsForm(row.id)"
+                        @click="showFormDialog(row)"
                     >
                         <template #list-items>
                             <VnLv :label="t('acls.role')" :value="row.principalId" />
@@ -128,7 +130,11 @@ const redirectToAclsForm = (id = undefined) => showFormDialog(id);
             transition-show="scale"
             transition-hide="scale"
         >
-            <AclFormView :id="formDialog.id" />
+            <AclFormView
+                :form-initial-data="formDialog.formInitialData"
+                @on-data-change="paginateRef.fetch()"
+                :roles-options="rolesOptions"
+            />
         </QDialog>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
             <QBtn fab icon="add" color="primary" @click="showFormDialog()">
diff --git a/src/pages/Account/Acls/AclFormView.vue b/src/pages/Account/Acls/AclFormView.vue
index 2144629ff..f39bba888 100644
--- a/src/pages/Account/Acls/AclFormView.vue
+++ b/src/pages/Account/Acls/AclFormView.vue
@@ -1,103 +1,86 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref, onBeforeMount, onMounted, toRefs } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { ref, onBeforeMount, onMounted } from 'vue';
 
-import FetchData from 'components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModelPopup from 'components/FormModelPopup.vue';
 
 import { useValidator } from 'src/composables/useValidator';
 import { useArrayData } from 'src/composables/useArrayData';
 
+const emit = defineEmits(['onDataChange']);
 const { t } = useI18n();
-const router = useRouter();
-const arrayData = useArrayData('aclCreate');
-const { store } = arrayData;
 const validationsStore = useValidator();
 const { models } = validationsStore;
+const arrayData = useArrayData('aclCreate');
+const { store } = arrayData;
 
-const defaultFormData = ref(null);
-
-const rolesOptions = ref([]);
 const accessTypes = [{ name: '*' }, { name: 'READ' }, { name: 'WRITE' }];
 const permissions = [{ name: 'ALLOW' }, { name: 'DENY' }];
 const validations = ref([]);
 
-const url = ref(null);
-const urlCreate = ref(null);
-const urlUpdate = ref(null);
+const url = ref();
+const urlCreate = ref('ACLs');
+const urlUpdate = ref();
 const action = ref('New');
+
 const $props = defineProps({
-    id: {
+    formInitialData: {
         type: Object,
-        default: null,
+        default: () => {
+            return {
+                property: '*',
+                principalType: 'ROLE',
+                accessType: 'READ',
+                permission: 'ALLOW',
+            };
+        },
+    },
+    rolesOptions: {
+        type: Array,
+        required: true,
     },
 });
-const { id } = toRefs($props);
-const redirectToAclList = () => router.push({ name: 'AccountAcls' });
-
-const onDataSaved = () => {
-    store.data = undefined;
-    redirectToAclList();
-};
 
 onBeforeMount(() => {
     for (let model in models) validations.value.push({ name: model });
 });
 
 onMounted(() => {
-    url.value = id.value ? `ACLs/${id.value}` : null;
-
-    if (url.value) {
+    store.data = $props.formInitialData;
+    if ($props.formInitialData.id) {
+        urlCreate.value = null;
         urlUpdate.value = 'ACLs';
         action.value = 'Edit';
-    } else {
-        url.value = null;
-        defaultFormData.value = {
-            property: '*',
-            principalType: 'ROLE',
-            accessType: 'READ',
-            permission: 'ALLOW',
-        };
-        urlCreate.value = 'ACLs';
     }
 });
 </script>
 
 <template>
-    <FetchData
-        url="VnRoles"
-        :filter="{ fields: ['name'], order: 'name ASC' }"
-        @on-fetch="(data) => (rolesOptions = data)"
-        auto-load
-    />
     <FormModelPopup
         v-if="urlCreate || urlUpdate"
         :title="t(`${action} ACL`)"
         :url="url"
         :url-update="urlUpdate"
         :url-create="urlCreate"
-        :form-initial-data="defaultFormData"
+        :form-initial-data="formInitialData"
         auto-load
         model="aclCreate"
-        @on-data-saved="onDataSaved()"
+        @on-data-saved="emit('onDataChange')"
+        @on-data-canceled="emit('onDataChange')"
     >
         <template #form-inputs="{ data }">
-            <VnRow class="row q-gutter-md q-mb-md">
+            <div class="column q-gutter-y-md">
                 <VnSelect
                     :label="t('acls.aclFilter.principalId')"
                     v-model="data.principalId"
-                    :options="rolesOptions"
+                    :options="$props.rolesOptions"
                     option-value="name"
                     option-label="name"
                     use-input
                     rounded
                 />
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
                 <VnSelect
                     :label="t('acls.aclFilter.model')"
                     v-model="data.model"
@@ -107,8 +90,7 @@ onMounted(() => {
                     use-input
                     rounded
                 />
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
+
                 <VnInput
                     :label="t('acls.aclFilter.property')"
                     v-model="data.property"
@@ -120,8 +102,6 @@ onMounted(() => {
                         </QIcon>
                     </template></VnInput
                 >
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
                 <VnSelect
                     :label="t('acls.aclFilter.accessType')"
                     v-model="data.accessType"
@@ -131,8 +111,6 @@ onMounted(() => {
                     use-input
                     rounded
                 />
-            </VnRow>
-            <VnRow class="row q-gutter-md q-mb-md">
                 <VnSelect
                     :label="t('acls.aclFilter.permission')"
                     v-model="data.permission"
@@ -142,7 +120,7 @@ onMounted(() => {
                     use-input
                     rounded
                 />
-            </VnRow>
+            </div>
         </template>
     </FormModelPopup>
 </template>

From edad698f722eae5c2da3e13ebcf4d603c7ba66b5 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 7 Jun 2024 10:21:41 +0200
Subject: [PATCH 12/12] fix: update list when update record

---
 src/pages/Account/AccountAcls.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index c12d77430..82d171ce7 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -49,11 +49,10 @@ const deleteAcl = async (id) => {
         console.error('Error deleting Acl: ', error);
     }
 };
-
 function showFormDialog(data) {
     formDialog.value = {
         show: true,
-        formInitialData: data,
+        formInitialData: { ...data },
     };
 }
 </script>