From 2b56c26e1bd64c6297b50f99f7cf1b211f4e6c1a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 10 Jun 2024 11:25:38 +0000
Subject: [PATCH] feat: employee form (passport, visa, work, other)

---
 .../02_personnel-management/FormAddress.vue   | 442 +++++++++---------
 .../BasicInformation.vue                      |   6 +-
 .../FormEmployeeOther.vue                     | 163 +++++++
 .../FormEmployeePassport.vue                  | 223 +++++++++
 .../FormEmployeeVisa.vue                      | 290 ++++++++++++
 .../FormEmployeeWorkHistory.vue               | 288 ++++++++++++
 src/pages/03_customer-management/MainPage.vue | 396 ++++++++++++++--
 7 files changed, 1542 insertions(+), 266 deletions(-)
 create mode 100644 src/components/03_customer-management/FormEmployeeOther.vue
 create mode 100644 src/components/03_customer-management/FormEmployeePassport.vue
 create mode 100644 src/components/03_customer-management/FormEmployeeVisa.vue
 create mode 100644 src/components/03_customer-management/FormEmployeeWorkHistory.vue

diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index d1f4c889..4b090166 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -75,228 +75,232 @@ watch(provinceId, fetchDistrict);
 watch(districtId, fetchSubDistrict);
 </script>
 <template>
-  <div class="col-12 app-text-muted row items-center">
-    • {{ title || $t('formDialogTitlePersonnelAddress') }}
-    <div
-      v-if="employee"
-      class="q-ml-lg surface-3 q-px-sm q-py-xs row"
-      style="border-radius: var(--radius-3)"
-    >
-      <span
-        class="q-px-sm q-mr-lg rounded cursor-pointer"
-        :class="{ dark: $q.dark.isActive, 'active-addr': sameWithEmployer }"
-        @click="sameWithEmployer = true"
+  <div class="col-12">
+    <div class="col-12 app-text-muted row items-center q-mb-md">
+      • {{ title || $t('formDialogTitlePersonnelAddress') }}
+      <div
+        v-if="employee"
+        class="q-ml-lg surface-3 q-px-sm q-py-xs row"
+        style="border-radius: var(--radius-3)"
       >
-        เลือกที่อยู่ตามนายจ้าง
-      </span>
-      <span
-        class="q-px-sm rounded cursor-pointer"
-        :class="{ dark: $q.dark.isActive, 'active-addr': !sameWithEmployer }"
-        @click="sameWithEmployer = false"
-      >
-        กำหนดเอง
-      </span>
+        <span
+          class="q-px-sm q-mr-lg rounded cursor-pointer"
+          :class="{ dark: $q.dark.isActive, 'active-addr': sameWithEmployer }"
+          @click="sameWithEmployer = true"
+        >
+          {{ $t('formDialogToggleSameAddress') }}
+        </span>
+        <span
+          class="q-px-sm rounded cursor-pointer"
+          :class="{ dark: $q.dark.isActive, 'active-addr': !sameWithEmployer }"
+          @click="sameWithEmployer = false"
+        >
+          {{ $t('formDialogToggleCustomAddress') }}
+        </span>
+      </div>
     </div>
-  </div>
 
