From dab544512cfe4f5c7c1e6a706c88179a8e58f0b3 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 1 Oct 2024 11:31:42 +0700
Subject: [PATCH] refactor: show title

---
 .../components/employer/EmployerFormAbout.vue | 24 +++++++++++++++++++
 .../employer/EmployerFormBusiness.vue         | 16 +++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
index 83c785b6..7c94265a 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
@@ -13,6 +13,7 @@ const props = defineProps<{
   readonly?: boolean;
   prefixId?: string;
   customerType?: 'PERS' | 'CORP';
+  showTitle?: boolean;
 }>();
 
 const optionStore = useOptionStore();
@@ -95,6 +96,29 @@ watch(
 
 <template>
   <div class="row q-col-gutter-sm">
+    <div
+      v-if="showTitle"
+      class="col-12 text-weight-bold text-body1 row items-center"
+    >
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-briefcase-outline"
+        style="background-color: var(--surface-3)"
+      />
+      <span>
+        {{
+          $t('form.customerInformation', {
+            msg: $t(
+              `${customerType === 'CORP' ? 'customer.employerLegalEntity' : 'customer.employerNaturalPerson'}`,
+            ),
+          })
+        }}
+      </span>
+    </div>
+
     <template v-if="customerType === 'CORP'">
       <div class="col-12 row q-col-gutter-sm">
         <q-input
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
index 37e4736d..bdcf3aa2 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
@@ -28,6 +28,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   prefixId: string;
+  showTitle?: boolean;
 }>();
 
 onMounted(async () => {
@@ -102,6 +103,21 @@ let jobPositionENFilter = selectFilterOptionRefMod(
 </script>
 <template>
   <div class="col-12 row q-col-gutter-sm">
+    <div
+      v-if="showTitle"
+      class="col-12 text-weight-bold text-body1 row items-center"
+    >
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-briefcase-outline"
+        style="background-color: var(--surface-3)"
+      />
+      <span>{{ $t('customerBranch.tab.business') }}</span>
+    </div>
+
     <q-select
       outlined
       clearable