From 9b0b57ac3f3182a70958f5274c94bcd17b7814a2 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 17 Sep 2025 17:20:47 +0700
Subject: [PATCH] fix: customer & employee image list

---
 .../03_customer-management/DialogEmployee.vue | 1646 ++++++++++++++++
 .../03_customer-management/DrawerEmployee.vue |   99 +
 .../03_customer-management/BranchPage.vue     |   51 +-
 src/pages/03_customer-management/MainPage.vue |   12 +-
 .../03_customer-management/TabCustomer.vue    |   10 +-
 .../03_customer-management/TabEmployee.vue    | 1649 +----------------
 src/pages/03_customer-management/form.ts      |    5 +
 7 files changed, 1816 insertions(+), 1656 deletions(-)
 create mode 100644 src/components/03_customer-management/DialogEmployee.vue

diff --git a/src/components/03_customer-management/DialogEmployee.vue b/src/components/03_customer-management/DialogEmployee.vue
new file mode 100644
index 00000000..cfd4088a
--- /dev/null
+++ b/src/components/03_customer-management/DialogEmployee.vue
@@ -0,0 +1,1646 @@
+<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="
+          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
index 5cbdde66..c5e94e79 100644
--- a/src/components/03_customer-management/DrawerEmployee.vue
+++ b/src/components/03_customer-management/DrawerEmployee.vue
@@ -22,6 +22,7 @@ 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';
@@ -58,6 +59,7 @@ const {
   state: employeeFormState,
   currentFromDataEmployee,
   refreshImageState,
+  onCreateImageList,
 } = storeToRefs(employeeFormStore);
 const { state: customerFormState, currentFormData: customerFormData } =
   storeToRefs(customerFormStore);
