diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 9dcf25b9..b6a7a2ce 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -646,7 +646,6 @@ watch(
       currentFromDataEmployee.value.provinceId = e.provinceId;
       currentFromDataEmployee.value.districtId = e.districtId;
       currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
-      currentFromDataEmployee.value.zipCode = e.zipCode;
     }
     currentFromDataEmployee.value.customerBranchId = e.id;
   },
@@ -667,8 +666,6 @@ watch(
         employeeFormState.value.formDataEmployeeOwner.districtId;
       currentFromDataEmployee.value.subDistrictId =
         employeeFormState.value.formDataEmployeeOwner.subDistrictId;
-      currentFromDataEmployee.value.zipCode =
-        employeeFormState.value.formDataEmployeeOwner.zipCode;
     }
     currentFromDataEmployee.value.customerBranchId =
       employeeFormState.value.formDataEmployeeOwner.id;
@@ -1581,6 +1578,7 @@ const emptyCreateDialog = ref(false);
                                       v !== 'contactName'
                                     );
                                   })"
+                                !
                                 :key="key"
                               >
                                 <span class="col-4 app-text-muted">
@@ -2300,7 +2298,6 @@ const emptyCreateDialog = ref(false);
         }
         statusEmployeeCreate = true;
         employeeFormState.isEmployeeEdit = false;
-        employeeFormState.currentIndex = -1;
 
         await fetchListEmployee(true);
       }
@@ -2496,12 +2493,46 @@ const emptyCreateDialog = ref(false);
                     sub: true,
                   })) || []),
 
+                  {
+                    name: $t('customerEmployee.form.group.visa'),
+                    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}`,
@@ -2524,6 +2555,7 @@ const emptyCreateDialog = ref(false);
             >
               <template v-slot:btn-form-passport>
                 <q-btn
+                  id="form-add-passport"
                   dense
                   flat
                   icon="mdi-plus"
@@ -2537,6 +2569,7 @@ const emptyCreateDialog = ref(false);
 
               <template v-slot:btn-drawer-visa>
                 <q-btn
+                  id="form-add-visa"
                   dense
                   flat
                   icon="mdi-plus"
@@ -2546,6 +2579,32 @@ const emptyCreateDialog = ref(false);
                   @click.stop="employeeFormStore.addVisa()"
                 />
               </template>
+
+              <template v-slot:btn-drawer-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-drawer-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>
@@ -3175,13 +3234,13 @@ const emptyCreateDialog = ref(false);
                       @click.stop="
                         () => {
                           employeeFormState.currentIndexPassport = index;
-                          deleteEmployeeById({ type: 'passport' });
+                          deleteEmployeeById({ type: 'passport', index });
                         }
                       "
                       type="button"
                       :disabled="
-                        !(employeeFormState.currentIndex === -1) &&
-                        !(employeeFormState.currentIndex === index)
+                        !(employeeFormState.currentIndexPassport === -1) &&
+                        !(employeeFormState.currentIndexPassport === index)
                       "
                     />
                   </div>
@@ -3191,213 +3250,274 @@ const emptyCreateDialog = ref(false);
           </template>
 
           <template v-if="employeeFormState.currentTab === 'visa'">
-            <FormEmployeeVisa
-              v-for="(value, index) in currentFromDataEmployee.employeeVisa"
-              prefix-id="drawer-info-employee"
-              id="form-visa"
-              dense
-              outlined
-              title="customerEmployee.form.group.visa"
-              :readonly="employeeFormState.currentIndexVisa !== index"
-              v-model:visa-type="value.type"
-              v-model:visa-number="value.number"
-              v-model:visa-issue-date="value.issueDate"
-              v-model:visa-expiry-date="value.expireDate"
-              v-model:visa-issuing-place="value.issuePlace"
-              v-model:entry-count="value.entryCount"
-              v-model:issue-country="value.issueCountry"
-            >
-              <template v-slot:expiryDate>
-                {{ $t('general.expirationDate') }} :
-                {{ dateFormat(value.expireDate) }}
-                <ExpirationDate
-                  v-if="value.id !== undefined"
-                  :expiration-date="value.expireDate"
+            <div class="q-gutter-sm">
+              <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-passport"
+                  style="background-color: var(--surface-3)"
                 />
-              </template>
+                {{ $t('customerEmployee.form.group.visa') }}
+              </div>
 
-              <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"
+              <FormEmployeeVisa
+                v-for="(value, index) in currentFromDataEmployee.employeeVisa"
+                prefix-id="drawer-info-employee"
+                id="form-visa"
+                dense
+                outlined
+                title="customerEmployee.form.group.visa"
+                :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>
 
-                  <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 &&
+                <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-delete"
-                    icon-only
-                    @click.stop="
-                      () => {
-                        employeeFormState.currentIndexVisa = index;
-                        deleteEmployeeById({ type: 'visa' });
-                      }
-                    "
-                    type="button"
-                    :disabled="
-                      !(employeeFormState.currentIndex === -1) &&
-                      !(employeeFormState.currentIndex === index)
-                    "
-                  />
-                </div>
-              </template>
-            </FormEmployeeVisa>
+                        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'">
-            <FormEmployeeHealthCheck
-              v-if="employeeFormState.currentTab === 'healthCheck'"
-              id="form-checkup"
-              prefix-id="form-employee"
-              dense
-              outlined
-              v-model:current-index="employeeFormState.currentIndex"
-              v-model:employee-checkup="currentFromDataEmployee.employeeCheckup"
-              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.currentIndex = index;
-                  deleteEmployeeById({ type: 'healthCheck' });
-                }
-              "
-              @save="
-                (index) => {
-                  employeeFormState.currentIndex = index;
-                  notify('create', $t('general.success'));
-                }
-              "
-              @undo="
-                (index) => {
-                  if (
-                    currentFromDataEmployee.employeeCheckup?.[index]
-                      .statusSave === false
-                  ) {
-                    currentFromDataEmployee.employeeCheckup[index].statusSave =
-                      true;
+            <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`) }}
+              </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 });
                   }
