diff --git a/src/pages/Account/Role/Card/RoleBasicData.vue b/src/pages/Account/Role/Card/RoleBasicData.vue
index 7a3548b8b..e3f03f653 100644
--- a/src/pages/Account/Role/Card/RoleBasicData.vue
+++ b/src/pages/Account/Role/Card/RoleBasicData.vue
@@ -1,181 +1,33 @@
 <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 }">
+    <FormModel :url="`VnRoles/${route.params.id}`" model="VnRole" auto-load>
+        <template #form="{ data }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnInput
                         v-model="data.client.name"
-                        :label="t('account.basicData.customer')"
+                        :label="t('role.basicData.name')"
                         disable
                     />
                 </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnInputDate
                         v-model="data.created"
-                        :label="t('account.basicData.created')"
+                        :label="t('role.basicData.description')"
                     />
                 </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/RoleCard.vue b/src/pages/Account/Role/Card/RoleCard.vue
index 7d9f97c22..7f5a45d8b 100644
--- a/src/pages/Account/Role/Card/RoleCard.vue
+++ b/src/pages/Account/Role/Card/RoleCard.vue
@@ -5,7 +5,7 @@ import RoleDescriptor from './RoleDescriptor.vue';
 <template>
     <VnCard
         data-key="Role"
-        base-url="Roles"
+        base-url="VnRoles"
         :descriptor="RoleDescriptor"
         searchbar-data-key="RoleList"
         searchbar-url="Roles/filter"
diff --git a/src/pages/Account/Role/Card/RoleDescriptor.vue b/src/pages/Account/Role/Card/RoleDescriptor.vue
index b19c1f619..d6fd4bf8e 100644
--- a/src/pages/Account/Role/Card/RoleDescriptor.vue
+++ b/src/pages/Account/Role/Card/RoleDescriptor.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate, toPercentage } from 'src/filters';
 import { useState } from 'src/composables/useState';
