From 5809e36ddb56ffb8f7abf5149f3f1f204d33e1b7 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Mon, 30 Jan 2023 15:32:44 +0100
Subject: [PATCH] Summary refactor

---
 src/components/ui/CardDescriptor.vue          | 125 ++-
 src/components/ui/CardSummary.vue             |  44 +-
 src/css/quasar.variables.scss                 |   2 +-
 src/pages/Claim/Card/ClaimCard.vue            |   4 +-
 src/pages/Claim/Card/ClaimDescriptor.vue      | 100 +-
 src/pages/Claim/Card/ClaimSummary.vue         | 237 ++---
 .../Customer/Card/CustomerDescriptor.vue      |  74 +-
 src/pages/Customer/Card/CustomerSummary.vue   | 923 +++++++++---------
 .../InvoiceOut/Card/InvoiceOutDescriptor.vue  | 105 +-
 src/pages/Ticket/Card/TicketDescriptor.vue    | 128 ++-
 src/pages/Ticket/Card/TicketSummary.vue       |   1 +
 11 files changed, 936 insertions(+), 807 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index f905d58b0..e2e233d3d 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,44 +1,40 @@
 <script setup>
-import { onMounted, useSlots, computed, ref, toRef, watch } from 'vue';
+import { onMounted, useSlots, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 
 const props = defineProps({
-    id: {
-        type: Number,
-        required: true,
+    url: {
+        type: String,
+        default: '',
+    },
+    filter: {
+        type: Object,
+        default: null,
     },
     module: {
         type: String,
         required: true,
-    },
-    description: {
-        type: String,
-        required: false,
-        default: '',
-    },
+    }
 });
 
 const slots = useSlots();
 const { t } = useI18n();
 
-onMounted(async () => {
-    await fetch();
-});
+onMounted(() => fetch());
 
 const entity = ref();
-const entityId = toRef(props, 'id');
-const description = computed(() => {
-    return props.description || entity.value.name;
-});
-
 async function fetch() {
-    const { data } = await axios.get(`Clients/${entityId.value}/getCard`);
+    const params = {};
+
+    if (props.filter) params.filter = props.filter;
+
+    const { data } = await axios.get(props.url, { params });
     entity.value = data;
 }
 
-watch(entityId, async () => {
+watch(props, async () => {
     entity.value = null;
     await fetch();
 });
@@ -46,40 +42,63 @@ watch(entityId, async () => {
 
 <template>
     <div class="descriptor">
-        <div class="header bg-primary q-pa-sm">
-            <router-link :to="{ name: `${module}List` }">
-                <q-btn round flat dense size="md" icon="view_list" color="white">
-                    <q-tooltip>{{ t('components.cardDescriptor.mainList') }}</q-tooltip>
-                </q-btn>
-            </router-link>
-            <router-link :to="{ name: `${module}Summary`, params: { id: entityId } }">
-                <q-btn round flat dense size="md" icon="launch" color="white">
-                    <q-tooltip>{{ t('components.cardDescriptor.summary') }}</q-tooltip>
-                </q-btn>
-            </router-link>
-
-            <q-btn v-if="slots.menu" size="md" icon="more_vert" color="white" round flat dense>
-                <q-tooltip>{{ t('components.cardDescriptor.moreOptions') }}</q-tooltip>
-                <q-menu>
-                    <q-list>
-                        <slot name="menu" />
-                    </q-list>
-                </q-menu>
-            </q-btn>
-        </div>
-        <div v-if="entity" class="body q-py-sm">
-            <q-list>
-                <q-item-label header class="ellipsis text-h5" :lines="1">
-                    {{ description }}
-                    <q-tooltip>{{ description }}</q-tooltip>
-                </q-item-label>
-                <q-item dense>
-                    <q-item-label class="text-subtitle2" caption>#{{ entity.id }}</q-item-label>
-                </q-item>
-            </q-list>
-            <slot name="body" :entity="entity" />
-        </div>
+        <template v-if="entity">
+            <div class="header bg-primary q-pa-sm">
+                <router-link :to="{ name: `${module}List` }">
+                    <q-btn round flat dense size="md" icon="view_list" color="white">
+                        <q-tooltip>{{
+                            t('components.cardDescriptor.mainList')
+                        }}</q-tooltip>
+                    </q-btn>
+                </router-link>
+                <router-link
+                    :to="{ name: `${module}Summary`, params: { id: entity.id } }"
+                >
+                    <q-btn round flat dense size="md" icon="launch" color="white">
+                        <q-tooltip>{{
+                            t('components.cardDescriptor.summary')
+                        }}</q-tooltip>
+                    </q-btn>
+                </router-link>
 
+                <q-btn
+                    v-if="slots.menu"
+                    size="md"
+                    icon="more_vert"
+                    color="white"
+                    round
+                    flat
+                    dense
+                >
+                    <q-tooltip>
+                        {{ t('components.cardDescriptor.moreOptions') }}
+                    </q-tooltip>
+                    <q-menu>
+                        <q-list>
+                            <slot name="menu" :entity="entity" />
+                        </q-list>
+                    </q-menu>
+                </q-btn>
+            </div>
+            <div class="body q-py-sm">
+                <q-list>
+                    <q-item-label header class="ellipsis text-h5" :lines="1">
+                        <slot name="description" :entity="entity">
+                            <span>
+                                {{ entity.name }}
+                                <q-tooltip>{{ entity.name }}</q-tooltip>
+                            </span>
+                        </slot>
+                    </q-item-label>
+                    <q-item dense>
+                        <q-item-label class="text-subtitle2" caption>
+                            #{{ entity.id }}
+                        </q-item-label>
+                    </q-item>
+                </q-list>
+                <slot name="body" :entity="entity" />
+            </div>
+        </template>
         <!-- Skeleton -->
         <skeleton-descriptor v-if="!entity" />
     </div>
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index a5659fea9..87b7002dc 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -1,19 +1,21 @@
 <script setup>
-import { onMounted, toRef, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import axios from 'axios';
 import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
-
-const props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
 onMounted(() => fetch());
 
 const entity = ref();
-const entityId = toRef(props, 'id');
+const props = defineProps({
+    url: {
+        type: String,
+        default: '',
+    },
+    filter: {
+        type: Object,
+        default: null,
+    },
+});
+const emit = defineEmits(['onFetch']);
 
 defineExpose({
     entity,
@@ -21,12 +23,17 @@ defineExpose({
 });
 
 async function fetch() {
-    const id = entityId.value;
-    const { data } = await axios.get(`Clients/${id}/summary`);
+    const params = {};
+
+    if (props.filter) params.filter = props.filter;
+
+    const { data } = await axios.get(props.url, { params });
     entity.value = data;
+
+    emit('onFetch', data);
 }
 
-watch(entityId, async () => {
+watch(props, async () => {
     entity.value = null;
     fetch();
 });
@@ -38,9 +45,11 @@ watch(entityId, async () => {
             <skeleton-summary v-if="!entity" />
             <template v-if="entity">
                 <div class="header bg-primary q-pa-sm q-mb-md">
-                    <slot name="header" :entity="entity"> {{ entity.id }} - {{ entity.name }} </slot>
+                    <slot name="header" :entity="entity">
+                        {{ entity.id }} - {{ entity.name }}
+                    </slot>
                 </div>
-                <div class="row q-pa-md q-col-gutter-md q-mb-md">
+                <div class="body q-pa-md q-mb-md">
                     <slot name="body" :entity="entity" />
                 </div>
             </template>
@@ -73,10 +82,11 @@ watch(entityId, async () => {
             }
         }
     }
-    .row {
+
+    .body > .q-card__section.row {
         flex-wrap: wrap;
 
-        .col {
+        & > .col {
             min-width: 250px;
         }
     }
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index ea519a706..3baae40e3 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -28,7 +28,7 @@ $color-spacer: rgba(255, 255, 255, 0.3);
 $border-thin-light: 1px solid $color-spacer-light;
 
 $dark-shadow-color: #000;
-$dark: #3c3b3b;
+$dark: #292929;
 $layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
 
 $spacing-md: 16px;
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index cf8f7687c..cef8a9c3a 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -20,7 +20,7 @@ const state = useState();
     </q-page-container>
 </template>
 
-<style lang="scss">
+<!-- <style lang="scss">
 .q-scrollarea__content {
     max-width: 100%;
 }
@@ -47,4 +47,4 @@ const state = useState();
         justify-content: space-between;
     }
 }
-</style>
+</style> -->
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index c3959b7d2..84b924c2f 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -1,13 +1,12 @@
 <script setup>
-import { onMounted, computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate } from 'src/filters';
-import axios from 'axios';
+
 import TicketDescriptorPopover from 'pages/Ticket/Card/TicketDescriptorPopover.vue';
 import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 
 const $props = defineProps({
     id: {
@@ -17,10 +16,6 @@ const $props = defineProps({
     },
 });
 
-onMounted(async () => {
-    await fetch();
-});
-
 const route = useRoute();
 const { t } = useI18n();
 
@@ -28,28 +23,21 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const claim = ref();
-async function fetch() {
-    const filter = {
-        include: [
-            { relation: 'client' },
-            { relation: 'claimState' },
-            {
-                relation: 'claimState',
+const filter = {
+    include: [
+        { relation: 'client' },
+        { relation: 'claimState' },
+        {
+            relation: 'claimState',
+        },
+        {
+            relation: 'worker',
+            scope: {
+                include: { relation: 'user' },
             },
-            {
-                relation: 'worker',
-                scope: {
-                    include: { relation: 'user' },
-                },
-            },
-        ],
-    };
-    const options = { params: { filter } };
-    const { data } = await axios.get(`Claims/${entityId.value}`, options);
-
-    if (data) claim.value = data;
-}
+        },
+    ],
+};
 
 function stateColor(code) {
     if (code === 'pending') return 'green';
@@ -59,40 +47,56 @@ function stateColor(code) {
 </script>
 
 <template>
-    <skeleton-descriptor v-if="!claim" />
-    <card-descriptor v-if="claim" module="Claim" :data="claim" :description="claim.client.name">
-        <template #menu>
-            <claim-descriptor-menu v-if="claim" :claim="claim" />
+    <card-descriptor
+        ref="descriptor"
+        :url="`Claims/${entityId}`"
+        :filter="filter"
+        module="Claim"
+    >
+        <template #menu="{ entity }">
+            <claim-descriptor-menu :claim="entity" />
         </template>
-        <template #body>
+        <template #description="{ entity }">
+            <span>
+                {{ entity.client.name }}
+                <q-tooltip>{{ entity.client.name }}</q-tooltip>
+            </span>
+        </template>
+        <template #body="{ entity }">
             <q-list>
                 <q-item>
                     <q-item-section>
                         <q-item-label caption>{{ t('claim.card.created') }}</q-item-label>
-                        <q-item-label>{{ toDate(claim.created) }}</q-item-label>
+                        <q-item-label>{{ toDate(entity.created) }}</q-item-label>
                     </q-item-section>
-                    <q-item-section>
+                    <q-item-section v-if="entity.claimState">
                         <q-item-label caption>{{ t('claim.card.state') }}</q-item-label>
                         <q-item-label>
-                            <q-chip :color="stateColor(claim.claimState.code)" dense>
-                                {{ claim.claimState.description }}
+                            <q-chip :color="stateColor(entity.claimState.code)" dense>
+                                {{ entity.claimState.description }}
                             </q-chip>
                         </q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption>{{ t('claim.card.ticketId') }}</q-item-label>
-                        <q-item-label class="link">
-                            {{ claim.ticketFk }}
-                            <q-popup-proxy>
-                                <ticket-descriptor-popover :id="claim.ticketFk" />
-                            </q-popup-proxy>
+                        <q-item-label caption>
+                            {{ t('claim.card.ticketId') }}
+                        </q-item-label>
+                        <q-item-label>
+                            <span class="link">
+                                {{ entity.ticketFk }}
+                                <q-popup-proxy>
+                                    <ticket-descriptor-popover :id="entity.ticketFk" />
+                                </q-popup-proxy>
+                            </span>
                         </q-item-label>
                     </q-item-section>
-                    <q-item-section>
-                        <q-item-label caption>{{ t('claim.card.assignedTo') }}</q-item-label>
-                        <q-item-label>{{ claim.worker.user.name }}</q-item-label>
+                    <q-item-section v-if="entity.worker">
+                        <q-item-label caption>
+                            {{ t('claim.card.assignedTo') }}
+                        </q-item-label>
+                        <q-item-label>{{ entity.worker.user.name }}</q-item-label>
                     </q-item-section>
                 </q-item>
             </q-list>
@@ -102,7 +106,7 @@ function stateColor(code) {
                     size="md"
                     icon="vn:client"
                     color="primary"
-                    :to="{ name: 'CustomerCard', params: { id: claim.clientFk } }"
+                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
                 >
                     <q-tooltip>{{ t('claim.card.customerSummary') }}</q-tooltip>
                 </q-btn>
@@ -110,7 +114,7 @@ function stateColor(code) {
                     size="md"
                     icon="vn:ticket"
                     color="primary"
-                    :to="{ name: 'TicketCard', params: { id: claim.ticketFk } }"
+                    :to="{ name: 'TicketCard', params: { id: entity.ticketFk } }"
                 >
                     <q-tooltip>{{ t('claim.card.claimedTicket') }}</q-tooltip>
                 </q-btn>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 7c6eeb6d7..139e39bed 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -1,12 +1,9 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import axios from 'axios';
 import { toDate, toCurrency } from 'src/filters';
-import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
-
-onMounted(() => fetch());
+import CardSummary from 'components/ui/CardSummary.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -20,16 +17,6 @@ const $props = defineProps({
 
 const entityId = computed(() => $props.id || route.params.id);
 
-const claim = ref(null);
-const salesClaimed = ref(null);
-function fetch() {
-    const id = entityId.value;
-    axios.get(`Claims/${id}/getSummary`).then(({ data }) => {
-        claim.value = data.claim;
-        salesClaimed.value = data.salesClaimed;
-    });
-}
-
 const detailsColumns = ref([
     {
         name: 'item',
@@ -77,7 +64,8 @@ const detailsColumns = ref([
     {
         name: 'total',
         label: 'claim.summary.total',
-        field: ({ sale }) => toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
+        field: ({ sale }) =>
+            toCurrency(sale.quantity * sale.price * ((100 - sale.discount) / 100)),
         sortable: true,
     },
 ]);
@@ -90,110 +78,129 @@ function stateColor(code) {
 </script>
 
 <template>
-    <div class="summary container">
-        <q-card>
-            <skeleton-summary v-if="!claim" />
-            <template v-if="claim">
-                <div class="header bg-primary q-pa-sm q-mb-md">{{ claim.id }} - {{ claim.client.name }}</div>
-                <q-list>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.summary.created') }}</q-item-label>
-                            <q-item-label>{{ toDate(claim.created) }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.summary.state') }}</q-item-label>
-                            <q-item-label>
-                                <q-chip :color="stateColor(claim.claimState.code)" dense>
-                                    {{ claim.claimState.description }}
-                                </q-chip>
-                            </q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.summary.assignedTo') }}</q-item-label>
-                            <q-item-label>{{ claim.worker.user.nickname }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('claim.summary.attendedBy') }}</q-item-label>
-                            <q-item-label>{{ claim.client.salesPersonUser.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-                <q-card-section class="q-pa-md">
-                    <h6>{{ t('claim.summary.details') }}</h6>
-                    <q-table :columns="detailsColumns" :rows="salesClaimed" flat>
-                        <template #header="props">
-                            <q-tr :props="props">
-                                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                                    {{ t(col.label) }}
-                                </q-th>
-                            </q-tr>
-                        </template>
-                    </q-table>
-                </q-card-section>
-                <q-card-section class="q-pa-md">
-                    <h6>{{ t('claim.summary.actions') }}</h6>
-                    <q-separator />
-                    <div id="slider-container">
-                        <q-slider
-                            v-model="claim.responsibility"
-                            label
-                            :label-value="t('claim.summary.responsibility')"
-                            label-always
-                            color="primary"
-                            markers
-                            :marker-labels="[
-                                { value: 1, label: t('claim.summary.company') },
-                                { value: 5, label: t('claim.summary.person') },
-                            ]"
-                            :min="1"
-                            :max="5"
-                            readonly
-                        />
-                    </div>
-                </q-card-section>
-            </template>
-        </q-card>
-    </div>
+    <card-summary ref="summary" :url="`Claims/${entityId}/getSummary`">
+        <template #header="{ entity: { claim } }">
+            {{ claim.id }} - {{ claim.client.name }}
+        </template>
+        <template #body="{ entity: { claim, salesClaimed } }">
+            <q-card-section class="row q-pa-none q-col-gutter-md">
+                <div class="col">
+                    <q-list>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('claim.summary.created') }}
+                                </q-item-label>
+                                <q-item-label>{{ toDate(claim.created) }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section v-if="claim.claimState">
+                                <q-item-label caption>{{
+                                    t('claim.summary.state')
+                                }}</q-item-label>
+                                <q-item-label>
+                                    <q-chip
+                                        :color="stateColor(claim.claimState.code)"
+                                        dense
+                                    >
+                                        {{ claim.claimState.description }}
+                                    </q-chip>
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section v-if="claim.worker && claim.worker.user">
+                                <q-item-label caption>{{
+                                    t('claim.summary.assignedTo')
+                                }}</q-item-label>
+                                <q-item-label>{{
+                                    claim.worker.user.nickname
+                                }}</q-item-label>
+                            </q-item-section>
+                            <q-item-section
+                                v-if="claim.client && claim.client.salesPersonUser"
+                            >
+                                <q-item-label caption>{{
+                                    t('claim.summary.attendedBy')
+                                }}</q-item-label>
+                                <q-item-label>{{
+                                    claim.client.salesPersonUser.name
+                                }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </div>
+            </q-card-section>
+            <q-card-section class="q-pa-md">
+                <h6>{{ t('claim.summary.details') }}</h6>
+                <q-table :columns="detailsColumns" :rows="salesClaimed" flat>
+                    <template #header="props">
+                        <q-tr :props="props">
+                            <q-th
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                            >
+                                {{ t(col.label) }}
+                            </q-th>
+                        </q-tr>
+                    </template>
+                </q-table>
+            </q-card-section>
+            <q-card-section class="q-pa-md">
+                <h6>{{ t('claim.summary.actions') }}</h6>
+                <q-separator />
+                <div id="slider-container">
+                    <q-slider
+                        v-model="claim.responsibility"
+                        label
+                        :label-value="t('claim.summary.responsibility')"
+                        label-always
+                        color="primary"
+                        markers
+                        :marker-labels="[
+                            { value: 1, label: t('claim.summary.company') },
+                            { value: 5, label: t('claim.summary.person') },
+                        ]"
+                        :min="1"
+                        :max="5"
+                        readonly
+                    />
+                </div>
+            </q-card-section>
+        </template>
+    </card-summary>
 </template>
 
 <style lang="scss" scoped>
-.container {
-    display: flex;
-    justify-content: center;
-}
+// .container {
+//     display: flex;
+//     justify-content: center;
+// }
 
-.q-card {
-    width: 100%;
-    max-width: 950px;
-}
+// .q-card {
+//     width: 100%;
+//     max-width: 950px;
+// }
 
-.summary {
-    .header {
-        text-align: center;
-        font-size: 18px;
-    }
+// .summary {
+//     #slider-container {
+//         max-width: 80%;
+//         margin: 0 auto;
 
-    #slider-container {
-        max-width: 80%;
-        margin: 0 auto;
+//         .q-slider {
+//             .q-slider__marker-labels:nth-child(1) {
+//                 transform: none;
+//             }
+//             .q-slider__marker-labels:nth-child(2) {
+//                 transform: none;
+//                 left: auto !important;
+//                 right: 0%;
+//             }
+//         }
+//     }
+// }
 
-        .q-slider {
-            .q-slider__marker-labels:nth-child(1) {
-                transform: none;
-            }
-            .q-slider__marker-labels:nth-child(2) {
-                transform: none;
-                left: auto !important;
-                right: 0%;
-            }
-        }
-    }
-}
-
-.q-dialog .summary {
-    max-width: 1200px;
-}
+// .q-dialog .summary {
+//     max-width: 1200px;
+// }
 </style>
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 68f239e35..f3be46a7c 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -9,7 +9,7 @@ const $props = defineProps({
     id: {
         type: Number,
         required: false,
-        default: 0,
+        default: null,
     },
 });
 
@@ -17,56 +17,90 @@ const route = useRoute();
 const { t } = useI18n();
 
 const entityId = computed(() => {
-    return $props.id || Number(route.params.id);
+    return $props.id || route.params.id;
 });
 </script>
 
 <template>
-    <card-descriptor ref="descriptor" :id="entityId" module="Customer">
-        <!-- <template #menu>
-            <q-item clickable v-ripple>Option 1</q-item>
-            <q-item clickable v-ripple>Option 2</q-item>
-        </template> -->
+    <card-descriptor module="Customer" :url="`Clients/${entityId}/getCard`">
         <template #body="{ entity }">
             <q-list>
                 <q-item v-if="entity.salesPersonUser">
                     <q-item-section>
-                        <q-item-label caption>{{ t('customer.card.salesPerson') }}</q-item-label>
-                        <q-item-label>{{ entity.salesPersonUser.name }}</q-item-label>
+                        <q-item-label caption>{{
+                            t('customer.card.salesPerson')
+                        }}</q-item-label>
+                        <q-item-label>
+                            {{ entity.salesPersonUser.name }}
+                        </q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption>{{ t('customer.card.credit') }}</q-item-label>
-                        <q-item-label>{{ toCurrency(entity.credit) }}</q-item-label>
+                        <q-item-label caption>
+                            {{ t('customer.card.credit') }}
+                        </q-item-label>
+                        <q-item-label>
+                            {{ toCurrency(entity.credit) }}
+                        </q-item-label>
                     </q-item-section>
                     <q-item-section>
-                        <q-item-label caption>{{ t('customer.card.securedCredit') }}</q-item-label>
-                        <q-item-label>{{ toCurrency(entity.creditInsurance) }}</q-item-label>
+                        <q-item-label caption>{{
+                            t('customer.card.securedCredit')
+                        }}</q-item-label>
+                        <q-item-label>
+                            {{ toCurrency(entity.creditInsurance) }}
+                        </q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section v-if="entity.payMethod">
-                        <q-item-label caption>{{ t('customer.card.payMethod') }}</q-item-label>
-                        <q-item-label>{{ entity.payMethod.name }}</q-item-label>
+                        <q-item-label caption>{{
+                            t('customer.card.payMethod')
+                        }}</q-item-label>
+                        <q-item-label>
+                            {{ entity.payMethod.name }}
+                        </q-item-label>
                     </q-item-section>
                     <q-item-section>
                         <q-item-label caption>{{ t('customer.card.debt') }}</q-item-label>
-                        <q-item-label>{{ toCurrency(entity.debt) }}</q-item-label>
+                        <q-item-label>
+                            {{ toCurrency(entity.debt) }}
+                        </q-item-label>
                     </q-item-section>
                 </q-item>
             </q-list>
             <q-card-actions class="q-gutter-md">
-                <q-icon v-if="entity.isActive == false" name="vn:disabled" size="xs" color="primary">
+                <q-icon
+                    v-if="entity.isActive == false"
+                    name="vn:disabled"
+                    size="xs"
+                    color="primary"
+                >
                     <q-tooltip>{{ t('customer.card.isDisabled') }}</q-tooltip>
                 </q-icon>
-                <q-icon v-if="entity.isFreezed == true" name="vn:frozen" size="xs" color="primary">
+                <q-icon
+                    v-if="entity.isFreezed == true"
+                    name="vn:frozen"
+                    size="xs"
+                    color="primary"
+                >
                     <q-tooltip>{{ t('customer.card.isFrozen') }}</q-tooltip>
                 </q-icon>
-                <q-icon v-if="entity.debt > entity.credit" name="vn:risk" size="xs" color="primary">
+                <q-icon
+                    v-if="entity.debt > entity.credit"
+                    name="vn:risk"
+                    size="xs"
+                    color="primary"
+                >
                     <q-tooltip>{{ t('customer.card.hasDebt') }}</q-tooltip>
                 </q-icon>
-                <q-icon v-if="entity.isTaxDataChecked == false" name="vn:no036" size="xs" color="primary">
+                <q-icon
+                    v-if="entity.isTaxDataChecked == false"
+                    name="vn:no036"
+                    size="xs"
+                    color="primary"
+                >
                     <q-tooltip>{{ t('customer.card.notChecked') }}</q-tooltip>
                 </q-icon>
                 <q-icon
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 27d104092..865bc47b2 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -15,7 +15,7 @@ const $props = defineProps({
     },
 });
 
-const entityId = computed(() => Number($props.id) || Number(route.params.id));
+const entityId = computed(() => $props.id || route.params.id);
 const summary = ref();
 const customer = computed(() => summary.value.entity);
 
@@ -51,463 +51,474 @@ const creditWarning = computed(() => {
 </script>
 
 <template>
-    <card-summary ref="summary" :id="entityId">
+    <card-summary ref="summary" :url="`Clients/${entityId}/summary`">
         <template #body="{ entity }">
-            <div class="col">
-                <q-list>
-                    <q-item-label header class="text-h6">
-                        {{ t('customer.summary.basicData') }}
-                        <router-link
-                            :to="{ name: 'CustomerBasicData', params: { id: entityId } }"
-                            target="_blank"
-                        >
-                            <q-icon name="open_in_new" />
-                        </router-link>
-                    </q-item-label>
+            <q-card-section class="row q-pa-none q-col-gutter-md">
+                <div class="col">
+                    <q-list>
+                        <q-item-label header class="text-h6">
+                            {{ t('customer.summary.basicData') }}
+                            <router-link
+                                :to="{
+                                    name: 'CustomerBasicData',
+                                    params: { id: entity.id },
+                                }"
+                                target="_blank"
+                            >
+                                <q-icon name="open_in_new" />
+                            </router-link>
+                        </q-item-label>
 
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.customerId')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.id }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.name')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.contact')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.contact }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.salesPersonUser">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.salesPerson')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.salesPersonUser.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.phone')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.phone }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.mobile')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.mobile }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.email')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.email }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.contactChannel">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.contactChannel')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.contactChannel.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-            </div>
-            <div class="col">
-                <q-list>
-                    <q-item-label header class="text-h6">
-                        {{ t('customer.summary.fiscalAddress') }}
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.socialName')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.socialName }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.fiscalId')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.fi }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.postcode')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.postcode }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.province">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.province')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.province.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.country">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.country')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.country.country }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.street')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.street }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-            </div>
-            <div class="col">
-                <q-list>
-                    <q-item-label header class="text-h6">
-                        {{ t('customer.summary.fiscalData') }}
-                    </q-item-label>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.isEqualizated"
-                            :label="t('customer.summary.isEqualizated')"
-                            disable
-                        />
-                    </q-item>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.isActive"
-                            :label="t('customer.summary.isActive')"
-                            disable
-                        />
-                    </q-item>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.hasToInvoiceByAddress"
-                            :label="t('customer.summary.invoiceByAddress')"
-                            disable
-                        />
-                    </q-item>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.isTaxDataChecked"
-                            :label="t('customer.summary.verifiedData')"
-                            disable
-                        />
-                    </q-item>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.hasToInvoice"
-                            :label="t('customer.summary.hasToInvoice')"
-                            disable
-                        />
-                    </q-item>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.isToBeMailed"
-                            :label="t('customer.summary.notifyByEmail')"
-                            disable
-                        />
-                    </q-item>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.isVies"
-                            :label="t('customer.summary.vies')"
-                            disable
-                        />
-                    </q-item>
-                </q-list>
-            </div>
-            <div class="col">
-                <q-list>
-                    <q-item-label header class="text-h6">
-                        {{ t('customer.summary.billingData') }}
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.payMethod')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.payMethod.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.bankAccount')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.iban }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.dueDay')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.dueDay }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.hasLcr"
-                            :label="t('customer.summary.hasLcr')"
-                            disable
-                        />
-                    </q-item>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.hasCoreVnl"
-                            :label="t('customer.summary.hasCoreVnl')"
-                            disable
-                        />
-                    </q-item>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.hasSepaVnl"
-                            :label="t('customer.summary.hasB2BVnl')"
-                            disable
-                        />
-                    </q-item>
-                </q-list>
-            </div>
-            <div class="col" v-if="entity.defaultAddress">
-                <q-list>
-                    <q-item-label header class="text-h6">
-                        {{ t('customer.summary.consignee') }}
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.addressName')
-                            }}</q-item-label>
-                            <q-item-label>{{
-                                entity.defaultAddress.nickname
-                            }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.addressCity')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.defaultAddress.city }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.addressStreet')
-                            }}</q-item-label>
-                            <q-item-label>{{
-                                entity.defaultAddress.street
-                            }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-            </div>
-            <div class="col" v-if="entity.account">
-                <q-list>
-                    <q-item-label header class="text-h6">
-                        {{ t('customer.summary.webAccess') }}
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.username')
-                            }}</q-item-label>
-                            <q-item-label>{{ entity.account.name }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item dense>
-                        <q-checkbox
-                            v-model="entity.account.active"
-                            :label="t('customer.summary.webAccess')"
-                            disable
-                        />
-                    </q-item>
-                </q-list>
-            </div>
-            <div class="col">
-                <q-list>
-                    <q-item-label header class="text-h6">
-                        {{ t('customer.summary.businessData') }}
-                    </q-item-label>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.totalGreuge')
-                            }}</q-item-label>
-                            <q-item-label>{{
-                                toCurrency(entity.totalGreuge)
-                            }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.mana">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.mana')
-                            }}</q-item-label>
-                            <q-item-label>{{
-                                toCurrency(entity.mana.mana)
-                            }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.claimsRatio">
-                        <q-item-section>
-                            <q-item-label caption>
-                                {{ t('customer.summary.priceIncreasingRate') }}
-                            </q-item-label>
-                            <q-item-label>{{
-                                toPercentage(priceIncreasingRate)
-                            }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.averageInvoiced">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.averageInvoiced')
-                            }}</q-item-label>
-                            <q-item-label>{{
-                                toCurrency(entity.averageInvoiced.invoiced)
-                            }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.claimsRatio">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.claimRate')
-                            }}</q-item-label>
-                            <q-item-label>{{ toPercentage(claimRate) }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-            </div>
-            <div class="col">
-                <q-list>
-                    <q-item-label header class="text-h6">
-                        {{ t('customer.summary.financialData') }}
-                    </q-item-label>
-                    <q-item v-if="entity.debt">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.risk')
-                            }}</q-item-label>
-                            <q-item-label :class="debtWarning">
-                                {{ toCurrency(entity.debt.debt) }}
-                            </q-item-label>
-                        </q-item-section>
-                        <q-item-section side>
-                            <q-icon name="vn:info">
-                                <q-tooltip>{{
-                                    t('customer.summary.riskInfo')
-                                }}</q-tooltip>
-                            </q-icon>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.credit')
-                            }}</q-item-label>
-                            <q-item-label :class="creditWarning">
-                                {{ toCurrency(entity.credit) }}
-                            </q-item-label>
-                        </q-item-section>
-                        <q-item-section side>
-                            <q-icon name="vn:info">
-                                <q-tooltip>{{
-                                    t('customer.summary.creditInfo')
-                                }}</q-tooltip>
-                            </q-icon>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.creditInsurance">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.securedCredit')
-                            }}</q-item-label>
-                            <q-item-label>{{
-                                toCurrency(entity.creditInsurance)
-                            }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section side>
-                            <q-icon name="vn:info">
-                                <q-tooltip>{{
-                                    t('customer.summary.securedCreditInfo')
-                                }}</q-tooltip>
-                            </q-icon>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.balance')
-                            }}</q-item-label>
-                            <q-item-label>{{
-                                toCurrency(entity.sumRisk) || toCurrency(0)
-                            }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section side>
-                            <q-icon name="vn:info">
-                                <q-tooltip>{{
-                                    t('customer.summary.balanceInfo')
-                                }}</q-tooltip>
-                            </q-icon>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.defaulters">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.balanceDue')
-                            }}</q-item-label>
-                            <q-item-label :class="balanceDueWarning">
-                                {{ toCurrency(balanceDue) }}
-                            </q-item-label>
-                        </q-item-section>
-                        <q-item-section side>
-                            <q-icon name="vn:info">
-                                <q-tooltip>{{
-                                    t('customer.summary.balanceDueInfo')
-                                }}</q-tooltip>
-                            </q-icon>
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="entity.recovery">
-                        <q-item-section>
-                            <q-item-label caption>{{
-                                t('customer.summary.recoverySince')
-                            }}</q-item-label>
-                            <q-item-label>{{
-                                toDate(entity.recovery.started)
-                            }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-            </div>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.customerId') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.id }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.name') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.name }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.contact') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.contact }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.salesPersonUser">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.salesPerson') }}
+                                </q-item-label>
+                                <q-item-label>{{
+                                    entity.salesPersonUser.name
+                                }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.phone') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.phone }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.mobile') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.mobile }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.email') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.email }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.contactChannel">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.contactChannel') }}
+                                </q-item-label>
+                                <q-item-label>{{
+                                    entity.contactChannel.name
+                                }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </div>
+                <div class="col">
+                    <q-list>
+                        <q-item-label header class="text-h6">
+                            {{ t('customer.summary.fiscalAddress') }}
+                        </q-item-label>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.socialName') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.socialName }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.fiscalId') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.fi }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.postcode') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.postcode }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.province">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.province') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.province.name }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.country">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.country') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.country.country }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.street') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.street }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </div>
+                <div class="col">
+                    <q-list>
+                        <q-item-label header class="text-h6">
+                            {{ t('customer.summary.fiscalData') }}
+                        </q-item-label>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.isEqualizated"
+                                :label="t('customer.summary.isEqualizated')"
+                                disable
+                            />
+                        </q-item>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.isActive"
+                                :label="t('customer.summary.isActive')"
+                                disable
+                            />
+                        </q-item>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.hasToInvoiceByAddress"
+                                :label="t('customer.summary.invoiceByAddress')"
+                                disable
+                            />
+                        </q-item>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.isTaxDataChecked"
+                                :label="t('customer.summary.verifiedData')"
+                                disable
+                            />
+                        </q-item>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.hasToInvoice"
+                                :label="t('customer.summary.hasToInvoice')"
+                                disable
+                            />
+                        </q-item>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.isToBeMailed"
+                                :label="t('customer.summary.notifyByEmail')"
+                                disable
+                            />
+                        </q-item>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.isVies"
+                                :label="t('customer.summary.vies')"
+                                disable
+                            />
+                        </q-item>
+                    </q-list>
+                </div>
+                <div class="col">
+                    <q-list>
+                        <q-item-label header class="text-h6">
+                            {{ t('customer.summary.billingData') }}
+                        </q-item-label>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.payMethod') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.payMethod.name }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.bankAccount') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.iban }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.dueDay') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.dueDay }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.hasLcr"
+                                :label="t('customer.summary.hasLcr')"
+                                disable
+                            />
+                        </q-item>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.hasCoreVnl"
+                                :label="t('customer.summary.hasCoreVnl')"
+                                disable
+                            />
+                        </q-item>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.hasSepaVnl"
+                                :label="t('customer.summary.hasB2BVnl')"
+                                disable
+                            />
+                        </q-item>
+                    </q-list>
+                </div>
+                <div class="col" v-if="entity.defaultAddress">
+                    <q-list>
+                        <q-item-label header class="text-h6">
+                            {{ t('customer.summary.consignee') }}
+                        </q-item-label>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.addressName') }}
+                                </q-item-label>
+                                <q-item-label>
+                                    {{ entity.defaultAddress.nickname }}
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.addressCity') }}
+                                </q-item-label>
+                                <q-item-label>{{
+                                    entity.defaultAddress.city
+                                }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.addressStreet') }}
+                                </q-item-label>
+                                <q-item-label>
+                                    {{ entity.defaultAddress.street }}
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </div>
+                <div class="col" v-if="entity.account">
+                    <q-list>
+                        <q-item-label header class="text-h6">
+                            {{ t('customer.summary.webAccess') }}
+                        </q-item-label>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.username') }}
+                                </q-item-label>
+                                <q-item-label>{{ entity.account.name }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item dense>
+                            <q-checkbox
+                                v-model="entity.account.active"
+                                :label="t('customer.summary.webAccess')"
+                                disable
+                            />
+                        </q-item>
+                    </q-list>
+                </div>
+                <div class="col">
+                    <q-list>
+                        <q-item-label header class="text-h6">
+                            {{ t('customer.summary.businessData') }}
+                        </q-item-label>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.totalGreuge') }}
+                                </q-item-label>
+                                <q-item-label>
+                                    {{ toCurrency(entity.totalGreuge) }}
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.mana">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.mana') }}
+                                </q-item-label>
+                                <q-item-label>
+                                    {{ toCurrency(entity.mana.mana) }}
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.claimsRatio">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.priceIncreasingRate') }}
+                                </q-item-label>
+                                <q-item-label>
+                                    {{ toPercentage(priceIncreasingRate) }}
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.averageInvoiced">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.averageInvoiced') }}
+                                </q-item-label>
+                                <q-item-label>
+                                    {{ toCurrency(entity.averageInvoiced.invoiced) }}
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.claimsRatio">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.claimRate') }}
+                                </q-item-label>
+                                <q-item-label>{{ toPercentage(claimRate) }}</q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </div>
+                <div class="col">
+                    <q-list>
+                        <q-item-label header class="text-h6">
+                            {{ t('customer.summary.financialData') }}
+                        </q-item-label>
+                        <q-item v-if="entity.debt">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.risk') }}
+                                </q-item-label>
+                                <q-item-label :class="debtWarning">
+                                    {{ toCurrency(entity.debt.debt) }}
+                                </q-item-label>
+                            </q-item-section>
+                            <q-item-section side>
+                                <q-icon name="vn:info">
+                                    <q-tooltip>
+                                        {{ t('customer.summary.riskInfo') }}
+                                    </q-tooltip>
+                                </q-icon>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.credit') }}
+                                </q-item-label>
+                                <q-item-label :class="creditWarning">
+                                    {{ toCurrency(entity.credit) }}
+                                </q-item-label>
+                            </q-item-section>
+                            <q-item-section side>
+                                <q-icon name="vn:info">
+                                    <q-tooltip>
+                                        {{ t('customer.summary.creditInfo') }}
+                                    </q-tooltip>
+                                </q-icon>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.creditInsurance">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.securedCredit') }}
+                                </q-item-label>
+                                <q-item-label>
+                                    {{ toCurrency(entity.creditInsurance) }}
+                                </q-item-label>
+                            </q-item-section>
+                            <q-item-section side>
+                                <q-icon name="vn:info">
+                                    <q-tooltip>
+                                        {{ t('customer.summary.securedCreditInfo') }}
+                                    </q-tooltip>
+                                </q-icon>
+                            </q-item-section>
+                        </q-item>
+                        <q-item>
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.balance') }}
+                                </q-item-label>
+                                <q-item-label>
+                                    {{ toCurrency(entity.sumRisk) || toCurrency(0) }}
+                                </q-item-label>
+                            </q-item-section>
+                            <q-item-section side>
+                                <q-icon name="vn:info">
+                                    <q-tooltip>
+                                        {{ t('customer.summary.balanceInfo') }}
+                                    </q-tooltip>
+                                </q-icon>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.defaulters">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.balanceDue') }}
+                                </q-item-label>
+                                <q-item-label :class="balanceDueWarning">
+                                    {{ toCurrency(balanceDue) }}
+                                </q-item-label>
+                            </q-item-section>
+                            <q-item-section side>
+                                <q-icon name="vn:info">
+                                    <q-tooltip>
+                                        {{ t('customer.summary.balanceDueInfo') }}
+                                    </q-tooltip>
+                                </q-icon>
+                            </q-item-section>
+                        </q-item>
+                        <q-item v-if="entity.recovery">
+                            <q-item-section>
+                                <q-item-label caption>
+                                    {{ t('customer.summary.recoverySince') }}
+                                </q-item-label>
+                                <q-item-label>
+                                    {{ toDate(entity.recovery.started) }}
+                                </q-item-label>
+                            </q-item-section>
+                        </q-item>
+                    </q-list>
+                </div>
+            </q-card-section>
         </template>
     </card-summary>
 </template>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
index d26801582..31252f3e3 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutDescriptor.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency, toDate } from 'src/filters';
-import axios from 'axios';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
 
@@ -15,86 +14,104 @@ const $props = defineProps({
     },
 });
 
