feat: Personnel => tooltip, add btn, selector

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

@@ -5,8 +5,8 @@ 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';
+import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
+import TooltipComponet from 'src/components/TooltipComponet.vue';
 
 const selectorLabel = ref('');
 
@@ -77,25 +77,24 @@ const branchStat = ref<
   }[]
 >([
   {
-    amount: '1',
-    label: 'สำนักงานใหญ่ 1',
-  },
-
-  {
-    amount: '2',
-    label: 'สำนักงานใหญ่ 2',
+    amount: '0',
+    label: '-',
   },
   {
-    amount: '3',
-    label: 'สำนักงานใหญ่ 3',
+    amount: '0',
+    label: '-',
   },
   {
-    amount: '4',
-    label: 'สำนักงานใหญ่ 4',
+    amount: '0',
+    label: '-',
   },
   {
-    amount: '5',
-    label: 'สำนักงานใหญ่ 5',
+    amount: '0',
+    label: '-',
+  },
+  {
+    amount: '0',
+    label: '-',
   },
 ]);
 
@@ -121,24 +120,54 @@ const selectorList = [
 
 <template>
   <div class="column q-pb-lg">
-    <div class="text-h6 text-weight-bold q-mb-md">จัดการบุคลากร</div>
+    <div class="text-h6 text-weight-bold q-mb-md">
+      {{ $t('personnelManagement') }}
+    </div>
 
     <div class="row full-width q-mb-md no-wrap">
       <!-- selector -->
-      <SelectorList :list="selectorList" v-model:selector="selectorLabel" />
+      <SelectorList
+        :list="selectorList"
+        v-model:selector="selectorLabel"
+        class="q-mr-md col-4"
+      />
 
       <!-- stat -->
-      <AppBox bordered class="row col-glow" style="overflow-x: auto">
+      <AppBox bordered class="column full-width" style="overflow-x: auto">
         <span class="text-weight-bold text-subtitle1">
           สรุปจำนวนข้อมูล{{ selectorLabel }}
         </span>
-        <stat-card-componet :branch="branchStat" class="no-wrap" />
+        <div class="row q-pt-lg">
+          <stat-card-componet :branch="branchStat" class="no-wrap" />
+        </div>
       </AppBox>
     </div>
 
     <!-- main -->
     <AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
-      <PersonCard :list="person" class="q-mb-md" />
+      <!-- <PersonCard :list="person" class="q-mb-md" /> -->
+      <div class="column" style="height: 100%">
+        <div class="col-1 self-end">
+          <div class="row">
+            <tooltip-componet
+              title="personnelTooltipTitle"
+              caption="personnelTooltipCaption"
+              imgSrc="personnel-table-"
+            />
+          </div>
+        </div>
+
+        <div class="col self-center" style="display: flex; align-items: center">
+          <btn-add-componet
+            :label="'เพิ่มข้อมูลบุคลากร'"
+            @trigger="
+              () => {
+                console.log('test');
+              }
+            "
+          />
+        </div>
+      </div>
     </AppBox>
   </div>
 </template>