-                }
-              "
-              @edit="
-                (index) => {
-                  if (
-                    currentFromDataEmployee.employeeCheckup?.[index].statusSave
-                  ) {
-                    currentFromDataEmployee.employeeCheckup[index].statusSave =
-                      false;
+                "
+                @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'">
-            <FormEmployeeWorkHistory
-              v-if="employeeFormState.currentTab === 'workHistory'"
-              id="form-work-history"
-              prefix-id="form-employee"
-              dense
-              outlined
-              v-model:current-index="employeeFormState.currentIndex"
-              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.currentIndex = index;
-                  deleteEmployeeById({ type: 'work' });
-                }
-              "
-              @save="
-                (index) => {
-                  employeeFormState.currentIndex = index;
-                }
-              "
-              @undo="
-                (index) => {
-                  if (
-                    currentFromDataEmployee.employeeWork?.[index].statusSave ===
-                    false
-                  ) {
-                    currentFromDataEmployee.employeeWork[index].statusSave =
-                      true;
+            <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`) }}
+              </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 });
                   }
-                }
-              "
-              @edit="
-                (index) => {
-                  if (
-                    currentFromDataEmployee.employeeWork?.[index].statusSave
-                  ) {
-                    currentFromDataEmployee.employeeWork[index].statusSave =
-                      false;
+                "
+                @save="
+                  (index) => {
+                    employeeFormState.currentIndexWorkHistory = index;
                   }
-                }
-              "
-            />
-            a
+                "
+                @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'">
@@ -4071,7 +4191,6 @@ const emptyCreateDialog = ref(false);
         await fetchListEmployee();
 
         employeeFormState.isEmployeeEdit = false;
-        employeeFormState.currentIndex = -1;
       }
     "
     :before-close="
@@ -4248,6 +4367,24 @@ const emptyCreateDialog = ref(false);
                       sub: true,
                     })) || []),
 
+                    {
+                      name: $t('customerEmployee.form.group.visa'),
+                      anchor: 'drawer-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 }),
@@ -4255,11 +4392,29 @@ const emptyCreateDialog = ref(false);
                         tab: 'healthCheck',
                       }),
                     ) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.workHistory'),
+                      anchor: 'drawer-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: `drawer-employee-work-history-${i}`,
                       tab: 'workHistory',
                     })) || []),
+
                     {
                       name: $t('customerEmployee.form.group.family'),
                       anchor: 'drawer-other',
@@ -4276,6 +4431,8 @@ const emptyCreateDialog = ref(false);
               >
                 <template v-slot:btn-drawer-passport>
                   <q-btn
+                    v-if="currentTab === 'employee'"
+                    id="form-add-passport"
                     dense
                     flat
                     icon="mdi-plus"
@@ -4289,6 +4446,8 @@ const emptyCreateDialog = ref(false);
 
                 <template v-slot:btn-drawer-visa>
                   <q-btn
+                    v-if="currentTab === 'employee'"
+                    id="form-add-visa"
                     dense
                     flat
                     icon="mdi-plus"
@@ -4298,6 +4457,34 @@ const emptyCreateDialog = ref(false);
                     @click.stop="employeeFormStore.addVisa()"
                   />
                 </template>
+
+                <template v-slot:btn-drawer-employee-checkup>
+                  <q-btn
+                    v-if="currentTab === 'employee'"
+                    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-drawer-employee-work-history>
+                  <q-btn
+                    v-if="currentTab === 'employee'"
+                    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>
@@ -4806,7 +4993,7 @@ const emptyCreateDialog = ref(false);
             </template>
 
             <template v-if="employeeFormState.currentTab === 'passport'">
-              <div class="q-gutter-sm">
+              <div class="q-gutter-sm full-width">
                 <div class="col-12 q-pb-sm text-weight-bold text-body1">
                   <q-icon
                     flat
@@ -4943,255 +5130,334 @@ const emptyCreateDialog = ref(false);
                           "
                           type="button"
                           :disabled="
-                            !(employeeFormState.currentIndex === -1) &&
-                            !(employeeFormState.currentIndex === index)
+                            !(employeeFormState.currentIndexPassport === -1) &&
+                            !(employeeFormState.currentIndexPassport === index)
                           "
                         />
                       </div>
                     </template>
                   </FormEmployeePassport>
                 </template>
+
+                <div class="full-width flex flex-center">
+                  <NoData
+                    v-if="
+                      currentFromDataEmployee.employeePassport?.length === 0
+                    "
+                  />
+                </div>
               </div>
             </template>
 
             <template v-if="employeeFormState.currentTab === 'visa'">
-              <FormEmployeeVisa
-                v-for="(value, index) in currentFromDataEmployee.employeeVisa"
-                prefix-id="drawer-info-employee"
-                id="form-visa"
-                dense
-                outlined
-                :title="$t('customerEmployee.form.group.visa')"
-                :readonly="employeeFormState.currentIndexVisa !== index"
-                :hide-title="index !== 0"
-                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"
+              <div class="q-gutter-sm full-width">
+                <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-passport"
+                    style="background-color: var(--surface-3)"
                   />
-                </template>
+                  {{ $t('customerEmployee.form.group.visa') }}
+                </div>
+                <FormEmployeeVisa
+                  v-for="(value, index) in currentFromDataEmployee.employeeVisa"
+                  prefix-id="drawer-info-employee"
+                  id="form-visa"
+                  dense
+                  outlined
+                  :title="$t('customerEmployee.form.group.visa')"
+                  :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>
 
-                <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 &&
+                  <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-delete"
-                      icon-only
-                      @click.stop="
-                        () => {
-                          deleteEmployeeById({ type: 'visa', index });
-                        }
-                      "
-                      type="button"
-                      :disabled="
-                        !(employeeFormState.currentIndex === -1) &&
-                        !(employeeFormState.currentIndex === index)
-                      "
-                    />
-                  </div>
-                </template>
-              </FormEmployeeVisa>
+                          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="
+                          () => {
+                            deleteEmployeeById({ type: 'visa', index });
+                          }
+                        "
+                        type="button"
+                        :disabled="
+                          !(employeeFormState.currentIndexVisa === -1) &&
+                          !(employeeFormState.currentIndexVisa === index)
+                        "
+                      />
+                    </div>
+                  </template>
+                </FormEmployeeVisa>
+
+                <div class="full-width flex flex-center">
+                  <NoData
+                    v-if="currentFromDataEmployee.employeeVisa?.length === 0"
+                  />
+                </div>
+              </div>
             </template>
 
             <template v-if="employeeFormState.currentTab === 'healthCheck'">
-              <FormEmployeeHealthCheck
-                v-if="employeeFormState.currentTab === 'healthCheck'"
-                id="drawer-form-checkup"
-                prefix-id="drawer-employee"
-                dense
-                outlined
-                :hide-action="
-                  currentTab !== 'employee' ||
-                  currentFromDataEmployee.status === 'INACTIVE'
-                "
-                v-model:current-index="employeeFormState.currentIndex"
-                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
-                "
-                @save="
-                  (index) => {
-                    employeeFormState.currentIndex = index;
-                    notify('create', $t('general.success'));
-                  }
-                "
-                @edit="
-                  (index) => {
-                    if (
-                      currentFromDataEmployee.employeeCheckup?.[index]
-                        .statusSave
-                    ) {
-                      employeeFormState.currentIndex = index;
-                      currentFromDataEmployee.employeeCheckup[
-                        index
-                      ].statusSave = false;
+              <div class="q-gutter-sm full-width">
+                <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`) }}
+                </div>
+
+                <FormEmployeeHealthCheck
+                  v-if="employeeFormState.currentTab === 'healthCheck'"
+                  id="drawer-form-checkup"
+                  prefix-id="drawer-employee"
+                  dense
+                  outlined
+                  :hide-action="
+                    currentTab !== 'employee' ||
+                    currentFromDataEmployee.status === 'INACTIVE'
+                  "
+                  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
+                  "
+                  @save="
+                    (index) => {
+                      employeeFormState.currentIndexCheckup = index;
+                      notify('create', $t('general.success'));
                     }
