diff --git a/public/images/customer-CORP-avartar-female.png b/public/images/customer-CORP-avartar-female.png
index 446ef866..4cbb894f 100644
Binary files a/public/images/customer-CORP-avartar-female.png and b/public/images/customer-CORP-avartar-female.png differ
diff --git a/public/images/customer-CORP-avartar-male.png b/public/images/customer-CORP-avartar-male.png
index 6ad95d7d..ae177f60 100644
Binary files a/public/images/customer-CORP-avartar-male.png and b/public/images/customer-CORP-avartar-male.png differ
diff --git a/public/images/customer-PERS-avartar-female.png b/public/images/customer-PERS-avartar-female.png
index ca0a2bf1..c3ba574e 100644
Binary files a/public/images/customer-PERS-avartar-female.png and b/public/images/customer-PERS-avartar-female.png differ
diff --git a/public/images/customer-PERS-avartar-male.png b/public/images/customer-PERS-avartar-male.png
index e9fd15fe..ce0ab20c 100644
Binary files a/public/images/customer-PERS-avartar-male.png and b/public/images/customer-PERS-avartar-male.png differ
diff --git a/public/images/employee-avatar-female.png b/public/images/employee-avatar-female.png
index 66ace3a0..ce9370f1 100644
Binary files a/public/images/employee-avatar-female.png and b/public/images/employee-avatar-female.png differ
diff --git a/public/images/employee-avatar-male.png b/public/images/employee-avatar-male.png
index a8daa8ff..aaf5fb1f 100644
Binary files a/public/images/employee-avatar-male.png and b/public/images/employee-avatar-male.png differ
diff --git a/public/no-img-female.png b/public/no-img-female.png
index 4e177dca..95f959ff 100644
Binary files a/public/no-img-female.png and b/public/no-img-female.png differ
diff --git a/public/no-img-man.png b/public/no-img-man.png
index 861f356a..f0ccba15 100644
Binary files a/public/no-img-man.png and b/public/no-img-man.png differ
diff --git a/src/components/03_customer-management/DialogEmployee.vue b/src/components/03_customer-management/DialogEmployee.vue
new file mode 100644
index 00000000..db428f83
--- /dev/null
+++ b/src/components/03_customer-management/DialogEmployee.vue
@@ -0,0 +1,1656 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FormPerson from '../02_personnel-management/FormPerson.vue';
+import { ProfileBanner, DialogForm, SideMenu } from 'src/components';
+import {
+  AddButton,
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
+import AddressForm from '../form/AddressForm.vue';
+import NoticeJobEmployment from '../upload-file/NoticeJobEmployment.vue';
+import UploadFileGroup from '../upload-file/UploadFileGroup.vue';
+import BasicInformation from './employee/BasicInformation.vue';
+import FormEmployeeHealthCheck from './FormEmployeeHealthCheck.vue';
+import FormEmployeeOther from './FormEmployeeOther.vue';
+import FormEmployeePassport from './FormEmployeePassport.vue';
+import FormEmployeeVisa from './FormEmployeeVisa.vue';
+import FormEmployeeWorkHistory from './FormEmployeeWorkHistory.vue';
+import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
+import ImageUploadDialog from '../ImageUploadDialog.vue';
+
+import {
+  uploadFileListEmployee,
+  columnsAttachment,
+} from 'src/pages/03_customer-management/constant';
+import {
+  baseUrl,
+  setPrefixName,
+  waitAll,
+  notify,
+  dialogCheckData,
+} from 'src/stores/utils';
+import {
+  useCustomerForm,
+  useEmployeeForm,
+} from 'src/pages/03_customer-management/form';
+import useFlowStore from 'src/stores/flow';
+import useEmployeeStore from 'src/stores/employee';
+import useOcrStore from 'stores/ocr';
+import { dateFormat } from 'src/utils/datetime';
+import { runOcr, parseResultMRZ } from 'src/utils/ocr';
+import useOptionStore from 'src/stores/options';
+
+const route = useRoute();
+const ocrStore = useOcrStore();
+const flowStore = useFlowStore();
+const { t, locale } = useI18n();
+const optionStore = useOptionStore();
+const employeeFormStore = useEmployeeForm();
+const employeeStore = useEmployeeStore();
+const customerFormStore = useCustomerForm();
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
+  employeeFormStore;
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  onCreateImageList,
+  statusEmployeeCreate,
+  refreshImageState,
+} = storeToRefs(employeeFormStore);
+
+const props = defineProps<{
+  currentTab: string;
+  fetchListEmployee: (opt?: {
+    fetchStats?: boolean;
+    page?: number;
+    pageSize?: number;
+    customerId?: string;
+    mobileFetch?: boolean;
+  }) => Promise<void>;
+  fetchImageList: (
+    id: string,
+    selectedName: string,
+    type: 'customer' | 'employee',
+  ) => Promise<void>;
+}>();
+
+const mrz = defineModel<Awaited<ReturnType<typeof parseResultMRZ>>>('mrz');
+</script>
+<template>
+  <DialogForm
+    hideFooter
+    :title="$t('form.title.create', { name: $t('customer.employee') })"
+    v-model:modal="employeeFormState.dialogModal"
+    :undo="() => employeeFormUndo(false)"
+    :submit="
+      async () => {
+        if (employeeFormState.currentTab === 'personalInfo') {
+          await employeeFormStore.submitPersonal(onCreateImageList);
+          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;
+
+        if (route.name !== 'CustomerBranchManagement') {
+          await fetchListEmployee(
+            currentTab === 'employer'
+              ? {
+                  page: 1,
+                  pageSize: 999,
+                  customerId: customerFormState.currentCustomerId,
+                }
+              : { fetchStats: true, mobileFetch: $q.screen.xs },
+          );
+
+          flowStore.rotate();
+        }
+      }
+    "
+    :show="
+      () => {
+        employeeFormStore.resetFormDataEmployee(true);
+      }
+    "
+    :before-close="
+      () => {
+        if (employeeFormStore.isFormDataDifferent()) {
+          employeeConfirmUnsave();
+          return true;
+        }
+        //  else {
+        //   if ($q.screen.gt.xs) fetchListEmployee();
+        // }
+
+        employeeFormState.currentTab = 'personalInfo';
+        return false;
+      }
+    "
+  >
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <ProfileBanner
+        active
+        useToggle
+        prefix="dialog"
+        color="white"
+        icon="mdi-account-plus-outline"
+        :bg-color="
+          employeeFormState.profileUrl
+            ? 'white'
+            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
+        "
+        v-model:current-tab="employeeFormState.currentTab"
+        v-model:toggle-status="currentFromDataEmployee.status"
+        fallbackCover="/images/employee-banner.png"
+        :img="
+          employeeFormState.profileUrl ||
+          `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
+            refreshImageState ? `?ts=${Date.now()}` : '',
+          )
+        "
+        :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
+        :title="
+          employeeFormState.currentEmployee
+            ? setPrefixName(
+                {
+                  namePrefix: employeeFormState.currentEmployee.namePrefix,
+                  firstName:
+                    employeeFormState.currentEmployee.firstName ||
+                    employeeFormState.currentEmployee.firstNameEN,
+                  lastName: employeeFormState.currentEmployee.lastName,
+                  firstNameEN: employeeFormState.currentEmployee.firstNameEN,
+                  lastNameEN: employeeFormState.currentEmployee.lastNameEN,
+                },
+                { locale },
+              )
+            : ''
+        "
+        @view="
+          () => {
+            employeeFormState.imageDialog = true;
+            employeeFormState.isImageEdit = false;
+          }
+        "
+        @edit="
+          () => {
+            if (currentFromDataEmployee.id) {
+              fetchImageList(
+                currentFromDataEmployee.id,
+                currentFromDataEmployee.selectedImage || '',
+                'employee',
+              );
+            }
+            employeeFormState.imageDialog =
+              employeeFormState.isImageEdit = true;
+          }
+        "
+        @update:toggle-status="
+          () => {
+            currentFromDataEmployee.status =
+              currentFromDataEmployee.status === 'CREATED'
+                ? 'INACTIVE'
+                : 'CREATED';
+          }
+        "
+      />
+    </div>
+
+    <div
+      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
+        class="col surface-1 full-height rounded bordered scroll row relative-position"
+        :key="String(!employeeFormState.isEmployeeEdit)"
+      >
+        <div
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
+        >
+          <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)
+              "
+              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 col-md-10"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
+          }"
+          id="employee-form-content"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+        >
+          <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="
+                    () =>
+                      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"
+              prefix-id="form-employee"
+              :show-btn-save="employeeFormState.dialogType === 'create'"
+              employee
+              dense
+              outlined
+              separator
+              title="form.field.basicInformation"
+              :readonly="!employeeFormState.isEmployeeEdit"
+              :employee-owner-option="employeeStore.ownerOption || []"
+              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"
+              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"
+            />
+
+            <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 (
+                        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 (mrz !== null) {
+                        const mapMrz = Object.entries(mrz.result || {}).map(
+                          ([key, value]) => ({
+                            name: key,
+                            value: String(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: [] };
+                  }
+                "
+                :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,
+                      });
+                    }
+                  }
+                "
+                :delete-item="
+                  async (obj) => {
+                    let status: boolean = false;
+                    const res = await employeeStore.delMeta({
+                      parentId: currentFromDataEmployee.id || '',
+                      group: obj.group,
+                      metaId: obj._meta.id,
+                    });
+
+                    if (res) {
+                      status = true;
+                    }
+
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
+                    );
+
+                    return status;
+                  }
+                "
+                :save="
+                  async (
+                    group: 'passport' | 'visa' | 'attachment',
+                    _meta: any,
+                    file: File | undefined,
+                  ) => {
+                    let status: boolean = false;
+                    if (group === 'passport' || group === 'visa') {
+                      if (file !== undefined && currentFromDataEmployee.id) {
+                        const res = await employeeStore.postMeta({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          meta: _meta,
+                          file,
+                        });
+
+                        if (res) {
+                          status = true;
+                        }
+                      } else {
+                        const {
+                          id,
+                          employeeId,
+                          createdAt,
+                          updatedAt,
+                          ...payload
+                        } = _meta;
+
+                        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;
+                  }
+                "
+                :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}-${dateFormat(i.expireDate)}` || '',
+                          group: group,
+                          url: await employeeStore.getFile({
+                            parentId: currentFromDataEmployee.id || '',
+                            group,
+                            fileId: i.id,
+                          }),
+                          file: undefined,
+                        };
+                      });
+
+                      return await waitAll(tempValue);
+                    } else {
+                      const res = await employeeStore.listAttachment({
+                        parentId: currentFromDataEmployee.id || '',
+                      });
+
+                      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"
+                    v-model:report-date="meta.reportDate"
+                  />
+
+                  <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>
+
+              <FormEmployeePassport
+                v-for="(
+                  value, index
+                ) in currentFromDataEmployee.employeePassport"
+                prefix-id="drawer-info-employee"
+                :key="index"
+                id="form-passport"
+                hide-title
+                dense
+                outlined
+                separator
+                :title="$t('customerEmployee.form.group.passport')"
+                :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"
+                v-model:file="value.file"
+              >
+                <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,
+                            fetch: async () =>
+                              await fetchListEmployee(
+                                currentTab === 'employer'
+                                  ? {
+                                      page: 1,
+                                      pageSize: 999,
+                                      customerId:
+                                        customerFormState.currentCustomerId,
+                                    }
+                                  : {
+                                      fetchStats: true,
+                                      mobileFetch: $q.screen.xs,
+                                    },
+                              ),
+                          });
+                        }
+                      "
+                      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-for="(value, index) in currentFromDataEmployee.employeeVisa"
+                :key="index"
+                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"
+                v-model:report-date="value.reportDate"
+              >
+                <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 &&
+                          !(employeeFormState.currentIndexVisa === -1) &&
+                          employeeFormState.currentIndexVisa === index)
+                      "
+                      id="btn-info-basic-delete"
+                      icon-only
+                      @click.stop="
+                        () => {
+                          employeeFormState.currentIndexVisa = 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"
+                      :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,
+                      fetch: async () =>
+                        await fetchListEmployee(
+                          currentTab === 'employer'
+                            ? {
+                                page: 1,
+                                pageSize: 999,
+                                customerId: customerFormState.currentCustomerId,
+                              }
+                            : {
+                                fetchStats: true,
+                                mobileFetch: $q.screen.xs,
+                              },
+                        ),
+                    });
+                  }
+                "
+                @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,
+                      fetch: async () =>
+                        await fetchListEmployee(
+                          currentTab === 'employer'
+                            ? {
+                                page: 1,
+                                pageSize: 999,
+                                customerId: customerFormState.currentCustomerId,
+                              }
+                            : {
+                                fetchStats: true,
+                                mobileFetch: $q.screen.xs,
+                              },
+                        ),
+                    });
+                  }
+                "
+                @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>
+  </DialogForm>
+
+  <ImageUploadDialog
+    ref="dialogEmployeeImageUpload"
+    v-model:dialog-state="employeeFormState.imageDialog"
+    v-model:file="currentFromDataEmployee.image"
+    v-model:image-url="employeeFormState.profileUrl"
+    v-model:data-list="employeeFormState.imageList"
+    v-model:on-create-data-list="onCreateImageList"
+    :on-create="employeeFormState.dialogModal && !currentFromDataEmployee.id"
+    :hidden-footer="!employeeFormState.isImageEdit"
+    @add-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        await employeeStore.addImageList(
+          v,
+          currentFromDataEmployee.id,
+          Date.now().toString(),
+        );
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
+    "
+    @remove-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        const name = v.split('/').pop() || '';
+        await employeeStore.deleteImageByName(currentFromDataEmployee.id, name);
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
+    "
+    @submit="
+      async (v) => {
+        if (employeeFormState.dialogModal && !currentFromDataEmployee.id) {
+          employeeFormState.profileUrl = v;
+          employeeFormState.imageDialog = false;
+        } else {
+          refreshImageState = true;
+          employeeFormState.dialogType = 'edit';
+          currentFromDataEmployee.selectedImage = v;
+          employeeFormState.imageList
+            ? (employeeFormState.imageList.selectedImage = v)
+            : '';
+          employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
+          employeeFormStore.resetFormDataEmployee();
+          await employeeFormStore.submitPersonal(onCreateImageList);
+          employeeFormState.imageDialog = false;
+          refreshImageState = false;
+          employeeFormState.isEmployeeEdit = false;
+          employeeFormState.dialogType = 'info';
+          await fetchListEmployee();
+        }
+      }
+    "
+  >
+    <template #title>
+      <span
+        v-if="!employeeFormState.dialogModal || currentFromDataEmployee.id"
+        class="justify-center flex text-bold"
+      >
+        {{ $t('general.image') }}
+        {{
+          $i18n.locale === 'eng'
+            ? `${currentFromDataEmployee.firstNameEN || currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastNameEN || currentFromDataEmployee.lastName}`
+            : `${currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastName}`
+        }}
+      </span>
+    </template>
+    <template #error>
+      <div class="full-height full-width" style="background: white">
+        <div
+          class="full-height full-width flex justify-center items-center"
+          style="background: #ee4367"
+        >
+          <q-img
+            :src="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
+            fit="contain"
+            style="height: 100%"
+          />
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
+</template>
diff --git a/src/components/03_customer-management/DrawerEmployee.vue b/src/components/03_customer-management/DrawerEmployee.vue
new file mode 100644
index 00000000..1c1d39bf
--- /dev/null
+++ b/src/components/03_customer-management/DrawerEmployee.vue
@@ -0,0 +1,1772 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
+
+import FormPerson from '../02_personnel-management/FormPerson.vue';
+import { ProfileBanner, DrawerInfo, SideMenu, NoData } from 'src/components';
+import {
+  AddButton,
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
+import AddressForm from '../form/AddressForm.vue';
+import NoticeJobEmployment from '../upload-file/NoticeJobEmployment.vue';
+import UploadFileGroup from '../upload-file/UploadFileGroup.vue';
+import BasicInformation from './employee/BasicInformation.vue';
+import FormEmployeeHealthCheck from './FormEmployeeHealthCheck.vue';
+import FormEmployeeOther from './FormEmployeeOther.vue';
+import FormEmployeePassport from './FormEmployeePassport.vue';
+import FormEmployeeVisa from './FormEmployeeVisa.vue';
+import FormEmployeeWorkHistory from './FormEmployeeWorkHistory.vue';
+import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
+import ImageUploadDialog from '../ImageUploadDialog.vue';
+
+import useOcrStore from 'stores/ocr';
+import useOptionStore from 'src/stores/options';
+import useEmployeeStore from 'src/stores/employee';
+import { dateFormat } from 'src/utils/datetime';
+import {
+  useCustomerForm,
+  useEmployeeForm,
+} from 'src/pages/03_customer-management/form';
+import {
+  uploadFileListEmployee,
+  columnsAttachment,
+} from 'src/pages/03_customer-management/constant';
+import { runOcr, parseResultMRZ } from 'src/utils/ocr';
+import {
+  baseUrl,
+  setPrefixName,
+  waitAll,
+  notify,
+  resetScrollBar,
+  dialogCheckData,
+  canAccess,
+} from 'src/stores/utils';
+
+const route = useRoute();
+const ocrStore = useOcrStore();
+const optionStore = useOptionStore();
+const employeeStore = useEmployeeStore();
+const employeeFormStore = useEmployeeForm();
+const customerFormStore = useCustomerForm();
+const { t, locale } = useI18n();
+const { employeeConfirmUnsave, deleteEmployeeById } = employeeFormStore;
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  refreshImageState,
+  onCreateImageList,
+} = storeToRefs(employeeFormStore);
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+
+const props = defineProps<{
+  currentTab: string;
+  fetchListEmployee: (opt?: {
+    fetchStats?: boolean;
+    page?: number;
+    pageSize?: number;
+    customerId?: string;
+    mobileFetch?: boolean;
+  }) => Promise<void>;
+  fetchImageList: (
+    id: string,
+    selectedName: string,
+    type: 'customer' | 'employee',
+  ) => Promise<void>;
+}>();
+
+const mrz = defineModel<Awaited<ReturnType<typeof parseResultMRZ>>>('mrz');
+
+defineEmits<{
+  (e: 'fetchEmployee');
+  (e: 'changeStatus', status: string);
+}>();
+</script>
+
+<template>
+  <DrawerInfo
+    v-if="!!employeeFormState.currentEmployee"
+    hide-action
+    v-model:drawer-open="employeeFormState.drawerModal"
+    :close="
+      () => {
+        resetScrollBar('drawer-employee-form-content');
+      }
+    "
+    :title="
+      setPrefixName(
+        {
+          namePrefix: employeeFormState.currentEmployee.namePrefix,
+          firstName:
+            employeeFormState.currentEmployee.firstName ||
+            employeeFormState.currentEmployee.firstNameEN,
+          lastName: employeeFormState.currentEmployee.lastName,
+          firstNameEN: employeeFormState.currentEmployee.firstNameEN,
+          lastNameEN: employeeFormState.currentEmployee.lastNameEN,
+        },
+        { locale },
+      )
+    "
+    :badge-class="
+      currentFromDataEmployee.gender === 'male'
+        ? 'app-bg-male text-white'
+        : currentFromDataEmployee.gender === 'female'
+          ? 'app-bg-female text-white'
+          : ''
+    "
+    :submit="
+      async () => {
+        if (employeeFormState.currentTab === 'personalInfo') {
+          await employeeFormStore.submitPersonal();
+          employeeFormState.dialogType = 'info';
+          employeeFormState.isEmployeeEdit = false;
+        }
+
+        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();
+        }
+
+        if (route.name !== 'CustomerBranchManagement') {
+          await fetchListEmployee(
+            currentTab === 'employer'
+              ? {
+                  page: 1,
+                  pageSize: 999,
+                  customerId: customerFormState.currentCustomerId,
+                }
+              : { mobileFetch: $q.screen.xs },
+          );
+        }
+
+        employeeFormState.isEmployeeEdit = false;
+      }
+    "
+    :before-close="
+      () => {
+        if (employeeFormStore.isFormDataDifferent()) {
+          employeeConfirmUnsave();
+          return true;
+        }
+
+        employeeFormState.currentTab = 'personalInfo';
+        return false;
+      }
+    "
+  >
+    <div class="column full-height">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <ProfileBanner
+          :prefix="employeeFormState.currentEmployee.firstName"
+          hideFade
+          @update:current-tab="
+            () => {
+              employeeFormState.isImageEdit = false;
+              employeeFormStore.resetFormDataEmployee();
+              employeeFormState.isEmployeeEdit = false;
+              employeeFormState.dialogType = 'info';
+              employeeFormState.currentIndexPassport = -1;
+            }
+          "
+          @view="
+            () => {
+              employeeFormState.imageDialog = true;
+              employeeFormState.isImageEdit = false;
+            }
+          "
+          @edit="
+            employeeFormState.imageDialog = employeeFormState.isImageEdit = true
+          "
+          @update:toggle-status="
+            (v) => {
+              if (currentFromDataEmployee.id !== undefined)
+                $emit('changeStatus', v);
+            }
+          "
+          :active="currentFromDataEmployee.status !== 'INACTIVE'"
+          use-toggle
+          color="white"
+          icon="mdi-account-outline"
+          :bg-color="
+            employeeFormState.profileUrl
+              ? 'white'
+              : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
+          "
+          v-model:current-tab="employeeFormState.currentTab"
+          v-model:toggle-status="currentFromDataEmployee.status"
+          fallback-cover="/images/employee-banner.png"
+          :title="
+            employeeFormState.currentEmployee
+              ? setPrefixName(
+                  {
+                    namePrefix: employeeFormState.currentEmployee.namePrefix,
+                    firstName:
+                      employeeFormState.currentEmployee.firstName ||
+                      employeeFormState.currentEmployee.firstNameEN,
+                    lastName:
+                      employeeFormState.currentEmployee.lastName ||
+                      employeeFormState.currentEmployee.lastNameEN,
+                    firstNameEN: employeeFormState.currentEmployee.firstNameEN,
+                    lastNameEN: employeeFormState.currentEmployee.lastNameEN,
+                  },
+                  { locale },
+                )
+              : '-'
+          "
+          :caption="currentFromDataEmployee.code"
+          :img="
+            `${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') },
+          ]"
+          :toggle-title="$t('status.title')"
+        />
+      </div>
+      <div
+        style="flex: 1; width: 100%; overflow-y: auto"
+        class="column relative-position"
+        id="drawer-employee-form"
+        :class="{
+          'q-px-lg q-pb-lg': $q.screen.gt.sm,
+          'q-px-md q-pb-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <div
+          class="col full-width surface-1 rounded bordered row"
+          :key="String(!employeeFormState.isEmployeeEdit)"
+        >
+          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
+            <div class="q-py-md q-pl-md q-pr-sm">
+              <SideMenu
+                :menu="
+                  [
+                    {
+                      name: $t('form.field.basicInformation'),
+                      anchor: 'drawer-form-information',
+                      tab: 'personalInfo',
+                    },
+                    {
+                      name: $t('customerEmployee.form.group.personalInfo'),
+                      anchor: 'drawer-form-personal',
+                      tab: 'personalInfo',
+                    },
+                    {
+                      name: $t('form.address'),
+                      anchor: 'drawer-form-personal-address',
+                      tab: 'personalInfo',
+                    },
+
+                    {
+                      name: $t('general.uploadFile'),
+                      anchor: 'drawer-upload-file',
+                      tab: 'personalInfo',
+                    },
+
+                    {
+                      name: $t('customerEmployee.form.group.passport'),
+                      anchor: 'drawer-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: `drawer-employee-employeePassport-${i}`,
+                        tab: 'passport',
+                        sub: true,
+                      }),
+                    ) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.visa'),
+                      anchor: 'drawer-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: `drawer-employee-visa-${i}`,
+                      tab: 'visa',
+                      sub: true,
+                    })) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.healthCheck'),
+                      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 }),
+                        anchor: `drawer-employee-checkup-${i}`,
+                        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',
+                      tab: 'other',
+                    },
+                  ].filter((v) => v.tab === employeeFormState.currentTab)
+                "
+                background="transparent"
+                :active="{
+                  background: 'hsla(var(--blue-6-hsl) / .2)',
+                  foreground: 'var(--blue-6)',
+                }"
+                scroll-element="#drawer-employee-form-content"
+              >
+                <template v-slot:btn-drawer-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-drawer-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-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>
+          <div
+            class="col-12 col-md-10 row"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
+            }"
+            id="drawer-employee-form-content"
+            style="height: 100%; overflow-y: auto"
+          >
+            <template v-if="employeeFormState.currentTab === 'personalInfo'">
+              <div
+                class="rounded row q-py-sm q-mx-lg q-px-md"
+                style="position: absolute; z-index: 999; right: 0; top: 0"
+                v-if="currentFromDataEmployee.status !== 'INACTIVE'"
+              >
+                <div class="surface-1 row rounded">
+                  <UndoButton
+                    v-if="employeeFormState.isEmployeeEdit"
+                    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 &&
+                      canAccess('customer', 'edit')
+                    "
+                    id="btn-info-basic-delete"
+                    icon-only
+                    @click="
+                      () =>
+                        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="drawer-form-information"
+                prefix-id="drawer-info-employee"
+                dense
+                outlined
+                title="form.field.basicInformation"
+                :readonly="!employeeFormState.isEmployeeEdit"
+                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"
+                class="q-mb-xl"
+              />
+              <FormPerson
+                id="drawer-form-personal"
+                prefix-id="drawer-info-employee"
+                dense
+                outlined
+                employee
+                separator
+                title="customerEmployee.form.group.personalInfo"
+                :readonly="!employeeFormState.isEmployeeEdit"
+                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
+                id="drawer-form-personal-address"
+                employee
+                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"
+                v-model:same-with-employer="
+                  employeeFormState.formDataEmployeeSameAddr
+                "
+                :readonly="!employeeFormState.isEmployeeEdit"
+                :disabledRule="!employeeFormState.isEmployeeEdit"
+                prefix-id="drawer-info-personnel"
+                dense
+                class="q-mb-xl"
+              />
+
+              <div class="row" id="drawer-upload-file">
+                <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>
+              </div>
+              <UploadFileGroup
+                v-model:current-id="currentFromDataEmployee.id"
+                v-model="currentFromDataEmployee.file"
+                hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
+                :group-list="uploadFileListEmployee"
+                :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 (
+                        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 (mrz) {
+                        const mapMrz = Object.entries(mrz.result || {}).map(
+                          ([key, value]) => ({
+                            name: key,
+                            value: String(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: [] };
+                  }
+                "
+                :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,
+                      });
+                    }
+                  }
+                "
+                :delete-item="
+                  async (obj) => {
+                    let status: boolean = false;
+                    const res = await employeeStore.delMeta({
+                      parentId: currentFromDataEmployee.id || '',
+                      group: obj.group,
+                      metaId: obj._meta.id,
+                    });
+
+                    if (res) {
+                      status = true;
+                    }
+
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
+                    );
+
+                    return status;
+                  }
+                "
+                :save="
+                  async (
+                    group: 'passport' | 'visa' | 'attachment',
+                    _meta: any,
+                    file: File | undefined,
+                  ) => {
+                    let status: boolean = false;
+                    if (group === 'passport' || group === 'visa') {
+                      if (file !== undefined && currentFromDataEmployee.id) {
+                        const res = await employeeStore.postMeta({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          meta: _meta,
+                          file,
+                        });
+
+                        if (res) {
+                          status = true;
+                        }
+                      } else {
+                        const {
+                          id,
+                          employeeId,
+                          createdAt,
+                          updatedAt,
+                          ...payload
+                        } = _meta;
+
+                        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;
+                  }
+                "
+                :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}-${dateFormat(i.expireDate)}` || '',
+                          group: group,
+                          url: await employeeStore.getFile({
+                            parentId: currentFromDataEmployee.id || '',
+                            group,
+                            fileId: i.id,
+                          }),
+                          file: undefined,
+                        };
+                      });
+
+                      return await waitAll(tempValue);
+                    } else {
+                      const res = await employeeStore.listAttachment({
+                        parentId: currentFromDataEmployee.id || '',
+                      });
+
+                      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 }">
+                  <!-- <FormCitizen
+                    v-if="mode === 'citizen' && meta"
+                    orc
+                    ra
+                    :readonly="!isEdit"
+                    v-model:citizen-id="meta.citizenId"
+                    v-model:birth-date="meta.birthDate"
+                    v-model:first-name="meta.firstName"
+                    v-model:first-name-en="meta.firstNameEN"
+                    v-model:last-name="meta.lastName"
+                    v-model:last-name-en="meta.lastNameEN"
+                    v-model:address="meta.address"
+                  /> -->
+
+                  <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"
+                  ></FormEmployeePassport>
+                  <FormEmployeeVisa
+                    v-if="mode === 'visa' && meta"
+                    prefix-id="drawer-info-employee"
+                    id="form-visa"
+                    ocr
+                    dense
+                    outlined
+                    :title="$t('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"
+                    v-model:report-date="meta.reportDate"
+                  />
+
+                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+                </template>
+              </UploadFileGroup>
+            </template>
+
+            <template v-if="employeeFormState.currentTab === 'passport'">
+              <div class="q-gutter-sm full-width column no-wrap">
+                <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-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="employeeFormState.currentIndexPassport !== -1"
+                    @click.stop="employeeFormStore.addPassport()"
+                  />
+                  <!-- :disabled="
+                      currentFromDataEmployee.employeePassport?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return false;
+                          }
+                          return true;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexPassport === -1
+                        ? false
+                        : true
+                    " -->
+                </div>
+
+                <div class="col self-center">
+                  <div
+                    class="full-width full-height flex flex-center col"
+                    v-if="
+                      currentFromDataEmployee.employeePassport?.length === 0
+                    "
+                  >
+                    <NoData />
+                  </div>
+
+                  <template
+                    v-for="(
+                      value, index
+                    ) in currentFromDataEmployee.employeePassport"
+                    :key="index"
+                  >
+                    <div class="col" v-if="value !== undefined">
+                      <FormEmployeePassport
+                        prefix-id="drawer-info-employee"
+                        id="form-passport"
+                        hide-title
+                        dense
+                        outlined
+                        separator
+                        :title="$t('customerEmployee.form.group.passport')"
+                        :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"
+                        v-model:file="value.file"
+                      >
+                        <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="
+                                () => {
+                                  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"
+                              :disabled="
+                                !(
+                                  employeeFormState.currentIndexPassport === -1
+                                ) &&
+                                !(
+                                  employeeFormState.currentIndexPassport ===
+                                  index
+                                )
+                              "
+                            />
+                          </div>
+                        </template>
+                      </FormEmployeePassport>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+
+            <template v-if="employeeFormState.currentTab === 'visa'">
+              <div class="q-gutter-sm full-width column no-wrap">
+                <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-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>
+                <div class="col self-center">
+                  <div
+                    v-if="currentFromDataEmployee.employeeVisa?.length === 0"
+                    class="full-width full-height col flex flex-center"
+                  >
+                    <NoData />
+                  </div>
+                  <FormEmployeeVisa
+                    v-for="(
+                      value, index
+                    ) in currentFromDataEmployee.employeeVisa"
+                    :key="index"
+                    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"
+                    v-model:report-date="value.reportDate"
+                  >
+                    <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 &&
+                              !(employeeFormState.currentIndexVisa === -1) &&
+                              employeeFormState.currentIndexVisa === index)
+                          "
+                          id="btn-info-basic-delete"
+                          icon-only
+                          @click.stop="
+                            () => {
+                              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"
+                          :disabled="
+                            !(employeeFormState.currentIndexVisa === -1) &&
+                            !(employeeFormState.currentIndexVisa === index)
+                          "
+                        />
+                      </div>
+                    </template>
+                  </FormEmployeeVisa>
+                </div>
+              </div>
+            </template>
+
+            <template v-if="employeeFormState.currentTab === 'healthCheck'">
+              <div class="q-gutter-sm full-width column">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center 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>
+
+                <div class="col self-center">
+                  <div
+                    v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
+                    class="full-width full-height col flex flex-center"
+                  >
+                    <NoData />
+                  </div>
+                  <FormEmployeeHealthCheck
+                    v-if="employeeFormState.currentTab === 'healthCheck'"
+                    id="drawer-form-checkup"
+                    prefix-id="drawer-employee"
+                    dense
+                    outlined
+                    :hide-action="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'));
+                      }
+                    "
+                    @edit="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeCheckup?.[index]
+                            .statusSave
+                        ) {
+                          employeeFormState.currentIndexCheckup = index;
+                          currentFromDataEmployee.employeeCheckup[
+                            index
+                          ].statusSave = false;
+                        }
+                      }
+                    "
+                    @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,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        });
+                      }
+                    "
+                  />
+                </div>
+              </div>
+            </template>
+            <template v-if="employeeFormState.currentTab === 'workHistory'">
+              <div class="q-gutter-sm full-width column">
+                <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-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>
+
+                <div class="col self-center">
+                  <div
+                    class="full-width full-height col flex flex-center"
+                    v-if="currentFromDataEmployee.employeeWork?.length === 0"
+                  >
+                    <NoData />
+                  </div>
+
+                  <FormEmployeeWorkHistory
+                    v-if="employeeFormState.currentTab === 'workHistory'"
+                    id="drawer-work-history"
+                    prefix-id="drawer-employee"
+                    dense
+                    :hide-action="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,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        });
+                      }
+                    "
+                    @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>
+            </template>
+            <template v-if="employeeFormState.currentTab === 'other'">
+              <FormEmployeeOther
+                :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
+                v-if="employeeFormState.currentTab === 'other'"
+                id="drawer-other"
+                prefix-id="drawer-employee"
+                dense
+                outlined
+                v-model:employee-other="
+                  currentFromDataEmployee.employeeOtherInfo
+                "
+                @undo="
+                  () => {
+                    if (
+                      currentFromDataEmployee.employeeOtherInfo?.statusSave ===
+                      false
+                    ) {
+                      employeeFormStore.resetFormDataEmployee();
+                      currentFromDataEmployee.employeeOtherInfo.statusSave = true;
+                    }
+                  }
+                "
+                @edit="
+                  () => {
+                    if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
+                      currentFromDataEmployee.employeeOtherInfo.statusSave = false;
+                    }
+                  }
+                "
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DrawerInfo>
+
+  <ImageUploadDialog
+    ref="dialogEmployeeImageUpload"
+    v-model:dialog-state="employeeFormState.imageDialog"
+    v-model:file="currentFromDataEmployee.image"
+    v-model:image-url="employeeFormState.profileUrl"
+    v-model:data-list="employeeFormState.imageList"
+    v-model:on-create-data-list="onCreateImageList"
+    :on-create="employeeFormState.dialogModal && !currentFromDataEmployee.id"
+    :hidden-footer="!employeeFormState.isImageEdit"
+    @add-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        await employeeStore.addImageList(
+          v,
+          currentFromDataEmployee.id,
+          Date.now().toString(),
+        );
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
+    "
+    @remove-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        const name = v.split('/').pop() || '';
+        await employeeStore.deleteImageByName(currentFromDataEmployee.id, name);
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
+    "
+    @submit="
+      async (v) => {
+        if (employeeFormState.dialogModal && !currentFromDataEmployee.id) {
+          employeeFormState.profileUrl = v;
+          employeeFormState.imageDialog = false;
+        } else {
+          refreshImageState = true;
+          employeeFormState.dialogType = 'edit';
+          currentFromDataEmployee.selectedImage = v;
+          employeeFormState.imageList
+            ? (employeeFormState.imageList.selectedImage = v)
+            : '';
+          employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
+          employeeFormStore.resetFormDataEmployee();
+          await employeeFormStore.submitPersonal(onCreateImageList);
+          employeeFormState.imageDialog = false;
+          refreshImageState = false;
+          employeeFormState.isEmployeeEdit = false;
+          employeeFormState.dialogType = 'info';
+          await fetchListEmployee();
+        }
+      }
+    "
+  >
+    <template #title>
+      <span
+        v-if="!employeeFormState.dialogModal || currentFromDataEmployee.id"
+        class="justify-center flex text-bold"
+      >
+        {{ $t('general.image') }}
+        {{
+          $i18n.locale === 'eng'
+            ? `${currentFromDataEmployee.firstNameEN || currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastNameEN || currentFromDataEmployee.lastName}`
+            : `${currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastName}`
+        }}
+      </span>
+    </template>
+    <template #error>
+      <div class="full-height full-width" style="background: white">
+        <div
+          class="full-height full-width flex justify-center items-center"
+          style="background: #ee4367"
+        >
+          <q-img
+            :src="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
+            fit="contain"
+            style="height: 100%"
+          />
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
+</template>
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 040c9676..06373538 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -20,8 +20,8 @@ const issuePlace = defineModel<string>('issuePlace');
 const issueCountry = defineModel<string>('issueCountry');
 const issueDate = defineModel<Date | null | string>('issueDate');
 const type = defineModel<string>('type');