-onMounted(async () => {
-    await fetch();
-});
-
 const route = useRoute();
 const { t } = useI18n();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
+const descriptor = ref();
 
-const invoiceOut = ref();
-async function fetch() {
-    const filter = {
-        include: [
-            {
-                relation: 'company',
-                scope: {
-                    fields: ['id', 'code'],
-                },
+const filter = {
+    include: [
+        {
+            relation: 'company',
+            scope: {
+                fields: ['id', 'code'],
             },
-            {
-                relation: 'client',
-                scope: {
-                    fields: ['id', 'name', 'email'],
-                },
+        },
+        {
+            relation: 'client',
+            scope: {
+                fields: ['id', 'name', 'email'],
             },
-        ],
-    };
+        },
+    ],
+};
 
-    const options = { params: { filter } };
-    const { data } = await axios.get(`InvoiceOuts/${entityId.value}`, options);
-    if (data) invoiceOut.value = data;
+function ticketFilter(invoice) {
+    return JSON.stringify({ refFk: invoice.ref });
 }
-
-const filter = computed(() => {
-    return invoiceOut.value ? JSON.stringify({ refFk: invoiceOut.value.ref }) : null;
-});
 </script>
 
 <template>
-    <card-descriptor v-if="invoiceOut" module="InvoiceOut" :data="invoiceOut" :description="invoiceOut.ref">
-        <template #body>
+    <card-descriptor
+        ref="descriptor"
+        module="InvoiceOut"
+        :url="`InvoiceOuts/${entityId}`"
+        :filter="filter"
+    >
+        <template #description="{ entity }">
+            <span>
+                {{ entity.ref }}
+                <q-tooltip>{{ entity.ref }}</q-tooltip>
+            </span>
+        </template>
+        <template #body="{ entity }">
             <q-list>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption>{{ t('invoiceOut.card.issued') }}</q-item-label>
-                        <q-item-label>{{ toDate(invoiceOut.issued) }}</q-item-label>
+                        <q-item-label caption>
+                            {{ t('invoiceOut.card.issued') }}
+                        </q-item-label>
+                        <q-item-label>{{ toDate(entity.issued) }}</q-item-label>
                     </q-item-section>
                     <q-item-section>
-                        <q-item-label caption>{{ t('invoiceOut.card.amount') }}</q-item-label>
-                        <q-item-label>{{ toCurrency(invoiceOut.amount) }}</q-item-label>
+                        <q-item-label caption>
+                            {{ t('invoiceOut.card.amount') }}
+                        </q-item-label>
+                        <q-item-label>{{ toCurrency(entity.amount) }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section v-if="invoiceOut.company">
-                        <q-item-label caption>{{ t('invoiceOut.card.client') }}</q-item-label>
+                    <q-item-section v-if="entity.client">
+                        <q-item-label caption>
+                            {{ t('invoiceOut.card.client') }}
+                        </q-item-label>
                         <q-item-label class="link">
-                            {{ invoiceOut.client.name }}
+                            {{ entity.client.name }}
                             <q-popup-proxy>
-                                <customer-descriptor-popover :id="invoiceOut.client.id" />
+                                <customer-descriptor-popover :id="entity.client.id" />
                             </q-popup-proxy>
                         </q-item-label>
                     </q-item-section>
-                    <q-item-section v-if="invoiceOut.company">
-                        <q-item-label caption>{{ t('invoiceOut.card.company') }}</q-item-label>
-                        <q-item-label>{{ invoiceOut.company.code }}</q-item-label>
+                    <q-item-section v-if="entity.company">
+                        <q-item-label caption>{{
+                            t('invoiceOut.card.company')
+                        }}</q-item-label>
+                        <q-item-label>{{ entity.company.code }}</q-item-label>
                     </q-item-section>
                 </q-item>
             </q-list>
             <q-card-actions>
                 <q-btn
+                    v-if="entity.client"
                     size="md"
                     icon="vn:client"
                     color="primary"
-                    :to="{ name: 'CustomerCard', params: { id: invoiceOut.client.id } }"
+                    :to="{ name: 'CustomerCard', params: { id: entity.client.id } }"
                 >
                     <q-tooltip>{{ t('invoiceOut.card.customerCard') }}</q-tooltip>
                 </q-btn>
-                <q-btn size="md" icon="vn:ticket" color="primary" :to="{ name: 'TicketList', params: { q: filter } }">
+                <q-btn
+                    size="md"
+                    icon="vn:ticket"
+                    color="primary"
+                    :to="{
+                        name: 'TicketList',
+                        query: { q: ticketFilter(entity) },
+                    }"
+                >
                     <q-tooltip>{{ t('invoiceOut.card.ticketList') }}</q-tooltip>
                 </q-btn>
             </q-card-actions>
diff --git a/src/pages/Ticket/Card/TicketDescriptor.vue b/src/pages/Ticket/Card/TicketDescriptor.vue
index 79c6fd122..bf9c76fde 100644
--- a/src/pages/Ticket/Card/TicketDescriptor.vue
+++ b/src/pages/Ticket/Card/TicketDescriptor.vue
@@ -1,12 +1,10 @@
 <script setup>
-import { onMounted, computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toDate } from 'src/filters';
-import axios from 'axios';
 import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 
 const $props = defineProps({
     id: {
@@ -16,10 +14,6 @@ const $props = defineProps({
     },
 });
 
-onMounted(async () => {
-    await fetch();
-});
-
 const route = useRoute();
 const { t } = useI18n();
 
@@ -27,12 +21,35 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const ticket = ref();
-async function fetch() {
-    const { data } = await axios.get(`Tickets/${entityId.value}/summary`);
-
-    if (data) ticket.value = data;
-}
+const filter = {
+    include: [
+        {
+            relation: 'client',
+            scope: {
+                fields: ['id', 'name', 'salesPersonFk'],
+                include: { relation: 'salesPersonUser' },
+            },
+        },
+        {
+            relation: 'ticketState',
+            scope: {
+                include: { relation: 'state' },
+            },
+        },
+        {
+            relation: 'warehouse',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'agencyMode',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+};
 
 function stateColor(state) {
     if (state.code === 'OK') return 'text-green';
@@ -43,55 +60,64 @@ function stateColor(state) {
 </script>
 
 <template>
-    <skeleton-descriptor v-if="!ticket" />
-    <card-descriptor v-if="ticket" module="Ticket" :data="ticket" :description="ticket.client.name">
-        <!-- <template #menu>
-            <q-item clickable v-ripple>Option 1</q-item>
-            <q-item clickable v-ripple>Option 2</q-item>
-        </template> -->
-        <template #body>
+    <card-descriptor module="Ticket" :url="`Tickets/${entityId}`" :filter="filter">
+        <template #description="{ entity }">
+            <span>
+                {{ entity.client.name }}
+                <q-tooltip>{{ entity.client.name }}</q-tooltip>
+            </span>
+        </template>
+        <template #body="{ entity }">
             <q-list>
                 <q-item>
-                    <q-item-section>
-                        <q-item-label caption>{{ t('ticket.card.ticketId') }}</q-item-label>
-                        <q-item-label>#{{ ticket.id }}</q-item-label>
-                    </q-item-section>
-                    <q-item-section>
+                    <q-item-section v-if="entity.ticketState">
                         <q-item-label caption>{{ t('ticket.card.state') }}</q-item-label>
-                        <q-item-label :class="stateColor(ticket.ticketState.state)">
-                            {{ ticket.ticketState.state.name }}
+                        <q-item-label :class="stateColor(entity.ticketState.state)">
+                            {{ entity.ticketState.state.name }}
+                        </q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>
+                            {{ t('ticket.card.shipped') }}
+                        </q-item-label>
+                        <q-item-label>{{ toDate(entity.shipped) }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <q-item-label caption>
+                            {{ t('ticket.card.customerId') }}
+                        </q-item-label>
+                        <q-item-label>
+                            <span class="link">
+                                {{ entity.clientFk }}
+                                <q-popup-proxy>
+                                    <customer-descriptor-popover :id="entity.client.id" />
+                                </q-popup-proxy>
+                            </span>
+                        </q-item-label>
+                    </q-item-section>
+                    <q-item-section v-if="entity.client && entity.client.salesPersonUser">
+                        <q-item-label caption>
+                            {{ t('ticket.card.salesPerson') }}
+                        </q-item-label>
+                        <q-item-label>
+                            {{ entity.client.salesPersonUser.name }}
                         </q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section>
-                        <q-item-label caption>{{ t('ticket.card.customerId') }}</q-item-label>
-                        <q-item-label class="link">
-                            {{ ticket.clientFk }}
-                            <q-popup-proxy>
-                                <customer-descriptor-popover :id="ticket.client.id" />
-                            </q-popup-proxy>
+                    <q-item-section v-if="entity.warehouse">
+                        <q-item-label caption>
+                            {{ t('ticket.card.warehouse') }}
                         </q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label caption>{{ t('ticket.card.salesPerson') }}</q-item-label>
-                        <q-item-label>{{ ticket.client.salesPersonUser.name }}</q-item-label>
+                        <q-item-label>{{ entity.warehouse.name }}</q-item-label>
                     </q-item-section>
                 </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-item-label caption>{{ t('ticket.card.warehouse') }}</q-item-label>
-                        <q-item-label>{{ ticket.warehouse.name }}</q-item-label>
-                    </q-item-section>
-                    <q-item-section>
-                        <q-item-label caption>{{ t('ticket.card.shipped') }}</q-item-label>
-                        <q-item-label>{{ toDate(ticket.shipped) }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-                <q-item>
+                <q-item v-if="entity.agencyMode">
                     <q-item-section>
                         <q-item-label caption>{{ t('ticket.card.agency') }}</q-item-label>
-                        <q-item-label>{{ ticket.agencyMode.name }}</q-item-label>
+                        <q-item-label>{{ entity.agencyMode.name }}</q-item-label>
                     </q-item-section>
                 </q-item>
             </q-list>
@@ -101,7 +127,7 @@ function stateColor(state) {
                     size="md"
                     icon="vn:client"
                     color="primary"
-                    :to="{ name: 'CustomerCard', params: { id: ticket.clientFk } }"
+                    :to="{ name: 'CustomerCard', params: { id: entity.clientFk } }"
                 >
                     <q-tooltip>{{ t('ticket.card.customerCard') }}</q-tooltip>
                 </q-btn>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index f2cdb4c7a..111a1e957 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -29,6 +29,7 @@ const entityId = computed(() => $props.id || route.params.id);
 const ticket = ref();
 const salesLines = ref(null);
 const editableStates = ref([]);
+
 async function fetch() {
     const { data } = await axios.get(`Tickets/${entityId.value}/summary`);
     if (data) {