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] 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>