Merge branch 'dev/phatt' into develop

src/components/home/PersonCard.vue

@@ -35,6 +35,7 @@ const status = ref(false);
       :key="i"
     >
       <div class="q-pa-md column items-center">
+        <!-- kebab menu -->
         <div class="full-width text-right">
           <q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm">
             <q-menu :offset="[0, 10]" style="width: 130px">
@@ -81,6 +82,7 @@ const status = ref(false);
           </q-btn>
         </div>
 
+        <!-- profile -->
         <div style="position: relative">
           <AppCircle
             bordered
@@ -91,16 +93,17 @@ const status = ref(false);
             <div class="status-circle">
               <q-icon
                 :name="`mdi-${v.disabled ? 'close' : 'check'}`"
-                :style="`color:${v.disabled ? 'var(--border-color)' : 'white'}`"
+                :style="`color:${v.disabled ? 'var(--gray-6)' : 'white'}`"
               />
             </div>
           </AppCircle>
         </div>
 
+        <!-- name symbol -->
         <span class="items-center row q-my-sm">
           {{ v.name }}
           <iconify-icon
-            class="q-px-sm"
+            class="q-pl-sm"
             :class="{
               'symbol-gender': v.male || v.female,
               'symbol-gender__male': !v.disabled && v.male,
@@ -110,7 +113,7 @@ const status = ref(false);
             :icon="`material-symbols:${v.male ? 'male' : 'female'}`"
             width="20px"
           />
-          <iconify-icon class="locale" icon="circle-flags:th" />
+          <!-- <iconify-icon class="locale q-pl-sm" icon="circle-flags:th" /> -->
         </span>
         <span
           class="badge q-px-sm"
@@ -124,6 +127,8 @@ const status = ref(false);
           {{ v.badge }}
         </span>
       </div>
+
+      <!-- detail -->
       <q-separator />
       <div
         class="q-pt-sm q-pb-md q-px-lg q-gutter-x-xl person-detail rounded-b"
@@ -160,7 +165,7 @@ const status = ref(false);
     opacity: 0.4;
 
     .status-circle {
-      background-color: var(--surface-2);
+      background-color: var(--surface-1);
     }
 
     .locale {

src/i18n/en-US/personnel-main-page.ts

@@ -9,5 +9,5 @@ export default {
   personnelSelector3: 'Agent',
   personnelSelector4: 'Agency',
 
-  personnelStatTitle: 'Summary of data'
+  personnelStatTitle: 'Summary data of '
 };

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

@@ -135,11 +135,11 @@ const selectorList = [
       />
 
       <!-- stat -->
-      <AppBox bordered class="column full-width" style="overflow-x: auto">
-        <span class="text-weight-bold text-subtitle1">
-          {{ $t('personnelStatTitle') + selectorLabel }}
+      <AppBox bordered class="column full-width">
+        <span class="q-pb-lg text-weight-bold text-subtitle1">
+          {{ $t('personnelStatTitle') + $t(selectorLabel) }}
         </span>
-        <div class="row q-pt-lg">
+        <div class="row col full-width" style="overflow-x: auto">
           <stat-card-componet :branch="branchStat" class="no-wrap" />
         </div>
       </AppBox>
@@ -148,7 +148,6 @@ const selectorList = [
     <!-- main -->
     <AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
       <!-- <PersonCard :list="person" class="q-mb-md" /> -->
-
       <div class="column" style="height: 100%">
         <div class="col-1 self-end">
           <div class="row">