feat: employee stats

src/pages/03_customer-management/MainPage.vue

@@ -119,6 +119,7 @@ const formDataEmployeeTab = ref('personalInfo');
 const infoDrawerEmployee = ref(false);
 const infoDrawerEmployeeEdit = ref(false);
 const infoEmployeePersonCard = ref();
+const statsEmployee = ref(0);
 const formDataEmployee = ref<EmployeeCreate>({
   image: null,
   customerBranchId: '',
@@ -319,7 +320,7 @@ const selectorList = computed(() => [
   },
   {
     label: 'EMPLOYEE',
-    count: listEmployee.value ? listEmployee.value.length : 0,
+    count: statsEmployee.value ?? 0,
   },
 ]);
 
@@ -593,6 +594,9 @@ async function onSubmit() {
     const resultList = await employeeStore.fetchList();
     if (resultList) listEmployee.value = resultList.result;
 
+    const resultStatsEmployee = await employeeStore.getStatsEmployee();
+    if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
+
     clearFormEmployee();
   }
 }
@@ -897,7 +901,6 @@ onMounted(async () => {
     page: 1,
     pageSize: pageSizeCustomer.value,
   });
-  const resultListEmployee = await employeeStore.fetchList();
 
   if (resultStats) statsCustomerType.value = resultStats;
 
@@ -919,6 +922,10 @@ onMounted(async () => {
     listCustomer.value = resultList.result;
   }
 
+  const resultStatsEmployee = await employeeStore.getStatsEmployee();
+  if (resultStatsEmployee) statsEmployee.value = resultStatsEmployee;
+
+  const resultListEmployee = await employeeStore.fetchList();
   if (resultListEmployee) listEmployee.value = resultListEmployee.result;
 
   const resultOption = await fetch('/option/option.json');
@@ -1030,19 +1037,13 @@ watch(fieldSelectedCustomer, async () => {
             <StatCardComponent
               v-if="customerStats && selectorLabel === 'EMPLOYEE'"
               labelI18n
-              :branch="
-                customerStats.map((v) => ({
-                  count:
-                    v.name === 'CORP'
-                      ? statsCustomerType?.CORP ?? 0
-                      : statsCustomerType?.PERS ?? 0,
-                  label:
-                    v.name === 'CORP'
-                      ? 'customerLegalEntity'
-                      : 'customerNaturalPerson',
-                  color: v.name === 'CORP' ? 'pink' : 'green',
-                }))
-              "
+              :branch="[
+                {
+                  label: 'EMPLOYEE',
+                  count: statsEmployee,
+                  color: 'pink',
+                },
+              ]"
               :dark="$q.dark.isActive"
               class="no-wrap"
             />