diff --git a/src/components/03_customer-management/DrawerEmployee.vue b/src/components/03_customer-management/DrawerEmployee.vue
new file mode 100644
index 00000000..c7155931
--- /dev/null
+++ b/src/components/03_customer-management/DrawerEmployee.vue
@@ -0,0 +1,1670 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
+
+import FormPerson from '../02_personnel-management/FormPerson.vue';
+import { ProfileBanner, DrawerInfo, SideMenu, NoData } from 'src/components';
+import {
+  AddButton,
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
+import AddressForm from '../form/AddressForm.vue';
+import NoticeJobEmployment from '../upload-file/NoticeJobEmployment.vue';
+import UploadFileGroup from '../upload-file/UploadFileGroup.vue';
+import BasicInformation from './employee/BasicInformation.vue';
+import FormEmployeeHealthCheck from './FormEmployeeHealthCheck.vue';
+import FormEmployeeOther from './FormEmployeeOther.vue';
+import FormEmployeePassport from './FormEmployeePassport.vue';
+import FormEmployeeVisa from './FormEmployeeVisa.vue';
+import FormEmployeeWorkHistory from './FormEmployeeWorkHistory.vue';
+import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
+
+import useOcrStore from 'stores/ocr';
+import useOptionStore from 'src/stores/options';
+import useEmployeeStore from 'src/stores/employee';
+import { dateFormat } from 'src/utils/datetime';
+import {
+  useCustomerForm,
+  useEmployeeForm,
+} from 'src/pages/03_customer-management/form';
+import {
+  uploadFileListEmployee,
+  columnsAttachment,
+} from 'src/pages/03_customer-management/constant';
+import { runOcr, parseResultMRZ } from 'src/utils/ocr';
+import {
+  baseUrl,
+  setPrefixName,
+  waitAll,
+  notify,
+  resetScrollBar,
+  dialogCheckData,
+  canAccess,
+} from 'src/stores/utils';
+
+const route = useRoute();
+const ocrStore = useOcrStore();
+const optionStore = useOptionStore();
+const employeeStore = useEmployeeStore();
+const employeeFormStore = useEmployeeForm();
+const customerFormStore = useCustomerForm();
+const { t, locale } = useI18n();
+const { employeeConfirmUnsave, deleteEmployeeById } = employeeFormStore;
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  refreshImageState,
+} = storeToRefs(employeeFormStore);
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+
+const props = defineProps<{
+  currentTab: string;
+  fetchListEmployee: (opt?: {
+    fetchStats?: boolean;
+    page?: number;
+    pageSize?: number;
+    customerId?: string;
+    mobileFetch?: boolean;
+  }) => Promise<void>;
+}>();
+const mrz = defineModel<Awaited<ReturnType<typeof parseResultMRZ>>>('mrz');
+
+defineEmits<{
+  (e: 'fetchEmployee');
+  (e: 'changeStatus', status: string);
+}>();
+</script>
+
+<template>
+  <DrawerInfo
+    v-if="!!employeeFormState.currentEmployee"
+    hide-action
+    v-model:drawer-open="employeeFormState.drawerModal"
+    :close="
+      () => {
+        resetScrollBar('drawer-employee-form-content');
+      }
+    "
+    :title="
+      setPrefixName(
+        {
+          namePrefix: employeeFormState.currentEmployee.namePrefix,
+          firstName:
+            employeeFormState.currentEmployee.firstName ||
+            employeeFormState.currentEmployee.firstNameEN,
+          lastName: employeeFormState.currentEmployee.lastName,
+          firstNameEN: employeeFormState.currentEmployee.firstNameEN,
+          lastNameEN: employeeFormState.currentEmployee.lastNameEN,
+        },
+        { locale },
+      )
+    "
+    :badge-class="
+      currentFromDataEmployee.gender === 'male'
+        ? 'app-bg-male text-white'
+        : currentFromDataEmployee.gender === 'female'
+          ? 'app-bg-female text-white'
+          : ''
+    "
+    :submit="
+      async () => {
+        if (employeeFormState.currentTab === 'personalInfo') {
+          await employeeFormStore.submitPersonal();
+          employeeFormState.dialogType = 'info';
+          employeeFormState.isEmployeeEdit = false;
+        }
+
+        if (employeeFormState.currentTab === 'passport') {
+          await employeeFormStore.submitPassport();
+        }
+
+        if (employeeFormState.currentTab === 'visa') {
+          await employeeFormStore.submitVisa();
+        }
+
+        if (employeeFormState.currentTab === 'healthCheck') {
+          await employeeFormStore.submitHealthCheck();
+        }
+
+        if (employeeFormState.currentTab === 'workHistory') {
+          await employeeFormStore.submitWorkHistory();
+        }
+
+        if (employeeFormState.currentTab === 'other') {
+          await employeeFormStore.submitOther();
+        }
+
+        if (route.name !== 'CustomerBranchManagement') {
+          await fetchListEmployee(
+            currentTab === 'employer'
+              ? {
+                  page: 1,
+                  pageSize: 999,
+                  customerId: customerFormState.currentCustomerId,
+                }
+              : { mobileFetch: $q.screen.xs },
+          );
+        }
+
+        employeeFormState.isEmployeeEdit = false;
+      }
+    "
+    :before-close="
+      () => {
+        if (employeeFormStore.isFormDataDifferent()) {
+          employeeConfirmUnsave();
+          return true;
+        }
+
+        employeeFormState.currentTab = 'personalInfo';
+        return false;
+      }
+    "
+  >
+    <div class="column full-height">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <ProfileBanner
+          :prefix="employeeFormState.currentEmployee.firstName"
+          hideFade
+          @update:current-tab="
+            () => {
+              employeeFormState.isImageEdit = false;
+              employeeFormStore.resetFormDataEmployee();
+              employeeFormState.isEmployeeEdit = false;
+              employeeFormState.dialogType = 'info';
+              employeeFormState.currentIndexPassport = -1;
+            }
+          "
+          @view="
+            () => {
+              employeeFormState.imageDialog = true;
+              employeeFormState.isImageEdit = false;
+            }
+          "
+          @edit="
+            employeeFormState.imageDialog = employeeFormState.isImageEdit = true
+          "
+          @update:toggle-status="
+            (v) => {
+              if (currentFromDataEmployee.id !== undefined)
+                $emit('changeStatus', v);
+            }
+          "
+          :active="currentFromDataEmployee.status !== 'INACTIVE'"
+          use-toggle
+          color="white"
+          icon="mdi-account-outline"
+          :bg-color="
+            employeeFormState.profileUrl
+              ? 'white'
+              : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
+          "
+          v-model:current-tab="employeeFormState.currentTab"
+          v-model:toggle-status="currentFromDataEmployee.status"
+          fallback-cover="/images/employee-banner.png"
+          :title="
+            employeeFormState.currentEmployee
+              ? setPrefixName(
+                  {
+                    namePrefix: employeeFormState.currentEmployee.namePrefix,
+                    firstName:
+                      employeeFormState.currentEmployee.firstName ||
+                      employeeFormState.currentEmployee.firstNameEN,
+                    lastName: employeeFormState.currentEmployee.lastName,
+                    firstNameEN: employeeFormState.currentEmployee.firstNameEN,
+                    lastNameEN: employeeFormState.currentEmployee.lastNameEN,
+                  },
+                  { locale },
+                )
+              : '-'
+          "
+          :caption="currentFromDataEmployee.code"
+          :img="
+            `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
+              refreshImageState ? `?ts=${Date.now()}` : '',
+            ) || null
+          "
+          :fallbackImg="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
+          :tabs-list="[
+            {
+              name: 'personalInfo',
+              label: $t('customerEmployee.form.group.personalInfo'),
+            },
+            {
+              name: 'passport',
+              label: $t('customerEmployee.fileType.passport'),
+            },
+            {
+              name: 'visa',
+              label: $t('customerEmployee.form.group.visa'),
+            },
+            {
+              name: 'healthCheck',
+              label: $t('customerEmployee.form.group.healthCheck'),
+            },
+            {
+              name: 'workHistory',
+              label: $t('customerEmployee.form.group.workHistory'),
+            },
+            { name: 'other', label: $t('customerEmployee.form.group.other') },
+          ]"
+          :toggle-title="$t('status.title')"
+        />
+      </div>
+      <div
+        style="flex: 1; width: 100%; overflow-y: auto"
+        class="column relative-position"
+        id="drawer-employee-form"
+        :class="{
+          'q-px-lg q-pb-lg': $q.screen.gt.sm,
+          'q-px-md q-pb-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <div
+          class="col full-width surface-1 rounded bordered row"
+          :key="String(!employeeFormState.isEmployeeEdit)"
+        >
+          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
+            <div class="q-py-md q-pl-md q-pr-sm">
+              <SideMenu
+                :menu="
+                  [
+                    {
+                      name: $t('form.field.basicInformation'),
+                      anchor: 'drawer-form-information',
+                      tab: 'personalInfo',
+                    },
+                    {
+                      name: $t('customerEmployee.form.group.personalInfo'),
+                      anchor: 'drawer-form-personal',
+                      tab: 'personalInfo',
+                    },
+                    {
+                      name: $t('form.address'),
+                      anchor: 'drawer-form-personal-address',
+                      tab: 'personalInfo',
+                    },
+
+                    {
+                      name: $t('general.uploadFile'),
+                      anchor: 'drawer-upload-file',
+                      tab: 'personalInfo',
+                    },
+
+                    {
+                      name: $t('customerEmployee.form.group.passport'),
+                      anchor: 'drawer-passport',
+                      tab: 'passport',
+                      useBtn:
+                        currentFromDataEmployee.employeePassport?.filter(
+                          (item) => {
+                            if (item.id === undefined) {
+                              return true;
+                            }
+                            return false;
+                          },
+                        ).length === 0 &&
+                        employeeFormState.currentIndexPassport === -1
+                          ? true
+                          : false,
+                    },
+                    ...(currentFromDataEmployee.employeePassport?.map(
+                      (v, i) => ({
+                        name: dateFormat(v.expireDate),
+                        anchor: `drawer-employee-employeePassport-${i}`,
+                        tab: 'passport',
+                        sub: true,
+                      }),
+                    ) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.visa'),
+                      anchor: 'drawer-visa',
+                      tab: 'visa',
+                      useBtn:
+                        currentFromDataEmployee.employeeVisa?.filter((item) => {
+                          if (item.id === undefined) {
+                            return true;
+                          }
+                          return false;
+                        }).length === 0 &&
+                        employeeFormState.currentIndexVisa === -1
+                          ? true
+                          : false,
+                    },
+
+                    ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
+                      name: dateFormat(v.expireDate),
+                      anchor: `drawer-employee-visa-${i}`,
+                      tab: 'visa',
+                      sub: true,
+                    })) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.healthCheck'),
+                      anchor: 'drawer-employee-checkup',
+                      tab: 'healthCheck',
+                      useBtn:
+                        currentFromDataEmployee.employeeCheckup?.filter(
+                          (item) => {
+                            if (item.id === undefined) {
+                              return true;
+                            }
+                            return false;
+                          },
+                        ).length === 0 &&
+                        employeeFormState.currentIndexCheckup === -1
+                          ? true
+                          : false,
+                    },
+
+                    ...(currentFromDataEmployee.employeeCheckup?.map(
+                      (_v, i) => ({
+                        name: $t('general.times', { number: i + 1 }),
+                        anchor: `drawer-employee-checkup-${i}`,
+                        tab: 'healthCheck',
+                      }),
+                    ) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.workHistory'),
+                      anchor: 'drawer-employee-work-history',
+                      tab: 'workHistory',
+                      useBtn:
+                        currentFromDataEmployee.employeeWork?.filter((item) => {
+                          if (item.id === undefined) {
+                            return true;
+                          }
+                          return false;
+                        }).length === 0 &&
+                        employeeFormState.currentIndexWorkHistory === -1
+                          ? true
+                          : false,
+                    },
+
+                    ...(currentFromDataEmployee.employeeWork?.map((_v, i) => ({
+                      name: $t('general.times', { number: i + 1 }),
+                      anchor: `drawer-employee-work-history-${i}`,
+                      tab: 'workHistory',
+                    })) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.family'),
+                      anchor: 'drawer-other',
+                      tab: 'other',
+                    },
+                  ].filter((v) => v.tab === employeeFormState.currentTab)
+                "
+                background="transparent"
+                :active="{
+                  background: 'hsla(var(--blue-6-hsl) / .2)',
+                  foreground: 'var(--blue-6)',
+                }"
+                scroll-element="#drawer-employee-form-content"
+              >
+                <template v-slot:btn-drawer-passport>
+                  <q-btn
+                    id="form-add-passport"
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    padding="0px 0px"
+                    style="color: var(--stone-9)"
+                    @click.stop="employeeFormStore.addPassport()"
+                  />
+                </template>
+
+                <template v-slot:btn-drawer-visa>
+                  <q-btn
+                    id="form-add-visa"
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    style="color: var(--stone-9)"
+                    @click.stop="employeeFormStore.addVisa()"
+                  />
+                </template>
+
+                <template v-slot:btn-drawer-employee-checkup>
+                  <q-btn
+                    id="form-add-checkup"
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    style="color: var(--stone-9)"
+                    @click.stop="employeeFormStore.addCheckup()"
+                  />
+                </template>
+
+                <template v-slot:btn-drawer-employee-work-history>
+                  <q-btn
+                    id="form-add-work-history"
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    style="color: var(--stone-9)"
+                    @click.stop="employeeFormStore.addWorkHistory()"
+                  />
+                </template>
+              </SideMenu>
+            </div>
+          </div>
+          <div
+            class="col-12 col-md-10 row"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
+            }"
+            id="drawer-employee-form-content"
+            style="height: 100%; overflow-y: auto"
+          >
+            <template v-if="employeeFormState.currentTab === 'personalInfo'">
+              <div
+                class="rounded row q-py-sm q-mx-lg q-px-md"
+                style="position: absolute; z-index: 999; right: 0; top: 0"
+                v-if="currentFromDataEmployee.status !== 'INACTIVE'"
+              >
+                <div class="surface-1 row rounded">
+                  <UndoButton
+                    v-if="employeeFormState.isEmployeeEdit"
+                    id="btn-info-basic-undo"
+                    icon-only
+                    @click="
+                      () => {
+                        employeeFormStore.resetFormDataEmployee();
+                        employeeFormState.isEmployeeEdit = false;
+                        employeeFormState.dialogType = 'info';
+                      }
+                    "
+                    type="button"
+                  />
+                  <SaveButton
+                    v-if="employeeFormState.isEmployeeEdit"
+                    id="btn-info-basic-save"
+                    icon-only
+                    type="submit"
+                  />
+                  <EditButton
+                    v-if="!employeeFormState.isEmployeeEdit"
+                    id="btn-info-basic-edit"
+                    icon-only
+                    @click="
+                      () => {
+                        employeeFormState.isEmployeeEdit = true;
+                        employeeFormState.dialogType = 'edit';
+                      }
+                    "
+                    type="button"
+                  />
+                  <DeleteButton
+                    v-if="
+                      !employeeFormState.isEmployeeEdit &&
+                      canAccess('customer', 'edit')
+                    "
+                    id="btn-info-basic-delete"
+                    icon-only
+                    @click="
+                      () =>
+                        deleteEmployeeById({
+                          id: currentFromDataEmployee.id,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        })
+                    "
+                    type="button"
+                  />
+                </div>
+              </div>
+              <BasicInformation
+                no-action
+                id="drawer-form-information"
+                prefix-id="drawer-info-employee"
+                dense
+                outlined
+                title="form.field.basicInformation"
+                :readonly="!employeeFormState.isEmployeeEdit"
+                v-model:customer-branch-id="employeeFormState.currentBranchId"
+                v-model:current-customer-branch="
+                  employeeFormState.currentCustomerBranch
+                "
+                v-model:employee-id="employeeFormState.currentEmployeeCode"
+                v-model:nrc-no="currentFromDataEmployee.nrcNo"
+                v-model:code="currentFromDataEmployee.code"
+                class="q-mb-xl"
+              />
+              <FormPerson
+                id="drawer-form-personal"
+                prefix-id="drawer-info-employee"
+                dense
+                outlined
+                employee
+                separator
+                title="customerEmployee.form.group.personalInfo"
+                :readonly="!employeeFormState.isEmployeeEdit"
+                v-model:prefix-name="currentFromDataEmployee.namePrefix"
+                v-model:first-name="currentFromDataEmployee.firstName"
+                v-model:last-name="currentFromDataEmployee.lastName"
+                v-model:first-name-en="currentFromDataEmployee.firstNameEN"
+                v-model:last-name-en="currentFromDataEmployee.lastNameEN"
+                v-model:mid-name="currentFromDataEmployee.middleName"
+                v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
+                v-model:gender="currentFromDataEmployee.gender"
+                v-model:birth-date="currentFromDataEmployee.dateOfBirth"
+                v-model:nationality="currentFromDataEmployee.nationality"
+                class="q-mb-xl"
+              />
+              <AddressForm
+                id="drawer-form-personal-address"
+                employee
+                v-model:address="currentFromDataEmployee.address"
+                v-model:address-en="currentFromDataEmployee.addressEN"
+                v-model:moo="currentFromDataEmployee.moo"
+                v-model:moo-en="currentFromDataEmployee.mooEN"
+                v-model:soi="currentFromDataEmployee.soi"
+                v-model:soi-en="currentFromDataEmployee.soiEN"
+                v-model:street="currentFromDataEmployee.street"
+                v-model:street-en="currentFromDataEmployee.streetEN"
+                v-model:province-id="currentFromDataEmployee.provinceId"
+                v-model:district-id="currentFromDataEmployee.districtId"
+                v-model:sub-district-id="currentFromDataEmployee.subDistrictId"
+                v-model:same-with-employer="
+                  employeeFormState.formDataEmployeeSameAddr
+                "
+                :readonly="!employeeFormState.isEmployeeEdit"
+                :disabledRule="!employeeFormState.isEmployeeEdit"
+                prefix-id="drawer-info-personnel"
+                dense
+                class="q-mb-xl"
+              />
+
+              <div class="row" id="drawer-upload-file">
+                <div class="col-12 q-pb-sm text-weight-bold text-body1">
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-upload"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t(`general.uploadFile`) }}
+                </div>
+              </div>
+              <UploadFileGroup
+                v-model:current-id="currentFromDataEmployee.id"
+                v-model="currentFromDataEmployee.file"
+                hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
+                :group-list="uploadFileListEmployee"
+                :menu="uploadFileListEmployee"
+                :columns="columnsAttachment"
+                @submit="
+                  async (group, allMeta) => {
+                    if (allMeta === undefined) return;
+
+                    if (group === 'passport') {
+                      const fullName = allMeta['full_name'].split(' ');
+                      let tempValue: {
+                        oldData: { nameField: string; value: string }[];
+                        newData: { nameField: string; value: string }[];
+                      } = { oldData: [], newData: [] };
+
+                      if (
+                        currentFromDataEmployee.gender !== '' &&
+                        currentFromDataEmployee.gender !== allMeta['sex']
+                      ) {
+                        tempValue.oldData.push({
+                          nameField: $t('form.gender'),
+                          value: $t(
+                            `general.${currentFromDataEmployee.gender}`,
+                          ),
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('form.gender'),
+                          value: $t(`general.${allMeta['sex']}`),
+                        });
+                      }
+
+                      if (currentFromDataEmployee.firstName !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('personnel.form.firstName'),
+                          value: currentFromDataEmployee.firstName,
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('personnel.form.firstName'),
+                          value: fullName[0],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.lastName !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('personnel.form.lastName'),
+                          value: currentFromDataEmployee.lastName,
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('personnel.form.lastName'),
+                          value: fullName[1],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.nationality !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('general.nationality'),
+                          value: currentFromDataEmployee.nationality || '',
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('general.nationality'),
+                          value: allMeta['nationality'],
+                        });
+                      }
+
+                      dialogCheckData({
+                        action: async () => {
+                          currentFromDataEmployee.gender = allMeta['sex'];
+                          currentFromDataEmployee.firstName = fullName[0];
+                          currentFromDataEmployee.lastName = fullName[1];
+                          currentFromDataEmployee.nationality =
+                            allMeta['nationality'];
+                        },
+                        checkData: () => {
+                          return tempValue;
+                        },
+                        cancel: () => {
+                          if (!currentFromDataEmployee.gender) {
+                            currentFromDataEmployee.gender = allMeta['gender'];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.lastName) {
+                            currentFromDataEmployee.lastName = fullName[1];
+                          }
+
+                          if (!currentFromDataEmployee.nationality) {
+                            currentFromDataEmployee.nationality =
+                              allMeta['nationality'];
+                          }
+                        },
+                      });
+                    }
+                  }
+                "
+                :ocr="
+                  async (group, file) => {
+                    if (group === 'passport') {
+                      mrz = await runOcr(file, parseResultMRZ);
+
+                      if (mrz) {
+                        const mapMrz = Object.entries(mrz.result || {}).map(
+                          ([key, value]) => ({
+                            name: key,
+                            value: String(value),
+                          }),
+                        );
+
+                        const tempValue = {
+                          status: true,
+                          group,
+                          meta: mapMrz,
+                        };
+
+                        return tempValue;
+                      }
+                    }
+                    if (group === 'visa') {
+                      const res = await ocrStore.sendOcr({
+                        file: file,
+                        category: group,
+                      });
+
+                      if (res) {
+                        const tempValue = {
+                          status: true,
+                          group,
+                          meta: res.fields,
+                        };
+
+                        return tempValue;
+                      }
+                    }
+
+                    return { status: true, group, meta: [] };
+                  }
+                "
+                :auto-save="currentFromDataEmployee.id !== ''"
+                :download="
+                  (obj) => {
+                    if (obj.group !== 'attachment') {
+                      employeeStore.getFile({
+                        parentId: currentFromDataEmployee.id || '',
+                        group: obj.group,
+                        fileId: obj._meta.id,
+                        download: true,
+                      });
+                    } else {
+                      employeeStore.getAttachment({
+                        parentId: currentFromDataEmployee.id || '',
+                        name: obj._meta.name,
+                        download: true,
+                      });
+                    }
+                  }
+                "
+                :delete-item="
+                  async (obj) => {
+                    let status: boolean = false;
+                    const res = await employeeStore.delMeta({
+                      parentId: currentFromDataEmployee.id || '',
+                      group: obj.group,
+                      metaId: obj._meta.id,
+                    });
+
+                    if (res) {
+                      status = true;
+                    }
+
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
+                    );
+
+                    return status;
+                  }
+                "
+                :save="
+                  async (
+                    group: 'passport' | 'visa' | 'attachment',
+                    _meta: any,
+                    file: File | undefined,
+                  ) => {
+                    let status: boolean = false;
+                    if (group === 'passport' || group === 'visa') {
+                      if (file !== undefined && currentFromDataEmployee.id) {
+                        const res = await employeeStore.postMeta({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          meta: _meta,
+                          file,
+                        });
+
+                        if (res) {
+                          status = true;
+                        }
+                      } else {
+                        const {
+                          id,
+                          employeeId,
+                          createdAt,
+                          updatedAt,
+                          ...payload
+                        } = _meta;
+
+                        const res = await employeeStore.putMeta({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          metaId: _meta.id,
+                          meta: payload,
+                          file,
+                        });
+                        if (res) {
+                          status = true;
+                        }
+                      }
+                    } else {
+                      if (file !== undefined) {
+                        await employeeStore.uploadAttachment(
+                          currentFromDataEmployee.id || '',
+                          file,
+                          file.name,
+                        );
+                        status = true;
+                      }
+                    }
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
+                    );
+                    return status;
+                  }
+                "
+                :get-file-list="
+                  async (group: 'passport' | 'visa' | 'attachment') => {
+                    if (
+                      !!currentFromDataEmployee.id &&
+                      group !== 'attachment'
+                    ) {
+                      const resMeta = await employeeStore.getMetaList({
+                        parentId: currentFromDataEmployee.id,
+                        group,
+                      });
+
+                      const tempValue = resMeta.map(async (i: any) => {
+                        return {
+                          _meta: { ...i },
+                          name: `${group}-${dateFormat(i.expireDate)}` || '',
+                          group: group,
+                          url: await employeeStore.getFile({
+                            parentId: currentFromDataEmployee.id || '',
+                            group,
+                            fileId: i.id,
+                          }),
+                          file: undefined,
+                        };
+                      });
+
+                      return await waitAll(tempValue);
+                    } else {
+                      const res = await employeeStore.listAttachment({
+                        parentId: currentFromDataEmployee.id || '',
+                      });
+
+                      const tempValue = (res as string[]).map(
+                        async (i: any) => {
+                          return {
+                            _meta: { id: i, name: i },
+                            name: i || '',
+                            group: group,
+                            url: await employeeStore.getAttachment({
+                              parentId: currentFromDataEmployee.id || '',
+                              name: i,
+                            }),
+                            file: undefined,
+                          };
+                        },
+                      );
+
+                      return await waitAll(tempValue);
+                    }
+                  }
+                "
+              >
+                <template #form="{ mode, meta, isEdit }">
+                  <!-- <FormCitizen
+                    v-if="mode === 'citizen' && meta"
+                    orc
+                    ra
+                    :readonly="!isEdit"
+                    v-model:citizen-id="meta.citizenId"
+                    v-model:birth-date="meta.birthDate"
+                    v-model:first-name="meta.firstName"
+                    v-model:first-name-en="meta.firstNameEN"
+                    v-model:last-name="meta.lastName"
+                    v-model:last-name-en="meta.lastNameEN"
+                    v-model:address="meta.address"
+                  /> -->
+
+                  <FormEmployeePassport
+                    v-if="mode === 'passport' && meta"
+                    prefix-id="drawer-info-employee"
+                    id="form-passport"
+                    dense
+                    outlined
+                    separator
+                    ocr
+                    :title="$t('customerEmployee.form.group.passport')"
+                    :readonly="!isEdit"
+                    v-model:birth-country="meta.birthCountry"
+                    v-model:previous-passportRef="meta.previousPassportRef"
+                    v-model:issue-place="meta.issuePlace"
+                    v-model:issue-country="meta.issueCountry"
+                    v-model:issue-date="meta.issueDate"
+                    v-model:type="meta.type"
+                    v-model:expire-date="meta.expireDate"
+                    v-model:birth-date="meta.birthDate"
+                    v-model:worker-status="meta.workerStatus"
+                    v-model:nationality="meta.nationality"
+                    v-model:gender="meta.gender"
+                    v-model:last-name-en="meta.lastNameEN"
+                    v-model:last-name="meta.lastName"
+                    v-model:middle-name-en="meta.middleNameEN"
+                    v-model:middle-name="meta.middleName"
+                    v-model:first-name-en="meta.firstNameEN"
+                    v-model:first-name="meta.firstName"
+                    v-model:name-prefix="meta.namePrefix"
+                    v-model:passport-number="meta.number"
+                  ></FormEmployeePassport>
+                  <FormEmployeeVisa
+                    v-if="mode === 'visa' && meta"
+                    prefix-id="drawer-info-employee"
+                    id="form-visa"
+                    ocr
+                    dense
+                    outlined
+                    :title="$t('customerEmployee.form.group.visa')"
+                    :readonly="!isEdit"
+                    v-model:arrival-at="meta.arrivalAt"
+                    v-model:arrival-tm-no="meta.arrivalTMNo"
+                    v-model:arrival-tm="meta.arrivalTM"
+                    v-model:mrz="meta.mrz"
+                    v-model:entry-count="meta.entryCount"
+                    v-model:issue-place="meta.issuePlace"
+                    v-model:issue-country="meta.issueCountry"
+                    v-model:issueDate="meta.issueDate"
+                    v-model:type="meta.type"
+                    v-model:expire-date="meta.expireDate"
+                    v-model:visa-issue-date="meta.issueDate"
+                    v-model:visa-expiry-date="meta.expireDate"
+                    v-model:remark="meta.remark"
+                    v-model:worker-type="meta.workerType"
+                    v-model:number="meta.number"
+                    v-model:report-date="meta.reportDate"
+                  />
+
+                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+                </template>
+              </UploadFileGroup>
+            </template>
+
+            <template v-if="employeeFormState.currentTab === 'passport'">
+              <div class="q-gutter-sm full-width column no-wrap">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center"
+                >
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-passport"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t('customerEmployee.form.group.passport') }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="employeeFormState.currentIndexPassport !== -1"
+                    @click.stop="employeeFormStore.addPassport()"
+                  />
+                  <!-- :disabled="
+                      currentFromDataEmployee.employeePassport?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return false;
+                          }
+                          return true;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexPassport === -1
+                        ? false
+                        : true
+                    " -->
+                </div>
+
+                <div class="col self-center">
+                  <div
+                    class="full-width full-height flex flex-center col"
+                    v-if="
+                      currentFromDataEmployee.employeePassport?.length === 0
+                    "
+                  >
+                    <NoData />
+                  </div>
+
+                  <template
+                    v-for="(
+                      value, index
+                    ) in currentFromDataEmployee.employeePassport"
+                    :key="index"
+                  >
+                    <div class="col" v-if="value !== undefined">
+                      <FormEmployeePassport
+                        prefix-id="drawer-info-employee"
+                        id="form-passport"
+                        hide-title
+                        dense
+                        outlined
+                        separator
+                        :title="$t('customerEmployee.form.group.passport')"
+                        :readonly="
+                          employeeFormState.currentIndexPassport !== index
+                        "
+                        :full-name="
+                          employeeFormState.currentIndexPassport !== index
+                        "
+                        v-model:birth-country="value.birthCountry"
+                        v-model:previous-passportRef="value.previousPassportRef"
+                        v-model:issue-place="value.issuePlace"
+                        v-model:issue-country="value.issueCountry"
+                        v-model:issue-date="value.issueDate"
+                        v-model:type="value.type"
+                        v-model:expire-date="value.expireDate"
+                        v-model:birth-date="value.birthDate"
+                        v-model:worker-status="value.workerStatus"
+                        v-model:nationality="value.nationality"
+                        v-model:gender="value.gender"
+                        v-model:last-name-en="value.lastNameEN"
+                        v-model:last-name="value.lastName"
+                        v-model:middle-name-en="value.middleNameEN"
+                        v-model:middle-name="value.middleName"
+                        v-model:first-name-en="value.firstNameEN"
+                        v-model:first-name="value.firstName"
+                        v-model:name-prefix="value.namePrefix"
+                        v-model:passport-number="value.number"
+                        v-model:file="value.file"
+                      >
+                        <template v-slot:expiryDate>
+                          {{ $t('general.expirationDate') }} :
+                          {{ dateFormat(value.expireDate) }}
+                          <ExpirationDate
+                            v-if="value.id !== undefined"
+                            :expiration-date="value.expireDate"
+                          />
+                        </template>
+
+                        <template v-slot:button>
+                          <div
+                            class="surface-1 row rounded"
+                            style="min-height: 35px"
+                          >
+                            <UndoButton
+                              v-if="
+                                employeeFormState.isEmployeeEdit &&
+                                !(
+                                  employeeFormState.currentIndexPassport === -1
+                                ) &&
+                                employeeFormState.currentIndexPassport === index
+                              "
+                              id="btn-info-basic-undo"
+                              icon-only
+                              @click="
+                                () => {
+                                  employeeFormStore.resetFormDataEmployee();
+                                  employeeFormState.isEmployeeEdit = false;
+                                  employeeFormState.dialogType = 'info';
+                                  employeeFormState.currentIndexPassport = -1;
+                                }
+                              "
+                              type="button"
+                            />
+                            <SaveButton
+                              v-if="
+                                (employeeFormState.isEmployeeEdit ||
+                                  value.id === undefined) &&
+                                !(
+                                  employeeFormState.currentIndexPassport === -1
+                                ) &&
+                                employeeFormState.currentIndexPassport === index
+                              "
+                              id="btn-info-basic-save"
+                              icon-only
+                              @click="
+                                () => {
+                                  employeeFormState.currentIndexPassport =
+                                    index;
+                                }
+                              "
+                              type="submit"
+                            />
+                            <EditButton
+                              v-if="
+                                employeeFormState.currentIndexPassport === -1 ||
+                                (!employeeFormState.isEmployeeEdit &&
+                                  value.id !== undefined &&
+                                  employeeFormState.currentIndexPassport ===
+                                    index)
+                              "
+                              id="btn-info-basic-edit"
+                              icon-only
+                              @click="
+                                () => {
+                                  employeeFormState.currentIndexPassport =
+                                    index;
+                                  employeeFormState.isEmployeeEdit = true;
+                                  employeeFormState.dialogType = 'edit';
+                                }
+                              "
+                              type="button"
+                            />
+                            <DeleteButton
+                              v-if="
+                                employeeFormState.currentIndexPassport === -1 ||
+                                (!employeeFormState.isEmployeeEdit &&
+                                  value.id !== undefined &&
+                                  !(
+                                    employeeFormState.currentIndexPassport ===
+                                    -1
+                                  ) &&
+                                  employeeFormState.currentIndexPassport ===
+                                    index)
+                              "
+                              id="btn-info-basic-delete"
+                              icon-only
+                              @click.stop="
+                                () => {
+                                  deleteEmployeeById({
+                                    type: 'passport',
+                                    index,
+                                    fetch: async () =>
+                                      await fetchListEmployee(
+                                        currentTab === 'employer'
+                                          ? {
+                                              page: 1,
+                                              pageSize: 999,
+                                              customerId:
+                                                customerFormState.currentCustomerId,
+                                            }
+                                          : {
+                                              fetchStats: true,
+                                              mobileFetch: $q.screen.xs,
+                                            },
+                                      ),
+                                  });
+                                }
+                              "
+                              type="button"
+                              :disabled="
+                                !(
+                                  employeeFormState.currentIndexPassport === -1
+                                ) &&
+                                !(
+                                  employeeFormState.currentIndexPassport ===
+                                  index
+                                )
+                              "
+                            />
+                          </div>
+                        </template>
+                      </FormEmployeePassport>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+
+            <template v-if="employeeFormState.currentTab === 'visa'">
+              <div class="q-gutter-sm full-width column no-wrap">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center"
+                >
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-passport"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t('customerEmployee.form.group.visa') }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="
+                      currentFromDataEmployee.employeeVisa?.filter((item) => {
+                        if (item.id === undefined) {
+                          return false;
+                        }
+                        return true;
+                      }).length === 0 &&
+                      employeeFormState.currentIndexVisa === -1
+                        ? false
+                        : true
+                    "
+                    @click.stop="employeeFormStore.addVisa()"
+                  />
+                </div>
+                <div class="col self-center">
+                  <div
+                    v-if="currentFromDataEmployee.employeeVisa?.length === 0"
+                    class="full-width full-height col flex flex-center"
+                  >
+                    <NoData />
+                  </div>
+                  <FormEmployeeVisa
+                    v-for="(
+                      value, index
+                    ) in currentFromDataEmployee.employeeVisa"
+                    :key="index"
+                    prefix-id="drawer-info-employee"
+                    id="form-visa"
+                    dense
+                    outlined
+                    :title="$t('customerEmployee.form.group.visa')"
+                    :readonly="employeeFormState.currentIndexVisa !== index"
+                    hide-title
+                    v-model:arrival-at="value.arrivalAt"
+                    v-model:arrival-tm-no="value.arrivalTMNo"
+                    v-model:arrival-tm="value.arrivalTM"
+                    v-model:mrz="value.mrz"
+                    v-model:entry-count="value.entryCount"
+                    v-model:issue-place="value.issuePlace"
+                    v-model:issue-country="value.issueCountry"
+                    v-model:issueDate="value.issueDate"
+                    v-model:type="value.type"
+                    v-model:expire-date="value.expireDate"
+                    v-model:visa-issue-date="value.issueDate"
+                    v-model:visa-expiry-date="value.expireDate"
+                    v-model:remark="value.remark"
+                    v-model:worker-type="value.workerType"
+                    v-model:number="value.number"
+                    v-model:report-date="value.reportDate"
+                  >
+                    <template v-slot:expiryDate>
+                      {{ $t('general.expirationDate') }} :
+                      {{ dateFormat(value.expireDate) }}
+                      <ExpirationDate
+                        v-if="value.id !== undefined"
+                        :expiration-date="value.expireDate"
+                      />
+                    </template>
+
+                    <template v-slot:button>
+                      <div
+                        class="surface-1 row rounded"
+                        style="min-height: 35px"
+                      >
+                        <UndoButton
+                          v-if="
+                            employeeFormState.isEmployeeEdit &&
+                            !(employeeFormState.currentIndexVisa === -1) &&
+                            employeeFormState.currentIndexVisa === index
+                          "
+                          id="btn-info-basic-undo"
+                          icon-only
+                          @click="
+                            () => {
+                              employeeFormStore.resetFormDataEmployee();
+                              employeeFormState.isEmployeeEdit = false;
+                              employeeFormState.dialogType = 'info';
+                              employeeFormState.currentIndexVisa = -1;
+                            }
+                          "
+                          type="button"
+                        />
+                        <SaveButton
+                          v-if="
+                            (employeeFormState.isEmployeeEdit ||
+                              value.id === undefined) &&
+                            !(employeeFormState.currentIndexVisa === -1) &&
+                            employeeFormState.currentIndexVisa === index
+                          "
+                          id="btn-info-basic-save"
+                          icon-only
+                          @click="
+                            () => {
+                              employeeFormState.currentIndexVisa = index;
+                            }
+                          "
+                          type="submit"
+                        />
+
+                        <EditButton
+                          v-if="
+                            employeeFormState.currentIndexVisa === -1 ||
+                            (!employeeFormState.isEmployeeEdit &&
+                              value.id !== undefined &&
+                              employeeFormState.currentIndexVisa === index)
+                          "
+                          id="btn-info-basic-edit"
+                          icon-only
+                          @click="
+                            () => {
+                              employeeFormState.currentIndexVisa = index;
+                              employeeFormState.isEmployeeEdit = true;
+                              employeeFormState.dialogType = 'edit';
+                            }
+                          "
+                          type="button"
+                        />
+                        <DeleteButton
+                          v-if="
+                            employeeFormState.currentIndexVisa === -1 ||
+                            (!employeeFormState.isEmployeeEdit &&
+                              value.id !== undefined &&
+                              !(employeeFormState.currentIndexVisa === -1) &&
+                              employeeFormState.currentIndexVisa === index)
+                          "
+                          id="btn-info-basic-delete"
+                          icon-only
+                          @click.stop="
+                            () => {
+                              deleteEmployeeById({
+                                type: 'visa',
+                                index,
+                                fetch: async () =>
+                                  await fetchListEmployee(
+                                    currentTab === 'employer'
+                                      ? {
+                                          page: 1,
+                                          pageSize: 999,
+                                          customerId:
+                                            customerFormState.currentCustomerId,
+                                        }
+                                      : {
+                                          fetchStats: true,
+                                          mobileFetch: $q.screen.xs,
+                                        },
+                                  ),
+                              });
+                            }
+                          "
+                          type="button"
+                          :disabled="
+                            !(employeeFormState.currentIndexVisa === -1) &&
+                            !(employeeFormState.currentIndexVisa === index)
+                          "
+                        />
+                      </div>
+                    </template>
+                  </FormEmployeeVisa>
+                </div>
+              </div>
+            </template>
+
+            <template v-if="employeeFormState.currentTab === 'healthCheck'">
+              <div class="q-gutter-sm full-width column">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center row items-center"
+                >
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-sm"
+                    color="info"
+                    name="mdi-hospital-box-outline"
+                    style="background-color: var(--surface-3)"
+                  />
+
+                  {{ $t(`customerEmployee.formHealthCheck.title`) }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="
+                      currentFromDataEmployee.employeeCheckup?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return false;
+                          }
+                          return true;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexCheckup === -1
+                        ? false
+                        : true
+                    "
+                    @click.stop="employeeFormStore.addCheckup()"
+                  />
+                </div>
+
+                <div class="col self-center">
+                  <div
+                    v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
+                    class="full-width full-height col flex flex-center"
+                  >
+                    <NoData />
+                  </div>
+                  <FormEmployeeHealthCheck
+                    v-if="employeeFormState.currentTab === 'healthCheck'"
+                    id="drawer-form-checkup"
+                    prefix-id="drawer-employee"
+                    dense
+                    outlined
+                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
+                    v-model:current-index="
+                      employeeFormState.currentIndexCheckup
+                    "
+                    v-model:employee-checkup="
+                      currentFromDataEmployee.employeeCheckup
+                    "
+                    v-model:checkup-results-option="
+                      optionStore.globalOption.checkupResults
+                    "
+                    v-model:checkup-type-option="
+                      optionStore.globalOption.insurancePlace
+                    "
+                    v-model:medical-benefit-option="
+                      optionStore.globalOption.typeInsurance
+                    "
+                    v-model:insurance-company-option="
+                      optionStore.globalOption.insurancePlace
+                    "
+                    @save="
+                      (index) => {
+                        employeeFormState.currentIndexCheckup = index;
+                        notify('create', $t('general.success'));
+                      }
+                    "
+                    @edit="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeCheckup?.[index]
+                            .statusSave
+                        ) {
+                          employeeFormState.currentIndexCheckup = index;
+                          currentFromDataEmployee.employeeCheckup[
+                            index
+                          ].statusSave = false;
+                        }
+                      }
+                    "
+                    @undo="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeCheckup?.[index]
+                            .statusSave === false
+                        ) {
+                          employeeFormState.currentIndexCheckup = -1;
+                          currentFromDataEmployee.employeeCheckup[
+                            index
+                          ].statusSave = true;
+                          employeeFormStore.resetFormDataEmployee();
+                        }
+                      }
+                    "
+                    @delete="
+                      (index) => {
+                        employeeFormState.currentIndexCheckup = index;
+                        deleteEmployeeById({
+                          type: 'healthCheck',
+                          index,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        });
+                      }
+                    "
+                  />
+                </div>
+              </div>
+            </template>
+            <template v-if="employeeFormState.currentTab === 'workHistory'">
+              <div class="q-gutter-sm full-width column">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center"
+                >
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-briefcase-outline"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t(`customerEmployee.form.group.workHistory`) }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="
+                      currentFromDataEmployee.employeeWork?.filter((item) => {
+                        if (item.id === undefined) {
+                          return false;
+                        }
+                        return true;
+                      }).length === 0 &&
+                      employeeFormState.currentIndexWorkHistory === -1
+                        ? false
+                        : true
+                    "
+                    @click.stop="employeeFormStore.addWorkHistory()"
+                  />
+                </div>
+
+                <div class="col self-center">
+                  <div
+                    class="full-width full-height col flex flex-center"
+                    v-if="currentFromDataEmployee.employeeWork?.length === 0"
+                  >
+                    <NoData />
+                  </div>
+
+                  <FormEmployeeWorkHistory
+                    v-if="employeeFormState.currentTab === 'workHistory'"
+                    id="drawer-work-history"
+                    prefix-id="drawer-employee"
+                    dense
+                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
+                    outlined
+                    v-model:current-index="
+                      employeeFormState.currentIndexWorkHistory
+                    "
+                    v-model:employee-work="currentFromDataEmployee.employeeWork"
+                    v-model:position-name-option="
+                      optionStore.globalOption.position
+                    "
+                    v-model:job-type-option="
+                      optionStore.globalOption.businessType
+                    "
+                    v-model:workplace-option="optionStore.globalOption.area"
+                    @delete="
+                      (index) => {
+                        employeeFormState.currentIndexWorkHistory = index;
+                        deleteEmployeeById({
+                          type: 'work',
+                          index,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        });
+                      }
+                    "
+                    @save="
+                      (index) => {
+                        employeeFormState.currentIndexWorkHistory = index;
+                      }
+                    "
+                    @undo="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeWork?.[index]
+                            .statusSave === false
+                        ) {
+                          employeeFormState.currentIndexWorkHistory = -1;
+                          currentFromDataEmployee.employeeWork[
+                            index
+                          ].statusSave = true;
+                        }
+                      }
+                    "
+                    @edit="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeWork?.[index]
+                            .statusSave
+                        ) {
+                          employeeFormState.currentIndexWorkHistory = index;
+                          currentFromDataEmployee.employeeWork[
+                            index
+                          ].statusSave = false;
+                        }
+                      }
+                    "
+                  />
+                </div>
+              </div>
+            </template>
+            <template v-if="employeeFormState.currentTab === 'other'">
+              <FormEmployeeOther
+                :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
+                v-if="employeeFormState.currentTab === 'other'"
+                id="drawer-other"
+                prefix-id="drawer-employee"
+                dense
+                outlined
+                v-model:employee-other="
+                  currentFromDataEmployee.employeeOtherInfo
+                "
+                @undo="
+                  () => {
+                    if (
+                      currentFromDataEmployee.employeeOtherInfo?.statusSave ===
+                      false
+                    ) {
+                      currentFromDataEmployee.employeeOtherInfo.statusSave = true;
+                    }
+                  }
+                "
+                @edit="
+                  () => {
+                    if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
+                      currentFromDataEmployee.employeeOtherInfo.statusSave = false;
+                    }
+                  }
+                "
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DrawerInfo>
+</template>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 6152ad1b..7ed8d550 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -3,21 +3,11 @@ import { ref, watch, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute, useRouter } from 'vue-router';
-import { getUserId, getRole } from 'src/services/keycloak';
-import { baseUrl, setPrefixName, waitAll } from 'src/stores/utils';
-import { dateFormat } from 'src/utils/datetime';
-import { dialogCheckData, canAccess } from 'stores/utils';
+import { canAccess } from 'stores/utils';
 
-import useOcrStore from 'stores/ocr';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
-import useMyBranchStore from 'stores/my-branch';
-import {
-  dialog,
-  notify,
-  resetScrollBar,
-  capitalizeFirstLetter,
-} from 'stores/utils';
+import { dialog } from 'stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'stores/flow';
 import { Status } from 'stores/types';
@@ -25,68 +15,21 @@ import {
   CustomerStats,
   Customer,
   CustomerBranch,
-  CustomerBranchCreate,
   CustomerType,
 } from 'stores/customer/types';
 import { Employee, EmployeeHistory } from 'stores/employee/types';
-import {
-  EditButton,
-  DeleteButton,
-  SaveButton,
-  UndoButton,
-} from 'components/button';
+import { SaveButton } from 'components/button';
 
 import TabCustomer from './TabCustomer.vue';
-import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
-import { AddressForm } from 'components/form';
-import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
-import ItemCard from 'src/components/ItemCard.vue';
-import DrawerInfo from 'components/DrawerInfo.vue';
 import FloatingActionButton from 'components/FloatingActionButton.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
-import TooltipComponent from 'components/TooltipComponent.vue';
-import EmptyAddButton from 'components/AddButton.vue';
-import NoData from 'components/NoData.vue';
-import PaginationComponent from 'components/PaginationComponent.vue';
-import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
-import FormPerson from 'components/02_personnel-management/FormPerson.vue';
-import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
 import BranchPage from './BranchPage.vue';
-import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
-import DialogForm from 'components/DialogForm.vue';
-import SideMenu from 'components/SideMenu.vue';
-import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
-import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
-import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
-import { runOcr, parseResultMRZ } from 'src/utils/ocr';
-import { formatAddress } from 'src/utils/address';
-import {
-  UploadFileGroup,
-  FormTm6,
-  NoticeJobEmployment,
-} from 'components/upload-file';
 
-import {
-  columnsCustomer,
-  columnsEmployee,
-  uploadFileListEmployee,
-  columnsAttachment,
-  dialogCreateCustomerItem,
-} from './constant';
+import { columnsCustomer, columnsEmployee } from './constant';
 import { useCustomerForm, useEmployeeForm } from './form';
 import { storeToRefs } from 'pinia';
-import ProfileBanner from 'components/ProfileBanner.vue';
-import ImageUploadDialog from 'components/ImageUploadDialog.vue';
-import FormEmployeeHealthCheck from 'components/03_customer-management/FormEmployeeHealthCheck.vue';
-import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmployeeWorkHistory.vue';
-import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue';
-import useOptionStore from 'stores/options';
-import { DialogContainer, DialogHeader } from 'components/dialog';
-import KebabAction from 'src/components/shared/KebabAction.vue';
+
 import { nextTick } from 'vue';
-import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
-import PaginationPageSize from 'src/components/PaginationPageSize.vue';
-import { AddButton } from 'components/button';
 import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 import TabEmployee from './TabEmployee.vue';
 
@@ -97,48 +40,20 @@ const router = useRouter();
 const flowStore = useFlowStore();
 const navigatorStore = useNavigator();
 const customerStore = useCustomerStore();
-const userBranchStore = useMyBranchStore();
 const employeeStore = useEmployeeStore();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
-const optionStore = useOptionStore();
-const ocrStore = useOcrStore();
 
-const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
-
-const {
-  fetchListOfOptionBranch,
-  customerFormUndo,
-  customerConfirmUnsave,
-  deleteCustomerById,
-  validateTabField,
-  deleteCustomerBranchById,
-} = customerFormStore;
-
-const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
-  employeeFormStore;
-
-const {
-  state: customerFormState,
-  currentFormData: customerFormData,
-  registerAbleBranchOption,
-  tabFieldRequired,
-} = storeToRefs(customerFormStore);
-const {
-  state: employeeFormState,
-  currentFromDataEmployee,
-  onCreateImageList,
-  statusEmployeeCreate,
-  refreshImageState,
-} = storeToRefs(employeeFormStore);
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+const { state: employeeFormState, statusEmployeeCreate } =
+  storeToRefs(employeeFormStore);
 
 const refTabCustomer = ref<InstanceType<typeof TabCustomer>>();
 const refTabEmployee = ref<InstanceType<typeof TabEmployee>>();
 
 // NOTE: Page Data
 const currentCustomer = ref<Customer>();
-// const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
-// const listEmployee = ref<Employee[]>([]);
 const hideStats = ref(false);
 const statsCustomerType = ref<CustomerStats>({
   CORP: 0,
@@ -158,27 +73,8 @@ const customerTypeSelected = ref<{
   value: 'all',
 });
 
-// const customerNameInfo = computed(() => {
-//   if (customerFormData.value.customerBranch === undefined) return;
-
-//   const name =
-//     locale.value === 'eng'
-//       ? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
-//       : `${customerFormData.value.customerBranch[0]?.firstName} ${customerFormData.value.customerBranch[0]?.lastName}`;
-//   return name || '-';
-// });
-// const currentBtnOpen = ref<boolean[]>([]);
 const employeeStats = ref(0);
 const gridView = ref(false);
-// const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
-
-// const currentPageCustomer = ref<number>(1);
-// const maxPageCustomer = ref<number>(1);
-// const currentPageEmployee = ref<number>(1);
-// const maxPageEmployee = ref<number>(1);
-// const pageSize = ref<number>(30);
-// const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
-// const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
 
 // image
 const imageList = ref<{ selectedImage: string; list: string[] }>();
@@ -354,27 +250,6 @@ async function init() {
 
 watch(() => route.name, init);
 
-// watch(
-//   [currentTab, currentStatus, inputSearch, searchDate],
-//   async ([tabName], [oldTabName]) => {
-//     if (tabName !== oldTabName) searchDate.value = [];
-//     if (tabName === 'employer') {
-//       currentPageCustomer.value = 1;
-//       currentBtnOpen.value = [];
-//       listCustomer.value = [];
-//       await fetchListCustomer(true);
-//     }
-//     if (tabName === 'employee') {
-//       currentPageEmployee.value = 1;
-//       listEmployee.value = [];
-//       await fetchListEmployee({ fetchStats: true });
-//     }
-
-//     customerFormState.value.currentCustomerId = undefined;
-//     flowStore.rotate();
-//   },
-// );
-
 watch(locale, () => {
   customerTypeSelected.value = {
     label: `${customerTypeSelected.value.label}`,
@@ -388,304 +263,6 @@ watch(
 );
 
 onMounted(async () => await init());
-// const employeeHistoryDialog = ref(false);
-// const employeeHistory = ref<EmployeeHistory[]>();
-
-// async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
-//   const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
-
-//   const resultList = await customerStore.fetchList({
-//     includeBranch: true,
-//     page: mobileFetch ? 1 : currentPageCustomer.value,
-//     pageSize: mobileFetch
-//       ? listCustomer.value.length +
-//         (total === listCustomer.value.length ? 1 : 0)
-//       : pageSize.value,
-//     status:
-//       currentStatus.value === 'All'
-//         ? undefined
-//         : currentStatus.value === 'ACTIVE'
-//           ? 'ACTIVE'
-//           : 'INACTIVE',
-//     query: inputSearch.value,
-//     startDate: searchDate.value[0],
-//     endDate: searchDate.value[1],
-//     customerType: (
-//       {
-//         all: undefined,
-//         customerLegalEntity: CustomerType.Corporate,
-//         customerNaturalPerson: CustomerType.Person,
-//       } as const
-//     )[customerTypeSelected.value.value],
-//   });
-
-//   if (resultList) {
-//     maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
-//     $q.screen.xs && !mobileFetch
-//       ? listCustomer.value.push(...resultList.result)
-//       : (listCustomer.value = resultList.result);
-//   }
-
-//   if (fetchStats) {
-//     statsCustomerType.value = await customerStore
-//       .getStatsCustomer()
-//       .then((value) => (value ? value : { CORP: 0, PERS: 0 }));
-//   }
-// }
-
-// async function fetchListEmployee(opt?: {
-//   fetchStats?: boolean;
-//   page?: number;
-//   pageSize?: number;
-//   customerId?: string;
-//   mobileFetch?: boolean;
-// }) {
-//   const resultListEmployee = await employeeStore.fetchList({
-//     customerId: opt?.customerId,
-//     page: opt
-//       ? opt.mobileFetch
-//         ? 1
-//         : opt.page || currentPageEmployee.value
-//       : currentPageEmployee.value,
-//     pageSize: opt
-//       ? opt.mobileFetch
-//         ? listEmployee.value.length +
-//           (employeeStats.value === listEmployee.value.length ? 1 : 0)
-//         : opt.pageSize || pageSize.value
-//       : pageSize.value,
-//     status:
-//       currentStatus.value === 'All'
-//         ? undefined
-//         : currentStatus.value === 'ACTIVE'
-//           ? 'ACTIVE'
-//           : 'INACTIVE',
-//     query: inputSearch.value,
-//     passport: true,
-//     visa: true,
-//     startDate: searchDate.value[0],
-//     endDate: searchDate.value[1],
-//   });
-//   if (resultListEmployee) {
-//     maxPageEmployee.value = Math.ceil(
-//       resultListEmployee.total / pageSize.value,
-//     );
-//     $q.screen.xs && !(opt && opt.mobileFetch)
-//       ? listEmployee.value.push(...resultListEmployee.result)
-//       : (listEmployee.value = resultListEmployee.result);
-//   }
-
-//   if (opt && opt.fetchStats)
-//     employeeStats.value = await employeeStore.getStatsEmployee();
-// }
-
-// async function toggleStatusEmployee(
-//   id: string,
-//   status: boolean,
-//   employeeName: string,
-// ) {
-//   const res = await employeeStore.editById(id, {
-//     status: !status ? 'ACTIVE' : 'INACTIVE',
-//     firstNameEN: employeeName,
-//   });
-//   if (res && employeeFormState.value.drawerModal)
-//     currentFromDataEmployee.value.status = res.status;
-
-//   await fetchListEmployee({ mobileFetch: $q.screen.xs });
-//   flowStore.rotate();
-// }
-
-// async function toggleStatusCustomer(id: string, status: boolean) {
-//   const res = await customerStore.editById(id, {
-//     status: !status ? 'ACTIVE' : 'INACTIVE',
-//   });
-//   if (res && customerFormState.value.drawerModal)
-//     customerFormData.value.status = res.status;
-
-//   await fetchListCustomer(false, $q.screen.xs);
-//   flowStore.rotate();
-// }
-// async function openHistory(id: string) {
-//   const res = await employeeStore.getEditHistory(id);
-//   employeeHistory.value = res.reverse();
-//   employeeHistoryDialog.value = true;
-// }
-
-// async function editCustomerForm(id: string) {
-//   await customerFormStore.assignFormData(id);
-//   await fetchListOfOptionBranch();
-//   await fetchImageList(
-//     id,
-//     customerFormData.value.selectedImage || '',
-//     'customer',
-//   );
-//   customerFormState.value.branchIndex = -1;
-//   customerFormState.value.dialogType = 'edit';
-//   customerFormState.value.drawerModal = true;
-//   customerFormState.value.editCustomerId = id;
-// }
-
-// async function editEmployeeFormPersonal(id: string) {
-//   await employeeFormStore.assignFormDataEmployee(id);
-//   await fetchImageList(
-//     id,
-//     currentFromDataEmployee.value.selectedImage || '',
-//     'employee',
-//   );
-
-//   employeeFormState.value.isEmployeeEdit = true;
-//   employeeFormState.value.dialogType = 'edit';
-//   employeeFormState.value.drawerModal = true;
-// }
-
-// async function openSpecificCustomer(id: string) {
-//   await customerFormStore.assignFormData(id);
-//   await fetchImageList(
-//     id,
-//     customerFormData.value.selectedImage || '',
-//     'customer',
-//   );
-//   customerFormState.value.branchIndex = -1;
-//   customerFormState.value.drawerModal = true;
-//   customerFormState.value.editCustomerId = id;
-//   customerFormState.value.dialogType = 'info';
-// }
-
-// async function openSpecificEmployee(id: string) {
-//   await employeeFormStore.assignFormDataEmployee(id);
-//   await fetchImageList(
-//     id,
-//     currentFromDataEmployee.value.selectedImage || '',
-//     'employee',
-//   );
-//   employeeFormState.value.dialogType = 'info';
-//   employeeFormState.value.drawerModal = true;
-// }
-
-// TODO: When in employee form, if select address same as customer then auto fill
-
-// watch(
-//   () => employeeFormState.value.currentCustomerBranch,
-//   (e) => {
-//     if (!e) return;
-//     if (employeeFormState.value.formDataEmployeeSameAddr) {
-//       currentFromDataEmployee.value.address = e.address;
-//       currentFromDataEmployee.value.addressEN = e.addressEN;
-//       currentFromDataEmployee.value.provinceId = e.provinceId;
-//       currentFromDataEmployee.value.districtId = e.districtId;
-//       currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
-//     }
-//     currentFromDataEmployee.value.customerBranchId = e.id;
-//   },
-// );
-
-// watch(
-//   () => employeeFormState.value.formDataEmployeeSameAddr,
-//   (isSame) => {
-//     if (!employeeFormState.value.currentCustomerBranch) return;
-//     if (isSame) {
-//       currentFromDataEmployee.value.address =
-//         employeeFormState.value.currentCustomerBranch.address;
-//       currentFromDataEmployee.value.addressEN =
-//         employeeFormState.value.currentCustomerBranch.addressEN;
-//       currentFromDataEmployee.value.provinceId =
-//         employeeFormState.value.currentCustomerBranch.provinceId;
-//       currentFromDataEmployee.value.districtId =
-//         employeeFormState.value.currentCustomerBranch.districtId;
-//       currentFromDataEmployee.value.subDistrictId =
-//         employeeFormState.value.currentCustomerBranch.subDistrictId;
-//     }
-//     currentFromDataEmployee.value.customerBranchId =
-//       employeeFormState.value.currentCustomerBranch.id;
-//   },
-// );
-
-// watch(
-//   () => employeeFormState.value.currentTab,
-//   () => {
-//     employeeFormState.value.isEmployeeEdit = false;
-//   },
-// );
-
-// watch(
-//   () => currentFromDataEmployee.value.dateOfBirth,
-//   (v) => {
-//     const isEdit =
-//       employeeFormState.value.drawerModal &&
-//       employeeFormState.value.isEmployeeEdit;
-//     let currentFormDate = v && toISOStringWithTimezone(new Date(v));
-//     let currentDate: string = '';
-
-//     if (isEdit && employeeFormState.value.currentEmployee) {
-//       currentDate = toISOStringWithTimezone(
-//         new Date(employeeFormState.value.currentEmployee.dateOfBirth),
-//       );
-//     }
-
-//     if (
-//       employeeFormState.value.dialogModal ||
-//       (isEdit && currentFormDate !== currentDate)
-//     ) {
-//       const age = calculateAge(
-//         currentFromDataEmployee.value.dateOfBirth,
-//         'year',
-//       );
-//       if (currentFromDataEmployee.value.dateOfBirth && Number(age) < 15) {
-//         dialog({
-//           color: 'warning',
-//           icon: 'mdi-alert',
-//           title: t('dialog.title.youngWorker15'),
-//           cancelText: t('general.edit'),
-//           persistent: true,
-//           message: t('dialog.message.youngWorker15'),
-
-//           cancel: async () => {
-//             currentFromDataEmployee.value.dateOfBirth = null;
-//             return;
-//           },
-//         });
-//       }
-
-//       if (
-//         currentFromDataEmployee.value.dateOfBirth &&
-//         Number(age) > 15 &&
-//         Number(age) <= 18
-//       ) {
-//         dialog({
-//           color: 'warning',
-//           icon: 'mdi-alert',
-//           title: t('dialog.title.youngWorker18'),
-//           cancelText: t('general.cancel'),
-//           actionText: t('general.confirm'),
-//           persistent: true,
-//           message: t('dialog.message.youngWorker18'),
-//           action: () => {},
-//           cancel: async () => {
-//             currentFromDataEmployee.value.dateOfBirth = null;
-//             return;
-//           },
-//         });
-//       }
-//     }
-//   },
-// );
-
-// watch(
-//   () => customerFormData.value.image,
-//   () => {
-//     if (customerFormData.value.image !== null)
-//       customerFormState.value.isImageEdit = true;
-//   },
-// );
-
-// watch(
-//   () => currentFromDataEmployee.value.image,
-//   () => {
-//     if (currentFromDataEmployee.value.image !== null)
-//       employeeFormState.value.isImageEdit = true;
-//   },
-// );
-
-// const emptyCreateDialog = ref(false);
 </script>
 
 <template>
diff --git a/src/pages/03_customer-management/TabCustomer.vue b/src/pages/03_customer-management/TabCustomer.vue
index 1a0f85a2..85e80a03 100644
--- a/src/pages/03_customer-management/TabCustomer.vue
+++ b/src/pages/03_customer-management/TabCustomer.vue
@@ -8,6 +8,7 @@ import { useRoute, useRouter } from 'vue-router';
 import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
 import KebabAction from 'src/components/shared/KebabAction.vue';
 import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
+import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
 import { DialogContainer, DialogHeader } from 'components/dialog';
 import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
 import EmptyAddButton from 'components/AddButton.vue';
@@ -262,9 +263,16 @@ async function toggleStatusCustomer(id: string, status: boolean) {
   flowStore.rotate();
 }
 
-async function fetchListEmployee(customerId: string) {
+async function fetchListEmployee(opt?: {
+  fetchStats?: boolean;
+  page?: number;
+  pageSize?: number;
+  customerId?: string;
+  mobileFetch?: boolean;
+}) {
+  // ลูกจ้างภายในนายจ้าง
   const resultListEmployee = await employeeStore.fetchList({
-    customerId: customerId,
+    customerId: opt.customerId,
     page: 1,
     pageSize: 9999,
     passport: true,
@@ -662,7 +670,9 @@ onMounted(async () => {
                                 props.row.id;
 
                               // TODO:
-                              await fetchListEmployee(props.row.id);
+                              await fetchListEmployee({
+                                customerId: props.row.id,
+                              });
 
                               currentBtnOpen.map((v, i) => {
                                 if (i !== props.rowIndex) {
@@ -1940,6 +1950,11 @@ onMounted(async () => {
       </div>
     </template>
   </ImageUploadDialog>
+
+  <DrawerEmployee
+    :fetch-list-employee="fetchListEmployee"
+    :current-tab="currentTab"
+  />
 </template>
 
 <style scoped>
diff --git a/src/pages/03_customer-management/TabEmployee.vue b/src/pages/03_customer-management/TabEmployee.vue
index c7fcc8d9..68f234a8 100644
--- a/src/pages/03_customer-management/TabEmployee.vue
+++ b/src/pages/03_customer-management/TabEmployee.vue
@@ -27,6 +27,7 @@ import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmplo
 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,
@@ -2091,1596 +2092,10 @@ onMounted(async () => {
   </ImageUploadDialog>
 
   <!-- ลูกจ้าง edit employee -->
-  <DrawerInfo
-    v-if="!!employeeFormState.currentEmployee"
-    hide-action
-    v-model:drawer-open="employeeFormState.drawerModal"
-    :close="
-      () => {
-        resetScrollBar('drawer-employee-form-content');
-      }
-    "
-    :title="
-      setPrefixName(
-        {
-          namePrefix: employeeFormState.currentEmployee.namePrefix,
-          firstName:
-            employeeFormState.currentEmployee.firstName ||
-            employeeFormState.currentEmployee.firstNameEN,
-          lastName: employeeFormState.currentEmployee.lastName,
-          firstNameEN: employeeFormState.currentEmployee.firstNameEN,
-          lastNameEN: employeeFormState.currentEmployee.lastNameEN,
-        },
-        { locale },
-      )
-    "
-    :badge-class="
-      currentFromDataEmployee.gender === 'male'
-        ? 'app-bg-male text-white'
-        : currentFromDataEmployee.gender === 'female'
-          ? 'app-bg-female text-white'
-          : ''
-    "
-    :submit="
-      async () => {
-        if (employeeFormState.currentTab === 'personalInfo') {
-          await employeeFormStore.submitPersonal();
-          employeeFormState.dialogType = 'info';
-          employeeFormState.isEmployeeEdit = false;
-        }
-
-        if (employeeFormState.currentTab === 'passport') {
-          await employeeFormStore.submitPassport();
-        }
-
-        if (employeeFormState.currentTab === 'visa') {
-          await employeeFormStore.submitVisa();
-        }
-
-        if (employeeFormState.currentTab === 'healthCheck') {
-          await employeeFormStore.submitHealthCheck();
-        }
-
-        if (employeeFormState.currentTab === 'workHistory') {
-          await employeeFormStore.submitWorkHistory();
-        }
-
-        if (employeeFormState.currentTab === 'other') {
-          await employeeFormStore.submitOther();
-        }
-
-        if (route.name !== 'CustomerBranchManagement') {
-          await fetchListEmployee(
-            currentTab === 'employer'
-              ? {
-                  page: 1,
-                  pageSize: 999,
-                  customerId: customerFormState.currentCustomerId,
-                }
-              : { mobileFetch: $q.screen.xs },
-          );
-        }
-
-        employeeFormState.isEmployeeEdit = false;
-      }
-    "
-    :before-close="
-      () => {
-        if (employeeFormStore.isFormDataDifferent()) {
-          employeeConfirmUnsave();
-          return true;
-        }
-
-        employeeFormState.currentTab = 'personalInfo';
-        return false;
-      }
-    "
-  >
-    <div class="column full-height">
-      <div
-        :class="{
-          'q-mx-lg q-my-md': $q.screen.gt.sm,
-          'q-mx-md q-my-sm': !$q.screen.gt.sm,
-        }"
-      >
-        <ProfileBanner
-          :prefix="employeeFormState.currentEmployee.firstName"
-          hideFade
-          @update:current-tab="
-            () => {
-              employeeFormState.isImageEdit = false;
-              employeeFormStore.resetFormDataEmployee();
-              employeeFormState.isEmployeeEdit = false;
-              employeeFormState.dialogType = 'info';
-              employeeFormState.currentIndexPassport = -1;
-            }
-          "
-          @view="
-            () => {
-              employeeFormState.imageDialog = true;
-              employeeFormState.isImageEdit = false;
-            }
-          "
-          @edit="
-            employeeFormState.imageDialog = employeeFormState.isImageEdit = true
-          "
-          @update:toggle-status="
-            (v) => {
-              if (currentFromDataEmployee.id !== undefined)
-                triggerChangeStatus(
-                  currentFromDataEmployee.id,
-                  v,
-                  currentFromDataEmployee.firstNameEN,
-                );
-            }
-          "
-          :active="currentFromDataEmployee.status !== 'INACTIVE'"
-          use-toggle
-          color="white"
-          icon="mdi-account-outline"
-          :bg-color="
-            employeeFormState.profileUrl
-              ? 'white'
-              : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
-          "
-          v-model:current-tab="employeeFormState.currentTab"
-          v-model:toggle-status="currentFromDataEmployee.status"
-          fallback-cover="/images/employee-banner.png"
-          :title="
-            employeeFormState.currentEmployee
-              ? setPrefixName(
-                  {
-                    namePrefix: employeeFormState.currentEmployee.namePrefix,
-                    firstName:
-                      employeeFormState.currentEmployee.firstName ||
-                      employeeFormState.currentEmployee.firstNameEN,
-                    lastName: employeeFormState.currentEmployee.lastName,
-                    firstNameEN: employeeFormState.currentEmployee.firstNameEN,
-                    lastNameEN: employeeFormState.currentEmployee.lastNameEN,
-                  },
-                  { locale },
-                )
-              : '-'
-          "
-          :caption="currentFromDataEmployee.code"
-          :img="
-            `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
-              refreshImageState ? `?ts=${Date.now()}` : '',
-            ) || null
-          "
-          :fallbackImg="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
-          :tabs-list="[
-            {
-              name: 'personalInfo',
-              label: $t('customerEmployee.form.group.personalInfo'),
-            },
-            {
-              name: 'passport',
-              label: $t('customerEmployee.fileType.passport'),
-            },
-            {
-              name: 'visa',
-              label: $t('customerEmployee.form.group.visa'),
-            },
-            {
-              name: 'healthCheck',
-              label: $t('customerEmployee.form.group.healthCheck'),
-            },
-            {
-              name: 'workHistory',
-              label: $t('customerEmployee.form.group.workHistory'),
-            },
-            { name: 'other', label: $t('customerEmployee.form.group.other') },
-          ]"
-          :toggle-title="$t('status.title')"
-        />
-      </div>
-      <div
-        style="flex: 1; width: 100%; overflow-y: auto"
-        class="column relative-position"
-        id="drawer-employee-form"
-        :class="{
-          'q-px-lg q-pb-lg': $q.screen.gt.sm,
-          'q-px-md q-pb-sm': !$q.screen.gt.sm,
-        }"
-      >
-        <div
-          class="col full-width surface-1 rounded bordered row"
-          :key="String(!employeeFormState.isEmployeeEdit)"
-        >
-          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
-            <div class="q-py-md q-pl-md q-pr-sm">
-              <SideMenu
-                :menu="
-                  [
-                    {
-                      name: $t('form.field.basicInformation'),
-                      anchor: 'drawer-form-information',
-                      tab: 'personalInfo',
-                    },
-                    {
-                      name: $t('customerEmployee.form.group.personalInfo'),
-                      anchor: 'drawer-form-personal',
-                      tab: 'personalInfo',
-                    },
-                    {
-                      name: $t('form.address'),
-                      anchor: 'drawer-form-personal-address',
-                      tab: 'personalInfo',
-                    },
-
-                    {
-                      name: $t('general.uploadFile'),
-                      anchor: 'drawer-upload-file',
-                      tab: 'personalInfo',
-                    },
-
-                    {
-                      name: $t('customerEmployee.form.group.passport'),
-                      anchor: 'drawer-passport',
-                      tab: 'passport',
-                      useBtn:
-                        currentFromDataEmployee.employeePassport?.filter(
-                          (item) => {
-                            if (item.id === undefined) {
-                              return true;
-                            }
-                            return false;
-                          },
-                        ).length === 0 &&
-                        employeeFormState.currentIndexPassport === -1
-                          ? true
-                          : false,
-                    },
-                    ...(currentFromDataEmployee.employeePassport?.map(
-                      (v, i) => ({
-                        name: dateFormat(v.expireDate),
-                        anchor: `drawer-employee-employeePassport-${i}`,
-                        tab: 'passport',
-                        sub: true,
-                      }),
-                    ) || []),
-
-                    {
-                      name: $t('customerEmployee.form.group.visa'),
-                      anchor: 'drawer-visa',
-                      tab: 'visa',
-                      useBtn:
-                        currentFromDataEmployee.employeeVisa?.filter((item) => {
-                          if (item.id === undefined) {
-                            return true;
-                          }
-                          return false;
-                        }).length === 0 &&
-                        employeeFormState.currentIndexVisa === -1
-                          ? true
-                          : false,
-                    },
-
-                    ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
-                      name: dateFormat(v.expireDate),
-                      anchor: `drawer-employee-visa-${i}`,
-                      tab: 'visa',
-                      sub: true,
-                    })) || []),
-
-                    {
-                      name: $t('customerEmployee.form.group.healthCheck'),
-                      anchor: 'drawer-employee-checkup',
-                      tab: 'healthCheck',
-                      useBtn:
-                        currentFromDataEmployee.employeeCheckup?.filter(
-                          (item) => {
-                            if (item.id === undefined) {
-                              return true;
-                            }
-                            return false;
-                          },
-                        ).length === 0 &&
-                        employeeFormState.currentIndexCheckup === -1
-                          ? true
-                          : false,
-                    },
-
-                    ...(currentFromDataEmployee.employeeCheckup?.map(
-                      (_v, i) => ({
-                        name: $t('general.times', { number: i + 1 }),
-                        anchor: `drawer-employee-checkup-${i}`,
-                        tab: 'healthCheck',
-                      }),
-                    ) || []),
-
-                    {
-                      name: $t('customerEmployee.form.group.workHistory'),
-                      anchor: 'drawer-employee-work-history',
-                      tab: 'workHistory',
-                      useBtn:
-                        currentFromDataEmployee.employeeWork?.filter((item) => {
-                          if (item.id === undefined) {
-                            return true;
-                          }
-                          return false;
-                        }).length === 0 &&
-                        employeeFormState.currentIndexWorkHistory === -1
-                          ? true
-                          : false,
-                    },
-
-                    ...(currentFromDataEmployee.employeeWork?.map((_v, i) => ({
-                      name: $t('general.times', { number: i + 1 }),
-                      anchor: `drawer-employee-work-history-${i}`,
-                      tab: 'workHistory',
-                    })) || []),
-
-                    {
-                      name: $t('customerEmployee.form.group.family'),
-                      anchor: 'drawer-other',
-                      tab: 'other',
-                    },
-                  ].filter((v) => v.tab === employeeFormState.currentTab)
-                "
-                background="transparent"
-                :active="{
-                  background: 'hsla(var(--blue-6-hsl) / .2)',
-                  foreground: 'var(--blue-6)',
-                }"
-                scroll-element="#drawer-employee-form-content"
-              >
-                <template v-slot:btn-drawer-passport>
-                  <q-btn
-                    id="form-add-passport"
-                    dense
-                    flat
-                    icon="mdi-plus"
-                    size="sm"
-                    rounded
-                    padding="0px 0px"
-                    style="color: var(--stone-9)"
-                    @click.stop="employeeFormStore.addPassport()"
-                  />
-                </template>
-
-                <template v-slot:btn-drawer-visa>
-                  <q-btn
-                    id="form-add-visa"
-                    dense
-                    flat
-                    icon="mdi-plus"
-                    size="sm"
-                    rounded
-                    style="color: var(--stone-9)"
-                    @click.stop="employeeFormStore.addVisa()"
-                  />
-                </template>
-
-                <template v-slot:btn-drawer-employee-checkup>
-                  <q-btn
-                    id="form-add-checkup"
-                    dense
-                    flat
-                    icon="mdi-plus"
-                    size="sm"
-                    rounded
-                    style="color: var(--stone-9)"
-                    @click.stop="employeeFormStore.addCheckup()"
-                  />
-                </template>
-
-                <template v-slot:btn-drawer-employee-work-history>
-                  <q-btn
-                    id="form-add-work-history"
-                    dense
-                    flat
-                    icon="mdi-plus"
-                    size="sm"
-                    rounded
-                    style="color: var(--stone-9)"
-                    @click.stop="employeeFormStore.addWorkHistory()"
-                  />
-                </template>
-              </SideMenu>
-            </div>
-          </div>
-          <div
-            class="col-12 col-md-10 row"
-            :class="{
-              'q-py-md q-pr-md ': $q.screen.gt.sm,
-              'q-pa-sm': !$q.screen.gt.sm,
-            }"
-            id="drawer-employee-form-content"
-            style="height: 100%; overflow-y: auto"
-          >
-            <template v-if="employeeFormState.currentTab === 'personalInfo'">
-              <div
-                class="rounded row q-py-sm q-mx-lg q-px-md"
-                style="position: absolute; z-index: 999; right: 0; top: 0"
-                v-if="currentFromDataEmployee.status !== 'INACTIVE'"
-              >
-                <div class="surface-1 row rounded">
-                  <UndoButton
-                    v-if="employeeFormState.isEmployeeEdit"
-                    id="btn-info-basic-undo"
-                    icon-only
-                    @click="
-                      () => {
-                        employeeFormStore.resetFormDataEmployee();
-                        employeeFormState.isEmployeeEdit = false;
-                        employeeFormState.dialogType = 'info';
-                      }
-                    "
-                    type="button"
-                  />
-                  <SaveButton
-                    v-if="employeeFormState.isEmployeeEdit"
-                    id="btn-info-basic-save"
-                    icon-only
-                    type="submit"
-                  />
-                  <EditButton
-                    v-if="!employeeFormState.isEmployeeEdit"
-                    id="btn-info-basic-edit"
-                    icon-only
-                    @click="
-                      () => {
-                        employeeFormState.isEmployeeEdit = true;
-                        employeeFormState.dialogType = 'edit';
-                      }
-                    "
-                    type="button"
-                  />
-                  <DeleteButton
-                    v-if="
-                      !employeeFormState.isEmployeeEdit &&
-                      canAccess('customer', 'edit')
-                    "
-                    id="btn-info-basic-delete"
-                    icon-only
-                    @click="
-                      () =>
-                        deleteEmployeeById({
-                          id: currentFromDataEmployee.id,
-                          fetch: async () =>
-                            await fetchListEmployee(
-                              currentTab === 'employer'
-                                ? {
-                                    page: 1,
-                                    pageSize: 999,
-                                    customerId:
-                                      customerFormState.currentCustomerId,
-                                  }
-                                : {
-                                    fetchStats: true,
-                                    mobileFetch: $q.screen.xs,
-                                  },
-                            ),
-                        })
-                    "
-                    type="button"
-                  />
-                </div>
-              </div>
-              <BasicInformation
-                no-action
-                id="drawer-form-information"
-                prefix-id="drawer-info-employee"
-                dense
-                outlined
-                title="form.field.basicInformation"
-                :readonly="!employeeFormState.isEmployeeEdit"
-                v-model:customer-branch-id="employeeFormState.currentBranchId"
-                v-model:current-customer-branch="
-                  employeeFormState.currentCustomerBranch
-                "
-                v-model:employee-id="employeeFormState.currentEmployeeCode"
-                v-model:nrc-no="currentFromDataEmployee.nrcNo"
-                v-model:code="currentFromDataEmployee.code"
-                class="q-mb-xl"
-              />
-              <FormPerson
-                id="drawer-form-personal"
-                prefix-id="drawer-info-employee"
-                dense
-                outlined
-                employee
-                separator
-                title="customerEmployee.form.group.personalInfo"
-                :readonly="!employeeFormState.isEmployeeEdit"
-                v-model:prefix-name="currentFromDataEmployee.namePrefix"
-                v-model:first-name="currentFromDataEmployee.firstName"
-                v-model:last-name="currentFromDataEmployee.lastName"
-                v-model:first-name-en="currentFromDataEmployee.firstNameEN"
-                v-model:last-name-en="currentFromDataEmployee.lastNameEN"
-                v-model:mid-name="currentFromDataEmployee.middleName"
-                v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
-                v-model:gender="currentFromDataEmployee.gender"
-                v-model:birth-date="currentFromDataEmployee.dateOfBirth"
-                v-model:nationality="currentFromDataEmployee.nationality"
-                class="q-mb-xl"
-              />
-              <AddressForm
-                id="drawer-form-personal-address"
-                employee
-                v-model:address="currentFromDataEmployee.address"
-                v-model:address-en="currentFromDataEmployee.addressEN"
-                v-model:moo="currentFromDataEmployee.moo"
-                v-model:moo-en="currentFromDataEmployee.mooEN"
-                v-model:soi="currentFromDataEmployee.soi"
-                v-model:soi-en="currentFromDataEmployee.soiEN"
-                v-model:street="currentFromDataEmployee.street"
-                v-model:street-en="currentFromDataEmployee.streetEN"
-                v-model:province-id="currentFromDataEmployee.provinceId"
-                v-model:district-id="currentFromDataEmployee.districtId"
-                v-model:sub-district-id="currentFromDataEmployee.subDistrictId"
-                v-model:same-with-employer="
-                  employeeFormState.formDataEmployeeSameAddr
-                "
-                :readonly="!employeeFormState.isEmployeeEdit"
-                :disabledRule="!employeeFormState.isEmployeeEdit"
-                prefix-id="drawer-info-personnel"
-                dense
-                class="q-mb-xl"
-              />
-
-              <div class="row" id="drawer-upload-file">
-                <div class="col-12 q-pb-sm text-weight-bold text-body1">
-                  <q-icon
-                    flat
-                    size="xs"
-                    class="q-pa-sm rounded q-mr-xs"
-                    color="info"
-                    name="mdi-upload"
-                    style="background-color: var(--surface-3)"
-                  />
-                  {{ $t(`general.uploadFile`) }}
-                </div>
-              </div>
-              <UploadFileGroup
-                v-model:current-id="currentFromDataEmployee.id"
-                v-model="currentFromDataEmployee.file"
-                hide-action
-                :readonly="!employeeFormState.isEmployeeEdit"
-                :group-list="uploadFileListEmployee"
-                :menu="uploadFileListEmployee"
-                :columns="columnsAttachment"
-                @submit="
-                  async (group, allMeta) => {
-                    if (allMeta === undefined) return;
-
-                    if (group === 'passport') {
-                      const fullName = allMeta['full_name'].split(' ');
-                      let tempValue: {
-                        oldData: { nameField: string; value: string }[];
-                        newData: { nameField: string; value: string }[];
-                      } = { oldData: [], newData: [] };
-
-                      if (
-                        currentFromDataEmployee.gender !== '' &&
-                        currentFromDataEmployee.gender !== allMeta['sex']
-                      ) {
-                        tempValue.oldData.push({
-                          nameField: $t('form.gender'),
-                          value: $t(
-                            `general.${currentFromDataEmployee.gender}`,
-                          ),
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('form.gender'),
-                          value: $t(`general.${allMeta['sex']}`),
-                        });
-                      }
-
-                      if (currentFromDataEmployee.firstName !== '') {
-                        tempValue.oldData.push({
-                          nameField: $t('personnel.form.firstName'),
-                          value: currentFromDataEmployee.firstName,
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('personnel.form.firstName'),
-                          value: fullName[0],
-                        });
-                      }
-
-                      if (currentFromDataEmployee.lastName !== '') {
-                        tempValue.oldData.push({
-                          nameField: $t('personnel.form.lastName'),
-                          value: currentFromDataEmployee.lastName,
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('personnel.form.lastName'),
-                          value: fullName[1],
-                        });
-                      }
-
-                      if (currentFromDataEmployee.nationality !== '') {
-                        tempValue.oldData.push({
-                          nameField: $t('general.nationality'),
-                          value: currentFromDataEmployee.nationality || '',
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('general.nationality'),
-                          value: allMeta['nationality'],
-                        });
-                      }
-
-                      dialogCheckData({
-                        action: async () => {
-                          currentFromDataEmployee.gender = allMeta['sex'];
-                          currentFromDataEmployee.firstName = fullName[0];
-                          currentFromDataEmployee.lastName = fullName[1];
-                          currentFromDataEmployee.nationality =
-                            allMeta['nationality'];
-                        },
-                        checkData: () => {
-                          return tempValue;
-                        },
-                        cancel: () => {
-                          if (!currentFromDataEmployee.gender) {
-                            currentFromDataEmployee.gender = allMeta['gender'];
-                          }
-                          if (!currentFromDataEmployee.firstName) {
-                            currentFromDataEmployee.firstName = fullName[0];
-                          }
-                          if (!currentFromDataEmployee.firstName) {
-                            currentFromDataEmployee.firstName = fullName[0];
-                          }
-                          if (!currentFromDataEmployee.lastName) {
-                            currentFromDataEmployee.lastName = fullName[1];
-                          }
-
-                          if (!currentFromDataEmployee.nationality) {
-                            currentFromDataEmployee.nationality =
-                              allMeta['nationality'];
-                          }
-                        },
-                      });
-                    }
-                  }
-                "
-                :ocr="
-                  async (group, file) => {
-                    if (group === 'passport') {
-                      mrz = await runOcr(file, parseResultMRZ);
-
-                      if (mrz) {
-                        const mapMrz = Object.entries(mrz.result || {}).map(
-                          ([key, value]) => ({
-                            name: key,
-                            value: String(value),
-                          }),
-                        );
-
-                        const tempValue = {
-                          status: true,
-                          group,
-                          meta: mapMrz,
-                        };
-
-                        return tempValue;
-                      }
-                    }
-                    if (group === 'visa') {
-                      const res = await ocrStore.sendOcr({
-                        file: file,
-                        category: group,
-                      });
-
-                      if (res) {
-                        const tempValue = {
-                          status: true,
-                          group,
-                          meta: res.fields,
-                        };
-
-                        return tempValue;
-                      }
-                    }
-
-                    return { status: true, group, meta: [] };
-                  }
-                "
-                :auto-save="currentFromDataEmployee.id !== ''"
-                :download="
-                  (obj) => {
-                    if (obj.group !== 'attachment') {
-                      employeeStore.getFile({
-                        parentId: currentFromDataEmployee.id || '',
-                        group: obj.group,
-                        fileId: obj._meta.id,
-                        download: true,
-                      });
-                    } else {
-                      employeeStore.getAttachment({
-                        parentId: currentFromDataEmployee.id || '',
-                        name: obj._meta.name,
-                        download: true,
-                      });
-                    }
-                  }
-                "
-                :delete-item="
-                  async (obj) => {
-                    let status: boolean = false;
-                    const res = await employeeStore.delMeta({
-                      parentId: currentFromDataEmployee.id || '',
-                      group: obj.group,
-                      metaId: obj._meta.id,
-                    });
-
-                    if (res) {
-                      status = true;
-                    }
-
-                    await employeeFormStore.assignFormDataEmployee(
-                      currentFromDataEmployee.id,
-                    );
-
-                    return status;
-                  }
-                "
-                :save="
-                  async (
-                    group: 'passport' | 'visa' | 'attachment',
-                    _meta: any,
-                    file: File | undefined,
-                  ) => {
-                    let status: boolean = false;
-                    if (group === 'passport' || group === 'visa') {
-                      if (file !== undefined && currentFromDataEmployee.id) {
-                        const res = await employeeStore.postMeta({
-                          parentId: currentFromDataEmployee.id || '',
-                          group,
-                          meta: _meta,
-                          file,
-                        });
-
-                        if (res) {
-                          status = true;
-                        }
-                      } else {
-                        const {
-                          id,
-                          employeeId,
-                          createdAt,
-                          updatedAt,
-                          ...payload
-                        } = _meta;
-
-                        const res = await employeeStore.putMeta({
-                          parentId: currentFromDataEmployee.id || '',
-                          group,
-                          metaId: _meta.id,
-                          meta: payload,
-                          file,
-                        });
-                        if (res) {
-                          status = true;
-                        }
-                      }
-                    } else {
-                      if (file !== undefined) {
-                        await employeeStore.uploadAttachment(
-                          currentFromDataEmployee.id || '',
-                          file,
-                          file.name,
-                        );
-                        status = true;
-                      }
-                    }
-                    await employeeFormStore.assignFormDataEmployee(
-                      currentFromDataEmployee.id,
-                    );
-                    return status;
-                  }
-                "
-                :get-file-list="
-                  async (group: 'passport' | 'visa' | 'attachment') => {
-                    if (
-                      !!currentFromDataEmployee.id &&
-                      group !== 'attachment'
-                    ) {
-                      const resMeta = await employeeStore.getMetaList({
-                        parentId: currentFromDataEmployee.id,
-                        group,
-                      });
-
-                      const tempValue = resMeta.map(async (i: any) => {
-                        return {
-                          _meta: { ...i },
-                          name: `${group}-${dateFormat(i.expireDate)}` || '',
-                          group: group,
-                          url: await employeeStore.getFile({
-                            parentId: currentFromDataEmployee.id || '',
-                            group,
-                            fileId: i.id,
-                          }),
-                          file: undefined,
-                        };
-                      });
-
-                      return await waitAll(tempValue);
-                    } else {
-                      const res = await employeeStore.listAttachment({
-                        parentId: currentFromDataEmployee.id || '',
-                      });
-
-                      const tempValue = (res as string[]).map(
-                        async (i: any) => {
-                          return {
-                            _meta: { id: i, name: i },
-                            name: i || '',
-                            group: group,
-                            url: await employeeStore.getAttachment({
-                              parentId: currentFromDataEmployee.id || '',
-                              name: i,
-                            }),
-                            file: undefined,
-                          };
-                        },
-                      );
-
-                      return await waitAll(tempValue);
-                    }
-                  }
-                "
-              >
-                <template #form="{ mode, meta, isEdit }">
-                  <!-- <FormCitizen
-                    v-if="mode === 'citizen' && meta"
-                    orc
-                    ra
-                    :readonly="!isEdit"
-                    v-model:citizen-id="meta.citizenId"
-                    v-model:birth-date="meta.birthDate"
-                    v-model:first-name="meta.firstName"
-                    v-model:first-name-en="meta.firstNameEN"
-                    v-model:last-name="meta.lastName"
-                    v-model:last-name-en="meta.lastNameEN"
-                    v-model:address="meta.address"
-                  /> -->
-
-                  <FormEmployeePassport
-                    v-if="mode === 'passport' && meta"
-                    prefix-id="drawer-info-employee"
-                    id="form-passport"
-                    dense
-                    outlined
-                    separator
-                    ocr
-                    :title="$t('customerEmployee.form.group.passport')"
-                    :readonly="!isEdit"
-                    v-model:birth-country="meta.birthCountry"
-                    v-model:previous-passportRef="meta.previousPassportRef"
-                    v-model:issue-place="meta.issuePlace"
-                    v-model:issue-country="meta.issueCountry"
-                    v-model:issue-date="meta.issueDate"
-                    v-model:type="meta.type"
-                    v-model:expire-date="meta.expireDate"
-                    v-model:birth-date="meta.birthDate"
-                    v-model:worker-status="meta.workerStatus"
-                    v-model:nationality="meta.nationality"
-                    v-model:gender="meta.gender"
-                    v-model:last-name-en="meta.lastNameEN"
-                    v-model:last-name="meta.lastName"
-                    v-model:middle-name-en="meta.middleNameEN"
-                    v-model:middle-name="meta.middleName"
-                    v-model:first-name-en="meta.firstNameEN"
-                    v-model:first-name="meta.firstName"
-                    v-model:name-prefix="meta.namePrefix"
-                    v-model:passport-number="meta.number"
-                  ></FormEmployeePassport>
-                  <FormEmployeeVisa
-                    v-if="mode === 'visa' && meta"
-                    prefix-id="drawer-info-employee"
-                    id="form-visa"
-                    ocr
-                    dense
-                    outlined
-                    :title="$t('customerEmployee.form.group.visa')"
-                    :readonly="!isEdit"
-                    v-model:arrival-at="meta.arrivalAt"
-                    v-model:arrival-tm-no="meta.arrivalTMNo"
-                    v-model:arrival-tm="meta.arrivalTM"
-                    v-model:mrz="meta.mrz"
-                    v-model:entry-count="meta.entryCount"
-                    v-model:issue-place="meta.issuePlace"
-                    v-model:issue-country="meta.issueCountry"
-                    v-model:issueDate="meta.issueDate"
-                    v-model:type="meta.type"
-                    v-model:expire-date="meta.expireDate"
-                    v-model:visa-issue-date="meta.issueDate"
-                    v-model:visa-expiry-date="meta.expireDate"
-                    v-model:remark="meta.remark"
-                    v-model:worker-type="meta.workerType"
-                    v-model:number="meta.number"
-                    v-model:report-date="meta.reportDate"
-                  />
-
-                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
-                </template>
-              </UploadFileGroup>
-            </template>
-
-            <template v-if="employeeFormState.currentTab === 'passport'">
-              <div class="q-gutter-sm full-width column no-wrap">
-                <div
-                  class="q-pb-sm text-weight-bold text-body1 row items-center"
-                >
-                  <q-icon
-                    flat
-                    size="xs"
-                    class="q-pa-sm rounded q-mr-xs"
-                    color="info"
-                    name="mdi-passport"
-                    style="background-color: var(--surface-3)"
-                  />
-                  {{ $t('customerEmployee.form.group.passport') }}
-                  <AddButton
-                    v-if="$q.screen.lt.md"
-                    id="btn-add-work"
-                    icon-only
-                    class="q-ml-sm"
-                    :disabled="employeeFormState.currentIndexPassport !== -1"
-                    @click.stop="employeeFormStore.addPassport()"
-                  />
-                  <!-- :disabled="
-                      currentFromDataEmployee.employeePassport?.filter(
-                        (item) => {
-                          if (item.id === undefined) {
-                            return false;
-                          }
-                          return true;
-                        },
-                      ).length === 0 &&
-                      employeeFormState.currentIndexPassport === -1
-                        ? false
-                        : true
-                    " -->
-                </div>
-
-                <div class="col self-center">
-                  <div
-                    class="full-width full-height flex flex-center col"
-                    v-if="
-                      currentFromDataEmployee.employeePassport?.length === 0
-                    "
-                  >
-                    <NoData />
-                  </div>
-
-                  <template
-                    v-for="(
-                      value, index
-                    ) in currentFromDataEmployee.employeePassport"
-                    :key="index"
-                  >
-                    <div class="col" v-if="value !== undefined">
-                      <FormEmployeePassport
-                        prefix-id="drawer-info-employee"
-                        id="form-passport"
-                        hide-title
-                        dense
-                        outlined
-                        separator
-                        :title="$t('customerEmployee.form.group.passport')"
-                        :readonly="
-                          employeeFormState.currentIndexPassport !== index
-                        "
-                        :full-name="
-                          employeeFormState.currentIndexPassport !== index
-                        "
-                        v-model:birth-country="value.birthCountry"
-                        v-model:previous-passportRef="value.previousPassportRef"
-                        v-model:issue-place="value.issuePlace"
-                        v-model:issue-country="value.issueCountry"
-                        v-model:issue-date="value.issueDate"
-                        v-model:type="value.type"
-                        v-model:expire-date="value.expireDate"
-                        v-model:birth-date="value.birthDate"
-                        v-model:worker-status="value.workerStatus"
-                        v-model:nationality="value.nationality"
-                        v-model:gender="value.gender"
-                        v-model:last-name-en="value.lastNameEN"
-                        v-model:last-name="value.lastName"
-                        v-model:middle-name-en="value.middleNameEN"
-                        v-model:middle-name="value.middleName"
-                        v-model:first-name-en="value.firstNameEN"
-                        v-model:first-name="value.firstName"
-                        v-model:name-prefix="value.namePrefix"
-                        v-model:passport-number="value.number"
-                        v-model:file="value.file"
-                      >
-                        <template v-slot:expiryDate>
-                          {{ $t('general.expirationDate') }} :
-                          {{ dateFormat(value.expireDate) }}
-                          <ExpirationDate
-                            v-if="value.id !== undefined"
-                            :expiration-date="value.expireDate"
-                          />
-                        </template>
-
-                        <template v-slot:button>
-                          <div
-                            class="surface-1 row rounded"
-                            style="min-height: 35px"
-                          >
-                            <UndoButton
-                              v-if="
-                                employeeFormState.isEmployeeEdit &&
-                                !(
-                                  employeeFormState.currentIndexPassport === -1
-                                ) &&
-                                employeeFormState.currentIndexPassport === index
-                              "
-                              id="btn-info-basic-undo"
-                              icon-only
-                              @click="
-                                () => {
-                                  employeeFormStore.resetFormDataEmployee();
-                                  employeeFormState.isEmployeeEdit = false;
-                                  employeeFormState.dialogType = 'info';
-                                  employeeFormState.currentIndexPassport = -1;
-                                }
-                              "
-                              type="button"
-                            />
-                            <SaveButton
-                              v-if="
-                                (employeeFormState.isEmployeeEdit ||
-                                  value.id === undefined) &&
-                                !(
-                                  employeeFormState.currentIndexPassport === -1
-                                ) &&
-                                employeeFormState.currentIndexPassport === index
-                              "
-                              id="btn-info-basic-save"
-                              icon-only
-                              @click="
-                                () => {
-                                  employeeFormState.currentIndexPassport =
-                                    index;
-                                }
-                              "
-                              type="submit"
-                            />
-                            <EditButton
-                              v-if="
-                                employeeFormState.currentIndexPassport === -1 ||
-                                (!employeeFormState.isEmployeeEdit &&
-                                  value.id !== undefined &&
-                                  employeeFormState.currentIndexPassport ===
-                                    index)
-                              "
-                              id="btn-info-basic-edit"
-                              icon-only
-                              @click="
-                                () => {
-                                  employeeFormState.currentIndexPassport =
-                                    index;
-                                  employeeFormState.isEmployeeEdit = true;
-                                  employeeFormState.dialogType = 'edit';
-                                }
-                              "
-                              type="button"
-                            />
-                            <DeleteButton
-                              v-if="
-                                employeeFormState.currentIndexPassport === -1 ||
-                                (!employeeFormState.isEmployeeEdit &&
-                                  value.id !== undefined &&
-                                  !(
-                                    employeeFormState.currentIndexPassport ===
-                                    -1
-                                  ) &&
-                                  employeeFormState.currentIndexPassport ===
-                                    index)
-                              "
-                              id="btn-info-basic-delete"
-                              icon-only
-                              @click.stop="
-                                () => {
-                                  deleteEmployeeById({
-                                    type: 'passport',
-                                    index,
-                                    fetch: async () =>
-                                      await fetchListEmployee(
-                                        currentTab === 'employer'
-                                          ? {
-                                              page: 1,
-                                              pageSize: 999,
-                                              customerId:
-                                                customerFormState.currentCustomerId,
-                                            }
-                                          : {
-                                              fetchStats: true,
-                                              mobileFetch: $q.screen.xs,
-                                            },
-                                      ),
-                                  });
-                                }
-                              "
-                              type="button"
-                              :disabled="
-                                !(
-                                  employeeFormState.currentIndexPassport === -1
-                                ) &&
-                                !(
-                                  employeeFormState.currentIndexPassport ===
-                                  index
-                                )
-                              "
-                            />
-                          </div>
-                        </template>
-                      </FormEmployeePassport>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </template>
-
-            <template v-if="employeeFormState.currentTab === 'visa'">
-              <div class="q-gutter-sm full-width column no-wrap">
-                <div
-                  class="q-pb-sm text-weight-bold text-body1 row items-center"
-                >
-                  <q-icon
-                    flat
-                    size="xs"
-                    class="q-pa-sm rounded q-mr-xs"
-                    color="info"
-                    name="mdi-passport"
-                    style="background-color: var(--surface-3)"
-                  />
-                  {{ $t('customerEmployee.form.group.visa') }}
-                  <AddButton
-                    v-if="$q.screen.lt.md"
-                    id="btn-add-work"
-                    icon-only
-                    class="q-ml-sm"
-                    :disabled="
-                      currentFromDataEmployee.employeeVisa?.filter((item) => {
-                        if (item.id === undefined) {
-                          return false;
-                        }
-                        return true;
-                      }).length === 0 &&
-                      employeeFormState.currentIndexVisa === -1
-                        ? false
-                        : true
-                    "
-                    @click.stop="employeeFormStore.addVisa()"
-                  />
-                </div>
-                <div class="col self-center">
-                  <div
-                    v-if="currentFromDataEmployee.employeeVisa?.length === 0"
-                    class="full-width full-height col flex flex-center"
-                  >
-                    <NoData />
-                  </div>
-                  <FormEmployeeVisa
-                    v-for="(
-                      value, index
-                    ) in currentFromDataEmployee.employeeVisa"
-                    :key="index"
-                    prefix-id="drawer-info-employee"
-                    id="form-visa"
-                    dense
-                    outlined
-                    :title="$t('customerEmployee.form.group.visa')"
-                    :readonly="employeeFormState.currentIndexVisa !== index"
-                    hide-title
-                    v-model:arrival-at="value.arrivalAt"
-                    v-model:arrival-tm-no="value.arrivalTMNo"
-                    v-model:arrival-tm="value.arrivalTM"
-                    v-model:mrz="value.mrz"
-                    v-model:entry-count="value.entryCount"
-                    v-model:issue-place="value.issuePlace"
-                    v-model:issue-country="value.issueCountry"
-                    v-model:issueDate="value.issueDate"
-                    v-model:type="value.type"
-                    v-model:expire-date="value.expireDate"
-                    v-model:visa-issue-date="value.issueDate"
-                    v-model:visa-expiry-date="value.expireDate"
-                    v-model:remark="value.remark"
-                    v-model:worker-type="value.workerType"
-                    v-model:number="value.number"
-                    v-model:report-date="value.reportDate"
-                  >
-                    <template v-slot:expiryDate>
-                      {{ $t('general.expirationDate') }} :
-                      {{ dateFormat(value.expireDate) }}
-                      <ExpirationDate
-                        v-if="value.id !== undefined"
-                        :expiration-date="value.expireDate"
-                      />
-                    </template>
-
-                    <template v-slot:button>
-                      <div
-                        class="surface-1 row rounded"
-                        style="min-height: 35px"
-                      >
-                        <UndoButton
-                          v-if="
-                            employeeFormState.isEmployeeEdit &&
-                            !(employeeFormState.currentIndexVisa === -1) &&
-                            employeeFormState.currentIndexVisa === index
-                          "
-                          id="btn-info-basic-undo"
-                          icon-only
-                          @click="
-                            () => {
-                              employeeFormStore.resetFormDataEmployee();
-                              employeeFormState.isEmployeeEdit = false;
-                              employeeFormState.dialogType = 'info';
-                              employeeFormState.currentIndexVisa = -1;
-                            }
-                          "
-                          type="button"
-                        />
-                        <SaveButton
-                          v-if="
-                            (employeeFormState.isEmployeeEdit ||
-                              value.id === undefined) &&
-                            !(employeeFormState.currentIndexVisa === -1) &&
-                            employeeFormState.currentIndexVisa === index
-                          "
-                          id="btn-info-basic-save"
-                          icon-only
-                          @click="
-                            () => {
-                              employeeFormState.currentIndexVisa = index;
-                            }
-                          "
-                          type="submit"
-                        />
-
-                        <EditButton
-                          v-if="
-                            employeeFormState.currentIndexVisa === -1 ||
-                            (!employeeFormState.isEmployeeEdit &&
-                              value.id !== undefined &&
-                              employeeFormState.currentIndexVisa === index)
-                          "
-                          id="btn-info-basic-edit"
-                          icon-only
-                          @click="
-                            () => {
-                              employeeFormState.currentIndexVisa = index;
-                              employeeFormState.isEmployeeEdit = true;
-                              employeeFormState.dialogType = 'edit';
-                            }
-                          "
-                          type="button"
-                        />
-                        <DeleteButton
-                          v-if="
-                            employeeFormState.currentIndexVisa === -1 ||
-                            (!employeeFormState.isEmployeeEdit &&
-                              value.id !== undefined &&
-                              !(employeeFormState.currentIndexVisa === -1) &&
-                              employeeFormState.currentIndexVisa === index)
-                          "
-                          id="btn-info-basic-delete"
-                          icon-only
-                          @click.stop="
-                            () => {
-                              deleteEmployeeById({
-                                type: 'visa',
-                                index,
-                                fetch: async () =>
-                                  await fetchListEmployee(
-                                    currentTab === 'employer'
-                                      ? {
-                                          page: 1,
-                                          pageSize: 999,
-                                          customerId:
-                                            customerFormState.currentCustomerId,
-                                        }
-                                      : {
-                                          fetchStats: true,
-                                          mobileFetch: $q.screen.xs,
-                                        },
-                                  ),
-                              });
-                            }
-                          "
-                          type="button"
-                          :disabled="
-                            !(employeeFormState.currentIndexVisa === -1) &&
-                            !(employeeFormState.currentIndexVisa === index)
-                          "
-                        />
-                      </div>
-                    </template>
-                  </FormEmployeeVisa>
-                </div>
-              </div>
-            </template>
-
-            <template v-if="employeeFormState.currentTab === 'healthCheck'">
-              <div class="q-gutter-sm full-width column">
-                <div
-                  class="q-pb-sm text-weight-bold text-body1 row items-center row items-center"
-                >
-                  <q-icon
-                    flat
-                    size="xs"
-                    class="q-pa-sm rounded q-mr-sm"
-                    color="info"
-                    name="mdi-hospital-box-outline"
-                    style="background-color: var(--surface-3)"
-                  />
-
-                  {{ $t(`customerEmployee.formHealthCheck.title`) }}
-                  <AddButton
-                    v-if="$q.screen.lt.md"
-                    id="btn-add-work"
-                    icon-only
-                    class="q-ml-sm"
-                    :disabled="
-                      currentFromDataEmployee.employeeCheckup?.filter(
-                        (item) => {
-                          if (item.id === undefined) {
-                            return false;
-                          }
-                          return true;
-                        },
-                      ).length === 0 &&
-                      employeeFormState.currentIndexCheckup === -1
-                        ? false
-                        : true
-                    "
-                    @click.stop="employeeFormStore.addCheckup()"
-                  />
-                </div>
-
-                <div class="col self-center">
-                  <div
-                    v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
-                    class="full-width full-height col flex flex-center"
-                  >
-                    <NoData />
-                  </div>
-                  <FormEmployeeHealthCheck
-                    v-if="employeeFormState.currentTab === 'healthCheck'"
-                    id="drawer-form-checkup"
-                    prefix-id="drawer-employee"
-                    dense
-                    outlined
-                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                    v-model:current-index="
-                      employeeFormState.currentIndexCheckup
-                    "
-                    v-model:employee-checkup="
-                      currentFromDataEmployee.employeeCheckup
-                    "
-                    v-model:checkup-results-option="
-                      optionStore.globalOption.checkupResults
-                    "
-                    v-model:checkup-type-option="
-                      optionStore.globalOption.insurancePlace
-                    "
-                    v-model:medical-benefit-option="
-                      optionStore.globalOption.typeInsurance
-                    "
-                    v-model:insurance-company-option="
-                      optionStore.globalOption.insurancePlace
-                    "
-                    @save="
-                      (index) => {
-                        employeeFormState.currentIndexCheckup = index;
-                        notify('create', $t('general.success'));
-                      }
-                    "
-                    @edit="
-                      (index) => {
-                        if (
-                          currentFromDataEmployee.employeeCheckup?.[index]
-                            .statusSave
-                        ) {
-                          employeeFormState.currentIndexCheckup = index;
-                          currentFromDataEmployee.employeeCheckup[
-                            index
-                          ].statusSave = false;
-                        }
-                      }
-                    "
-                    @undo="
-                      (index) => {
-                        if (
-                          currentFromDataEmployee.employeeCheckup?.[index]
-                            .statusSave === false
-                        ) {
-                          employeeFormState.currentIndexCheckup = -1;
-                          currentFromDataEmployee.employeeCheckup[
-                            index
-                          ].statusSave = true;
-                          employeeFormStore.resetFormDataEmployee();
-                        }
-                      }
-                    "
-                    @delete="
-                      (index) => {
-                        employeeFormState.currentIndexCheckup = index;
-                        deleteEmployeeById({
-                          type: 'healthCheck',
-                          index,
-                          fetch: async () =>
-                            await fetchListEmployee(
-                              currentTab === 'employer'
-                                ? {
-                                    page: 1,
-                                    pageSize: 999,
-                                    customerId:
-                                      customerFormState.currentCustomerId,
-                                  }
-                                : {
-                                    fetchStats: true,
-                                    mobileFetch: $q.screen.xs,
-                                  },
-                            ),
-                        });
-                      }
-                    "
-                  />
-                </div>
-              </div>
-            </template>
-            <template v-if="employeeFormState.currentTab === 'workHistory'">
-              <div class="q-gutter-sm full-width column">
-                <div
-                  class="q-pb-sm text-weight-bold text-body1 row items-center"
-                >
-                  <q-icon
-                    flat
-                    size="xs"
-                    class="q-pa-sm rounded q-mr-xs"
-                    color="info"
-                    name="mdi-briefcase-outline"
-                    style="background-color: var(--surface-3)"
-                  />
-                  {{ $t(`customerEmployee.form.group.workHistory`) }}
-                  <AddButton
-                    v-if="$q.screen.lt.md"
-                    id="btn-add-work"
-                    icon-only
-                    class="q-ml-sm"
-                    :disabled="
-                      currentFromDataEmployee.employeeWork?.filter((item) => {
-                        if (item.id === undefined) {
-                          return false;
-                        }
-                        return true;
-                      }).length === 0 &&
-                      employeeFormState.currentIndexWorkHistory === -1
-                        ? false
-                        : true
-                    "
-                    @click.stop="employeeFormStore.addWorkHistory()"
-                  />
-                </div>
-
-                <div class="col self-center">
-                  <div
-                    class="full-width full-height col flex flex-center"
-                    v-if="currentFromDataEmployee.employeeWork?.length === 0"
-                  >
-                    <NoData />
-                  </div>
-
-                  <FormEmployeeWorkHistory
-                    v-if="employeeFormState.currentTab === 'workHistory'"
-                    id="drawer-work-history"
-                    prefix-id="drawer-employee"
-                    dense
-                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                    outlined
-                    v-model:current-index="
-                      employeeFormState.currentIndexWorkHistory
-                    "
-                    v-model:employee-work="currentFromDataEmployee.employeeWork"
-                    v-model:position-name-option="
-                      optionStore.globalOption.position
-                    "
-                    v-model:job-type-option="
-                      optionStore.globalOption.businessType
-                    "
-                    v-model:workplace-option="optionStore.globalOption.area"
-                    @delete="
-                      (index) => {
-                        employeeFormState.currentIndexWorkHistory = index;
-                        deleteEmployeeById({
-                          type: 'work',
-                          index,
-                          fetch: async () =>
-                            await fetchListEmployee(
-                              currentTab === 'employer'
-                                ? {
-                                    page: 1,
-                                    pageSize: 999,
-                                    customerId:
-                                      customerFormState.currentCustomerId,
-                                  }
-                                : {
-                                    fetchStats: true,
-                                    mobileFetch: $q.screen.xs,
-                                  },
-                            ),
-                        });
-                      }
-                    "
-                    @save="
-                      (index) => {
-                        employeeFormState.currentIndexWorkHistory = index;
-                      }
-                    "
-                    @undo="
-                      (index) => {
-                        if (
-                          currentFromDataEmployee.employeeWork?.[index]
-                            .statusSave === false
-                        ) {
-                          employeeFormState.currentIndexWorkHistory = -1;
-                          currentFromDataEmployee.employeeWork[
-                            index
-                          ].statusSave = true;
-                        }
-                      }
-                    "
-                    @edit="
-                      (index) => {
-                        if (
-                          currentFromDataEmployee.employeeWork?.[index]
-                            .statusSave
-                        ) {
-                          employeeFormState.currentIndexWorkHistory = index;
-                          currentFromDataEmployee.employeeWork[
-                            index
-                          ].statusSave = false;
-                        }
-                      }
-                    "
-                  />
-                </div>
-              </div>
-            </template>
-            <template v-if="employeeFormState.currentTab === 'other'">
-              <FormEmployeeOther
-                :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                v-if="employeeFormState.currentTab === 'other'"
-                id="drawer-other"
-                prefix-id="drawer-employee"
-                dense
-                outlined
-                v-model:employee-other="
-                  currentFromDataEmployee.employeeOtherInfo
-                "
-                @undo="
-                  () => {
-                    if (
-                      currentFromDataEmployee.employeeOtherInfo?.statusSave ===
-                      false
-                    ) {
-                      currentFromDataEmployee.employeeOtherInfo.statusSave = true;
-                    }
-                  }
-                "
-                @edit="
-                  () => {
-                    if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
-                      currentFromDataEmployee.employeeOtherInfo.statusSave = false;
-                    }
-                  }
-                "
-              />
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </DrawerInfo>
+  <DrawerEmployee
+    :fetch-list-employee="fetchListEmployee"
+    :current-tab="currentTab"
+  />
 
   <DialogForm
     :title="$t('general.historyEdit')"