feat: refs #8077 customerBalanceDueTotal

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

@@ -11,13 +11,11 @@ import VnInput from 'src/components/common/VnInput.vue';
 import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
 import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
-import FetchData from 'components/FetchData.vue';
 
 const { t } = useI18n();
 const quasar = useQuasar();
 const dataRef = ref(null);
 
-const balanceDueTotal = ref(0);
 const selected = ref([]);
 
 const columns = computed(() => [
@@ -166,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) {
@@ -191,15 +187,10 @@ function exprBuilder(param, value) {
 </script>
 
 <template>
-    <FetchData
-    :url="`Defaulters/filter?sumAmount=true`"
-    auto-load
-    @on-fetch="({ sumAmount }) => (totalAmount = sumAmount)"
-  
-    ></FetchData>
+
     <VnSubToolbar>
         <template #st-data>
-            <CustomerBalanceDueTotal :amount="totalAmount" />
+            <CustomerBalanceDueTotal/>
         </template>
         <template #st-actions>
             <QBtn