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 balanceDueTotal = ref(0);
+import { toCurrency } from 'filters/index';
+
+const $props = defineProps({
+    amount: {
+        type: Number,
+        required: true,
+    },
+});
+
 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(balanceDueTotal) }}
+                {{ toCurrency($props.amount) }}
             </b>
         </div>
     </div>

src/pages/Customer/Defaulter/CustomerDefaulter.vue

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