@@ -9,7 +9,10 @@ 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 { useQuasar } from 'quasar';
 
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
 const $props = defineProps({
     id: {
         type: Number,
@@ -19,122 +22,66 @@ const $props = defineProps({
 });
 
 const route = useRoute();
+
+const quasar = useQuasar();
+const router = useRouter();
+
+const { notify } = useNotify();
 const state = useState();
 const { t } = useI18n();
 const salixUrl = ref();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
+const data = ref(useCardDescription());
+const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
 const filter = {
     where: { id: entityId },
-    fields: ['id', 'nickname', 'name', 'role'],
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+};
+const removeRole = () => {
+    quasar
+        .dialog({
+            title: 'Are you sure you want to delete it?',
+            message: 'Delete department',
+            ok: {
+                push: true,
+                color: 'primary',
+            },
+            cancel: true,
+        })
+        .onOk(async () => {
+            try {
+                await axios.post(
+                    `/Departments/${entityId.value}/removeChild`,
+                    entityId.value
+                );
+                router.push({ name: 'WorkerDepartment' });
+                notify('department.departmentRemoved', 'positive');
+            } catch (err) {
+                console.error('Error removing department');
+            }
+        });
 };
 </script>
 
 <template>
     <CardDescriptor
         ref="descriptor"
-        :url="`VnUsers/preview`"
+        :url="`VnRoles`"
         :filter="filter"
         module="Account"
         @on-fetch="setData"
         data-key="accountData"
+        :title="data.title"
+        :subtitle="data.subtitle"
     >
-        <template #menu="{ entity }">
-            {{ entity }}
+        <template #menu>
+            <QItem v-ripple clickable @click="removeRole()">
+                <QItemSection>{{ t('Delete') }}</QItemSection>
+            </QItem>
         </template>
         <template #body="{ entity }">
-            <VnLv v-if="entity.accountState" :label="t('account.card.state')">
-                <template #value>
-                    <QBadge
-                        :color="stateColor(entity.accountState.code)"
-                        text-color="black"
-                        dense
-                    >
-                        {{ entity.accountState.description }}
-                    </QBadge>
-                </template>
-            </VnLv>
-            <VnLv :label="t('account.card.created')" :value="toDate(entity.created)" />
-            <VnLv :label="t('account.card.commercial')">
-                <template #value>
-                    <VnUserLink
-                        :name="entity.client?.salesPersonUser?.name"
-                        :worker-id="entity.client?.salesPersonFk"
-                    />
-                </template>
-            </VnLv>
-            <VnLv
-                v-if="entity.worker"
-                :label="t('account.card.attendedBy')"
-                :value="entity.worker.user.name"
-            >
-                <template #value>
-                    <VnUserLink
-                        :name="entity.worker.user.nickname"
-                        :worker-id="entity.worker.id"
-                    />
-                </template>
-            </VnLv>
-            <VnLv :label="t('account.card.zone')">
-                <template #value>
-                    <span class="link">
-                        {{ entity.ticket?.zone?.name }}
-                    </span>
-                </template>
-            </VnLv>
-            <VnLv
-                :label="t('account.card.province')"
-                :value="entity.ticket?.address?.province?.name"
-            />
-            <VnLv :label="t('account.card.ticketId')">
-                <template #value>
-                    <span class="link">
-                        {{ entity.ticketFk }}
-                    </span>
-                </template>
-            </VnLv>
-            <VnLv
-                :label="t('accountRate')"
-                :value="toPercentage(entity.client?.accountsRatio?.accountingRate)"
-            />
-        </template>
-        <template #actions="{ entity }">
-            <QCardActions>
-                <QBtn
-                    size="md"
-                    icon="vn:client"
-                    color="primary"
-                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
-                >
-                    <QTooltip>{{ t('account.card.customerSummary') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    size="md"
-                    icon="vn:ticket"
-                    color="primary"
-                    :to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
-                >
-                    <QTooltip>{{ t('account.card.accountedTicket') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    size="md"
-                    icon="assignment"
-                    color="primary"
-                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/sale-tracking'"
-                >
-                    <QTooltip>{{ t('account.card.saleTracking') }}</QTooltip>
-                </QBtn>
-                <QBtn
-                    size="md"
-                    icon="visibility"
-                    color="primary"
-                    :href="salixUrl + 'ticket/' + entity.ticketFk + '/tracking/index'"
-                >
-                    <QTooltip>{{ t('account.card.ticketTracking') }}</QTooltip>
-                </QBtn>
-            </QCardActions>
+            <VnLv :label="t('role.card.description')" :value="entity.description" />
         </template>
     </CardDescriptor>
 </template>
diff --git a/src/pages/Account/Role/Card/RoleSummary.vue b/src/pages/Account/Role/Card/RoleSummary.vue
index 3f8ea701b..eca5f7085 100644
--- a/src/pages/Account/Role/Card/RoleSummary.vue
+++ b/src/pages/Account/Role/Card/RoleSummary.vue
@@ -12,6 +12,7 @@ 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 router = useRouter();
@@ -26,76 +27,37 @@ const $props = defineProps({
     },
 });
 
+const { store } = useArrayData('Role');
+const role = ref(store.data);
 const entityId = computed(() => $props.id || route.params.id);
-
-onMounted(async () => {});
-
-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 filter = {
+    where: { id: entityId },
+};
 </script>
 
 <template>
     <CardSummary
         ref="summary"
         :url="`VnRoles`"
-        :entity-id="entityId"
-        @on-fetch="getAccountDms"
+        :filter="filter"
+        @on-fetch="(data) => (role = data)"
     >
-        <!-- <template #header="{ entity: { account } }">
-            {{ account.id }} - {{ account.client.name }} ({{ account.client.id }})
-        </template> -->
-        <template #body="{ entity }">
-            {{ entity }}
+        <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>