refactor: show title

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

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