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>