fix: 02-personnel management layout

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

@@ -1,6 +1,8 @@
 export default {
   personnelTitle: 'Personnel',
   personnelManagement: 'Personnel Management',
+  personnelManagementCaption: 'Manage All Personnel',
+
   personnelTooltipTitle: 'No personnel yet?',
   personnelTooltipCaption: 'Click + to add a personnel',
   personnelAdd: 'Add personnel',

src/i18n/th-th/personnel-main-page.ts

@@ -1,6 +1,8 @@
 export default {
   personnelTitle: 'บุคลากร',
   personnelManagement: 'จัดการบุคลากร',
+  personnelManagementCaption: 'จัดการบุคลากรทั้งหมด',
+
   personnelTooltipTitle: 'ยังไม่มีข้อมูลบุคลากร',
   personnelTooltipCaption: 'คลิก + เพื่อเพิ่มบุคลากร',
   personnelAdd: 'เพิ่มบุคลากร',

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue';
 import { storeToRefs } from 'pinia';
-import { dialog } from 'src/stores/utils';
+import useUtilsStore, { dialog } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
 import useUserStore from 'stores/user';
@@ -34,6 +34,7 @@ import PaginationComponent from 'src/components/PaginationComponent.vue';
 
 const { locale } = useI18n();
 
+const utilsStore = useUtilsStore();
 const flowStore = useFlowStore();
 const userStore = useUserStore();
 const branchStore = useBranchStore();
@@ -466,6 +467,9 @@ async function assignFormData(idEdit: string) {
 }
 
 onMounted(async () => {
+  utilsStore.currentTitle.title = 'personnelManagement';
+  utilsStore.currentTitle.caption = 'personnelManagementCaption';
+
   await fetchUserList();
 
   userStore.userOption.roleOpts.length === 0
@@ -548,12 +552,12 @@ watch(inputSearch, async () => await fetchUserList());
     ></q-fab-action>
   </ButtonAddComponent>
 
-  <div class="column q-pb-lg">
+  <div class="column full-height">
-    <div class="text-h6 text-weight-bold q-mb-md">
+    <!-- <div class="text-h6 text-weight-bold q-mb-md">
       {{ $t('personnelManagement') }}
-    </div>
+    </div> -->
 
-    <div class="row full-width q-mb-md no-wrap">
+    <div class="row full-width no-wrap q-pb-md">
       <!-- selector -->
       <SelectorList
         :list="selectorList"
@@ -587,7 +591,10 @@ watch(inputSearch, async () => await fetchUserList());
     </div>
 
     <!-- main -->
-    <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
+    <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">
           <q-btn
             id="btn-filter"
@@ -647,7 +654,10 @@ watch(inputSearch, async () => await fetchUserList());
           :list="
             userData?.result
               .filter((v) => {
-              if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
+                if (
+                  statusFilter === 'statusACTIVE' &&
+                  v.status === 'INACTIVE'
+                ) {
                   return false;
                 }
                 if (
@@ -713,6 +723,8 @@ watch(inputSearch, async () => await fetchUserList());
         >
           <NoData :not-found="!!inputSearch" />
         </div>
+      </div>
+
       <div class="row justify-between q-pt-md" v-if="currentMaxPage > 0">
         <div class="app-text-muted">
           {{
@@ -728,7 +740,7 @@ watch(inputSearch, async () => await fetchUserList());
           :fetch-data="async () => await fetchUserList()"
         />
       </div>
-    </AppBox>
+    </div>
   </div>
 
   <DrawerInfo

src/pages/MainPage.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import MenuItem from 'components/home/MenuItem.vue';
+import useUtilsStore from 'src/stores/utils';
+import { onMounted } from 'vue';
 
+const utilsStore = useUtilsStore();
 const menu = [
   {
     value: 'branch-management',
@@ -93,10 +96,17 @@ const menu = [
     disabled: true,
   },
 ] satisfies InstanceType<typeof MenuItem>['$props']['list'];
+
+onMounted(() => {
+  utilsStore.currentTitle.title = '';
+  utilsStore.currentTitle.caption = '';
+});
 </script>
 
 <template>
+  <div>
     <MenuItem :list="menu" />
+  </div>
 </template>
 
 <style scoped>