Se definen los iconos de las tarjetas en summary y se organiza cabeceras de tablas

src/i18n/en/index.js

@@ -130,7 +130,7 @@ export default {
             log: 'Log',
             sms: 'Sms',
             creditManagement: 'Credit management',
-            others: 'Other',
+            others: 'Others',
         },
         list: {
             phone: 'Phone',

src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import { toCurrency } from 'filters/index';
+
+const $props = defineProps({
+    amount: {
+        type: Number,
+        required: true,
+    },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <div class="card_balance">
+        <h6 class="title_balance">{{ t('Total') }}</h6>
+        <div style="display: flex">
+            <p class="key_balance">{{ t('Balance due') }}:&ensp;</p>
+            <b class="value_balance">
+                {{ toCurrency($props.amount) }}
+            </b>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+.card_balance {
+    border: 1px solid black;
+    margin: 7px;
+    padding: 5px 7px;
+}
+.title_balance {
+    color: white;
+    margin-top: 0;
+    margin-bottom: 0;
+    text-align: center;
+}
+.key_balance {
+    color: grey;
+    margin-bottom: 0;
+}
+.value_balance {
+    color: white;
+    margin-bottom: 0;
+}
+</style>
+
+<i18n>
+es:
+    Total: Total
+    Balance due: Saldo vencido
+</i18n>

src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -4,11 +4,12 @@ import { useI18n } from 'vue-i18n';
 
 import { QBtn, QCheckbox } from 'quasar';
 
+import { toCurrency, toDate } from 'filters/index';
 import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 
-import { toCurrency, toDate } from 'filters/index';
 import CustomerNotificationsFilter from './CustomerDefaulterFilter.vue';
+import CustomerBalanceDueTotal from './CustomerBalanceDueTotal.vue';
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 
@@ -16,6 +17,7 @@ const { t } = useI18n();
 const stateStore = useStateStore();
 
 const arrayData = ref(null);
+const balanceDueTotal = ref(0);
 
 onBeforeMount(async () => {
     arrayData.value = useArrayData('CustomerDefaulter', {
@@ -23,6 +25,13 @@ onBeforeMount(async () => {
         limit: 0,
     });
     await arrayData.value.fetch({ append: false });
+    balanceDueTotal.value = arrayData.value.store.data.reduce(
+        (accumulator, currentValue) => {
+            return accumulator + (currentValue['amount'] || 0);
+        },
+        0
+    );
+    console.log(balanceDueTotal.value);
     stateStore.rightDrawer = true;
 });
 
@@ -188,7 +197,9 @@ const selectAuthorId = (id) => {
     </QDrawer>
 
     <QToolbar class="bg-vn-dark">
-        <div id="st-data"></div>
+        <div id="st-data">
+            <CustomerBalanceDueTotal :amount="balanceDueTotal" />
+        </div>
         <QSpace />
         <div id="st-actions"></div>
     </QToolbar>
@@ -204,11 +215,6 @@ const selectAuthorId = (id) => {
             selection="multiple"
             v-model:selected="selected"
         >
-            <template #top>
-                <div v-if="rows" class="full-width flex justify-end">
-                    {{ `${rows.length} ${t('route.cmr.list.results')}` }}
-                </div>
-            </template>
             <template #body-cell="props">
                 <QTd :props="props">
                     <QTr :props="props" class="cursor-pointer">

src/pages/Customer/Notifications/CustomerNotifications.vue

@@ -121,11 +121,6 @@ const selectCustomerId = (id) => {
             selection="multiple"
             v-model:selected="selected"
         >
-            <template #top>
-                <div v-if="rows" class="full-width flex justify-end">
-                    {{ `${rows.length} ${t('route.cmr.list.results')}` }}
-                </div>
-            </template>
             <template #body-cell="props">
                 <QTd :props="props">
                     <QTr :props="props" class="cursor-pointer">

src/router/modules/customer.js

@@ -135,7 +135,7 @@ export default {
                     name: 'CustomerFiscalData',
                     meta: {
                         title: 'fiscalData',
-                        icon: 'vn:settings',
+                        icon: 'vn:dfiscales',
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerFiscalData.vue'),
@@ -145,7 +145,7 @@ export default {
                     name: 'CustomerBillingData',
                     meta: {
                         title: 'billingData',
-                        icon: 'vn:settings',
+                        icon: 'vn:payment',
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerBillingData.vue'),
@@ -155,7 +155,7 @@ export default {
                     name: 'CustomerConsignees',
                     meta: {
                         title: 'consignees',
-                        icon: 'vn:settings',
+                        icon: 'vn:delivery',
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerConsignees.vue'),
@@ -165,7 +165,7 @@ export default {
                     name: 'CustomerNotes',
                     meta: {
                         title: 'notes',
-                        icon: 'vn:settings',
+                        icon: 'vn:notes',
                     },
                     component: () => import('src/pages/Customer/Card/CustomerNotes.vue'),
                 },
@@ -174,7 +174,7 @@ export default {
                     name: 'CustomerCredits',
                     meta: {
                         title: 'credits',
-                        icon: 'vn:settings',
+                        icon: 'vn:credit',
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerCredits.vue'),
@@ -184,7 +184,7 @@ export default {
                     name: 'CustomerGreuges',
                     meta: {
                         title: 'greuges',
-                        icon: 'vn:settings',
+                        icon: 'vn:greuge',
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerGreuges.vue'),
@@ -194,7 +194,7 @@ export default {
                     name: 'CustomerBalance',
                     meta: {
                         title: 'balance',
-                        icon: 'vn:settings',
+                        icon: 'vn:invoice',
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerBalance.vue'),
@@ -204,7 +204,7 @@ export default {
                     name: 'CustomerRecoveries',
                     meta: {
                         title: 'recoveries',
-                        icon: 'vn:settings',
+                        icon: 'vn:recovery',
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerRecoveries.vue'),
@@ -214,7 +214,7 @@ export default {
                     name: 'CustomerWebAccess',
                     meta: {
                         title: 'webAccess',
-                        icon: 'vn:settings',
+                        icon: 'vn:web',
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerWebAccess.vue'),
@@ -224,7 +224,7 @@ export default {
                     name: 'CustomerLog',
                     meta: {
                         title: 'log',
-                        icon: 'vn:settings',
+                        icon: 'vn:History',
                     },
                     component: () => import('src/pages/Customer/Card/CustomerLog.vue'),
                 },
@@ -233,7 +233,7 @@ export default {
                     name: 'CustomerSms',
                     meta: {
                         title: 'sms',
-                        icon: 'vn:settings',
+                        icon: 'sms',
                     },
                     component: () => import('src/pages/Customer/Card/CustomerSms.vue'),
                 },
@@ -242,7 +242,7 @@ export default {
                     name: 'CustomerCreditManagement',
                     meta: {
                         title: 'creditManagement',
-                        icon: 'vn:settings',
+                        icon: 'paid',
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerCreditManagement.vue'),
@@ -252,7 +252,7 @@ export default {
                     name: 'CustomerOthers',
                     meta: {
                         title: 'others',
-                        icon: 'vn:settings',
+                        icon: 'pending',
                     },
                     component: () => import('src/pages/Customer/Card/CustomerOthers.vue'),
                 },