feat: add color to stat card

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

@@ -96,8 +96,8 @@ onMounted(async () => {
 
   if (_stats) {
     stats.value.push(
-      { count: _stats.hq, label: 'branchHQLabel' },
-      { count: _stats.br, label: 'branchLabel' },
+      { count: _stats.hq, label: 'branchHQLabel', color: 'pink' },
+      { count: _stats.br, label: 'branchLabel', color: 'purple' },
     );
   }
 });
@@ -127,9 +127,9 @@ const fieldSelectedBranch = ref<{
   value: 'branchHQLabel',
 });
 
-const stats = ref<
-  { count: number; label: string; color?: 'pink' | 'purple' }[]
->([]);
+const stats = ref<{ count: number; label: string; color: 'pink' | 'purple' }[]>(
+  [],
+);
 
 const defaultFormData = {
   headOfficeId: null,
@@ -338,17 +338,18 @@ async function onSubmit() {
   const _stats = await branchStore.stats();
 
   if (_stats) {
-    stats.value[0] = {
-      count: _stats.hq,
-      label: 'branchHQLabel',
-      color: 'pink',
-    };
-
-    stats.value[1] = {
-      count: _stats.br,
-      label: 'branchLabel',
-      color: 'purple',
-    };
+    stats.value = [
+      {
+        count: _stats.hq,
+        label: 'branchHQLabel',
+        color: 'pink',
+      },
+      {
+        count: _stats.br,
+        label: 'branchLabel',
+        color: 'purple',
+      },
+    ];
   }
 }
 
@@ -388,7 +389,7 @@ watch(locale, () => {
     </div>
 
     <AppBox bordered class="q-mb-md">
-      <StatCard isBranch :branch="stats" :dark="$q.dark.isActive" />
+      <StatCard label-i18n :branch="stats" :dark="$q.dark.isActive" />
     </AppBox>
 
     <AppBox