feat: add color to stat card

src/components/StatCardComponent.vue

@@ -6,13 +6,13 @@ const props = withDefaults(
     branch: {
       count: number;
       label: string;
-      color?: 'pink' | 'purple' | 'green';
+      color: 'pink' | 'purple' | 'green';
     }[];
     dark?: boolean;
-    isBranch?: boolean;
+    labelI18n?: boolean;
   }>(),
   {
-    isBranch: false,
+    labelI18n: false,
   },
 );
 </script>
@@ -40,7 +40,7 @@ const props = withDefaults(
       <div class="stat-card__content">
         <div class="text-h5 text-weight-bold">{{ v.count }}</div>
         <div class="text-weight-bold">
-          {{ isBranch ? $t(v.label) : v.label }}
+          {{ labelI18n ? $t(v.label) : v.label }}
         </div>
       </div>
     </AppBox>

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