-const expireDate = defineModel<Date>('expireDate');
-const birthDate = defineModel<Date>('birthDate');
+const expireDate = defineModel<Date | string>('expireDate');
+const birthDate = defineModel<Date | string>('birthDate');
 const workerStatus = defineModel<string>('workerStatus');
 const nationality = defineModel<string>('nationality');
 const gender = defineModel<string>('gender');
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index a5f0f292..7c9085c4 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -28,12 +28,12 @@ const arrivalAt = defineModel<string>('arrivalAt');
 const arrivalTMNo = defineModel<string>('arrivalTmNo');
 const arrivalTM = defineModel<string>('arrivalTm');
 const mrz = defineModel<string>('mrz');
-const entryCount = defineModel<number>('entryCount');
+const entryCount = defineModel<number | string>('entryCount');
 const issuePlace = defineModel<string>('issuePlace');
 const issueCountry = defineModel<string>('issueCountry');
 const issueDate = defineModel<Date | null | string>('visaIssueDate');
 const type = defineModel<string>('type');
-const expireDate = defineModel<Date>('expireDate');
+const expireDate = defineModel<Date | string>('expireDate');
 const remark = defineModel<string>('remark');
 const workerType = defineModel<string>('workerType');
 const number = defineModel<string>('number');
diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index d93c6085..000c701a 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -141,8 +141,9 @@ defineEmits<{
                   <q-avatar size="md">
                     <q-img
                       :src="
-                        `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
-                        `/images/employee-avatar-${props.row.gender}.png`
+                        props.row.selectedImage
+                          ? `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}`
+                          : `/images/employee-avatar-${props.row.gender}.png`
                       "
                       class="text-center"
                       :ratio="1"
@@ -295,9 +296,9 @@ defineEmits<{
               $i18n.locale === 'eng'
                 ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
                 : `${props.row.firstName} ${props.row.lastName} `.trim(),
-            img:
-              `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
-              `/images/employee-avatar-${props.row.gender}.png`,
+            img: props.row.selectedImage
+              ? `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}`
+              : `/images/employee-avatar-${props.row.gender}.png`,
             fallbackImg: `/images/employee-avatar-${props.row.gender}.png`,
             male: props.row.gender === 'male',
             female: props.row.gender === 'female',
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 0ce76c7b..defcb6d5 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -8,7 +8,7 @@ import {
   UndoButton,
 } from 'components/button';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     title: string;
     category?: string;
