src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue

@@ -1,25 +1,25 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-
 import { toCurrency } from 'filters/index';
+import { ref } from 'vue';
+import FetchData from 'components/FetchData.vue';
 
-const $props = defineProps({
-    amount: {
-        type: Number,
-        required: true,
-    },
-});
-
+const balanceDueTotal = ref(0);
 const { t } = useI18n();
 </script>
 
 <template>
+    <FetchData
+        :url="`Defaulters/filter?sumAmount=true`"
+        auto-load
+        @on-fetch="( [{sumAmount}] ) => balanceDueTotal = sumAmount"  
+    ></FetchData>
     <div class="card_balance q-px-md q-py-sm q-my-sm">
         <h6 class="title_balance text-center">{{ t('Total') }}</h6>
         <div class="row">
             <p class="key_balance">{{ t('Balance due') }}:&ensp;</p>
             <b class="value_balance">
-                {{ toCurrency($props.amount) }}
+                {{ toCurrency(balanceDueTotal) }}
             </b>
         </div>
     </div>

src/pages/Customer/Defaulter/CustomerDefaulter.vue

@@ -16,7 +16,6 @@ const { t } = useI18n();
 const quasar = useQuasar();
 const dataRef = ref(null);
 
-const balanceDueTotal = ref(0);
 const selected = ref([]);
 
 const columns = computed(() => [
@@ -165,9 +164,7 @@ const viewAddObservation = (rowsSelected) => {
     });
 };
 
-const onFetch = async (data) => {
-    balanceDueTotal.value = data.reduce((acc, { amount = 0 }) => acc + amount, 0);
-};
+
 
 function exprBuilder(param, value) {
     switch (param) {
@@ -190,9 +187,10 @@ function exprBuilder(param, value) {
 </script>
 
 <template>
+
     <VnSubToolbar>
         <template #st-data>
-            <CustomerBalanceDueTotal :amount="balanceDueTotal" />
+            <CustomerBalanceDueTotal/>
         </template>
         <template #st-actions>
             <QBtn