refactor: statcard color & sort

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"