@@ -71,7 +73,13 @@ const props = defineProps<{
     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<{
@@ -1668,4 +1676,95 @@ defineEmits<{
       </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/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index ef8ab8f5..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>
@@ -641,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',
+                      );
                     }
                   "
                 />
@@ -1004,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 759e659c..5c1bef7e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -20,6 +20,7 @@ import {
   CustomerType,
 } from 'stores/customer/types';
 
+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';
@@ -176,6 +177,7 @@ async function createCustomerForm(customerType: 'CORP' | 'PERS') {
 
 function createEmployeeForm() {
   employeeFormStore.resetFormDataEmployee(true);
+  employeeFormState.value.currentEmployee = null;
   employeeFormState.value.dialogType = 'create';
   employeeFormState.value.dialogModal = true;
   employeeFormState.value.isEmployeeEdit = true;
@@ -190,11 +192,16 @@ async function fetchImageList(
     type === 'customer'
       ? await customerStore.fetchImageListById(id)
       : await employeeStore.fetchImageListById(id);
-  imageList.value = {
+
+  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;
 }
 
@@ -752,7 +759,6 @@ onMounted(async () => await init());
           ref="refTabCustomer"
           v-model:customer-type-selected="customerTypeSelected"
           v-model:stats-customer-type="statsCustomerType"
-          v-model:img-list="imageList"
           :filter-address="filterAddress"
           :filter-business-type="filterBusinessType"
           :gridView
@@ -769,7 +775,6 @@ onMounted(async () => await init());
           v-if="currentTab === 'employee'"
           ref="refTabEmployee"
           v-model:employee-stats="employeeStats"
-          v-model:img-list="imageList"
           :gridView
           :searchDate
           :currentTab
@@ -792,6 +797,7 @@ onMounted(async () => await init());
         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'
diff --git a/src/pages/03_customer-management/TabCustomer.vue b/src/pages/03_customer-management/TabCustomer.vue
index 06c28b57..054e7487 100644
--- a/src/pages/03_customer-management/TabCustomer.vue
+++ b/src/pages/03_customer-management/TabCustomer.vue
@@ -93,9 +93,6 @@ const {
   refreshImageState,
 } = storeToRefs(employeeFormStore);
 
-const imageList = defineModel<{ selectedImage: string; list: string[] }>(
-  'imgList',
-);
 const statsCustomerType = defineModel<CustomerStats>('statsCustomerType', {
   default: {
     CORP: 0,
@@ -1855,7 +1852,7 @@ onMounted(async () => {
     v-model:dialog-state="customerFormState.imageDialog"
     v-model:file="customerFormData.image"
     v-model:image-url="customerFormState.customerImageUrl"
-    v-model:data-list="imageList"
+    v-model:data-list="customerFormState.imageList"
     v-model:on-create-data-list="onCreateImageList"
     :on-create="
       customerFormState.dialogModal && !customerFormState.editCustomerId
@@ -1905,7 +1902,9 @@ onMounted(async () => {
         } else {
           refreshImageState = true;
           customerFormData.selectedImage = v;
-          imageList ? (imageList.selectedImage = v) : '';
+          customerFormState.imageList
+            ? (customerFormState.imageList.selectedImage = v)
+            : '';
           customerFormState.customerImageUrl = `${baseUrl}/customer/${customerFormState.editCustomerId && customerFormState.editCustomerId}/image/${v}`;
           customerFormStore.resetForm();
           await customerFormStore.submitFormCustomer();
@@ -1970,6 +1969,7 @@ onMounted(async () => {
 
   <DrawerEmployee
     :fetch-list-employee="fetchListEmployee"
+    :fetch-image-list="fetchImageList"
     :current-tab="currentTab"
   />
 </template>
diff --git a/src/pages/03_customer-management/TabEmployee.vue b/src/pages/03_customer-management/TabEmployee.vue
index 0869ef60..81348622 100644
--- a/src/pages/03_customer-management/TabEmployee.vue
+++ b/src/pages/03_customer-management/TabEmployee.vue
@@ -3,108 +3,40 @@ 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 {
   PaginationComponent,
   PaginationPageSize,
   ImageUploadDialog,
-  TooltipComponent,
-  ProfileBanner,
   DialogForm,
-  DrawerInfo,
-  ItemCard,
-  SideMenu,
   NoData,
 } from 'src/components';
-import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
+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 BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
-import FormPerson from 'components/02_personnel-management/FormPerson.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 FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
-import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
 import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
-import { AddressForm } from 'components/form';
-import {
-  UploadFileGroup,
-  FormTm6,
-  NoticeJobEmployment,
-} from 'components/upload-file';
-import {
-  AddButton,
-  EditButton,
-  DeleteButton,
-  SaveButton,
-  UndoButton,
-} from 'components/button';
 
-import { Status } from 'src/stores/types';
-import { Employee, EmployeeHistory } from 'src/stores/employee/types';
-import { runOcr, parseResultMRZ } from 'src/utils/ocr';
-import useOcrStore from 'stores/ocr';
 import useFlowStore from 'src/stores/flow';
 import useEmployeeStore from 'src/stores/employee';
-import useOptionStore from 'src/stores/options';
-import {
-  baseUrl,
-  setPrefixName,
-  waitAll,
-  dialog,
-  notify,
-  resetScrollBar,
-  capitalizeFirstLetter,
-  dialogCheckData,
-  canAccess,
-} from 'src/stores/utils';
-import {
-  dateFormat,
-  calculateAge,
-  toISOStringWithTimezone,
-} from 'src/utils/datetime';
+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 {
-  columnsCustomer,
-  columnsEmployee,
-  uploadFileListEmployee,
-  columnsAttachment,
-  dialogCreateCustomerItem,
-} from './constant';
+import { columnsEmployee } from './constant';
 
 const $q = useQuasar();
-const route = useRoute();
-const router = useRouter();
 const flowStore = useFlowStore();
 const employeeStore = useEmployeeStore();
 const employeeFormStore = useEmployeeForm();
 const customerFormStore = useCustomerForm();
-const optionStore = useOptionStore();
-const ocrStore = useOcrStore();
-const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
-const { t, locale } = useI18n();
-const {
-  state: employeeFormState,
-  currentFromDataEmployee,
-  onCreateImageList,
-  statusEmployeeCreate,
-  refreshImageState,
-} = storeToRefs(employeeFormStore);
-const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
-  employeeFormStore;
-const {
-  state: customerFormState,
-  currentFormData: customerFormData,
-  registerAbleBranchOption,
-  tabFieldRequired,
-} = storeToRefs(customerFormStore);
+const { t } = useI18n();
+const { state: employeeFormState, currentFromDataEmployee } =
+  storeToRefs(employeeFormStore);
+const { deleteEmployeeById } = employeeFormStore;
+const { state: customerFormState } = storeToRefs(customerFormStore);
 
 const employeeStats = defineModel('employeeStats', { default: 0 });
-const imageList = defineModel<{ selectedImage: string; list: string[] }>(
-  'imgList',
-);
 
 const props = defineProps<{
   currentTab: 'employee' | 'employer';
@@ -539,1563 +471,16 @@ onMounted(async () => {
   </q-splitter>
 
   <!-- 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: 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="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;
-          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 || 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>
+  <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) =>
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index f2ce762d..cb7c3718 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -88,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,
@@ -104,6 +105,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     treeFile: [],
     formDataOcr: {},
     isImageEdit: false,
+    imageList: { list: [], selectedImage: '' },
   });
 
   watch(
@@ -788,6 +790,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         }
       | undefined;
     ocr: boolean;
+    imageList: { list: string[]; selectedImage: string };
   }>({
     currentBranchId: '',
     isImageEdit: false,
@@ -812,6 +815,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     infoEmployeePersonCard: [],
     formDataEmployeeOwner: undefined,
     ocr: false,
+    imageList: { list: [], selectedImage: '' },
   });
 
   const defaultFormData: EmployeeCreate & { image?: File } = {
@@ -964,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;