-  <div class="col-12 row q-col-gutter-y-md">
-    <div class="col-3 q-pl-xl app-text-muted">
-      {{ addressTitle || $t('formDialogTitleAddressPure') }}
-    </div>
-    <div class="col-9 row q-col-gutter-md">
-      <q-input
-        for="input-address"
-        :dense="dense"
-        :outlined="readonly ? false : outlined"
-        :readonly="readonly || sameWithEmployer"
-        :borderless="readonly"
-        hide-bottom-space
-        :label="$t('address')"
-        class="col-12"
-        v-model="address"
-        lazy-rules
-        :rules="[
-          (val) =>
-            (val && val.length > 0) || $t('formDialogInputAddressValidate'),
-        ]"
-      />
-      <q-select
-        id="select-province"
-        :dense="dense"
-        :readonly="readonly || sameWithEmployer"
-        :outlined="readonly ? false : outlined"
-        :hide-dropdown-icon="readonly || sameWithEmployer"
-        :borderless="readonly"
-        hide-bottom-space
-        emit-value
-        map-options
-        v-model="provinceId"
-        option-value="id"
-        option-label="name"
-        :label="$t('province')"
-        class="col-3"
-        :options="addrOptions.provinceOps"
-        lazy-rules
-        :rules="[
-          (val) =>
-            (val && val.length > 0) || $t('formDialogInputProvinceValidate'),
-        ]"
-        @update:model-value="districtId = subDistrictId = zipCode = null"
-      />
-      <q-select
-        id="select-district"
-        :dense="dense"
-        :readonly="readonly || sameWithEmployer"
-        :outlined="readonly ? false : outlined"
-        :hide-dropdown-icon="readonly || sameWithEmployer"
-        :borderless="readonly"
-        hide-bottom-space
-        emit-value
-        map-options
-        v-model="districtId"
-        option-value="id"
-        option-label="name"
-        :label="$t('district')"
-        class="col-3"
-        :options="addrOptions.districtOps"
-        lazy-rules
-        :rules="[
-          (val) =>
-            (val && val.length > 0) || $t('formDialogInputDistrictValidate'),
-        ]"
-        @update:model-value="subDistrictId = zipCode = null"
-      />
-      <q-select
-        id="select-sub-district"
-        :dense="dense"
-        :readonly="readonly || sameWithEmployer"
-        :outlined="readonly ? false : outlined"
-        :hide-dropdown-icon="readonly || sameWithEmployer"
-        :borderless="readonly"
-        hide-bottom-space
-        emit-value
-        map-options
-        v-model="subDistrictId"
-        option-value="id"
-        option-label="name"
-        :label="$t('subDistrict')"
-        class="col-3"
-        :options="addrOptions.subDistrictOps"
-        lazy-rules
-        :rules="[
-          (val) =>
-            (val && val.length > 0) || $t('formDialogInputSubDistrictValidate'),
-        ]"
-        @update:model-value="(v: string) => selectSubDistrict(v)"
-      />
-      <q-input
-        for="input-zip-code"
-        :dense="dense"
-        :outlined="readonly ? false : outlined"
-        :borderless="readonly"
-        readonly
-        :label="$t('zipCode')"
-        class="col-3"
-        v-model="zipCode"
-      />
-    </div>
-    <div class="col-3 q-pl-xl app-text-muted">
-      {{ addressTitleEN || $t('formDialogTitleAddressPure') }}
-    </div>
-    <div class="col-9 row q-col-gutter-md">
-      <q-input
-        for="input-address-en"
-        :dense="dense"
-        :readonly="readonly || sameWithEmployer"
-        :outlined="readonly ? false : outlined"
-        :borderless="readonly"
-        hide-bottom-space
-        :label="$t('address')"
-        class="col-12"
-        v-model="addressEN"
-        lazy-rules
-        :rules="[
-          (val) =>
-            (val && val.length > 0) || $t('formDialogInputAddressValidate'),
-        ]"
-      />
-      <q-select
-        id="select-province-en"
-        :dense="dense"
-        :readonly="readonly || sameWithEmployer"
-        :outlined="readonly ? false : outlined"
-        :borderless="readonly"
-        :hide-dropdown-icon="readonly || sameWithEmployer"
-        emit-value
-        map-options
-        v-model="provinceId"
-        option-value="id"
-        option-label="nameEN"
-        :label="$t('province')"
-        class="col-3"
-        :options="addrOptions.provinceOps"
-        lazy-rules
-        :rules="[
-          (val) =>
-            (val && val.length > 0) || $t('formDialogInputProvinceValidate'),
-        ]"
-        @update:model-value="districtId = subDistrictId = zipCode = null"
-      />
-      <q-select
-        id="select-district-en"
-        :dense="dense"
-        :readonly="readonly || sameWithEmployer"
-        :outlined="readonly ? false : outlined"
-        :borderless="readonly"
-        :hide-dropdown-icon="readonly || sameWithEmployer"
-        emit-value
-        map-options
-        v-model="districtId"
-        option-value="id"
-        option-label="nameEN"
-        :label="$t('district')"
-        class="col-3"
-        :options="addrOptions.districtOps"
-        lazy-rules
-        :rules="[
-          (val) =>
-            (val && val.length > 0) || $t('formDialogInputDistrictValidate'),
-        ]"
-        @update:model-value="subDistrictId = zipCode = null"
-      />
-      <q-select
-        id="select-sub-district-en"
-        :dense="dense"
-        :readonly="readonly || sameWithEmployer"
-        :outlined="readonly ? false : outlined"
-        :borderless="readonly"
-        :hide-dropdown-icon="readonly || sameWithEmployer"
-        emit-value
-        map-options
-        v-model="subDistrictId"
-        option-value="id"
-        option-label="nameEN"
-        :label="$t('subDistrict')"
-        class="col-3"
-        :options="addrOptions.subDistrictOps"
-        lazy-rules
-        :rules="[
-          (val) =>
-            (val && val.length > 0) || $t('formDialogInputSubDistrictValidate'),
-        ]"
-        @update:model-value="(v: string) => selectSubDistrict(v)"
-      />
-      <q-input
-        for="input-zip-code"
-        :dense="dense"
-        :outlined="readonly ? false : outlined"
-        :borderless="readonly"
-        readonly
-        zip="zip-en"
-        :label="$t('zipCode')"
-        class="col-3"
-        v-model="zipCode"
-      />
+    <div class="col-12 row q-col-gutter-y-md">
+      <div class="col-3 q-pl-xl app-text-muted">
+        {{ addressTitle || $t('formDialogTitleAddressPure') }}
+      </div>
+      <div class="col-9 row q-col-gutter-md">
+        <q-input
+          for="input-address"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly || sameWithEmployer"
+          :borderless="readonly"
+          hide-bottom-space
+          :label="$t('address')"
+          class="col-12"
+          v-model="address"
+          lazy-rules
+          :rules="[
+            (val) =>
+              (val && val.length > 0) || $t('formDialogInputAddressValidate'),
+          ]"
+        />
+        <q-select
+          id="select-province"
+          :dense="dense"
+          :readonly="readonly || sameWithEmployer"
+          :outlined="readonly ? false : outlined"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          :borderless="readonly"
+          hide-bottom-space
+          emit-value
+          map-options
+          v-model="provinceId"
+          option-value="id"
+          option-label="name"
+          :label="$t('province')"
+          class="col-3"
+          :options="addrOptions.provinceOps"
+          lazy-rules
+          :rules="[
+            (val) =>
+              (val && val.length > 0) || $t('formDialogInputProvinceValidate'),
+          ]"
+          @update:model-value="districtId = subDistrictId = zipCode = null"
+        />
+        <q-select
+          id="select-district"
+          :dense="dense"
+          :readonly="readonly || sameWithEmployer"
+          :outlined="readonly ? false : outlined"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          :borderless="readonly"
+          hide-bottom-space
+          emit-value
+          map-options
+          v-model="districtId"
+          option-value="id"
+          option-label="name"
+          :label="$t('district')"
+          class="col-3"
+          :options="addrOptions.districtOps"
+          lazy-rules
+          :rules="[
+            (val) =>
+              (val && val.length > 0) || $t('formDialogInputDistrictValidate'),
+          ]"
+          @update:model-value="subDistrictId = zipCode = null"
+        />
+        <q-select
+          id="select-sub-district"
+          :dense="dense"
+          :readonly="readonly || sameWithEmployer"
+          :outlined="readonly ? false : outlined"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          :borderless="readonly"
+          hide-bottom-space
+          emit-value
+          map-options
+          v-model="subDistrictId"
+          option-value="id"
+          option-label="name"
+          :label="$t('subDistrict')"
+          class="col-3"
+          :options="addrOptions.subDistrictOps"
+          lazy-rules
+          :rules="[
+            (val) =>
+              (val && val.length > 0) ||
+              $t('formDialogInputSubDistrictValidate'),
+          ]"
+          @update:model-value="(v: string) => selectSubDistrict(v)"
+        />
+        <q-input
+          for="input-zip-code"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :borderless="readonly"
+          readonly
+          :label="$t('zipCode')"
+          class="col-3"
+          v-model="zipCode"
+        />
+      </div>
+      <div class="col-3 q-pl-xl app-text-muted">
+        {{ addressTitleEN || $t('formDialogTitleAddressPureEN') }}
+      </div>
+      <div class="col-9 row q-col-gutter-md">
+        <q-input
+          for="input-address-en"
+          :dense="dense"
+          :readonly="readonly || sameWithEmployer"
+          :outlined="readonly ? false : outlined"
+          :borderless="readonly"
+          hide-bottom-space
+          :label="$t('address')"
+          class="col-12"
+          v-model="addressEN"
+          lazy-rules
+          :rules="[
+            (val) =>
+              (val && val.length > 0) || $t('formDialogInputAddressValidate'),
+          ]"
+        />
+        <q-select
+          id="select-province-en"
+          :dense="dense"
+          :readonly="readonly || sameWithEmployer"
+          :outlined="readonly ? false : outlined"
+          :borderless="readonly"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          emit-value
+          map-options
+          v-model="provinceId"
+          option-value="id"
+          option-label="nameEN"
+          :label="$t('province')"
+          class="col-3"
+          :options="addrOptions.provinceOps"
+          lazy-rules
+          :rules="[
+            (val) =>
+              (val && val.length > 0) || $t('formDialogInputProvinceValidate'),
+          ]"
+          @update:model-value="districtId = subDistrictId = zipCode = null"
+        />
+        <q-select
+          id="select-district-en"
+          :dense="dense"
+          :readonly="readonly || sameWithEmployer"
+          :outlined="readonly ? false : outlined"
+          :borderless="readonly"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          emit-value
+          map-options
+          v-model="districtId"
+          option-value="id"
+          option-label="nameEN"
+          :label="$t('district')"
+          class="col-3"
+          :options="addrOptions.districtOps"
+          lazy-rules
+          :rules="[
+            (val) =>
+              (val && val.length > 0) || $t('formDialogInputDistrictValidate'),
+          ]"
+          @update:model-value="subDistrictId = zipCode = null"
+        />
+        <q-select
+          id="select-sub-district-en"
+          :dense="dense"
+          :readonly="readonly || sameWithEmployer"
+          :outlined="readonly ? false : outlined"
+          :borderless="readonly"
+          :hide-dropdown-icon="readonly || sameWithEmployer"
+          emit-value
+          map-options
+          v-model="subDistrictId"
+          option-value="id"
+          option-label="nameEN"
+          :label="$t('subDistrict')"
+          class="col-3"
+          :options="addrOptions.subDistrictOps"
+          lazy-rules
+          :rules="[
+            (val) =>
+              (val && val.length > 0) ||
+              $t('formDialogInputSubDistrictValidate'),
+          ]"
+          @update:model-value="(v: string) => selectSubDistrict(v)"
+        />
+        <q-input
+          for="input-zip-code"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :borderless="readonly"
+          readonly
+          zip="zip-en"
+          :label="$t('zipCode')"
+          class="col-3"
+          v-model="zipCode"
+        />
+      </div>
     </div>
   </div>
   <q-separator
diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 53c30c0d..a3de9d17 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -6,11 +6,11 @@ const taxNo = defineModel<string | null | undefined>('taxNo');
 const employerID = defineModel<string>('employerID');
 
 // employee
+const customerBranchId = defineModel<string>('customerBranchId');
 const employeeID = defineModel<string>('employeeID');
 const nrcNo = defineModel<string>('nrcNo');
 
 defineProps<{
-  title?: string;
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
@@ -79,12 +79,12 @@ defineProps<{
       hide-bottom-space
       class="col-3"
       :label="$t('formDialogEmployerID')"
-      v-model="employerID"
+      v-model="customerBranchId"
     />
     <q-input
       :dense="dense"
       :outlined="!readonly"
-      :readonly="readonly"
+      :readonly="true"
       :borderless="readonly"
       hide-bottom-space
       class="col-3"
diff --git a/src/components/03_customer-management/FormEmployeeOther.vue b/src/components/03_customer-management/FormEmployeeOther.vue
new file mode 100644
index 00000000..b44f7582
--- /dev/null
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { EmployeeOtherCreate } from 'stores/employee/types';
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+  employee?: boolean;
+}>();
+const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
+</script>
+<template>
+  <div class="col-12" v-if="employeeOther">
+    <div class="col-12 app-text-muted row items-center q-mb-md">
+      • {{ $t('formDialogTitleFamilyHistory') }}
+    </div>
+
+    <div class="col-12 row q-col-gutter-y-md">
+      <div class="col-3 q-pl-xl"></div>
+      <div class="col-9 row q-col-gutter-md">
+        <q-input
+          for="input-citizenId"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          :label="$t('formDialogInputCitizenId')"
+          class="col"
+          v-model="employeeOther.citizenId"
+          lazy-rules
+        />
+      </div>
+      <div class="col-3 q-pl-xl app-text-muted">
+        {{ $t('formDialogTitleFamilyHistoryDad') }}
+      </div>
+      <div class="col-9 row q-col-gutter-md">
+        <q-input
+          for="input-father-first-name"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputFirstName')"
+          v-model="employeeOther.fatherFirstName"
+        />
+        <q-input
+          for="input-father-last-name"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputLastName')"
+          v-model="employeeOther.fatherLastName"
+        />
+        <q-input
+          for="input-father-first-name-en"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputFirstNameEN')"
+          v-model="employeeOther.fatherFirstNameEN"
+        />
+        <q-input
+          for="input-father-last-name-en"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputLastNameEN')"
+          v-model="employeeOther.fatherLastNameEN"
+        />
+        <q-input
+          for="input-father-birthplace"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-6"
+          :label="$t('formDialogInputFamilyBirthPlace')"
+          v-model="employeeOther.birthPlace"
+        />
+      </div>
+      <div class="col-12" />
+      <div class="col-3 q-pl-xl app-text-muted">
+        {{ $t('formDialogTitleFamilyHistoryMom') }}
+      </div>
+      <div class="col-9 row q-col-gutter-md">
+        <q-input
+          for="input-mother-first-name"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputFirstName')"
+          v-model="employeeOther.motherFirstName"
+        />
+        <q-input
+          for="input-mother-last-name"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputLastName')"
+          v-model="employeeOther.motherLastName"
+        />
+        <q-input
+          for="input-mother-first-name-en"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputFirstNameEN')"
+          v-model="employeeOther.motherFirstNameEN"
+        />
+        <q-input
+          for="input-mother-last-name-en"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-3"
+          :label="$t('formDialogInputLastNameEN')"
+          v-model="employeeOther.motherLastNameEN"
+        />
+        <q-input
+          for="input-mother-birthplace"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          hide-bottom-space
+          class="col-6"
+          :label="$t('formDialogInputFamilyBirthPlace')"
+          v-model="employeeOther.birthPlace"
+        />
+      </div>
+    </div>
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mb-md"
+    style="padding-block: 0.5px; margin-top: 32px"
+  />
+</template>
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
new file mode 100644
index 00000000..36c4f837
--- /dev/null
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
+import { dateFormat } from 'src/utils/datetime';
+import useAddressStore, {
+  District,
+  Province,
+  SubDistrict,
+} from 'src/stores/address';
+
+const adrressStore = useAddressStore();
+
+const addrOptions = reactive<{
+  provinceOps: Province[];
+  districtOps: District[];
+  subDistrictOps: SubDistrict[];
+}>({
+  provinceOps: [],
+  districtOps: [],
+  subDistrictOps: [],
+});
+
+const passportType = defineModel<string>('passportType');
+const passportNumber = defineModel<string>('passportNumber');
+const passportIssueDate = defineModel<Date>('passportIssueDate');
+const passportExpiryDate = defineModel<Date>('passportExpiryDate');
+const passportIssuingCountry = defineModel<string>('passportIssuingCountry');
+const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
+const previousPassportReference = defineModel<string>(
+  'previousPassportReference',
+);
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+  typeCustomer?: string;
+}>();
+
+async function fetchProvince() {
+  const result = await adrressStore.fetchProvince();
+
+  if (result) addrOptions.provinceOps = result;
+}
+
+onMounted(async () => {
+  await fetchProvince();
+});
+</script>
+
+<template>
+  <div class="col-3 app-text-muted">• {{ $t(`formDialogTitlePassport`) }}</div>
+  <div class="col-9 row q-col-gutter-md">
+    <q-select
+      id="select-positionName"
+      :dense="dense"
+      :readonly="readonly"
+      :outlined="readonly ? false : outlined"
+      :hide-dropdown-icon="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      emit-value
+      map-options
+      v-model="passportType"
+      option-value="id"
+      option-label="name"
+      :label="$t('formDialogInputPassportType')"
+      class="col-3"
+      :options="addrOptions.provinceOps"
+      lazy-rules
+    />
+    <q-input
+      for="input-ownerName"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-3"
+      :label="$t('formDialogInputPassportNo')"
+      v-model="passportNumber"
+    />
+    <q-input
+      for="input-ownerName"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="$t('formDialogInputPassportRef')"
+      v-model="previousPassportReference"
+    />
+    <q-input
+      for="input-ownerName"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-3"
+      :label="$t('formDialogInputWPasspornPlace')"
+      v-model="passportIssuingPlace"
+    />
+    <q-select
+      id="select-jobType"
+      :dense="dense"
+      :readonly="readonly"
+      :outlined="readonly ? false : outlined"
+      :hide-dropdown-icon="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      emit-value
+      map-options
+      v-model="passportIssuingCountry"
+      option-value="id"
+      option-label="nameEN"
+      :label="$t('formDialogInputPassportCountry')"
+      class="col-3"
+      :options="addrOptions.provinceOps"
+      lazy-rules
+    />
+    <VueDatePicker
+      id="date-picker-workEndDate"
+      utc
+      autoApply
+      :teleport="true"
+      v-model="passportIssueDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-3"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          id="input-birth-date"
+          :label="$t('formDialogInputPassportIssuance')"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          :model-value="passportIssueDate ? dateFormat(passportIssueDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="positive"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="passportIssueDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="passportIssueDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+    <VueDatePicker
+      id="date-picker-workPermitIssuDate"
+      utc
+      autoApply
+      :teleport="true"
+      v-model="passportExpiryDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-3"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          id="input-birth-date"
+          :label="$t('formDialogInputPassportExpire')"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          :model-value="
+            passportExpiryDate ? dateFormat(passportExpiryDate) : ''
+          "
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="positive"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="passportExpiryDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="passportExpiryDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+  </div>
+
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
new file mode 100644
index 00000000..3bb7fb90
--- /dev/null
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
+import { dateFormat } from 'src/utils/datetime';
+import useAddressStore, {
+  District,
+  Province,
+  SubDistrict,
+} from 'src/stores/address';
+
+const adrressStore = useAddressStore();
+
+const addrOptions = reactive<{
+  provinceOps: Province[];
+  districtOps: District[];
+  subDistrictOps: SubDistrict[];
+}>({
+  provinceOps: [],
+  districtOps: [],
+  subDistrictOps: [],
+});
+
+const visaType = defineModel<string>('visaType');
+const visaNumber = defineModel<string>('visaNumber');
+const visaIssueDate = defineModel<Date>('visaIssueDate');
+const visaExpiryDate = defineModel<Date>('visaExpiryDate');
+const visaIssuingPlace = defineModel<string>('visaIssuingPlace');
+const visaStayUntilDate = defineModel<Date>('visaStayUntilDate');
+const tm6Number = defineModel<string>('tm6Number');
+const entryDate = defineModel<Date>('entryDate');
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+  typeCustomer?: string;
+}>();
+
+async function fetchProvince() {
+  const result = await adrressStore.fetchProvince();
+
+  if (result) addrOptions.provinceOps = result;
+}
+
+onMounted(async () => {
+  await fetchProvince();
+});
+</script>
+
+<template>
+  <div class="col-3 app-text-muted">• {{ $t(`formDialogTitleVisa`) }}</div>
+  <div class="col-9 row q-col-gutter-md">
+    <q-select
+      id="select-positionName"
+      :dense="dense"
+      :readonly="readonly"
+      :outlined="readonly ? false : outlined"
+      :hide-dropdown-icon="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      emit-value
+      map-options
+      v-model="visaType"
+      option-value="id"
+      option-label="name"
+      :label="$t('formDialogInputVisaType')"
+      class="col-3"
+      :options="addrOptions.provinceOps"
+      lazy-rules
+    />
+    <q-input
+      for="input-ownerName"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-3"
+      :label="$t('formDialogInputVisaNo')"
+      v-model="visaNumber"
+    />
+    <VueDatePicker
+      id="date-picker-workPermitIssuDate"
+      utc
+      autoApply
+      :teleport="true"
+      v-model="visaIssueDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-3"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          id="input-birth-date"
+          :label="$t('formDialogInputVisaIssuance')"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          :model-value="visaIssueDate ? dateFormat(visaIssueDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="positive"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="visaIssueDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="visaIssueDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+    <VueDatePicker
+      id="date-picker-workPermitIssuDate"
+      utc
+      autoApply
+      :teleport="true"
+      v-model="visaExpiryDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-3"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          id="input-birth-date"
+          :label="$t('formDialogInputVisaExpire')"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          :model-value="visaExpiryDate ? dateFormat(visaExpiryDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="positive"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="visaExpiryDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="visaExpiryDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+    <q-input
+      for="input-ownerName"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="$t('formDialogInputVisaPlace')"
+      v-model="visaIssuingPlace"
+    />
+    <VueDatePicker
+      id="date-picker-workPermitIssuDate"
+      utc
+      autoApply
+      :teleport="true"
+      v-model="visaStayUntilDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-6"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          id="input-birth-date"
+          :label="$t('formDialogInputVisaStayUntil')"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          :model-value="visaStayUntilDate ? dateFormat(visaStayUntilDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="positive"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="visaStayUntilDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="visaStayUntilDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+    <q-input
+      for="input-ownerName"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="$t('formDialogInputVisaTM6')"
+      v-model="tm6Number"
+    />
+    <VueDatePicker
+      id="date-picker-workPermitIssuDate"
+      utc
+      autoApply
+      :teleport="true"
+      v-model="entryDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-6"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          id="input-birth-date"
+          :label="$t('formDialogInputVisaEnter')"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          :model-value="entryDate ? dateFormat(entryDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="positive"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="entryDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="entryDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+  </div>
+
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
new file mode 100644
index 00000000..4921691a
--- /dev/null
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
+import { dateFormat } from 'src/utils/datetime';
+import useAddressStore, {
+  District,
+  Province,
+  SubDistrict,
+} from 'src/stores/address';
+
+const adrressStore = useAddressStore();
+
+const addrOptions = reactive<{
+  provinceOps: Province[];
+  districtOps: District[];
+  subDistrictOps: SubDistrict[];
+}>({
+  provinceOps: [],
+  districtOps: [],
+  subDistrictOps: [],
+});
+
+const ownerName = defineModel<string>('ownerName');
+const positionName = defineModel<string>('positionName');
+const jobType = defineModel<string>('jobType');
+const workPlace = defineModel<string>('workPlace');
+const remark = defineModel<string>('remark');
+const workEndDate = defineModel<Date | null>('workEndDate');
+const workPermitNo = defineModel<string>('workPermitNo');
+const workPermitIssuDate = defineModel<Date | null>('workPermitIssuDate');
+const workPermitExpireDate = defineModel<Date | null>('workPermitExpireDate');
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+  typeCustomer?: string;
+}>();
+
+async function fetchProvince() {
+  const result = await adrressStore.fetchProvince();
+
+  if (result) addrOptions.provinceOps = result;
+}
+
+onMounted(async () => {
+  await fetchProvince();
+});
+</script>
+
+<template>
+  <div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
+  <div class="col-9 row q-col-gutter-md">
+    <q-input
+      for="input-ownerName"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="$t('formDialogInputOwnerName')"
+      v-model="ownerName"
+    />
+    <q-select
+      id="select-positionName"
+      :dense="dense"
+      :readonly="readonly"
+      :outlined="readonly ? false : outlined"
+      :hide-dropdown-icon="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      emit-value
+      map-options
+      v-model="positionName"
+      option-value="id"
+      option-label="name"
+      :label="$t('formDialogInputJobPosition')"
+      class="col-6"
+      :options="addrOptions.provinceOps"
+      lazy-rules
+    />
+    <q-select
+      id="select-jobType"
+      :dense="dense"
+      :readonly="readonly"
+      :outlined="readonly ? false : outlined"
+      :hide-dropdown-icon="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      emit-value
+      map-options
+      v-model="jobType"
+      option-value="id"
+      option-label="nameEN"
+      :label="$t('formDialogInputJobType')"
+      class="col-6"
+      :options="addrOptions.provinceOps"
+      lazy-rules
+    />
+    <q-select
+      id="select-province"
+      :dense="dense"
+      :readonly="readonly"
+      :outlined="readonly ? false : outlined"
+      :hide-dropdown-icon="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      emit-value
+      map-options
+      v-model="workPlace"
+      option-value="id"
+      option-label="nameEN"
+      :label="$t('formDialogInputWorkPlace')"
+      class="col-6"
+      :options="addrOptions.provinceOps"
+      lazy-rules
+    />
+    <q-input
+      for="input-workEndDate"
+      :label="$t('formDialogInputRemark')"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-12"
+      v-model="remark"
+      type="textarea"
+    />
+    <VueDatePicker
+      id="date-picker-workEndDate"
+      utc
+      autoApply
+      :teleport="true"
+      v-model="workEndDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-6"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          id="input-birth-date"
+          :label="$t('formDialogInputWorkUntil')"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          :model-value="workEndDate ? dateFormat(workEndDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="positive"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="workEndDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="workEndDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+    <q-input
+      for="input-workPermitNo"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="$t('formDialogInputWorkPermitNo')"
+      v-model="workPermitNo"
+    />
+    <VueDatePicker
+      id="date-picker-workPermitIssuDate"
+      utc
+      autoApply
+      :teleport="true"
+      v-model="workPermitIssuDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-6"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          id="input-birth-date"
+          :label="$t('formDialogInputWorkPermitIssueDate')"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          :model-value="
+            workPermitIssuDate ? dateFormat(workPermitIssuDate) : ''
+          "
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="positive"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="workPermitIssuDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="workPermitIssuDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+    <VueDatePicker
+      id="date-picker-workPermitExpireDate"
+      utc
+      autoApply
+      :teleport="true"
+      v-model="workPermitExpireDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-6"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          id="input-birth-date"
+          :label="$t('formDialogInputWorkPermitExpireDate')"
+          :dense="dense"
+          :outlined="readonly ? false : outlined"
+          :readonly="readonly"
+          :borderless="readonly"
+          :model-value="
+            workPermitExpireDate ? dateFormat(workPermitExpireDate) : ''
+          "
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="positive"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="workPermitExpireDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="workPermitExpireDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+  </div>
+
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 29bee311..488e5429 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -4,7 +4,9 @@ import { storeToRefs } from 'pinia';
 
 import { Pagination } from 'src/stores/types';
 import useCustomerStore from 'src/stores/customer';
