diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 80e8f159f..e46f7ce55 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -152,7 +152,8 @@ export default {
             list: 'List',
             createTicket: 'Create ticket',
             summary: 'Summary',
-            basicData: 'Basic Data'
+            basicData: 'Basic Data',
+            boxing: 'Boxing'
         },
         list: {
             nickname: 'Nickname',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 5021d1098..5ebdb9853 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -151,7 +151,8 @@ export default {
             list: 'Listado',
             createTicket: 'Crear ticket',
             summary: 'Resumen',
-            basicData: 'Datos básicos'
+            basicData: 'Datos básicos',
+            boxing: 'Encajado'
         },
         list: {
             nickname: 'Alias',
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 28b78abbc..cffaa79f7 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -80,100 +80,99 @@ const statesFilter = {
         auto-load
     />
     <fetch-data url="ClaimStates" @on-fetch="setClaimStates" auto-load />
-    <q-page class="q-pa-md">
-        <div class="container">
-            <q-card>
-                <form-model :url="`Claims/${route.params.id}`" :filter="claimFilter" model="claim">
-                    <template #form="{ data, validate, filter }">
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-input v-model="data.client.name" :label="t('claim.basicData.customer')" disable />
-                            </div>
-                            <div class="col">
-                                <q-input v-model="data.created" mask="####-##-##" fill-mask="_" autofocus>
-                                    <template #append>
-                                        <q-icon name="event" class="cursor-pointer">
-                                            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
-                                                <q-date v-model="data.created" mask="YYYY-MM-DD">
-                                                    <div class="row items-center justify-end">
-                                                        <q-btn v-close-popup label="Close" color="primary" flat />
-                                                    </div>
-                                                </q-date>
-                                            </q-popup-proxy>
-                                        </q-icon>
-                                    </template>
-                                </q-input>
-                            </div>
+
+    <div class="container">
+        <q-card>
+            <form-model :url="`Claims/${route.params.id}`" :filter="claimFilter" model="claim">
+                <template #form="{ data, validate, filter }">
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input v-model="data.client.name" :label="t('claim.basicData.customer')" disable />
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-select
-                                    v-model="data.workerFk"
-                                    :options="workers"
-                                    option-value="id"
-                                    option-label="name"
-                                    emit-value
-                                    :label="t('claim.basicData.assignedTo')"
-                                    map-options
-                                    use-input
-                                    @filter="(value, update) => filter(value, update, workerFilter)"
-                                    :rules="validate('claim.claimStateFk')"
-                                    :input-debounce="0"
-                                >
-                                    <template #before>
-                                        <q-avatar color="orange">
-                                            <q-img
-                                                v-if="data.workerFk"
-                                                :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
-                                                spinner-color="white"
-                                            />
-                                        </q-avatar>
-                                    </template>
-                                </q-select>
-                            </div>
-                            <div class="col">
-                                <q-select
-                                    v-model="data.claimStateFk"
-                                    :options="claimStates"
-                                    option-value="id"
-                                    option-label="description"
-                                    emit-value
-                                    :label="t('claim.basicData.state')"
-                                    map-options
-                                    use-input
-                                    @filter="(value, update) => filter(value, update, statesFilter)"
-                                    :rules="validate('claim.claimStateFk')"
-                                    :input-debounce="0"
-                                >
-                                </q-select>
-                            </div>
+                        <div class="col">
+                            <q-input v-model="data.created" mask="####-##-##" fill-mask="_" autofocus>
+                                <template #append>
+                                    <q-icon name="event" class="cursor-pointer">
+                                        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+                                            <q-date v-model="data.created" mask="YYYY-MM-DD">
+                                                <div class="row items-center justify-end">
+                                                    <q-btn v-close-popup label="Close" color="primary" flat />
+                                                </div>
+                                            </q-date>
+                                        </q-popup-proxy>
+                                    </q-icon>
+                                </template>
+                            </q-input>
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-input
-                                    v-model="data.packages"
-                                    :label="t('claim.basicData.packages')"
-                                    :rules="validate('claim.packages')"
-                                />
-                            </div>
-                            <div class="col">
-                                <q-input
-                                    v-model="data.rma"
-                                    :label="t('claim.basicData.returnOfMaterial')"
-                                    :rules="validate('claim.rma')"
-                                />
-                            </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-select
+                                v-model="data.workerFk"
+                                :options="workers"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                :label="t('claim.basicData.assignedTo')"
+                                map-options
+                                use-input
+                                @filter="(value, update) => filter(value, update, workerFilter)"
+                                :rules="validate('claim.claimStateFk')"
+                                :input-debounce="0"
+                            >
+                                <template #before>
+                                    <q-avatar color="orange">
+                                        <q-img
+                                            v-if="data.workerFk"
+                                            :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                            spinner-color="white"
+                                        />
+                                    </q-avatar>
+                                </template>
+                            </q-select>
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-checkbox v-model="data.hasToPickUp" :label="t('claim.basicData.picked')" />
-                            </div>
+                        <div class="col">
+                            <q-select
+                                v-model="data.claimStateFk"
+                                :options="claimStates"
+                                option-value="id"
+                                option-label="description"
+                                emit-value
+                                :label="t('claim.basicData.state')"
+                                map-options
+                                use-input
+                                @filter="(value, update) => filter(value, update, statesFilter)"
+                                :rules="validate('claim.claimStateFk')"
+                                :input-debounce="0"
+                            >
+                            </q-select>
                         </div>
-                    </template>
-                </form-model>
-            </q-card>
-        </div>
-    </q-page>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input
+                                v-model="data.packages"
+                                :label="t('claim.basicData.packages')"
+                                :rules="validate('claim.packages')"
+                            />
+                        </div>
+                        <div class="col">
+                            <q-input
+                                v-model="data.rma"
+                                :label="t('claim.basicData.returnOfMaterial')"
+                                :rules="validate('claim.rma')"
+                            />
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-checkbox v-model="data.hasToPickUp" :label="t('claim.basicData.picked')" />
+                        </div>
+                    </div>
+                </template>
+            </form-model>
+        </q-card>
+    </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 1ed3c6c8e..ad8fa5f7a 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -163,7 +163,9 @@ function stateColor(code) {
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
-        <router-view></router-view>
+        <q-page class="q-pa-md">
+            <router-view></router-view>
+        </q-page>
     </q-page-container>
 </template>
 
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
index 8fea99121..4162d5acf 100644
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ b/src/pages/Claim/Card/ClaimRma.vue
@@ -80,7 +80,7 @@ function hide() {
         @on-fetch="($data) => (claim = $data)"
         auto-load
     />
-    <q-page class="q-pa-md sticky">
+    <div class="sticky-page">
         <q-page-sticky expand position="top">
             <q-toolbar class="bg-grey-9">
                 <q-space />
@@ -124,7 +124,7 @@ function hide() {
                 </q-card>
             </template>
         </paginate>
-    </q-page>
+    </div>
     <q-dialog v-model="confirmShown" persistent @hide="hide">
         <q-card>
             <q-card-section class="row items-center">
@@ -144,7 +144,7 @@ function hide() {
 .q-toolbar {
     background-color: $grey-9;
 }
-.sticky {
+.sticky-page {
     padding-top: 66px;
 }
 
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 25ebe662e..2f9f28e49 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -90,75 +90,73 @@ function stateColor(code) {
 </script>
 
 <template>
-    <q-page class="q-pa-md">
-        <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>
-    </q-page>
+    <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>
 </template>
 
 <style lang="scss" scoped>
@@ -194,4 +192,8 @@ function stateColor(code) {
         }
     }
 }
+
+.q-dialog .summary {
+    max-width: 1200px;
+}
 </style>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 65c4fb2ad..3df10a095 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -50,116 +50,115 @@ const filterOptions = {
     />
     <fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
     <fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
-    <q-page class="q-pa-md">
-        <div class="container">
-            <q-card>
-                <form-model :url="`Clients/${route.params.id}`" model="customer">
-                    <template #form="{ data, validate, filter }">
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-input
-                                    v-model="data.socialName"
-                                    :label="t('customer.basicData.socialName')"
-                                    :rules="validate('client.socialName')"
-                                    autofocus
-                                />
-                            </div>
-                            <div class="col">
-                                <q-select
-                                    v-model="data.businessTypeFk"
-                                    :options="businessTypes"
-                                    option-value="code"
-                                    option-label="description"
-                                    emit-value
-                                    :label="t('customer.basicData.businessType')"
-                                    map-options
-                                    :rules="validate('client.businessTypeFk')"
-                                    :input-debounce="0"
-                                />
-                            </div>
+
+    <div class="container">
+        <q-card>
+            <form-model :url="`Clients/${route.params.id}`" model="customer">
+                <template #form="{ data, validate, filter }">
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input
+                                v-model="data.socialName"
+                                :label="t('customer.basicData.socialName')"
+                                :rules="validate('client.socialName')"
+                                autofocus
+                            />
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-input
-                                    v-model="data.contact"
-                                    :label="t('customer.basicData.contact')"
-                                    :rules="validate('client.contact')"
-                                    clearable
-                                />
-                            </div>
-                            <div class="col">
-                                <q-input
-                                    v-model="data.email"
-                                    type="email"
-                                    :label="t('customer.basicData.email')"
-                                    :rules="validate('client.email')"
-                                    clearable
-                                />
-                            </div>
+                        <div class="col">
+                            <q-select
+                                v-model="data.businessTypeFk"
+                                :options="businessTypes"
+                                option-value="code"
+                                option-label="description"
+                                emit-value
+                                :label="t('customer.basicData.businessType')"
+                                map-options
+                                :rules="validate('client.businessTypeFk')"
+                                :input-debounce="0"
+                            />
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-input
-                                    v-model="data.phone"
-                                    :label="t('customer.basicData.phone')"
-                                    :rules="validate('client.phone')"
-                                    clearable
-                                />
-                            </div>
-                            <div class="col">
-                                <q-input
-                                    v-model="data.mobile"
-                                    :label="t('customer.basicData.mobile')"
-                                    :rules="validate('client.mobile')"
-                                    clearable
-                                />
-                            </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input
+                                v-model="data.contact"
+                                :label="t('customer.basicData.contact')"
+                                :rules="validate('client.contact')"
+                                clearable
+                            />
                         </div>
-                        <div class="row q-gutter-md q-mb-md">
-                            <div class="col">
-                                <q-select
-                                    v-model="data.salesPersonFk"
-                                    :options="workers"
-                                    option-value="id"
-                                    option-label="name"
-                                    emit-value
-                                    :label="t('customer.basicData.salesPerson')"
-                                    map-options
-                                    use-input
-                                    @filter="(value, update) => filter(value, update, filterOptions)"
-                                    :rules="validate('client.salesPersonFk')"
-                                    :input-debounce="0"
-                                >
-                                    <template #before>
-                                        <q-avatar color="orange">
-                                            <q-img
-                                                v-if="data.salesPersonFk"
-                                                :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
-                                                spinner-color="white"
-                                            />
-                                        </q-avatar>
-                                    </template>
-                                </q-select>
-                            </div>
-                            <div class="col">
-                                <q-select
-                                    v-model="data.contactChannelFk"
-                                    :options="contactChannels"
-                                    option-value="id"
-                                    option-label="name"
-                                    emit-value
-                                    :label="t('customer.basicData.contactChannel')"
-                                    map-options
-                                    :rules="validate('client.contactChannelFk')"
-                                    :input-debounce="0"
-                                />
-                            </div>
+                        <div class="col">
+                            <q-input
+                                v-model="data.email"
+                                type="email"
+                                :label="t('customer.basicData.email')"
+                                :rules="validate('client.email')"
+                                clearable
+                            />
                         </div>
-                    </template>
-                </form-model>
-            </q-card>
-        </div>
-    </q-page>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-input
+                                v-model="data.phone"
+                                :label="t('customer.basicData.phone')"
+                                :rules="validate('client.phone')"
+                                clearable
+                            />
+                        </div>
+                        <div class="col">
+                            <q-input
+                                v-model="data.mobile"
+                                :label="t('customer.basicData.mobile')"
+                                :rules="validate('client.mobile')"
+                                clearable
+                            />
+                        </div>
+                    </div>
+                    <div class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <q-select
+                                v-model="data.salesPersonFk"
+                                :options="workers"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                :label="t('customer.basicData.salesPerson')"
+                                map-options
+                                use-input
+                                @filter="(value, update) => filter(value, update, filterOptions)"
+                                :rules="validate('client.salesPersonFk')"
+                                :input-debounce="0"
+                            >
+                                <template #before>
+                                    <q-avatar color="orange">
+                                        <q-img
+                                            v-if="data.salesPersonFk"
+                                            :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
+                                            spinner-color="white"
+                                        />
+                                    </q-avatar>
+                                </template>
+                            </q-select>
+                        </div>
+                        <div class="col">
+                            <q-select
+                                v-model="data.contactChannelFk"
+                                :options="contactChannels"
+                                option-value="id"
+                                option-label="name"
+                                emit-value
+                                :label="t('customer.basicData.contactChannel')"
+                                map-options
+                                :rules="validate('client.contactChannelFk')"
+                                :input-debounce="0"
+                            />
+                        </div>
+                    </div>
+                </template>
+            </form-model>
+        </q-card>
+    </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 5e37aefe2..29642f02f 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -174,7 +174,9 @@ async function fetch() {
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
-        <router-view></router-view>
+        <q-page class="q-pa-md">
+            <router-view></router-view>
+        </q-page>
     </q-page-container>
 </template>
 
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 4d55bd048..dd06bd52d 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -29,9 +29,7 @@ function fetch() {
 }
 
 const balanceDue = computed(() => {
-    const [defaulter] = customer.value.defaulters;
-
-    return defaulter.amount;
+    return customer.value.defaulters.length && customer.value.defaulters[0].amount;
 });
 
 const balanceDueWarning = computed(() => (balanceDue.value ? 'negative' : ''));
@@ -64,378 +62,374 @@ const creditWarning = computed(() => {
 </script>
 
 <template>
-    <q-page class="q-pa-md">
-        <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' }">
-                                        <q-icon name="open_in_new" />
-                                    </router-link>
-                                </q-item-label>
+    <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>
-                                    <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>
-                                    <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>
-                                    <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>
-                                    <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">
-                            <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">
-                            <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>
-                                    <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>
-                                    <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>
-                                    <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>
-                                    <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>
-                                    <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>
+                            <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>
-                </template>
-            </q-card>
-        </div>
-    </q-page>
+                    <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;
@@ -491,4 +485,8 @@ const creditWarning = computed(() => {
         }
     }
 }
+
+.q-dialog .summary {
+    max-width: 1200px;
+}
 </style>
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index 81d6fa77b..e777a20ba 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -79,81 +79,75 @@ async function getVideoList(expeditionId, timed) {
 </script>
 
 <template>
-    <q-layout view="hhh lpr ffr" class="fit">
-        <q-drawer show-if-above side="right" bordered>
-            <q-scroll-area class="fit">
-                <q-list bordered separator style="max-width: 318px">
-                    <q-item v-if="lastExpedition && videoList.length">
-                        <q-item-section>
-                            <q-item-label class="text-h6">
-                                {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
-                            </q-item-label>
-                            <q-range
-                                v-model="time"
-                                @change="getVideoList(lastExpedition, time)"
-                                :min="0"
-                                :max="24"
-                                :step="1"
-                                :left-label-value="time.min + ':00'"
-                                :right-label-value="time.max + ':00'"
-                                label
-                                markers
-                                snap
-                                color="orange"
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-item v-if="lastExpedition && videoList.length">
-                        <q-item-section>
-                            <q-select
-                                color="orange"
-                                v-model="slide"
-                                :options="videoList"
-                                :label="t('ticket.boxing.selectVideo')"
-                                emit-value
-                                map-options
-                            >
-                                <template #prepend>
-                                    <q-icon name="schedule" />
-                                </template>
-                            </q-select>
-                        </q-item-section>
-                    </q-item>
-                    <q-item
-                        v-for="expedition in expeditions"
-                        :key="expedition.id"
-                        @click="getVideoList(expedition.id)"
-                        clickable
-                        v-ripple
-                    >
-                        <q-item-section>
-                            <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
-                        </q-item-section>
-                        <q-item-section>
-                            <q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label>
-                            <q-item-label>
-                                {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
-                            </q-item-label>
-                            <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
-                            <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
-                            <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
-                            <q-item-label>{{ expedition.userName }}</q-item-label>
-                        </q-item-section>
-                    </q-item>
-                </q-list>
-            </q-scroll-area>
-        </q-drawer>
+    <q-drawer show-if-above side="right">
+        <q-scroll-area class="fit">
+            <q-list bordered separator style="max-width: 318px">
+                <q-item v-if="lastExpedition && videoList.length">
+                    <q-item-section>
+                        <q-item-label class="text-h6">
+                            {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
+                        </q-item-label>
+                        <q-range
+                            v-model="time"
+                            @change="getVideoList(lastExpedition, time)"
+                            :min="0"
+                            :max="24"
+                            :step="1"
+                            :left-label-value="time.min + ':00'"
+                            :right-label-value="time.max + ':00'"
+                            label
+                            markers
+                            snap
+                            color="orange"
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item v-if="lastExpedition && videoList.length">
+                    <q-item-section>
+                        <q-select
+                            color="orange"
+                            v-model="slide"
+                            :options="videoList"
+                            :label="t('ticket.boxing.selectVideo')"
+                            emit-value
+                            map-options
+                        >
+                            <template #prepend>
+                                <q-icon name="schedule" />
+                            </template>
+                        </q-select>
+                    </q-item-section>
+                </q-item>
+                <q-item
+                    v-for="expedition in expeditions"
+                    :key="expedition.id"
+                    @click="getVideoList(expedition.id)"
+                    clickable
+                    v-ripple
+                >
+                    <q-item-section>
+                        <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section>
+                        <q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label>
+                        <q-item-label>
+                            {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
+                        </q-item-label>
+                        <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
+                        <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
+                        <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
+                        <q-item-label>{{ expedition.userName }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </q-scroll-area>
+    </q-drawer>
 
-        <q-page-container>
-            <q-page>
-                <q-card>
-                    <q-carousel animated v-model="slide" height="max-content">
-                        <q-carousel-slide v-for="video in videoList" :key="video.value" :name="video.value">
-                            <q-video :src="video.url" :ratio="16 / 9" />
-                        </q-carousel-slide>
-                    </q-carousel>
-                </q-card>
-            </q-page>
-        </q-page-container>
-    </q-layout>
+    <q-card>
+        <q-carousel animated v-model="slide" height="max-content">
+            <q-carousel-slide v-for="video in videoList" :key="video.value" :name="video.value">
+                <q-video :src="video.url" :ratio="16 / 9" />
+            </q-carousel-slide>
+        </q-carousel>
+    </q-card>
 </template>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 625cf9689..edfe47fce 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -147,17 +147,19 @@ function stateColor(state) {
             <q-separator />
 
             <q-list>
-                <!-- <q-item :to="{ name: 'TicketBasicData' }" clickable v-ripple>
+                <q-item :to="{ name: 'TicketBoxing' }" clickable v-ripple>
                     <q-item-section avatar>
-                        <q-icon name="vn:settings" />
+                        <q-icon name="vn:package" />
                     </q-item-section>
-                    <q-item-section>{{ t('ticket.pageTitles.basicData') }}</q-item-section>
-                </q-item> -->
+                    <q-item-section>{{ t('ticket.pageTitles.boxing') }}</q-item-section>
+                </q-item>
             </q-list>
-        </q-scroll-area> </q-drawer
-    >-->
+        </q-scroll-area>
+    </q-drawer>
     <q-page-container>
-        <router-view></router-view>
+        <q-page class="q-pa-md">
+            <router-view></router-view>
+        </q-page>
     </q-page-container>
 </template>