From bd38c008a68b075fc6685ef49ca6db4315d6ee67 Mon Sep 17 00:00:00 2001
From: Thanaphon Frappet <thanaphon@frappet.com>
Date: Tue, 8 Apr 2025 15:04:03 +0700
Subject: [PATCH] refactor: change form employee

---
 .../02_personnel-management/FormPerson.vue    |   60 +-
 .../employee/BasicInformation.vue             |  221 +--
 .../shared/select/SelectCustomer.vue          |    2 +-
 src/components/shared/table/TableWorker.vue   |    4 +-
 src/pages/03_customer-management/MainPage.vue |  356 ++--
 src/pages/03_customer-management/form.ts      |  111 +-
 src/pages/05_quotation/QuotationForm.vue      |    5 +-
 .../QuotationFormWorkerSelect.vue             | 1629 +++++++++++++----
 src/pages/05_quotation/form.ts                |    1 +
 9 files changed, 1686 insertions(+), 703 deletions(-)

diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 7773b161..0204bb47 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -41,6 +41,12 @@ let prefixNameFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+const prefixNameOptionsEn = ref<Record<string, unknown>[]>([]);
+let prefixNameFilterEn: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
 const genderOptions = ref<Record<string, unknown>[]>([]);
 let genderFilter: (
   value: string,
@@ -66,6 +72,13 @@ onMounted(() => {
     prefixNameOptions,
     'label',
   );
+
+  prefixNameFilterEn = selectFilterOptionRefMod(
+    ref(optionStore.rawOption?.eng.prefix),
+    prefixNameOptionsEn,
+    'label',
+  );
+
   genderFilter = selectFilterOptionRefMod(
     ref(optionStore.globalOption?.gender),
     genderOptions,
@@ -96,6 +109,12 @@ watch(
       nationalityOptions,
       'label',
     );
+
+    prefixNameFilterEn = selectFilterOptionRefMod(
+      ref(optionStore.rawOption?.eng.prefix),
+      prefixNameOptionsEn,
+      'label',
+    );
   },
 );
 
@@ -177,6 +196,7 @@ watch(
             (v) => (typeof v === 'string' ? (prefixName = v) : '')
           "
           @clear="prefixName = ''"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
         >
           <template v-slot:no-option>
             <q-item>
@@ -235,25 +255,41 @@ watch(
         class="col-12 row"
         style="display: flex; gap: var(--size-2)"
       >
-        <q-input
-          :for="`${prefixId}-input-first-name`"
-          :dense="dense"
+        <q-select
           outlined
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
           hide-bottom-space
-          :readonly="readonly"
-          :disable="!readonly"
+          input-debounce="0"
+          option-label="label"
+          option-value="value"
+          hide-dropdown-icon
+          autocomplete="off"
           class="col-md-1 col-6"
-          label="Title"
-          :model-value="
-            readonly
-              ? capitalize(prefixName || '') || '-'
-              : capitalize(prefixName || '')
-          "
+          :dense="dense"
+          :readonly="readonly"
+          :options="prefixNameOptionsEn"
+          :for="`${prefixId}-select-prefix-name-en`"
+          label="Prefix"
+          @filter="prefixNameFilter"
+          :model-value="readonly ? prefixName || '-' : prefixName"
           @update:model-value="
             (v) => (typeof v === 'string' ? (prefixName = v) : '')
           "
           @clear="prefixName = ''"
-        />
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                {{ $t('general.noData') }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
 
         <q-input
           :for="`${prefixId}-input-first-name-en`"
diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index f51eee79..da9a0c58 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -3,6 +3,7 @@ import { QSelect } from 'quasar';
 import { CustomerBranch } from 'stores/customer/types';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { onMounted, ref, watch } from 'vue';
+import SelectCustomer from 'components/shared/select/SelectCustomer.vue';
 import {
   EditButton,
   DeleteButton,
@@ -22,6 +23,13 @@ const optionsBranch = defineModel<{ id: string; name: string }[]>(
 );
 
 // employee
+
+const customerBranchId = defineModel<string>('customerBranchId');
+
+const currentCustomerBranch = defineModel<CustomerBranch>(
+  'currentCustomerBranch',
+);
+
 const customerBranch = defineModel<{
   id: string;
   address: string;
@@ -108,213 +116,14 @@ defineEmits<{
     </div>
 
     <div class="col-12 row" style="gap: var(--size-2)">
-      <q-select
-        :id="`${prefixId}-select-employer-branch`"
-        :for="`${prefixId}-select-employer-branch`"
-        :use-input="!customerBranch"
-        autocomplete="off"
-        input-debounce="0"
-        :hide-dropdown-icon="readonly"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12"
+      <SelectCustomer
+        v-model:value="customerBranchId"
+        v-model:value-option="currentCustomerBranch"
         :label="$t('customer.form.branchCode')"
-        v-model="customerBranch"
-        :option-value="
-          (v) => ({
-            id: v.id,
-            address: v.address,
-            addressEN: v.addressEN,
-            provinceId: v.provinceId,
-            districtId: v.districtId,
-            subDistrictId: v.subDistrictId,
-            zipCode: v.zipCode,
-          })
-        "
-        emit-value
-        map-options
-        :options="employeeOwnerOption"
-        @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
-        :rules="[
-          (val: string) =>
-            !!val ||
-            $t('form.error.selectField', {
-              field: $t('customerEmployee.branch'),
-            }),
-        ]"
-      >
-        <template v-slot:option="scope">
-          <q-item
-            v-if="scope.opt"
-            v-bind="scope.itemProps"
-            class="row items-start col-12 no-padding"
-          >
-            <div class="q-ma-sm">
-              <i class="isax isax-frame5" style="color: var(--brand-1)" />
-            </div>
-            <div class="q-mt-sm">
-              <div>
-                <span v-if="scope.opt.customer.customerType">
-                  <span style="font-weight: 600">
-                    {{
-                      scope.opt.customer.customerType === 'CORP'
-                        ? $t('customer.form.registerName')
-                        : $t('customer.form.ownerName')
-                    }}:
-                  </span>
-                  {{
-                    scope.opt.customer.customerType === 'CORP'
-                      ? $i18n.locale === 'eng'
-                        ? scope.opt.registerNameEN
-                        : scope.opt.registerName
-                      : $i18n.locale === 'eng'
-                        ? `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
-                          '-'
-                        : `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstName} ${scope.opt.lastName}` ||
-                          '-'
-                  }}
-                  ({{ scope.opt.code }})
-                </span>
-              </div>
-
-              <div class="text-caption app-text-muted-2 q-mb-xs">
-                <span v-if="scope.opt.customer" class="col column">
-                  {{
-                    $t(
-                      `branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
-                    )
-                  }}
-
-                  {{
-                    !scope.opt.code.endsWith('-00')
-                      ? +scope.opt.code.split('-')[1]
-                      : ''
-                  }}
-                </span>
-                <span v-if="scope.opt.province" class="col">
-                  {{ $t('general.address') }}
-                  {{
-                    formatAddress({
-                      address: scope.opt.address,
-                      addressEN: scope.opt.addressEN,
-                      moo: scope.opt.moo,
-                      mooEN: scope.opt.mooEN,
-                      soi: scope.opt.soi,
-                      soiEN: scope.opt.soiEN,
-                      street: scope.opt.street,
-                      streetEN: scope.opt.streetEN,
-                      subDistrict: scope.opt.subDistrict,
-                      district: scope.opt.district,
-                      province: scope.opt.province,
-                      en: $i18n.locale === 'eng',
-                    })
-                  }}
-                  {{ scope.opt.subDistrict?.zipCode || '' }}
-                </span>
-              </div>
-            </div>
-          </q-item>
-          <q-separator class="q-mx-sm" />
-        </template>
-
-        <template v-slot:selected-item="scope">
-          <div
-            v-if="scope.opt"
-            class="row items-center no-wrap"
-            style="width: 1px"
-          >
-            <div class="q-mr-sm">
-              <span style="font-weight: 600">
-                {{
-                  scope.opt.customer.customerType === 'CORP'
-                    ? $t('customer.form.registerName')
-                    : $t('customer.form.ownerName')
-                }}:
-              </span>
-              {{
-                scope.opt.customer.customerType === 'CORP'
-                  ? $i18n.locale === 'eng'
-                    ? scope.opt.registerNameEN
-                    : scope.opt.registerName
-                  : $i18n.locale === 'eng'
-                    ? `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
-                      '-'
-                    : `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstName} ${scope.opt.lastName}` ||
-                      '-'
-              }}
-              ({{ scope.opt.code }})
-            </div>
-            <div
-              class="text-caption app-text-muted-2"
-              v-if="scope.opt.customer && scope.opt.province"
-            >
-              {{
-                $t(
-                  `branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
-                )
-              }}
-
-              {{
-                !scope.opt.code.endsWith('-00')
-                  ? +scope.opt.code.split('-')[1]
-                  : ''
-              }}
-
-              {{ $t('general.address') }}
-              {{
-                formatAddress({
-                  address: scope.opt.address,
-                  addressEN: scope.opt.addressEN,
-                  moo: scope.opt.moo,
-                  mooEN: scope.opt.mooEN,
-                  soi: scope.opt.soi,
-                  soiEN: scope.opt.soiEN,
-                  street: scope.opt.street,
-                  streetEN: scope.opt.streetEN,
-                  subDistrict: scope.opt.subDistrict,
-                  district: scope.opt.district,
-                  province: scope.opt.province,
-                  en: $i18n.locale === 'eng',
-                })
-              }}
-              {{ scope.opt.subDistrict?.zipCode || '' }}
-              <q-tooltip v-if="scope.opt.customer && scope.opt.province">
-                {{ $t('customerBranch.form.title') }}:
-
-                {{ $t('general.address') }}
-                {{
-                  formatAddress({
-                    address: scope.opt.address,
-                    addressEN: scope.opt.addressEN,
-                    moo: scope.opt.moo,
-                    mooEN: scope.opt.mooEN,
-                    soi: scope.opt.soi,
-                    soiEN: scope.opt.soiEN,
-                    street: scope.opt.street,
-                    streetEN: scope.opt.streetEN,
-                    subDistrict: scope.opt.subDistrict,
-                    district: scope.opt.district,
-                    province: scope.opt.province,
-                    en: $i18n.locale === 'eng',
-                  })
-                }}
-                {{ scope.opt.subDistrict?.zipCode || '' }}
-              </q-tooltip>
-            </div>
-          </div>
-        </template>
-
-        <template v-slot:append>
-          <q-icon
-            v-if="!readonly && customerBranch"
-            name="mdi-close-circle"
-            @click.stop="customerBranch = undefined"
-            class="cursor-pointer clear-btn"
-          />
-        </template>
-      </q-select>
+        class="col-12 field-two"
+        required
+        :readonly
+      />
 
       <q-input
         :for="`${prefixId}-input-code`"
diff --git a/src/components/shared/select/SelectCustomer.vue b/src/components/shared/select/SelectCustomer.vue
index 8adecb3c..f6fbf9cd 100644
--- a/src/components/shared/select/SelectCustomer.vue
+++ b/src/components/shared/select/SelectCustomer.vue
@@ -158,7 +158,7 @@ onMounted(async () => {
     </template>
 
     <template #option="{ opt, scope }">
-      <q-item v-bind="scope.itemProps">
+      <q-item @click="valueOption = opt" v-bind="scope.itemProps">
         <SelectCustomerItem :data="opt" :simple :simple-branch-no />
       </q-item>
 
diff --git a/src/components/shared/table/TableWorker.vue b/src/components/shared/table/TableWorker.vue
index 4ec870bc..8594b0e7 100644
--- a/src/components/shared/table/TableWorker.vue
+++ b/src/components/shared/table/TableWorker.vue
@@ -54,7 +54,9 @@ const columns = [
     field: (v: Employee) =>
       locale.value === Lang.English
         ? `${v.firstNameEN} ${v.lastNameEN}`
-        : `${v.firstName} ${v.lastName}`,
+        : v.firstName
+          ? `${v.firstName} ${v.lastName}`
+          : `${v.firstNameEN} ${v.lastNameEN}`,
   },
   {
     name: 'birthDate',
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index e5103c0b..e859078e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -102,7 +102,6 @@ const optionStore = useOptionStore();
 const ocrStore = useOcrStore();
 
 const refFilter = ref<InstanceType<typeof QSelect>>();
-const statusEmployeeCreate = ref<boolean>(false);
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
 
 const {
@@ -114,14 +113,22 @@ const {
   deleteCustomerBranchById,
 } = customerFormStore;
 
+const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
+  employeeFormStore;
+
 const {
   state: customerFormState,
   currentFormData: customerFormData,
   registerAbleBranchOption,
   tabFieldRequired,
 } = storeToRefs(customerFormStore);
-const { state: employeeFormState, currentFromDataEmployee } =
-  storeToRefs(employeeFormStore);
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  onCreateImageList,
+  statusEmployeeCreate,
+  refreshImageState,
+} = storeToRefs(employeeFormStore);
 
 async function init() {
   navigatorStore.current.title = 'menu.customer';
@@ -208,13 +215,7 @@ const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
 const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
 
 // image
-const refreshImageState = ref(false);
 const imageList = ref<{ selectedImage: string; list: string[] }>();
-const onCreateImageList = ref<{
-  selectedImage: string;
-  list: { url: string; imgFile: File | null; name: string }[];
-}>({ selectedImage: '', list: [] });
-
 watch(() => route.name, init);
 watch(
   [currentTab, currentStatus, inputSearch, customerTypeSelected, pageSize],
@@ -425,64 +426,6 @@ async function toggleStatusCustomer(id: string, status: boolean) {
   await fetchListCustomer(false, $q.screen.xs);
   flowStore.rotate();
 }
-
-async function deleteEmployeeById(opts: {
-  id?: string;
-  type?: 'passport' | 'visa' | 'healthCheck' | 'work';
-  index?: number;
-}) {
-  dialog({
-    color: 'negative',
-    icon: 'mdi-alert',
-    title: t('dialog.title.confirmDelete'),
-    actionText: t('general.delete'),
-    persistent: true,
-    message: t('dialog.message.confirmDelete'),
-    action: async () => {
-      if (opts.type === 'passport' && opts.index !== undefined) {
-        await employeeFormStore.deletePassport(opts.index);
-      }
-
-      if (opts.type === 'visa' && opts.index !== undefined) {
-        await employeeFormStore.deleteVisa(opts.index);
-      }
-
-      if (opts.type === 'healthCheck' && opts.index !== undefined) {
-        await employeeFormStore.deleteHealthCheck(opts.index);
-      }
-
-      if (opts.type === 'work' && opts.index !== undefined) {
-        await employeeFormStore.deleteWorkHistory(opts.index);
-      } else {
-        if (!!opts.id) {
-          const result = await employeeStore.deleteById(opts.id);
-
-          if (result) {
-            employeeFormState.value.drawerModal = false;
-            employeeFormState.value.dialogModal = false;
-          }
-        }
-      }
-
-      if (route.name !== 'CustomerBranchManagement') {
-        await fetchListEmployee(
-          currentTab.value === 'employer'
-            ? {
-                page: 1,
-                pageSize: 999,
-                customerId: customerFormState.value.currentCustomerId,
-              }
-            : { fetchStats: true, mobileFetch: $q.screen.xs },
-        );
-
-        flowStore.rotate();
-      }
-    },
-
-    cancel: () => {},
-  });
-}
-
 async function openHistory(id: string) {
   const res = await employeeStore.getEditHistory(id);
   employeeHistory.value = res.reverse();
@@ -516,33 +459,6 @@ async function editEmployeeFormPersonal(id: string) {
   employeeFormState.value.drawerModal = true;
 }
 
-function employeeConfirmUnsave(close = true) {
-  dialog({
-    color: 'warning',
-    icon: 'mdi-alert',
-    title: t('form.warning.title'),
-    actionText: t('general.ok'),
-    persistent: true,
-    message: t('form.warning.unsave'),
-    action: () => {
-      employeeFormStore.resetFormDataEmployee();
-      onCreateImageList.value = { selectedImage: '', list: [] };
-      employeeFormState.value.editReadonly = true;
-      employeeFormState.value.dialogModal = !close;
-      employeeFormState.value.drawerModal = !close;
-    },
-    cancel: () => {},
-  });
-}
-
-function employeeFormUndo(close = true) {
-  if (employeeFormStore.isFormDataDifferent()) {
-    return employeeConfirmUnsave(close);
-  }
-  employeeFormStore.resetFormDataEmployee();
-  employeeFormState.value.editReadonly = true;
-}
-
 async function createCustomerForm(customerType: 'CORP' | 'PERS') {
   customerFormState.value.dialogModal = true;
   customerFormState.value.dialogType = 'create';
@@ -577,7 +493,7 @@ async function fetchImageList(
 // TODO: When in employee form, if select address same as customer then auto fill
 
 watch(
-  () => employeeFormState.value.formDataEmployeeOwner,
+  () => employeeFormState.value.currentCustomerBranch,
   (e) => {
     if (!e) return;
     if (employeeFormState.value.formDataEmployeeSameAddr) {
@@ -594,21 +510,21 @@ watch(
 watch(
   () => employeeFormState.value.formDataEmployeeSameAddr,
   (isSame) => {
-    if (!employeeFormState.value.formDataEmployeeOwner) return;
+    if (!employeeFormState.value.currentCustomerBranch) return;
     if (isSame) {
       currentFromDataEmployee.value.address =
-        employeeFormState.value.formDataEmployeeOwner.address;
+        employeeFormState.value.currentCustomerBranch.address;
       currentFromDataEmployee.value.addressEN =
-        employeeFormState.value.formDataEmployeeOwner.addressEN;
+        employeeFormState.value.currentCustomerBranch.addressEN;
       currentFromDataEmployee.value.provinceId =
-        employeeFormState.value.formDataEmployeeOwner.provinceId;
+        employeeFormState.value.currentCustomerBranch.provinceId;
       currentFromDataEmployee.value.districtId =
-        employeeFormState.value.formDataEmployeeOwner.districtId;
+        employeeFormState.value.currentCustomerBranch.districtId;
       currentFromDataEmployee.value.subDistrictId =
-        employeeFormState.value.formDataEmployeeOwner.subDistrictId;
+        employeeFormState.value.currentCustomerBranch.subDistrictId;
     }
     currentFromDataEmployee.value.customerBranchId =
-      employeeFormState.value.formDataEmployeeOwner.id;
+      employeeFormState.value.currentCustomerBranch.id;
   },
 );
 
@@ -1485,7 +1401,23 @@ const emptyCreateDialog = ref(false);
                                 "
                                 @delete="
                                   (item: any) => {
-                                    deleteEmployeeById({ id: item.id });
+                                    deleteEmployeeById({
+                                      id: item.id,
+                                      fetch: async () =>
+                                        await fetchListEmployee(
+                                          currentTab === 'employer'
+                                            ? {
+                                                page: 1,
+                                                pageSize: 999,
+                                                customerId:
+                                                  customerFormState.currentCustomerId,
+                                              }
+                                            : {
+                                                fetchStats: true,
+                                                mobileFetch: $q.screen.xs,
+                                              },
+                                        ),
+                                    });
                                   }
                                 "
                                 @toggle-status="
@@ -1804,7 +1736,23 @@ const emptyCreateDialog = ref(false);
                       @edit="(item: any) => editEmployeeFormPersonal(item.id)"
                       @delete="
                         (item: any) => {
-                          deleteEmployeeById({ id: item.id });
+                          deleteEmployeeById({
+                            id: item.id,
+                            fetch: async () =>
+                              await fetchListEmployee(
+                                currentTab === 'employer'
+                                  ? {
+                                      page: 1,
+                                      pageSize: 999,
+                                      customerId:
+                                        customerFormState.currentCustomerId,
+                                    }
+                                  : {
+                                      fetchStats: true,
+                                      mobileFetch: $q.screen.xs,
+                                    },
+                              ),
+                          });
                         }
                       "
                       @toggle-status="
@@ -1942,7 +1890,7 @@ const emptyCreateDialog = ref(false);
           async (currentBranch) => {
             createEmployeeForm();
             await nextTick();
-            employeeFormState.formDataEmployeeOwner = { ...currentBranch };
+            employeeFormState.currentBranchId = currentBranch.id;
           }
         "
         v-model:branch="branch"
@@ -2783,12 +2731,30 @@ const emptyCreateDialog = ref(false);
                   id="btn-info-basic-delete"
                   icon-only
                   @click="
-                    () => deleteEmployeeById({ id: currentFromDataEmployee.id })
+                    () =>
+                      deleteEmployeeById({
+                        id: currentFromDataEmployee.id,
+                        fetch: async () =>
+                          await fetchListEmployee(
+                            currentTab === 'employer'
+                              ? {
+                                  page: 1,
+                                  pageSize: 999,
+                                  customerId:
+                                    customerFormState.currentCustomerId,
+                                }
+                              : {
+                                  fetchStats: true,
+                                  mobileFetch: $q.screen.xs,
+                                },
+                          ),
+                      })
                   "
                   type="button"
                 />
               </div>
             </div>
+
             <BasicInformation
               no-action
               id="form-information"
@@ -2801,11 +2767,13 @@ const emptyCreateDialog = ref(false);
               title="form.field.basicInformation"
               :readonly="!employeeFormState.isEmployeeEdit"
               :employee-owner-option="employeeStore.ownerOption || []"
-              v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
+              v-model:customer-branch-id="employeeFormState.currentBranchId"
+              v-model:current-customer-branch="
+                employeeFormState.currentCustomerBranch
+              "
               v-model:employee-id="employeeFormState.currentEmployeeCode"
               v-model:nrc-no="currentFromDataEmployee.nrcNo"
               v-model:code="currentFromDataEmployee.code"
-              @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
               class="q-mb-xl"
             />
             <FormPerson
@@ -3362,7 +3330,24 @@ const emptyCreateDialog = ref(false);
                       @click.stop="
                         () => {
                           employeeFormState.currentIndexPassport = index;
-                          deleteEmployeeById({ type: 'passport', index });
+                          deleteEmployeeById({
+                            type: 'passport',
+                            index,
+                            fetch: async () =>
+                              await fetchListEmployee(
+                                currentTab === 'employer'
+                                  ? {
+                                      page: 1,
+                                      pageSize: 999,
+                                      customerId:
+                                        customerFormState.currentCustomerId,
+                                    }
+                                  : {
+                                      fetchStats: true,
+                                      mobileFetch: $q.screen.xs,
+                                    },
+                              ),
+                          });
                         }
                       "
                       type="button"
@@ -3513,7 +3498,24 @@ const emptyCreateDialog = ref(false);
                       @click.stop="
                         () => {
                           employeeFormState.currentIndexVisa = index;
-                          deleteEmployeeById({ type: 'visa', index });
+                          deleteEmployeeById({
+                            type: 'visa',
+                            index,
+                            fetch: async () =>
+                              await fetchListEmployee(
+                                currentTab === 'employer'
+                                  ? {
+                                      page: 1,
+                                      pageSize: 999,
+                                      customerId:
+                                        customerFormState.currentCustomerId,
+                                    }
+                                  : {
+                                      fetchStats: true,
+                                      mobileFetch: $q.screen.xs,
+                                    },
+                              ),
+                          });
                         }
                       "
                       type="button"
@@ -3585,7 +3587,23 @@ const emptyCreateDialog = ref(false);
                 @delete="
                   (index) => {
                     employeeFormState.currentIndexCheckup = index;
-                    deleteEmployeeById({ type: 'healthCheck', index });
+                    deleteEmployeeById({
+                      type: 'healthCheck',
+                      index,
+                      fetch: async () =>
+                        await fetchListEmployee(
+                          currentTab === 'employer'
+                            ? {
+                                page: 1,
+                                pageSize: 999,
+                                customerId: customerFormState.currentCustomerId,
+                              }
+                            : {
+                                fetchStats: true,
+                                mobileFetch: $q.screen.xs,
+                              },
+                        ),
+                    });
                   }
                 "
                 @save="
@@ -3671,7 +3689,23 @@ const emptyCreateDialog = ref(false);
                 @delete="
                   (index) => {
                     employeeFormState.currentIndexWorkHistory = index;
-                    deleteEmployeeById({ type: 'work', index });
+                    deleteEmployeeById({
+                      type: 'work',
+                      index,
+                      fetch: async () =>
+                        await fetchListEmployee(
+                          currentTab === 'employer'
+                            ? {
+                                page: 1,
+                                pageSize: 999,
+                                customerId: customerFormState.currentCustomerId,
+                              }
+                            : {
+                                fetchStats: true,
+                                mobileFetch: $q.screen.xs,
+                              },
+                        ),
+                    });
                   }
                 "
                 @save="
@@ -4738,7 +4772,23 @@ const emptyCreateDialog = ref(false);
                     icon-only
                     @click="
                       () =>
-                        deleteEmployeeById({ id: currentFromDataEmployee.id })
+                        deleteEmployeeById({
+                          id: currentFromDataEmployee.id,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        })
                     "
                     type="button"
                   />
@@ -4752,16 +4802,13 @@ const emptyCreateDialog = ref(false);
                 outlined
                 title="form.field.basicInformation"
                 :readonly="!employeeFormState.isEmployeeEdit"
-                :employee-owner-option="employeeStore.ownerOption"
-                v-model:customer-branch="
-                  employeeFormState.formDataEmployeeOwner
+                v-model:customer-branch-id="employeeFormState.currentBranchId"
+                v-model:current-customer-branch="
+                  employeeFormState.currentCustomerBranch
                 "
                 v-model:employee-id="employeeFormState.currentEmployeeCode"
                 v-model:nrc-no="currentFromDataEmployee.nrcNo"
                 v-model:code="currentFromDataEmployee.code"
-                @filter-owner-branch="
-                  employeeFormStore.employeeFilterOwnerBranch
-                "
                 class="q-mb-xl"
               />
               <FormPerson
@@ -5368,6 +5415,20 @@ const emptyCreateDialog = ref(false);
                                   deleteEmployeeById({
                                     type: 'passport',
                                     index,
+                                    fetch: async () =>
+                                      await fetchListEmployee(
+                                        currentTab === 'employer'
+                                          ? {
+                                              page: 1,
+                                              pageSize: 999,
+                                              customerId:
+                                                customerFormState.currentCustomerId,
+                                            }
+                                          : {
+                                              fetchStats: true,
+                                              mobileFetch: $q.screen.xs,
+                                            },
+                                      ),
                                   });
                                 }
                               "
@@ -5539,7 +5600,24 @@ const emptyCreateDialog = ref(false);
                           icon-only
                           @click.stop="
                             () => {
-                              deleteEmployeeById({ type: 'visa', index });
+                              deleteEmployeeById({
+                                type: 'visa',
+                                index,
+                                fetch: async () =>
+                                  await fetchListEmployee(
+                                    currentTab === 'employer'
+                                      ? {
+                                          page: 1,
+                                          pageSize: 999,
+                                          customerId:
+                                            customerFormState.currentCustomerId,
+                                        }
+                                      : {
+                                          fetchStats: true,
+                                          mobileFetch: $q.screen.xs,
+                                        },
+                                  ),
+                              });
                             }
                           "
                           type="button"
@@ -5660,7 +5738,24 @@ const emptyCreateDialog = ref(false);
                     @delete="
                       (index) => {
                         employeeFormState.currentIndexCheckup = index;
-                        deleteEmployeeById({ type: 'healthCheck', index });
+                        deleteEmployeeById({
+                          type: 'healthCheck',
+                          index,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        });
                       }
                     "
                   />
@@ -5730,7 +5825,24 @@ const emptyCreateDialog = ref(false);
                     @delete="
                       (index) => {
                         employeeFormState.currentIndexWorkHistory = index;
-                        deleteEmployeeById({ type: 'work', index });
+                        deleteEmployeeById({
+                          type: 'work',
+                          index,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        });
                       }
                     "
                     @save="
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 125388cc..2d529a5c 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -2,6 +2,7 @@ import { ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import {
+  CustomerBranch,
   CustomerBranchCreate,
   CustomerCreate,
   CustomerType,
@@ -17,6 +18,7 @@ import useMyBranchStore from 'stores/my-branch';
 
 import { baseUrl } from 'src/stores/utils';
 import { getRole, getUserId } from 'src/services/keycloak';
+import { useRoute } from 'vue-router';
 
 export const useCustomerForm = defineStore('form-customer', () => {
   const customerStore = useCustomerStore();
@@ -723,11 +725,23 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
 });
 
 export const useEmployeeForm = defineStore('form-employee', () => {
+  const { t } = useI18n();
   const customerStore = useCustomerStore();
   const employeeStore = useEmployeeStore();
   const flowStore = useFlowStore();
   const branchStore = useMyBranch();
 
+  const route = useRoute();
+
+  const refreshImageState = ref(false);
+
+  const onCreateImageList = ref<{
+    selectedImage: string;
+    list: { url: string; imgFile: File | null; name: string }[];
+  }>({ selectedImage: '', list: [] });
+
+  const statusEmployeeCreate = ref<boolean>(false);
+
   const state = ref<{
     dialogType: 'info' | 'create' | 'edit';
     imageDialog: boolean;
@@ -736,6 +750,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     drawerModal: boolean;
     isImageEdit: boolean;
 
+    currentBranchId: string;
+    currentCustomerBranch?: CustomerBranch;
     currentEmployeeCode: string;
     currentEmployee: Employee | null;
     currentIndexPassport: number;
@@ -769,6 +785,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       | undefined;
     ocr: boolean;
   }>({
+    currentBranchId: '',
     isImageEdit: false,
     currentIndexPassport: -1,
     currentIndexVisa: -1,
@@ -1231,6 +1248,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     selectedImage: string;
     list: { url: string; imgFile: File | null; name: string }[];
   }) {
+    let employeeId: string | undefined = undefined;
+
     currentFromDataEmployee.value.firstName =
       currentFromDataEmployee.value.firstName.trim();
     currentFromDataEmployee.value.middleName =
@@ -1249,7 +1268,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       const res = await employeeStore.create(
         {
           ...currentFromDataEmployee.value,
-          customerBranchId: state.value.formDataEmployeeOwner?.id || '',
+          customerBranchId: state.value.currentBranchId || '',
 
           employeeWork: [],
           employeeCheckup: [],
@@ -1259,6 +1278,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       );
 
       if (res) {
+        employeeId = res.id;
         await assignFormDataEmployee(res.id);
         currentFromDataEmployee.value.id = res.id;
         state.value.statusSavePersonal = true;
@@ -1280,10 +1300,12 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         },
       );
       if (res) {
+        employeeId = res.id;
         await assignFormDataEmployee(res.id);
         state.value.statusSavePersonal = true;
       }
     }
+    return employeeId;
   }
 
   async function assignFormDataEmployee(id?: string) {
@@ -1424,6 +1446,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         state.value.currentIndexVisa = -1;
       }
 
+      state.value.currentBranchId = payload.customerBranchId;
+
       const foundBranch = await customerStore.fetchListCustomerBranchById(
         payload.customerBranchId,
       );
@@ -1550,7 +1574,88 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       (currentFromDataEmployee.value.employeeWork?.length || 0) - 1;
   }
 
+  function employeeFormUndo(close = true) {
+    if (isFormDataDifferent()) {
+      return employeeConfirmUnsave(close);
+    }
+    resetFormDataEmployee();
+    state.value.editReadonly = true;
+  }
+
+  function employeeConfirmUnsave(close = true) {
+    dialog({
+      color: 'warning',
+      icon: 'mdi-alert',
+      title: t('form.warning.title'),
+      actionText: t('general.ok'),
+      persistent: true,
+      message: t('form.warning.unsave'),
+      action: () => {
+        resetFormDataEmployee();
+        onCreateImageList.value = { selectedImage: '', list: [] };
+        state.value.editReadonly = true;
+        state.value.dialogModal = !close;
+        state.value.drawerModal = !close;
+      },
+      cancel: () => {},
+    });
+  }
+
+  async function deleteEmployeeById(opts: {
+    id?: string;
+    type?: 'passport' | 'visa' | 'healthCheck' | 'work';
+    index?: number;
+    fetch?: (...args: unknown[]) => unknown;
+    removeArray?: (...args: unknown[]) => unknown;
+  }) {
+    dialog({
+      color: 'negative',
+      icon: 'mdi-alert',
+      title: t('dialog.title.confirmDelete'),
+      actionText: t('general.delete'),
+      persistent: true,
+      message: t('dialog.message.confirmDelete'),
+      action: async () => {
+        if (opts.type === 'passport' && opts.index !== undefined) {
+          await deletePassport(opts.index);
+        }
+
+        if (opts.type === 'visa' && opts.index !== undefined) {
+          await deleteVisa(opts.index);
+        }
+
+        if (opts.type === 'healthCheck' && opts.index !== undefined) {
+          await deleteHealthCheck(opts.index);
+        }
+
+        if (opts.type === 'work' && opts.index !== undefined) {
+          await deleteWorkHistory(opts.index);
+        } else {
+          if (!!opts.id) {
+            const result = await employeeStore.deleteById(opts.id);
+
+            if (result) {
+              state.value.drawerModal = false;
+              state.value.dialogModal = false;
+            }
+          }
+        }
+
+        if (route.name !== 'CustomerBranchManagement') {
+          await opts.fetch?.();
+          flowStore.rotate();
+        }
+        opts.removeArray?.();
+      },
+
+      cancel: () => {},
+    });
+  }
+
   return {
+    refreshImageState,
+    statusEmployeeCreate,
+    onCreateImageList,
     state,
     currentFromDataEmployee,
     resetEmployeeData,
@@ -1577,5 +1682,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     employeeFilterOwnerBranch,
 
     isFormDataDifferent,
+
+    employeeFormUndo,
+    employeeConfirmUnsave,
+    deleteEmployeeById,
   };
 });
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 916a4d41..7e23d7b0 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -590,8 +590,9 @@ async function convertDataToFormSubmit() {
         }
       }),
       ...newWorkerList.value.map((v) => {
-        const { attachment, ...payload } = v;
-        return payload;
+        {
+          return v.id;
+        }
       }),
     ]),
   );
diff --git a/src/pages/05_quotation/QuotationFormWorkerSelect.vue b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
index 4ef1a9cb..155c0b30 100644
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { reactive, ref, watch } from 'vue';
+import { reactive, ref, watch, onMounted } from 'vue';
+import { baseUrl, notify } from 'src/stores/utils';
 
 // NOTE: Import stores
 import { dialog } from 'stores/utils';
@@ -8,7 +9,7 @@ import useOptionStore from 'src/stores/options';
 import useEmployeeStore from 'src/stores/employee';
 import { useEmployeeForm } from 'src/pages/03_customer-management/form';
 import { waitAll } from 'src/stores/utils';
-import { calculateAge, dateFormatJS } from 'src/utils/datetime';
+import { calculateAge, dateFormat, dateFormatJS } from 'src/utils/datetime';
 import { dialogCheckData } from 'stores/utils';
 import { useQuotationForm } from 'pages/05_quotation/form';
 
@@ -48,6 +49,10 @@ import {
 import { storeToRefs } from 'pinia';
 import ToggleView from 'src/components/shared/ToggleView.vue';
 import TableWorker from 'src/components/shared/table/TableWorker.vue';
+import { SideMenu } from 'src/components';
+import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
+import { AddressForm } from 'src/components/form';
+import ExpirationDate from 'src/components/03_customer-management/ExpirationDate.vue';
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
@@ -57,10 +62,20 @@ const quotationForm = useQuotationForm();
 const { locale } = useI18n();
 const ocrStore = useOcrStore();
 
+const test = false;
+
 const viewMode = ref<boolean>(false);
 
-const { state: employeeFormState, currentFromDataEmployee } =
-  storeToRefs(employeeFormStore);
+const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
+  employeeFormStore;
+
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  onCreateImageList,
+  statusEmployeeCreate,
+  refreshImageState,
+} = storeToRefs(employeeFormStore);
 
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
 
@@ -141,49 +156,22 @@ const state = reactive({
   search: '',
 });
 
-function removeNewWorker(index: number) {
-  dialog({
-    color: 'negative',
-    icon: 'mdi-trash-can-outline',
-    title: t('dialog.title.confirmDelete'),
-    actionText: t('general.delete'),
-    persistent: true,
-    message: t('dialog.message.confirmDelete'),
-    action: async () => {
-      newWorkerList.value.splice(index, 1);
-    },
-    cancel: () => {},
+async function removeNewWorker(index: number) {
+  deleteEmployeeById({
+    id: newWorkerList.value[index].id,
+    removeArray: () => newWorkerList.value.splice(index, 1),
   });
 }
 
 function triggerCreateEmployee() {
   employeeFormStore.resetFormDataEmployee(true);
-  setDefaultFormEmployee();
+  setCurrentBranchId();
+  //setDefaultFormEmployee();
   employeeFormState.value.dialogType = 'create';
   employeeFormState.value.dialogModal = true;
   employeeFormState.value.isEmployeeEdit = true;
 }
 
-function setDefaultFormEmployee() {
-  formDataEmployee.value = {
-    passportNo: '',
-    documentExpireDate: new Date(),
-    lastNameEN: '',
-    lastName: '',
-    middleNameEN: '',
-    middleName: '',
-    firstNameEN: '',
-    firstName: '',
-    namePrefix: '',
-    nationality: '',
-    gender: '',
-    dateOfBirth: null,
-    attachment: [],
-  };
-
-  employeeFormState.value.dialogModal = false;
-}
-
 function clean() {
   workerList.value = [];
   workerSelected.value = [];
@@ -304,6 +292,10 @@ watch(
     }
   },
 );
+
+function setCurrentBranchId() {
+  employeeFormState.value.currentBranchId = props.customerBranchId;
+}
 </script>
 
 <template>
@@ -444,7 +436,7 @@ watch(
                     class="full-width"
                     :prefix-id="'employee-' + index"
                     :data="{
-                      name: `${emp.firstName} ${emp.lastName}`,
+                      name: `  ${emp.firstName ? `${emp.firstName} ${emp.lastName}` : `${emp.firstNameEN} ${emp.lastNameEN}`}`,
                       female: emp.gender === 'female',
                       male: emp.gender === 'male',
                       img: `/images/employee-avatar-${emp.gender}.png`,
@@ -505,7 +497,13 @@ watch(
               <TableWorker
                 v-if="workerList.length !== 0"
                 v-model:selected="workerSelected"
-                :rows="workerList"
+                :rows="
+                  !!newWorkerList.length
+                    ? workerList.filter((v) =>
+                        newWorkerList.some((x) => x.id !== v.id),
+                      )
+                    : workerList
+                "
                 :disabledWorkerId
                 :grid="viewMode"
               >
@@ -586,20 +584,59 @@ watch(
   <!-- NOTE: START - Employee Add Form -->
 
   <DialogForm
-    hide-footer
+    hideFooter
     ref="formDialogRef"
-    v-model:modal="employeeFormState.dialogModal"
     :title="$t('form.title.create', { name: $t('customer.employee') })"
+    v-model:modal="employeeFormState.dialogModal"
+    :undo="() => employeeFormUndo(false)"
     :submit="
-      () => {
-        quotationForm.injectNewEmployee({ data: formDataEmployee }, () =>
-          setDefaultFormEmployee(),
-        );
+      async () => {
+        if (employeeFormState.currentTab === 'personalInfo') {
+          const currentEmployeeId =
+            await employeeFormStore.submitPersonal(onCreateImageList);
+          quotationForm.injectNewEmployee({
+            data: { ...currentFromDataEmployee, id: currentEmployeeId },
+          });
+          employeeFormState.isEmployeeEdit = false;
+          employeeFormState.dialogType = 'info';
+        }
+
+        if (employeeFormState.currentTab === 'passport') {
+          await employeeFormStore.submitPassport();
+        }
+
+        if (employeeFormState.currentTab === 'visa') {
+          await employeeFormStore.submitVisa();
+        }
+
+        if (employeeFormState.currentTab === 'healthCheck') {
+          await employeeFormStore.submitHealthCheck();
+        }
+
+        if (employeeFormState.currentTab === 'workHistory') {
+          await employeeFormStore.submitWorkHistory();
+        }
+
+        if (employeeFormState.currentTab === 'other') {
+          await employeeFormStore.submitOther();
+        }
+        statusEmployeeCreate = true;
+        employeeFormState.isEmployeeEdit = false;
       }
     "
-    :close="
+    :show="
       () => {
-        employeeFormState.dialogModal = false;
+        employeeFormStore.resetFormDataEmployee(true);
+      }
+    "
+    :before-close="
+      () => {
+        if (employeeFormStore.isFormDataDifferent()) {
+          employeeConfirmUnsave();
+          return true;
+        }
+        employeeFormState.currentTab = 'personalInfo';
+        return false;
       }
     "
   >
@@ -610,9 +647,9 @@ watch(
       }"
     >
       <ProfileBanner
-        prefix="dialog"
         active
         useToggle
+        prefix="dialog"
         color="white"
         icon="mdi-account-plus-outline"
         :bg-color="
@@ -624,8 +661,42 @@ watch(
         v-model:toggle-status="currentFromDataEmployee.status"
         fallbackCover="/images/employee-banner.png"
         :img="
-          employeeFormState.profileUrl ||
-          `/images/employee-avatar-${currentFromDataEmployee.gender}.png`
+          `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
+            refreshImageState ? `?ts=${Date.now()}` : '',
+          ) || null
+        "
+        :fallbackImg="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
+        :tabs-list="
+          [
+            {
+              name: 'personalInfo',
+              label: $t('customerEmployee.form.group.personalInfo'),
+            },
+            {
+              name: 'passport',
+              label: $t('customerEmployee.fileType.passport'),
+            },
+            {
+              name: 'visa',
+              label: $t('customerEmployee.form.group.visa'),
+            },
+
+            {
+              name: 'healthCheck',
+              label: $t('customerEmployee.form.group.healthCheck'),
+            },
+            {
+              name: 'workHistory',
+              label: $t('customerEmployee.form.group.workHistory'),
+            },
+            { name: 'other', label: $t('customerEmployee.form.group.other') },
+          ].filter((v) => {
+            if (!employeeFormState.statusSavePersonal) {
+              return v.name === 'personalInfo';
+            }
+
+            return true;
+          })
         "
         :toggleTitle="$t('status.title')"
         hideFade
@@ -648,369 +719,1211 @@ watch(
         "
       />
     </div>
+
     <div
-      class="col"
+      style="flex: 1; width: 100%; overflow-y: auto"
       :class="{
         'q-px-lg q-pb-lg': $q.screen.gt.sm,
         'q-px-md q-pb-sm': !$q.screen.gt.sm,
       }"
+      id="drawer-employee-form"
     >
       <div
-        style="overflow-y: auto"
-        class="row full-width full-height surface-1 rounded bordered relative-position"
+        class="col surface-1 full-height rounded bordered scroll row relative-position"
+        :key="String(!employeeFormState.isEmployeeEdit)"
       >
         <div
-          :class="{
-            'q-py-md q-px-lg': $q.screen.gt.sm,
-            'q-py-sm q-px-lg': !$q.screen.gt.sm,
-          }"
-          style="position: absolute; z-index: 99999; top: 0; right: 0"
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
         >
-          <div
-            v-if="currentFromDataEmployee.status !== 'INACTIVE'"
-            class="surface-1 row rounded"
-          >
-            <UndoButton
-              v-if="
-                employeeFormState.isEmployeeEdit &&
-                employeeFormState.dialogType !== 'create'
+          <div class="q-py-md q-pl-md q-pr-sm">
+            <SideMenu
+              :menu="
+                [
+                  {
+                    name: $t('form.field.basicInformation'),
+                    anchor: 'form-information',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('customerEmployee.form.group.personalInfo'),
+                    anchor: 'form-personal',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('general.address'),
+                    anchor: 'form-personal-address',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('general.uploadFile'),
+                    anchor: 'form-info-file-upload',
+                    tab: 'personalInfo',
+                  },
+
+                  {
+                    name: $t('customerEmployee.form.group.passport'),
+                    anchor: 'form-passport',
+                    tab: 'passport',
+                    useBtn:
+                      currentFromDataEmployee.employeePassport?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return true;
+                          }
+                          return false;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexPassport === -1
+                        ? true
+                        : false,
+                  },
+                  ...(currentFromDataEmployee.employeePassport?.map((v, i) => ({
+                    name: dateFormat(v.expireDate),
+                    anchor: `form-employee-employeePassport-${i}`,
+                    tab: 'passport',
+                    sub: true,
+                  })) || []),
+
+                  {
+                    name: $t('customerEmployee.form.group.visa'),
+                    anchor: 'form-visa',
+                    tab: 'visa',
+                    useBtn:
+                      currentFromDataEmployee.employeeVisa?.filter((item) => {
+                        if (item.id === undefined) {
+                          return true;
+                        }
+                        return false;
+                      }).length === 0 &&
+                      employeeFormState.currentIndexVisa === -1
+                        ? true
+                        : false,
+                  },
+
+                  ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
+                    name: dateFormat(v.expireDate),
+                    anchor: `form-employee-visa-${i}`,
+                    tab: 'visa',
+                    sub: true,
+                  })) || []),
+
+                  {
+                    name: $t('customerEmployee.form.group.healthCheck'),
+                    anchor: 'form-employee-checkup',
+                    tab: 'healthCheck',
+                    useBtn:
+                      currentFromDataEmployee.employeeCheckup?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return true;
+                          }
+                          return false;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexCheckup === -1
+                        ? true
+                        : false,
+                  },
+
+                  ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
+                    name: $t('general.times', { number: i + 1 }),
+                    anchor: `form-employee-checkup-${i}`,
+                    tab: 'healthCheck',
+                  })) || []),
+
+                  {
+                    name: $t('customerEmployee.form.group.workHistory'),
+                    anchor: 'form-employee-work-history',
+                    tab: 'workHistory',
+                    useBtn:
+                      currentFromDataEmployee.employeeWork?.filter((item) => {
+                        if (item.id === undefined) {
+                          return true;
+                        }
+                        return false;
+                      }).length === 0 &&
+                      employeeFormState.currentIndexWorkHistory === -1
+                        ? true
+                        : false,
+                  },
+
+                  ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
+                    name: $t('general.times', { number: i + 1 }),
+                    anchor: `form-employee-work-history-${i}`,
+                    tab: 'workHistory',
+                  })) || []),
+
+                  {
+                    name: $t('customerEmployee.form.group.family'),
+                    anchor: 'form-employee-other',
+                    tab: 'other',
+                  },
+                ].filter((v) => v.tab === employeeFormState.currentTab)
               "
-              id="btn-info-basic-undo"
-              icon-only
-              @click="
-                () => {
-                  employeeFormStore.resetFormDataEmployee();
-                  employeeFormState.isEmployeeEdit = false;
-                  employeeFormState.dialogType = 'info';
-                }
-              "
-              type="button"
-            />
-            <SaveButton
-              v-if="employeeFormState.isEmployeeEdit"
-              id="btn-info-basic-save"
-              icon-only
-              type="submit"
-            />
-            <EditButton
-              v-if="!employeeFormState.isEmployeeEdit"
-              id="btn-info-basic-edit"
-              icon-only
-              @click="
-                () => {
-                  employeeFormState.isEmployeeEdit = true;
-                  employeeFormState.dialogType = 'edit';
-                }
-              "
-              type="button"
-            />
-            <DeleteButton
-              v-if="!employeeFormState.isEmployeeEdit"
-              id="btn-info-basic-delete"
-              icon-only
-            />
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#employee-form-content"
+            >
+              <template v-slot:btn-form-passport>
+                <q-btn
+                  id="form-add-passport"
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  padding="0px 0px"
+                  style="color: var(--stone-9)"
+                  @click.stop="employeeFormStore.addPassport()"
+                />
+              </template>
+
+              <template v-slot:btn-form-visa>
+                <q-btn
+                  id="form-add-visa"
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  style="color: var(--stone-9)"
+                  @click.stop="employeeFormStore.addVisa()"
+                />
+              </template>
+
+              <template v-slot:btn-form-employee-checkup>
+                <q-btn
+                  id="form-add-checkup"
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  style="color: var(--stone-9)"
+                  @click.stop="employeeFormStore.addCheckup()"
+                />
+              </template>
+
+              <template v-slot:btn-form-employee-work-history>
+                <q-btn
+                  id="form-add-work-history"
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  style="color: var(--stone-9)"
+                  @click.stop="employeeFormStore.addWorkHistory()"
+                />
+              </template>
+            </SideMenu>
           </div>
         </div>
 
         <div
-          class="col-12 full-height q-col-gutter-sm q-py-md q-pl-md q-pr-sm"
+          class="col-12 col-md-10"
           :class="{
             'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-py-md q-px-lg': !$q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
           }"
-          id="branch-form"
-          style="overflow-y: auto"
+          id="employee-form-content"
+          style="height: 100%; max-height: 100; overflow-y: auto"
         >
-          <FormReferDocument
-            title="form.field.basicInformation"
-            prefixId="dialog"
-            dense
-            v-model:passport-no="formDataEmployee.passportNo"
-            v-model:document-expire-date="formDataEmployee.documentExpireDate"
-            class="q-mb-md"
-          />
+          <template v-if="employeeFormState.currentTab === 'personalInfo'">
+            <div
+              class="rounded row q-py-md q-px-md"
+              style="position: absolute; z-index: 999; top: 0; right: 0"
+            >
+              <div class="surface-1 row rounded">
+                <UndoButton
+                  v-if="
+                    employeeFormState.isEmployeeEdit &&
+                    employeeFormState.dialogType !== 'create'
+                  "
+                  id="btn-info-basic-undo"
+                  icon-only
+                  @click="
+                    () => {
+                      employeeFormStore.resetFormDataEmployee();
+                      employeeFormState.isEmployeeEdit = false;
+                      employeeFormState.dialogType = 'info';
+                    }
+                  "
+                  type="button"
+                />
+                <SaveButton
+                  v-if="employeeFormState.isEmployeeEdit"
+                  id="btn-info-basic-save"
+                  icon-only
+                  type="submit"
+                />
+                <EditButton
+                  v-if="!employeeFormState.isEmployeeEdit"
+                  id="btn-info-basic-edit"
+                  icon-only
+                  @click="
+                    () => {
+                      employeeFormState.isEmployeeEdit = true;
+                      employeeFormState.dialogType = 'edit';
+                    }
+                  "
+                  type="button"
+                />
+                <DeleteButton
+                  v-if="!employeeFormState.isEmployeeEdit"
+                  id="btn-info-basic-delete"
+                  icon-only
+                  @click="() => removeNewWorker(newWorkerList.length - 1)"
+                  type="button"
+                />
+              </div>
+            </div>
 
-          <FormPerson
-            id="form-personal"
-            prefix-id="form-employee"
-            dense
-            outlined
-            employee
-            separator
-            hideNameEn
-            title="personnel.form.personalInformation"
-            class="q-mb-md"
-            v-model:prefix-name="formDataEmployee.namePrefix"
-            v-model:first-name="formDataEmployee.firstName"
-            v-model:mid-name="formDataEmployee.middleName"
-            v-model:last-name="formDataEmployee.lastName"
-            v-model:birth-date="formDataEmployee.dateOfBirth"
-            v-model:gender="formDataEmployee.gender"
-            v-model:nationality="formDataEmployee.nationality"
-          />
+            <BasicInformation
+              no-action
+              id="form-information"
+              prefix-id="form-employee"
+              :show-btn-save="employeeFormState.dialogType === 'create'"
+              employee
+              dense
+              outlined
+              separator
+              title="form.field.basicInformation"
+              :readonly="!employeeFormState.isEmployeeEdit"
+              v-model:customer-branch-id="employeeFormState.currentBranchId"
+              v-model:employee-id="employeeFormState.currentEmployeeCode"
+              v-model:nrc-no="currentFromDataEmployee.nrcNo"
+              v-model:code="currentFromDataEmployee.code"
+              class="q-mb-xl"
+            />
+            <FormPerson
+              id="form-personal"
+              prefix-id="form-employee"
+              dense
+              outlined
+              employee
+              separator
+              title="customerEmployee.form.group.personalInfo"
+              :readonly="!employeeFormState.isEmployeeEdit"
+              v-model:open="employeeFormState.dialogModal"
+              v-model:prefix-name="currentFromDataEmployee.namePrefix"
+              v-model:first-name="currentFromDataEmployee.firstName"
+              v-model:last-name="currentFromDataEmployee.lastName"
+              v-model:first-name-en="currentFromDataEmployee.firstNameEN"
+              v-model:last-name-en="currentFromDataEmployee.lastNameEN"
+              v-model:mid-name="currentFromDataEmployee.middleName"
+              v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
+              v-model:gender="currentFromDataEmployee.gender"
+              v-model:birth-date="currentFromDataEmployee.dateOfBirth"
+              v-model:nationality="currentFromDataEmployee.nationality"
+              class="q-mb-xl"
+            />
+            <AddressForm
+              disabledRule
+              id="form-personal-address"
+              prefix-id="form-employee"
+              :readonly="!employeeFormState.isEmployeeEdit"
+              v-model:same-with-employer="
+                employeeFormState.formDataEmployeeSameAddr
+              "
+              v-model:address="currentFromDataEmployee.address"
+              v-model:address-en="currentFromDataEmployee.addressEN"
+              v-model:moo="currentFromDataEmployee.moo"
+              v-model:moo-en="currentFromDataEmployee.mooEN"
+              v-model:soi="currentFromDataEmployee.soi"
+              v-model:soi-en="currentFromDataEmployee.soiEN"
+              v-model:street="currentFromDataEmployee.street"
+              v-model:street-en="currentFromDataEmployee.streetEN"
+              v-model:province-id="currentFromDataEmployee.provinceId"
+              v-model:district-id="currentFromDataEmployee.districtId"
+              v-model:sub-district-id="currentFromDataEmployee.subDistrictId"
+              employee
+              dense
+              class="q-mb-xl"
+            />
 
-          <UploadFileGroup
-            show-title
-            v-model="formDataEmployee.attachment"
-            hide-action
-            @submit="
-              async (group, allMeta) => {
-                if (allMeta === undefined) return;
+            <div class="row q-mb-md" id="form-info-file-upload">
+              <div class="col-12 q-pb-sm text-weight-bold text-body1">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-upload"
+                  style="background-color: var(--surface-3)"
+                />
+                {{ $t(`general.uploadFile`) }}
+              </div>
+              <!-- สร้างลูกจ้าง -->
+              <UploadFileGroup
+                v-model:current-id="currentFromDataEmployee.id"
+                v-model="currentFromDataEmployee.file"
+                hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
+                :menu="uploadFileListEmployee"
+                :columns="columnsAttachment"
+                @submit="
+                  async (group, allMeta) => {
+                    if (allMeta === undefined) return;
 
-                if (group === 'passport') {
-                  const fullName = allMeta['full_name'].split(' ');
-                  let tempValue: {
-                    oldData: { nameField: string; value: string }[];
-                    newData: { nameField: string; value: string }[];
-                  } = { oldData: [], newData: [] };
+                    if (group === 'passport') {
+                      const fullName = allMeta['full_name'].split(' ');
+                      let tempValue: {
+                        oldData: { nameField: string; value: string }[];
+                        newData: { nameField: string; value: string }[];
+                      } = { oldData: [], newData: [] };
 
-                  if (
-                    formDataEmployee.gender !== '' &&
-                    formDataEmployee.gender !== allMeta['sex']
-                  ) {
-                    tempValue.oldData.push({
-                      nameField: $t('form.gender'),
-                      value: $t(`general.${formDataEmployee.gender}`),
-                    });
-                    tempValue.newData.push({
-                      nameField: $t('form.gender'),
-                      value: $t(`general.${allMeta['sex']}`),
-                    });
+                      if (
+                        currentFromDataEmployee.gender !== '' &&
+                        currentFromDataEmployee.gender !== allMeta['sex']
+                      ) {
+                        tempValue.oldData.push({
+                          nameField: $t('form.gender'),
+                          value: $t(
+                            `general.${currentFromDataEmployee.gender}`,
+                          ),
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('form.gender'),
+                          value: $t(`general.${allMeta['sex']}`),
+                        });
+                      }
+
+                      if (currentFromDataEmployee.firstName !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('personnel.form.firstName'),
+                          value: currentFromDataEmployee.firstName,
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('personnel.form.firstName'),
+                          value: fullName[0],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.lastName !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('personnel.form.lastName'),
+                          value: currentFromDataEmployee.lastName,
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('personnel.form.lastName'),
+                          value: fullName[1],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.nationality !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('general.nationality'),
+                          value: currentFromDataEmployee.nationality || '',
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('general.nationality'),
+                          value: allMeta['nationality'],
+                        });
+                      }
+
+                      dialogCheckData({
+                        action: async () => {
+                          currentFromDataEmployee.gender = allMeta['sex'];
+                          currentFromDataEmployee.firstName = fullName[0];
+                          currentFromDataEmployee.lastName = fullName[1];
+                          currentFromDataEmployee.nationality =
+                            allMeta['nationality'];
+                        },
+                        checkData: () => {
+                          return tempValue;
+                        },
+                        cancel: () => {
+                          if (!currentFromDataEmployee.gender) {
+                            currentFromDataEmployee.gender = allMeta['gender'];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.lastName) {
+                            currentFromDataEmployee.lastName = fullName[1];
+                          }
+
+                          if (!currentFromDataEmployee.nationality) {
+                            currentFromDataEmployee.nationality =
+                              allMeta['nationality'];
+                          }
+                        },
+                      });
+                    }
                   }
+                "
+                :ocr="
+                  async (group, file) => {
+                    if (group === 'passport') {
+                      mrz = await runOcr(file, parseResultMRZ);
 
-                  if (formDataEmployee.firstName !== '') {
-                    tempValue.oldData.push({
-                      nameField: $t('personnel.form.firstName'),
-                      value: formDataEmployee.firstName,
-                    });
-                    tempValue.newData.push({
-                      nameField: $t('personnel.form.firstName'),
-                      value: fullName[0],
-                    });
+                      if (mrz !== null) {
+                        const mapMrz = Object.entries(mrz.result || {}).map(
+                          ([key, value]) => ({
+                            name: key,
+                            value: value,
+                          }),
+                        );
+                        const tempValue = {
+                          status: true,
+                          group,
+                          meta: mapMrz,
+                        };
+
+                        return tempValue;
+                      }
+                    }
+                    if (group === 'visa') {
+                      const res = await ocrStore.sendOcr({
+                        file: file,
+                        category: group,
+                      });
+
+                      if (res) {
+                        const tempValue = {
+                          status: true,
+                          group,
+                          meta: res.fields,
+                        };
+
+                        return tempValue;
+                      }
+                    }
+
+                    return { status: true, group, meta: [] };
                   }
-
-                  if (formDataEmployee.lastName !== '') {
-                    tempValue.oldData.push({
-                      nameField: $t('personnel.form.lastName'),
-                      value: formDataEmployee.lastName,
-                    });
-                    tempValue.newData.push({
-                      nameField: $t('personnel.form.lastName'),
-                      value: fullName[1],
-                    });
+                "
+                :auto-save="currentFromDataEmployee.id !== ''"
+                :download="
+                  (obj) => {
+                    if (obj.group !== 'attachment') {
+                      employeeStore.getFile({
+                        parentId: currentFromDataEmployee.id || '',
+                        group: obj.group,
+                        fileId: obj._meta.id,
+                        download: true,
+                      });
+                    } else {
+                      employeeStore.getAttachment({
+                        parentId: currentFromDataEmployee.id || '',
+                        name: obj._meta.name,
+                        download: true,
+                      });
+                    }
                   }
-
-                  if (formDataEmployee.passportNo !== '') {
-                    tempValue.oldData.push({
-                      nameField: $t('customerEmployee.form.passportNo'),
-                      value: formDataEmployee.passportNo || '',
+                "
+                :delete-item="
+                  async (obj) => {
+                    let status: boolean = false;
+                    const res = await employeeStore.delMeta({
+                      parentId: currentFromDataEmployee.id || '',
+                      group: obj.group,
+                      metaId: obj._meta.id,
                     });
-                    tempValue.newData.push({
-                      nameField: $t('customerEmployee.form.passportNo'),
-                      value: allMeta['doc_number'],
-                    });
-                  }
 
-                  if (formDataEmployee.nationality !== '') {
-                    tempValue.oldData.push({
-                      nameField: $t('general.nationality'),
-                      value: formDataEmployee.nationality || '',
-                    });
-                    tempValue.newData.push({
-                      nameField: $t('general.nationality'),
-                      value: allMeta['nationality'],
-                    });
-                  }
+                    if (res) {
+                      status = true;
+                    }
 
-                  dialogCheckData({
-                    action: async () => {
-                      formDataEmployee.gender = allMeta['sex'];
-                      formDataEmployee.firstName = fullName[0];
-                      formDataEmployee.lastName = fullName[1];
-                      formDataEmployee.passportNo = allMeta['doc_number'];
-                      formDataEmployee.nationality = allMeta['nationality'];
-                    },
-                    checkData: () => {
-                      return tempValue;
-                    },
-                    cancel: () => {
-                      if (!formDataEmployee.gender) {
-                        formDataEmployee.gender = allMeta['gender'];
-                      }
-                      if (!formDataEmployee.firstName) {
-                        formDataEmployee.firstName = fullName[0];
-                      }
-                      if (!formDataEmployee.firstName) {
-                        formDataEmployee.firstName = fullName[0];
-                      }
-                      if (!formDataEmployee.lastName) {
-                        formDataEmployee.lastName = fullName[1];
-                      }
-                      if (!formDataEmployee.passportNo) {
-                        formDataEmployee.passportNo = allMeta['doc_number'];
-                      }
-                      if (!formDataEmployee.nationality) {
-                        formDataEmployee.nationality = allMeta['nationality'];
-                      }
-                    },
-                  });
-                }
-              }
-            "
-            :menu="uploadFileListEmployee"
-            :columns="columnsAttachment"
-            :ocr="
-              async (group, file) => {
-                if (group === 'passport') {
-                  mrz = await runOcr(file, parseResultMRZ);
-
-                  if (mrz !== null) {
-                    const mapMrz = Object.entries(mrz.result || {}).map(
-                      ([key, value]) => ({
-                        name: key,
-                        value: value,
-                      }),
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
                     );
-                    const tempValue = {
-                      status: true,
-                      group,
-                      meta: mapMrz,
-                    };
 
-                    return tempValue;
+                    return status;
                   }
-                }
-                if (group === 'visa') {
-                  const res = await ocrStore.sendOcr({
-                    file: file,
-                    category: group,
-                  });
+                "
+                :save="
+                  async (
+                    group: 'passport' | 'visa' | 'attachment',
+                    _meta: any,
+                    file: File | undefined,
+                  ) => {
+                    let status: boolean = false;
+                    if (group !== 'attachment') {
+                      if (file !== undefined && currentFromDataEmployee.id) {
+                        const res = await employeeStore.postMeta({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          meta: _meta,
+                          file,
+                        });
 
-                  if (res) {
-                    const tempValue = {
-                      status: true,
-                      group,
-                      meta: res.fields,
-                    };
+                        if (res) {
+                          status = true;
+                        }
+                      } else {
+                        const {
+                          id,
+                          employeeId,
+                          createdAt,
+                          updatedAt,
+                          ...payload
+                        } = _meta;
 
-                    return tempValue;
+                        const res = await employeeStore.putMeta({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          metaId: _meta.id,
+                          meta: payload,
+                          file,
+                        });
+                        if (res) {
+                          status = true;
+                        }
+                      }
+                    } else {
+                      if (file !== undefined) {
+                        await employeeStore.uploadAttachment(
+                          currentFromDataEmployee.id || '',
+                          file,
+                          file.name,
+                        );
+                        status = true;
+                      }
+                    }
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
+                    );
+                    return status;
                   }
-                }
-
-                return { status: true, group, meta: [] };
-              }
-            "
-            :delete-item="
-              async () => {
-                return true;
-              }
-            "
-            :get-file-list="
-              async (group: 'passport' | 'visa' | 'attachment') => {
-                if (!!currentFromDataEmployee.id && group !== 'attachment') {
-                  const resMeta = await employeeStore.getMetaList({
-                    parentId: currentFromDataEmployee.id,
-                    group,
-                  });
-
-                  const tempValue = resMeta.map(async (i: any) => {
-                    return {
-                      _meta: { ...i },
-                      name: `${group}-${dateFormatJS(i.expireDate)}` || '',
-                      group: group,
-                      url: await employeeStore.getFile({
-                        parentId: currentFromDataEmployee.id || '',
+                "
+                :get-file-list="
+                  async (group: 'passport' | 'visa' | 'attachment') => {
+                    if (
+                      !!currentFromDataEmployee.id &&
+                      group !== 'attachment'
+                    ) {
+                      const resMeta = await employeeStore.getMetaList({
+                        parentId: currentFromDataEmployee.id,
                         group,
-                        fileId: i.id,
-                      }),
-                      file: undefined,
-                    };
-                  });
+                      });
 
-                  return await waitAll(tempValue);
-                } else {
-                  const res = await employeeStore.listAttachment({
-                    parentId: currentFromDataEmployee.id || '',
-                  });
+                      const tempValue = resMeta.map(async (i: any) => {
+                        return {
+                          _meta: { ...i },
+                          name: `${group}-${dateFormat(i.expireDate)}` || '',
+                          group: group,
+                          url: await employeeStore.getFile({
+                            parentId: currentFromDataEmployee.id || '',
+                            group,
+                            fileId: i.id,
+                          }),
+                          file: undefined,
+                        };
+                      });
 
-                  const tempValue = (res as string[]).map(async (i: any) => {
-                    return {
-                      _meta: { id: i, name: i },
-                      name: i || '',
-                      group: group,
-                      url: await employeeStore.getAttachment({
+                      return await waitAll(tempValue);
+                    } else {
+                      const res = await employeeStore.listAttachment({
                         parentId: currentFromDataEmployee.id || '',
-                        name: i,
-                      }),
-                      file: undefined,
-                    };
-                  });
+                      });
+
+                      const tempValue = (res as string[]).map(
+                        async (i: any) => {
+                          return {
+                            _meta: { id: i, name: i },
+                            name: i || '',
+                            group: group,
+                            url: await employeeStore.getAttachment({
+                              parentId: currentFromDataEmployee.id || '',
+                              name: i,
+                            }),
+                            file: undefined,
+                          };
+                        },
+                      );
+
+                      return await waitAll(tempValue);
+                    }
+                  }
+                "
+              >
+                <template #form="{ mode, meta, isEdit }">
+                  <FormEmployeePassport
+                    v-if="mode === 'passport' && meta"
+                    prefix-id="drawer-info-employee"
+                    id="form-passport"
+                    dense
+                    outlined
+                    separator
+                    ocr
+                    :title="$t('customerEmployee.form.group.passport')"
+                    :readonly="!isEdit"
+                    v-model:birth-country="meta.birthCountry"
+                    v-model:previous-passportRef="meta.previousPassportRef"
+                    v-model:issue-place="meta.issuePlace"
+                    v-model:issue-country="meta.issueCountry"
+                    v-model:issue-date="meta.issueDate"
+                    v-model:type="meta.type"
+                    v-model:expire-date="meta.expireDate"
+                    v-model:birth-date="meta.birthDate"
+                    v-model:worker-status="meta.workerStatus"
+                    v-model:nationality="meta.nationality"
+                    v-model:gender="meta.gender"
+                    v-model:last-name-en="meta.lastNameEN"
+                    v-model:last-name="meta.lastName"
+                    v-model:middle-name-en="meta.middleNameEN"
+                    v-model:middle-name="meta.middleName"
+                    v-model:first-name-en="meta.firstNameEN"
+                    v-model:first-name="meta.firstName"
+                    v-model:name-prefix="meta.namePrefix"
+                    v-model:passport-number="meta.number"
+                  />
+                  <FormEmployeeVisa
+                    v-if="mode === 'visa' && meta"
+                    prefix-id="drawer-info-employee"
+                    id="form-visa"
+                    ocr
+                    dense
+                    outlined
+                    title="customerEmployee.form.group.visa"
+                    :readonly="!isEdit"
+                    v-model:arrival-at="meta.arrivalAt"
+                    v-model:arrival-tm-no="meta.arrivalTMNo"
+                    v-model:arrival-tm="meta.arrivalTM"
+                    v-model:mrz="meta.mrz"
+                    v-model:entry-count="meta.entryCount"
+                    v-model:issue-place="meta.issuePlace"
+                    v-model:issue-country="meta.issueCountry"
+                    v-model:issueDate="meta.issueDate"
+                    v-model:type="meta.type"
+                    v-model:expire-date="meta.expireDate"
+                    v-model:visa-issue-date="meta.issueDate"
+                    v-model:visa-expiry-date="meta.expireDate"
+                    v-model:remark="meta.remark"
+                    v-model:worker-type="meta.workerType"
+                    v-model:number="meta.number"
+                  />
+
+                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+                </template>
+              </UploadFileGroup>
+            </div>
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'passport'">
+            <div class="q-gutter-sm">
+              <div
+                class="col-12 q-pb-sm 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-passport"
+                  style="background-color: var(--surface-3)"
+                />
+                {{ $t('customerEmployee.form.group.passport') }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeePassport?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 &&
+                    employeeFormState.currentIndexPassport === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addPassport()"
+                />
+              </div>
 
-                  return await waitAll(tempValue);
-                }
-              }
-            "
-          >
-            <template #form="{ mode, meta, isEdit }">
               <FormEmployeePassport
-                v-if="mode === 'passport' && meta"
+                v-for="(
+                  value, index
+                ) in currentFromDataEmployee.employeePassport"
                 prefix-id="drawer-info-employee"
+                :key="index"
                 id="form-passport"
+                hide-title
                 dense
                 outlined
                 separator
-                ocr
                 :title="$t('customerEmployee.form.group.passport')"
-                :readonly="!isEdit"
-                v-model:birth-country="meta.birthCountry"
-                v-model:previous-passportRef="meta.previousPassportRef"
-                v-model:issue-place="meta.issuePlace"
-                v-model:issue-country="meta.issueCountry"
-                v-model:issue-date="meta.issueDate"
-                v-model:type="meta.type"
-                v-model:expire-date="meta.expireDate"
-                v-model:birth-date="meta.birthDate"
-                v-model:worker-status="meta.workerStatus"
-                v-model:nationality="meta.nationality"
-                v-model:gender="meta.gender"
-                v-model:last-name-en="meta.lastNameEN"
-                v-model:last-name="meta.lastName"
-                v-model:middle-name-en="meta.middleNameEN"
-                v-model:middle-name="meta.middleName"
-                v-model:first-name-en="meta.firstNameEN"
-                v-model:first-name="meta.firstName"
-                v-model:name-prefix="meta.namePrefix"
-                v-model:passport-number="meta.number"
-              />
+                :readonly="employeeFormState.currentIndexPassport !== index"
+                :full-name="employeeFormState.currentIndexPassport !== index"
+                v-model:birth-country="value.birthCountry"
+                v-model:previous-passportRef="value.previousPassportRef"
+                v-model:issue-place="value.issuePlace"
+                v-model:issue-country="value.issueCountry"
+                v-model:issue-date="value.issueDate"
+                v-model:type="value.type"
+                v-model:expire-date="value.expireDate"
+                v-model:birth-date="value.birthDate"
+                v-model:worker-status="value.workerStatus"
+                v-model:nationality="value.nationality"
+                v-model:gender="value.gender"
+                v-model:last-name-en="value.lastNameEN"
+                v-model:last-name="value.lastName"
+                v-model:middle-name-en="value.middleNameEN"
+                v-model:middle-name="value.middleName"
+                v-model:first-name-en="value.firstNameEN"
+                v-model:first-name="value.firstName"
+                v-model:name-prefix="value.namePrefix"
+                v-model:passport-number="value.number"
+              >
+                <template v-slot:expiryDate>
+                  {{ $t('general.expirationDate') }} :
+                  {{ dateFormat(value.expireDate) }}
+                  <ExpirationDate
+                    v-if="value.id !== undefined"
+                    :expiration-date="value.expireDate"
+                  />
+                </template>
+
+                <template v-slot:button>
+                  <div class="surface-1 row rounded" style="min-height: 35px">
+                    <UndoButton
+                      v-if="
+                        employeeFormState.isEmployeeEdit &&
+                        !(employeeFormState.currentIndexPassport === -1) &&
+                        employeeFormState.currentIndexPassport === index
+                      "
+                      id="btn-info-basic-undo"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormStore.resetFormDataEmployee();
+                          employeeFormState.isEmployeeEdit = false;
+                          employeeFormState.dialogType = 'info';
+                          employeeFormState.currentIndexPassport = -1;
+                        }
+                      "
+                      type="button"
+                    />
+                    <SaveButton
+                      v-if="
+                        (employeeFormState.isEmployeeEdit ||
+                          value.id === undefined) &&
+                        !(employeeFormState.currentIndexPassport === -1) &&
+                        employeeFormState.currentIndexPassport === index
+                      "
+                      id="btn-info-basic-save"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormState.currentIndexPassport = index;
+                        }
+                      "
+                      type="submit"
+                    />
+
+                    <EditButton
+                      v-if="
+                        employeeFormState.currentIndexPassport === -1 ||
+                        (!employeeFormState.isEmployeeEdit &&
+                          value.id !== undefined &&
+                          employeeFormState.currentIndexPassport === index)
+                      "
+                      id="btn-info-basic-edit"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormState.currentIndexPassport = index;
+                          employeeFormState.isEmployeeEdit = true;
+                          employeeFormState.dialogType = 'edit';
+                        }
+                      "
+                      type="button"
+                    />
+                    <DeleteButton
+                      v-if="
+                        employeeFormState.currentIndexPassport === -1 ||
+                        (!employeeFormState.isEmployeeEdit &&
+                          value.id !== undefined &&
+                          !(employeeFormState.currentIndexPassport === -1) &&
+                          employeeFormState.currentIndexPassport === index)
+                      "
+                      id="btn-info-basic-delete"
+                      icon-only
+                      @click.stop="
+                        () => {
+                          employeeFormState.currentIndexPassport = index;
+                          deleteEmployeeById({ type: 'passport', index });
+                        }
+                      "
+                      type="button"
+                      :disabled="
+                        !(employeeFormState.currentIndexPassport === -1) &&
+                        !(employeeFormState.currentIndexPassport === index)
+                      "
+                    />
+                  </div>
+                </template>
+              </FormEmployeePassport>
+            </div>
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'visa'">
+            <div class="q-gutter-sm">
+              <div
+                class="col-12 q-pb-sm 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-passport"
+                  style="background-color: var(--surface-3)"
+                />
+                {{ $t('customerEmployee.form.group.visa') }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeeVisa?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 && employeeFormState.currentIndexVisa === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addVisa()"
+                />
+              </div>
+
               <FormEmployeeVisa
-                v-if="mode === 'visa' && meta"
+                v-for="(value, index) in currentFromDataEmployee.employeeVisa"
+                :key="index"
                 prefix-id="drawer-info-employee"
                 id="form-visa"
-                ocr
                 dense
                 outlined
                 title="customerEmployee.form.group.visa"
-                :readonly="!isEdit"
-                v-model:arrival-at="meta.arrivalAt"
-                v-model:arrival-tm-no="meta.arrivalTMNo"
-                v-model:arrival-tm="meta.arrivalTM"
-                v-model:mrz="meta.mrz"
-                v-model:entry-count="meta.entryCount"
-                v-model:issue-place="meta.issuePlace"
-                v-model:issue-country="meta.issueCountry"
-                v-model:issueDate="meta.issueDate"
-                v-model:type="meta.type"
-                v-model:expire-date="meta.expireDate"
-                v-model:visa-issue-date="meta.issueDate"
-                v-model:visa-expiry-date="meta.expireDate"
-                v-model:remark="meta.remark"
-                v-model:worker-type="meta.workerType"
-                v-model:number="meta.number"
-              />
+                :readonly="employeeFormState.currentIndexVisa !== index"
+                hide-title
+                v-model:arrival-at="value.arrivalAt"
+                v-model:arrival-tm-no="value.arrivalTMNo"
+                v-model:arrival-tm="value.arrivalTM"
+                v-model:mrz="value.mrz"
+                v-model:entry-count="value.entryCount"
+                v-model:issue-place="value.issuePlace"
+                v-model:issue-country="value.issueCountry"
+                v-model:issueDate="value.issueDate"
+                v-model:type="value.type"
+                v-model:expire-date="value.expireDate"
+                v-model:visa-issue-date="value.issueDate"
+                v-model:visa-expiry-date="value.expireDate"
+                v-model:remark="value.remark"
+                v-model:worker-type="value.workerType"
+                v-model:number="value.number"
+              >
+                <template v-slot:expiryDate>
+                  {{ $t('general.expirationDate') }} :
+                  {{ dateFormat(value.expireDate) }}
+                  <ExpirationDate
+                    v-if="value.id !== undefined"
+                    :expiration-date="value.expireDate"
+                  />
+                </template>
 
-              <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
-            </template>
-          </UploadFileGroup>
+                <template v-slot:button>
+                  <div class="surface-1 row rounded" style="min-height: 35px">
+                    <UndoButton
+                      v-if="
+                        employeeFormState.isEmployeeEdit &&
+                        !(employeeFormState.currentIndexVisa === -1) &&
+                        employeeFormState.currentIndexVisa === index
+                      "
+                      id="btn-info-basic-undo"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormStore.resetFormDataEmployee();
+                          employeeFormState.isEmployeeEdit = false;
+                          employeeFormState.dialogType = 'info';
+                          employeeFormState.currentIndexVisa = -1;
+                        }
+                      "
+                      type="button"
+                    />
+                    <SaveButton
+                      v-if="
+                        (employeeFormState.isEmployeeEdit ||
+                          value.id === undefined) &&
+                        !(employeeFormState.currentIndexVisa === -1) &&
+                        employeeFormState.currentIndexVisa === index
+                      "
+                      id="btn-info-basic-save"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormState.currentIndexVisa = index;
+                        }
+                      "
+                      type="submit"
+                    />
+
+                    <EditButton
+                      v-if="
+                        employeeFormState.currentIndexVisa === -1 ||
+                        (!employeeFormState.isEmployeeEdit &&
+                          value.id !== undefined &&
+                          employeeFormState.currentIndexVisa === index)
+                      "
+                      id="btn-info-basic-edit"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormState.currentIndexVisa = index;
+                          employeeFormState.isEmployeeEdit = true;
+                          employeeFormState.dialogType = 'edit';
+                        }
+                      "
+                      type="button"
+                    />
+                    <DeleteButton
+                      v-if="
+                        employeeFormState.currentIndexVisa === -1 ||
+                        (!employeeFormState.isEmployeeEdit &&
+                          value.id !== undefined &&
+                          !(employeeFormState.currentIndexVisa === -1) &&
+                          employeeFormState.currentIndexVisa === index)
+                      "
+                      id="btn-info-basic-delete"
+                      icon-only
+                      @click.stop="
+                        () => {
+                          employeeFormState.currentIndexVisa = index;
+                          deleteEmployeeById({ type: 'visa', index });
+                        }
+                      "
+                      type="button"
+                      :disabled="
+                        !(employeeFormState.currentIndexVisa === -1) &&
+                        !(employeeFormState.currentIndexVisa === index)
+                      "
+                    />
+                  </div>
+                </template>
+              </FormEmployeeVisa>
+            </div>
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'healthCheck'">
+            <div class="q-gutter-sm">
+              <div class="q-pb-sm text-weight-bold text-body1 row items-center">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-sm"
+                  color="info"
+                  name="mdi-hospital-box-outline"
+                  style="background-color: var(--surface-3)"
+                />
+
+                {{ $t(`customerEmployee.formHealthCheck.title`) }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeeCheckup?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 &&
+                    employeeFormState.currentIndexCheckup === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addCheckup()"
+                />
+              </div>
+              <FormEmployeeHealthCheck
+                v-if="employeeFormState.currentTab === 'healthCheck'"
+                id="form-checkup"
+                prefix-id="form-employee"
+                dense
+                outlined
+                v-model:current-index="employeeFormState.currentIndexCheckup"
+                v-model:employee-checkup="
+                  currentFromDataEmployee.employeeCheckup
+                "
+                v-model:checkup-results-option="
+                  optionStore.globalOption.checkupResults
+                "
+                v-model:checkup-type-option="
+                  optionStore.globalOption.insurancePlace
+                "
+                v-model:medical-benefit-option="
+                  optionStore.globalOption.typeInsurance
+                "
+                v-model:insurance-company-option="
+                  optionStore.globalOption.insurancePlace
+                "
+                @delete="
+                  (index) => {
+                    employeeFormState.currentIndexCheckup = index;
+                    deleteEmployeeById({ type: 'healthCheck', index });
+                  }
+                "
+                @save="
+                  (index) => {
+                    employeeFormState.currentIndexCheckup = index;
+                    notify('create', $t('general.success'));
+                  }
+                "
+                @undo="
+                  (index) => {
+                    if (
+                      currentFromDataEmployee.employeeCheckup?.[index]
+                        .statusSave === false
+                    ) {
+                      currentFromDataEmployee.employeeCheckup[
+                        index
+                      ].statusSave = true;
+                    }
+                  }
+                "
+                @edit="
+                  (index) => {
+                    if (
+                      currentFromDataEmployee.employeeCheckup?.[index]
+                        .statusSave
+                    ) {
+                      currentFromDataEmployee.employeeCheckup[
+                        index
+                      ].statusSave = false;
+                    }
+                  }
+                "
+              />
+            </div>
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'workHistory'">
+            <div class="q-gutter-sm">
+              <div
+                class="col-12 q-pb-sm 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)"
+                />
+                {{ $t(`customerEmployee.form.group.workHistory`) }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeeWork?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 &&
+                    employeeFormState.currentIndexWorkHistory === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addWorkHistory()"
+                />
+              </div>
+              <FormEmployeeWorkHistory
+                v-if="employeeFormState.currentTab === 'workHistory'"
+                id="form-work-history"
+                prefix-id="form-employee"
+                dense
+                outlined
+                v-model:current-index="
+                  employeeFormState.currentIndexWorkHistory
+                "
+                v-model:employee-work="currentFromDataEmployee.employeeWork"
+                v-model:position-name-option="optionStore.globalOption.position"
+                v-model:job-type-option="optionStore.globalOption.businessType"
+                v-model:workplace-option="optionStore.globalOption.area"
+                @delete="
+                  (index) => {
+                    employeeFormState.currentIndexWorkHistory = index;
+                    deleteEmployeeById({ type: 'work', index });
+                  }
+                "
+                @save="
+                  (index) => {
+                    employeeFormState.currentIndexWorkHistory = index;
+                  }
+                "
+                @undo="
+                  (index) => {
+                    if (
+                      currentFromDataEmployee.employeeWork?.[index]
+                        .statusSave === false
+                    ) {
+                      currentFromDataEmployee.employeeWork[index].statusSave =
+                        true;
+                    }
+                  }
+                "
+                @edit="
+                  (index) => {
+                    if (
+                      currentFromDataEmployee.employeeWork?.[index].statusSave
+                    ) {
+                      currentFromDataEmployee.employeeWork[index].statusSave =
+                        false;
+                    }
+                  }
+                "
+              />
+            </div>
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'other'">
+            <FormEmployeeOther
+              v-if="employeeFormState.currentTab === 'other'"
+              id="form-employee-other"
+              prefix-id="form-employee"
+              dense
+              outlined
+              v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
+              @undo="
+                () => {
+                  if (
+                    currentFromDataEmployee.employeeOtherInfo?.statusSave ===
+                    false
+                  ) {
+                    currentFromDataEmployee.employeeOtherInfo.statusSave = true;
+                  }
+                }
+              "
+              @edit="
+                () => {
+                  if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
+                    currentFromDataEmployee.employeeOtherInfo.statusSave = false;
+                  }
+                }
+              "
+            />
+          </template>
         </div>
       </div>
     </div>
diff --git a/src/pages/05_quotation/form.ts b/src/pages/05_quotation/form.ts
index 969144ad..45801a5a 100644
--- a/src/pages/05_quotation/form.ts
+++ b/src/pages/05_quotation/form.ts
@@ -221,6 +221,7 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     newWorkerList.value.push({
       //passportNo: obj.data.passportNo,
       //documentExpireDate: obj.data.documentExpireDate,
+      id: obj.data.id,
       lastNameEN: obj.data.lastNameEN,
       lastName: obj.data.lastName,
       middleNameEN: obj.data.middleNameEN,