refactor: change layout of stat card

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

@@ -441,7 +441,6 @@ watch(locale, () => {
       label-i18n
       :branch="stats"
       :dark="$q.dark.isActive"
-      nowrap
     />
 
     <div

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

@@ -533,46 +533,38 @@ watch(inputSearch, async () => await fetchUserList());
     ></q-fab-action>
   </ButtonAddComponent>
 
-  <div class="column full-height">
-    <div class="row full-width q-pb-md q-gutter-y-md">
-      <!-- selector -->
-      <div class="col-sm-5 col-md-3 col-12 q-mr-md">
-        <SelectorList :list="selectorList" v-model:selector="selectorLabel" />
-      </div>
-
   <!-- stat -->
-      <div class="col-12 col-sm bordered surface-1 rounded">
-        <div class="text-weight-bold text-subtitle1 q-pa-md">
-          {{ $t('personnelStatTitle') }}
-          {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
-        </div>
-
-        <div class="scroll">
-          <div class="q-mx-md" style="display: inline-block">
+  <div class="scroll q-mb-md">
+    <div style="display: inline-block">
       <StatCardComponent
         v-if="sortedUserStats"
         :branch="
           sortedUserStats.map((v) => ({
             count: v.count,
             label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+            icon: 'mdi-account',
             color: v.isHeadOffice ? 'pink' : 'purple',
           }))
         "
         :dark="$q.dark.isActive"
-              nowrap
-              class="q-mb-md"
       />
     </div>
   </div>
-      </div>
-    </div>
-
   <!-- main -->
   <div
     class="col scroll bordered surface-1 rounded q-pa-md justify-between column no-wrap"
   >
     <div>
-        <div class="row q-mb-md justify-between">
+      <div class="row q-mb-md justify-end" style="gap: var(--size-2)">
+        <q-input
+          for="input-search"
+          style="width: 250px"
+          outlined
+          dense
+          :label="$t('search')"
+          debounce="500"
+          v-model="inputSearch"
+        ></q-input>
         <q-btn
           id="btn-filter"
           icon="mdi-tune-vertical-variant"
@@ -617,24 +609,12 @@ watch(inputSearch, async () => await fetchUserList());
             </q-list>
           </q-menu>
         </q-btn>
-          <q-input
-            for="input-search"
-            style="width: 250px"
-            outlined
-            dense
-            :label="$t('search')"
-            debounce="500"
-            v-model="inputSearch"
-          ></q-input>
       </div>
       <PersonCard
         :list="
           userData?.result
             .filter((v) => {
-                if (
-                  statusFilter === 'statusACTIVE' &&
-                  v.status === 'INACTIVE'
-                ) {
+              if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
                 return false;
               }
               if (
@@ -718,7 +698,6 @@ watch(inputSearch, async () => await fetchUserList());
       />
     </div>
   </div>
-  </div>
 
   <DrawerInfo
     v-if="currentUser"

src/pages/03_customer-management/MainPage.vue

@@ -1332,16 +1332,7 @@ watch([inputSearch, currentStatus], async () => {
 
   <div class="column full-height no-wrap">
     <div v-if="isMainPage" class="column full-height">
-      <div class="row full-width q-pb-md q-gutter-y-md">
-        <div class="col-sm-5 col-md-3 col-12 q-mr-md">
-          <SelectorList
-            clickable
-            :list="selectorList"
-            v-model:selector="selectorLabel"
-            class="full-height"
-          />
-        </div>
-
+      <div class="row full-width">
         <!-- stat -->
         <div class="col-12 col-sm bordered surface-1 rounded">
           <div class="text-weight-bold text-subtitle1 q-pa-md">

src/pages/04_product-service/MainPage.vue

@@ -1183,9 +1183,9 @@ watch(inputSearchProductAndService, async () => {
 
       <div
         v-if="productMode === 'group' || productMode === 'type'"
-        class="q-mb-md bordered rounded surface-1 scroll"
+        class="scroll q-mb-md"
       >
-        <div class="q-ma-md" style="display: inline-block">
+        <div style="display: inline-block">
           <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
         </div>
       </div>