refactor: statcard color & sort

src/components/StatCardComponent.vue

@@ -6,9 +6,9 @@ const props = withDefaults(
     branch: {
       count: number;
       label: string;
+      color?: 'pink' | 'purple';
     }[];
     dark?: boolean;
-    color?: 'pink' | 'purple';
     isBranch?: boolean;
   }>(),
   {
@@ -29,7 +29,7 @@ const colorRotate = ['pink', 'purple'];
       v-for="(v, i) in props.branch"
       :key="v.label"
       class="bordered wave col-12"
-      :class="{ [`stat__${color || colorRotate[i % 2]}`]: true }"
+      :class="{ [`stat__${v.color || colorRotate[i % 2]}`]: true }"
       style="width: 200px; min-width: 150px; box-shadow: var(--shadow-2)"
     >
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">

src/pages/02_personnel-management/MainPage.vue

@@ -89,6 +89,9 @@ const hqId = ref<string>();
 const brId = ref<string>();
 const formDialogRef = ref();
 const userStats = ref<BranchUserStats[]>();
+const sortedUserStats = computed(() => {
+  return userStats.value?.slice().sort((a, b) => b.count - a.count);
+});
 const typeStats = ref<UserTypeStats>();
 const agencyFile = ref<File[]>([]);
 const agencyFileList = ref<{ name: string; url: string }[]>([]);
@@ -568,11 +571,12 @@ watch(
         </div>
         <div class="row full-width q-py-md" style="overflow-x: auto">
           <StatCardComponent
-            v-if="userStats"
+            v-if="sortedUserStats"
             :branch="
-              userStats.map((v) => ({
+              sortedUserStats.map((v) => ({
                 count: v.count,
                 label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+                color: v.isHeadOffice ? 'pink' : 'purple',
               }))
             "
             :dark="$q.dark.isActive"
@@ -702,6 +706,7 @@ watch(
 
   <DrawerInfo
     v-if="currentUser"
+    :category="$t('personnelTitle')"
     bg-on
     :badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
     :badgeLabel="userCode"