@@ -42,6 +42,11 @@ const drawerOpen = defineModel<boolean>('drawerOpen', {
 const myForm = ref();
 
 function reset() {
+  if (props.beforeClose) {
+    drawerOpen.value = props.beforeClose
+      ? props.beforeClose()
+      : !drawerOpen.value;
+  }
   if (myForm.value) {
     myForm.value.resetValidation();
   }
@@ -62,7 +67,6 @@ async function onValidationError(ref: any) {
     @show="show"
     @before-hide="reset"
     @hide="close"
-    @update:model-value="(v) => (drawerOpen = beforeClose ? beforeClose() : v)"
     :width="$q.screen.gt.xs ? windowSize * 0.85 : windowSize"
     v-model="drawerOpen"
     behavior="mobile"
diff --git a/src/components/index.ts b/src/components/index.ts
index ecca1c1e..4f82d6a8 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -16,3 +16,4 @@ export { default as SideMenu } from './SideMenu.vue';
 export { default as StatCardComponent } from './StatCardComponent.vue';
 export { default as TooltipComponent } from './TooltipComponent.vue';
 export { default as TreeComponent } from './TreeComponent.vue';
+export { default as PaginationPageSize } from './PaginationPageSize.vue';
diff --git a/src/components/upload-file/UploadFileGroup.vue b/src/components/upload-file/UploadFileGroup.vue
index edc689bf..399d5192 100644
--- a/src/components/upload-file/UploadFileGroup.vue
+++ b/src/components/upload-file/UploadFileGroup.vue
@@ -45,9 +45,9 @@ const props = withDefaults(
     readonly?: boolean;
     showTitle?: boolean;
     ocr?: (
-      group: any,
+      group: string,
       file: File,
-    ) => void | Promise<{
+    ) => Promise<{
       status: boolean;
       group: string;
       meta: { name: string; value: string }[];
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 7bd226ac..eb2b877b 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -198,3 +198,10 @@ i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-i
   .q-focus-helper {
   visibility: hidden;
 }
+
+.clear-btn {
+  opacity: 0.6;
+  &:hover {
+    opacity: 1;
+  }
+}
diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index 3c2e07bb..dd8c4737 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -18,6 +18,8 @@ import { CustomerBranch, CustomerType } from 'stores/customer/types';
 import { columnsEmployee } from './constant';
 import { useCustomerBranchForm, useEmployeeForm } from './form';
 
+import DialogEmployee from 'src/components/03_customer-management/DialogEmployee.vue';
+import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
 import EmployerFormAuthorized from './components/employer/EmployerFormAuthorized.vue';
 import FloatingActionButton from 'components/FloatingActionButton.vue';
 import SideMenu from 'components/SideMenu.vue';
@@ -89,6 +91,11 @@ const prop = withDefaults(
     currentCitizenId?: string;
     gender: string;
     selectedImage: string;
+    fetchImageList: (
+      id: string,
+      selectedName: string,
+      type: 'customer' | 'employee',
+    ) => Promise<void>;
   }>(),
   {
     color: 'green',
@@ -96,7 +103,6 @@ const prop = withDefaults(
 );
 const currentBranchEmployee = ref<string>('');
 const listEmployee = ref<Employee[]>([]);
-
 const customerId = defineModel<string>('customerId', { required: true });
 
 defineEmits<{
@@ -106,16 +112,6 @@ defineEmits<{
   (e: 'dialog'): void;
 }>();
 
-onMounted(async () => {
-  customerBranchFormState.value.currentCustomerId = route.params
-    .customerId as string;
-  await fetchList();
-
-  branch.value?.forEach((v) => {
-    currentBtnOpen.value.push(false);
-  });
-});
-
 const columns = [
   {
     name: 'branchName',
@@ -257,10 +253,6 @@ async function fetchEmployee(opts: { branchId: string; pageSize?: number }) {
   }
 }
 
-onMounted(async () => {
-  await fetchList();
-});
-
 watch([customerId, inputSearch, currentStatus, pageSizeBranch], async () => {
   await fetchList();
 });
@@ -280,6 +272,16 @@ watch(
     }
   },
 );
+
+onMounted(async () => {
+  customerBranchFormState.value.currentCustomerId = route.params
+    .customerId as string;
+  await fetchList();
+
+  branch.value?.forEach((v) => {
+    currentBtnOpen.value.push(false);
+  });
+});
 </script>
 
 <template>
@@ -473,7 +475,6 @@ watch(
           <q-tr
             :class="{
               'app-text-muted': props.row.status === 'INACTIVE',
-              'cursor-pointer': props.row._count?.branch !== 0,
             }"
             :props="props"
             @click="$emit('viewDetail', props.row, props.rowIndex)"
@@ -547,7 +548,13 @@ watch(
               v-if="branchFieldSelected.includes('businessTypePure')"
               class="text-left"
             >
-              {{ useOptionStore().mapOption(props.row.businessType) || '-' }}
+              {{
+                props.row.businessType
+                  ? props.row.businessType[
+                      $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                    ]
+                  : '-'
+              }}
             </q-td>
             <q-td
               v-if="branchFieldSelected.includes('totalEmployee')"
@@ -566,8 +573,6 @@ watch(
                     await fetchEmployee({
                       branchId: currentBranchEmployee,
                       pageSize: 999,
-                      passport: true,
-                      visa: true,
                     });
 
                     currentBtnOpen.map((v, i) => {
@@ -638,10 +643,15 @@ watch(
                   "
                   @history="(item) => {}"
                   @view="
-                    (item) => {
+                    async (item) => {
                       employeeFormState.drawerModal = true;
                       //employeeFormState.isEmployeeEdit = true;
                       employeeFormStore.assignFormDataEmployee(item.id);
+                      await fetchImageList(
+                        item.id,
+                        item.selectedImage || '',
+                        'employee',
+                      );
                     }
                   "
                 />
@@ -668,9 +678,11 @@ watch(
                     ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                     : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
                 telephone: props.row.telephoneNo,
-                businessTypePure: useOptionStore().mapOption(
-                  props.row.businessType,
-                ),
+                businessTypePure: props.row.businessType
+                  ? props.row.businessType[
+                      $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                    ]
+                  : '-',
                 totalEmployee: props.row._count?.employee,
               }"
               :visible-columns="branchFieldSelected"
@@ -885,15 +897,14 @@ watch(
           </div>
           <EmployerFormBusiness
             dense
-            class="q-mb-xl"
             outlined
             prefix-id="employer-branch"
             :readonly="customerBranchFormState.dialogType === 'info'"
-            v-model:bussiness-type="customerBranchFormData.businessType"
+            v-model:business-type-id="customerBranchFormData.businessTypeId"
             v-model:job-position="customerBranchFormData.jobPosition"
             v-model:job-description="customerBranchFormData.jobDescription"
             v-model:pay-date="customerBranchFormData.payDate"
-            v-model:pay-date-e-n="customerBranchFormData.payDateEN"
+            v-model:pay-date-en="customerBranchFormData.payDateEN"
             v-model:wage-rate="customerBranchFormData.wageRate"
             v-model:wage-rate-text="customerBranchFormData.wageRateText"
           />
@@ -984,7 +995,7 @@ watch(
             v-model:email="customerBranchFormData.email"
             v-model:contact-tel="customerBranchFormData.contactTel"
             v-model:office-tel="customerBranchFormData.officeTel"
-            v-model:agent="customerBranchFormData.agent"
+            v-model:agent-user-id="customerBranchFormData.agentUserId"
           />
         </div>
       </div>
@@ -1000,6 +1011,18 @@ watch(
       />
     </template>
   </DialogFormContainer>
+
+  <DialogEmployee
+    :fetch-list-employee="fetchEmployee"
+    :fetch-image-list="fetchImageList"
+    current-tab="employer"
+  />
+
+  <DrawerEmployee
+    :fetch-list-employee="fetchEmployee"
+    :fetch-image-list="fetchImageList"
+    current-tab="employer"
+  />
 </template>
 
 <style scoped>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 539a4a01..5c1bef7e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,92 +1,39 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, computed } from 'vue';
+import { ref, watch, onMounted, nextTick, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute, useRouter } from 'vue-router';
-import { getUserId, getRole } from 'src/services/keycloak';
-import { baseUrl, setPrefixName, waitAll } from 'src/stores/utils';
-import { dateFormat } from 'src/utils/datetime';
-import { dialogCheckData, canAccess } from 'stores/utils';
+import { canAccess } from 'stores/utils';
 
-import useOcrStore from 'stores/ocr';
+import type { District, Province, SubDistrict } from 'src/stores/address';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
-import useMyBranchStore from 'stores/my-branch';
-import {
-  dialog,
-  notify,
-  resetScrollBar,
-  capitalizeFirstLetter,
-} from 'stores/utils';
-import { useNavigator } from 'src/stores/navigator';
+import useAddressStore from 'src/stores/address';
 import useFlowStore from 'stores/flow';
+import { dialog } from 'stores/utils';
+import { useNavigator } from 'src/stores/navigator';
 import { Status } from 'stores/types';
 import {
   CustomerStats,
   Customer,
   CustomerBranch,
-  CustomerBranchCreate,
   CustomerType,
 } from 'stores/customer/types';
-import { Employee, EmployeeHistory } from 'stores/employee/types';
-import {
-  EditButton,
-  DeleteButton,
-  SaveButton,
-  UndoButton,
-} from 'components/button';
 
-import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
-import { AddressForm } from 'components/form';
-import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
-import ItemCard from 'src/components/ItemCard.vue';
-import DrawerInfo from 'components/DrawerInfo.vue';
+import DialogEmployee from 'src/components/03_customer-management/DialogEmployee.vue';
+import { SaveButton } from 'components/button';
+import TabCustomer from './TabCustomer.vue';
 import FloatingActionButton from 'components/FloatingActionButton.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
-import TooltipComponent from 'components/TooltipComponent.vue';
-import EmptyAddButton from 'components/AddButton.vue';
-import NoData from 'components/NoData.vue';
-import PaginationComponent from 'components/PaginationComponent.vue';
-import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
-import FormPerson from 'components/02_personnel-management/FormPerson.vue';
-import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
 import BranchPage from './BranchPage.vue';
-import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
-import DialogForm from 'components/DialogForm.vue';
-import SideMenu from 'components/SideMenu.vue';
-import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
-import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
-import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
-import { runOcr, parseResultMRZ } from 'src/utils/ocr';
-import { formatAddress } from 'src/utils/address';
-import {
-  UploadFileGroup,
-  FormTm6,
-  NoticeJobEmployment,
-} from 'components/upload-file';
+import SelectBusinessType from 'src/components/shared/select/SelectBusinessType.vue';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
+import TabEmployee from './TabEmployee.vue';
+import SelectInput from 'src/components/shared/SelectInput.vue';
 
-import {
-  columnsCustomer,
-  columnsEmployee,
-  uploadFileListEmployee,
-  columnsAttachment,
-  dialogCreateCustomerItem,
-} from './constant';
+import { columnsCustomer, columnsEmployee } from './constant';
 import { useCustomerForm, useEmployeeForm } from './form';
 import { storeToRefs } from 'pinia';
-import ProfileBanner from 'components/ProfileBanner.vue';
-import ImageUploadDialog from 'components/ImageUploadDialog.vue';
-import FormEmployeeHealthCheck from 'components/03_customer-management/FormEmployeeHealthCheck.vue';
-import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmployeeWorkHistory.vue';
-import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue';
-import useOptionStore from 'stores/options';
-import { DialogContainer, DialogHeader } from 'components/dialog';
-import KebabAction from 'src/components/shared/KebabAction.vue';
-import { nextTick } from 'vue';
-import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
-import PaginationPageSize from 'src/components/PaginationPageSize.vue';
-import { AddButton } from 'components/button';
-import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -94,41 +41,243 @@ const route = useRoute();
 const router = useRouter();
 const flowStore = useFlowStore();
 const navigatorStore = useNavigator();
+const addressStore = useAddressStore();
 const customerStore = useCustomerStore();
-const userBranchStore = useMyBranchStore();
 const employeeStore = useEmployeeStore();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
-const optionStore = useOptionStore();
-const ocrStore = useOcrStore();
 
-const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+const { state: employeeFormState, statusEmployeeCreate } =
+  storeToRefs(employeeFormStore);
 
-const {
-  fetchListOfOptionBranch,
-  customerFormUndo,
-  customerConfirmUnsave,
-  deleteCustomerById,
-  validateTabField,
-  deleteCustomerBranchById,
-} = customerFormStore;
+// NOTE: Component ref
+const refTabCustomer = ref<InstanceType<typeof TabCustomer>>();
+const refTabEmployee = ref<InstanceType<typeof TabEmployee>>();
 
-const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
-  employeeFormStore;
+// NOTE: Page Data
+const currentCustomer = ref<Customer>();
 
-const {
-  state: customerFormState,
-  currentFormData: customerFormData,
-  registerAbleBranchOption,
-  tabFieldRequired,
-} = storeToRefs(customerFormStore);
-const {
-  state: employeeFormState,
-  currentFromDataEmployee,
-  onCreateImageList,
-  statusEmployeeCreate,
-  refreshImageState,
-} = storeToRefs(employeeFormStore);
+// NOTE: Page State
+const hideStats = ref(false);
+const gridView = ref(false);
+const employeeStats = ref(0);
+const inputSearch = ref('');
+const filterBusinessType = ref('');
+const searchDate = ref<string[]>([]);
+const currentTab = ref<'employer' | 'employee'>('employer');
+const currentStatus = ref<Status | 'All'>('All');
+const customerTypeSelected = ref<{
+  label: string;
+  value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson';
+}>({
+  label: t('general.all'),
+  value: 'all',
+});
+const statsCustomerType = ref<CustomerStats>({
+  CORP: 0,
+  PERS: 0,
+});
+const fieldDisplayCustomer = ref<
+  {
+    label: string;
+    value: string;
+  }[]
+>(
+  columnsCustomer
+    .filter((v) => v.name !== 'action')
+    .map((v) => ({ label: v.label, value: v.name })),
+);
+const fieldDisplayEmployee = ref<
+  {
+    label: string;
+    value: string;
+  }[]
+>(
+  columnsEmployee
+    .filter((v) => v.name !== 'action')
+    .map((v) => ({ label: v.label, value: v.name })),
+);
+const fieldSelected = ref<string[]>(
+  [
+    ...columnsEmployee.map((v) => v.name),
+    ...columnsCustomer.map((v) => v.name),
+  ].filter((v, index, self) => self.indexOf(v) === index),
+);
+const filterAddress = reactive({
+  provinceId: '',
+  districtId: '',
+  subDistrictId: '',
+});
+const addressOpt = reactive<{
+  provinceOpt: Province[];
+  districtOpt: District[];
+  subDistrictOpt: SubDistrict[];
+}>({
+  provinceOpt: [],
+  districtOpt: [],
+  subDistrictOpt: [],
+});
+const fieldCustomer = [
+  'all',
+  'customerLegalEntity',
+  'customerNaturalPerson',
+] as const;
+
+// image
+const imageList = ref<{ selectedImage: string; list: string[] }>();
+const branch = ref<CustomerBranch[]>();
+
+async function triggerChangeStatus(
+  id: string,
+  status: string,
+  employeeName?: string,
+) {
+  return await new Promise((resolve, reject) => {
+    dialog({
+      color: status !== 'INACTIVE' ? 'warning' : 'info',
+      icon:
+        status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
+      title: t('dialog.title.confirmChangeStatus'),
+      actionText:
+        status !== 'INACTIVE' ? t('general.close') : t('general.open'),
+      message:
+        status !== 'INACTIVE'
+          ? t('dialog.message.confirmChangeStatusOff')
+          : t('dialog.message.confirmChangeStatusOn'),
+      action: async () => {
+        if (currentTab.value === 'employee') {
+          await refTabEmployee.value
+            ?.toggleStatusEmployee(
+              id,
+              status === 'INACTIVE' ? false : true,
+              employeeName,
+            )
+            .then(resolve)
+            .catch(reject);
+        } else {
+          await refTabCustomer.value
+            ?.toggleStatusCustomer(id, status === 'INACTIVE' ? false : true)
+            .then(resolve)
+            .catch(reject);
+        }
+      },
+      cancel: () => {},
+    });
+  });
+}
+
+async function createCustomerForm(customerType: 'CORP' | 'PERS') {
+  customerFormState.value.dialogModal = true;
+  customerFormState.value.dialogType = 'create';
+  customerFormData.value.customerType =
+    customerType === 'CORP' ? CustomerType.Corporate : CustomerType.Person;
+}
+
+function createEmployeeForm() {
+  employeeFormStore.resetFormDataEmployee(true);
+  employeeFormState.value.currentEmployee = null;
+  employeeFormState.value.dialogType = 'create';
+  employeeFormState.value.dialogModal = true;
+  employeeFormState.value.isEmployeeEdit = true;
+}
+
+async function fetchImageList(
+  id: string,
+  selectedName: string,
+  type: 'customer' | 'employee',
+) {
+  const res =
+    type === 'customer'
+      ? await customerStore.fetchImageListById(id)
+      : await employeeStore.fetchImageListById(id);
+
+  const imageList = {
+    selectedImage: selectedName,
+    list: res.map((n: string) => `${type}/${id}/image/${n}`),
+  };
+
+  type === 'customer'
+    ? (customerFormState.value.imageList = imageList)
+    : (employeeFormState.value.imageList = imageList);
+
+  return res;
+}
+
+async function triggerExport() {
+  switch (currentTab.value) {
+    case 'employer':
+      customerStore.customerExport({
+        pageSize: 10000,
+        status: currentStatus.value === 'All' ? undefined : currentStatus.value,
+        startDate: searchDate.value[0],
+        endDate: searchDate.value[1],
+        businessType: filterBusinessType.value,
+        province: filterAddress.provinceId || undefined,
+        district: filterAddress.districtId || undefined,
+        subDistrict: filterAddress.subDistrictId || undefined,
+        customerType:
+          customerTypeSelected.value.value === 'customerLegalEntity'
+            ? CustomerType.Corporate
+            : customerTypeSelected.value.value === 'customerNaturalPerson'
+              ? CustomerType.Person
+              : undefined,
+      });
+
+      break;
+
+    case 'employee':
+      employeeStore.employeeExport({
+        pageSize: 10000,
+        status: currentStatus.value === 'All' ? undefined : currentStatus.value,
+        startDate: searchDate.value[0],
+        endDate: searchDate.value[1],
+      });
+      break;
+  }
+}
+
+async function fetchAddressData(type: 'province' | 'district' | 'subDistrict') {
+  let result;
+
+  if (type === 'province') {
+    result = await addressStore.fetchProvince();
+    if (result) addressOpt.provinceOpt = result;
+  }
+
+  if (type === 'district') {
+    if (!filterAddress.provinceId) return;
+    result = await addressStore.fetchDistrictByProvinceId(
+      filterAddress.provinceId,
+    );
+    if (result) addressOpt.districtOpt = result;
+  }
+
+  if (type === 'subDistrict') {
+    if (!filterAddress.districtId) return;
+    result = await addressStore.fetchSubDistrictByProvinceId(
+      filterAddress.districtId,
+    );
+    if (result) addressOpt.subDistrictOpt = result;
+  }
+
+  return result;
+}
+
+async function handleSelectAddress(type: 'province' | 'district') {
+  if (type === 'province') {
+    filterAddress.districtId = filterAddress.subDistrictId = '';
+    addressOpt.districtOpt = addressOpt.subDistrictOpt = [];
+
+    await fetchAddressData('district');
+  }
+
+  if (type === 'district') {
+    filterAddress.subDistrictId = '';
+    await fetchAddressData('subDistrict');
+  }
+}
 
 async function init() {
   navigatorStore.current.title = 'menu.customer';
@@ -144,14 +293,16 @@ async function init() {
 
   if (route.query.tab === 'customer') {
     currentTab.value = 'employer';
-    if (route.query.id) openSpecificCustomer(route.query.id as string);
+    if (route.query.id)
+      refTabCustomer.value?.openSpecificCustomer(route.query.id as string);
   } else if (route.query.tab === 'employee') {
     currentTab.value = 'employee';
-    if (route.query.id) openSpecificEmployee(route.query.id as string);
+    setTimeout(async () => {
+      if (route.query.id)
+        refTabEmployee.value?.openSpecificEmployee(route.query.id as string);
+    }, 150);
   }
 
-  if (route.name === 'CustomerManagement') await fetchListCustomer(true);
-
   if (
     route.name === 'CustomerBranchManagement' &&
     typeof route.params.customerId === 'string'
@@ -174,518 +325,27 @@ async function init() {
       router.push('/customer-management');
     }
   }
+
+  await fetchAddressData('province');
+
   flowStore.rotate();
 }
-onMounted(init);
 
-// NOTE: Page Data
-const currentCustomer = ref<Customer>();
-const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
-const listEmployee = ref<Employee[]>([]);
-const hideStats = ref(false);
-const statsCustomerType = ref<CustomerStats>({
-  CORP: 0,
-  PERS: 0,
-});
-
-// NOTE: Page State
-const searchDate = ref<string[]>([]);
-const currentTab = ref<'employer' | 'employee'>('employer');
-const inputSearch = ref('');
-const currentStatus = ref<Status | 'All'>('All');
-const customerTypeSelected = ref<{
-  label: string;
-  value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson';
-}>({
-  label: t('general.all'),
-  value: 'all',
-});
-
-const customerNameInfo = computed(() => {
-  if (customerFormData.value.customerBranch === undefined) return;
-
-  const name =
-    locale.value === 'eng'
-      ? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
-      : `${customerFormData.value.customerBranch[0]?.firstName} ${customerFormData.value.customerBranch[0]?.lastName}`;
-  return name || '-';
-});
-const currentBtnOpen = ref<boolean[]>([]);
-const employeeStats = ref(0);
-const gridView = ref(false);
-const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
-
-const currentPageCustomer = ref<number>(1);
-const maxPageCustomer = ref<number>(1);
-const currentPageEmployee = ref<number>(1);
-const maxPageEmployee = ref<number>(1);
-const pageSize = ref<number>(30);
-const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
-const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
-
-// image
-const imageList = ref<{ selectedImage: string; list: string[] }>();
 watch(() => route.name, init);
-watch(
-  [
-    currentTab,
-    currentStatus,
-    inputSearch,
-    customerTypeSelected,
-    pageSize,
-    searchDate,
-  ],
-  async ([tabName], [oldTabName]) => {
-    // if (tabName !== oldTabName) searchDate.value = [];
-    if (tabName === 'employer') {
-      currentPageCustomer.value = 1;
-      currentBtnOpen.value = [];
-      listCustomer.value = [];
-      await fetchListCustomer(true);
-    }
-    if (tabName === 'employee') {
-      currentPageEmployee.value = 1;
-      listEmployee.value = [];
-      await fetchListEmployee({ fetchStats: true });
-    }
 
-    customerFormState.value.currentCustomerId = undefined;
-    flowStore.rotate();
-  },
-);
 watch(locale, () => {
   customerTypeSelected.value = {
     label: `${customerTypeSelected.value.label}`,
     value: customerTypeSelected.value?.value,
   };
 });
+
 watch(
   () => $q.screen.lt.md,
   () => $q.screen.lt.md && (gridView.value = true),
 );
 
-const fieldDisplayCustomer = ref<
-  {
-    label: string;
-    value: string;
-  }[]
->(
-  columnsCustomer
-    .filter((v) => v.name !== 'action')
-    .map((v) => ({ label: v.label, value: v.name })),
-);
-
-const fieldDisplayEmployee = ref<
-  {
-    label: string;
-    value: string;
-  }[]
->(
-  columnsEmployee
-    .filter((v) => v.name !== 'action')
-    .map((v) => ({ label: v.label, value: v.name })),
-);
-
-const fieldSelected = ref<string[]>(
-  [
-    ...columnsEmployee.map((v) => v.name),
-    ...columnsCustomer.map((v) => v.name),
-  ].filter((v, index, self) => self.indexOf(v) === index),
-);
-
-const branch = ref<CustomerBranch[]>();
-
-const customerStats = [
-  { id: 1, count: 2, name: 'CORP' },
-  { id: 2, count: 3, name: 'PERS' },
-];
-
-const fieldCustomer = [
-  'all',
-  'customerLegalEntity',
-  'customerNaturalPerson',
-] as const;
-
-const employeeHistoryDialog = ref(false);
-const employeeHistory = ref<EmployeeHistory[]>();
-
-async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
-  const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
-
-  const resultList = await customerStore.fetchList({
-    includeBranch: true,
-    page: mobileFetch ? 1 : currentPageCustomer.value,
-    pageSize: mobileFetch
-      ? listCustomer.value.length +
-        (total === listCustomer.value.length ? 1 : 0)
-      : pageSize.value,
-    status:
-      currentStatus.value === 'All'
-        ? undefined
-        : currentStatus.value === 'ACTIVE'
-          ? 'ACTIVE'
-          : 'INACTIVE',
-    query: inputSearch.value,
-    startDate: searchDate.value[0],
-    endDate: searchDate.value[1],
-    customerType: (
-      {
-        all: undefined,
-        customerLegalEntity: CustomerType.Corporate,
-        customerNaturalPerson: CustomerType.Person,
-      } as const
-    )[customerTypeSelected.value.value],
-  });
-
-  if (resultList) {
-    // currentPageCustomer.value = resultList.page;
-    maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
-    $q.screen.xs && !mobileFetch
-      ? listCustomer.value.push(...resultList.result)
-      : (listCustomer.value = resultList.result);
-  }
-
-  if (fetchStats) {
-    statsCustomerType.value = await customerStore
-      .getStatsCustomer()
-      .then((value) => (value ? value : { CORP: 0, PERS: 0 }));
-  }
-}
-
-async function fetchListEmployee(opt?: {
-  fetchStats?: boolean;
-  page?: number;
-  pageSize?: number;
-  customerId?: string;
-  mobileFetch?: boolean;
-}) {
-  const resultListEmployee = await employeeStore.fetchList({
-    customerId: opt?.customerId,
-    page: opt
-      ? opt.mobileFetch
-        ? 1
-        : opt.page || currentPageEmployee.value
-      : currentPageEmployee.value,
-    pageSize: opt
-      ? opt.mobileFetch
-        ? listEmployee.value.length +
-          (employeeStats.value === listEmployee.value.length ? 1 : 0)
-        : opt.pageSize || pageSize.value
-      : pageSize.value,
-    status:
-      currentStatus.value === 'All'
-        ? undefined
-        : currentStatus.value === 'ACTIVE'
-          ? 'ACTIVE'
-          : 'INACTIVE',
-    query: inputSearch.value,
-    passport: true,
-    visa: true,
-    startDate: searchDate.value[0],
-    endDate: searchDate.value[1],
-  });
-  if (resultListEmployee) {
-    maxPageEmployee.value = Math.ceil(
-      resultListEmployee.total / pageSize.value,
-    );
-    $q.screen.xs && !(opt && opt.mobileFetch)
-      ? listEmployee.value.push(...resultListEmployee.result)
-      : (listEmployee.value = resultListEmployee.result);
-  }
-
-  if (opt && opt.fetchStats)
-    employeeStats.value = await employeeStore.getStatsEmployee();
-}
-
-async function triggerChangeStatus(
-  id: string,
-  status: string,
-  employeeName?: string,
-) {
-  return await new Promise((resolve, reject) => {
-    dialog({
-      color: status !== 'INACTIVE' ? 'warning' : 'info',
-      icon:
-        status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
-      title: t('dialog.title.confirmChangeStatus'),
-      actionText:
-        status !== 'INACTIVE' ? t('general.close') : t('general.open'),
-      message:
-        status !== 'INACTIVE'
-          ? t('dialog.message.confirmChangeStatusOff')
-          : t('dialog.message.confirmChangeStatusOn'),
-      action: async () => {
-        if (currentTab.value === 'employee') {
-          await toggleStatusEmployee(
-            id,
-            status === 'INACTIVE' ? false : true,
-            employeeName,
-          )
-            .then(resolve)
-            .catch(reject);
-        } else {
-          await toggleStatusCustomer(id, status === 'INACTIVE' ? false : true)
-            .then(resolve)
-            .catch(reject);
-        }
-      },
-      cancel: () => {},
-    });
-  });
-}
-
-async function toggleStatusEmployee(
-  id: string,
-  status: boolean,
-  employeeName: string,
-) {
-  const res = await employeeStore.editById(id, {
-    status: !status ? 'ACTIVE' : 'INACTIVE',
-    firstNameEN: employeeName,
-  });
-  if (res && employeeFormState.value.drawerModal)
-    currentFromDataEmployee.value.status = res.status;
-
-  await fetchListEmployee({ mobileFetch: $q.screen.xs });
-  flowStore.rotate();
-}
-
-async function toggleStatusCustomer(id: string, status: boolean) {
-  const res = await customerStore.editById(id, {
-    status: !status ? 'ACTIVE' : 'INACTIVE',
-  });
-  if (res && customerFormState.value.drawerModal)
-    customerFormData.value.status = res.status;
-
-  await fetchListCustomer(false, $q.screen.xs);
-  flowStore.rotate();
-}
-async function openHistory(id: string) {
-  const res = await employeeStore.getEditHistory(id);
-  employeeHistory.value = res.reverse();
-  employeeHistoryDialog.value = true;
-}
-
-async function editCustomerForm(id: string) {
-  await customerFormStore.assignFormData(id);
-  await fetchListOfOptionBranch();
-  await fetchImageList(
-    id,
-    customerFormData.value.selectedImage || '',
-    'customer',
-  );
-  customerFormState.value.branchIndex = -1;
-  customerFormState.value.dialogType = 'edit';
-  customerFormState.value.drawerModal = true;
-  customerFormState.value.editCustomerId = id;
-}
-
-async function editEmployeeFormPersonal(id: string) {
-  await employeeFormStore.assignFormDataEmployee(id);
-  await fetchImageList(
-    id,
-    currentFromDataEmployee.value.selectedImage || '',
-    'employee',
-  );
-
-  employeeFormState.value.isEmployeeEdit = true;
-  employeeFormState.value.dialogType = 'edit';
-  employeeFormState.value.drawerModal = true;
-}
-
-async function createCustomerForm(customerType: 'CORP' | 'PERS') {
-  customerFormState.value.dialogModal = true;
-  customerFormState.value.dialogType = 'create';
-  customerFormData.value.customerType =
-    customerType === 'CORP' ? CustomerType.Corporate : CustomerType.Person;
-}
-
-function createEmployeeForm() {
-  employeeFormStore.resetFormDataEmployee(true);
-  employeeFormState.value.dialogType = 'create';
-  employeeFormState.value.dialogModal = true;
-  employeeFormState.value.isEmployeeEdit = true;
-}
-
-async function fetchImageList(
-  id: string,
-  selectedName: string,
-  type: 'customer' | 'employee',
-) {
-  const res =
-    type === 'customer'
-      ? await customerStore.fetchImageListById(id)
-      : await employeeStore.fetchImageListById(id);
-  imageList.value = {
-    selectedImage: selectedName,
-    list: res.map((n: string) => `${type}/${id}/image/${n}`),
-  };
-
-  return res;
-}
-
-async function openSpecificCustomer(id: string) {
-  await customerFormStore.assignFormData(id);
-  await fetchImageList(
-    id,
-    customerFormData.value.selectedImage || '',
-    'customer',
-  );
-  customerFormState.value.branchIndex = -1;
-  customerFormState.value.drawerModal = true;
-  customerFormState.value.editCustomerId = id;
-  customerFormState.value.dialogType = 'info';
-}
-
-async function openSpecificEmployee(id: string) {
-  await employeeFormStore.assignFormDataEmployee(id);
-  await fetchImageList(
-    id,
-    currentFromDataEmployee.value.selectedImage || '',
-    'employee',
-  );
-  employeeFormState.value.dialogType = 'info';
-  employeeFormState.value.drawerModal = true;
-}
-
-async function triggerExport() {
-  switch (currentTab.value) {
-    case 'employer':
-      customerStore.customerExport({ pageSize: 10000 });
-
-      break;
-
-    case 'employee':
-      employeeStore.employeeExport({ pageSize: 10000 });
-      break;
-  }
-}
-
-// TODO: When in employee form, if select address same as customer then auto fill
-
-watch(
-  () => employeeFormState.value.currentCustomerBranch,
-  (e) => {
-    if (!e) return;
-    if (employeeFormState.value.formDataEmployeeSameAddr) {
-      currentFromDataEmployee.value.address = e.address;
-      currentFromDataEmployee.value.addressEN = e.addressEN;
-      currentFromDataEmployee.value.provinceId = e.provinceId;
-      currentFromDataEmployee.value.districtId = e.districtId;
-      currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
-    }
-    currentFromDataEmployee.value.customerBranchId = e.id;
-  },
-);
-
-watch(
-  () => employeeFormState.value.formDataEmployeeSameAddr,
-  (isSame) => {
-    if (!employeeFormState.value.currentCustomerBranch) return;
-    if (isSame) {
-      currentFromDataEmployee.value.address =
-        employeeFormState.value.currentCustomerBranch.address;
-      currentFromDataEmployee.value.addressEN =
-        employeeFormState.value.currentCustomerBranch.addressEN;
-      currentFromDataEmployee.value.provinceId =
-        employeeFormState.value.currentCustomerBranch.provinceId;
-      currentFromDataEmployee.value.districtId =
-        employeeFormState.value.currentCustomerBranch.districtId;
-      currentFromDataEmployee.value.subDistrictId =
-        employeeFormState.value.currentCustomerBranch.subDistrictId;
-    }
-    currentFromDataEmployee.value.customerBranchId =
-      employeeFormState.value.currentCustomerBranch.id;
-  },
-);
-
-watch(
-  () => employeeFormState.value.currentTab,
-  () => {
-    employeeFormState.value.isEmployeeEdit = false;
-  },
-);
-
-watch(
-  () => currentFromDataEmployee.value.dateOfBirth,
-  (v) => {
-    const isEdit =
-      employeeFormState.value.drawerModal &&
-      employeeFormState.value.isEmployeeEdit;
-    let currentFormDate = v && toISOStringWithTimezone(new Date(v));
-    let currentDate: string = '';
-
-    if (isEdit && employeeFormState.value.currentEmployee) {
-      currentDate = toISOStringWithTimezone(
-        new Date(employeeFormState.value.currentEmployee.dateOfBirth),
-      );
-    }
-
-    if (
-      employeeFormState.value.dialogModal ||
-      (isEdit && currentFormDate !== currentDate)
-    ) {
-      const age = calculateAge(
-        currentFromDataEmployee.value.dateOfBirth,
-        'year',
-      );
-      if (currentFromDataEmployee.value.dateOfBirth && Number(age) < 15) {
-        dialog({
-          color: 'warning',
-          icon: 'mdi-alert',
-          title: t('dialog.title.youngWorker15'),
-          cancelText: t('general.edit'),
-          persistent: true,
-          message: t('dialog.message.youngWorker15'),
-
-          cancel: async () => {
-            currentFromDataEmployee.value.dateOfBirth = null;
-            return;
-          },
-        });
-      }
-
-      if (
-        currentFromDataEmployee.value.dateOfBirth &&
-        Number(age) > 15 &&
-        Number(age) <= 18
-      ) {
-        dialog({
-          color: 'warning',
-          icon: 'mdi-alert',
-          title: t('dialog.title.youngWorker18'),
-          cancelText: t('general.cancel'),
-          actionText: t('general.confirm'),
-          persistent: true,
-          message: t('dialog.message.youngWorker18'),
-          action: () => {},
-          cancel: async () => {
-            currentFromDataEmployee.value.dateOfBirth = null;
-            return;
-          },
-        });
-      }
-    }
-  },
-);
-
-watch(
-  () => customerFormData.value.image,
-  () => {
-    if (customerFormData.value.image !== null)
-      customerFormState.value.isImageEdit = true;
-  },
-);
-
-watch(
-  () => currentFromDataEmployee.value.image,
-  () => {
-    if (currentFromDataEmployee.value.image !== null)
-      employeeFormState.value.isImageEdit = true;
-  },
-);
-
-const emptyCreateDialog = ref(false);
+onMounted(async () => await init());
 </script>
 
 <template>
@@ -726,11 +386,14 @@ const emptyCreateDialog = ref(false);
   </FloatingActionButton>
 
   <div class="column full-height no-wrap">
-    <div v-if="$route.name === 'CustomerManagement'" class="column full-height">
+    <!-- หน้า table -->
+    <div
+      v-show="$route.name === 'CustomerManagement'"
+      class="column full-height"
+    >
       <div class="text-body-2 text-weight-medium q-mb-xs flex items-center">
         {{ $t('general.dataSum') }}
         <q-badge
-          v-if="listCustomer"
           rounded
           class="q-ml-sm"
           style="
@@ -758,32 +421,30 @@ const emptyCreateDialog = ref(false);
         />
       </div>
 
+      <!-- stat -->
       <div class="row full-width">
-        <!-- stat -->
         <transition name="slide">
           <div v-if="!hideStats" class="col-12 q-mb-md">
             <div class="scroll">
               <StatCardComponent
-                v-if="customerStats"
+                v-if="statsCustomerType"
                 label-i18n
                 :branch="
-                  customerStats &&
-                  (currentTab === 'employer'
-                    ? customerStats.map((v) => ({
-                        count:
-                          v.name === 'CORP'
-                            ? (statsCustomerType?.CORP ?? 0)
-                            : (statsCustomerType?.PERS ?? 0),
-                        label:
-                          v.name === 'CORP'
-                            ? 'customer.employerLegalEntity'
-                            : 'customer.employerNaturalPerson',
-                        icon:
-                          v.name === 'CORP'
-                            ? 'mdi-office-building-outline'
-                            : 'mdi-account-outline',
-                        color: v.name === 'CORP' ? 'purple' : 'green',
-                      }))
+                  currentTab === 'employer'
+                    ? [
+                        {
+                          count: statsCustomerType.CORP ?? 0,
+                          label: 'customer.employerLegalEntity',
+                          icon: 'mdi-office-building-outline',
+                          color: 'purple',
+                        },
+                        {
+                          count: statsCustomerType.PERS ?? 0,
+                          label: 'customer.employerNaturalPerson',
+                          icon: 'mdi-account-outline',
+                          color: 'green',
+                        },
+                      ]
                     : [
                         {
                           label: 'customer.employee',
@@ -791,7 +452,7 @@ const emptyCreateDialog = ref(false);
                           icon: 'mdi-account-outline',
                           color: 'pink',
                         },
-                      ])
+                      ]
                 "
                 :dark="$q.dark.isActive"
               />
@@ -826,7 +487,11 @@ const emptyCreateDialog = ref(false);
                 <q-separator vertical inset class="q-mr-xs" />
                 <AdvanceSearch
                   v-model="searchDate"
-                  :active="$q.screen.lt.md && currentStatus !== 'All'"
+                  :active="
+                    ($q.screen.lt.md && currentStatus !== 'All') ||
+                    !!filterBusinessType ||
+                    !!filterAddress.provinceId
+                  "
                 >
                   <div
                     v-if="$q.screen.lt.md"
@@ -852,6 +517,46 @@ const emptyCreateDialog = ref(false);
                       { label: $t('status.INACTIVE'), value: 'INACTIVE' },
                     ]"
                   />
+                  <template v-if="currentTab === 'employer'">
+                    <div class="q-mt-sm text-weight-medium">
+                      {{ $t('customer.form.businessType') }}
+                    </div>
+                    <SelectBusinessType
+                      v-model:value="filterBusinessType"
+                      clearable
+                    />
+                    <div class="q-mt-sm text-weight-medium">
+                      {{ $t('customer.form.address') }}
+                    </div>
+                    <SelectInput
+                      clearable
+                      v-model="filterAddress.provinceId"
+                      option-value="id"
+                      :label="$t('form.province')"
+                      :option="addressOpt.provinceOpt"
+                      :option-label="locale === 'eng' ? 'nameEN' : 'name'"
+                      @update:model-value="handleSelectAddress('province')"
+                    />
+                    <SelectInput
+                      clearable
+                      class="q-mt-sm"
+                      option-value="id"
+                      v-model="filterAddress.districtId"
+                      :option="addressOpt.districtOpt"
+                      :label="$t('form.district')"
+                      :option-label="locale === 'eng' ? 'nameEN' : 'name'"
+                      @update:model-value="handleSelectAddress('district')"
+                    />
+                    <SelectInput
+                      clearable
+                      class="q-mt-sm"
+                      option-value="id"
+                      v-model="filterAddress.subDistrictId"
+                      :option="addressOpt.subDistrictOpt"
+                      :label="$t('form.subDistrict')"
+                      :option-label="locale === 'eng' ? 'nameEN' : 'name'"
+                    />
+                  </template>
                 </AdvanceSearch>
               </template>
             </q-input>
@@ -884,8 +589,7 @@ const emptyCreateDialog = ref(false);
                   { label: $t('status.ACTIVE'), value: 'ACTIVE' },
                   { label: $t('status.INACTIVE'), value: 'INACTIVE' },
                 ]"
-              ></q-select>
-              <!-- v-if="gridView === false" -->
+              />
               <q-select
                 v-if="!gridView"
                 id="select-field"
@@ -982,7 +686,6 @@ const emptyCreateDialog = ref(false);
                 id="tab-employer"
                 @click="
                   () => {
-                    currentPageCustomer = 1;
                     inputSearch = '';
                     currentStatus = 'All';
                     flowStore.rotate();
@@ -1004,7 +707,6 @@ const emptyCreateDialog = ref(false);
                 class="text-capitalize"
                 @click="
                   () => {
-                    currentPageEmployee = 1;
                     inputSearch = '';
                     currentStatus = 'All';
                     flowStore.rotate();
@@ -1052,933 +754,40 @@ const emptyCreateDialog = ref(false);
         </div>
 
         <!-- body -->
+        <TabCustomer
+          v-if="currentTab === 'employer'"
+          ref="refTabCustomer"
+          v-model:customer-type-selected="customerTypeSelected"
+          v-model:stats-customer-type="statsCustomerType"
+          :filter-address="filterAddress"
+          :filter-business-type="filterBusinessType"
+          :gridView
+          :searchDate
+          :currentTab
+          :inputSearch
+          :currentStatus
+          :fieldSelected
+          :fetchImageList
+          :triggerChangeStatus
+        />
 
-        <q-splitter
-          v-model="splitPercent"
-          :limits="[0, 100]"
-          class="col full-width"
-          before-class="overflow-hidden"
-          after-class="overflow-hidden"
-          :disable="$q.screen.lt.sm"
-        >
-          <template v-slot:before>
-            <div
-              class="column q-pa-md surface-1 full-height full-width"
-              style="gap: var(--size-1)"
-            >
-              <template v-if="currentTab === 'employer'">
-                <q-item
-                  v-close-popup
-                  clickable
-                  v-for="v in fieldCustomer"
-                  :key="v"
-                  dense
-                  class="no-padding items-center rounded full-width"
-                  active-class="employer-active"
-                  :active="customerTypeSelected.value === v"
-                  @click="customerTypeSelected = { label: v, value: v }"
-                  :id="`btn-${v}`"
-                >
-                  <span class="q-px-md ellipsis">
-                    {{
-                      $t(
-                        {
-                          all: 'general.all',
-                          customerLegalEntity: 'customer.employerLegalEntity',
-                          customerNaturalPerson:
-                            'customer.employerNaturalPerson',
-                        }[v],
-                      )
-                    }}
-                  </span>
-                </q-item>
-              </template>
-              <template v-else>
-                <q-item
-                  active
-                  dense
-                  active-class="employer-active"
-                  class="no-padding items-center rounded full-width"
-                  v-close-popup
-                  clickable
-                >
-                  <span class="q-px-md ellipsis">
-                    {{ $t('general.all') }}
-                  </span>
-                </q-item>
-              </template>
-            </div>
-          </template>
-
-          <template v-slot:after>
-            <div class="column full-height no-wrap">
-              <!-- employer -->
-              <template
-                v-if="
-                  listCustomer &&
-                  statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
-                  currentTab === 'employer'
-                "
-              >
-                <div
-                  v-if="listCustomer.length === 0"
-                  class="row col full-width items-center justify-center"
-                  style="min-height: 250px"
-                >
-                  <NoData :not-found="!!inputSearch" />
-                </div>
-
-                <article
-                  v-if="listCustomer.length !== 0"
-                  class="col q-pa-md scroll full-width"
-                >
-                  <q-infinite-scroll
-                    :offset="10"
-                    @load="
-                      (_, done) => {
-                        if (
-                          $q.screen.gt.xs ||
-                          currentPageCustomer === maxPageCustomer
-                        )
-                          return;
-                        currentPageCustomer = currentPageCustomer + 1;
-                        fetchListCustomer().then(() =>
-                          done(currentPageCustomer >= maxPageCustomer),
-                        );
-                      }
-                    "
-                  >
-                    <q-table
-                      flat
-                      bordered
-                      :grid="gridView"
-                      :rows="listCustomer"
-                      :columns="columnsCustomer"
-                      class="full-width"
-                      card-container-class="q-col-gutter-md"
-                      row-key="name"
-                      :rows-per-page-options="[0]"
-                      hide-pagination
-                      :visible-columns="fieldSelected"
-                    >
-                      <template v-slot:header="props">
-                        <q-tr
-                          style="background-color: hsla(var(--info-bg) / 0.07)"
-                          :props="props"
-                        >
-                          <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                          >
-                            {{ $t(col.label) }}
-                          </q-th>
-                          <q-th auto-width />
-                        </q-tr>
-                      </template>
-
-                      <template v-slot:body="props">
-                        <q-tr
-                          :class="{
-                            'app-text-muted': props.row.status === 'INACTIVE',
-                            'status-active': props.row.status !== 'INACTIVE',
-                            'status-inactive': props.row.status === 'INACTIVE',
-                          }"
-                          :id="`row-table-${props.row.id}`"
-                          :props="props"
-                          @click="
-                            $router.push(
-                              `/customer-management/${props.row.id}/branch`,
-                            )
-                          "
-                          :style="
-                            props.rowIndex % 2 !== 0
-                              ? $q.dark.isActive
-                                ? 'background: hsl(var(--gray-11-hsl)/0.2)'
-                                : `background: #f9fafc`
-                              : ''
-                          "
-                        >
-                          <q-td
-                            class="text-center"
-                            v-if="fieldSelected.includes('orderNumber')"
-                          >
-                            {{
-                              $q.screen.xs
-                                ? props.rowIndex + 1
-                                : (currentPageCustomer - 1) * pageSize +
-                                  props.rowIndex +
-                                  1
-                            }}
-                          </q-td>
-
-                          <q-td
-                            v-if="fieldSelected.includes('titleName')"
-                            class="ellipsis"
-                          >
-                            <div class="row items-center no-wrap">
-                              <div
-                                class="q-mr-sm"
-                                style="
-                                  display: flex;
-                                  margin-bottom: var(--size-2);
-                                "
-                              >
-                                <div
-                                  :style="`
-                                  border-radius: 50%;
-                                  border-style: solid;
-                                  border-width: 2px;
-                                  border-color: hsl(var(${props.row.customerType === 'CORP' ? '--violet-11-hsl' : '--teal-10-hsl'}));
-                                `"
-                                >
-                                  <div class="branch-card__icon">
-                                    <q-avatar size="md">
-                                      <q-img
-                                        :src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
-                                        class="full-height full-width"
-                                      >
-                                        <template #error>
-                                          <q-img
-                                            :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
-                                          />
-                                        </template>
-                                      </q-img>
-                                    </q-avatar>
-                                  </div>
-                                </div>
-                              </div>
-                              <div class="col">
-                                <div class="col">
-                                  {{
-                                    props.row.customerType === 'CORP'
-                                      ? props.row.branch[0]?.registerName || '-'
-                                      : optionStore.mapOption(
-                                          props.row.branch[0].namePrefix,
-                                        ) +
-                                          ' ' +
-                                          props.row.branch[0]?.firstName +
-                                          ' ' +
-                                          props.row.branch[0]?.lastName || '-'
-                                  }}
-                                </div>
-                                <div class="col app-text-muted">
-                                  {{
-                                    props.row.customerType === 'CORP'
-                                      ? props.row.branch[0]?.registerNameEN ||
-                                        '-'
-                                      : capitalizeFirstLetter(
-                                          props.row.branch[0].namePrefix,
-                                        ) +
-                                          ' ' +
-                                          props.row.branch[0]?.firstNameEN +
-                                          ' ' +
-                                          props.row.branch[0]?.lastNameEN || '-'
-                                  }}
-                                </div>
-                              </div>
-                            </div>
-                          </q-td>
-
-                          <q-td
-                            v-if="fieldSelected.includes('businessTypePure')"
-                            style="max-width: 150px"
-                            class="ellipsis"
-                          >
-                            {{
-                              props.row.branch[0].businessType
-                                ? props.row.branch[0].businessType[
-                                    $i18n.locale === 'eng' ? 'nameEN' : 'name'
-                                  ]
-                                : '-'
-                            }}
-                            <q-tooltip>
-                              {{
-                                props.row.branch[0].businessType
-                                  ? props.row.branch[0].businessType[
-                                      $i18n.locale === 'eng' ? 'nameEN' : 'name'
-                                    ]
-                                  : '-'
-                              }}
-                            </q-tooltip>
-                          </q-td>
-
-                          <q-td
-                            v-if="fieldSelected.includes('jobPosition')"
-                            style="max-width: 150px"
-                            class="ellipsis"
-                          >
-                            {{
-                              props.row.branch.length !== 0
-                                ? props.row.branch[0].jobPosition !== null
-                                  ? optionStore.mapOption(
-                                      props.row.branch[0].jobPosition,
-                                    )
-                                  : ''
-                                : '-'
-                            }}
-
-                            <q-tooltip>
-                              {{
-                                props.row.branch.length !== 0
-                                  ? props.row.branch[0].jobPosition !== null
-                                    ? optionStore.mapOption(
-                                        props.row.branch[0].jobPosition,
-                                      )
-                                    : ''
-                                  : '-'
-                              }}
-                            </q-tooltip>
-                          </q-td>
-
-                          <q-td v-if="fieldSelected.includes('address')">
-                            {{
-                              formatAddress({
-                                address: props.row.branch[0].address,
-                                addressEN: props.row.branch[0].addressEN,
-                                moo: props.row.branch[0].moo,
-                                mooEN: props.row.branch[0].mooEN,
-                                soi: props.row.branch[0].soi,
-                                soiEN: props.row.branch[0].soiEN,
-                                street: props.row.branch[0].street,
-                                streetEN: props.row.branch[0].streetEN,
-                                province: props.row.branch[0].province,
-                                district: props.row.branch[0].district,
-                                subDistrict: props.row.branch[0].subDistrict,
-                                en: $i18n.locale === 'eng',
-                              })
-                            }}
-                            <q-tooltip>
-                              {{
-                                formatAddress({
-                                  address: props.row.branch[0].address,
-                                  addressEN: props.row.branch[0].addressEN,
-                                  moo: props.row.branch[0].moo,
-                                  mooEN: props.row.branch[0].mooEN,
-                                  soi: props.row.branch[0].soi,
-                                  soiEN: props.row.branch[0].soiEN,
-                                  street: props.row.branch[0].street,
-                                  streetEN: props.row.branch[0].streetEN,
-                                  province: props.row.branch[0].province,
-                                  district: props.row.branch[0].district,
-                                  subDistrict: props.row.branch[0].subDistrict,
-                                  en: $i18n.locale === 'eng',
-                                })
-                              }}
-                            </q-tooltip>
-                          </q-td>
-
-                          <q-td v-if="fieldSelected.includes('contactName')">
-                            {{ props.row.branch[0]?.contactName || '-' }}
-                          </q-td>
-
-                          <q-td v-if="fieldSelected.includes('officeTel')">
-                            {{ props.row.branch[0]?.officeTel || '-' }}
-                          </q-td>
-
-                          <q-td>
-                            <q-btn
-                              :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
-                              dense
-                              flat
-                              @click.stop="
-                                async () => {
-                                  if (!currentBtnOpen[props.rowIndex]) {
-                                    customerFormState.currentCustomerId =
-                                      props.row.id;
-
-                                    await fetchListEmployee({
-                                      customerId: props.row.id,
-                                      page: 1,
-                                      pageSize: 9999,
-                                    });
-
-                                    currentBtnOpen.map((v, i) => {
-                                      if (i !== props.rowIndex) {
-                                        currentBtnOpen[i] = false;
-                                      }
-                                    });
-                                  }
-                                  currentBtnOpen[props.rowIndex] =
-                                    !currentBtnOpen[props.rowIndex];
-                                }
-                              "
-                            >
-                              <div class="row items-center">
-                                <q-icon name="mdi-account-group-outline" />
-                                <q-icon
-                                  class="btn-arrow-right"
-                                  :class="{
-                                    active: currentBtnOpen[props.rowIndex],
-                                  }"
-                                  size="xs"
-                                  name="mdi-chevron-right"
-                                />
-                              </div>
-                            </q-btn>
-                            <q-btn
-                              icon="mdi-eye-outline"
-                              :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
-                              size="sm"
-                              dense
-                              round
-                              flat
-                              @click.stop="editCustomerForm(props.row.id)"
-                            />
-
-                            <KebabAction
-                              :hide-delete="!canAccess('customer', 'edit')"
-                              :id-name="
-                                props.row.branch[0].customerName ||
-                                props.row.branch[0].firstName
-                              "
-                              :status="props.row.status"
-                              @view="
-                                () => {
-                                  const { branch, ...payload } = props.row;
-                                  currentCustomer = payload;
-                                  editCustomerForm(props.row.id);
-                                }
-                              "
-                              @edit="
-                                async () => {
-                                  await editCustomerForm(props.row.id);
-                                  customerFormState.branchIndex = 0;
-                                }
-                              "
-                              @delete="
-                                deleteCustomerById(
-                                  props.row.id,
-                                  async () =>
-                                    await fetchListCustomer(true, $q.screen.xs),
-                                )
-                              "
-                              @change-status="
-                                async () => {
-                                  triggerChangeStatus(
-                                    props.row.id,
-                                    props.row.status,
-                                  );
-                                }
-                              "
-                            />
-                          </q-td>
-                        </q-tr>
-
-                        <q-tr
-                          v-show="currentBtnOpen[props.rowIndex]"
-                          :props="props"
-                        >
-                          <q-td colspan="100%" style="padding: 16px">
-                            <div class="text-center">
-                              <TableEmpoloyee
-                                in-table
-                                :list-employee="listEmployee"
-                                :columns-employee="columnsEmployee"
-                                @history="
-                                  (item: any) => {
-                                    openHistory(item.id);
-                                  }
-                                "
-                                @view="
-                                  async (item: any) => {
-                                    employeeFormState.drawerModal = true;
-                                    employeeFormState.isEmployeeEdit = false;
-                                    employeeFormStore.assignFormDataEmployee(
-                                      item.id,
-                                    );
-                                    await fetchImageList(
-                                      item.id,
-                                      item.selectedImage || '',
-                                      'employee',
-                                    );
-                                  }
-                                "
-                                @edit="
-                                  (item: any) =>
-                                    editEmployeeFormPersonal(item.id)
-                                "
-                                @delete="
-                                  (item: any) => {
-                                    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="
-                                  async (item: any) => {
-                                    triggerChangeStatus(item.id, item.status);
-                                  }
-                                "
-                              />
-                            </div>
-                          </q-td>
-                        </q-tr>
-                      </template>
-
-                      <template v-slot:item="props">
-                        <div class="col-12 col-md-6 column">
-                          <BranchCard
-                            i18n-key="customer.table"
-                            class="surface-1 col"
-                            :virtual-branch="false"
-                            :id="`branch-card-${props.row.name}`"
-                            :class="{
-                              'cursor-pointer': props.row._count.branch !== 0,
-                            }"
-                            @click="
-                              $router.push(
-                                `/customer-management/${props.row.id}/branch`,
-                              )
-                            "
-                            :metadata="props.row"
-                            :color="
-                              props.row.customerType === 'CORP'
-                                ? 'hq'
-                                : 'br-virtual'
-                            "
-                            :key="props.row.id"
-                            :data="{
-                              branchLabelName:
-                                props.row.customerType === 'CORP'
-                                  ? $i18n.locale === 'eng'
-                                    ? props.row.branch[0]?.registerNameEN || '-'
-                                    : props.row.branch[0]?.registerName || '-'
-                                  : $i18n.locale === 'eng'
-                                    ? props.row.branch[0]?.firstNameEN +
-                                        ' ' +
-                                        props.row.branch[0]?.lastNameEN || '-'
-                                    : props.row.branch[0]?.firstName +
-                                        ' ' +
-                                        props.row.branch[0]?.lastName || '-',
-                            }"
-                            :inactive="props.row.status === 'INACTIVE'"
-                            :field-selected="
-                              fieldSelected.filter((v) => {
-                                return columnsCustomer.some(
-                                  (c) => c.name === v,
-                                );
-                              })
-                            "
-                          >
-                            <template #image>
-                              <q-avatar size="3rem">
-                                <q-img
-                                  :src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
-                                  class="full-height full-width"
-                                >
-                                  <template #error>
-                                    <q-img
-                                      :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
-                                    />
-                                  </template>
-                                </q-img>
-                                <q-badge
-                                  class="absolute-bottom-right no-padding"
-                                  style="
-                                    border-radius: 50%;
-                                    min-width: 10px;
-                                    min-height: 10px;
-                                  "
-                                  :style="{
-                                    background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
-                                  }"
-                                ></q-badge>
-                              </q-avatar>
-                            </template>
-                            <template #data>
-                              <div
-                                class="row"
-                                style="
-                                  display: flex;
-                                  padding-block: var(--size-2);
-                                "
-                              >
-                                <div class="col-12 q-py-sm row">
-                                  <span class="col-4 app-text-muted">
-                                    {{
-                                      props.row.customerType === 'CORP'
-                                        ? $t('customer.form.legalPersonCode')
-                                        : $t('customer.form.cardNumber')
-                                    }}
-                                  </span>
-                                  <span class="col">
-                                    {{
-                                      props.row.customerType === 'CORP'
-                                        ? props.row.branch[0]?.legalPersonNo
-                                        : props.row.branch[0]?.citizenId
-                                    }}
-                                  </span>
-                                </div>
-                                <div
-                                  class="col-12 q-py-sm row"
-                                  v-for="key in fieldSelected
-                                    .filter((v) => {
-                                      return (
-                                        v !== 'orderNumber' &&
-                                        v !== 'titleName' &&
-                                        v !== 'address' &&
-                                        v !== 'contactName' &&
-                                        columnsCustomer.some(
-                                          (c) => c.name === v,
-                                        )
-                                      );
-                                    })
-                                    .sort((lhs, rhs) => {
-                                      const fields = [
-                                        ...columnsEmployee,
-                                        ...columnsCustomer,
-                                      ];
-                                      return (
-                                        fields.findIndex(
-                                          (i) => i.name === lhs,
-                                        ) -
-                                        fields.findIndex((i) => i.name === rhs)
-                                      );
-                                    })"
-                                  :key="key"
-                                >
-                                  <span class="col-4 app-text-muted">
-                                    {{ $t(`customer.table.${key}`) }}
-                                  </span>
-                                  <span class="col">
-                                    {{
-                                      key === 'businessTypePure'
-                                        ? props.row.branch[0].businessType[
-                                            $i18n.locale === 'eng'
-                                              ? 'nameEN'
-                                              : 'name'
-                                          ]
-                                        : key === 'jobPosition'
-                                          ? optionStore.mapOption(
-                                              props.row.branch[0].jobPosition,
-                                            )
-                                          : key === 'officeTel'
-                                            ? props.row.branch[0].officeTel ||
-                                              '-'
-                                            : ''
-                                    }}
-                                  </span>
-                                </div>
-                              </div>
-                            </template>
-                            <template v-slot:action>
-                              <q-btn
-                                icon="mdi-eye-outline"
-                                :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
-                                size="sm"
-                                dense
-                                round
-                                flat
-                                @click.stop="editCustomerForm(props.row.id)"
-                              />
-                              <KebabAction
-                                :hide-delete="!canAccess('customer', 'edit')"
-                                :status="props.row.status"
-                                :id-name="props.row.name"
-                                @view="
-                                  () => {
-                                    const { branch, ...payload } = props.row;
-                                    currentCustomer = payload;
-                                    editCustomerForm(props.row.id);
-                                  }
-                                "
-                                @edit="
-                                  async () => {
-                                    await editCustomerForm(props.row.id);
-                                    customerFormState.branchIndex = 0;
-                                  }
-                                "
-                                @delete="
-                                  deleteCustomerById(
-                                    props.row.id,
-                                    async () =>
-                                      await fetchListCustomer(
-                                        true,
-                                        $q.screen.xs,
-                                      ),
-                                  )
-                                "
-                                @change-status="
-                                  triggerChangeStatus(
-                                    props.row.id,
-                                    props.row.status,
-                                  )
-                                "
-                              />
-                            </template>
-                          </BranchCard>
-                        </div>
-                      </template>
-                    </q-table>
-                    <template v-slot:loading>
-                      <div
-                        v-if="
-                          $q.screen.lt.sm &&
-                          currentPageCustomer !== maxPageCustomer
-                        "
-                        class="row justify-center"
-                      >
-                        <q-spinner-dots color="primary" size="40px" />
-                      </div>
-                    </template>
-                  </q-infinite-scroll>
-                </article>
-
-                <footer
-                  v-if="listCustomer.length !== 0 && $q.screen.gt.xs"
-                  class="row justify-between items-center q-px-md q-py-sm"
-                >
-                  <div class="row col-4 items-center">
-                    <div
-                      class="app-text-muted"
-                      style="width: 80px"
-                      v-if="$q.screen.gt.sm"
-                    >
-                      {{ $t('general.recordPerPage') }}
-                    </div>
-
-                    <div><PaginationPageSize v-model="pageSize" /></div>
-                  </div>
-
-                  <div class="col-4 flex justify-center app-text-muted">
-                    {{
-                      $q.screen.gt.sm
-                        ? $t('general.recordsPage', {
-                            resultcurrentPage: listCustomer.length,
-                            total:
-                              statsCustomerType.PERS + statsCustomerType.CORP,
-                          })
-                        : $t('general.ofPage', {
-                            current: listCustomer.length,
-                            total:
-                              statsCustomerType.PERS + statsCustomerType.CORP,
-                          })
-                    }}
-                  </div>
-
-                  <div class="col-4 flex justify-end">
-                    <PaginationComponent
-                      v-model:current-page="currentPageCustomer"
-                      v-model:max-page="maxPageCustomer"
-                      :fetch-data="
-                        async () => {
-                          await fetchListCustomer();
-                          flowStore.rotate();
-                        }
-                      "
-                    />
-                  </div>
-                </footer>
-              </template>
-
-              <!-- employee -->
-              <template
-                v-if="
-                  listEmployee && employeeStats > 0 && currentTab === 'employee'
-                "
-              >
-                <div
-                  v-if="listEmployee.length === 0"
-                  class="row col full-width items-center justify-center"
-                  style="min-height: 250px"
-                >
-                  <NoData :not-found="!!inputSearch" />
-                </div>
-
-                <article
-                  v-if="listEmployee.length !== 0"
-                  class="surface-2 q-pa-md scroll col full-width"
-                >
-                  <q-infinite-scroll
-                    :offset="10"
-                    @load="
-                      (_, done) => {
-                        if (
-                          $q.screen.gt.xs ||
-                          currentPageEmployee === maxPageEmployee
-                        )
-                          return;
-                        currentPageEmployee = currentPageEmployee + 1;
-                        fetchListEmployee().then(() =>
-                          done(currentPageEmployee >= maxPageEmployee),
-                        );
-                      }
-                    "
-                  >
-                    <TableEmpoloyee
-                      :hide-delete="!canAccess('customer', 'edit')"
-                      v-model:page-size="pageSize"
-                      v-model:current-page="currentPageEmployee"
-                      :grid-view="gridView"
-                      :list-employee="listEmployee"
-                      :columns-employee="columnsEmployee"
-                      :field-selected="fieldSelected"
-                      @history="
-                        (item: any) => {
-                          openHistory(item.id);
-                        }
-                      "
-                      @view="
-                        async (item: any) => {
-                          employeeFormState.drawerModal = true;
-                          employeeFormState.isEmployeeEdit = false;
-                          employeeFormStore.assignFormDataEmployee(item.id);
-                          await fetchImageList(
-                            item.id,
-                            item.selectedImage || '',
-                            'employee',
-                          );
-                        }
-                      "
-                      @edit="(item: any) => editEmployeeFormPersonal(item.id)"
-                      @delete="
-                        (item: any) => {
-                          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="
-                        async (item: any) => {
-                          triggerChangeStatus(
-                            item.id,
-                            item.status,
-                            item.firstNameEN,
-                          );
-                        }
-                      "
-                    />
-                    <template v-slot:loading>
-                      <div
-                        v-if="
-                          $q.screen.lt.sm &&
-                          currentPageEmployee !== maxPageEmployee
-                        "
-                        class="row justify-center"
-                      >
-                        <q-spinner-dots color="primary" size="40px" />
-                      </div>
-                    </template>
-                  </q-infinite-scroll>
-                </article>
-                <footer
-                  v-if="listEmployee.length !== 0 && $q.screen.gt.xs"
-                  class="row justify-between items-center q-px-md q-py-sm"
-                >
-                  <div class="row col-4 items-center">
-                    <div
-                      class="app-text-muted"
-                      style="width: 80px"
-                      v-if="$q.screen.gt.sm"
-                    >
-                      {{ $t('general.recordPerPage') }}
-                    </div>
-
-                    <div><PaginationPageSize v-model="pageSize" /></div>
-                  </div>
-
-                  <div class="col-4 flex justify-center app-text-muted">
-                    {{
-                      $q.screen.gt.sm
-                        ? $t('general.recordsPage', {
-                            resultcurrentPage: listEmployee.length,
-                            total: employeeStats,
-                          })
-                        : $t('general.ofPage', {
-                            current: listEmployee.length,
-                            total: employeeStats,
-                          })
-                    }}
-                  </div>
-
-                  <div class="col-4 flex justify-end">
-                    <PaginationComponent
-                      v-model:current-page="currentPageEmployee"
-                      v-model:max-page="maxPageEmployee"
-                      :fetch-data="
-                        async () => {
-                          await fetchListEmployee();
-                          flowStore.rotate();
-                        }
-                      "
-                    />
-                  </div>
-                </footer>
-              </template>
-
-              <template
-                v-if="
-                  (statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
-                    currentTab === 'employer') ||
-                  (employeeStats === 0 && currentTab === 'employee')
-                "
-              >
-                <TooltipComponent
-                  v-if="canAccess('customer', 'edit')"
-                  class="self-end q-ma-md"
-                  :title="'general.noData'"
-                  :caption="'general.clickToCreate'"
-                  imgSrc="personnel-table-"
-                />
-
-                <div
-                  class="row items-center justify-center"
-                  style="flex-grow: 1"
-                >
-                  <EmptyAddButton
-                    v-if="canAccess('customer', 'edit')"
-                    :label="'general.add'"
-                    :i18n-args="{
-                      text: $t(`customer.${currentTab}`),
-                    }"
-                    @trigger="
-                      () => {
-                        if (currentTab === 'employer') {
-                          emptyCreateDialog = true;
-                        } else {
-                          createEmployeeForm();
-                        }
-                      }
-                    "
-                  />
-                  <NoData v-else />
-                </div>
-              </template>
-            </div>
-          </template>
-        </q-splitter>
+        <TabEmployee
+          v-if="currentTab === 'employee'"
+          ref="refTabEmployee"
+          v-model:employee-stats="employeeStats"
+          :gridView
+          :searchDate
+          :currentTab
+          :inputSearch
+          :currentStatus
+          :fieldSelected
+          :fetchImageList
+          :triggerChangeStatus
+        />
       </div>
     </div>
 
+    <!-- หน้า id ลูกค้า -->
     <div
       class="col column rounded bordered"
       style="overflow: hidden"
@@ -1988,6 +797,7 @@ const emptyCreateDialog = ref(false);
         v-model:status-employee-create="statusEmployeeCreate"
         v-model:status-employee-edit="employeeFormState.drawerModal"
         v-if="currentCustomer"
+        :fetch-image-list="fetchImageList"
         :customer-type="currentCustomer.customerType"
         :current-customer-name="
           currentCustomer.customerType === 'PERS'
@@ -2017,4126 +827,9 @@ const emptyCreateDialog = ref(false);
       />
     </div>
   </div>
-
-  <!-- add customer -->
-  <DialogForm
-    v-model:modal="emptyCreateDialog"
-    :title="$t('customer.employerType')"
-    hide-footer
-    no-app-box
-    width="40vw"
-    height="250px"
-    :close="
-      () => {
-        emptyCreateDialog = false;
-        onCreateImageList = { selectedImage: '', list: [] };
-      }
-    "
-  >
-    <div class="full-height row q-pa-md">
-      <ItemCard
-        class="col q-mx-sm full-height"
-        v-for="value in dialogCreateCustomerItem"
-        :key="value.text"
-        :icon="value.icon"
-        :text="value.text"
-        :icon-color="value.iconColor"
-        :bg-color="value.color"
-        @trigger="
-          () => {
-            createCustomerForm(
-              value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
-            );
-            emptyCreateDialog = false;
-          }
-        "
-      />
-    </div>
-  </DialogForm>
-
-  <DialogContainer
-    :model-value="customerFormState.dialogModal"
-    :on-open="
-      async () => {
-        customerFormStore.resetForm(customerFormState.dialogType === 'create');
-        onCreateImageList = { selectedImage: '', list: [] };
-        customerFormState.customerImageUrl = '';
-        await fetchListOfOptionBranch();
-        await customerFormStore.addCurrentCustomerBranch();
-      }
-    "
-    :on-close="
-      () => {
-        customerFormState.dialogModal = false;
-        onCreateImageList = { selectedImage: '', list: [] };
-      }
-    "
-  >
-    <template #header>
-      <DialogHeader
-        :title="
-          customerFormState.dialogType === 'create'
-            ? $t(`general.add`, {
-                text: `${$t('customer.employer')} `,
-              })
-            : `${$t('customer.employer')} `
-        "
-      >
-        <template #title-after>
-          <span
-            :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
-          >
-            :
-            {{
-              customerFormData.customerType === 'CORP'
-                ? $t('customer.employerLegalEntity')
-                : $t('customer.employerNaturalPerson')
-            }}
-          </span>
-        </template>
-      </DialogHeader>
-    </template>
-
-    <div
-      :class="{
-        'q-mx-lg q-my-md': $q.screen.gt.sm,
-        'q-mx-md q-my-sm': !$q.screen.gt.sm,
-      }"
-    >
-      <ProfileBanner
-        v-if="customerFormData.customerBranch !== undefined"
-        active
-        hide-fade
-        prefix="dialog"
-        :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
-        :img="
-          customerFormState.customerImageUrl ||
-          `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`
-        "
-        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
-        :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
-        :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
-        :icon="
-          customerFormData.customerType === 'PERS'
-            ? 'mdi-account-plus-outline'
-            : 'mdi-office-building-outline'
-        "
-        :title="
-          customerFormData.customerType === 'PERS'
-            ? setPrefixName(
-                {
-                  namePrefix: customerFormData.customerBranch[0]?.namePrefix,
-                  firstName: customerFormData.customerBranch[0]?.firstName,
-                  lastName: customerFormData.customerBranch[0]?.lastName,
-                  firstNameEN: customerFormData.customerBranch[0]?.firstNameEN,
-                  lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
-                },
-                { locale },
-              )
-            : customerFormData.customerBranch[0]?.registerName
-        "
-        :caption="
-          customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
-            : customerFormData.customerBranch[0]?.registerNameEN
-        "
-        @view="
-          () => {
-            customerFormState.imageDialog = true;
-            customerFormState.isImageEdit = false;
-          }
-        "
-        @edit="
-          customerFormState.imageDialog = customerFormState.isImageEdit = true
-        "
-      />
-    </div>
-    <div
-      style="flex: 1; width: 100%; overflow-y: auto"
-      id="customer-form"
-      :class="{
-        'q-px-lg q-pb-lg': $q.screen.gt.sm,
-        'q-px-md q-pb-sm': !$q.screen.gt.sm,
-      }"
-    >
-      <div class="col surface-1 full-height rounded bordered scroll row">
-        <div
-          class="col"
-          style="height: 100%; max-height: 100; overflow-y: auto"
-          v-if="$q.screen.gt.sm"
-        >
-          <div class="q-py-md q-pl-md q-pr-sm">
-            <SideMenu
-              :menu="[
-                {
-                  name: $t('form.field.basicInformation'),
-                  anchor: 'form-basic-info-customer',
-                },
-                {
-                  name: $t('customer.form.group.branch'),
-                  anchor: 'form-branch-customer-branch',
-                  useBtn: true,
-                },
-                ...(customerFormData.customerBranch?.map((v, i) => ({
-                  name:
-                    i === 0
-                      ? $t('customer.form.headQuarters.title')
-                      : $t('customer.form.branch.title', {
-                          name: i,
-                        }),
-                  anchor: `form-branch-customer-no-${i}`,
-                  sub: true,
-                })) || []),
-              ]"
-              background="transparent"
-              :active="{
-                background: 'hsla(var(--blue-6-hsl) / .2)',
-                foreground: 'var(--blue-6)',
-              }"
-              scroll-element="#customer-form-content"
-            >
-              <template v-slot:btn-form-branch-customer-branch>
-                <q-btn
-                  dense
-                  flat
-                  icon="mdi-plus"
-                  size="sm"
-                  rounded
-                  padding="0px 0px"
-                  style="color: var(--stone-9)"
-                  @click.stop="customerFormStore.addCurrentCustomerBranch()"
-                  v-if="
-                    customerFormState.branchIndex === -1 &&
-                    !!customerFormState.editCustomerId &&
-                    customerFormState.dialogType !== 'create'
-                  "
-                  :disabled="!customerFormState.readonly"
-                />
-              </template>
-            </SideMenu>
-          </div>
-        </div>
-        <div
-          class="col-12 col-md-10"
-          :class="{
-            'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-pa-sm': !$q.screen.gt.sm,
-          }"
-          id="customer-form-content"
-          style="height: 100%; max-height: 100%; overflow-y: auto"
-        >
-          <EmployerFormBasicInfo
-            prefixId="form"
-            v-if="
-              customerFormData.customerBranch !== undefined &&
-              customerFormData.customerBranch.length > 0
-            "
-            class="q-mb-xl"
-            :readonly="
-              (customerFormState.dialogType === 'edit' &&
-                customerFormState.readonly === true) ||
-              customerFormState.dialogType === 'info'
-            "
-            :action-disabled="customerFormState.branchIndex !== -1"
-            id="form-basic-info-customer"
-            :onCreate="customerFormState.dialogType === 'create'"
-            @edit="
-              ((customerFormState.dialogType = 'edit'),
-              (customerFormState.readonly = false))
-            "
-            @cancel="() => customerFormUndo(false)"
-            @delete="
-              customerFormState.editCustomerId &&
-              deleteCustomerById(
-                customerFormState.editCustomerId,
-                async () => await fetchListCustomer(true, $q.screen.xs),
-              )
-            "
-            :customer-type="customerFormData.customerType"
-            v-model:registered-branch-id="customerFormData.registeredBranchId"
-            v-model:customer-name="customerNameInfo"
-            v-model:register-name="
-              customerFormData.customerBranch[0].registerName
-            "
-            v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
-            v-model:legal-person-no="
-              customerFormData.customerBranch[0].legalPersonNo
-            "
-            v-model:business-type="
-              customerFormData.customerBranch[0].businessTypeId
-            "
-            v-model:job-position="
-              customerFormData.customerBranch[0].jobPosition
-            "
-            v-model:telephone-no="
-              customerFormData.customerBranch[0].telephoneNo
-            "
-            v-model:branch-options="registerAbleBranchOption"
-          />
-          <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
-            <div class="col-12 text-weight-bold text-body1 row items-center">
-              <q-icon
-                flat
-                size="xs"
-                class="q-pa-sm rounded q-mr-xs"
-                color="info"
-                name="mdi-briefcase-outline"
-                style="background-color: var(--surface-3)"
-              />
-              <span>{{ $t('customer.form.group.branch') }}</span>
-            </div>
-
-            <template
-              v-for="(_, idx) in customerFormData.customerBranch"
-              :key="idx"
-            >
-              <!-- v-if="customerFormData.customerBranch" -->
-              <q-form
-                class="full-width"
-                greedy
-                @submit.prevent="
-                  async () => {
-                    if (!customerFormData.customerBranch) return;
-
-                    if (customerFormData.customerType === 'PERS') {
-                      tabFieldRequired.main = [
-                        'citizenId',
-                        'namePrefix',
-                        'firstName',
-                        'firstNameEN',
-                        'lastName',
-                        'lastNameEN',
-                        'gender',
-                        'birthDate',
-                      ];
-                    }
-                    if (customerFormData.customerType === 'CORP') {
-                      tabFieldRequired.main = ['legalPersonNo', 'registerName'];
-                    }
-                    let tapIsUndefined = validateTabField(
-                      customerFormData.customerBranch?.[idx],
-                      tabFieldRequired,
-                    );
-
-                    if (tapIsUndefined.length > 0) {
-                      return dialog({
-                        color: 'warning',
-                        icon: 'mdi-alert',
-                        title: t('dialog.title.incompleteDataEntry'),
-                        actionText: t('general.ok'),
-                        persistent: true,
-                        message: t('dialog.message.incompleteDataEntry', {
-                          tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
-                        }),
-                        action: async () => {
-                          return;
-                        },
-                      });
-                    }
-                    if (!customerFormData.customerBranch[idx].id) {
-                      let res;
-                      if (idx === 0) {
-                        res =
-                          await customerFormStore.submitFormCustomer(
-                            onCreateImageList,
-                          );
-                      } else {
-                        res = await customerStore.createBranch({
-                          ...customerFormData.customerBranch[idx],
-                          customerId: customerFormState.editCustomerId || '',
-                        });
-                      }
-                      if (res) {
-                        customerFormState.readonly = true;
-                        notify('create', $t('general.success'));
-                      }
-                    } else {
-                      if (!customerFormState.editCustomerId) return;
-                      await customerStore.editBranchById(
-                        customerFormData.customerBranch[idx].id || '',
-                        {
-                          ...customerFormData.customerBranch[idx],
-                          id: undefined,
-                        },
-                      );
-                    }
-
-                    const uploadResult =
-                      customerFormData.customerBranch[idx].file?.map(
-                        async (v) => {
-                          if (!v.file) return;
-
-                          const ext = v.file.name.split('.').at(-1);
-                          let filename = v.group + '-' + new Date().getTime();
-                          if (ext) filename += `.${ext}`;
-
-                          const res = await customerStore.putAttachment({
-                            parentId:
-                              customerFormData.customerBranch?.[idx].id || '',
-                            file: v.file,
-                            name: filename,
-                          });
-
-                          if (res) {
-                            await customerFormStore.assignFormData(
-                              customerFormState.editCustomerId,
-                            );
-                          }
-                        },
-                      ) || [];
-
-                    for (const r of uploadResult) await r;
-
-                    await customerFormStore.assignFormData(
-                      customerFormState.editCustomerId,
-                    );
-
-                    await fetchListCustomer(true, $q.screen.xs);
-                    customerFormStore.resetForm();
-                  }
-                "
-              >
-                <!-- v-if="!!customerFormState.editCustomerId" -->
-
-                <EmployerFormBranch
-                  :index="idx"
-                  prefixId="form"
-                  v-if="customerFormData.customerBranch"
-                  v-model:customer="customerFormData"
-                  v-model:customer-branch="customerFormData.customerBranch[idx]"
-                  :onCreate="customerFormState.dialogType === 'create'"
-                  :customer-type="customerFormData.customerType"
-                  :readonly="customerFormState.branchIndex !== idx"
-                  :action-disabled="
-                    !customerFormState.readonly ||
-                    (customerFormState.branchIndex !== -1 &&
-                      customerFormState.branchIndex !== idx)
-                  "
-                  @edit="() => (customerFormState.branchIndex = idx)"
-                  @cancel="() => customerFormUndo(false)"
-                  @delete="
-                    async () => {
-                      if (!customerFormState.editCustomerId) return;
-
-                      if (idx === 0) {
-                        deleteCustomerById(
-                          customerFormState.editCustomerId,
-                          async () =>
-                            await fetchListCustomer(true, $q.screen.xs),
-                        );
-                        return;
-                      }
-                      if (!!customerFormData.customerBranch?.[idx].id) {
-                        const action = await deleteCustomerBranchById(
-                          customerFormData.customerBranch[idx].id || '',
-                        );
-                        if (action) {
-                          await customerFormStore.assignFormData(
-                            customerFormState.editCustomerId,
-                          );
-                        }
-                        customerFormStore.resetForm();
-                      }
-                    }
-                  "
-                  @save="() => {}"
-                />
-              </q-form>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </DialogContainer>
-
-  <!-- add employee -->
-  <DialogForm
-    hideFooter
-    :title="$t('form.title.create', { name: $t('customer.employee') })"
-    v-model:modal="employeeFormState.dialogModal"
-    :undo="() => employeeFormUndo(false)"
-    :submit="
-      async () => {
-        if (employeeFormState.currentTab === 'personalInfo') {
-          await employeeFormStore.submitPersonal(onCreateImageList);
-          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;
-
-        if (route.name !== 'CustomerBranchManagement') {
-          await fetchListEmployee(
-            currentTab === 'employer'
-              ? {
-                  page: 1,
-                  pageSize: 999,
-                  customerId: customerFormState.currentCustomerId,
-                }
-              : { fetchStats: true, mobileFetch: $q.screen.xs },
-          );
-
-          flowStore.rotate();
-        }
-      }
-    "
-    :show="
-      () => {
-        employeeFormStore.resetFormDataEmployee(true);
-      }
-    "
-    :before-close="
-      () => {
-        if (employeeFormStore.isFormDataDifferent()) {
-          employeeConfirmUnsave();
-          return true;
-        } else {
-          if ($q.screen.gt.xs) fetchListEmployee();
-        }
-
-        employeeFormState.currentTab = 'personalInfo';
-        return false;
-      }
-    "
-  >
-    <div
-      :class="{
-        'q-mx-lg q-my-md': $q.screen.gt.sm,
-        'q-mx-md q-my-sm': !$q.screen.gt.sm,
-      }"
-    >
-      <ProfileBanner
-        active
-        useToggle
-        prefix="dialog"
-        color="white"
-        icon="mdi-account-plus-outline"
-        :bg-color="
-          employeeFormState.profileUrl
-            ? 'white'
-            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
-        "
-        v-model:current-tab="employeeFormState.currentTab"
-        v-model:toggle-status="currentFromDataEmployee.status"
-        fallbackCover="/images/employee-banner.png"
-        :img="
-          employeeFormState.profileUrl ||
-          `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
-            refreshImageState ? `?ts=${Date.now()}` : '',
-          )
-        "
-        :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
-        :title="
-          currentFromDataEmployee
-            ? setPrefixName(
-                {
-                  namePrefix: currentFromDataEmployee.namePrefix,
-                  firstName: currentFromDataEmployee.firstName,
-                  lastName: currentFromDataEmployee.lastName,
-                  firstNameEN: currentFromDataEmployee.firstNameEN,
-                  lastNameEN: currentFromDataEmployee.lastNameEN,
-                },
-                { locale },
-              )
-            : '-'
-        "
-        @view="
-          () => {
-            employeeFormState.imageDialog = true;
-            employeeFormState.isImageEdit = false;
-          }
-        "
-        @edit="
-          employeeFormState.imageDialog = employeeFormState.isImageEdit = true
-        "
-        @update:toggle-status="
-          () => {
-            currentFromDataEmployee.status =
-              currentFromDataEmployee.status === 'CREATED'
-                ? 'INACTIVE'
-                : 'CREATED';
-          }
-        "
-      />
-    </div>
-
-    <div
-      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
-        class="col surface-1 full-height rounded bordered scroll row relative-position"
-        :key="String(!employeeFormState.isEmployeeEdit)"
-      >
-        <div
-          class="col"
-          style="height: 100%; max-height: 100; overflow-y: auto"
-          v-if="$q.screen.gt.sm"
-        >
-          <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)
-              "
-              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 col-md-10"
-          :class="{
-            'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-pa-sm': !$q.screen.gt.sm,
-          }"
-          id="employee-form-content"
-          style="height: 100%; max-height: 100; overflow-y: auto"
-        >
-          <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="
-                    () =>
-                      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"
-              prefix-id="form-employee"
-              :show-btn-save="employeeFormState.dialogType === 'create'"
-              employee
-              dense
-              outlined
-              separator
-              title="form.field.basicInformation"
-              :readonly="!employeeFormState.isEmployeeEdit"
-              :employee-owner-option="employeeStore.ownerOption || []"
-              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"
-              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"
-            />
-
-            <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 (
-                        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 (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: [] };
-                  }
-                "
-                :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,
-                      });
-                    }
-                  }
-                "
-                :delete-item="
-                  async (obj) => {
-                    let status: boolean = false;
-                    const res = await employeeStore.delMeta({
-                      parentId: currentFromDataEmployee.id || '',
-                      group: obj.group,
-                      metaId: obj._meta.id,
-                    });
-
-                    if (res) {
-                      status = true;
-                    }
-
-                    await employeeFormStore.assignFormDataEmployee(
-                      currentFromDataEmployee.id,
-                    );
-
-                    return status;
-                  }
-                "
-                :save="
-                  async (
-                    group: 'passport' | 'visa' | 'attachment',
-                    _meta: any,
-                    file: File | undefined,
-                  ) => {
-                    let status: boolean = false;
-                    if (group === 'passport' || group === 'visa') {
-                      if (file !== undefined && currentFromDataEmployee.id) {
-                        const res = await employeeStore.postMeta({
-                          parentId: currentFromDataEmployee.id || '',
-                          group,
-                          meta: _meta,
-                          file,
-                        });
-
-                        if (res) {
-                          status = true;
-                        }
-                      } else {
-                        const {
-                          id,
-                          employeeId,
-                          createdAt,
-                          updatedAt,
-                          ...payload
-                        } = _meta;
-
-                        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;
-                  }
-                "
-                :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}-${dateFormat(i.expireDate)}` || '',
-                          group: group,
-                          url: await employeeStore.getFile({
-                            parentId: currentFromDataEmployee.id || '',
-                            group,
-                            fileId: i.id,
-                          }),
-                          file: undefined,
-                        };
-                      });
-
-                      return await waitAll(tempValue);
-                    } else {
-                      const res = await employeeStore.listAttachment({
-                        parentId: currentFromDataEmployee.id || '',
-                      });
-
-                      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"
-                    v-model:report-date="meta.reportDate"
-                  />
-
-                  <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>
-
-              <FormEmployeePassport
-                v-for="(
-                  value, index
-                ) in currentFromDataEmployee.employeePassport"
-                prefix-id="drawer-info-employee"
-                :key="index"
-                id="form-passport"
-                hide-title
-                dense
-                outlined
-                separator
-                :title="$t('customerEmployee.form.group.passport')"
-                :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"
-                v-model:file="value.file"
-              >
-                <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,
-                            fetch: async () =>
-                              await fetchListEmployee(
-                                currentTab === 'employer'
-                                  ? {
-                                      page: 1,
-                                      pageSize: 999,
-                                      customerId:
-                                        customerFormState.currentCustomerId,
-                                    }
-                                  : {
-                                      fetchStats: true,
-                                      mobileFetch: $q.screen.xs,
-                                    },
-                              ),
-                          });
-                        }
-                      "
-                      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-for="(value, index) in currentFromDataEmployee.employeeVisa"
-                :key="index"
-                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"
-                v-model:report-date="value.reportDate"
-              >
-                <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 &&
-                          !(employeeFormState.currentIndexVisa === -1) &&
-                          employeeFormState.currentIndexVisa === index)
-                      "
-                      id="btn-info-basic-delete"
-                      icon-only
-                      @click.stop="
-                        () => {
-                          employeeFormState.currentIndexVisa = 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"
-                      :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,
-                      fetch: async () =>
-                        await fetchListEmployee(
-                          currentTab === 'employer'
-                            ? {
-                                page: 1,
-                                pageSize: 999,
-                                customerId: customerFormState.currentCustomerId,
-                              }
-                            : {
-                                fetchStats: true,
-                                mobileFetch: $q.screen.xs,
-                              },
-                        ),
-                    });
-                  }
-                "
-                @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,
-                      fetch: async () =>
-                        await fetchListEmployee(
-                          currentTab === 'employer'
-                            ? {
-                                page: 1,
-                                pageSize: 999,
-                                customerId: customerFormState.currentCustomerId,
-                              }
-                            : {
-                                fetchStats: true,
-                                mobileFetch: $q.screen.xs,
-                              },
-                        ),
-                    });
-                  }
-                "
-                @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>
-  </DialogForm>
-
-  <ImageUploadDialog
-    ref="dialogCustomerImageUpload"
-    v-model:dialog-state="customerFormState.imageDialog"
-    v-model:file="customerFormData.image"
-    v-model:image-url="customerFormState.customerImageUrl"
-    v-model:data-list="imageList"
-    v-model:on-create-data-list="onCreateImageList"
-    :on-create="customerFormState.dialogModal"
-    :default-url="customerFormState.defaultCustomerImageUrl"
-    :hidden-footer="!customerFormState.isImageEdit"
-    @add-image="
-      async (v) => {
-        if (!v) return;
-        if (!customerFormState.editCustomerId) return;
-        await customerStore.addImageList(
-          v,
-          customerFormState.editCustomerId,
-          Date.now().toString(),
-        );
-        await fetchImageList(
-          customerFormState.editCustomerId,
-          customerFormData.selectedImage || '',
-          'customer',
-        );
-      }
-    "
-    @remove-image="
-      async (v) => {
-        if (!v) return;
-        if (!customerFormState.editCustomerId) return;
-        const name = v.split('/').pop() || '';
-        await customerStore.deleteImageByName(
-          customerFormState.editCustomerId,
-          name,
-        );
-        await fetchImageList(
-          customerFormState.editCustomerId,
-          customerFormData.selectedImage || '',
-          'customer',
-        );
-      }
-    "
-    @submit="
-      async (v) => {
-        if (customerFormState.dialogModal) {
-          customerFormState.customerImageUrl = v;
-          customerFormState.imageDialog = false;
-        } else {
-          refreshImageState = true;
-          customerFormData.selectedImage = v;
-          imageList ? (imageList.selectedImage = v) : '';
-          customerFormState.customerImageUrl = `${baseUrl}/customer/${customerFormState.editCustomerId && customerFormState.editCustomerId}/image/${v}`;
-          customerFormStore.resetForm();
-          await customerFormStore.submitFormCustomer();
-          customerFormState.imageDialog = false;
-          refreshImageState = false;
-        }
-      }
-    "
-  >
-    <template #title>
-      <span
-        v-if="!customerFormState.dialogModal"
-        class="justify-center flex text-bold"
-      >
-        {{ $t('general.image') }}
-        {{
-          $i18n.locale === 'eng'
-            ? customerFormData.customerType === 'CORP'
-              ? customerFormData?.customerBranch?.[0].registerNameEN || '-'
-              : customerFormData?.customerBranch?.[0].firstNameEN +
-                  ' ' +
-                  customerFormData?.customerBranch?.[0].lastNameEN || '-'
-            : customerFormData.customerType === 'CORP'
-              ? customerFormData?.customerBranch?.[0].registerName || '-'
-              : customerFormData?.customerBranch?.[0].firstName +
-                  ' ' +
-                  customerFormData?.customerBranch?.[0].lastName || '-'
-        }}
-      </span>
-    </template>
-    <template #error>
-      <div class="full-height full-width" style="background: white">
-        <div class="full-height full-width flex justify-center items-center">
-          <q-img
-            :src="`/images/customer-${customerFormData.customerType}-avartar-male.png`"
-            fit="contain"
-            style="height: 100%"
-          >
-            <template #error>
-              <span
-                class="full-width full-height column items-center justify-center"
-              >
-                <q-icon
-                  size="3rem"
-                  :name="
-                    customerFormData.customerType === 'PERS'
-                      ? 'mdi-account-plus-outline'
-                      : 'mdi-office-building-outline'
-                  "
-                  :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
-                />
-              </span>
-            </template>
-          </q-img>
-        </div>
-      </div>
-    </template>
-  </ImageUploadDialog>
-
-  <ImageUploadDialog
-    ref="dialogEmployeeImageUpload"
-    v-model:dialog-state="employeeFormState.imageDialog"
-    v-model:file="currentFromDataEmployee.image"
-    v-model:image-url="employeeFormState.profileUrl"
-    v-model:data-list="imageList"
-    v-model:on-create-data-list="onCreateImageList"
-    :on-create="employeeFormState.dialogModal"
-    :hidden-footer="!employeeFormState.isImageEdit"
-    @add-image="
-      async (v) => {
-        if (!v) return;
-        if (!currentFromDataEmployee.id) return;
-        await employeeStore.addImageList(
-          v,
-          currentFromDataEmployee.id,
-          Date.now().toString(),
-        );
-        await fetchImageList(
-          currentFromDataEmployee.id,
-          currentFromDataEmployee.selectedImage || '',
-          'employee',
-        );
-      }
-    "
-    @remove-image="
-      async (v) => {
-        if (!v) return;
-        if (!currentFromDataEmployee.id) return;
-        const name = v.split('/').pop() || '';
-        await employeeStore.deleteImageByName(currentFromDataEmployee.id, name);
-        await fetchImageList(
-          currentFromDataEmployee.id,
-          currentFromDataEmployee.selectedImage || '',
-          'employee',
-        );
-      }
-    "
-    @submit="
-      async (v) => {
-        if (employeeFormState.dialogModal) {
-          employeeFormState.profileUrl = v;
-          employeeFormState.imageDialog = false;
-        } else {
-          refreshImageState = true;
-          employeeFormState.dialogType = 'edit';
-          currentFromDataEmployee.selectedImage = v;
-          imageList ? (imageList.selectedImage = v) : '';
-          employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
-          employeeFormStore.resetFormDataEmployee();
-          await employeeFormStore.submitPersonal(onCreateImageList);
-          employeeFormState.imageDialog = false;
-          refreshImageState = false;
-          employeeFormState.isEmployeeEdit = false;
-          employeeFormState.dialogType = 'info';
-          await fetchListEmployee();
-        }
-      }
-    "
-  >
-    <template #title>
-      <span
-        v-if="!employeeFormState.dialogModal"
-        class="justify-center flex text-bold"
-      >
-        {{ $t('general.image') }}
-        {{
-          $i18n.locale === 'eng'
-            ? `${currentFromDataEmployee.firstNameEN} ${currentFromDataEmployee.lastNameEN}`
-            : `${currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastName}`
-        }}
-      </span>
-    </template>
-    <template #error>
-      <div class="full-height full-width" style="background: white">
-        <div
-          class="full-height full-width flex justify-center items-center"
-          style="background: #ee4367"
-        >
-          <q-img
-            :src="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
-            fit="contain"
-            style="height: 100%"
-          />
-        </div>
-      </div>
-    </template>
-  </ImageUploadDialog>
-  <!-- นายจ้าง edit customer -->
-  <DrawerInfo
-    hide-action
-    v-model:drawer-open="customerFormState.drawerModal"
-    :title="
-      customerFormData.customerType === 'CORP' &&
-      customerFormData.customerBranch
-        ? customerFormData.customerBranch[0]?.registerName || '-'
-        : (customerFormData.customerBranch[0]?.namePrefix
-            ? $t(
-                'customer.form.prefix.' +
-                  customerFormData.customerBranch[0]?.namePrefix,
-              ) + ' '
-            : '') + customerNameInfo || '-'
-    "
-    :badge-label="
-      customerFormData.customerType === 'CORP'
-        ? $t('customer.employerLegalEntity')
-        : $t('customer.employerNaturalPerson')
-    "
-    :badge-style="
-      customerFormData.customerType === 'CORP'
-        ? `color: var(--${$q.dark.isActive ? 'violet-10' : 'violet-11'}); background: hsl(var(--${$q.dark.isActive ? 'violet-10-hsl' : 'violet-11-hsl'})/0.15)`
-        : `color: var(--${$q.dark.isActive ? 'teal-8' : 'teal-10'}); background: hsl(var(--${$q.dark.isActive ? 'teal-8-hsl' : 'teal-10-hsl'})/0.15)`
-    "
-    :close="
-      () => {
-        resetScrollBar('customer-form-content');
-      }
-    "
-    :submit="
-      async () => {
-        await customerFormStore.submitFormCustomer();
-        customerFormState.readonly = true;
-        notify('create', $t('general.success'));
-        await fetchListCustomer();
-      }
-    "
-    :show="
-      async () => {
-        // await fetchListOfOptionBranch();
-        // customerFormStore.resetForm(true);
-      }
-    "
-    :before-close="
-      () => {
-        if (customerFormStore.isFormDataDifferent()) {
-          customerConfirmUnsave();
-          return true;
-        } else {
-          fetchListCustomer();
-          customerFormState.branchIndex = -1;
-          customerFormStore.resetForm(true);
-        }
-        return false;
-      }
-    "
-  >
-    <div class="column full-height">
-      <div
-        :class="{
-          'q-mx-lg q-my-md': $q.screen.gt.sm,
-          'q-mx-md q-my-sm': !$q.screen.gt.sm,
-        }"
-      >
-        <ProfileBanner
-          v-if="customerFormData.customerBranch !== undefined"
-          :prefix="customerFormData.registeredBranchId"
-          :active="customerFormData.status !== 'INACTIVE'"
-          hide-fade
-          use-toggle
-          v-model:toggle-status="customerFormData.status"
-          :toggle-title="$t('status.title')"
-          :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
-          :img="
-            `${baseUrl}/customer/${customerFormState.editCustomerId}/image/${customerFormData.selectedImage}`.concat(
-              refreshImageState ? `?ts=${Date.now()}` : '',
-            ) || null
-          "
-          :fallback-img="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
-          :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
-          :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
-          :icon="
-            customerFormData.customerType === 'PERS'
-              ? 'mdi-account-plus-outline'
-              : 'mdi-office-building-outline'
-          "
-          :title="
-            customerFormData.customerType === 'PERS'
-              ? setPrefixName(
-                  {
-                    namePrefix: customerFormData.customerBranch[0]?.namePrefix,
-                    firstName: customerFormData.customerBranch[0]?.firstName,
-                    lastName: customerFormData.customerBranch[0]?.lastName,
-                    firstNameEN:
-                      customerFormData.customerBranch[0]?.firstNameEN,
-                    lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
-                  },
-                  { locale },
-                )
-              : customerFormData.customerBranch[0]?.registerName
-          "
-          :caption="
-            customerFormData.customerType === 'PERS'
-              ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
-              : customerFormData.customerBranch[0]?.registerNameEN
-          "
-          @view="
-            () => {
-              customerFormState.imageDialog = true;
-              customerFormState.isImageEdit = false;
-            }
-          "
-          @edit="
-            customerFormState.imageDialog = customerFormState.isImageEdit = true
-          "
-          @update:toggle-status="
-            async (v) => {
-              if (!customerFormState.editCustomerId) return;
-              await triggerChangeStatus(customerFormState.editCustomerId, v);
-            }
-          "
-        />
-      </div>
-
-      <div
-        style="flex: 1; width: 100%; overflow-y: auto"
-        class="column"
-        id="customer-form"
-        :class="{
-          'q-px-lg q-pb-lg': $q.screen.gt.sm,
-          'q-px-md q-pb-sm': !$q.screen.gt.sm,
-        }"
-      >
-        <div class="col full-width surface-1 rounded bordered row">
-          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
-            <div class="q-py-md q-pl-md q-pr-sm">
-              <SideMenu
-                :menu="[
-                  {
-                    name: $t('form.field.basicInformation'),
-                    anchor: 'form-basic-info-customer',
-                  },
-                  {
-                    name: $t('customer.form.group.branch'),
-                    anchor: 'form-branch-customer-branch',
-                    useBtn: true,
-                  },
-
-                  ...(customerFormData.customerBranch?.map((v, i) => ({
-                    name:
-                      i === 0
-                        ? $t('customer.form.headQuarters.title')
-                        : $t('customer.form.branch.title', {
-                            name: i,
-                          }),
-                    anchor: `form-branch-customer-no-${i}`,
-                    sub: true,
-                  })) || []),
-                ]"
-                background="transparent"
-                :active="{
-                  background: 'hsla(var(--blue-6-hsl) / .2)',
-                  foreground: 'var(--blue-6)',
-                }"
-                scroll-element="#customer-form-content"
-              >
-                <template v-slot:btn-form-branch-customer-branch>
-                  <q-btn
-                    dense
-                    flat
-                    icon="mdi-plus"
-                    size="sm"
-                    rounded
-                    padding="0px 0px"
-                    style="color: var(--stone-9)"
-                    @click.stop="customerFormStore.addCurrentCustomerBranch()"
-                    v-if="
-                      customerFormState.branchIndex === -1 &&
-                      !!customerFormState.editCustomerId &&
-                      customerFormState.dialogType !== 'create'
-                    "
-                    :disabled="!customerFormState.readonly"
-                  />
-                </template>
-              </SideMenu>
-            </div>
-          </div>
-
-          <div
-            class="col-12 col-md-10"
-            :class="{
-              'q-py-md q-pr-md ': $q.screen.gt.sm,
-              'q-pa-sm': !$q.screen.gt.sm,
-            }"
-            id="customer-form-content"
-            style="height: 100%; max-height: 100%; overflow-y: auto"
-          >
-            <EmployerFormBasicInfo
-              v-if="
-                customerFormData.customerBranch !== undefined &&
-                customerFormData.customerBranch.length > 0
-              "
-              :readonly="
-                (customerFormState.dialogType === 'edit' &&
-                  customerFormState.readonly === true) ||
-                customerFormState.dialogType === 'info'
-              "
-              :hide-action="customerFormData.status === 'INACTIVE'"
-              :action-disabled="customerFormState.branchIndex !== -1"
-              id="form-basic-info-customer"
-              :onCreate="customerFormState.dialogType === 'create'"
-              @edit="
-                ((customerFormState.dialogType = 'edit'),
-                (customerFormState.readonly = false))
-              "
-              @cancel="() => customerFormUndo(false)"
-              @delete="
-                customerFormState.editCustomerId &&
-                deleteCustomerById(
-                  customerFormState.editCustomerId,
-                  async () => await fetchListCustomer(true, $q.screen.xs),
-                )
-              "
-              :customer-type="customerFormData.customerType"
-              v-model:registered-branch-id="customerFormData.registeredBranchId"
-              v-model:customer-name="customerNameInfo"
-              v-model:register-name="
-                customerFormData.customerBranch[0].registerName
-              "
-              v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
-              v-model:legal-person-no="
-                customerFormData.customerBranch[0].legalPersonNo
-              "
-              v-model:business-type="
-                customerFormData.customerBranch[0].businessTypeId
-              "
-              v-model:job-position="
-                customerFormData.customerBranch[0].jobPosition
-              "
-              v-model:telephone-no="
-                customerFormData.customerBranch[0].telephoneNo
-              "
-              v-model:branch-options="registerAbleBranchOption"
-            />
-
-            <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
-              <div
-                class="col-12 text-weight-bold text-body1 row items-center q-mt-lg"
-              >
-                <q-icon
-                  flat
-                  size="xs"
-                  class="q-pa-sm rounded q-mr-xs"
-                  color="info"
-                  name="mdi-briefcase-outline"
-                  style="background-color: var(--surface-3)"
-                />
-                <span>{{ $t('customer.form.group.branch') }}</span>
-              </div>
-
-              <template
-                v-for="(_, idx) in customerFormData.customerBranch"
-                :key="idx"
-              >
-                <q-form
-                  class="full-width q-mb-xl"
-                  v-if="customerFormData.customerBranch"
-                  greedy
-                  @submit.prevent="
-                    async () => {
-                      if (!customerFormData.customerBranch) return;
-                      if (!customerFormState.editCustomerId) return;
-
-                      if (customerFormData.customerType === 'PERS') {
-                        tabFieldRequired.main = [
-                          'citizenId',
-                          'namePrefix',
-                          'firstName',
-                          'firstNameEN',
-                          'lastName',
-                          'lastNameEN',
-                          'gender',
-                          'birthDate',
-                        ];
-                      }
-                      if (customerFormData.customerType === 'CORP') {
-                        tabFieldRequired.main = [
-                          'legalPersonNo',
-                          'registerName',
-                        ];
-                      }
-
-                      let tapIsUndefined = validateTabField(
-                        customerFormData.customerBranch?.[idx],
-                        tabFieldRequired,
-                      );
-
-                      if (tapIsUndefined.length > 0) {
-                        return dialog({
-                          color: 'warning',
-                          icon: 'mdi-alert',
-                          title: t('dialog.title.incompleteDataEntry'),
-                          actionText: t('general.ok'),
-                          persistent: true,
-                          message: t('dialog.message.incompleteDataEntry', {
-                            tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
-                          }),
-                          action: async () => {
-                            return;
-                          },
-                        });
-                      }
-                      if (!customerFormData.customerBranch[idx].id) {
-                        await customerStore.createBranch({
-                          ...customerFormData.customerBranch[idx],
-                          customerId: customerFormState.editCustomerId,
-                        });
-                      } else {
-                        await customerStore.editBranchById(
-                          customerFormData.customerBranch[idx].id || '',
-                          {
-                            ...customerFormData.customerBranch[idx],
-                            id: undefined,
-                          },
-                        );
-                      }
-
-                      customerFormData.customerBranch[idx].file?.forEach(
-                        async (v) => {
-                          if (!v.file) return;
-
-                          const ext = v.file.name.split('.').at(-1);
-                          let filename = v.group + '-' + new Date().getTime();
-                          if (ext) filename += `.${ext}`;
-
-                          const res = await customerStore.putAttachment({
-                            branchId:
-                              customerFormData.customerBranch?.[idx].id || '',
-                            file: v.file,
-                            filename,
-                          });
-
-                          if (res) {
-                            await customerFormStore.assignFormData(
-                              customerFormState.editCustomerId,
-                            );
-                          }
-                        },
-                      );
-
-                      await customerFormStore.assignFormData(
-                        customerFormState.editCustomerId,
-                      );
-
-                      customerFormStore.resetForm();
-                    }
-                  "
-                >
-                  <EmployerFormBranch
-                    prefix-id="info"
-                    v-if="!!customerFormState.editCustomerId"
-                    :index="idx"
-                    :hide-action="customerFormData.status === 'INACTIVE'"
-                    v-model:customer="customerFormData"
-                    v-model:customer-branch="
-                      customerFormData.customerBranch[idx]
-                    "
-                    :customer-type="customerFormData.customerType"
-                    :action-disabled="
-                      !customerFormState.readonly ||
-                      (customerFormState.branchIndex !== -1 &&
-                        customerFormState.branchIndex !== idx)
-                    "
-                    :hide-delete="!canAccess('customer', 'edit')"
-                    :readonly="customerFormState.branchIndex !== idx"
-                    @edit="() => (customerFormState.branchIndex = idx)"
-                    @cancel="() => customerFormUndo(false)"
-                    @delete="
-                      async () => {
-                        if (!!customerFormData.customerBranch?.[idx].id) {
-                          const action = await deleteCustomerBranchById(
-                            customerFormData.customerBranch[idx].id || '',
-                          );
-                          if (action) {
-                            await customerFormStore.assignFormData(
-                              customerFormState.editCustomerId,
-                            );
-                          }
-                          customerFormStore.resetForm();
-                        }
-                      }
-                    "
-                    @save="() => {}"
-                  />
-                </q-form>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </DrawerInfo>
-
-  <!-- ลูกจ้าง edit employee -->
-  <DrawerInfo
-    v-if="!!employeeFormState.currentEmployee"
-    hide-action
-    v-model:drawer-open="employeeFormState.drawerModal"
-    :close="
-      () => {
-        resetScrollBar('drawer-employee-form-content');
-      }
-    "
-    :title="
-      setPrefixName(
-        {
-          namePrefix: employeeFormState.currentEmployee.namePrefix,
-          firstName:
-            employeeFormState.currentEmployee.firstName ||
-            employeeFormState.currentEmployee.firstNameEN,
-          lastName: employeeFormState.currentEmployee.lastName,
-          firstNameEN: employeeFormState.currentEmployee.firstNameEN,
-          lastNameEN: employeeFormState.currentEmployee.lastNameEN,
-        },
-        { locale },
-      )
-    "
-    :badge-class="
-      currentFromDataEmployee.gender === 'male'
-        ? 'app-bg-male text-white'
-        : currentFromDataEmployee.gender === 'female'
-          ? 'app-bg-female text-white'
-          : ''
-    "
-    :submit="
-      async () => {
-        if (employeeFormState.currentTab === 'personalInfo') {
-          await employeeFormStore.submitPersonal();
-          employeeFormState.dialogType = 'info';
-          employeeFormState.isEmployeeEdit = false;
-        }
-
-        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();
-        }
-
-        if (route.name !== 'CustomerBranchManagement') {
-          await fetchListEmployee(
-            currentTab === 'employer'
-              ? {
-                  page: 1,
-                  pageSize: 999,
-                  customerId: customerFormState.currentCustomerId,
-                }
-              : { mobileFetch: $q.screen.xs },
-          );
-        }
-
-        employeeFormState.isEmployeeEdit = false;
-      }
-    "
-    :before-close="
-      () => {
-        if (employeeFormStore.isFormDataDifferent()) {
-          employeeConfirmUnsave();
-          return true;
-        }
-
-        employeeFormState.currentTab = 'personalInfo';
-        return false;
-      }
-    "
-  >
-    <div class="column full-height">
-      <div
-        :class="{
-          'q-mx-lg q-my-md': $q.screen.gt.sm,
-          'q-mx-md q-my-sm': !$q.screen.gt.sm,
-        }"
-      >
-        <ProfileBanner
-          :prefix="employeeFormState.currentEmployee.firstName"
-          hideFade
-          @update:current-tab="
-            () => {
-              employeeFormState.isImageEdit = false;
-              employeeFormStore.resetFormDataEmployee();
-              employeeFormState.isEmployeeEdit = false;
-              employeeFormState.dialogType = 'info';
-              employeeFormState.currentIndexPassport = -1;
-            }
-          "
-          @view="
-            () => {
-              employeeFormState.imageDialog = true;
-              employeeFormState.isImageEdit = false;
-            }
-          "
-          @edit="
-            employeeFormState.imageDialog = employeeFormState.isImageEdit = true
-          "
-          @update:toggle-status="
-            (v) => {
-              if (currentFromDataEmployee.id !== undefined)
-                triggerChangeStatus(
-                  currentFromDataEmployee.id,
-                  v,
-                  currentFromDataEmployee.firstNameEN,
-                );
-            }
-          "
-          :active="currentFromDataEmployee.status !== 'INACTIVE'"
-          use-toggle
-          color="white"
-          icon="mdi-account-outline"
-          :bg-color="
-            employeeFormState.profileUrl
-              ? 'white'
-              : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
-          "
-          v-model:current-tab="employeeFormState.currentTab"
-          v-model:toggle-status="currentFromDataEmployee.status"
-          fallback-cover="/images/employee-banner.png"
-          :title="
-            employeeFormState.currentEmployee
-              ? setPrefixName(
-                  {
-                    namePrefix: employeeFormState.currentEmployee.namePrefix,
-                    firstName:
-                      employeeFormState.currentEmployee.firstName ||
-                      employeeFormState.currentEmployee.firstNameEN,
-                    lastName: employeeFormState.currentEmployee.lastName,
-                    firstNameEN: employeeFormState.currentEmployee.firstNameEN,
-                    lastNameEN: employeeFormState.currentEmployee.lastNameEN,
-                  },
-                  { locale },
-                )
-              : '-'
-          "
-          :caption="currentFromDataEmployee.code"
-          :img="
-            `${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') },
-          ]"
-          :toggle-title="$t('status.title')"
-        />
-      </div>
-      <div
-        style="flex: 1; width: 100%; overflow-y: auto"
-        class="column relative-position"
-        id="drawer-employee-form"
-        :class="{
-          'q-px-lg q-pb-lg': $q.screen.gt.sm,
-          'q-px-md q-pb-sm': !$q.screen.gt.sm,
-        }"
-      >
-        <div
-          class="col full-width surface-1 rounded bordered row"
-          :key="String(!employeeFormState.isEmployeeEdit)"
-        >
-          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
-            <div class="q-py-md q-pl-md q-pr-sm">
-              <SideMenu
-                :menu="
-                  [
-                    {
-                      name: $t('form.field.basicInformation'),
-                      anchor: 'drawer-form-information',
-                      tab: 'personalInfo',
-                    },
-                    {
-                      name: $t('customerEmployee.form.group.personalInfo'),
-                      anchor: 'drawer-form-personal',
-                      tab: 'personalInfo',
-                    },
-                    {
-                      name: $t('form.address'),
-                      anchor: 'drawer-form-personal-address',
-                      tab: 'personalInfo',
-                    },
-
-                    {
-                      name: $t('general.uploadFile'),
-                      anchor: 'drawer-upload-file',
-                      tab: 'personalInfo',
-                    },
-
-                    {
-                      name: $t('customerEmployee.form.group.passport'),
-                      anchor: 'drawer-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: `drawer-employee-employeePassport-${i}`,
-                        tab: 'passport',
-                        sub: true,
-                      }),
-                    ) || []),
-
-                    {
-                      name: $t('customerEmployee.form.group.visa'),
-                      anchor: 'drawer-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: `drawer-employee-visa-${i}`,
-                      tab: 'visa',
-                      sub: true,
-                    })) || []),
-
-                    {
-                      name: $t('customerEmployee.form.group.healthCheck'),
-                      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 }),
-                        anchor: `drawer-employee-checkup-${i}`,
-                        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',
-                      tab: 'other',
-                    },
-                  ].filter((v) => v.tab === employeeFormState.currentTab)
-                "
-                background="transparent"
-                :active="{
-                  background: 'hsla(var(--blue-6-hsl) / .2)',
-                  foreground: 'var(--blue-6)',
-                }"
-                scroll-element="#drawer-employee-form-content"
-              >
-                <template v-slot:btn-drawer-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-drawer-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-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>
-          <div
-            class="col-12 col-md-10 row"
-            :class="{
-              'q-py-md q-pr-md ': $q.screen.gt.sm,
-              'q-pa-sm': !$q.screen.gt.sm,
-            }"
-            id="drawer-employee-form-content"
-            style="height: 100%; overflow-y: auto"
-          >
-            <template v-if="employeeFormState.currentTab === 'personalInfo'">
-              <div
-                class="rounded row q-py-sm q-mx-lg q-px-md"
-                style="position: absolute; z-index: 999; right: 0; top: 0"
-                v-if="currentFromDataEmployee.status !== 'INACTIVE'"
-              >
-                <div class="surface-1 row rounded">
-                  <UndoButton
-                    v-if="employeeFormState.isEmployeeEdit"
-                    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 &&
-                      canAccess('customer', 'edit')
-                    "
-                    id="btn-info-basic-delete"
-                    icon-only
-                    @click="
-                      () =>
-                        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="drawer-form-information"
-                prefix-id="drawer-info-employee"
-                dense
-                outlined
-                title="form.field.basicInformation"
-                :readonly="!employeeFormState.isEmployeeEdit"
-                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"
-                class="q-mb-xl"
-              />
-              <FormPerson
-                id="drawer-form-personal"
-                prefix-id="drawer-info-employee"
-                dense
-                outlined
-                employee
-                separator
-                title="customerEmployee.form.group.personalInfo"
-                :readonly="!employeeFormState.isEmployeeEdit"
-                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
-                id="drawer-form-personal-address"
-                employee
-                disabledRule
-                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"
-                v-model:same-with-employer="
-                  employeeFormState.formDataEmployeeSameAddr
-                "
-                :readonly="!employeeFormState.isEmployeeEdit"
-                :disabledRule="!employeeFormState.isEmployeeEdit"
-                prefix-id="drawer-info-personnel"
-                dense
-                class="q-mb-xl"
-              />
-
-              <div class="row" id="drawer-upload-file">
-                <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>
-              </div>
-              <UploadFileGroup
-                v-model:current-id="currentFromDataEmployee.id"
-                v-model="currentFromDataEmployee.file"
-                hide-action
-                :readonly="!employeeFormState.isEmployeeEdit"
-                :group-list="uploadFileListEmployee"
-                :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 (
-                        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 (mrz) {
-                        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: [] };
-                  }
-                "
-                :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,
-                      });
-                    }
-                  }
-                "
-                :delete-item="
-                  async (obj) => {
-                    let status: boolean = false;
-                    const res = await employeeStore.delMeta({
-                      parentId: currentFromDataEmployee.id || '',
-                      group: obj.group,
-                      metaId: obj._meta.id,
-                    });
-
-                    if (res) {
-                      status = true;
-                    }
-
-                    await employeeFormStore.assignFormDataEmployee(
-                      currentFromDataEmployee.id,
-                    );
-
-                    return status;
-                  }
-                "
-                :save="
-                  async (
-                    group: 'passport' | 'visa' | 'attachment',
-                    _meta: any,
-                    file: File | undefined,
-                  ) => {
-                    let status: boolean = false;
-                    if (group === 'passport' || group === 'visa') {
-                      if (file !== undefined && currentFromDataEmployee.id) {
-                        const res = await employeeStore.postMeta({
-                          parentId: currentFromDataEmployee.id || '',
-                          group,
-                          meta: _meta,
-                          file,
-                        });
-
-                        if (res) {
-                          status = true;
-                        }
-                      } else {
-                        const {
-                          id,
-                          employeeId,
-                          createdAt,
-                          updatedAt,
-                          ...payload
-                        } = _meta;
-
-                        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;
-                  }
-                "
-                :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}-${dateFormat(i.expireDate)}` || '',
-                          group: group,
-                          url: await employeeStore.getFile({
-                            parentId: currentFromDataEmployee.id || '',
-                            group,
-                            fileId: i.id,
-                          }),
-                          file: undefined,
-                        };
-                      });
-
-                      return await waitAll(tempValue);
-                    } else {
-                      const res = await employeeStore.listAttachment({
-                        parentId: currentFromDataEmployee.id || '',
-                      });
-
-                      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 }">
-                  <!-- <FormCitizen
-                    v-if="mode === 'citizen' && meta"
-                    orc
-                    ra
-                    :readonly="!isEdit"
-                    v-model:citizen-id="meta.citizenId"
-                    v-model:birth-date="meta.birthDate"
-                    v-model:first-name="meta.firstName"
-                    v-model:first-name-en="meta.firstNameEN"
-                    v-model:last-name="meta.lastName"
-                    v-model:last-name-en="meta.lastNameEN"
-                    v-model:address="meta.address"
-                  /> -->
-
-                  <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"
-                  ></FormEmployeePassport>
-                  <FormEmployeeVisa
-                    v-if="mode === 'visa' && meta"
-                    prefix-id="drawer-info-employee"
-                    id="form-visa"
-                    ocr
-                    dense
-                    outlined
-                    :title="$t('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"
-                    v-model:report-date="meta.reportDate"
-                  />
-
-                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
-                </template>
-              </UploadFileGroup>
-            </template>
-
-            <template v-if="employeeFormState.currentTab === 'passport'">
-              <div class="q-gutter-sm full-width column no-wrap">
-                <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-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="employeeFormState.currentIndexPassport !== -1"
-                    @click.stop="employeeFormStore.addPassport()"
-                  />
-                  <!-- :disabled="
-                      currentFromDataEmployee.employeePassport?.filter(
-                        (item) => {
-                          if (item.id === undefined) {
-                            return false;
-                          }
-                          return true;
-                        },
-                      ).length === 0 &&
-                      employeeFormState.currentIndexPassport === -1
-                        ? false
-                        : true
-                    " -->
-                </div>
-
-                <div class="col self-center">
-                  <div
-                    class="full-width full-height flex flex-center col"
-                    v-if="
-                      currentFromDataEmployee.employeePassport?.length === 0
-                    "
-                  >
-                    <NoData />
-                  </div>
-
-                  <template
-                    v-for="(
-                      value, index
-                    ) in currentFromDataEmployee.employeePassport"
-                    :key="index"
-                  >
-                    <div class="col" v-if="value !== undefined">
-                      <FormEmployeePassport
-                        prefix-id="drawer-info-employee"
-                        id="form-passport"
-                        hide-title
-                        dense
-                        outlined
-                        separator
-                        :title="$t('customerEmployee.form.group.passport')"
-                        :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"
-                        v-model:file="value.file"
-                      >
-                        <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="
-                                () => {
-                                  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"
-                              :disabled="
-                                !(
-                                  employeeFormState.currentIndexPassport === -1
-                                ) &&
-                                !(
-                                  employeeFormState.currentIndexPassport ===
-                                  index
-                                )
-                              "
-                            />
-                          </div>
-                        </template>
-                      </FormEmployeePassport>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </template>
-
-            <template v-if="employeeFormState.currentTab === 'visa'">
-              <div class="q-gutter-sm full-width column no-wrap">
-                <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-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>
-                <div class="col self-center">
-                  <div
-                    v-if="currentFromDataEmployee.employeeVisa?.length === 0"
-                    class="full-width full-height col flex flex-center"
-                  >
-                    <NoData />
-                  </div>
-                  <FormEmployeeVisa
-                    v-for="(
-                      value, index
-                    ) in currentFromDataEmployee.employeeVisa"
-                    :key="index"
-                    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"
-                    v-model:report-date="value.reportDate"
-                  >
-                    <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 &&
-                              !(employeeFormState.currentIndexVisa === -1) &&
-                              employeeFormState.currentIndexVisa === index)
-                          "
-                          id="btn-info-basic-delete"
-                          icon-only
-                          @click.stop="
-                            () => {
-                              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"
-                          :disabled="
-                            !(employeeFormState.currentIndexVisa === -1) &&
-                            !(employeeFormState.currentIndexVisa === index)
-                          "
-                        />
-                      </div>
-                    </template>
-                  </FormEmployeeVisa>
-                </div>
-              </div>
-            </template>
-
-            <template v-if="employeeFormState.currentTab === 'healthCheck'">
-              <div class="q-gutter-sm full-width column">
-                <div
-                  class="q-pb-sm text-weight-bold text-body1 row items-center 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>
-
-                <div class="col self-center">
-                  <div
-                    v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
-                    class="full-width full-height col flex flex-center"
-                  >
-                    <NoData />
-                  </div>
-                  <FormEmployeeHealthCheck
-                    v-if="employeeFormState.currentTab === 'healthCheck'"
-                    id="drawer-form-checkup"
-                    prefix-id="drawer-employee"
-                    dense
-                    outlined
-                    :hide-action="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'));
-                      }
-                    "
-                    @edit="
-                      (index) => {
-                        if (
-                          currentFromDataEmployee.employeeCheckup?.[index]
-                            .statusSave
-                        ) {
-                          employeeFormState.currentIndexCheckup = index;
-                          currentFromDataEmployee.employeeCheckup[
-                            index
-                          ].statusSave = false;
-                        }
-                      }
-                    "
-                    @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,
-                          fetch: async () =>
-                            await fetchListEmployee(
-                              currentTab === 'employer'
-                                ? {
-                                    page: 1,
-                                    pageSize: 999,
-                                    customerId:
-                                      customerFormState.currentCustomerId,
-                                  }
-                                : {
-                                    fetchStats: true,
-                                    mobileFetch: $q.screen.xs,
-                                  },
-                            ),
-                        });
-                      }
-                    "
-                  />
-                </div>
-              </div>
-            </template>
-            <template v-if="employeeFormState.currentTab === 'workHistory'">
-              <div class="q-gutter-sm full-width column">
-                <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-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>
-
-                <div class="col self-center">
-                  <div
-                    class="full-width full-height col flex flex-center"
-                    v-if="currentFromDataEmployee.employeeWork?.length === 0"
-                  >
-                    <NoData />
-                  </div>
-
-                  <FormEmployeeWorkHistory
-                    v-if="employeeFormState.currentTab === 'workHistory'"
-                    id="drawer-work-history"
-                    prefix-id="drawer-employee"
-                    dense
-                    :hide-action="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,
-                          fetch: async () =>
-                            await fetchListEmployee(
-                              currentTab === 'employer'
-                                ? {
-                                    page: 1,
-                                    pageSize: 999,
-                                    customerId:
-                                      customerFormState.currentCustomerId,
-                                  }
-                                : {
-                                    fetchStats: true,
-                                    mobileFetch: $q.screen.xs,
-                                  },
-                            ),
-                        });
-                      }
-                    "
-                    @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>
-            </template>
-            <template v-if="employeeFormState.currentTab === 'other'">
-              <FormEmployeeOther
-                :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                v-if="employeeFormState.currentTab === 'other'"
-                id="drawer-other"
-                prefix-id="drawer-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>
-    </div>
-  </DrawerInfo>
-
-  <DialogForm
-    :title="$t('general.historyEdit')"
-    hide-footer
-    v-model:modal="employeeHistoryDialog"
-  >
-    <div class="q-pa-md">
-      <HistoryEditComponent
-        v-if="employeeHistory"
-        v-model:history-list="employeeHistory"
-      />
-    </div>
-  </DialogForm>
 </template>
 
 <style scoped>
-.customer-row {
-  display: grid;
-  gap: var(--size-6);
-  transition: 0.3s ease-in-out;
-}
-
-.hover-card:hover {
-  cursor: pointer;
-  border-radius: 10px;
-  box-shadow: var(--shadow-3);
-}
-
 .slide-enter-active {
   transition: all 0.1s ease-out;
 }
@@ -6151,39 +844,6 @@ const emptyCreateDialog = ref(false);
   opacity: 0;
 }
 
-.employer-active {
-  background-color: hsla(var(--info-bg) / 0.1);
-  color: hsl(var(--info-bg));
-}
-
-.tags {
-  display: inline-block;
-  color: hsla(var(--_color) / 1);
-  background: hsla(var(--_color) / 0.15);
-  border-radius: var(--radius-2);
-  padding-inline: var(--size-2);
-}
-
-.tags__pink {
-  --_color: var(--pink-6-hsl);
-}
-
-.tags__purple {
-  --_color: var(--violet-11-hsl);
-}
-
-.tags__green {
-  --_color: var(--teal-10-hsl);
-}
-
-.dark .tags__purple {
-  --_color: var(--violet-10-hsl);
-}
-
-.dark .tags__green {
-  --_color: var(--teal-8-hsl);
-}
-
 .status-active {
   --_branch-status-color: var(--green-6-hsl);
 }
@@ -6195,54 +855,6 @@ const emptyCreateDialog = ref(false);
   opacity: 0.5;
 }
 
-.branch-card__icon {
-  background-color: hsla(var(--_branch-card-bg) / 0.15);
-  border-radius: 50%;
-  padding: var(--size-1);
-  position: relative;
-  transform: rotate(45deg);
-
-  &::after {
-    content: ' ';
-    display: block;
-    block-size: 0.5rem;
-    aspect-ratio: 1;
-    position: absolute;
-    border-radius: 50%;
-    right: -0.1rem;
-    top: calc(50% - 0.25rem);
-    bottom: calc(50% - 0.25rem);
-    background-color: hsla(var(--_branch-status-color) / 1);
-  }
-
-  & :deep(.q-avatar) {
-    transform: rotate(-45deg);
-    color: hsla(var(--_branch-card-bg) / 1);
-  }
-}
-
-& .symbol-gender {
-  color: hsla(var(--_fg));
-
-  &.symbol-gender__male {
-    --_fg: var(--gender-male);
-  }
-
-  &.symbol-gender__female {
-    --_fg: var(--gender-female);
-  }
-}
-
-.btn-arrow-right {
-  transform: rotate(0deg);
-  transition: transform 0.3s ease;
-}
-
-.btn-arrow-right.active {
-  transform: rotate(90deg);
-  transition: transform 0.3s ease;
-}
-
 .active-tab-sm {
   color: hsla(var(--info-bg) / 1);
   background-color: hsla(var(--info-bg) / 0.1);
diff --git a/src/pages/03_customer-management/TabCustomer.vue b/src/pages/03_customer-management/TabCustomer.vue
new file mode 100644
index 00000000..38371083
--- /dev/null
+++ b/src/pages/03_customer-management/TabCustomer.vue
@@ -0,0 +1,2050 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useRoute, useRouter } from 'vue-router';
+
+import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
+import KebabAction from 'src/components/shared/KebabAction.vue';
+import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
+import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
+import { DialogContainer, DialogHeader } from 'components/dialog';
+import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
+import EmptyAddButton from 'components/AddButton.vue';
+import {
+  PaginationComponent,
+  PaginationPageSize,
+  ImageUploadDialog,
+  TooltipComponent,
+  ProfileBanner,
+  DialogForm,
+  DrawerInfo,
+  ItemCard,
+  SideMenu,
+  NoData,
+} from 'src/components';
+
+import useCustomerStore from 'src/stores/customer';
+import useOptionStore from 'src/stores/options';
+import { formatAddress } from 'src/utils/address';
+import { Status } from 'src/stores/types';
+import { useCustomerForm, useEmployeeForm } from './form';
+import {
+  baseUrl,
+  setPrefixName,
+  waitAll,
+  dialog,
+  notify,
+  resetScrollBar,
+  capitalizeFirstLetter,
+  dialogCheckData,
+  canAccess,
+} from 'src/stores/utils';
+import {
+  CustomerStats,
+  Customer,
+  CustomerBranch,
+  CustomerBranchCreate,
+  CustomerType,
+} from 'stores/customer/types';
+import {
+  columnsCustomer,
+  columnsEmployee,
+  uploadFileListEmployee,
+  columnsAttachment,
+  dialogCreateCustomerItem,
+} from './constant';
+import { Employee } from 'src/stores/employee/types';
+import { useNavigator } from 'src/stores/navigator';
+import useFlowStore from 'src/stores/flow';
+import useEmployeeStore from 'src/stores/employee';
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const flowStore = useFlowStore();
+const navigatorStore = useNavigator();
+const optionStore = useOptionStore();
+const customerFormStore = useCustomerForm();
+const customerStore = useCustomerStore();
+const employeeStore = useEmployeeStore();
+const employeeFormStore = useEmployeeForm();
+const { t, locale } = useI18n();
+const {
+  fetchListOfOptionBranch,
+  customerFormUndo,
+  customerConfirmUnsave,
+  deleteCustomerById,
+  validateTabField,
+  deleteCustomerBranchById,
+} = customerFormStore;
+const {
+  state: customerFormState,
+  currentFormData: customerFormData,
+  registerAbleBranchOption,
+  tabFieldRequired,
+  onCreateImageList,
+} = storeToRefs(customerFormStore);
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  statusEmployeeCreate,
+  refreshImageState,
+} = storeToRefs(employeeFormStore);
+
+const statsCustomerType = defineModel<CustomerStats>('statsCustomerType', {
+  default: {
+    CORP: 0,
+    PERS: 0,
+  },
+});
+
+const props = defineProps<{
+  currentTab: 'employee' | 'employer';
+  currentStatus: Status | 'All';
+  gridView: boolean;
+  inputSearch: string;
+  searchDate: string[];
+  fieldSelected: string[];
+  filterBusinessType: string;
+  filterAddress: {
+    provinceId: string;
+    districtId: string;
+    subDistrictId: string;
+  };
+  fetchImageList: (
+    id: string,
+    selectedName: string,
+    type: 'customer' | 'employee',
+  ) => Promise<void>;
+  triggerChangeStatus: (
+    id: string,
+    status: string,
+    employeeName?: string,
+  ) => void;
+}>();
+
+defineExpose({
+  openSpecificCustomer,
+  fetchListCustomer,
+  toggleStatusCustomer,
+});
+
+const emptyCreateDialog = ref(false);
+const currentPageCustomer = ref<number>(1);
+const maxPageCustomer = ref<number>(1);
+const pageSize = ref<number>(30);
+const currentBtnOpen = ref<boolean[]>([]);
+const currentCustomer = ref<Customer>();
+const listEmployee = ref<Employee[]>([]);
+const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
+const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
+
+const fieldCustomer = [
+  'all',
+  'customerLegalEntity',
+  'customerNaturalPerson',
+] as const;
+const customerTypeSelected = defineModel<{
+  label: string;
+  value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson';
+}>('customerTypeSelected');
+const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
+
+const customerNameInfo = computed(() => {
+  if (customerFormData.value.customerBranch === undefined) return;
+
+  const name =
+    locale.value === 'eng'
+      ? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
+      : `${customerFormData.value.customerBranch[0]?.firstName} ${customerFormData.value.customerBranch[0]?.lastName}`;
+  return name || '-';
+});
+
+async function createCustomerForm(customerType: 'CORP' | 'PERS') {
+  customerFormState.value.dialogModal = true;
+  customerFormState.value.dialogType = 'create';
+  customerFormData.value.customerType =
+    customerType === 'CORP' ? CustomerType.Corporate : CustomerType.Person;
+}
+
+async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
+  const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
+
+  const resultList = await customerStore.fetchList({
+    includeBranch: true,
+    page: mobileFetch ? 1 : currentPageCustomer.value,
+    pageSize: mobileFetch
+      ? listCustomer.value.length +
+        (total === listCustomer.value.length ? 1 : 0)
+      : pageSize.value,
+    status:
+      props.currentStatus === 'All'
+        ? undefined
+        : props.currentStatus === 'ACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+    query: props.inputSearch,
+    businessType: props.filterBusinessType,
+    province: props.filterAddress.provinceId || undefined,
+    district: props.filterAddress.districtId || undefined,
+    subDistrict: props.filterAddress.subDistrictId || undefined,
+    startDate: props.searchDate[0],
+    endDate: props.searchDate[1],
+    customerType: (
+      {
+        all: undefined,
+        customerLegalEntity: CustomerType.Corporate,
+        customerNaturalPerson: CustomerType.Person,
+      } as const
+    )[customerTypeSelected.value.value],
+  });
+
+  if (resultList) {
+    // currentPageCustomer.value = resultList.page;
+    maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
+    $q.screen.xs && !mobileFetch
+      ? listCustomer.value.push(...resultList.result)
+      : (listCustomer.value = resultList.result);
+  }
+
+  if (fetchStats) {
+    statsCustomerType.value = await customerStore
+      .getStatsCustomer()
+      .then((value) => (value ? value : { CORP: 0, PERS: 0 }));
+  }
+}
+
+async function editCustomerForm(id: string) {
+  await customerFormStore.assignFormData(id);
+  await fetchListOfOptionBranch();
+  await props.fetchImageList(
+    id,
+    customerFormData.value.selectedImage || '',
+    'customer',
+  );
+  customerFormState.value.branchIndex = -1;
+  customerFormState.value.dialogType = 'edit';
+  customerFormState.value.drawerModal = true;
+  customerFormState.value.editCustomerId = id;
+}
+
+async function editEmployeeFormPersonal(id: string) {
+  await employeeFormStore.assignFormDataEmployee(id);
+  await props.fetchImageList(
+    id,
+    currentFromDataEmployee.value.selectedImage || '',
+    'employee',
+  );
+
+  employeeFormState.value.isEmployeeEdit = true;
+  employeeFormState.value.dialogType = 'edit';
+  employeeFormState.value.drawerModal = true;
+}
+
+async function openSpecificCustomer(id: string) {
+  await customerFormStore.assignFormData(id);
+  await props.fetchImageList(
+    id,
+    customerFormData.value.selectedImage || '',
+    'customer',
+  );
+  customerFormState.value.branchIndex = -1;
+  customerFormState.value.drawerModal = true;
+  customerFormState.value.editCustomerId = id;
+  customerFormState.value.dialogType = 'info';
+}
+
+async function toggleStatusCustomer(id: string, status: boolean) {
+  const res = await customerStore.editById(id, {
+    status: !status ? 'ACTIVE' : 'INACTIVE',
+  });
+  if (res && customerFormState.value.drawerModal)
+    customerFormData.value.status = res.status;
+
+  await fetchListCustomer(false, $q.screen.xs);
+  flowStore.rotate();
+}
+
+async function fetchListEmployee(opt?: {
+  fetchStats?: boolean;
+  page?: number;
+  pageSize?: number;
+  customerId?: string;
+  mobileFetch?: boolean;
+}) {
+  // ลูกจ้างภายในนายจ้าง
+  const resultListEmployee = await employeeStore.fetchList({
+    customerId: opt.customerId,
+    page: 1,
+    pageSize: 9999,
+    passport: true,
+    visa: true,
+  });
+  if (resultListEmployee) {
+    listEmployee.value = resultListEmployee.result;
+  }
+}
+
+watch(
+  () => [
+    props.inputSearch,
+    props.searchDate,
+    props.currentStatus,
+    props.filterBusinessType,
+    props.filterAddress,
+    customerTypeSelected.value,
+    pageSize.value,
+  ],
+  async () => {
+    if (props.currentTab === 'employer') {
+      currentPageCustomer.value = 1;
+      currentBtnOpen.value = [];
+      listCustomer.value = [];
+      await fetchListCustomer(true);
+    }
+
+    customerFormState.value.currentCustomerId = undefined;
+    flowStore.rotate();
+  },
+  { deep: true },
+);
+
+watch(
+  () => customerFormData.value.image,
+  () => {
+    if (customerFormData.value.image !== null)
+      customerFormState.value.isImageEdit = true;
+  },
+);
+
+onMounted(async () => {
+  currentPageCustomer.value = 1;
+  currentBtnOpen.value = [];
+  listCustomer.value = [];
+  await fetchListCustomer(true);
+});
+</script>
+<template>
+  <q-splitter
+    v-model="splitPercent"
+    :limits="[0, 100]"
+    class="col full-width"
+    before-class="overflow-hidden"
+    after-class="overflow-hidden"
+    :disable="$q.screen.lt.sm"
+  >
+    <template v-slot:before>
+      <div
+        class="column q-pa-md surface-1 full-height full-width"
+        style="gap: var(--size-1)"
+      >
+        <q-item
+          v-for="v in fieldCustomer"
+          v-close-popup
+          clickable
+          :key="v"
+          dense
+          class="no-padding items-center rounded full-width"
+          active-class="employer-active"
+          :active="customerTypeSelected.value === v"
+          @click="customerTypeSelected = { label: v, value: v }"
+          :id="`btn-${v}`"
+        >
+          <span class="q-px-md ellipsis">
+            {{
+              $t(
+                {
+                  all: 'general.all',
+                  customerLegalEntity: 'customer.employerLegalEntity',
+                  customerNaturalPerson: 'customer.employerNaturalPerson',
+                }[v],
+              )
+            }}
+          </span>
+        </q-item>
+      </div>
+    </template>
+
+    <template v-slot:after>
+      <div class="column full-height no-wrap">
+        <!-- ไม่มีข้อมูล -->
+        <template
+          v-if="
+            statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
+            currentTab === 'employer'
+          "
+        >
+          <TooltipComponent
+            v-if="canAccess('customer', 'edit')"
+            class="self-end q-ma-md"
+            :title="'general.noData'"
+            :caption="'general.clickToCreate'"
+            imgSrc="personnel-table-"
+          />
+
+          <div class="row items-center justify-center" style="flex-grow: 1">
+            <EmptyAddButton
+              v-if="canAccess('customer', 'edit')"
+              :label="'general.add'"
+              :i18n-args="{
+                text: $t(`customer.${currentTab}`),
+              }"
+              @trigger="
+                () => {
+                  if (currentTab === 'employer') emptyCreateDialog = true;
+                }
+              "
+            />
+            <NoData v-else />
+          </div>
+        </template>
+
+        <!-- มีข้อมูล -->
+        <template
+          v-if="
+            listCustomer &&
+            statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
+            currentTab === 'employer'
+          "
+        >
+          <div
+            v-if="listCustomer.length === 0"
+            class="row col full-width items-center justify-center"
+            style="min-height: 250px"
+          >
+            <NoData :not-found="!!inputSearch" />
+          </div>
+
+          <div
+            v-if="listCustomer.length !== 0"
+            class="column scroll q-pa-md col"
+          >
+            <q-infinite-scroll
+              :offset="10"
+              @load="
+                (_, done) => {
+                  if (
+                    $q.screen.gt.xs ||
+                    currentPageCustomer === maxPageCustomer
+                  )
+                    return;
+                  currentPageCustomer = currentPageCustomer + 1;
+                  fetchListCustomer().then(() =>
+                    done(currentPageCustomer >= maxPageCustomer),
+                  );
+                }
+              "
+            >
+              <q-table
+                flat
+                bordered
+                :grid="gridView"
+                :rows="listCustomer"
+                :columns="columnsCustomer"
+                card-container-class="q-col-gutter-md"
+                row-key="name"
+                :rows-per-page-options="[0]"
+                hide-pagination
+                :visible-columns="fieldSelected"
+              >
+                <template v-slot:header="props">
+                  <q-tr
+                    style="background-color: hsla(var(--info-bg) / 0.07)"
+                    :props="props"
+                  >
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      {{ $t(col.label) }}
+                    </q-th>
+                    <q-th auto-width />
+                  </q-tr>
+                </template>
+
+                <template v-slot:body="props">
+                  <q-tr
+                    class="cursor-pointer"
+                    :class="{
+                      'app-text-muted': props.row.status === 'INACTIVE',
+                      'status-active': props.row.status !== 'INACTIVE',
+                      'status-inactive': props.row.status === 'INACTIVE',
+                    }"
+                    :id="`row-table-${props.row.id}`"
+                    :props="props"
+                    @click="
+                      $router.push(
+                        `/customer-management/${props.row.id}/branch`,
+                      )
+                    "
+                    :style="
+                      props.rowIndex % 2 !== 0
+                        ? $q.dark.isActive
+                          ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                          : `background: #f9fafc`
+                        : ''
+                    "
+                  >
+                    <q-td
+                      class="text-center"
+                      v-if="fieldSelected.includes('orderNumber')"
+                    >
+                      {{
+                        $q.screen.xs
+                          ? props.rowIndex + 1
+                          : (currentPageCustomer - 1) * pageSize +
+                            props.rowIndex +
+                            1
+                      }}
+                    </q-td>
+
+                    <q-td
+                      v-if="fieldSelected.includes('titleName')"
+                      class="ellipsis"
+                    >
+                      <div class="row items-center no-wrap">
+                        <div
+                          class="q-mr-sm"
+                          style="display: flex; margin-bottom: var(--size-2)"
+                        >
+                          <div
+                            :style="`
+                                  border-radius: 50%;
+                                  border-style: solid;
+                                  border-width: 2px;
+                                  border-color: hsl(var(${props.row.customerType === 'CORP' ? '--violet-11-hsl' : '--teal-10-hsl'}));
+                                `"
+                          >
+                            <div class="branch-card__icon">
+                              <q-avatar size="md">
+                                <q-img
+                                  :src="
+                                    props.row.selectedImage
+                                      ? `${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`
+                                      : `/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`
+                                  "
+                                  class="full-height full-width"
+                                >
+                                  <template #error>
+                                    <q-img
+                                      :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
+                                    />
+                                  </template>
+                                </q-img>
+                              </q-avatar>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="col">
+                          <div class="col">
+                            {{
+                              props.row.customerType === 'CORP'
+                                ? props.row.branch[0]?.registerName || '-'
+                                : optionStore.mapOption(
+                                    props.row.branch[0].namePrefix,
+                                  ) +
+                                    ' ' +
+                                    props.row.branch[0]?.firstName +
+                                    ' ' +
+                                    props.row.branch[0]?.lastName || '-'
+                            }}
+                          </div>
+                          <div class="col app-text-muted">
+                            {{
+                              props.row.customerType === 'CORP'
+                                ? props.row.branch[0]?.registerNameEN || '-'
+                                : capitalizeFirstLetter(
+                                    props.row.branch[0].namePrefix,
+                                  ) +
+                                    ' ' +
+                                    props.row.branch[0]?.firstNameEN +
+                                    ' ' +
+                                    props.row.branch[0]?.lastNameEN || '-'
+                            }}
+                          </div>
+                        </div>
+                      </div>
+                    </q-td>
+
+                    <q-td
+                      v-if="fieldSelected.includes('businessTypePure')"
+                      style="max-width: 150px"
+                      class="ellipsis"
+                    >
+                      {{
+                        props.row.branch[0].businessType
+                          ? props.row.branch[0].businessType[
+                              $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                            ]
+                          : '-'
+                      }}
+                      <q-tooltip>
+                        {{
+                          props.row.branch[0].businessType
+                            ? props.row.branch[0].businessType[
+                                $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                              ]
+                            : '-'
+                        }}
+                      </q-tooltip>
+                    </q-td>
+
+                    <q-td
+                      v-if="fieldSelected.includes('jobPosition')"
+                      style="max-width: 150px"
+                      class="ellipsis"
+                    >
+                      {{
+                        props.row.branch.length !== 0
+                          ? props.row.branch[0].jobPosition !== null
+                            ? optionStore.mapOption(
+                                props.row.branch[0].jobPosition,
+                              )
+                            : ''
+                          : '-'
+                      }}
+
+                      <q-tooltip>
+                        {{
+                          props.row.branch.length !== 0
+                            ? props.row.branch[0].jobPosition !== null
+                              ? optionStore.mapOption(
+                                  props.row.branch[0].jobPosition,
+                                )
+                              : ''
+                            : '-'
+                        }}
+                      </q-tooltip>
+                    </q-td>
+
+                    <q-td v-if="fieldSelected.includes('address')">
+                      {{
+                        formatAddress({
+                          address: props.row.branch[0].address,
+                          addressEN: props.row.branch[0].addressEN,
+                          moo: props.row.branch[0].moo,
+                          mooEN: props.row.branch[0].mooEN,
+                          soi: props.row.branch[0].soi,
+                          soiEN: props.row.branch[0].soiEN,
+                          street: props.row.branch[0].street,
+                          streetEN: props.row.branch[0].streetEN,
+                          province: props.row.branch[0].province,
+                          district: props.row.branch[0].district,
+                          subDistrict: props.row.branch[0].subDistrict,
+                          en: $i18n.locale === 'eng',
+                        })
+                      }}
+                      <q-tooltip>
+                        {{
+                          formatAddress({
+                            address: props.row.branch[0].address,
+                            addressEN: props.row.branch[0].addressEN,
+                            moo: props.row.branch[0].moo,
+                            mooEN: props.row.branch[0].mooEN,
+                            soi: props.row.branch[0].soi,
+                            soiEN: props.row.branch[0].soiEN,
+                            street: props.row.branch[0].street,
+                            streetEN: props.row.branch[0].streetEN,
+                            province: props.row.branch[0].province,
+                            district: props.row.branch[0].district,
+                            subDistrict: props.row.branch[0].subDistrict,
+                            en: $i18n.locale === 'eng',
+                          })
+                        }}
+                      </q-tooltip>
+                    </q-td>
+
+                    <q-td v-if="fieldSelected.includes('contactName')">
+                      {{ props.row.branch[0]?.contactName || '-' }}
+                    </q-td>
+
+                    <q-td v-if="fieldSelected.includes('officeTel')">
+                      {{ props.row.branch[0]?.officeTel || '-' }}
+                    </q-td>
+
+                    <q-td>
+                      <q-btn
+                        :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
+                        dense
+                        flat
+                        @click.stop="
+                          async () => {
+                            if (!currentBtnOpen[props.rowIndex]) {
+                              customerFormState.currentCustomerId =
+                                props.row.id;
+
+                              // TODO:
+                              await fetchListEmployee({
+                                customerId: props.row.id,
+                              });
+
+                              currentBtnOpen.map((v, i) => {
+                                if (i !== props.rowIndex) {
+                                  currentBtnOpen[i] = false;
+                                }
+                              });
+                            }
+                            currentBtnOpen[props.rowIndex] =
+                              !currentBtnOpen[props.rowIndex];
+                          }
+                        "
+                      >
+                        <div class="row items-center">
+                          <q-icon name="mdi-account-group-outline" />
+                          <q-icon
+                            class="btn-arrow-right"
+                            :class="{
+                              active: currentBtnOpen[props.rowIndex],
+                            }"
+                            size="xs"
+                            name="mdi-chevron-right"
+                          />
+                        </div>
+                      </q-btn>
+                      <q-btn
+                        icon="mdi-eye-outline"
+                        :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop="editCustomerForm(props.row.id)"
+                      />
+
+                      <KebabAction
+                        :hide-delete="!canAccess('customer', 'edit')"
+                        :id-name="
+                          props.row.branch[0].customerName ||
+                          props.row.branch[0].firstName
+                        "
+                        :status="props.row.status"
+                        @view="
+                          () => {
+                            const { branch, ...payload } = props.row;
+                            currentCustomer = payload;
+                            editCustomerForm(props.row.id);
+                          }
+                        "
+                        @edit="
+                          async () => {
+                            await editCustomerForm(props.row.id);
+                            customerFormState.branchIndex = 0;
+                          }
+                        "
+                        @delete="
+                          deleteCustomerById(
+                            props.row.id,
+                            async () =>
+                              await fetchListCustomer(true, $q.screen.xs),
+                          )
+                        "
+                        @change-status="
+                          triggerChangeStatus(props.row.id, props.row.status)
+                        "
+                      />
+                    </q-td>
+                  </q-tr>
+
+                  <q-tr v-show="currentBtnOpen[props.rowIndex]" :props="props">
+                    <q-td colspan="100%" style="padding: 16px">
+                      <div class="text-center">
+                        <TableEmpoloyee
+                          in-table
+                          :list-employee="listEmployee"
+                          :columns-employee="columnsEmployee"
+                          @view="
+                            async (item: any) => {
+                              employeeFormState.drawerModal = true;
+                              employeeFormState.isEmployeeEdit = false;
+                              employeeFormStore.assignFormDataEmployee(item.id);
+                              await fetchImageList(
+                                item.id,
+                                item.selectedImage || '',
+                                'employee',
+                              );
+                            }
+                          "
+                        />
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+
+                <template v-slot:item="props">
+                  <div class="col-12 col-md-6 column">
+                    <BranchCard
+                      i18n-key="customer.table"
+                      class="surface-1 col"
+                      :virtual-branch="false"
+                      :id="`branch-card-${props.row.name}`"
+                      :class="{
+                        'cursor-pointer': props.row._count.branch !== 0,
+                      }"
+                      @click="
+                        $router.push(
+                          `/customer-management/${props.row.id}/branch`,
+                        )
+                      "
+                      :metadata="props.row"
+                      :color="
+                        props.row.customerType === 'CORP' ? 'hq' : 'br-virtual'
+                      "
+                      :key="props.row.id"
+                      :data="{
+                        branchLabelName:
+                          props.row.customerType === 'CORP'
+                            ? $i18n.locale === 'eng'
+                              ? props.row.branch[0]?.registerNameEN || '-'
+                              : props.row.branch[0]?.registerName || '-'
+                            : $i18n.locale === 'eng'
+                              ? props.row.branch[0]?.firstNameEN +
+                                  ' ' +
+                                  props.row.branch[0]?.lastNameEN || '-'
+                              : props.row.branch[0]?.firstName +
+                                  ' ' +
+                                  props.row.branch[0]?.lastName || '-',
+                      }"
+                      :inactive="props.row.status === 'INACTIVE'"
+                      :field-selected="
+                        fieldSelected.filter((v) => {
+                          return columnsCustomer.some((c) => c.name === v);
+                        })
+                      "
+                    >
+                      <template #image>
+                        <q-avatar size="3rem">
+                          <q-img
+                            :src="
+                              props.row.selectedImage
+                                ? `${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`
+                                : `/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`
+                            "
+                            class="full-height full-width"
+                          >
+                            <template #error>
+                              <q-img
+                                :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
+                              />
+                            </template>
+                          </q-img>
+                          <q-badge
+                            class="absolute-bottom-right no-padding"
+                            style="
+                              border-radius: 50%;
+                              min-width: 10px;
+                              min-height: 10px;
+                            "
+                            :style="{
+                              background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                            }"
+                          ></q-badge>
+                        </q-avatar>
+                      </template>
+                      <template #data>
+                        <div
+                          class="row"
+                          style="display: flex; padding-block: var(--size-2)"
+                        >
+                          <div class="col-12 q-py-sm row">
+                            <span class="col-4 app-text-muted">
+                              {{
+                                props.row.customerType === 'CORP'
+                                  ? $t('customer.form.legalPersonCode')
+                                  : $t('customer.form.cardNumber')
+                              }}
+                            </span>
+                            <span class="col">
+                              {{
+                                props.row.customerType === 'CORP'
+                                  ? props.row.branch[0]?.legalPersonNo
+                                  : props.row.branch[0]?.citizenId
+                              }}
+                            </span>
+                          </div>
+                          <div
+                            class="col-12 q-py-sm row"
+                            v-for="key in fieldSelected
+                              .filter((v) => {
+                                return (
+                                  v !== 'orderNumber' &&
+                                  v !== 'titleName' &&
+                                  v !== 'address' &&
+                                  v !== 'contactName' &&
+                                  columnsCustomer.some((c) => c.name === v)
+                                );
+                              })
+                              .sort((lhs, rhs) => {
+                                const fields = [
+                                  ...columnsEmployee,
+                                  ...columnsCustomer,
+                                ];
+                                return (
+                                  fields.findIndex((i) => i.name === lhs) -
+                                  fields.findIndex((i) => i.name === rhs)
+                                );
+                              })"
+                            :key="key"
+                          >
+                            <span class="col-4 app-text-muted">
+                              {{ $t(`customer.table.${key}`) }}
+                            </span>
+                            <span class="col">
+                              {{
+                                key === 'businessTypePure'
+                                  ? ($i18n.locale === 'eng'
+                                      ? props.row.branch[0]?.businessType
+                                          ?.nameEN
+                                      : props.row.branch[0]?.businessType
+                                          ?.name) || '-'
+                                  : key === 'jobPosition'
+                                    ? optionStore.mapOption(
+                                        props.row.branch[0]?.jobPosition,
+                                      )
+                                    : key === 'officeTel'
+                                      ? props.row.branch[0]?.officeTel || '-'
+                                      : ''
+                              }}
+                            </span>
+                          </div>
+                        </div>
+                      </template>
+                      <template v-slot:action>
+                        <q-btn
+                          icon="mdi-eye-outline"
+                          :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
+                          size="sm"
+                          dense
+                          round
+                          flat
+                          @click.stop="editCustomerForm(props.row.id)"
+                        />
+                        <KebabAction
+                          :hide-delete="!canAccess('customer', 'edit')"
+                          :status="props.row.status"
+                          :id-name="props.row.name"
+                          @view="
+                            () => {
+                              const { branch, ...payload } = props.row;
+                              currentCustomer = payload;
+                              editCustomerForm(props.row.id);
+                            }
+                          "
+                          @edit="
+                            async () => {
+                              await editCustomerForm(props.row.id);
+                              customerFormState.branchIndex = 0;
+                            }
+                          "
+                          @delete="
+                            deleteCustomerById(
+                              props.row.id,
+                              async () =>
+                                await fetchListCustomer(true, $q.screen.xs),
+                            )
+                          "
+                          @change-status="
+                            triggerChangeStatus(props.row.id, props.row.status)
+                          "
+                        />
+                      </template>
+                    </BranchCard>
+                  </div>
+                </template>
+              </q-table>
+              <template v-slot:loading>
+                <div
+                  v-if="
+                    $q.screen.lt.sm && currentPageCustomer !== maxPageCustomer
+                  "
+                  class="row justify-center"
+                >
+                  <q-spinner-dots color="primary" size="40px" />
+                </div>
+              </template>
+            </q-infinite-scroll>
+          </div>
+
+          <footer
+            v-if="listCustomer.length !== 0 && $q.screen.gt.xs"
+            class="row justify-between items-center q-px-md q-py-sm"
+          >
+            <div class="row col-4 items-center">
+              <div
+                class="app-text-muted"
+                style="width: 80px"
+                v-if="$q.screen.gt.sm"
+              >
+                {{ $t('general.recordPerPage') }}
+              </div>
+
+              <div><PaginationPageSize v-model="pageSize" /></div>
+            </div>
+
+            <div class="col-4 flex justify-center app-text-muted">
+              {{
+                $q.screen.gt.sm
+                  ? $t('general.recordsPage', {
+                      resultcurrentPage: listCustomer.length,
+                      total: statsCustomerType.PERS + statsCustomerType.CORP,
+                    })
+                  : $t('general.ofPage', {
+                      current: listCustomer.length,
+                      total: statsCustomerType.PERS + statsCustomerType.CORP,
+                    })
+              }}
+            </div>
+
+            <div class="col-4 flex justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageCustomer"
+                v-model:max-page="maxPageCustomer"
+                :fetch-data="
+                  async () => {
+                    await fetchListCustomer();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
+          </footer>
+        </template>
+      </div>
+    </template>
+  </q-splitter>
+
+  <!-- select type to add customer -->
+  <DialogForm
+    v-model:modal="emptyCreateDialog"
+    :title="$t('customer.employerType')"
+    hide-footer
+    no-app-box
+    width="40vw"
+    height="250px"
+    :close="
+      () => {
+        emptyCreateDialog = false;
+        onCreateImageList = { selectedImage: '', list: [] };
+      }
+    "
+  >
+    <div class="full-height row q-pa-md">
+      <ItemCard
+        class="col q-mx-sm full-height"
+        v-for="value in dialogCreateCustomerItem"
+        :key="value.text"
+        :icon="value.icon"
+        :text="value.text"
+        :icon-color="value.iconColor"
+        :bg-color="value.color"
+        @trigger="
+          () => {
+            createCustomerForm(
+              value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
+            );
+            emptyCreateDialog = false;
+          }
+        "
+      />
+    </div>
+  </DialogForm>
+
+  <!-- add customer -->
+  <DialogContainer
+    :model-value="customerFormState.dialogModal"
+    :on-open="
+      async () => {
+        customerFormStore.resetForm(customerFormState.dialogType === 'create');
+        onCreateImageList = { selectedImage: '', list: [] };
+        customerFormState.customerImageUrl = '';
+        await fetchListOfOptionBranch();
+        await customerFormStore.addCurrentCustomerBranch();
+      }
+    "
+    :on-close="
+      () => {
+        customerFormState.dialogModal = false;
+        onCreateImageList = { selectedImage: '', list: [] };
+      }
+    "
+  >
+    <template #header>
+      <DialogHeader
+        :title="
+          customerFormState.dialogType === 'create'
+            ? $t(`general.add`, {
+                text: `${$t('customer.employer')} `,
+              })
+            : `${$t('customer.employer')} `
+        "
+      >
+        <template #title-after>
+          <span
+            :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+          >
+            :
+            {{
+              customerFormData.customerType === 'CORP'
+                ? $t('customer.employerLegalEntity')
+                : $t('customer.employerNaturalPerson')
+            }}
+          </span>
+        </template>
+      </DialogHeader>
+    </template>
+
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <ProfileBanner
+        v-if="customerFormData.customerBranch !== undefined"
+        active
+        hide-fade
+        prefix="dialog"
+        :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
+        :img="
+          customerFormState.customerImageUrl ||
+          `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`
+        "
+        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
+        :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+        :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
+        :icon="
+          customerFormData.customerType === 'PERS'
+            ? 'mdi-account-plus-outline'
+            : 'mdi-office-building-outline'
+        "
+        :title="
+          customerFormData.customerType === 'PERS'
+            ? setPrefixName(
+                {
+                  namePrefix: customerFormData.customerBranch[0]?.namePrefix,
+                  firstName: customerFormData.customerBranch[0]?.firstName,
+                  lastName: customerFormData.customerBranch[0]?.lastName,
+                  firstNameEN: customerFormData.customerBranch[0]?.firstNameEN,
+                  lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
+                },
+                { locale },
+              )
+            : customerFormData.customerBranch[0]?.registerName
+        "
+        :caption="
+          customerFormData.customerType === 'PERS'
+            ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
+            : customerFormData.customerBranch[0]?.registerNameEN
+        "
+        @view="
+          () => {
+            customerFormState.imageDialog = true;
+            customerFormState.isImageEdit = false;
+          }
+        "
+        @edit="
+          () => {
+            if (customerFormState.editCustomerId) {
+              fetchImageList(
+                customerFormState.editCustomerId,
+                customerFormData.selectedImage,
+                'customer',
+              );
+            }
+            customerFormState.imageDialog =
+              customerFormState.isImageEdit = true;
+          }
+        "
+      />
+    </div>
+    <div
+      style="flex: 1; width: 100%; overflow-y: auto"
+      id="customer-form"
+      :class="{
+        'q-px-lg q-pb-lg': $q.screen.gt.sm,
+        'q-px-md q-pb-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <div class="col surface-1 full-height rounded bordered scroll row">
+        <div
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
+        >
+          <div class="q-py-md q-pl-md q-pr-sm">
+            <SideMenu
+              :menu="[
+                {
+                  name: $t('form.field.basicInformation'),
+                  anchor: 'form-basic-info-customer',
+                },
+                {
+                  name: $t('customer.form.group.branch'),
+                  anchor: 'form-branch-customer-branch',
+                  useBtn: true,
+                },
+                ...(customerFormData.customerBranch?.map((v, i) => ({
+                  name:
+                    i === 0
+                      ? $t('customer.form.headQuarters.title')
+                      : $t('customer.form.branch.title', {
+                          name: i,
+                        }),
+                  anchor: `form-branch-customer-no-${i}`,
+                  sub: true,
+                })) || []),
+              ]"
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#customer-form-content"
+            >
+              <template v-slot:btn-form-branch-customer-branch>
+                <q-btn
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  padding="0px 0px"
+                  style="color: var(--stone-9)"
+                  @click.stop="customerFormStore.addCurrentCustomerBranch()"
+                  v-if="
+                    customerFormState.branchIndex === -1 &&
+                    !!customerFormState.editCustomerId &&
+                    customerFormState.dialogType !== 'create'
+                  "
+                  :disabled="!customerFormState.readonly"
+                />
+              </template>
+            </SideMenu>
+          </div>
+        </div>
+        <div
+          class="col-12 col-md-10"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
+          }"
+          id="customer-form-content"
+          style="height: 100%; max-height: 100%; overflow-y: auto"
+        >
+          <EmployerFormBasicInfo
+            prefixId="form"
+            v-if="
+              customerFormData.customerBranch !== undefined &&
+              customerFormData.customerBranch.length > 0
+            "
+            class="q-mb-xl"
+            :readonly="
+              (customerFormState.dialogType === 'edit' &&
+                customerFormState.readonly === true) ||
+              customerFormState.dialogType === 'info'
+            "
+            :action-disabled="customerFormState.branchIndex !== -1"
+            id="form-basic-info-customer"
+            :onCreate="customerFormState.dialogType === 'create'"
+            @edit="
+              ((customerFormState.dialogType = 'edit'),
+              (customerFormState.readonly = false))
+            "
+            @cancel="() => customerFormUndo(false)"
+            @delete="
+              customerFormState.editCustomerId &&
+              deleteCustomerById(
+                customerFormState.editCustomerId,
+                async () => await fetchListCustomer(true, $q.screen.xs),
+              )
+            "
+            :customer-type="customerFormData.customerType"
+            v-model:registered-branch-id="customerFormData.registeredBranchId"
+            v-model:customer-name="customerNameInfo"
+            v-model:register-name="
+              customerFormData.customerBranch[0].registerName
+            "
+            v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
+            v-model:legal-person-no="
+              customerFormData.customerBranch[0].legalPersonNo
+            "
+            v-model:business-type="
+              customerFormData.customerBranch[0].businessTypeId
+            "
+            v-model:job-position="
+              customerFormData.customerBranch[0].jobPosition
+            "
+            v-model:telephone-no="
+              customerFormData.customerBranch[0].telephoneNo
+            "
+            v-model:branch-options="registerAbleBranchOption"
+          />
+          <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
+            <div class="col-12 text-weight-bold text-body1 row items-center">
+              <q-icon
+                flat
+                size="xs"
+                class="q-pa-sm rounded q-mr-xs"
+                color="info"
+                name="mdi-briefcase-outline"
+                style="background-color: var(--surface-3)"
+              />
+              <span>{{ $t('customer.form.group.branch') }}</span>
+            </div>
+
+            <template
+              v-for="(_, idx) in customerFormData.customerBranch"
+              :key="idx"
+            >
+              <q-form
+                class="full-width"
+                greedy
+                @submit.prevent="
+                  async () => {
+                    if (!customerFormData.customerBranch) return;
+
+                    if (customerFormData.customerType === 'PERS') {
+                      tabFieldRequired.main = [
+                        'citizenId',
+                        'namePrefix',
+                        'firstName',
+                        'firstNameEN',
+                        'lastName',
+                        'lastNameEN',
+                        'gender',
+                        'birthDate',
+                      ];
+                    }
+                    if (customerFormData.customerType === 'CORP') {
+                      tabFieldRequired.main = ['legalPersonNo', 'registerName'];
+                    }
+                    let tapIsUndefined = validateTabField(
+                      customerFormData.customerBranch?.[idx],
+                      tabFieldRequired,
+                    );
+
+                    if (tapIsUndefined.length > 0) {
+                      return dialog({
+                        color: 'warning',
+                        icon: 'mdi-alert',
+                        title: t('dialog.title.incompleteDataEntry'),
+                        actionText: t('general.ok'),
+                        persistent: true,
+                        message: t('dialog.message.incompleteDataEntry', {
+                          tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
+                        }),
+                        action: async () => {
+                          return;
+                        },
+                      });
+                    }
+                    if (!customerFormData.customerBranch[idx].id) {
+                      let res;
+                      if (idx === 0) {
+                        res =
+                          await customerFormStore.submitFormCustomer(
+                            onCreateImageList,
+                          );
+                      } else {
+                        res = await customerStore.createBranch({
+                          ...customerFormData.customerBranch[idx],
+                          customerId: customerFormState.editCustomerId || '',
+                        });
+                      }
+                      if (res) {
+                        customerFormState.readonly = true;
+                        notify('create', $t('general.success'));
+                      }
+                    } else {
+                      if (!customerFormState.editCustomerId) return;
+                      await customerStore.editBranchById(
+                        customerFormData.customerBranch[idx].id || '',
+                        {
+                          ...customerFormData.customerBranch[idx],
+                          id: undefined,
+                        },
+                      );
+                    }
+
+                    const uploadResult =
+                      customerFormData.customerBranch[idx].file?.map(
+                        async (v) => {
+                          if (!v.file) return;
+
+                          const ext = v.file.name.split('.').at(-1);
+                          let filename = v.group + '-' + new Date().getTime();
+                          if (ext) filename += `.${ext}`;
+
+                          const res = await customerStore.putAttachment({
+                            parentId:
+                              customerFormData.customerBranch?.[idx].id || '',
+                            file: v.file,
+                            name: filename,
+                          });
+
+                          if (res) {
+                            await customerFormStore.assignFormData(
+                              customerFormState.editCustomerId,
+                            );
+                          }
+                        },
+                      ) || [];
+
+                    for (const r of uploadResult) await r;
+
+                    await customerFormStore.assignFormData(
+                      customerFormState.editCustomerId,
+                    );
+
+                    await fetchListCustomer(true, $q.screen.xs);
+                    customerFormStore.resetForm();
+                  }
+                "
+              >
+                <EmployerFormBranch
+                  :index="idx"
+                  prefixId="form"
+                  v-if="customerFormData.customerBranch"
+                  v-model:customer-branch="customerFormData.customerBranch[idx]"
+                  :onCreate="customerFormState.dialogType === 'create'"
+                  :customer-type="customerFormData.customerType"
+                  :readonly="customerFormState.branchIndex !== idx"
+                  :action-disabled="
+                    !customerFormState.readonly ||
+                    (customerFormState.branchIndex !== -1 &&
+                      customerFormState.branchIndex !== idx)
+                  "
+                  @edit="() => (customerFormState.branchIndex = idx)"
+                  @cancel="() => customerFormUndo(false)"
+                  @delete="
+                    async () => {
+                      if (!customerFormState.editCustomerId) return;
+
+                      if (idx === 0) {
+                        deleteCustomerById(
+                          customerFormState.editCustomerId,
+                          async () =>
+                            await fetchListCustomer(true, $q.screen.xs),
+                        );
+                        return;
+                      }
+                      if (!!customerFormData.customerBranch?.[idx].id) {
+                        const action = await deleteCustomerBranchById(
+                          customerFormData.customerBranch[idx].id || '',
+                        );
+                        if (action) {
+                          await customerFormStore.assignFormData(
+                            customerFormState.editCustomerId,
+                          );
+                        }
+                        customerFormStore.resetForm();
+                      }
+                    }
+                  "
+                  @save="() => {}"
+                />
+              </q-form>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DialogContainer>
+
+  <!-- edit customer -->
+  <DrawerInfo
+    hide-action
+    v-model:drawer-open="customerFormState.drawerModal"
+    :title="
+      customerFormData.customerType === 'CORP' &&
+      customerFormData.customerBranch
+        ? customerFormData.customerBranch[0]?.registerName || '-'
+        : (customerFormData.customerBranch[0]?.namePrefix
+            ? $t(
+                'customer.form.prefix.' +
+                  customerFormData.customerBranch[0]?.namePrefix,
+              ) + ' '
+            : '') + customerNameInfo || '-'
+    "
+    :badge-label="
+      customerFormData.customerType === 'CORP'
+        ? $t('customer.employerLegalEntity')
+        : $t('customer.employerNaturalPerson')
+    "
+    :badge-style="
+      customerFormData.customerType === 'CORP'
+        ? `color: var(--${$q.dark.isActive ? 'violet-10' : 'violet-11'}); background: hsl(var(--${$q.dark.isActive ? 'violet-10-hsl' : 'violet-11-hsl'})/0.15)`
+        : `color: var(--${$q.dark.isActive ? 'teal-8' : 'teal-10'}); background: hsl(var(--${$q.dark.isActive ? 'teal-8-hsl' : 'teal-10-hsl'})/0.15)`
+    "
+    :close="
+      () => {
+        resetScrollBar('customer-form-content');
+      }
+    "
+    :submit="
+      async () => {
+        await customerFormStore.submitFormCustomer();
+        customerFormState.readonly = true;
+        notify('create', $t('general.success'));
+        await fetchListCustomer();
+      }
+    "
+    :show="
+      async () => {
+        // await fetchListOfOptionBranch();
+        // customerFormStore.resetForm(true);
+      }
+    "
+    :before-close="
+      () => {
+        if (customerFormStore.isFormDataDifferent()) {
+          customerConfirmUnsave();
+          return true;
+        } else {
+          fetchListCustomer();
+          customerFormState.branchIndex = -1;
+          customerFormStore.resetForm(true);
+        }
+        return false;
+      }
+    "
+  >
+    <div class="column full-height">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <ProfileBanner
+          v-if="customerFormData.customerBranch !== undefined"
+          :prefix="customerFormData.registeredBranchId"
+          :active="customerFormData.status !== 'INACTIVE'"
+          hide-fade
+          use-toggle
+          v-model:toggle-status="customerFormData.status"
+          :toggle-title="$t('status.title')"
+          :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
+          :img="
+            `${baseUrl}/customer/${customerFormState.editCustomerId}/image/${customerFormData.selectedImage}`.concat(
+              refreshImageState ? `?ts=${Date.now()}` : '',
+            ) || null
+          "
+          :fallback-img="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
+          :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+          :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
+          :icon="
+            customerFormData.customerType === 'PERS'
+              ? 'mdi-account-plus-outline'
+              : 'mdi-office-building-outline'
+          "
+          :title="
+            customerFormData.customerType === 'PERS'
+              ? setPrefixName(
+                  {
+                    namePrefix: customerFormData.customerBranch[0]?.namePrefix,
+                    firstName: customerFormData.customerBranch[0]?.firstName,
+                    lastName: customerFormData.customerBranch[0]?.lastName,
+                    firstNameEN:
+                      customerFormData.customerBranch[0]?.firstNameEN,
+                    lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
+                  },
+                  { locale },
+                )
+              : customerFormData.customerBranch[0]?.registerName
+          "
+          :caption="
+            customerFormData.customerType === 'PERS'
+              ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
+              : customerFormData.customerBranch[0]?.registerNameEN
+          "
+          @view="
+            () => {
+              customerFormState.imageDialog = true;
+              customerFormState.isImageEdit = false;
+            }
+          "
+          @edit="
+            customerFormState.imageDialog = customerFormState.isImageEdit = true
+          "
+          @update:toggle-status="
+            async (v) => {
+              if (!customerFormState.editCustomerId) return;
+              triggerChangeStatus(customerFormState.editCustomerId, v);
+            }
+          "
+        />
+      </div>
+
+      <div
+        style="flex: 1; width: 100%; overflow-y: auto"
+        class="column"
+        id="customer-form"
+        :class="{
+          'q-px-lg q-pb-lg': $q.screen.gt.sm,
+          'q-px-md q-pb-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <div class="col full-width surface-1 rounded bordered row">
+          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
+            <div class="q-py-md q-pl-md q-pr-sm">
+              <SideMenu
+                :menu="[
+                  {
+                    name: $t('form.field.basicInformation'),
+                    anchor: 'form-basic-info-customer',
+                  },
+                  {
+                    name: $t('customer.form.group.branch'),
+                    anchor: 'form-branch-customer-branch',
+                    useBtn: true,
+                  },
+
+                  ...(customerFormData.customerBranch?.map((v, i) => ({
+                    name:
+                      i === 0
+                        ? $t('customer.form.headQuarters.title')
+                        : $t('customer.form.branch.title', {
+                            name: i,
+                          }),
+                    anchor: `form-branch-customer-no-${i}`,
+                    sub: true,
+                  })) || []),
+                ]"
+                background="transparent"
+                :active="{
+                  background: 'hsla(var(--blue-6-hsl) / .2)',
+                  foreground: 'var(--blue-6)',
+                }"
+                scroll-element="#customer-form-content"
+              >
+                <template v-slot:btn-form-branch-customer-branch>
+                  <q-btn
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    padding="0px 0px"
+                    style="color: var(--stone-9)"
+                    @click.stop="customerFormStore.addCurrentCustomerBranch()"
+                    v-if="
+                      customerFormState.branchIndex === -1 &&
+                      !!customerFormState.editCustomerId &&
+                      customerFormState.dialogType !== 'create'
+                    "
+                    :disabled="!customerFormState.readonly"
+                  />
+                </template>
+              </SideMenu>
+            </div>
+          </div>
+
+          <div
+            class="col-12 col-md-10"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
+            }"
+            id="customer-form-content"
+            style="height: 100%; max-height: 100%; overflow-y: auto"
+          >
+            <EmployerFormBasicInfo
+              v-if="
+                customerFormData.customerBranch !== undefined &&
+                customerFormData.customerBranch.length > 0
+              "
+              :readonly="
+                (customerFormState.dialogType === 'edit' &&
+                  customerFormState.readonly === true) ||
+                customerFormState.dialogType === 'info'
+              "
+              :hide-action="customerFormData.status === 'INACTIVE'"
+              :action-disabled="customerFormState.branchIndex !== -1"
+              id="form-basic-info-customer"
+              :onCreate="customerFormState.dialogType === 'create'"
+              @edit="
+                ((customerFormState.dialogType = 'edit'),
+                (customerFormState.readonly = false))
+              "
+              @cancel="() => customerFormUndo(false)"
+              @delete="
+                customerFormState.editCustomerId &&
+                deleteCustomerById(
+                  customerFormState.editCustomerId,
+                  async () => await fetchListCustomer(true, $q.screen.xs),
+                )
+              "
+              :customer-type="customerFormData.customerType"
+              v-model:registered-branch-id="customerFormData.registeredBranchId"
+              v-model:customer-name="customerNameInfo"
+              v-model:register-name="
+                customerFormData.customerBranch[0].registerName
+              "
+              v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
+              v-model:legal-person-no="
+                customerFormData.customerBranch[0].legalPersonNo
+              "
+              v-model:business-type="
+                customerFormData.customerBranch[0].businessTypeId
+              "
+              v-model:job-position="
+                customerFormData.customerBranch[0].jobPosition
+              "
+              v-model:telephone-no="
+                customerFormData.customerBranch[0].telephoneNo
+              "
+              v-model:branch-options="registerAbleBranchOption"
+            />
+
+            <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
+              <div
+                class="col-12 text-weight-bold text-body1 row items-center q-mt-lg"
+              >
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-briefcase-outline"
+                  style="background-color: var(--surface-3)"
+                />
+                <span>{{ $t('customer.form.group.branch') }}</span>
+              </div>
+
+              <template
+                v-for="(_, idx) in customerFormData.customerBranch"
+                :key="idx"
+              >
+                <q-form
+                  class="full-width q-mb-xl"
+                  v-if="customerFormData.customerBranch"
+                  greedy
+                  @submit.prevent="
+                    async () => {
+                      if (!customerFormData.customerBranch) return;
+                      if (!customerFormState.editCustomerId) return;
+
+                      if (customerFormData.customerType === 'PERS') {
+                        tabFieldRequired.main = [
+                          'citizenId',
+                          'namePrefix',
+                          'firstName',
+                          'firstNameEN',
+                          'lastName',
+                          'lastNameEN',
+                          'gender',
+                          'birthDate',
+                        ];
+                      }
+                      if (customerFormData.customerType === 'CORP') {
+                        tabFieldRequired.main = [
+                          'legalPersonNo',
+                          'registerName',
+                        ];
+                      }
+
+                      let tapIsUndefined = validateTabField(
+                        customerFormData.customerBranch?.[idx],
+                        tabFieldRequired,
+                      );
+
+                      if (tapIsUndefined.length > 0) {
+                        return dialog({
+                          color: 'warning',
+                          icon: 'mdi-alert',
+                          title: t('dialog.title.incompleteDataEntry'),
+                          actionText: t('general.ok'),
+                          persistent: true,
+                          message: t('dialog.message.incompleteDataEntry', {
+                            tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
+                          }),
+                          action: async () => {
+                            return;
+                          },
+                        });
+                      }
+                      if (!customerFormData.customerBranch[idx].id) {
+                        await customerStore.createBranch({
+                          ...customerFormData.customerBranch[idx],
+                          customerId: customerFormState.editCustomerId,
+                        });
+                      } else {
+                        await customerStore.editBranchById(
+                          customerFormData.customerBranch[idx].id || '',
+                          {
+                            ...customerFormData.customerBranch[idx],
+                            id: undefined,
+                          },
+                        );
+                      }
+
+                      customerFormData.customerBranch[idx].file?.forEach(
+                        async (v) => {
+                          if (!v.file) return;
+
+                          const ext = v.file.name.split('.').at(-1);
+                          let filename = v.group + '-' + new Date().getTime();
+                          if (ext) filename += `.${ext}`;
+
+                          const res = await customerStore.putAttachment({
+                            parentId:
+                              customerFormData.customerBranch?.[idx].id || '',
+                            file: v.file,
+                            name: filename,
+                          });
+
+                          if (res) {
+                            await customerFormStore.assignFormData(
+                              customerFormState.editCustomerId,
+                            );
+                          }
+                        },
+                      );
+
+                      await customerFormStore.assignFormData(
+                        customerFormState.editCustomerId,
+                      );
+
+                      customerFormStore.resetForm();
+                    }
+                  "
+                >
+                  <EmployerFormBranch
+                    prefix-id="info"
+                    v-if="!!customerFormState.editCustomerId"
+                    :index="idx"
+                    :hide-action="customerFormData.status === 'INACTIVE'"
+                    v-model:customer-branch="
+                      customerFormData.customerBranch[idx]
+                    "
+                    :customer-type="customerFormData.customerType"
+                    :action-disabled="
+                      !customerFormState.readonly ||
+                      (customerFormState.branchIndex !== -1 &&
+                        customerFormState.branchIndex !== idx)
+                    "
+                    :hide-delete="!canAccess('customer', 'edit')"
+                    :readonly="customerFormState.branchIndex !== idx"
+                    @edit="() => (customerFormState.branchIndex = idx)"
+                    @cancel="() => customerFormUndo(false)"
+                    @delete="
+                      async () => {
+                        if (!!customerFormData.customerBranch?.[idx].id) {
+                          const action = await deleteCustomerBranchById(
+                            customerFormData.customerBranch[idx].id || '',
+                          );
+                          if (action) {
+                            await customerFormStore.assignFormData(
+                              customerFormState.editCustomerId,
+                            );
+                          }
+                          customerFormStore.resetForm();
+                        }
+                      }
+                    "
+                    @save="() => {}"
+                  />
+                </q-form>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DrawerInfo>
+
+  <!-- upload profile image -->
+  <ImageUploadDialog
+    ref="dialogCustomerImageUpload"
+    v-model:dialog-state="customerFormState.imageDialog"
+    v-model:file="customerFormData.image"
+    v-model:image-url="customerFormState.customerImageUrl"
+    v-model:data-list="customerFormState.imageList"
+    v-model:on-create-data-list="onCreateImageList"
+    :on-create="
+      customerFormState.dialogModal && !customerFormState.editCustomerId
+    "
+    :default-url="customerFormState.defaultCustomerImageUrl"
+    :hidden-footer="!customerFormState.isImageEdit"
+    @add-image="
+      async (v) => {
+        if (!v) return;
+        if (!customerFormState.editCustomerId) return;
+        await customerStore.addImageList(
+          v,
+          customerFormState.editCustomerId,
+          Date.now().toString(),
+        );
+        await fetchImageList(
+          customerFormState.editCustomerId,
+          customerFormData.selectedImage || '',
+          'customer',
+        );
+      }
+    "
+    @remove-image="
+      async (v) => {
+        if (!v) return;
+        if (!customerFormState.editCustomerId) return;
+        const name = v.split('/').pop() || '';
+        await customerStore.deleteImageByName(
+          customerFormState.editCustomerId,
+          name,
+        );
+        await fetchImageList(
+          customerFormState.editCustomerId,
+          customerFormData.selectedImage || '',
+          'customer',
+        );
+      }
+    "
+    @submit="
+      async (v) => {
+        console.log(customerFormState.editCustomerId);
+        if (
+          customerFormState.dialogModal &&
+          !customerFormState.editCustomerId
+        ) {
+          console.log(1);
+          customerFormState.customerImageUrl = v;
+          customerFormState.imageDialog = false;
+        } else {
+          console.log(2);
+          refreshImageState = true;
+          customerFormData.selectedImage = v;
+          customerFormState.imageList
+            ? (customerFormState.imageList.selectedImage = v)
+            : '';
+          customerFormState.customerImageUrl = `${baseUrl}/customer/${customerFormState.editCustomerId && customerFormState.editCustomerId}/image/${v}`;
+          console.log(customerFormData.selectedImage);
+          customerFormStore.resetForm();
+          console.log(customerFormData.selectedImage);
+          await customerFormStore.submitFormCustomer();
+          console.log(customerFormData.selectedImage);
+          customerFormState.imageDialog = false;
+          refreshImageState = false;
+          await fetchListCustomer();
+          console.log(customerFormData.selectedImage);
+        }
+      }
+    "
+  >
+    <template #title>
+      <span
+        v-if="
+          !customerFormState.dialogModal || customerFormState.editCustomerId
+        "
+        class="justify-center flex text-bold"
+      >
+        {{ $t('general.image') }}
+        {{
+          $i18n.locale === 'eng'
+            ? customerFormData.customerType === 'CORP'
+              ? customerFormData?.customerBranch?.[0].registerNameEN || '-'
+              : customerFormData?.customerBranch?.[0].firstNameEN +
+                  ' ' +
+                  customerFormData?.customerBranch?.[0].lastNameEN || '-'
+            : customerFormData.customerType === 'CORP'
+              ? customerFormData?.customerBranch?.[0].registerName || '-'
+              : customerFormData?.customerBranch?.[0].firstName +
+                  ' ' +
+                  customerFormData?.customerBranch?.[0].lastName || '-'
+        }}
+      </span>
+    </template>
+    <template #error>
+      <div class="full-height full-width" style="background: white">
+        <div class="full-height full-width flex justify-center items-center">
+          <q-img
+            :src="`/images/customer-${customerFormData.customerType}-avartar-male.png`"
+            fit="contain"
+            style="height: 100%"
+          >
+            <template #error>
+              <span
+                class="full-width full-height column items-center justify-center"
+              >
+                <q-icon
+                  size="3rem"
+                  :name="
+                    customerFormData.customerType === 'PERS'
+                      ? 'mdi-account-plus-outline'
+                      : 'mdi-office-building-outline'
+                  "
+                  :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+                />
+              </span>
+            </template>
+          </q-img>
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
+
+  <DrawerEmployee
+    :fetch-list-employee="fetchListEmployee"
+    :fetch-image-list="fetchImageList"
+    :current-tab="currentTab"
+  />
+</template>
+
+<style scoped>
+.status-active {
+  --_branch-status-color: var(--green-6-hsl);
+}
+
+.status-inactive {
+  --_branch-status-color: var(--stone-5-hsl);
+  --_branch-badge-bg: var(--stone-5-hsl);
+  filter: grayscale(0.5);
+  opacity: 0.5;
+}
+
+.branch-card__icon {
+  background-color: hsla(var(--_branch-card-bg) / 0.15);
+  border-radius: 50%;
+  padding: var(--size-1);
+  position: relative;
+  transform: rotate(45deg);
+
+  &::after {
+    content: ' ';
+    display: block;
+    block-size: 0.5rem;
+    aspect-ratio: 1;
+    position: absolute;
+    border-radius: 50%;
+    right: -0.1rem;
+    top: calc(50% - 0.25rem);
+    bottom: calc(50% - 0.25rem);
+    background-color: hsla(var(--_branch-status-color) / 1);
+  }
+
+  & :deep(.q-avatar) {
+    transform: rotate(-45deg);
+    color: hsla(var(--_branch-card-bg) / 1);
+  }
+}
+
+.btn-arrow-right {
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+
+.btn-arrow-right.active {
+  transform: rotate(90deg);
+  transition: transform 0.3s ease;
+}
+
+.employer-active {
+  background-color: hsla(var(--info-bg) / 0.1);
+  color: hsl(var(--info-bg));
+}
+
+:deep(.q-table__middle.scroll) {
+  overflow: hidden;
+}
+</style>
diff --git a/src/pages/03_customer-management/TabEmployee.vue b/src/pages/03_customer-management/TabEmployee.vue
new file mode 100644
index 00000000..81348622
--- /dev/null
+++ b/src/pages/03_customer-management/TabEmployee.vue
@@ -0,0 +1,514 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+
+import {
+  PaginationComponent,
+  PaginationPageSize,
+  ImageUploadDialog,
+  DialogForm,
+  NoData,
+} from 'src/components';
+import DialogEmployee from 'src/components/03_customer-management/DialogEmployee.vue';
+import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
+import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
+import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
+
+import useFlowStore from 'src/stores/flow';
+import useEmployeeStore from 'src/stores/employee';
+import { Status } from 'src/stores/types';
+import { Employee, EmployeeHistory } from 'src/stores/employee/types';
+import { baseUrl, dialog, canAccess } from 'src/stores/utils';
+import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
+import { useCustomerForm, useEmployeeForm } from './form';
+import { columnsEmployee } from './constant';
+
+const $q = useQuasar();
+const flowStore = useFlowStore();
+const employeeStore = useEmployeeStore();
+const employeeFormStore = useEmployeeForm();
+const customerFormStore = useCustomerForm();
+const { t } = useI18n();
+const { state: employeeFormState, currentFromDataEmployee } =
+  storeToRefs(employeeFormStore);
+const { deleteEmployeeById } = employeeFormStore;
+const { state: customerFormState } = storeToRefs(customerFormStore);
+
+const employeeStats = defineModel('employeeStats', { default: 0 });
+
+const props = defineProps<{
+  currentTab: 'employee' | 'employer';
+  currentStatus: Status | 'All';
+  gridView: boolean;
+  inputSearch: string;
+  searchDate: string[];
+  fieldSelected: string[];
+  fetchImageList: (
+    id: string,
+    selectedName: string,
+    type: 'customer' | 'employee',
+  ) => Promise<void>;
+  triggerChangeStatus: (
+    id: string,
+    status: string,
+    employeeName?: string,
+  ) => void;
+}>();
+
+defineExpose({
+  openSpecificEmployee,
+  fetchListEmployee,
+  toggleStatusEmployee,
+});
+
+const listEmployee = ref<Employee[]>([]);
+const currentPageEmployee = ref<number>(1);
+const maxPageEmployee = ref<number>(1);
+const pageSize = ref<number>(30);
+const employeeHistoryDialog = ref(false);
+const employeeHistory = ref<EmployeeHistory[]>();
+
+const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
+
+async function fetchListEmployee(opt?: {
+  fetchStats?: boolean;
+  page?: number;
+  pageSize?: number;
+  customerId?: string;
+  mobileFetch?: boolean;
+}) {
+  const resultListEmployee = await employeeStore.fetchList({
+    customerId: opt?.customerId,
+    page: opt
+      ? opt.mobileFetch
+        ? 1
+        : opt.page || currentPageEmployee.value
+      : currentPageEmployee.value,
+    pageSize: opt
+      ? opt.mobileFetch
+        ? listEmployee.value.length +
+          (employeeStats.value === listEmployee.value.length ? 1 : 0)
+        : opt.pageSize || pageSize.value
+      : pageSize.value,
+    status:
+      props.currentStatus === 'All'
+        ? undefined
+        : props.currentStatus === 'ACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+    query: props.inputSearch,
+    passport: true,
+    visa: true,
+    startDate: props.searchDate[0],
+    endDate: props.searchDate[1],
+  });
+  if (resultListEmployee) {
+    maxPageEmployee.value = Math.ceil(
+      resultListEmployee.total / pageSize.value,
+    );
+    $q.screen.xs && !(opt && opt.mobileFetch)
+      ? listEmployee.value.push(...resultListEmployee.result)
+      : (listEmployee.value = resultListEmployee.result);
+  }
+
+  if (opt && opt.fetchStats)
+    employeeStats.value = await employeeStore.getStatsEmployee();
+}
+
+async function openHistory(id: string) {
+  const res = await employeeStore.getEditHistory(id);
+  employeeHistory.value = res.reverse();
+  employeeHistoryDialog.value = true;
+}
+
+async function editEmployeeFormPersonal(id: string) {
+  await employeeFormStore.assignFormDataEmployee(id);
+  await props.fetchImageList(
+    id,
+    currentFromDataEmployee.value.selectedImage || '',
+    'employee',
+  );
+
+  employeeFormState.value.isEmployeeEdit = true;
+  employeeFormState.value.dialogType = 'edit';
+  employeeFormState.value.drawerModal = true;
+}
+
+async function openSpecificEmployee(id: string) {
+  await employeeFormStore.assignFormDataEmployee(id);
+  await props.fetchImageList(
+    id,
+    currentFromDataEmployee.value.selectedImage || '',
+    'employee',
+  );
+  employeeFormState.value.dialogType = 'info';
+  employeeFormState.value.drawerModal = true;
+}
+
+async function toggleStatusEmployee(
+  id: string,
+  status: boolean,
+  employeeName: string,
+) {
+  const res = await employeeStore.editById(id, {
+    status: !status ? 'ACTIVE' : 'INACTIVE',
+    firstNameEN: employeeName,
+  });
+  if (res && employeeFormState.value.drawerModal) {
+    currentFromDataEmployee.value.status = res.status;
+  }
+
+  await employeeFormStore.assignFormDataEmployee(id);
+  await fetchListEmployee({ mobileFetch: $q.screen.xs });
+  flowStore.rotate();
+}
+
+watch(
+  () => [
+    props.inputSearch,
+    props.searchDate,
+    props.currentStatus,
+    pageSize.value,
+  ],
+  async () => {
+    currentPageEmployee.value = 1;
+    listEmployee.value = [];
+    await fetchListEmployee({ fetchStats: true });
+
+    customerFormState.value.currentCustomerId = undefined;
+    flowStore.rotate();
+  },
+);
+
+watch(
+  () => employeeFormState.value.currentCustomerBranch,
+  (e) => {
+    if (!e) return;
+    if (employeeFormState.value.formDataEmployeeSameAddr) {
+      currentFromDataEmployee.value.address = e.address;
+      currentFromDataEmployee.value.addressEN = e.addressEN;
+      currentFromDataEmployee.value.provinceId = e.provinceId;
+      currentFromDataEmployee.value.districtId = e.districtId;
+      currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
+    }
+    currentFromDataEmployee.value.customerBranchId = e.id;
+  },
+);
+
+watch(
+  () => employeeFormState.value.formDataEmployeeSameAddr,
+  (isSame) => {
+    if (!employeeFormState.value.currentCustomerBranch) return;
+    if (isSame) {
+      currentFromDataEmployee.value.address =
+        employeeFormState.value.currentCustomerBranch.address;
+      currentFromDataEmployee.value.addressEN =
+        employeeFormState.value.currentCustomerBranch.addressEN;
+      currentFromDataEmployee.value.provinceId =
+        employeeFormState.value.currentCustomerBranch.provinceId;
+      currentFromDataEmployee.value.districtId =
+        employeeFormState.value.currentCustomerBranch.districtId;
+      currentFromDataEmployee.value.subDistrictId =
+        employeeFormState.value.currentCustomerBranch.subDistrictId;
+    }
+    currentFromDataEmployee.value.customerBranchId =
+      employeeFormState.value.currentCustomerBranch.id;
+  },
+);
+
+watch(
+  () => currentFromDataEmployee.value.dateOfBirth,
+  (v) => {
+    const isEdit =
+      employeeFormState.value.drawerModal &&
+      employeeFormState.value.isEmployeeEdit;
+    let currentFormDate = v && toISOStringWithTimezone(new Date(v));
+    let currentDate: string = '';
+
+    if (isEdit && employeeFormState.value.currentEmployee) {
+      currentDate = toISOStringWithTimezone(
+        new Date(employeeFormState.value.currentEmployee.dateOfBirth),
+      );
+    }
+
+    if (
+      employeeFormState.value.dialogModal ||
+      (isEdit && currentFormDate !== currentDate)
+    ) {
+      const age = calculateAge(
+        currentFromDataEmployee.value.dateOfBirth,
+        'year',
+      );
+      if (currentFromDataEmployee.value.dateOfBirth && Number(age) < 15) {
+        dialog({
+          color: 'warning',
+          icon: 'mdi-alert',
+          title: t('dialog.title.youngWorker15'),
+          cancelText: t('general.edit'),
+          persistent: true,
+          message: t('dialog.message.youngWorker15'),
+
+          cancel: async () => {
+            currentFromDataEmployee.value.dateOfBirth = null;
+            return;
+          },
+        });
+      }
+
+      if (
+        currentFromDataEmployee.value.dateOfBirth &&
+        Number(age) > 15 &&
+        Number(age) <= 18
+      ) {
+        dialog({
+          color: 'warning',
+          icon: 'mdi-alert',
+          title: t('dialog.title.youngWorker18'),
+          cancelText: t('general.cancel'),
+          actionText: t('general.confirm'),
+          persistent: true,
+          message: t('dialog.message.youngWorker18'),
+          action: () => {},
+          cancel: async () => {
+            currentFromDataEmployee.value.dateOfBirth = null;
+            return;
+          },
+        });
+      }
+    }
+  },
+);
+
+watch(
+  () => currentFromDataEmployee.value.image,
+  () => {
+    if (currentFromDataEmployee.value.image !== null)
+      employeeFormState.value.isImageEdit = true;
+  },
+);
+
+onMounted(async () => {
+  currentPageEmployee.value = 1;
+  listEmployee.value = [];
+  await fetchListEmployee({ fetchStats: true });
+});
+</script>
+<template>
+  <q-splitter
+    v-model="splitPercent"
+    :limits="[0, 100]"
+    class="col full-width"
+    before-class="overflow-hidden"
+    after-class="overflow-hidden"
+    :disable="$q.screen.lt.sm"
+  >
+    <template v-slot:before>
+      <div
+        class="column q-pa-md surface-1 full-height full-width"
+        style="gap: var(--size-1)"
+      >
+        <q-item
+          active
+          dense
+          active-class="employer-active"
+          class="no-padding items-center rounded full-width"
+          v-close-popup
+          clickable
+        >
+          <span class="q-px-md ellipsis">
+            {{ $t('general.all') }}
+          </span>
+        </q-item>
+      </div>
+    </template>
+
+    <template v-slot:after>
+      <div class="column full-height no-wrap">
+        <!-- employee -->
+        <template
+          v-if="listEmployee && employeeStats > 0 && currentTab === 'employee'"
+        >
+          <div
+            v-if="listEmployee.length === 0"
+            class="row col full-width items-center justify-center"
+            style="min-height: 250px"
+          >
+            <NoData :not-found="!!inputSearch" />
+          </div>
+
+          <article
+            v-if="listEmployee.length !== 0"
+            class="column scroll q-pa-md col"
+          >
+            <q-infinite-scroll
+              :offset="10"
+              @load="
+                (_, done) => {
+                  if (
+                    $q.screen.gt.xs ||
+                    currentPageEmployee === maxPageEmployee
+                  )
+                    return;
+                  currentPageEmployee = currentPageEmployee + 1;
+                  fetchListEmployee().then(() =>
+                    done(currentPageEmployee >= maxPageEmployee),
+                  );
+                }
+              "
+            >
+              <TableEmpoloyee
+                :hide-delete="!canAccess('customer', 'edit')"
+                v-model:page-size="pageSize"
+                v-model:current-page="currentPageEmployee"
+                :grid-view="gridView"
+                :list-employee="listEmployee"
+                :columns-employee="columnsEmployee"
+                :field-selected="fieldSelected"
+                @history="
+                  (item: any) => {
+                    openHistory(item.id);
+                  }
+                "
+                @view="
+                  async (item: any) => {
+                    employeeFormState.drawerModal = true;
+                    employeeFormState.isEmployeeEdit = false;
+                    employeeFormStore.assignFormDataEmployee(item.id);
+                    await fetchImageList(
+                      item.id,
+                      item.selectedImage || '',
+                      'employee',
+                    );
+                  }
+                "
+                @edit="(item: any) => editEmployeeFormPersonal(item.id)"
+                @delete="
+                  (item: any) => {
+                    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="
+                  async (item: any) => {
+                    triggerChangeStatus(item.id, item.status, item.firstNameEN);
+                  }
+                "
+              />
+              <template v-slot:loading>
+                <div
+                  v-if="
+                    $q.screen.lt.sm && currentPageEmployee !== maxPageEmployee
+                  "
+                  class="row justify-center"
+                >
+                  <q-spinner-dots color="primary" size="40px" />
+                </div>
+              </template>
+            </q-infinite-scroll>
+          </article>
+          <footer
+            v-if="listEmployee.length !== 0 && $q.screen.gt.xs"
+            class="row justify-between items-center q-px-md q-py-sm"
+          >
+            <div class="row col-4 items-center">
+              <div
+                class="app-text-muted"
+                style="width: 80px"
+                v-if="$q.screen.gt.sm"
+              >
+                {{ $t('general.recordPerPage') }}
+              </div>
+
+              <div><PaginationPageSize v-model="pageSize" /></div>
+            </div>
+
+            <div class="col-4 flex justify-center app-text-muted">
+              {{
+                $q.screen.gt.sm
+                  ? $t('general.recordsPage', {
+                      resultcurrentPage: listEmployee.length,
+                      total: employeeStats,
+                    })
+                  : $t('general.ofPage', {
+                      current: listEmployee.length,
+                      total: employeeStats,
+                    })
+              }}
+            </div>
+
+            <div class="col-4 flex justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageEmployee"
+                v-model:max-page="maxPageEmployee"
+                :fetch-data="
+                  async () => {
+                    await fetchListEmployee();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
+          </footer>
+        </template>
+      </div>
+    </template>
+  </q-splitter>
+
+  <!-- add employee -->
+  <DialogEmployee
+    :fetch-list-employee="fetchListEmployee"
+    :fetch-image-list="fetchImageList"
+    :current-tab="currentTab"
+  />
+
+  <!-- ลูกจ้าง edit employee -->
+  <DrawerEmployee
+    :fetch-list-employee="fetchListEmployee"
+    :fetch-image-list="fetchImageList"
+    :current-tab="currentTab"
+    @change-status="
+      (s) =>
+        triggerChangeStatus(
+          currentFromDataEmployee.id,
+          s,
+          currentFromDataEmployee.firstNameEN,
+        )
+    "
+  />
+
+  <DialogForm
+    :title="$t('general.historyEdit')"
+    hide-footer
+    v-model:modal="employeeHistoryDialog"
+  >
+    <div class="q-pa-md">
+      <HistoryEditComponent
+        v-if="employeeHistory"
+        v-model:history-list="employeeHistory"
+      />
+    </div>
+  </DialogForm>
+</template>
+
+<style scoped>
+.employer-active {
+  background-color: hsla(var(--info-bg) / 0.1);
+  color: hsl(var(--info-bg));
+}
+</style>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
index 0d19e8e9..7353db3c 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
@@ -336,6 +336,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>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index e2b80f13..14f7aa98 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -7,6 +7,8 @@ import { CustomerCreate } from 'stores/customer/types';
 import EmployerFormAbout from './EmployerFormAbout.vue';
 import EmployerFormAuthorized from './EmployerFormAuthorized.vue';
 import { waitAll } from 'src/stores/utils';
+import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
+import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
 import {
   FormCitizen,
   CorpFormBusinessRegistration,
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormContact.vue b/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
index 4a58439c..7f56742c 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
@@ -9,8 +9,6 @@ const contactName = defineModel<string>('contactName');
 const email = defineModel<string>('email');
 const contactTel = defineModel<string>('contactTel');
 const officeTel = defineModel<string>('officeTel');
-const agent = defineModel<string>('agent');
-
 const agentUserId = defineModel<string>('agentUserId');
 </script>
 
@@ -109,7 +107,6 @@ const agentUserId = defineModel<string>('agentUserId');
         />
       </template>
     </q-input>
-
     <SelectAgent
       :label="$t('customer.form.agent')"
       v-model:value="agentUserId"
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 5a24fcae..cb7c3718 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -22,6 +22,10 @@ import { useRoute } from 'vue-router';
 
 export const useCustomerForm = defineStore('form-customer', () => {
   const customerStore = useCustomerStore();
+  const onCreateImageList = ref<{
+    selectedImage: string;
+    list: { url: string; imgFile: File | null; name: string }[];
+  }>({ selectedImage: '', list: [] });
 
   const { t } = useI18n();
   const flowStore = useFlowStore();
@@ -84,6 +88,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     formDataOcr: Record<string, any>;
     isImageEdit: boolean;
     currentCustomerId?: string;
+    imageList: { list: string[]; selectedImage: string };
   }>({
     dialogType: 'info',
     dialogOpen: false,
@@ -100,6 +105,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     treeFile: [],
     formDataOcr: {},
     isImageEdit: false,
+    imageList: { list: [], selectedImage: '' },
   });
 
   watch(
@@ -497,6 +503,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
   }
 
   return {
+    onCreateImageList,
     tabFieldRequired,
     registerAbleBranchOption,
     state,
@@ -783,6 +790,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         }
       | undefined;
     ocr: boolean;
+    imageList: { list: string[]; selectedImage: string };
   }>({
     currentBranchId: '',
     isImageEdit: false,
@@ -807,6 +815,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     infoEmployeePersonCard: [],
     formDataEmployeeOwner: undefined,
     ocr: false,
+    imageList: { list: [], selectedImage: '' },
   });
 
   const defaultFormData: EmployeeCreate & { image?: File } = {
@@ -959,6 +968,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     state.value.currentIndexVisa = -1;
     state.value.currentIndexCheckup = -1;
     state.value.currentIndexWorkHistory = -1;
+    state.value.imageList = { list: [], selectedImage: '' };
     // state.value.currentTab = 'personalInfo';
     if (clean) {
       state.value.formDataEmployeeOwner = undefined;
@@ -1388,12 +1398,10 @@ export const useEmployeeForm = defineStore('form-employee', () => {
                 statusSave: true,
               })),
         ),
-        employeeOtherInfo: structuredClone(
-          {
-            ...payload.employeeOtherInfo,
-            statusSave: !!payload.employeeOtherInfo?.id ? true : false,
-          } || {},
-        ),
+        employeeOtherInfo: structuredClone({
+          ...(payload.employeeOtherInfo ?? {}),
+          statusSave: true,
+        }),
         employeeWork: structuredClone(
           payload.employeeWork?.length === 0
             ? state.value.dialogModal
diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index d17fd1af..ca6dd6ba 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -115,6 +115,10 @@ const useCustomerStore = defineStore('api-customer', () => {
       customerType?: CustomerType;
       startDate?: string;
       endDate?: string;
+      businessType?: string;
+      province?: string;
+      district?: string;
+      subDistrict?: string;
     },
     Data extends Pagination<
       (Customer &
@@ -484,6 +488,10 @@ const useCustomerStore = defineStore('api-customer', () => {
     activeBranchOnly?: boolean;
     startDate?: string | Date;
     endDate?: string | Date;
+    businessType?: string;
+    province?: string;
+    district?: string;
+    subDistrict?: string;
   }) {
     let url = baseUrl + '/' + 'customer-export';