From f6d3e37787db76df9fccb979bdf5b2a1937fda8c Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 10 May 2024 08:02:12 +0200
Subject: [PATCH] feat: accountRoles

---
 src/pages/Account/{ => Role}/AccountRoles.vue |   4 +-
 src/pages/Account/Role/AccountRolesFilter.vue | 225 ++++++++
 src/pages/Account/Role/Card/RoleBasicData.vue | 181 +++++++
 src/pages/Account/Role/Card/RoleSummary.vue   | 488 ++++++++++++++++++
 src/router/modules/account.js                 |   3 +-
 5 files changed, 898 insertions(+), 3 deletions(-)
 rename src/pages/Account/{ => Role}/AccountRoles.vue (97%)
 create mode 100644 src/pages/Account/Role/AccountRolesFilter.vue
 create mode 100644 src/pages/Account/Role/Card/RoleBasicData.vue
 create mode 100644 src/pages/Account/Role/Card/RoleSummary.vue

diff --git a/src/pages/Account/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
similarity index 97%
rename from src/pages/Account/AccountRoles.vue
rename to src/pages/Account/Role/AccountRoles.vue
index 2b94a88da..910a6f124 100644
--- a/src/pages/Account/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -4,11 +4,11 @@ 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 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 AccountSummary from '../Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 const stateStore = useStateStore();
diff --git a/src/pages/Account/Role/AccountRolesFilter.vue b/src/pages/Account/Role/AccountRolesFilter.vue
new file mode 100644
index 000000000..23b72266c
--- /dev/null
+++ b/src/pages/Account/Role/AccountRolesFilter.vue
@@ -0,0 +1,225 @@
+<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/RoleBasicData.vue b/src/pages/Account/Role/Card/RoleBasicData.vue
new file mode 100644
index 000000000..7a3548b8b
--- /dev/null
+++ b/src/pages/Account/Role/Card/RoleBasicData.vue
@@ -0,0 +1,181 @@
+<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 FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+import axios from 'axios';
+import { useSession } from 'src/composables/useSession';
+
+const route = useRoute();
+const { t } = useI18n();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+
+const accountFilter = {
+    fields: [
+        'id',
+        'clientFk',
+        'created',
+        'workerFk',
+        'accountStateFk',
+        'packages',
+        'pickup',
+    ],
+    include: [
+        {
+            relation: 'client',
+            scope: {
+                fields: ['name'],
+            },
+        },
+    ],
+};
+
+const accountStates = ref([]);
+const accountStatesCopy = ref([]);
+const optionsList = ref([]);
+
+const workersOptions = ref([]);
+
+function setAccountStates(data) {
+    accountStates.value = data;
+    accountStatesCopy.value = data;
+}
+
+async function getEnumValues() {
+    optionsList.value = [{ id: null, description: t('account.basicData.null') }];
+    const { data } = await axios.get(`Applications/get-enum-values`, {
+        params: {
+            schema: 'vn',
+            table: 'account',
+            column: 'pickup',
+        },
+    });
+    for (let value of data)
+        optionsList.value.push({
+            id: value,
+            description: t(`account.basicData.${value}`),
+        });
+}
+
+getEnumValues();
+
+const statesFilter = {
+    options: accountStates,
+    filterFn: (options, value) => {
+        const search = value.toLowerCase();
+
+        if (value === '') return accountStatesCopy.value;
+
+        return options.value.filter((row) => {
+            const description = row.description.toLowerCase();
+
+            return description.indexOf(search) > -1;
+        });
+    },
+};
+</script>
+<template>
+    <FetchData
+        url="Workers/activeWithInheritedRole"
+        :filter="{ where: { role: 'salesPerson' } }"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+    />
+    <FetchData url="AccountStates" @on-fetch="setAccountStates" auto-load />
+    <FormModel
+        :url="`Accounts/${route.params.id}`"
+        :url-update="`Accounts/updateAccount/${route.params.id}`"
+        :filter="accountFilter"
+        model="account"
+        auto-load
+    >
+        <template #form="{ data, validate, filter }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.client.name"
+                        :label="t('account.basicData.customer')"
+                        disable
+                    />
+                </div>
+                <div class="col">
+                    <VnInputDate
+                        v-model="data.created"
+                        :label="t('account.basicData.created')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelect
+                        :label="t('account.basicData.assignedTo')"
+                        v-model="data.workerFk"
+                        :options="workersOptions"
+                        option-value="id"
+                        option-label="name"
+                        emit-value
+                        auto-load
+                        :rules="validate('account.accountStateFk')"
+                    >
+                        <template #before>
+                            <QAvatar color="orange">
+                                <QImg
+                                    v-if="data.workerFk"
+                                    :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                    spinner-color="white"
+                                />
+                            </QAvatar>
+                        </template>
+                    </VnSelect>
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.accountStateFk"
+                        :options="accountStates"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        :label="t('account.basicData.state')"
+                        map-options
+                        use-input
+                        @filter="(value, update) => filter(value, update, statesFilter)"
+                        :rules="validate('account.accountStateFk')"
+                        :input-debounce="0"
+                    >
+                    </QSelect>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        v-model.number="data.packages"
+                        :label="t('globals.packages')"
+                        :rules="validate('account.packages')"
+                        type="number"
+                    />
+                </div>
+                <div class="col">
+                    <QSelect
+                        v-model="data.pickup"
+                        :options="optionsList"
+                        option-value="id"
+                        option-label="description"
+                        emit-value
+                        :label="t('account.basicData.pickup')"
+                        map-options
+                        use-input
+                        :input-debounce="0"
+                    >
+                    </QSelect>
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Account/Role/Card/RoleSummary.vue b/src/pages/Account/Role/Card/RoleSummary.vue
new file mode 100644
index 000000000..69f46dde8
--- /dev/null
+++ b/src/pages/Account/Role/Card/RoleSummary.vue
@@ -0,0 +1,488 @@
+<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';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+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([
+    {
+        name: 'item',
+        label: 'account.summary.item',
+        field: (row) => row.sale.itemFk,
+        sortable: true,
+    },
+    {
+        name: 'landed',
+        label: 'account.summary.landed',
+        field: (row) => row.sale.ticket.landed,
+        format: (value) => toDate(value),
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: 'account.summary.quantity',
+        field: (row) => row.sale.quantity,
+        sortable: true,
+    },
+    {
+        name: 'accounted',
+        label: 'account.summary.accounted',
+        field: (row) => row.quantity,
+        sortable: true,
+    },
+    {
+        name: 'description',
+        label: 'globals.description',
+        field: (row) => row.sale.concept,
+    },
+    {
+        name: 'price',
+        label: 'account.summary.price',
+        field: (row) => row.sale.price,
+        sortable: true,
+    },
+    {
+        name: 'discount',
+        label: 'account.summary.discount',
+        field: (row) => row.sale.discount,
+        format: (value) => `${value} %`,
+        sortable: true,
+    },
+    {
+        name: 'total',
+        label: 'account.summary.total',
+        field: ({ sale }) =>
+            toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
+        sortable: true,
+    },
+]);
+
+const STATE_COLOR = {
+    pending: 'warning',
+    incomplete: 'info',
+    resolved: 'positive',
+    canceled: 'negative',
+};
+function stateColor(code) {
+    return STATE_COLOR[code];
+}
+
+const developmentColumns = ref([
+    {
+        name: 'accountReason',
+        label: 'account.summary.reason',
+        field: (row) => row.accountReason.description,
+        sortable: true,
+    },
+    {
+        name: 'accountResult',
+        label: 'account.summary.result',
+        field: (row) => row.accountResult.description,
+        sortable: true,
+    },
+    {
+        name: 'accountResponsible',
+        label: 'account.summary.responsible',
+        field: (row) => row.accountResponsible.description,
+        sortable: true,
+    },
+    {
+        name: 'worker',
+        label: 'account.summary.worker',
+        field: (row) => row.worker?.user.nickname,
+        sortable: true,
+    },
+    {
+        name: 'accountRedelivery',
+        label: 'account.summary.redelivery',
+        field: (row) => row.accountRedelivery.description,
+        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);
+}
+</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 } }">
+            {{ 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 } }">
+            <QCard class="vn-one">
+                <VnTitle
+                    :url="`#/account/${entityId}/basic-data`"
+                    :text="t('account.pageTitles.basicData')"
+                />
+                <VnLv
+                    :label="t('account.summary.created')"
+                    :value="toDate(account.created)"
+                />
+                <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')">
+                    <template #value>
+                        <VnUserLink
+                            :name="account.client?.salesPersonUser?.name"
+                            :worker-id="account.client?.salesPersonFk"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('account.summary.attendedBy')">
+                    <template #value>
+                        <VnUserLink
+                            :name="account.worker?.user?.nickname"
+                            :worker-id="account.workerFk"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :label="t('account.summary.customer')">
+                    <template #value>
+                        <span class="link cursor-pointer">
+                            {{ account.client?.name }}
+                        </span>
+                    </template>
+                </VnLv>
+                <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>
+
+<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 83abceda9..725de4ac7 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -51,7 +51,8 @@ export default {
                         title: 'roles',
                         icon: 'group',
                     },
-                    component: () => import('src/pages/Account/AccountRoles.vue'),
+                    component: () =>
+                        import('src/pages/Account/AccountRole/AccountRoles.vue'),
                 },
                 {
                     path: 'alias',