feat: Personnel => layout

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

@@ -1,6 +1,14 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 import PersonCard from 'src/components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
+import StatCardComponet from 'components/StatCardComponet.vue';
+import SelectorList from 'src/components/SelectorList.vue';
+// import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
+// import TooltipComponet from 'src/components/TooltipComponet.vue';
+
+const selectorLabel = ref('');
 
 const person = [
   {
@@ -47,6 +55,7 @@ const person = [
       { label: 'ตำแหน่ง', value: '32 ปี' },
     ],
     female: true,
+    disabled: true,
   },
   {
     name: 'นางสาวสุขใจ แสนดี',
@@ -58,21 +67,78 @@ const person = [
       { label: 'ตำแหน่ง', value: '32 ปี' },
     ],
     female: true,
-    disabled: true,
   },
 ] satisfies InstanceType<typeof PersonCard>['$props']['list'];
+
+const branchStat = ref<
+  {
+    amount: string;
+    label: string;
+  }[]
+>([
+  {
+    amount: '1',
+    label: 'สำนักงานใหญ่ 1',
+  },
+
+  {
+    amount: '2',
+    label: 'สำนักงานใหญ่ 2',
+  },
+  {
+    amount: '3',
+    label: 'สำนักงานใหญ่ 3',
+  },
+  {
+    amount: '4',
+    label: 'สำนักงานใหญ่ 4',
+  },
+  {
+    amount: '5',
+    label: 'สำนักงานใหญ่ 5',
+  },
+]);
+
+const selectorList = [
+  {
+    label: 'พนักงาน',
+    count: 0,
+  },
+  {
+    label: 'พนักงานส่งเอกสาร',
+    count: 0,
+  },
+  {
+    label: 'ตัวแทน',
+    count: 0,
+  },
+  {
+    label: 'เอเจนซี่',
+    count: 0,
+  },
+] satisfies InstanceType<typeof SelectorList>['$props']['list'];
 </script>
 
 <template>
-  <div class="column">
-    <div class="row text-h6 text-weight-bold q-mb-md">จัดการบุคลากร</div>
+  <div class="column q-pb-lg">
+    <div class="text-h6 text-weight-bold q-mb-md">จัดการบุคลากร</div>
 
-    <AppBox bordered style="width: 100%; height: 580px">
-      <q-scroll-area style="height: 100%">
-        <div class="column" style="height: 100%">
-          <PersonCard :list="person" class="q-mb-md" />
-        </div>
-      </q-scroll-area>
+    <div class="row full-width q-mb-md no-wrap">
+      <!-- selector -->
+      <SelectorList :list="selectorList" v-model:selector="selectorLabel" />
+
+      <!-- stat -->
+      <AppBox bordered class="row col-glow" style="overflow-x: auto">
+        <span class="text-weight-bold text-subtitle1">
+          สรุปจำนวนข้อมูล{{ selectorLabel }}
+        </span>
+        <stat-card-componet :branch="branchStat" class="no-wrap" />
+      </AppBox>
+    </div>
+
+    <!-- main -->
+    <AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
+      <PersonCard :list="person" class="q-mb-md" />
     </AppBox>
   </div>
 </template>