From c045b0d1f415617937430140ca53e76babc72b99 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 17:47:34 +0200
Subject: [PATCH] feat accountRoutes

---
 src/pages/Account/Card/AccountDescriptor.vue  |  67 +---
 .../Account/Card/AccountInheritedRoles.vue    | 256 +++++++++++++++
 src/pages/Account/Card/AccountMailAlias.vue   | 256 +++++++++++++++
 src/pages/Account/Card/AccountSummary.vue     | 306 ++----------------
 src/pages/Account/locale/en.yml               |   4 +
 src/pages/Account/locale/es.yml               |   5 +
 src/router/modules/account.js                 |  36 ++-
 7 files changed, 573 insertions(+), 357 deletions(-)
 create mode 100644 src/pages/Account/Card/AccountInheritedRoles.vue
 create mode 100644 src/pages/Account/Card/AccountMailAlias.vue

diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index 3850ef210..b19c1f619 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -25,78 +25,19 @@ const salixUrl = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-
 const filter = {
-    include: [
-        {
-            relation: 'client',
-            scope: {
-                include: [
-                    { relation: 'salesPersonUser' },
-                    {
-                        relation: 'accountsRatio',
-                        scope: {
-                            fields: ['accountingRate'],
-                            limit: 1,
-                        },
-                    },
-                ],
-            },
-        },
-        {
-            relation: 'accountState',
-        },
-        {
-            relation: 'ticket',
-            scope: {
-                include: [
-                    { relation: 'zone' },
-                    {
-                        relation: 'address',
-                        scope: {
-                            include: { relation: 'province' },
-                        },
-                    },
-                ],
-            },
-        },
-        {
-            relation: 'worker',
-            scope: {
-                include: { relation: 'user' },
-            },
-        },
-    ],
+    where: { id: entityId },
+    fields: ['id', 'nickname', 'name', 'role'],
+    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
 };
