feat: branch stats

src/components/StatCardComponent.vue

@@ -38,7 +38,7 @@ const color = ['pink', 'purple'];
 
       <div class="column justify-around stat-card-content">
         <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
-        <div class="text-weight-bold">{{ v.label }}</div>
+        <div class="text-weight-bold">{{ $t(v.label) }}</div>
       </div>
     </app-box>
   </div>

src/i18n/th-th/branch.ts

@@ -1,4 +1,4 @@
 export default {
   branchLabel: 'สาขา',
-  branchHQLabel: 'สาขาใหญ่',
+  branchHQLabel: 'สำนักงานใหญ่',
 };

src/pages/01_branch-management/MainPage.vue

@@ -34,7 +34,7 @@ const currentBranchContactIdEdit = ref<string>('');
 const showCurrentBranch = ref<Branch>();
 
 const shape = ref<boolean>(false);
-const openBranchDrawer = ref<boolean>(true);
+const openBranchDrawer = ref<boolean>(false);
 const openCardDetails = ref<boolean>(false);
 const openTableCard = ref<boolean>(true);
 
@@ -82,34 +82,7 @@ const selected = ref<string>('');
 
 const expanded = ref<string[]>([]);
 
-const branchStat = ref<
+const branchStat = ref<{ amount: number; label: string }[]>([]);
-  {
-    amount: number;
-    label: string;
-  }[]
->([
-  {
-    amount: 1,
-    label: 'สำนักงานใหญ่ 1',
-  },
-
-  {
-    amount: 2,
-    label: 'สำนักงานใหญ่ 2',
-  },
-  {
-    amount: 3,
-    label: 'สำนักงานใหญ่ 3',
-  },
-  {
-    amount: 4,
-    label: 'สำนักงานใหญ่ 4',
-  },
-  {
-    amount: 5,
-    label: 'สำนักงานใหญ่ 5',
-  },
-]);
 
 const treeData = ref<BranchWithChildren[]>([]);
 
@@ -381,6 +354,18 @@ async function fetchSubBranch(id: string) {
 
 onMounted(async () => {
   getTree();
+  const result = await branchStore.stats();
+
+  if (result) {
+    branchStat.value.push({
+      amount: result.hq,
+      label: 'branchHQLabel',
+    });
+    branchStat.value.push({
+      amount: result.br,
+      label: 'branchLabel',
+    });
+  }
 });
 </script>
 <template>