-                  }
-                "
-                @undo="
-                  (index) => {
-                    if (
-                      currentFromDataEmployee.employeeCheckup?.[index]
-                        .statusSave === false
-                    ) {
-                      employeeFormState.currentIndex = -1;
-                      currentFromDataEmployee.employeeCheckup[
-                        index
-                      ].statusSave = true;
-                      employeeFormStore.resetFormDataEmployee();
+                  "
+                  @edit="
+                    (index) => {
+                      if (
+                        currentFromDataEmployee.employeeCheckup?.[index]
+                          .statusSave
+                      ) {
+                        employeeFormState.currentIndexCheckup = index;
+                        currentFromDataEmployee.employeeCheckup[
+                          index
+                        ].statusSave = false;
+                      }
                     }
-                  }
-                "
-                @delete="
-                  (index) => {
-                    employeeFormState.currentIndex = index;
-                    deleteEmployeeById({ type: 'healthCheck' });
-                  }
-                "
-              />
+                  "
+                  @undo="
+                    (index) => {
+                      if (
+                        currentFromDataEmployee.employeeCheckup?.[index]
+                          .statusSave === false
+                      ) {
+                        employeeFormState.currentIndexCheckup = -1;
+                        currentFromDataEmployee.employeeCheckup[
+                          index
+                        ].statusSave = true;
+                        employeeFormStore.resetFormDataEmployee();
+                      }
+                    }
+                  "
+                  @delete="
+                    (index) => {
+                      employeeFormState.currentIndexCheckup = index;
+                      deleteEmployeeById({ type: 'healthCheck', index });
+                    }
+                  "
+                />
+
+                <div class="full-width flex flex-center">
+                  <NoData
+                    v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
+                  />
+                </div>
+              </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'workHistory'">
-              <FormEmployeeWorkHistory
-                v-if="employeeFormState.currentTab === 'workHistory'"
-                id="drawer-work-history"
-                prefix-id="drawer-employee"
-                dense
-                :hide-action="
-                  currentTab !== 'employee' ||
-                  currentFromDataEmployee.status === 'INACTIVE'
-                "
-                outlined
-                v-model:current-index="employeeFormState.currentIndex"
-                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.currentIndex = index;
-                    deleteEmployeeById({ type: 'work' });
-                  }
-                "
-                @save="
-                  (index) => {
-                    employeeFormState.currentIndex = index;
-                  }
-                "
-                @undo="
-                  (index) => {
-                    if (
-                      currentFromDataEmployee.employeeWork?.[index]
-                        .statusSave === false
-                    ) {
-                      employeeFormState.currentIndex = -1;
-                      currentFromDataEmployee.employeeWork[index].statusSave =
-                        true;
+              <div class="q-gutter-sm full-width">
+                <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`) }}
+                </div>
+
+                <FormEmployeeWorkHistory
+                  v-if="employeeFormState.currentTab === 'workHistory'"
+                  id="drawer-work-history"
+                  prefix-id="drawer-employee"
+                  dense
+                  :hide-action="
+                    currentTab !== 'employee' ||
+                    currentFromDataEmployee.status === 'INACTIVE'
+                  "
+                  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 });
                     }
-                  }
-                "
-                @edit="
-                  (index) => {
-                    if (
-                      currentFromDataEmployee.employeeWork?.[index].statusSave
-                    ) {
-                      employeeFormState.currentIndex = index;
-                      currentFromDataEmployee.employeeWork[index].statusSave =
-                        false;
+                  "
+                  @save="
+                    (index) => {
+                      employeeFormState.currentIndexWorkHistory = index;
                     }
-                  }
-                "
-              />
+                  "
+                  @undo="
+                    (index) => {
+                      if (
+                        currentFromDataEmployee.employeeWork?.[index]
+                          .statusSave === false
+                      ) {
+                        employeeFormState.currentIndexWorkHistory = -1;
+                        currentFromDataEmployee.employeeWork[index].statusSave =
+                          true;
+                      }
+                    }
+                  "
+                  @edit="
+                    (index) => {
+                      if (
+                        currentFromDataEmployee.employeeWork?.[index].statusSave
+                      ) {
+                        employeeFormState.currentIndexWorkHistory = index;
+                        currentFromDataEmployee.employeeWork[index].statusSave =
+                          false;
+                      }
+                    }
+                  "
+                />
+              </div>
+
+              <div class="full-width flex flex-center">
+                <NoData
+                  v-if="currentFromDataEmployee.employeeWork?.length === 0"
+                />
+              </div>
             </template>
             <template v-if="employeeFormState.currentTab === 'other'">
               <FormEmployeeOther
+                :readonly="currentTab !== 'employee'"
                 :hide-action="
                   currentTab !== 'employee' ||
                   currentFromDataEmployee.status === 'INACTIVE'
@@ -5228,7 +5494,6 @@ const emptyCreateDialog = ref(false);
       </div>
     </div>
   </DrawerInfo>
-  {{ employeeHistory }}
 
   <DialogForm
     :title="$t('general.historyEdit')"