fix: 03-customer management layout

src/i18n/en-US/branch.ts

@@ -6,7 +6,7 @@ export default {
   branchHQLabel: 'Headquarters',
   branchName: 'Branch Name',
   branchAdd: 'Add Branch / Head Office',
-  branchManagement: 'Manage Branch',
+  branchManagement: 'Branch Management',
   branchNoMainOfficeYet: 'No head office yet?',
   branchClickToCreateMainOffice: 'Click "+" to create head office.',
 

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

@@ -1,5 +1,7 @@
 export default {
-  customerManagement: 'Manage customers',
+  customerManagement: 'Customers Management',
+  customerManagementCaption: 'Manage All Customer',
+
   customerEmployerTooltipTitle: 'No employer data yet',
   customerEmployeeTooltipTitle: 'No employee data yet',
   customerEmployerTooltipCaption: 'Click + to add an employer',

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

@@ -1,5 +1,7 @@
 export default {
   customerManagement: 'จัดการลูกค้า',
+  customerManagementCaption: 'จัดการลูกค้าทั้งหมด',
+
   customerEmployerTooltipTitle: 'ยังไม่มีข้อมูลนายจ้าง',
   customerEmployeeTooltipTitle: 'ยังไม่มีข้อมูลลูกจ้าง',
   customerEmployerTooltipCaption: 'คลิก + เพื่อเพิ่มนายจ้าง',

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

@@ -55,12 +55,12 @@ import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormE
 import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
 import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
 import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
-import { dialog, calculateAge } from 'src/stores/utils';
+import useUtilsStore, { dialog, calculateAge } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
 
 const { t, locale } = useI18n();
-
+const utilsStore = useUtilsStore();
 const userCustomer = useCustomerStore();
 const {
   create,
@@ -1091,6 +1091,9 @@ async function openHistory(id: string) {
 }
 
 onMounted(async () => {
+  utilsStore.currentTitle.title = 'customerManagement';
+  utilsStore.currentTitle.caption = 'customerManagementCaption';
+
   const resultStats = await getStatsCustomer();
 
   const resultList = await fetchList({
@@ -1261,12 +1264,8 @@ watch([inputSearch, currentStatus], async () => {
     ></q-fab-action>
   </ButtonAddComponent>
 
-  <div class="column q-pb-lg">
+  <div class="column full-height no-wrap">
-    <div class="text-h6 text-weight-bold q-mb-md">
+    <div v-if="isMainPage" class="column full-height">
-      {{ $t('customerManagement') }}
-    </div>
-
-    <div v-if="isMainPage">
       <div class="row full-width q-mb-md no-wrap">
         <SelectorList
           clickable
@@ -1325,7 +1324,7 @@ watch([inputSearch, currentStatus], async () => {
       </div>
 
       <!-- main -->
-      <AppBox bordered class="column" style="width: 100%; min-height: 70vh">
+      <div class="surface-1 bordered rounded q-pa-md scroll col">
         <div class="row q-pb-md">
           <div class="col">
             <q-select
@@ -1461,7 +1460,6 @@ watch([inputSearch, currentStatus], async () => {
           >
             <NoData :not-found="!!inputSearch" />
           </div>
-
           <div
             v-if="listCustomer.length !== 0"
             class="row full-width customer-row"
@@ -1676,7 +1674,7 @@ watch([inputSearch, currentStatus], async () => {
             />
           </div>
         </template>
-      </AppBox>
+      </div>
     </div>
     <div v-else>
       <CustomerInfoComponent