From 828aad23fccf49eff3d230c44e7a401a0dd518d2 Mon Sep 17 00:00:00 2001
From: Pau Navarro <pau@verdnatura.es>
Date: Mon, 9 Jan 2023 09:05:21 +0100
Subject: [PATCH 1/8] change gitignore to include cypress screenshots and
 videos

---
 .gitignore | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.gitignore b/.gitignore
index 06ff1aac6..213384ef5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,7 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+
+# Cypress directories and files
+/tests/cypress/videos
+/tests/cypress/screenshots
\ No newline at end of file

From a41d5dae3e735860c9f7a71aebddf6ccfbeee10f Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 24 Jan 2023 14:46:30 +0100
Subject: [PATCH 2/8] refactor(card): refresh data when state params changes
 refs: #4909

---
 src/components/ui/CardDescriptor.vue          | 68 +++++++++++--------
 .../Customer/Card/CustomerDescriptor.vue      | 53 ++++++---------
 2 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index d80c0498c..f905d58b0 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,23 +1,47 @@
 <script setup>
-import { useSlots } from 'vue';
+import { onMounted, useSlots, computed, ref, toRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import axios from 'axios';
+import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 
-defineProps({
+const props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
     module: {
         type: String,
         required: true,
     },
-    data: {
-        type: Object,
-        required: true,
-    },
     description: {
         type: String,
-        required: true,
+        required: false,
+        default: '',
     },
 });
+
 const slots = useSlots();
 const { t } = useI18n();
+
+onMounted(async () => {
+    await 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`);
+    entity.value = data;
+}
+
+watch(entityId, async () => {
+    entity.value = null;
+    await fetch();
+});
 </script>
 
 <template>
@@ -28,7 +52,7 @@ const { t } = useI18n();
                     <q-tooltip>{{ t('components.cardDescriptor.mainList') }}</q-tooltip>
                 </q-btn>
             </router-link>
-            <router-link :to="{ name: `${module}Summary`, params: { id: data.id } }">
+            <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>
@@ -43,37 +67,21 @@ const { t } = useI18n();
                 </q-menu>
             </q-btn>
         </div>
-
-        <div v-if="$props.data" class="body q-py-sm">
+        <div v-if="entity" class="body q-py-sm">
             <q-list>
                 <q-item-label header class="ellipsis text-h5" :lines="1">
-                    {{ $props.description }}
-                    <q-tooltip>{{ $props.description }}</q-tooltip>
+                    {{ description }}
+                    <q-tooltip>{{ description }}</q-tooltip>
                 </q-item-label>
                 <q-item dense>
-                    <q-item-label class="text-subtitle2" caption>#{{ data.id }}</q-item-label>
+                    <q-item-label class="text-subtitle2" caption>#{{ entity.id }}</q-item-label>
                 </q-item>
             </q-list>
-            <slot name="body" />
+            <slot name="body" :entity="entity" />
         </div>
 
         <!-- Skeleton -->
-        <div id="descriptor-skeleton" v-if="!$props.data">
-            <div class="col q-pl-sm q-pa-sm">
-                <q-skeleton type="text" square height="45px" />
-                <q-skeleton type="text" square height="18px" />
-                <q-skeleton type="text" square height="18px" />
-                <q-skeleton type="text" square height="18px" />
-            </div>
-
-            <q-card-actions>
-                <q-skeleton size="40px" />
-                <q-skeleton size="40px" />
-                <q-skeleton size="40px" />
-                <q-skeleton size="40px" />
-                <q-skeleton size="40px" />
-            </q-card-actions>
-        </div>
+        <skeleton-descriptor v-if="!entity" />
     </div>
 </template>
 
diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 778c5071d..68f239e35 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -1,89 +1,80 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency } from 'src/filters';
-import axios from 'axios';
 import CardDescriptor from 'components/ui/CardDescriptor.vue';
-import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 
 const $props = defineProps({
     id: {
         type: Number,
         required: false,
-        default: null,
+        default: 0,
     },
 });
 
-onMounted(async () => {
-    await fetch();
-});
-
 const route = useRoute();
 const { t } = useI18n();
 
 const entityId = computed(() => {
-    return $props.id || route.params.id;
+    return $props.id || Number(route.params.id);
 });
-
-const customer = ref();
-async function fetch() {
-    const { data } = await axios.get(`Clients/${entityId.value}/getCard`);
-
-    if (data) customer.value = data;
-}
 </script>
 
 <template>
-    <skeleton-descriptor v-if="!customer" />
-    <card-descriptor v-if="customer" module="Customer" :data="customer" :description="customer.name">
+    <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> -->
-        <template #body>
+        <template #body="{ entity }">
             <q-list>
-                <q-item v-if="customer.salesPersonUser">
+                <q-item v-if="entity.salesPersonUser">
                     <q-item-section>
                         <q-item-label caption>{{ t('customer.card.salesPerson') }}</q-item-label>
-                        <q-item-label>{{ customer.salesPersonUser.name }}</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(customer.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(customer.creditInsurance) }}</q-item-label>
+                        <q-item-label>{{ toCurrency(entity.creditInsurance) }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
-                    <q-item-section v-if="customer.payMethod">
+                    <q-item-section v-if="entity.payMethod">
                         <q-item-label caption>{{ t('customer.card.payMethod') }}</q-item-label>
-                        <q-item-label>{{ customer.payMethod.name }}</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(customer.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="customer.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="customer.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="customer.debt > customer.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="customer.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 v-if="customer.account.active == false" name="vn:noweb" size="xs" color="primary">
+                <q-icon
+                    v-if="entity.account && entity.account.active == false"
+                    name="vn:noweb"
+                    size="xs"
+                    color="primary"
+                >
                     <q-tooltip>{{ t('customer.card.noWebAccess') }}</q-tooltip>
                 </q-icon>
             </q-card-actions>

From 37c91f47b6e94b765401448e486283901582d237 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 24 Jan 2023 14:58:57 +0100
Subject: [PATCH 3/8] Added CardSummary

---
 src/components/ui/CardSummary.vue           | 100 ++++++++++++++++++++
 src/pages/Customer/Card/CustomerSummary.vue |  80 ++++++++--------
 2 files changed, 143 insertions(+), 37 deletions(-)
 create mode 100644 src/components/ui/CardSummary.vue

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
new file mode 100644
index 000000000..a42403ee9
--- /dev/null
+++ b/src/components/ui/CardSummary.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { onMounted, toRef, ref, watch } from 'vue';
+import axios from 'axios';
+
+const props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    description: {
+        type: String,
+        required: false,
+        default: '',
+    },
+});
+
+onMounted(() => fetch());
+
+const entity = ref();
+const entityId = toRef(props, 'id');
+// const description = computed(() => {
+//     return props.description || entity.value.name;
+// });
+
+async function fetch() {
+    const id = entityId.value;
+    const { data } = await axios.get(`Clients/${id}/summary`);
+    entity.value = data;
+}
+
+watch(entityId, async () => {
+    entity.value = null;
+    fetch();
+});
+</script>
+
+<template>
+    <slot name="body" :entity="entity" />
+</template>
+
+<style lang="scss" scoped>
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.q-card {
+    width: 100%;
+    max-width: 1200px;
+}
+
+.negative {
+    color: red;
+}
+
+.summary {
+    .q-list {
+        .q-item__label--header {
+            display: flex;
+            justify-content: space-between;
+
+            a {
+                color: $primary;
+            }
+        }
+    }
+    .row {
+        flex-wrap: wrap;
+
+        .col {
+            min-width: 250px;
+        }
+    }
+
+    .header {
+        text-align: center;
+        font-size: 18px;
+    }
+
+    #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-dialog .summary {
+    max-width: 1200px;
+}
+</style>
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 55b2aae81..1d99a4ecf 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -1,15 +1,16 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import axios from 'axios';
-import { toCurrency, toPercentage, toDate } from 'src/filters';
-import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
+// import { useI18n } from 'vue-i18n';
+// import axios from 'axios';
+// import { toCurrency, toPercentage, toDate } from 'src/filters';
+import CardSummary from 'components/ui/CardSummary.vue';
+// import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
 
 onMounted(() => fetch());
 
 const route = useRoute();
-const { t } = useI18n();
+// const { t } = useI18n();
 
 const $props = defineProps({
     id: {
@@ -20,49 +21,54 @@ const $props = defineProps({
 
 const entityId = computed(() => $props.id || route.params.id);
 
-const customer = ref(null);
-function fetch() {
-    const id = entityId.value;
-    axios.get(`Clients/${id}/summary`).then(({ data }) => {
-        customer.value = data;
-    });
-}
+// const customer = ref(null);
+// function fetch() {
+//     const id = entityId.value;
+//     axios.get(`Clients/${id}/summary`).then(({ data }) => {
+//         customer.value = data;
+//     });
+// }
 
-const balanceDue = computed(() => {
-    return customer.value.defaulters.length && customer.value.defaulters[0].amount;
-});
+// const balanceDue = computed(() => {
+//     return customer.value.defaulters.length && customer.value.defaulters[0].amount;
+// });
 
-const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
+// const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
 
-const claimRate = computed(() => {
-    const data = customer.value;
+// const claimRate = computed(() => {
+//     const data = customer.value;
 
-    return data.claimsRatio.claimingRate * 100;
-});
+//     return data.claimsRatio.claimingRate * 100;
+// });
 
-const priceIncreasingRate = computed(() => {
-    const data = customer.value;
+// const priceIncreasingRate = computed(() => {
+//     const data = customer.value;
 
-    return data.claimsRatio.priceIncreasing / 100;
-});
+//     return data.claimsRatio.priceIncreasing / 100;
+// });
 
-const debtWarning = computed(() => {
-    const data = customer.value;
+// const debtWarning = computed(() => {
+//     const data = customer.value;
 
-    return data.debt.debt > data.credit ? 'negative' : '';
-});
+//     return data.debt.debt > data.credit ? 'negative' : '';
+// });
 
-const creditWarning = computed(() => {
-    const data = customer.value;
-    const tooMuchInsurance = data.credit > data.creditInsurance;
-    const noCreditInsurance = data.credit && data.creditInsurance == null;
+// const creditWarning = computed(() => {
+//     const data = customer.value;
+//     const tooMuchInsurance = data.credit > data.creditInsurance;
+//     const noCreditInsurance = data.credit && data.creditInsurance == null;
 
-    return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
-});
+//     return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
+// });
 </script>
 
 <template>
-    <div class="summary container">
+    <card-summary :id="entityId">
+        <template #body="{ entity }">
+            {{ entity }}
+        </template>
+    </card-summary>
+    <!-- <div class="summary container">
         <q-card>
             <skeleton-summary v-if="!customer" />
             <template v-if="customer">
@@ -428,7 +434,7 @@ const creditWarning = computed(() => {
                 </div>
             </template>
         </q-card>
-    </div>
+    </div> -->
 </template>
 <style lang="scss" scoped>
 .container {

From bbdae4b629764604b719cfe9de310e57815d1ba3 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 26 Jan 2023 14:29:01 +0100
Subject: [PATCH 4/8] Refresh FormModel on state changes

---
 src/components/FormModel.vue                |  10 +-
 src/components/ui/CardSummary.vue           |  44 +-
 src/css/quasar.variables.scss               |   1 +
 src/pages/Customer/Card/CustomerSummary.vue | 816 ++++++++------------
 4 files changed, 372 insertions(+), 499 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 2426be1c7..439f653b3 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -1,9 +1,8 @@
 <script setup>
+import axios from 'axios';
 import { onMounted, onUnmounted, computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
-
 import { useState } from 'src/composables/useState';
 import { useValidator } from 'src/composables/useValidator';
 import SkeletonForm from 'components/ui/SkeletonForm.vue';
@@ -44,6 +43,7 @@ const isLoading = ref(false);
 const hasChanges = ref(false);
 const formData = computed(() => state.get($props.model));
 const originalData = ref();
+const formUrl = computed(() => $props.url);
 
 async function fetch() {
     const { data } = await axios.get($props.url, {
@@ -91,6 +91,12 @@ function filter(value, update, filterOptions) {
         }
     );
 }
+
+watch(formUrl, async () => {
+    originalData.value = null;
+    reset();
+    fetch();
+});
 </script>
 <template>
     <q-banner v-if="hasChanges" class="text-white bg-warning">
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index a42403ee9..262d9c9be 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -1,26 +1,19 @@
 <script setup>
 import { onMounted, toRef, ref, watch } from 'vue';
 import axios from 'axios';
+import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
 
 const props = defineProps({
     id: {
         type: Number,
         required: true,
     },
-    description: {
-        type: String,
-        required: false,
-        default: '',
-    },
 });
 
 onMounted(() => fetch());
 
 const entity = ref();
 const entityId = toRef(props, 'id');
-// const description = computed(() => {
-//     return props.description || entity.value.name;
-// });
 
 async function fetch() {
     const id = entityId.value;
@@ -35,25 +28,36 @@ watch(entityId, async () => {
 </script>
 
 <template>
-    <slot name="body" :entity="entity" />
+    <div class="summary container">
+        <q-card>
+            <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>
+                </div>
+                <div class="row q-pa-md q-col-gutter-md q-mb-md">
+                    <slot name="body" :entity="entity" />
+                </div>
+            </template>
+        </q-card>
+    </div>
 </template>
 
-<style lang="scss" scoped>
-.container {
+<style lang="scss">
+.summary.container {
     display: flex;
     justify-content: center;
 }
 
-.q-card {
-    width: 100%;
-    max-width: 1200px;
-}
-
-.negative {
-    color: red;
-}
-
 .summary {
+    .q-card {
+        width: 100%;
+        max-width: 1200px;
+    }
+
+    .negative {
+        color: red;
+    }
     .q-list {
         .q-item__label--header {
             display: flex;
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index aa89a88d9..ea519a706 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -28,6 +28,7 @@ $color-spacer: rgba(255, 255, 255, 0.3);
 $border-thin-light: 1px solid $color-spacer-light;
 
 $dark-shadow-color: #000;
+$dark: #3c3b3b;
 $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/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 1d99a4ecf..ca21504b4 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -1,16 +1,12 @@
 <script setup>
-import { onMounted, computed } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
-// import { useI18n } from 'vue-i18n';
-// import axios from 'axios';
-// import { toCurrency, toPercentage, toDate } from 'src/filters';
+import { useI18n } from 'vue-i18n';
+import { toCurrency, toPercentage, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
-// import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
-
-onMounted(() => fetch());
 
 const route = useRoute();
-// const { t } = useI18n();
+const { t } = useI18n();
 
 const $props = defineProps({
     id: {
@@ -19,480 +15,346 @@ const $props = defineProps({
     },
 });
 
-const entityId = computed(() => $props.id || route.params.id);
-
-// const customer = ref(null);
-// function fetch() {
-//     const id = entityId.value;
-//     axios.get(`Clients/${id}/summary`).then(({ data }) => {
-//         customer.value = data;
-//     });
-// }
-
-// const balanceDue = computed(() => {
-//     return customer.value.defaulters.length && customer.value.defaulters[0].amount;
-// });
-
-// const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
-
-// const claimRate = computed(() => {
-//     const data = customer.value;
-
-//     return data.claimsRatio.claimingRate * 100;
-// });
-
-// const priceIncreasingRate = computed(() => {
-//     const data = customer.value;
-
-//     return data.claimsRatio.priceIncreasing / 100;
-// });
-
-// const debtWarning = computed(() => {
-//     const data = customer.value;
-
-//     return data.debt.debt > data.credit ? 'negative' : '';
-// });
-
-// const creditWarning = computed(() => {
-//     const data = customer.value;
-//     const tooMuchInsurance = data.credit > data.creditInsurance;
-//     const noCreditInsurance = data.credit && data.creditInsurance == null;
-
-//     return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
-// });
+const entityId = computed(() => Number($props.id) || Number(route.params.id));
 </script>
 
 <template>
     <card-summary :id="entityId">
         <template #body="{ entity }">
-            {{ 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-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>
         </template>
     </card-summary>
-    <!-- <div class="summary container">
-        <q-card>
-            <skeleton-summary v-if="!customer" />
-            <template v-if="customer">
-                <div class="header bg-primary q-pa-sm q-mb-md">{{ customer.id }} - {{ customer.name }}</div>
-                <div class="row q-pa-md q-col-gutter-md q-mb-md">
-                    <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-item>
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.customerId') }}</q-item-label>
-                                    <q-item-label>{{ customer.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>{{ customer.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>{{ customer.contact }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item v-if="customer.salesPersonUser">
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.salesPerson') }}</q-item-label>
-                                    <q-item-label>{{ customer.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>{{ customer.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>{{ customer.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>{{ customer.email }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item v-if="customer.contactChannel">
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.contactChannel') }}</q-item-label>
-                                    <q-item-label>{{ customer.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>{{ customer.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>{{ customer.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>{{ customer.postcode }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item v-if="customer.province">
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.province') }}</q-item-label>
-                                    <q-item-label>{{ customer.province.name }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item v-if="customer.country">
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.country') }}</q-item-label>
-                                    <q-item-label>{{ customer.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>{{ customer.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="customer.isEqualizated"
-                                    :label="t('customer.summary.isEqualizated')"
-                                    disable
-                                />
-                            </q-item>
-                            <q-item dense>
-                                <q-checkbox
-                                    v-model="customer.isActive"
-                                    :label="t('customer.summary.isActive')"
-                                    disable
-                                />
-                            </q-item>
-                            <q-item dense>
-                                <q-checkbox
-                                    v-model="customer.hasToInvoiceByAddress"
-                                    :label="t('customer.summary.invoiceByAddress')"
-                                    disable
-                                />
-                            </q-item>
-                            <q-item dense>
-                                <q-checkbox
-                                    v-model="customer.isTaxDataChecked"
-                                    :label="t('customer.summary.verifiedData')"
-                                    disable
-                                />
-                            </q-item>
-                            <q-item dense>
-                                <q-checkbox
-                                    v-model="customer.hasToInvoice"
-                                    :label="t('customer.summary.hasToInvoice')"
-                                    disable
-                                />
-                            </q-item>
-                            <q-item dense>
-                                <q-checkbox
-                                    v-model="customer.isToBeMailed"
-                                    :label="t('customer.summary.notifyByEmail')"
-                                    disable
-                                />
-                            </q-item>
-                            <q-item dense>
-                                <q-checkbox v-model="customer.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>{{ customer.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>{{ customer.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>{{ customer.dueDay }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item dense>
-                                <q-checkbox v-model="customer.hasLcr" :label="t('customer.summary.hasLcr')" disable />
-                            </q-item>
-                            <q-item dense>
-                                <q-checkbox
-                                    v-model="customer.hasCoreVnl"
-                                    :label="t('customer.summary.hasCoreVnl')"
-                                    disable
-                                />
-                            </q-item>
-                            <q-item dense>
-                                <q-checkbox
-                                    v-model="customer.hasSepaVnl"
-                                    :label="t('customer.summary.hasB2BVnl')"
-                                    disable
-                                />
-                            </q-item>
-                        </q-list>
-                    </div>
-                    <div class="col" v-if="customer.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>{{ customer.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>{{ customer.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>{{ customer.defaultAddress.street }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
-                    </div>
-                    <div class="col" v-if="customer.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>{{ customer.account.name }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item dense>
-                                <q-checkbox
-                                    v-model="customer.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(customer.totalGreuge) }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item v-if="customer.mana">
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.mana') }}</q-item-label>
-                                    <q-item-label>{{ toCurrency(customer.mana.mana) }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item v-if="customer.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="customer.averageInvoiced">
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.averageInvoiced') }}</q-item-label>
-                                    <q-item-label>{{ toCurrency(customer.averageInvoiced.invoiced) }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                            <q-item v-if="customer.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="customer.debt">
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.risk') }}</q-item-label>
-                                    <q-item-label :class="debtWarning">
-                                        {{ toCurrency(customer.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(customer.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="customer.creditInsurance">
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.securedCredit') }}</q-item-label>
-                                    <q-item-label>{{ toCurrency(customer.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(customer.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="customer.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="customer.recovery">
-                                <q-item-section>
-                                    <q-item-label caption>{{ t('customer.summary.recoverySince') }}</q-item-label>
-                                    <q-item-label>{{ toDate(customer.recovery.started) }}</q-item-label>
-                                </q-item-section>
-                            </q-item>
-                        </q-list>
-                    </div>
-                </div>
-            </template>
-        </q-card>
-    </div> -->
 </template>
-<style lang="scss" scoped>
-.container {
-    display: flex;
-    justify-content: center;
-}
-
-.q-card {
-    width: 100%;
-    max-width: 1200px;
-}
-
-.negative {
-    color: red;
-}
-
-.summary {
-    .q-list {
-        .q-item__label--header {
-            display: flex;
-            justify-content: space-between;
-
-            a {
-                color: $primary;
-            }
-        }
-    }
-    .row {
-        flex-wrap: wrap;
-
-        .col {
-            min-width: 250px;
-        }
-    }
-
-    .header {
-        text-align: center;
-        font-size: 18px;
-    }
-
-    #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-dialog .summary {
-    max-width: 1200px;
-}
-</style>

From c95759f30270b3f418769dde10ed28dd45500bf9 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Thu, 26 Jan 2023 14:56:17 +0100
Subject: [PATCH 5/8] Updated summary with computed data

---
 .prettierrc.js                              |   2 +-
 src/components/ui/CardSummary.vue           |   5 +
 src/pages/Customer/Card/CustomerSummary.vue | 263 ++++++++++++++++----
 3 files changed, 214 insertions(+), 56 deletions(-)

diff --git a/.prettierrc.js b/.prettierrc.js
index 7f8297442..eaeeaa5eb 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,6 +1,6 @@
 module.exports = {
     singleQuote: true,
-    printWidth: 120,
+    printWidth: 90,
     tabWidth: 4,
     semi: true,
     endOfLine: 'auto',
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index 262d9c9be..a5659fea9 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -15,6 +15,11 @@ onMounted(() => fetch());
 const entity = ref();
 const entityId = toRef(props, 'id');
 
+defineExpose({
+    entity,
+    fetch,
+});
+
 async function fetch() {
     const id = entityId.value;
     const { data } = await axios.get(`Clients/${id}/summary`);
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index ca21504b4..27d104092 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { toCurrency, toPercentage, toDate } from 'src/filters';
@@ -16,65 +16,116 @@ const $props = defineProps({
 });
 
 const entityId = computed(() => Number($props.id) || Number(route.params.id));
+const summary = ref();
+const customer = computed(() => summary.value.entity);
+
+const balanceDue = computed(() => {
+    return (
+        customer.value &&
+        customer.value.defaulters.length &&
+        customer.value.defaulters[0].amount
+    );
+});
+
+const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
+
+const claimRate = computed(() => {
+    return customer.value.claimsRatio.claimingRate * 100;
+});
+
+const priceIncreasingRate = computed(() => {
+    return customer.value.claimsRatio.priceIncreasing / 100;
+});
+
+const debtWarning = computed(() => {
+    return customer.value.debt.debt > customer.value.credit ? 'negative' : '';
+});
+
+const creditWarning = computed(() => {
+    const data = customer.value;
+    const tooMuchInsurance = data.credit > data.creditInsurance;
+    const noCreditInsurance = data.credit && data.creditInsurance == null;
+
+    return tooMuchInsurance || noCreditInsurance ? 'negative' : '';
+});
 </script>
 
 <template>
-    <card-summary :id="entityId">
+    <card-summary ref="summary" :id="entityId">
         <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">
+                        <router-link
+                            :to="{ name: 'CustomerBasicData', params: { id: entityId } }"
+                            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 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 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 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 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 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 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 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 caption>{{
+                                t('customer.summary.contactChannel')
+                            }}</q-item-label>
                             <q-item-label>{{ entity.contactChannel.name }}</q-item-label>
                         </q-item-section>
                     </q-item>
@@ -87,37 +138,49 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
                     </q-item-label>
                     <q-item>
                         <q-item-section>
-                            <q-item-label caption>{{ t('customer.summary.socialName') }}</q-item-label>
+                            <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 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 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 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 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 caption>{{
+                                t('customer.summary.street')
+                            }}</q-item-label>
                             <q-item-label>{{ entity.street }}</q-item-label>
                         </q-item-section>
                     </q-item>
@@ -136,7 +199,11 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
                         />
                     </q-item>
                     <q-item dense>
-                        <q-checkbox v-model="entity.isActive" :label="t('customer.summary.isActive')" disable />
+                        <q-checkbox
+                            v-model="entity.isActive"
+                            :label="t('customer.summary.isActive')"
+                            disable
+                        />
                     </q-item>
                     <q-item dense>
                         <q-checkbox
@@ -153,7 +220,11 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
                         />
                     </q-item>
                     <q-item dense>
-                        <q-checkbox v-model="entity.hasToInvoice" :label="t('customer.summary.hasToInvoice')" disable />
+                        <q-checkbox
+                            v-model="entity.hasToInvoice"
+                            :label="t('customer.summary.hasToInvoice')"
+                            disable
+                        />
                     </q-item>
                     <q-item dense>
                         <q-checkbox
@@ -163,7 +234,11 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
                         />
                     </q-item>
                     <q-item dense>
-                        <q-checkbox v-model="entity.isVies" :label="t('customer.summary.vies')" disable />
+                        <q-checkbox
+                            v-model="entity.isVies"
+                            :label="t('customer.summary.vies')"
+                            disable
+                        />
                     </q-item>
                 </q-list>
             </div>
@@ -174,30 +249,48 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
                     </q-item-label>
                     <q-item>
                         <q-item-section>
-                            <q-item-label caption>{{ t('customer.summary.payMethod') }}</q-item-label>
+                            <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 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 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-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-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-checkbox
+                            v-model="entity.hasSepaVnl"
+                            :label="t('customer.summary.hasB2BVnl')"
+                            disable
+                        />
                     </q-item>
                 </q-list>
             </div>
@@ -208,20 +301,30 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
                     </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-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 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-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>
@@ -233,12 +336,18 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
                     </q-item-label>
                     <q-item>
                         <q-item-section>
-                            <q-item-label caption>{{ t('customer.summary.username') }}</q-item-label>
+                            <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-checkbox
+                            v-model="entity.account.active"
+                            :label="t('customer.summary.webAccess')"
+                            disable
+                        />
                     </q-item>
                 </q-list>
             </div>
@@ -249,14 +358,22 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
                     </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-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-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">
@@ -264,18 +381,26 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
                             <q-item-label caption>
                                 {{ t('customer.summary.priceIncreasingRate') }}
                             </q-item-label>
-                            <q-item-label>{{ toPercentage(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-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 caption>{{
+                                t('customer.summary.claimRate')
+                            }}</q-item-label>
                             <q-item-label>{{ toPercentage(claimRate) }}</q-item-label>
                         </q-item-section>
                     </q-item>
@@ -288,69 +413,97 @@ const entityId = computed(() => Number($props.id) || Number(route.params.id));
                     </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 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-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 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-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-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-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-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-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 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-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-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>

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 6/8] 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) {

From 387bb54b00f7ee73a45a72e2b8e41f6f8c46d1c9 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Fri, 3 Feb 2023 09:53:40 +0100
Subject: [PATCH 7/8] Removed unused css

---
 src/pages/Claim/Card/ClaimSummary.vue | 36 +--------------------------
 1 file changed, 1 insertion(+), 35 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 139e39bed..98027b4ad 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -169,38 +169,4 @@ function stateColor(code) {
             </q-card-section>
         </template>
     </card-summary>
-</template>
-
-<style lang="scss" scoped>
-// .container {
-//     display: flex;
-//     justify-content: center;
-// }
-
-// .q-card {
-//     width: 100%;
-//     max-width: 950px;
-// }
-
-// .summary {
-//     #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-dialog .summary {
-//     max-width: 1200px;
-// }
-</style>
+</template>
\ No newline at end of file

From c1baaff123972539e0e78c8c1ad799eba848fb5d Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Fri, 3 Feb 2023 10:23:06 +0100
Subject: [PATCH 8/8] Removed css

---
 src/pages/Claim/Card/ClaimCard.vue | 31 +-----------------------------
 1 file changed, 1 insertion(+), 30 deletions(-)

diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index cef8a9c3a..df6faf323 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -18,33 +18,4 @@ const state = useState();
             <router-view></router-view>
         </q-page>
     </q-page-container>
-</template>
-
-<!-- <style lang="scss">
-.q-scrollarea__content {
-    max-width: 100%;
-}
-</style>
-
-<style lang="scss" scoped>
-.descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .q-card__actions {
-        justify-content: center;
-    }
-
-    #descriptor-skeleton .q-card__actions {
-        justify-content: space-between;
-    }
-}
-</style> -->
+</template>
\ No newline at end of file