+import useEmployeeStore from 'src/stores/employee';
 
+import PersonCard from 'components/home/PersonCard.vue';
 import UsersDetailCardComponent from 'src/components/UsersDetailCardComponent.vue';
 import SelectorList from 'components/SelectorList.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
@@ -32,11 +34,17 @@ import {
   CustomerBranch,
   CustomerBranchCreate,
 } from 'stores/customer/types';
+import { EmployeeCreate } from 'stores/employee/types';
 import { onMounted } from 'vue';
+
 import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
 import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
+import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
+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 } from 'src/stores/utils';
+import { dialog, calculateAge } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 
 const { t, locale } = useI18n();
@@ -51,6 +59,7 @@ const {
   deleteBranchById,
   editBranchById,
 } = userCustomer;
+const employeeStore = useEmployeeStore();
 const formData = ref<CustomerCreate>({
   status: 'CREATED',
   customerType: 'CORP',
@@ -97,32 +106,84 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
 
 const formDataEmployeeSameAddr = ref(false);
 const formDataEmployeeTab = ref('personalInfo');
-const formDataEmployee = ref({
-  employerId: '',
-  employeeId: '',
+const formDataEmployee = ref<EmployeeCreate>({
+  image: new File([''], 'dummy.jpg'),
+  customerBranchId: '0b16ee4a-2ff3-40b8-b09d-c7589422d03d',
   nrcNo: '',
+  dateOfBirth: new Date(),
+  gender: '',
+  nationality: '',
+
   firstName: '',
   firstNameEN: '',
   lastName: '',
   lastNameEN: '',
-  nationality: '',
-  gender: '',
-  birthDate: null,
-  address: '',
+
   addressEN: '',
-  provinceId: '',
-  districtId: '',
-  subDistrictId: '',
+  address: '',
   zipCode: '',
-  checkupResult: '',
-  checkupType: '',
-  provinceCheckId: '',
-  hospitalName: '',
-  remark: '',
-  insuranceCompany: '',
-  medicalBenefitScheme: '',
-  coverageStartDate: null,
-  coverageExpireDate: null,
+
+  passportType: '',
+  passportNumber: '',
+  passportIssueDate: new Date(),
+  passportExpiryDate: new Date(),
+  passportIssuingCountry: '',
+  passportIssuingPlace: '',
+  previousPassportReference: '',
+
+  visaType: '',
+  visaNumber: '',
+  visaIssueDate: new Date(),
+  visaExpiryDate: new Date(),
+  visaIssuingPlace: '',
+  visaStayUntilDate: new Date(),
+  tm6Number: '',
+  entryDate: new Date(),
+  workerStatus: '',
+
+  subDistrictId: '',
+  districtId: '',
+  provinceId: '',
+
+  employeeWork: [
+    // {
+    //   workEndDate: undefined,
+    //   workPermitExpireDate: undefined,
+    //   workPermitIssuDate: undefined,
+    //   workPermitNo: '',
+    //   workplace: '',
+    //   jobType: '',
+    //   positionName: '',
+    //   ownerName: '',
+    //   remark: '',
+    // },
+  ],
+  employeeCheckup: [
+    // {
+    //   coverageExpireDate: undefined,
+    //   coverageStartDate: undefined,
+    //   insuranceCompany: '',
+    //   medicalBenefitScheme: '',
+    //   remark: '',
+    //   hospitalName: '',
+    //   provinceId: '',
+    //   checkupResult: '',
+    //   checkupType: '',
+    // },
+  ],
+  employeeOtherInfo: {
+    birthPlace: '',
+    citizenId: '',
+    fatherFirstName: '',
+    fatherLastName: '',
+    fatherFirstNameEN: '',
+    fatherLastNameEN: '',
+
+    motherFirstName: '',
+    motherLastName: '',
+    motherFirstNameEN: '',
+    motherLastNameEN: '',
+  },
 });
 
 const indexTab = ref<number>(0);
@@ -164,6 +225,7 @@ const inputFile = (() => {
 })();
 
 const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>();
+const listEmployee = ref();
 
 const itemCard = [
   {
@@ -231,7 +293,10 @@ const selectorList = computed(() => [
       (statsCustomerType.value?.CORP ?? 0) +
       (statsCustomerType.value?.PERS ?? 0),
   },
-  { label: 'EMPLOYEE', count: 0 },
+  {
+    label: 'EMPLOYEE',
+    count: listEmployee.value ? listEmployee.value.length : 0,
+  },
 ]);
 
 const customerType = ref<
@@ -370,6 +435,12 @@ async function onSubmit() {
   const resultList = await fetchList({ includeBranch: true });
 
   if (resultList) listCustomer.value = resultList.result;
+
+  if (selectorLabel.value === 'EMPLOYEE') {
+    await employeeStore.create(formDataEmployee.value);
+    const resultList = await employeeStore.fetchList();
+    if (resultList) listEmployee.value = resultList.result;
+  }
 }
 
 async function onSubmitCustomerBranch() {
@@ -420,6 +491,24 @@ async function onSubmitEdit(id: string) {
   clearForm();
 }
 
+async function onDelete(id: string) {
+  if (!id) return;
+  dialog({
+    color: 'negative',
+    icon: 'mdi-alert',
+    title: t('deleteConfirmTitle'),
+    actionText: t('ok'),
+    persistent: true,
+    message: t('deleteConfirmMessage'),
+    action: async () => {
+      await employeeStore.deleteById(id);
+      const resultList = await employeeStore.fetchList();
+      if (resultList) listEmployee.value = resultList.result;
+    },
+    cancel: () => {},
+  });
+}
+
 async function submitBranch() {
   if (formData.value.customerBranch?.[0]) {
     await editBranchById(currentBranchId.value, {
@@ -487,6 +576,7 @@ onMounted(async () => {
   const resultStats = await getStatsCustomer();
 
   const resultList = await fetchList({ includeBranch: true });
+  const resultListEmployee = await employeeStore.fetchList();
 
   if (resultStats) statsCustomerType.value = resultStats;
 
@@ -501,6 +591,14 @@ onMounted(async () => {
   }
 
   if (resultList) listCustomer.value = resultList.result;
+  if (resultListEmployee) listEmployee.value = resultListEmployee.result;
+});
+
+watch(locale, () => {
+  fieldSelectedCustomer.value = {
+    label: t(`${fieldSelectedCustomer.value.label}`),
+    value: fieldSelectedCustomer.value?.value,
+  };
 });
 
 watch(locale, () => {
@@ -634,7 +732,13 @@ watch(locale, () => {
           </q-btn>
         </div>
 
-        <template v-if="listCustomer && selectorLabel === 'EMPLOYER'">
+        <template
+          v-if="
+            listCustomer &&
+            listCustomer.length > 0 &&
+            selectorLabel === 'EMPLOYER'
+          "
+        >
           <div
             class="row full-width customer-row"
             :style="`grid-template-columns: repeat(${$q.screen.lt.sm ? '1' : $q.screen.lt.md ? '2 ' : '4'}, 1fr)`"
@@ -711,7 +815,48 @@ watch(locale, () => {
           </div>
         </template>
 
-        <template v-else>
+        <template
+          v-if="
+            listEmployee &&
+            listEmployee.length > 0 &&
+            selectorLabel === 'EMPLOYEE'
+          "
+        >
+          <div>
+            <PersonCard
+              :list="
+                listEmployee.map((v) => ({
+                  id: v.id,
+                  name:
+                    $i18n.locale === 'en-US'
+                      ? `${v.firstNameEN} ${v.lastNameEN}`
+                      : `${v.firstName} ${v.lastName}`,
+                  male: v.gender === 'male',
+                  female: v.gender === 'female',
+                  badge: v.code,
+                  detail: [
+                    {
+                      label: $t('personnelCardNationality'),
+                      value: v.nationality,
+                    },
+                    {
+                      label: $t('personnelCardAge'),
+                      value: calculateAge(v.dateOfBirth),
+                    },
+                  ],
+                })) || []
+              "
+              @delete-card="onDelete"
+            />
+          </div>
+        </template>
+
+        <template
+          v-if="
+            (listCustomer?.length === 0 && selectorLabel === 'EMPLOYER') ||
+            (listEmployee?.length === 0 && selectorLabel === 'EMPLOYEE')
+          "
+        >
           <TooltipComponent
             class="self-end"
             :title="
@@ -942,6 +1087,7 @@ watch(locale, () => {
 
   <FormDialog
     employee
+    addressSeparator
     :noAddress="formDataEmployeeTab !== 'personalInfo'"
     v-model:tabs-list="employeeTab"
     v-model:employee-tab="formDataEmployeeTab"
@@ -970,6 +1116,18 @@ watch(locale, () => {
       />
     </template>
 
+    <template #information>
+      <BasicInformation
+        v-if="formDataEmployeeTab === 'personalInfo'"
+        employee
+        dense
+        outlined
+        separator
+        v-model:customer-branch-id="formDataEmployee.customerBranchId"
+        v-model:nrc-no="formDataEmployee.nrcNo"
+      />
+    </template>
+
     <template #person>
       <FormPerson
         v-if="formDataEmployeeTab === 'personalInfo'"
@@ -982,37 +1140,187 @@ watch(locale, () => {
         v-model:firstNameEN="formDataEmployee.firstNameEN"
         v-model:lastNameEN="formDataEmployee.lastNameEN"
         v-model:gender="formDataEmployee.gender"
-        v-model:birthDate="formDataEmployee.birthDate"
+        v-model:birthDate="formDataEmployee.dateOfBirth"
         v-model:nationality="formDataEmployee.nationality"
       />
       <FormEmployeeHealthCheck
         v-if="formDataEmployeeTab === 'healthCheck'"
         dense
         outlined
-        v-model:checkup-result="formDataEmployee.checkupResult"
-        v-model:checkup-type="formDataEmployee.checkupType"
-        v-model:province-id="formDataEmployee.provinceCheckId"
-        v-model:hospital-name="formDataEmployee.hospitalName"
-        v-model:remark="formDataEmployee.remark"
-        v-model:insurance-company="formDataEmployee.insuranceCompany"
-        v-model:medical-benefit-scheme="formDataEmployee.medicalBenefitScheme"
-        v-model:coverage-start-date="formDataEmployee.coverageStartDate"
-        v-model:coverage-expire-date="formDataEmployee.coverageExpireDate"
       />
-    </template>
-
-    <template #information>
-      <BasicInformation
-        v-if="formDataEmployeeTab === 'personalInfo'"
-        employee
+      <FormEmployeeWorkHistory
+        v-if="formDataEmployeeTab === 'workHistory'"
         dense
         outlined
-        separator
-        :type-customer="customerType"
-        v-model:customer-name="formData.customerName"
-        v-model:customer-name-en="formData.customerNameEN"
-        v-model:tax-no="formData.taxNo"
       />
+      <FormEmployeeOther
+        v-if="
+          formDataEmployeeTab === 'other' && formDataEmployee.employeeOtherInfo
+        "
+        dense
+        outlined
+        v-model:employee-other="formDataEmployee.employeeOtherInfo"
+      />
+    </template>
+    <template #by-type>
+      <FormEmployeePassport
+        v-if="formDataEmployeeTab === 'personalInfo'"
+        dense
+        outlined
+        employee
+        separator
+        v-model:passport-type="formDataEmployee.passportType"
+        v-model:passport-number="formDataEmployee.passportNumber"
+        v-model:passport-issue-date="formDataEmployee.passportIssueDate"
+        v-model:passport-expiry-date="formDataEmployee.passportExpiryDate"
+        v-model:passport-issuing-country="
+          formDataEmployee.passportIssuingCountry
+        "
+        v-model:passport-issuing-place="formDataEmployee.passportIssuingCountry"
+        v-model:previous-passport-reference="
+          formDataEmployee.previousPassportReference
+        "
+      />
+      <FormEmployeeVisa
+        v-if="formDataEmployeeTab === 'personalInfo'"
+        dense
+        outlined
+        employee
+        v-model:visa-type="formDataEmployee.visaType"
+        v-model:visa-number="formDataEmployee.visaNumber"
+        v-model:visa-issue-date="formDataEmployee.visaIssueDate"
+        v-model:visa-expiry-date="formDataEmployee.visaExpiryDate"
+        v-model:visa-issuing-place="formDataEmployee.visaIssuingPlace"
+        v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
+        v-model:tm6-number="formDataEmployee.tm6Number"
+        v-model:entry-date="formDataEmployee.entryDate"
+      />
+    </template>
+  </FormDialog>
+
+  <FormDialog
+    v-model:modal="dialogInputCustomerBranchForm"
+    :title="$t('formDialogTitleCreateSubBranch')"
+    :submit="
+      () => {
+        onSubmitCustomerBranch();
+      }
+    "
+    :close="() => {}"
+  >
+    <template #address>
+      <!-- <FormCustomerBranch separator dense outlined /> -->
+
+      <div class="col-3 app-text-muted">
+        • {{ $t('formDialogCustomerBranch') }}
+      </div>
+
+      <div class="col-12 row bordered q-pt-none rounded">
+        <TabComponent
+          v-model:customer-branch="formData.customerBranch"
+          v-model:tab-index="indexTab"
+        >
+          <template #address>
+            <FormAddress
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              v-model:address="formData.customerBranch[indexTab].address"
+              v-model:address-e-n="formData.customerBranch[indexTab].addressEN"
+              v-model:province-id="formData.customerBranch[indexTab].provinceId"
+              v-model:district-id="formData.customerBranch[indexTab].districtId"
+              v-model:sub-district-id="
+                formData.customerBranch[indexTab].subDistrictId
+              "
+              v-model:zip-code="formData.customerBranch[indexTab].zipCode"
+              separator
+              dense
+              outlined
+            />
+          </template>
+
+          <template #businessInformation>
+            <FormBusiness
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              v-model:employment-office="
+                formData.customerBranch[indexTab].employmentOffice
+              "
+              v-model:bussiness-type="
+                formData.customerBranch[indexTab].bussinessType
+              "
+              v-model:bussiness-type-en="
+                formData.customerBranch[indexTab].bussinessTypeEN
+              "
+              v-model:job-position="
+                formData.customerBranch[indexTab].jobPosition
+              "
+              v-model:job-position-en="
+                formData.customerBranch[indexTab].jobPositionEN
+              "
+              v-model:job-description="
+                formData.customerBranch[indexTab].jobDescription
+              "
+              v-model:sale-employee="
+                formData.customerBranch[indexTab].saleEmployee
+              "
+              v-model:pay-date="formData.customerBranch[indexTab].payDate"
+              v-model:wage-rate="formData.customerBranch[indexTab].wageRate"
+              separator
+              dense
+              outlined
+            />
+          </template>
+          <template #about>
+            <AboutComponent
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              :type-customer="customerType"
+              v-model:tax-no="formData.customerBranch[indexTab].taxNo"
+              v-model:customer-name="formData.customerBranch[indexTab].name"
+              v-model:customer-english-name="
+                formData.customerBranch[indexTab].nameEN
+              "
+              v-model:authorized-capital="
+                formData.customerBranch[indexTab].authorizedCapital
+              "
+              v-model:register-name="
+                formData.customerBranch[indexTab].registerName
+              "
+              v-model:register-date="
+                formData.customerBranch[indexTab].registerDate
+              "
+              dense
+              outlined
+              bordered
+              separator
+            />
+          </template>
+          <template #contactInformation>
+            <ContactComponent
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              v-model:mail="formData.customerBranch[indexTab].email"
+              v-model:telephone="formData.customerBranch[indexTab].telephoneNo"
+              dense
+              outlined
+              separator
+            />
+          </template>
+          <template #otherDocuments>
+            <OtherInformation
+              v-if="
+                indexTab !== undefined && formData.customerBranch?.[indexTab]
+              "
+              dense
+              outlined
+            />
+          </template>
+        </TabComponent>
+      </div>
     </template>
   </FormDialog>