fix: แก้ปุ่มในการสร้าง

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

@@ -13,7 +13,7 @@ import {
 } from 'src/stores/user/types';
 import { BranchUserStats } from 'src/stores/branch/types';
 import useAddressStore from 'src/stores/address';
-
+import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
 import PersonCard from 'components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
@@ -539,6 +539,18 @@ watch(
 </script>
 
 <template>
+  <ButtonAddComponent style="z-index: 999">
+    <q-fab-action
+      :label="$t('personnelAdd')"
+      external-label
+      label-position="left"
+      @click="openDialog('FORM')"
+      color="primary"
+      padding="xs"
+      icon="mdi-account-plus"
+    ></q-fab-action>
+  </ButtonAddComponent>
+
   <div class="column q-pb-lg">
     <div class="text-h6 text-weight-bold q-mb-md">
       {{ $t('personnelManagement') }}
@@ -559,16 +571,6 @@ watch(
             {{ $t('personnelStatTitle') }}
             {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
           </div>
-          <q-btn
-            id="btn-add-personnel"
-            dense
-            unelevated
-            icon="mdi-plus"
-            :label="$t('personnelAdd')"
-            padding="4px 16px"
-            @click="openDialog('FORM')"
-            style="background-color: var(--cyan-6); color: white"
-          />
         </div>
         <div class="row full-width" style="overflow-x: auto">
           <StatCardComponent