-
-const STATE_COLOR = {
-    pending: 'warning',
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-const data = ref(useCardDescription());
-const setData = (entity) => {
-    if (!entity) return;
-    data.value = useCardDescription(entity.client.name, entity.id);
-    state.set('AccountDescriptor', entity);
-};
-onMounted(async () => {
-    salixUrl.value = await getUrl('');
-});
 </script>
 
 <template>
     <CardDescriptor
         ref="descriptor"
-        :url="`Accounts/${entityId}`"
+        :url="`VnUsers/preview`"
         :filter="filter"
         module="Account"
-        :title="data.title"
-        :subtitle="data.subtitle"
         @on-fetch="setData"
         data-key="accountData"
     >
diff --git a/src/pages/Account/Card/AccountInheritedRoles.vue b/src/pages/Account/Card/AccountInheritedRoles.vue
new file mode 100644
index 000000000..d8a43c623
--- /dev/null
+++ b/src/pages/Account/Card/AccountInheritedRoles.vue
@@ -0,0 +1,256 @@
+<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/AccountMailAlias.vue b/src/pages/Account/Card/AccountMailAlias.vue
new file mode 100644
index 000000000..d8a43c623
--- /dev/null
+++ b/src/pages/Account/Card/AccountMailAlias.vue
@@ -0,0 +1,256 @@
+<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/AccountSummary.vue b/src/pages/Account/Card/AccountSummary.vue
index 69f46dde8..bc808f6b0 100644
--- a/src/pages/Account/Card/AccountSummary.vue
+++ b/src/pages/Account/Card/AccountSummary.vue
@@ -27,22 +27,6 @@ const $props = defineProps({
 });
 
 const entityId = computed(() => $props.id || route.params.id);
-const AccountStates = ref([]);
-const accountUrl = ref();
-const salixUrl = ref();
-const accountDmsRef = ref();
-const accountDmsFilter = ref({
-    include: [
-        {
-            relation: 'dms',
-        },
-    ],
-});
-
-onMounted(async () => {
-    salixUrl.value = await getUrl('');
-    accountUrl.value = salixUrl.value + `account/${entityId.value}/`;
-});
 
 const detailsColumns = ref([
     {
@@ -97,16 +81,6 @@ const detailsColumns = ref([
     },
 ]);
 
-const STATE_COLOR = {
-    pending: 'warning',
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-function stateColor(code) {
-    return STATE_COLOR[code];
-}
-
 const developmentColumns = ref([
     {
         name: 'accountReason',
@@ -139,115 +113,43 @@ const developmentColumns = ref([
         sortable: true,
     },
 ]);
-const accountDms = ref([]);
-const multimediaDialog = ref();
-const multimediaSlide = ref();
 
-async function getAccountDms() {
-    accountDmsFilter.value.where = { accountFk: entityId.value };
-    await accountDmsRef.value.fetch();
-}
-
-function setAccountDms(data) {
-    accountDms.value = [];
-    data.forEach((media) => {
-        accountDms.value.push({
-            isVideo: media.dms.contentType == 'video/mp4',
-            url: `/api/Accounts/${media.dmsFk}/downloadFile?access_token=${token}`,
-            dmsFk: media.dmsFk,
-        });
-    });
-}
-
-function openDialog(dmsId) {
-    multimediaSlide.value = dmsId;
-    multimediaDialog.value = true;
-}
-async function changeState(value) {
-    await axios.patch(`Accounts/updateAccount/${entityId.value}`, {
-        accountStateFk: value,
-    });
-    router.go(route.fullPath);
-}
+const filter = {
+    where: { id: entityId },
+    fields: ['id', 'nickname', 'name', 'role'],
+    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+};
 </script>
 
 <template>
-    <FetchData
-        url="AccountDms"
-        :filter="accountDmsFilter"
-        @on-fetch="(data) => setAccountDms(data)"
-        ref="accountDmsRef"
-    />
-    <FetchData
-        url="AccountStates"
-        @on-fetch="(data) => (AccountStates = data)"
-        auto-load
-    />
-    <CardSummary
-        ref="summary"
-        :url="`Accounts/${entityId}/getSummary`"
-        :entity-id="entityId"
-        @on-fetch="getAccountDms"
-    >
-        <template #header="{ entity: { account } }">
+    <CardSummary ref="summary" :url="`VnUsers/preview`" :filter="filter">
+        <!-- <template #header="{ entity: { account } }">
             {{ account.id }} - {{ account.client.name }} ({{ account.client.id }})
-        </template>
-        <template #header-right>
-            <QBtnDropdown
-                side
-                top
-                color="black"
-                text-color="white"
-                :label="t('ticket.summary.changeState')"
-            >
-                <QList>
-                    <QVirtualScroll
-                        style="max-height: 300px"
-                        :items="AccountStates"
-                        separator
-                        v-slot="{ item, index }"
-                    >
-                        <QItem
-                            :key="index"
-                            dense
-                            clickable
-                            v-close-popup
-                            @click="changeState(item.id)"
-                        >
-                            <QItemSection>
-                                <QItemLabel>{{ item.description }}</QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QVirtualScroll>
-                </QList>
-            </QBtnDropdown>
-        </template>
-        <template #body="{ entity: { account, salesAccounted, developments } }">
+        </template> -->
+        <template #body="{ entity: { account } }">
             <QCard class="vn-one">
-                <VnTitle
-                    :url="`#/account/${entityId}/basic-data`"
-                    :text="t('account.pageTitles.basicData')"
-                />
-                <VnLv
+                {{ account }}
+                <!-- <VnTitle :text="t('account.pageTitles.basicData')" /> -->
+                <!-- <VnLv
                     :label="t('account.summary.created')"
                     :value="toDate(account.created)"
-                />
-                <VnLv :label="t('account.summary.state')">
+                /> -->
+                <!-- <VnLv :label="t('account.summary.state')">
                     <template #value>
                         <QChip :color="stateColor(account.accountState.code)" dense>
                             {{ account.accountState.description }}
                         </QChip>
                     </template>
-                </VnLv>
-                <VnLv :label="t('globals.salesPerson')">
+                </VnLv> -->
+                <!-- <VnLv :label="t('globals.salesPerson')">
                     <template #value>
                         <VnUserLink
                             :name="account.client?.salesPersonUser?.name"
                             :worker-id="account.client?.salesPersonFk"
                         />
                     </template>
-                </VnLv>
-                <VnLv :label="t('account.summary.attendedBy')">
+                </VnLv> -->
+                <!-- <VnLv :label="t('account.summary.attendedBy')">
                     <template #value>
                         <VnUserLink
                             :name="account.worker?.user?.nickname"
@@ -265,178 +167,8 @@ async function changeState(value) {
                 <VnLv
                     :label="t('account.basicData.pickup')"
                     :value="`${dashIfEmpty(account.pickup)}`"
-                />
+                /> -->
             </QCard>
-            <QCard class="vn-three">
-                <VnTitle
-                    :url="`#/account/${entityId}/notes`"
-                    :text="t('account.summary.notes')"
-                />
-            </QCard>
-            <QCard class="vn-two" v-if="salesAccounted.length > 0">
-                <VnTitle
-                    :url="`#/account/${entityId}/lines`"
-                    :text="t('account.summary.details')"
-                />
-                <QTable
-                    :columns="detailsColumns"
-                    :rows="salesAccounted"
-                    flat
-                    dense
-                    :rows-per-page-options="[0]"
-                    hide-bottom
-                >
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                    <template #body="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                <span v-if="col.name != 'description'">{{
-                                    t(col.value)
-                                }}</span>
-                                <QBtn
-                                    v-if="col.name == 'description'"
-                                    flat
-                                    color="blue"
-                                    >{{ col.value }}</QBtn
-                                >
-
-                            </QTh>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
-            <QCard class="vn-two" v-if="accountDms.length > 0">
-                <VnTitle
-                    :url="`#/account/${entityId}/photos`"
-                    :text="t('account.summary.photos')"
-                />
-                <div class="container">
-                    <div
-                        class="multimedia-container"
-                        v-for="(media, index) of accountDms"
-                        :key="index"
-                    >
-                        <div class="relative-position">
-                            <QIcon
-                                name="play_circle"
-                                color="primary"
-                                size="xl"
-                                class="absolute-center zindex"
-                                v-if="media.isVideo"
-                                @click.stop="openDialog(media.dmsFk)"
-                            >
-                                <QTooltip>Video</QTooltip>
-                            </QIcon>
-                            <QCard class="multimedia relative-position">
-                                <QImg
-                                    :src="media.url"
-                                    class="rounded-borders cursor-pointer fit"
-                                    @click="openDialog(media.dmsFk)"
-                                    v-if="!media.isVideo"
-                                >
-                                </QImg>
-                                <video
-                                    :src="media.url"
-                                    class="rounded-borders cursor-pointer fit"
-                                    muted="muted"
-                                    v-if="media.isVideo"
-                                    @click="openDialog(media.dmsFk)"
-                                />
-                            </QCard>
-                        </div>
-                    </div>
-                </div>
-            </QCard>
-            <QCard class="vn-two" v-if="developments.length > 0">
-                <VnTitle
-                    :url="accountUrl + 'development'"
-                    :text="t('account.summary.development')"
-                />
-                <QTable
-                    :columns="developmentColumns"
-                    :rows="developments"
-                    flat
-                    dense
-                    :rows-per-page-options="[0]"
-                    hide-bottom
-                >
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
-                    </template>
-                </QTable>
-            </QCard>
-            <QCard class="vn-max">
-                <VnTitle
-                    :url="accountUrl + 'action'"
-                    :text="t('account.summary.actions')"
-                />
-                <div id="slider-container" class="q-px-xl q-py-md">
-                    <QSlider
-                        v-model="account.responsibility"
-                        label
-                        :label-value="t('account.summary.responsibility')"
-                        label-always
-                        color="var()"
-                        markers
-                        :marker-labels="[
-                            { value: 1, label: t('account.summary.company') },
-                            { value: 5, label: t('account.summary.person') },
-                        ]"
-                        :min="1"
-                        :max="5"
-                        readonly
-                    />
-                </div>
-            </QCard>
-            <QDialog
-                v-model="multimediaDialog"
-                transition-show="slide-up"
-                transition-hide="slide-down"
-            >
-                <QToolbar class="absolute zindex close-button">
-                    <QSpace />
-                    <QBtn icon="close" color="primary" round dense v-close-popup />
-                </QToolbar>
-                <QCarousel
-                    swipeable
-                    animated
-                    v-model="multimediaSlide"
-                    arrows
-                    class="fit"
-                >
-                    <QCarouselSlide
-                        v-for="media of accountDms"
-                        :key="media.dmsFk"
-                        :name="media.dmsFk"
-                    >
-                        <QImg
-                            :src="media.url"
-                            class="fit"
-                            fit="scale-down"
-                            v-if="!media.isVideo"
-                        />
-                        <video
-                            class="q-ma-none fit"
-                            v-if="media.isVideo"
-                            controls
-                            muted
-                            autoplay
-                        >
-                            <source :src="media.url" type="video/mp4" />
-                        </video>
-                    </QCarouselSlide>
-                </QCarousel>
-            </QDialog>
         </template>
     </CardSummary>
 </template>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 09eb2447c..96eb76bac 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -9,4 +9,8 @@ account:
         samba: Samba
         acls: ACLs
         connections: Connections
+        inheritedRoles: Inherited Roles
+        privileges: Privileges
+        mailAlias: Mail Alias
+        mailForwarding: Mail Forwarding
     search: Search user
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index f5a3eb977..42640d08e 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -9,4 +9,9 @@ account:
         samba: Samba
         acls: ACLs
         connections: Conexiones
+        inheritedRoles: Roles heredados
+        privileges: Privilegios
+        mailAlias: Alias de correo
+        mailForwarding: Reenvío de correo
+
     search: Buscar usuario
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 725de4ac7..d39226884 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -22,7 +22,9 @@ export default {
         ],
         card: [
             'AccountBasicData',
+            'AccountInheritedRoles',
             'AccountMailForwarding',
+            'AccountMailAlias',
             'AccountPrivileges',
             'AccountLog',
         ],
@@ -146,21 +148,41 @@ export default {
                         import('src/pages/Account/Card/AccountBasicData.vue'),
                 },
                 {
-                    name: 'AccountMailForwarding',
-                    path: 'mailForwarding',
+                    name: 'AccountInheritedRoles',
+                    path: 'inherited-oles',
                     meta: {
-                        title: 'pda',
-                        icon: 'phone_android',
+                        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: 'notifications',
-                        icon: 'notifications',
+                        title: 'privileges',
+                        icon: 'badge',
                     },
                     component: () =>
                         import('src/pages/Account/Card/AccountPrivileges.vue'),
@@ -170,7 +192,7 @@ export default {
                     path: 'log',
                     meta: {
                         title: 'log',
-                        icon: 'vn:log',
+                        icon: 'history',
                     },
                     component: () => import('src/pages/Account/Card/AccountLog.vue'),
                 },