diff --git a/public/images/customer-CORP-avartar-female.png b/public/images/customer-CORP-avartar-female.png
index 446ef866..4cbb894f 100644
Binary files a/public/images/customer-CORP-avartar-female.png and b/public/images/customer-CORP-avartar-female.png differ
diff --git a/public/images/customer-CORP-avartar-male.png b/public/images/customer-CORP-avartar-male.png
index 6ad95d7d..ae177f60 100644
Binary files a/public/images/customer-CORP-avartar-male.png and b/public/images/customer-CORP-avartar-male.png differ
diff --git a/public/images/customer-PERS-avartar-female.png b/public/images/customer-PERS-avartar-female.png
index ca0a2bf1..c3ba574e 100644
Binary files a/public/images/customer-PERS-avartar-female.png and b/public/images/customer-PERS-avartar-female.png differ
diff --git a/public/images/customer-PERS-avartar-male.png b/public/images/customer-PERS-avartar-male.png
index e9fd15fe..ce0ab20c 100644
Binary files a/public/images/customer-PERS-avartar-male.png and b/public/images/customer-PERS-avartar-male.png differ
diff --git a/public/images/employee-avatar-female.png b/public/images/employee-avatar-female.png
index 66ace3a0..ce9370f1 100644
Binary files a/public/images/employee-avatar-female.png and b/public/images/employee-avatar-female.png differ
diff --git a/public/images/employee-avatar-male.png b/public/images/employee-avatar-male.png
index a8daa8ff..aaf5fb1f 100644
Binary files a/public/images/employee-avatar-male.png and b/public/images/employee-avatar-male.png differ
diff --git a/public/img-group.png b/public/img-group.png
new file mode 100644
index 00000000..0493168b
Binary files /dev/null and b/public/img-group.png differ
diff --git a/public/no-img-female.png b/public/no-img-female.png
index 4e177dca..95f959ff 100644
Binary files a/public/no-img-female.png and b/public/no-img-female.png differ
diff --git a/public/no-img-man.png b/public/no-img-man.png
index 861f356a..f0ccba15 100644
Binary files a/public/no-img-man.png and b/public/no-img-man.png differ
diff --git a/public/option/option.json b/public/option/option.json
index c5ea33cd..963c4ad2 100644
--- a/public/option/option.json
+++ b/public/option/option.json
@@ -183,15 +183,15 @@
 
     "prefix": [
       {
-        "label": "Mr",
+        "label": "MR",
         "value": "mr"
       },
       {
-        "label": "Mrs",
+        "label": "MRS",
         "value": "mrs"
       },
       {
-        "label": "Miss",
+        "label": "MISS",
         "value": "miss"
       }
     ],
diff --git a/quasar.config.ts b/quasar.config.ts
index cc0715ad..38bb94c1 100644
--- a/quasar.config.ts
+++ b/quasar.config.ts
@@ -31,7 +31,7 @@ export default defineConfig((ctx) => {
     devServer: {
       host: '0.0.0.0',
       open: false,
-      port: 5173,
+      port: 5174,
     },
     framework: {
       config: {},
diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 83c268ba..c10d63fc 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -89,15 +89,7 @@ defineProps<{
         </div>
       </div>
     </div>
-    <div
-      style="
-        display: block;
-        width: 100%;
-        height: 1px;
-        background: hsla(0 0% 0% / 0.1);
-        margin-bottom: var(--size-2);
-      "
-    />
+    <q-separator />
     <slot name="data"></slot>
     <template v-if="!$slots.data">
       <div
diff --git a/src/components/01_branch-management/FormBank.vue b/src/components/01_branch-management/FormBank.vue
index 66f4241b..8c2b53bd 100644
--- a/src/components/01_branch-management/FormBank.vue
+++ b/src/components/01_branch-management/FormBank.vue
@@ -177,7 +177,7 @@ watch(
 
       <div
         v-if="!single"
-        class="bordered q-mr-sm rounded col text-center overflow-hidden"
+        class="bordered q-mr-sm rounded col-4 text-center overflow-hidden"
         :class="{ 'pointer-none': readonly, 'q-my-sm': $q.screen.lt.md }"
       >
         <ImageHover
diff --git a/src/components/01_branch-management/FormBranchInformation.vue b/src/components/01_branch-management/FormBranchInformation.vue
index 5a90d3f7..a4041333 100644
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/src/components/01_branch-management/FormBranchInformation.vue
@@ -159,42 +159,6 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           ]"
           for="input-name-en"
         />
-
-        <q-select
-          v-if="
-            typeBranch !== 'headOffice' &&
-            isRoleInclude(['head_of_admin', 'head_of_account'])
-          "
-          outlined
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-label="label"
-          option-value="value"
-          class="col-2"
-          dense
-          for="input-branch-status"
-          :readonly="readonly || isRoleInclude(['head_of_account'])"
-          :options="['Virtual', 'Branch']"
-          :hide-dropdown-icon="readonly"
-          :label="$t('general.branchStatus')"
-          :model-value="virtual ? 'Virtual' : 'Branch'"
-          @update:model-value="(v) => (virtual = v === 'Virtual')"
-          :rules="[(val) => val && val.length > 0]"
-          :error-message="$t('form.error.required')"
-        >
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey">
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
       </div>
 
       <div class="col-12 row q-col-gutter-sm">
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 7f850999..d1709858 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -29,7 +29,7 @@ const discountCondition = defineModel<string | null | undefined>(
 const sourceNationality = defineModel<string | null | undefined>(
   'sourceNationality',
 );
-const importNationality = defineModel<string | null | undefined>(
+const importNationality = defineModel<string[] | null | undefined>(
   'importNationality',
 );
 const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
@@ -179,18 +179,19 @@ function deleteFile(name: string) {
             (v) => (typeof v === 'string' ? (sourceNationality = v) : '')
           "
         />
+
         <SelectInput
-          :model-value="readonly ? importNationality || '-' : importNationality"
+          v-model="importNationality"
           id="input-import-nationality"
           for="input-import-nationality"
           :option="optionStore.globalOption.nationality"
           class="col-md-3 col-6"
           :readonly
+          multiple
+          :hideSelected="false"
           clearable
+          fillInput
           :label="$t('personnel.form.importNationality')"
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (importNationality = v) : '')
-          "
         />
 
         <SelectInput
@@ -261,7 +262,7 @@ function deleteFile(name: string) {
       </div>
 
       <q-file
-        v-if="userType"
+        v-if="userType && !readonly"
         ref="attachmentRef"
         for="input-attachment"
         :dense="dense"
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index e2e842c8..cb0463af 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -102,7 +102,9 @@ watch(
           :option="optionStore.globalOption?.prefix"
           :id="`${prefixId}-select-prefix-name`"
           :for="`${prefixId}-select-prefix-name`"
-          :rules="[(val: string) => !!val || $t('form.error.required')]"
+          :rules="
+            agency ? [] : [(val: string) => !!val || $t('form.error.required')]
+          "
           :label="$t('personnel.form.prefixName')"
           class="col-md-1 col-6"
           v-model="prefixName"
@@ -163,7 +165,7 @@ watch(
           :id="`${prefixId}-select-prefix-name-en`"
           :for="`${prefixId}-select-prefix-name-en`"
           :rules="[(val: string) => !!val || $t('form.error.required')]"
-          :label="$t('personnel.form.prefixName')"
+          label="Prefix"
           class="col-md-1 col-6"
           v-model="prefixName"
         />
@@ -251,16 +253,13 @@ watch(
         hide-bottom-space
         :readonly="readonly"
         :label="$t('form.email')"
-        :rules="
-          readonly
-            ? undefined
-            : [
-                (v: string) =>
-                  !v ||
-                  /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) ||
-                  $t('form.error.invalid'),
-              ]
-        "
+        :rules="[
+          (val) => (val && val.length > 0) || $t('form.error.required'),
+          (v: string) =>
+            !v ||
+            /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) ||
+            $t('form.error.invalid'),
+        ]"
         class="col-md-3 col-6"
         :model-value="readonly ? email || '-' : email"
         @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
@@ -294,15 +293,11 @@ watch(
         :readonly="readonly"
         :label="$t('form.birthDate')"
         :disabled-dates="disabledAfterToday"
-        :rules="
-          employee
-            ? []
-            : [
-                (val: string) =>
-                  !!val ||
-                  $t('form.error.selectField', { field: $t('form.birthDate') }),
-              ]
-        "
+        :rules="[
+          (val: string) =>
+            !!val ||
+            $t('form.error.selectField', { field: $t('form.birthDate') }),
+        ]"
       />
 
       <q-input
diff --git a/src/components/03_customer-management/DialogEmployee.vue b/src/components/03_customer-management/DialogEmployee.vue
new file mode 100644
index 00000000..db428f83
--- /dev/null
+++ b/src/components/03_customer-management/DialogEmployee.vue
@@ -0,0 +1,1656 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FormPerson from '../02_personnel-management/FormPerson.vue';
+import { ProfileBanner, DialogForm, SideMenu } from 'src/components';
+import {
+  AddButton,
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
+import AddressForm from '../form/AddressForm.vue';
+import NoticeJobEmployment from '../upload-file/NoticeJobEmployment.vue';
+import UploadFileGroup from '../upload-file/UploadFileGroup.vue';
+import BasicInformation from './employee/BasicInformation.vue';
+import FormEmployeeHealthCheck from './FormEmployeeHealthCheck.vue';
+import FormEmployeeOther from './FormEmployeeOther.vue';
+import FormEmployeePassport from './FormEmployeePassport.vue';
+import FormEmployeeVisa from './FormEmployeeVisa.vue';
+import FormEmployeeWorkHistory from './FormEmployeeWorkHistory.vue';
+import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
+import ImageUploadDialog from '../ImageUploadDialog.vue';
+
+import {
+  uploadFileListEmployee,
+  columnsAttachment,
+} from 'src/pages/03_customer-management/constant';
+import {
+  baseUrl,
+  setPrefixName,
+  waitAll,
+  notify,
+  dialogCheckData,
+} from 'src/stores/utils';
+import {
+  useCustomerForm,
+  useEmployeeForm,
+} from 'src/pages/03_customer-management/form';
+import useFlowStore from 'src/stores/flow';
+import useEmployeeStore from 'src/stores/employee';
+import useOcrStore from 'stores/ocr';
+import { dateFormat } from 'src/utils/datetime';
+import { runOcr, parseResultMRZ } from 'src/utils/ocr';
+import useOptionStore from 'src/stores/options';
+
+const route = useRoute();
+const ocrStore = useOcrStore();
+const flowStore = useFlowStore();
+const { t, locale } = useI18n();
+const optionStore = useOptionStore();
+const employeeFormStore = useEmployeeForm();
+const employeeStore = useEmployeeStore();
+const customerFormStore = useCustomerForm();
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
+  employeeFormStore;
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  onCreateImageList,
+  statusEmployeeCreate,
+  refreshImageState,
+} = storeToRefs(employeeFormStore);
+
+const props = defineProps<{
+  currentTab: string;
+  fetchListEmployee: (opt?: {
+    fetchStats?: boolean;
+    page?: number;
+    pageSize?: number;
+    customerId?: string;
+    mobileFetch?: boolean;
+  }) => Promise<void>;
+  fetchImageList: (
+    id: string,
+    selectedName: string,
+    type: 'customer' | 'employee',
+  ) => Promise<void>;
+}>();
+
+const mrz = defineModel<Awaited<ReturnType<typeof parseResultMRZ>>>('mrz');
+</script>
+<template>
+  <DialogForm
+    hideFooter
+    :title="$t('form.title.create', { name: $t('customer.employee') })"
+    v-model:modal="employeeFormState.dialogModal"
+    :undo="() => employeeFormUndo(false)"
+    :submit="
+      async () => {
+        if (employeeFormState.currentTab === 'personalInfo') {
+          await employeeFormStore.submitPersonal(onCreateImageList);
+          employeeFormState.isEmployeeEdit = false;
+          employeeFormState.dialogType = 'info';
+        }
+
+        if (employeeFormState.currentTab === 'passport') {
+          await employeeFormStore.submitPassport();
+        }
+
+        if (employeeFormState.currentTab === 'visa') {
+          await employeeFormStore.submitVisa();
+        }
+
+        if (employeeFormState.currentTab === 'healthCheck') {
+          await employeeFormStore.submitHealthCheck();
+        }
+
+        if (employeeFormState.currentTab === 'workHistory') {
+          await employeeFormStore.submitWorkHistory();
+        }
+
+        if (employeeFormState.currentTab === 'other') {
+          await employeeFormStore.submitOther();
+        }
+        statusEmployeeCreate = true;
+        employeeFormState.isEmployeeEdit = false;
+
+        if (route.name !== 'CustomerBranchManagement') {
+          await fetchListEmployee(
+            currentTab === 'employer'
+              ? {
+                  page: 1,
+                  pageSize: 999,
+                  customerId: customerFormState.currentCustomerId,
+                }
+              : { fetchStats: true, mobileFetch: $q.screen.xs },
+          );
+
+          flowStore.rotate();
+        }
+      }
+    "
+    :show="
+      () => {
+        employeeFormStore.resetFormDataEmployee(true);
+      }
+    "
+    :before-close="
+      () => {
+        if (employeeFormStore.isFormDataDifferent()) {
+          employeeConfirmUnsave();
+          return true;
+        }
+        //  else {
+        //   if ($q.screen.gt.xs) fetchListEmployee();
+        // }
+
+        employeeFormState.currentTab = 'personalInfo';
+        return false;
+      }
+    "
+  >
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <ProfileBanner
+        active
+        useToggle
+        prefix="dialog"
+        color="white"
+        icon="mdi-account-plus-outline"
+        :bg-color="
+          employeeFormState.profileUrl
+            ? 'white'
+            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
+        "
+        v-model:current-tab="employeeFormState.currentTab"
+        v-model:toggle-status="currentFromDataEmployee.status"
+        fallbackCover="/images/employee-banner.png"
+        :img="
+          employeeFormState.profileUrl ||
+          `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
+            refreshImageState ? `?ts=${Date.now()}` : '',
+          )
+        "
+        :fallbackImg="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
+        :tabs-list="
+          [
+            {
+              name: 'personalInfo',
+              label: $t('customerEmployee.form.group.personalInfo'),
+            },
+            {
+              name: 'passport',
+              label: $t('customerEmployee.fileType.passport'),
+            },
+            {
+              name: 'visa',
+              label: $t('customerEmployee.form.group.visa'),
+            },
+
+            {
+              name: 'healthCheck',
+              label: $t('customerEmployee.form.group.healthCheck'),
+            },
+            {
+              name: 'workHistory',
+              label: $t('customerEmployee.form.group.workHistory'),
+            },
+            { name: 'other', label: $t('customerEmployee.form.group.other') },
+          ].filter((v) => {
+            if (!employeeFormState.statusSavePersonal) {
+              return v.name === 'personalInfo';
+            }
+
+            return true;
+          })
+        "
+        :toggleTitle="$t('status.title')"
+        hideFade
+        :title="
+          employeeFormState.currentEmployee
+            ? setPrefixName(
+                {
+                  namePrefix: employeeFormState.currentEmployee.namePrefix,
+                  firstName:
+                    employeeFormState.currentEmployee.firstName ||
+                    employeeFormState.currentEmployee.firstNameEN,
+                  lastName: employeeFormState.currentEmployee.lastName,
+                  firstNameEN: employeeFormState.currentEmployee.firstNameEN,
+                  lastNameEN: employeeFormState.currentEmployee.lastNameEN,
+                },
+                { locale },
+              )
+            : ''
+        "
+        @view="
+          () => {
+            employeeFormState.imageDialog = true;
+            employeeFormState.isImageEdit = false;
+          }
+        "
+        @edit="
+          () => {
+            if (currentFromDataEmployee.id) {
+              fetchImageList(
+                currentFromDataEmployee.id,
+                currentFromDataEmployee.selectedImage || '',
+                'employee',
+              );
+            }
+            employeeFormState.imageDialog =
+              employeeFormState.isImageEdit = true;
+          }
+        "
+        @update:toggle-status="
+          () => {
+            currentFromDataEmployee.status =
+              currentFromDataEmployee.status === 'CREATED'
+                ? 'INACTIVE'
+                : 'CREATED';
+          }
+        "
+      />
+    </div>
+
+    <div
+      style="flex: 1; width: 100%; overflow-y: auto"
+      :class="{
+        'q-px-lg q-pb-lg': $q.screen.gt.sm,
+        'q-px-md q-pb-sm': !$q.screen.gt.sm,
+      }"
+      id="drawer-employee-form"
+    >
+      <div
+        class="col surface-1 full-height rounded bordered scroll row relative-position"
+        :key="String(!employeeFormState.isEmployeeEdit)"
+      >
+        <div
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
+        >
+          <div class="q-py-md q-pl-md q-pr-sm">
+            <SideMenu
+              :menu="
+                [
+                  {
+                    name: $t('form.field.basicInformation'),
+                    anchor: 'form-information',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('customerEmployee.form.group.personalInfo'),
+                    anchor: 'form-personal',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('general.address'),
+                    anchor: 'form-personal-address',
+                    tab: 'personalInfo',
+                  },
+                  {
+                    name: $t('general.uploadFile'),
+                    anchor: 'form-info-file-upload',
+                    tab: 'personalInfo',
+                  },
+
+                  {
+                    name: $t('customerEmployee.form.group.passport'),
+                    anchor: 'form-passport',
+                    tab: 'passport',
+                    useBtn:
+                      currentFromDataEmployee.employeePassport?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return true;
+                          }
+                          return false;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexPassport === -1
+                        ? true
+                        : false,
+                  },
+                  ...(currentFromDataEmployee.employeePassport?.map((v, i) => ({
+                    name: dateFormat(v.expireDate),
+                    anchor: `form-employee-employeePassport-${i}`,
+                    tab: 'passport',
+                    sub: true,
+                  })) || []),
+
+                  {
+                    name: $t('customerEmployee.form.group.visa'),
+                    anchor: 'form-visa',
+                    tab: 'visa',
+                    useBtn:
+                      currentFromDataEmployee.employeeVisa?.filter((item) => {
+                        if (item.id === undefined) {
+                          return true;
+                        }
+                        return false;
+                      }).length === 0 &&
+                      employeeFormState.currentIndexVisa === -1
+                        ? true
+                        : false,
+                  },
+
+                  ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
+                    name: dateFormat(v.expireDate),
+                    anchor: `form-employee-visa-${i}`,
+                    tab: 'visa',
+                    sub: true,
+                  })) || []),
+
+                  {
+                    name: $t('customerEmployee.form.group.healthCheck'),
+                    anchor: 'form-employee-checkup',
+                    tab: 'healthCheck',
+                    useBtn:
+                      currentFromDataEmployee.employeeCheckup?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return true;
+                          }
+                          return false;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexCheckup === -1
+                        ? true
+                        : false,
+                  },
+
+                  ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
+                    name: $t('general.times', { number: i + 1 }),
+                    anchor: `form-employee-checkup-${i}`,
+                    tab: 'healthCheck',
+                  })) || []),
+
+                  {
+                    name: $t('customerEmployee.form.group.workHistory'),
+                    anchor: 'form-employee-work-history',
+                    tab: 'workHistory',
+                    useBtn:
+                      currentFromDataEmployee.employeeWork?.filter((item) => {
+                        if (item.id === undefined) {
+                          return true;
+                        }
+                        return false;
+                      }).length === 0 &&
+                      employeeFormState.currentIndexWorkHistory === -1
+                        ? true
+                        : false,
+                  },
+
+                  ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
+                    name: $t('general.times', { number: i + 1 }),
+                    anchor: `form-employee-work-history-${i}`,
+                    tab: 'workHistory',
+                  })) || []),
+
+                  {
+                    name: $t('customerEmployee.form.group.family'),
+                    anchor: 'form-employee-other',
+                    tab: 'other',
+                  },
+                ].filter((v) => v.tab === employeeFormState.currentTab)
+              "
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#employee-form-content"
+            >
+              <template v-slot:btn-form-passport>
+                <q-btn
+                  id="form-add-passport"
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  padding="0px 0px"
+                  style="color: var(--stone-9)"
+                  @click.stop="employeeFormStore.addPassport()"
+                />
+              </template>
+
+              <template v-slot:btn-form-visa>
+                <q-btn
+                  id="form-add-visa"
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  style="color: var(--stone-9)"
+                  @click.stop="employeeFormStore.addVisa()"
+                />
+              </template>
+
+              <template v-slot:btn-form-employee-checkup>
+                <q-btn
+                  id="form-add-checkup"
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  style="color: var(--stone-9)"
+                  @click.stop="employeeFormStore.addCheckup()"
+                />
+              </template>
+
+              <template v-slot:btn-form-employee-work-history>
+                <q-btn
+                  id="form-add-work-history"
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  style="color: var(--stone-9)"
+                  @click.stop="employeeFormStore.addWorkHistory()"
+                />
+              </template>
+            </SideMenu>
+          </div>
+        </div>
+
+        <div
+          class="col-12 col-md-10"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
+          }"
+          id="employee-form-content"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+        >
+          <template v-if="employeeFormState.currentTab === 'personalInfo'">
+            <div
+              class="rounded row q-py-md q-px-md"
+              style="position: absolute; z-index: 999; top: 0; right: 0"
+            >
+              <div class="surface-1 row rounded">
+                <UndoButton
+                  v-if="
+                    employeeFormState.isEmployeeEdit &&
+                    employeeFormState.dialogType !== 'create'
+                  "
+                  id="btn-info-basic-undo"
+                  icon-only
+                  @click="
+                    () => {
+                      employeeFormStore.resetFormDataEmployee();
+                      employeeFormState.isEmployeeEdit = false;
+                      employeeFormState.dialogType = 'info';
+                    }
+                  "
+                  type="button"
+                />
+                <SaveButton
+                  v-if="employeeFormState.isEmployeeEdit"
+                  id="btn-info-basic-save"
+                  icon-only
+                  type="submit"
+                />
+                <EditButton
+                  v-if="!employeeFormState.isEmployeeEdit"
+                  id="btn-info-basic-edit"
+                  icon-only
+                  @click="
+                    () => {
+                      employeeFormState.isEmployeeEdit = true;
+                      employeeFormState.dialogType = 'edit';
+                    }
+                  "
+                  type="button"
+                />
+                <DeleteButton
+                  v-if="!employeeFormState.isEmployeeEdit"
+                  id="btn-info-basic-delete"
+                  icon-only
+                  @click="
+                    () =>
+                      deleteEmployeeById({
+                        id: currentFromDataEmployee.id,
+                        fetch: async () =>
+                          await fetchListEmployee(
+                            currentTab === 'employer'
+                              ? {
+                                  page: 1,
+                                  pageSize: 999,
+                                  customerId:
+                                    customerFormState.currentCustomerId,
+                                }
+                              : {
+                                  fetchStats: true,
+                                  mobileFetch: $q.screen.xs,
+                                },
+                          ),
+                      })
+                  "
+                  type="button"
+                />
+              </div>
+            </div>
+
+            <BasicInformation
+              no-action
+              id="form-information"
+              prefix-id="form-employee"
+              :show-btn-save="employeeFormState.dialogType === 'create'"
+              employee
+              dense
+              outlined
+              separator
+              title="form.field.basicInformation"
+              :readonly="!employeeFormState.isEmployeeEdit"
+              :employee-owner-option="employeeStore.ownerOption || []"
+              v-model:customer-branch-id="employeeFormState.currentBranchId"
+              v-model:current-customer-branch="
+                employeeFormState.currentCustomerBranch
+              "
+              v-model:employee-id="employeeFormState.currentEmployeeCode"
+              v-model:nrc-no="currentFromDataEmployee.nrcNo"
+              v-model:code="currentFromDataEmployee.code"
+              class="q-mb-xl"
+            />
+            <FormPerson
+              id="form-personal"
+              prefix-id="form-employee"
+              dense
+              outlined
+              employee
+              separator
+              title="customerEmployee.form.group.personalInfo"
+              :readonly="!employeeFormState.isEmployeeEdit"
+              v-model:open="employeeFormState.dialogModal"
+              v-model:prefix-name="currentFromDataEmployee.namePrefix"
+              v-model:first-name="currentFromDataEmployee.firstName"
+              v-model:last-name="currentFromDataEmployee.lastName"
+              v-model:first-name-en="currentFromDataEmployee.firstNameEN"
+              v-model:last-name-en="currentFromDataEmployee.lastNameEN"
+              v-model:mid-name="currentFromDataEmployee.middleName"
+              v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
+              v-model:gender="currentFromDataEmployee.gender"
+              v-model:birth-date="currentFromDataEmployee.dateOfBirth"
+              v-model:nationality="currentFromDataEmployee.nationality"
+              class="q-mb-xl"
+            />
+            <AddressForm
+              disabledRule
+              id="form-personal-address"
+              prefix-id="form-employee"
+              :readonly="!employeeFormState.isEmployeeEdit"
+              v-model:same-with-employer="
+                employeeFormState.formDataEmployeeSameAddr
+              "
+              v-model:address="currentFromDataEmployee.address"
+              v-model:address-en="currentFromDataEmployee.addressEN"
+              v-model:moo="currentFromDataEmployee.moo"
+              v-model:moo-en="currentFromDataEmployee.mooEN"
+              v-model:soi="currentFromDataEmployee.soi"
+              v-model:soi-en="currentFromDataEmployee.soiEN"
+              v-model:street="currentFromDataEmployee.street"
+              v-model:street-en="currentFromDataEmployee.streetEN"
+              v-model:province-id="currentFromDataEmployee.provinceId"
+              v-model:district-id="currentFromDataEmployee.districtId"
+              v-model:sub-district-id="currentFromDataEmployee.subDistrictId"
+              employee
+              dense
+              class="q-mb-xl"
+            />
+
+            <div class="row q-mb-md" id="form-info-file-upload">
+              <div class="col-12 q-pb-sm text-weight-bold text-body1">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-upload"
+                  style="background-color: var(--surface-3)"
+                />
+                {{ $t(`general.uploadFile`) }}
+              </div>
+              <!-- สร้างลูกจ้าง -->
+              <UploadFileGroup
+                v-model:current-id="currentFromDataEmployee.id"
+                v-model="currentFromDataEmployee.file"
+                hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
+                :menu="uploadFileListEmployee"
+                :columns="columnsAttachment"
+                @submit="
+                  async (group, allMeta) => {
+                    if (allMeta === undefined) return;
+
+                    if (group === 'passport') {
+                      const fullName = allMeta['full_name'].split(' ');
+                      let tempValue: {
+                        oldData: { nameField: string; value: string }[];
+                        newData: { nameField: string; value: string }[];
+                      } = { oldData: [], newData: [] };
+
+                      if (
+                        currentFromDataEmployee.gender !== '' &&
+                        currentFromDataEmployee.gender !== allMeta['sex']
+                      ) {
+                        tempValue.oldData.push({
+                          nameField: $t('form.gender'),
+                          value: $t(
+                            `general.${currentFromDataEmployee.gender}`,
+                          ),
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('form.gender'),
+                          value: $t(`general.${allMeta['sex']}`),
+                        });
+                      }
+
+                      if (currentFromDataEmployee.firstName !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('personnel.form.firstName'),
+                          value: currentFromDataEmployee.firstName,
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('personnel.form.firstName'),
+                          value: fullName[0],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.lastName !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('personnel.form.lastName'),
+                          value: currentFromDataEmployee.lastName,
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('personnel.form.lastName'),
+                          value: fullName[1],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.nationality !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('general.nationality'),
+                          value: currentFromDataEmployee.nationality || '',
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('general.nationality'),
+                          value: allMeta['nationality'],
+                        });
+                      }
+
+                      dialogCheckData({
+                        action: async () => {
+                          currentFromDataEmployee.gender = allMeta['sex'];
+                          currentFromDataEmployee.firstName = fullName[0];
+                          currentFromDataEmployee.lastName = fullName[1];
+                          currentFromDataEmployee.nationality =
+                            allMeta['nationality'];
+                        },
+                        checkData: () => {
+                          return tempValue;
+                        },
+                        cancel: () => {
+                          if (!currentFromDataEmployee.gender) {
+                            currentFromDataEmployee.gender = allMeta['gender'];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.lastName) {
+                            currentFromDataEmployee.lastName = fullName[1];
+                          }
+
+                          if (!currentFromDataEmployee.nationality) {
+                            currentFromDataEmployee.nationality =
+                              allMeta['nationality'];
+                          }
+                        },
+                      });
+                    }
+                  }
+                "
+                :ocr="
+                  async (group, file) => {
+                    if (group === 'passport') {
+                      mrz = await runOcr(file, parseResultMRZ);
+
+                      if (mrz !== null) {
+                        const mapMrz = Object.entries(mrz.result || {}).map(
+                          ([key, value]) => ({
+                            name: key,
+                            value: String(value),
+                          }),
+                        );
+                        const tempValue = {
+                          status: true,
+                          group,
+                          meta: mapMrz,
+                        };
+
+                        return tempValue;
+                      }
+                    }
+                    if (group === 'visa') {
+                      const res = await ocrStore.sendOcr({
+                        file: file,
+                        category: group,
+                      });
+
+                      if (res) {
+                        const tempValue = {
+                          status: true,
+                          group,
+                          meta: res.fields,
+                        };
+
+                        return tempValue;
+                      }
+                    }
+
+                    return { status: true, group, meta: [] };
+                  }
+                "
+                :auto-save="currentFromDataEmployee.id !== ''"
+                :download="
+                  (obj) => {
+                    if (obj.group !== 'attachment') {
+                      employeeStore.getFile({
+                        parentId: currentFromDataEmployee.id || '',
+                        group: obj.group,
+                        fileId: obj._meta.id,
+                        download: true,
+                      });
+                    } else {
+                      employeeStore.getAttachment({
+                        parentId: currentFromDataEmployee.id || '',
+                        name: obj._meta.name,
+                        download: true,
+                      });
+                    }
+                  }
+                "
+                :delete-item="
+                  async (obj) => {
+                    let status: boolean = false;
+                    const res = await employeeStore.delMeta({
+                      parentId: currentFromDataEmployee.id || '',
+                      group: obj.group,
+                      metaId: obj._meta.id,
+                    });
+
+                    if (res) {
+                      status = true;
+                    }
+
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
+                    );
+
+                    return status;
+                  }
+                "
+                :save="
+                  async (
+                    group: 'passport' | 'visa' | 'attachment',
+                    _meta: any,
+                    file: File | undefined,
+                  ) => {
+                    let status: boolean = false;
+                    if (group === 'passport' || group === 'visa') {
+                      if (file !== undefined && currentFromDataEmployee.id) {
+                        const res = await employeeStore.postMeta({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          meta: _meta,
+                          file,
+                        });
+
+                        if (res) {
+                          status = true;
+                        }
+                      } else {
+                        const {
+                          id,
+                          employeeId,
+                          createdAt,
+                          updatedAt,
+                          ...payload
+                        } = _meta;
+
+                        const res = await employeeStore.putMeta({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          metaId: _meta.id,
+                          meta: payload,
+                          file,
+                        });
+                        if (res) {
+                          status = true;
+                        }
+                      }
+                    } else {
+                      if (file !== undefined) {
+                        await employeeStore.uploadAttachment(
+                          currentFromDataEmployee.id || '',
+                          file,
+                          file.name,
+                        );
+                        status = true;
+                      }
+                    }
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
+                    );
+                    return status;
+                  }
+                "
+                :get-file-list="
+                  async (group: 'passport' | 'visa' | 'attachment') => {
+                    if (
+                      !!currentFromDataEmployee.id &&
+                      group !== 'attachment'
+                    ) {
+                      const resMeta = await employeeStore.getMetaList({
+                        parentId: currentFromDataEmployee.id,
+                        group,
+                      });
+
+                      const tempValue = resMeta.map(async (i: any) => {
+                        return {
+                          _meta: { ...i },
+                          name: `${group}-${dateFormat(i.expireDate)}` || '',
+                          group: group,
+                          url: await employeeStore.getFile({
+                            parentId: currentFromDataEmployee.id || '',
+                            group,
+                            fileId: i.id,
+                          }),
+                          file: undefined,
+                        };
+                      });
+
+                      return await waitAll(tempValue);
+                    } else {
+                      const res = await employeeStore.listAttachment({
+                        parentId: currentFromDataEmployee.id || '',
+                      });
+
+                      const tempValue = (res as string[]).map(
+                        async (i: any) => {
+                          return {
+                            _meta: { id: i, name: i },
+                            name: i || '',
+                            group: group,
+                            url: await employeeStore.getAttachment({
+                              parentId: currentFromDataEmployee.id || '',
+                              name: i,
+                            }),
+                            file: undefined,
+                          };
+                        },
+                      );
+
+                      return await waitAll(tempValue);
+                    }
+                  }
+                "
+              >
+                <template #form="{ mode, meta, isEdit }">
+                  <FormEmployeePassport
+                    v-if="mode === 'passport' && meta"
+                    prefix-id="drawer-info-employee"
+                    id="form-passport"
+                    dense
+                    outlined
+                    separator
+                    ocr
+                    :title="$t('customerEmployee.form.group.passport')"
+                    :readonly="!isEdit"
+                    v-model:birth-country="meta.birthCountry"
+                    v-model:previous-passportRef="meta.previousPassportRef"
+                    v-model:issue-place="meta.issuePlace"
+                    v-model:issue-country="meta.issueCountry"
+                    v-model:issue-date="meta.issueDate"
+                    v-model:type="meta.type"
+                    v-model:expire-date="meta.expireDate"
+                    v-model:birth-date="meta.birthDate"
+                    v-model:worker-status="meta.workerStatus"
+                    v-model:nationality="meta.nationality"
+                    v-model:gender="meta.gender"
+                    v-model:last-name-en="meta.lastNameEN"
+                    v-model:last-name="meta.lastName"
+                    v-model:middle-name-en="meta.middleNameEN"
+                    v-model:middle-name="meta.middleName"
+                    v-model:first-name-en="meta.firstNameEN"
+                    v-model:first-name="meta.firstName"
+                    v-model:name-prefix="meta.namePrefix"
+                    v-model:passport-number="meta.number"
+                  />
+                  <FormEmployeeVisa
+                    v-if="mode === 'visa' && meta"
+                    prefix-id="drawer-info-employee"
+                    id="form-visa"
+                    ocr
+                    dense
+                    outlined
+                    title="customerEmployee.form.group.visa"
+                    :readonly="!isEdit"
+                    v-model:arrival-at="meta.arrivalAt"
+                    v-model:arrival-tm-no="meta.arrivalTMNo"
+                    v-model:arrival-tm="meta.arrivalTM"
+                    v-model:mrz="meta.mrz"
+                    v-model:entry-count="meta.entryCount"
+                    v-model:issue-place="meta.issuePlace"
+                    v-model:issue-country="meta.issueCountry"
+                    v-model:issueDate="meta.issueDate"
+                    v-model:type="meta.type"
+                    v-model:expire-date="meta.expireDate"
+                    v-model:visa-issue-date="meta.issueDate"
+                    v-model:visa-expiry-date="meta.expireDate"
+                    v-model:remark="meta.remark"
+                    v-model:worker-type="meta.workerType"
+                    v-model:number="meta.number"
+                    v-model:report-date="meta.reportDate"
+                  />
+
+                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+                </template>
+              </UploadFileGroup>
+            </div>
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'passport'">
+            <div class="q-gutter-sm">
+              <div
+                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
+              >
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-passport"
+                  style="background-color: var(--surface-3)"
+                />
+                {{ $t('customerEmployee.form.group.passport') }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeePassport?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 &&
+                    employeeFormState.currentIndexPassport === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addPassport()"
+                />
+              </div>
+
+              <FormEmployeePassport
+                v-for="(
+                  value, index
+                ) in currentFromDataEmployee.employeePassport"
+                prefix-id="drawer-info-employee"
+                :key="index"
+                id="form-passport"
+                hide-title
+                dense
+                outlined
+                separator
+                :title="$t('customerEmployee.form.group.passport')"
+                :readonly="employeeFormState.currentIndexPassport !== index"
+                :full-name="employeeFormState.currentIndexPassport !== index"
+                v-model:birth-country="value.birthCountry"
+                v-model:previous-passportRef="value.previousPassportRef"
+                v-model:issue-place="value.issuePlace"
+                v-model:issue-country="value.issueCountry"
+                v-model:issue-date="value.issueDate"
+                v-model:type="value.type"
+                v-model:expire-date="value.expireDate"
+                v-model:birth-date="value.birthDate"
+                v-model:worker-status="value.workerStatus"
+                v-model:nationality="value.nationality"
+                v-model:gender="value.gender"
+                v-model:last-name-en="value.lastNameEN"
+                v-model:last-name="value.lastName"
+                v-model:middle-name-en="value.middleNameEN"
+                v-model:middle-name="value.middleName"
+                v-model:first-name-en="value.firstNameEN"
+                v-model:first-name="value.firstName"
+                v-model:name-prefix="value.namePrefix"
+                v-model:passport-number="value.number"
+                v-model:file="value.file"
+              >
+                <template v-slot:expiryDate>
+                  {{ $t('general.expirationDate') }} :
+                  {{ dateFormat(value.expireDate) }}
+                  <ExpirationDate
+                    v-if="value.id !== undefined"
+                    :expiration-date="value.expireDate"
+                  />
+                </template>
+
+                <template v-slot:button>
+                  <div class="surface-1 row rounded" style="min-height: 35px">
+                    <UndoButton
+                      v-if="
+                        employeeFormState.isEmployeeEdit &&
+                        !(employeeFormState.currentIndexPassport === -1) &&
+                        employeeFormState.currentIndexPassport === index
+                      "
+                      id="btn-info-basic-undo"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormStore.resetFormDataEmployee();
+                          employeeFormState.isEmployeeEdit = false;
+                          employeeFormState.dialogType = 'info';
+                          employeeFormState.currentIndexPassport = -1;
+                        }
+                      "
+                      type="button"
+                    />
+                    <SaveButton
+                      v-if="
+                        (employeeFormState.isEmployeeEdit ||
+                          value.id === undefined) &&
+                        !(employeeFormState.currentIndexPassport === -1) &&
+                        employeeFormState.currentIndexPassport === index
+                      "
+                      id="btn-info-basic-save"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormState.currentIndexPassport = index;
+                        }
+                      "
+                      type="submit"
+                    />
+
+                    <EditButton
+                      v-if="
+                        employeeFormState.currentIndexPassport === -1 ||
+                        (!employeeFormState.isEmployeeEdit &&
+                          value.id !== undefined &&
+                          employeeFormState.currentIndexPassport === index)
+                      "
+                      id="btn-info-basic-edit"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormState.currentIndexPassport = index;
+                          employeeFormState.isEmployeeEdit = true;
+                          employeeFormState.dialogType = 'edit';
+                        }
+                      "
+                      type="button"
+                    />
+                    <DeleteButton
+                      v-if="
+                        employeeFormState.currentIndexPassport === -1 ||
+                        (!employeeFormState.isEmployeeEdit &&
+                          value.id !== undefined &&
+                          !(employeeFormState.currentIndexPassport === -1) &&
+                          employeeFormState.currentIndexPassport === index)
+                      "
+                      id="btn-info-basic-delete"
+                      icon-only
+                      @click.stop="
+                        () => {
+                          employeeFormState.currentIndexPassport = index;
+                          deleteEmployeeById({
+                            type: 'passport',
+                            index,
+                            fetch: async () =>
+                              await fetchListEmployee(
+                                currentTab === 'employer'
+                                  ? {
+                                      page: 1,
+                                      pageSize: 999,
+                                      customerId:
+                                        customerFormState.currentCustomerId,
+                                    }
+                                  : {
+                                      fetchStats: true,
+                                      mobileFetch: $q.screen.xs,
+                                    },
+                              ),
+                          });
+                        }
+                      "
+                      type="button"
+                      :disabled="
+                        !(employeeFormState.currentIndexPassport === -1) &&
+                        !(employeeFormState.currentIndexPassport === index)
+                      "
+                    />
+                  </div>
+                </template>
+              </FormEmployeePassport>
+            </div>
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'visa'">
+            <div class="q-gutter-sm">
+              <div
+                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
+              >
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-passport"
+                  style="background-color: var(--surface-3)"
+                />
+                {{ $t('customerEmployee.form.group.visa') }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeeVisa?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 && employeeFormState.currentIndexVisa === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addVisa()"
+                />
+              </div>
+
+              <FormEmployeeVisa
+                v-for="(value, index) in currentFromDataEmployee.employeeVisa"
+                :key="index"
+                prefix-id="drawer-info-employee"
+                id="form-visa"
+                dense
+                outlined
+                title="customerEmployee.form.group.visa"
+                :readonly="employeeFormState.currentIndexVisa !== index"
+                hide-title
+                v-model:arrival-at="value.arrivalAt"
+                v-model:arrival-tm-no="value.arrivalTMNo"
+                v-model:arrival-tm="value.arrivalTM"
+                v-model:mrz="value.mrz"
+                v-model:entry-count="value.entryCount"
+                v-model:issue-place="value.issuePlace"
+                v-model:issue-country="value.issueCountry"
+                v-model:issueDate="value.issueDate"
+                v-model:type="value.type"
+                v-model:expire-date="value.expireDate"
+                v-model:visa-issue-date="value.issueDate"
+                v-model:visa-expiry-date="value.expireDate"
+                v-model:remark="value.remark"
+                v-model:worker-type="value.workerType"
+                v-model:number="value.number"
+                v-model:report-date="value.reportDate"
+              >
+                <template v-slot:expiryDate>
+                  {{ $t('general.expirationDate') }} :
+                  {{ dateFormat(value.expireDate) }}
+                  <ExpirationDate
+                    v-if="value.id !== undefined"
+                    :expiration-date="value.expireDate"
+                  />
+                </template>
+
+                <template v-slot:button>
+                  <div class="surface-1 row rounded" style="min-height: 35px">
+                    <UndoButton
+                      v-if="
+                        employeeFormState.isEmployeeEdit &&
+                        !(employeeFormState.currentIndexVisa === -1) &&
+                        employeeFormState.currentIndexVisa === index
+                      "
+                      id="btn-info-basic-undo"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormStore.resetFormDataEmployee();
+                          employeeFormState.isEmployeeEdit = false;
+                          employeeFormState.dialogType = 'info';
+                          employeeFormState.currentIndexVisa = -1;
+                        }
+                      "
+                      type="button"
+                    />
+                    <SaveButton
+                      v-if="
+                        (employeeFormState.isEmployeeEdit ||
+                          value.id === undefined) &&
+                        !(employeeFormState.currentIndexVisa === -1) &&
+                        employeeFormState.currentIndexVisa === index
+                      "
+                      id="btn-info-basic-save"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormState.currentIndexVisa = index;
+                        }
+                      "
+                      type="submit"
+                    />
+
+                    <EditButton
+                      v-if="
+                        employeeFormState.currentIndexVisa === -1 ||
+                        (!employeeFormState.isEmployeeEdit &&
+                          value.id !== undefined &&
+                          employeeFormState.currentIndexVisa === index)
+                      "
+                      id="btn-info-basic-edit"
+                      icon-only
+                      @click="
+                        () => {
+                          employeeFormState.currentIndexVisa = index;
+                          employeeFormState.isEmployeeEdit = true;
+                          employeeFormState.dialogType = 'edit';
+                        }
+                      "
+                      type="button"
+                    />
+                    <DeleteButton
+                      v-if="
+                        employeeFormState.currentIndexVisa === -1 ||
+                        (!employeeFormState.isEmployeeEdit &&
+                          value.id !== undefined &&
+                          !(employeeFormState.currentIndexVisa === -1) &&
+                          employeeFormState.currentIndexVisa === index)
+                      "
+                      id="btn-info-basic-delete"
+                      icon-only
+                      @click.stop="
+                        () => {
+                          employeeFormState.currentIndexVisa = index;
+                          deleteEmployeeById({
+                            type: 'visa',
+                            index,
+                            fetch: async () =>
+                              await fetchListEmployee(
+                                currentTab === 'employer'
+                                  ? {
+                                      page: 1,
+                                      pageSize: 999,
+                                      customerId:
+                                        customerFormState.currentCustomerId,
+                                    }
+                                  : {
+                                      fetchStats: true,
+                                      mobileFetch: $q.screen.xs,
+                                    },
+                              ),
+                          });
+                        }
+                      "
+                      type="button"
+                      :disabled="
+                        !(employeeFormState.currentIndexVisa === -1) &&
+                        !(employeeFormState.currentIndexVisa === index)
+                      "
+                    />
+                  </div>
+                </template>
+              </FormEmployeeVisa>
+            </div>
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'healthCheck'">
+            <div class="q-gutter-sm">
+              <div class="q-pb-sm text-weight-bold text-body1 row items-center">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-sm"
+                  color="info"
+                  name="mdi-hospital-box-outline"
+                  style="background-color: var(--surface-3)"
+                />
+
+                {{ $t(`customerEmployee.formHealthCheck.title`) }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeeCheckup?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 &&
+                    employeeFormState.currentIndexCheckup === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addCheckup()"
+                />
+              </div>
+              <FormEmployeeHealthCheck
+                v-if="employeeFormState.currentTab === 'healthCheck'"
+                id="form-checkup"
+                prefix-id="form-employee"
+                dense
+                outlined
+                v-model:current-index="employeeFormState.currentIndexCheckup"
+                v-model:employee-checkup="
+                  currentFromDataEmployee.employeeCheckup
+                "
+                v-model:checkup-results-option="
+                  optionStore.globalOption.checkupResults
+                "
+                v-model:checkup-type-option="
+                  optionStore.globalOption.insurancePlace
+                "
+                v-model:medical-benefit-option="
+                  optionStore.globalOption.typeInsurance
+                "
+                v-model:insurance-company-option="
+                  optionStore.globalOption.insurancePlace
+                "
+                @delete="
+                  (index) => {
+                    employeeFormState.currentIndexCheckup = index;
+                    deleteEmployeeById({
+                      type: 'healthCheck',
+                      index,
+                      fetch: async () =>
+                        await fetchListEmployee(
+                          currentTab === 'employer'
+                            ? {
+                                page: 1,
+                                pageSize: 999,
+                                customerId: customerFormState.currentCustomerId,
+                              }
+                            : {
+                                fetchStats: true,
+                                mobileFetch: $q.screen.xs,
+                              },
+                        ),
+                    });
+                  }
+                "
+                @save="
+                  (index) => {
+                    employeeFormState.currentIndexCheckup = index;
+                    notify('create', $t('general.success'));
+                  }
+                "
+                @undo="
+                  (index) => {
+                    if (
+                      currentFromDataEmployee.employeeCheckup?.[index]
+                        .statusSave === false
+                    ) {
+                      currentFromDataEmployee.employeeCheckup[
+                        index
+                      ].statusSave = true;
+                    }
+                  }
+                "
+                @edit="
+                  (index) => {
+                    if (
+                      currentFromDataEmployee.employeeCheckup?.[index]
+                        .statusSave
+                    ) {
+                      currentFromDataEmployee.employeeCheckup[
+                        index
+                      ].statusSave = false;
+                    }
+                  }
+                "
+              />
+            </div>
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'workHistory'">
+            <div class="q-gutter-sm">
+              <div
+                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
+              >
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-briefcase-outline"
+                  style="background-color: var(--surface-3)"
+                />
+                {{ $t(`customerEmployee.form.group.workHistory`) }}
+                <AddButton
+                  v-if="$q.screen.lt.md"
+                  id="btn-add-work"
+                  icon-only
+                  class="q-ml-sm"
+                  :disabled="
+                    currentFromDataEmployee.employeeWork?.filter((item) => {
+                      if (item.id === undefined) {
+                        return false;
+                      }
+                      return true;
+                    }).length === 0 &&
+                    employeeFormState.currentIndexWorkHistory === -1
+                      ? false
+                      : true
+                  "
+                  @click.stop="employeeFormStore.addWorkHistory()"
+                />
+              </div>
+              <FormEmployeeWorkHistory
+                v-if="employeeFormState.currentTab === 'workHistory'"
+                id="form-work-history"
+                prefix-id="form-employee"
+                dense
+                outlined
+                v-model:current-index="
+                  employeeFormState.currentIndexWorkHistory
+                "
+                v-model:employee-work="currentFromDataEmployee.employeeWork"
+                v-model:position-name-option="optionStore.globalOption.position"
+                v-model:job-type-option="optionStore.globalOption.businessType"
+                v-model:workplace-option="optionStore.globalOption.area"
+                @delete="
+                  (index) => {
+                    employeeFormState.currentIndexWorkHistory = index;
+                    deleteEmployeeById({
+                      type: 'work',
+                      index,
+                      fetch: async () =>
+                        await fetchListEmployee(
+                          currentTab === 'employer'
+                            ? {
+                                page: 1,
+                                pageSize: 999,
+                                customerId: customerFormState.currentCustomerId,
+                              }
+                            : {
+                                fetchStats: true,
+                                mobileFetch: $q.screen.xs,
+                              },
+                        ),
+                    });
+                  }
+                "
+                @save="
+                  (index) => {
+                    employeeFormState.currentIndexWorkHistory = index;
+                  }
+                "
+                @undo="
+                  (index) => {
+                    if (
+                      currentFromDataEmployee.employeeWork?.[index]
+                        .statusSave === false
+                    ) {
+                      currentFromDataEmployee.employeeWork[index].statusSave =
+                        true;
+                    }
+                  }
+                "
+                @edit="
+                  (index) => {
+                    if (
+                      currentFromDataEmployee.employeeWork?.[index].statusSave
+                    ) {
+                      currentFromDataEmployee.employeeWork[index].statusSave =
+                        false;
+                    }
+                  }
+                "
+              />
+            </div>
+          </template>
+
+          <template v-if="employeeFormState.currentTab === 'other'">
+            <FormEmployeeOther
+              v-if="employeeFormState.currentTab === 'other'"
+              id="form-employee-other"
+              prefix-id="form-employee"
+              dense
+              outlined
+              v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
+              @undo="
+                () => {
+                  if (
+                    currentFromDataEmployee.employeeOtherInfo?.statusSave ===
+                    false
+                  ) {
+                    currentFromDataEmployee.employeeOtherInfo.statusSave = true;
+                  }
+                }
+              "
+              @edit="
+                () => {
+                  if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
+                    currentFromDataEmployee.employeeOtherInfo.statusSave = false;
+                  }
+                }
+              "
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+  </DialogForm>
+
+  <ImageUploadDialog
+    ref="dialogEmployeeImageUpload"
+    v-model:dialog-state="employeeFormState.imageDialog"
+    v-model:file="currentFromDataEmployee.image"
+    v-model:image-url="employeeFormState.profileUrl"
+    v-model:data-list="employeeFormState.imageList"
+    v-model:on-create-data-list="onCreateImageList"
+    :on-create="employeeFormState.dialogModal && !currentFromDataEmployee.id"
+    :hidden-footer="!employeeFormState.isImageEdit"
+    @add-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        await employeeStore.addImageList(
+          v,
+          currentFromDataEmployee.id,
+          Date.now().toString(),
+        );
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
+    "
+    @remove-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        const name = v.split('/').pop() || '';
+        await employeeStore.deleteImageByName(currentFromDataEmployee.id, name);
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
+    "
+    @submit="
+      async (v) => {
+        if (employeeFormState.dialogModal && !currentFromDataEmployee.id) {
+          employeeFormState.profileUrl = v;
+          employeeFormState.imageDialog = false;
+        } else {
+          refreshImageState = true;
+          employeeFormState.dialogType = 'edit';
+          currentFromDataEmployee.selectedImage = v;
+          employeeFormState.imageList
+            ? (employeeFormState.imageList.selectedImage = v)
+            : '';
+          employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
+          employeeFormStore.resetFormDataEmployee();
+          await employeeFormStore.submitPersonal(onCreateImageList);
+          employeeFormState.imageDialog = false;
+          refreshImageState = false;
+          employeeFormState.isEmployeeEdit = false;
+          employeeFormState.dialogType = 'info';
+          await fetchListEmployee();
+        }
+      }
+    "
+  >
+    <template #title>
+      <span
+        v-if="!employeeFormState.dialogModal || currentFromDataEmployee.id"
+        class="justify-center flex text-bold"
+      >
+        {{ $t('general.image') }}
+        {{
+          $i18n.locale === 'eng'
+            ? `${currentFromDataEmployee.firstNameEN || currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastNameEN || currentFromDataEmployee.lastName}`
+            : `${currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastName}`
+        }}
+      </span>
+    </template>
+    <template #error>
+      <div class="full-height full-width" style="background: white">
+        <div
+          class="full-height full-width flex justify-center items-center"
+          style="background: #ee4367"
+        >
+          <q-img
+            :src="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
+            fit="contain"
+            style="height: 100%"
+          />
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
+</template>
diff --git a/src/components/03_customer-management/DrawerEmployee.vue b/src/components/03_customer-management/DrawerEmployee.vue
new file mode 100644
index 00000000..1c1d39bf
--- /dev/null
+++ b/src/components/03_customer-management/DrawerEmployee.vue
@@ -0,0 +1,1772 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
+
+import FormPerson from '../02_personnel-management/FormPerson.vue';
+import { ProfileBanner, DrawerInfo, SideMenu, NoData } from 'src/components';
+import {
+  AddButton,
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
+import AddressForm from '../form/AddressForm.vue';
+import NoticeJobEmployment from '../upload-file/NoticeJobEmployment.vue';
+import UploadFileGroup from '../upload-file/UploadFileGroup.vue';
+import BasicInformation from './employee/BasicInformation.vue';
+import FormEmployeeHealthCheck from './FormEmployeeHealthCheck.vue';
+import FormEmployeeOther from './FormEmployeeOther.vue';
+import FormEmployeePassport from './FormEmployeePassport.vue';
+import FormEmployeeVisa from './FormEmployeeVisa.vue';
+import FormEmployeeWorkHistory from './FormEmployeeWorkHistory.vue';
+import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
+import ImageUploadDialog from '../ImageUploadDialog.vue';
+
+import useOcrStore from 'stores/ocr';
+import useOptionStore from 'src/stores/options';
+import useEmployeeStore from 'src/stores/employee';
+import { dateFormat } from 'src/utils/datetime';
+import {
+  useCustomerForm,
+  useEmployeeForm,
+} from 'src/pages/03_customer-management/form';
+import {
+  uploadFileListEmployee,
+  columnsAttachment,
+} from 'src/pages/03_customer-management/constant';
+import { runOcr, parseResultMRZ } from 'src/utils/ocr';
+import {
+  baseUrl,
+  setPrefixName,
+  waitAll,
+  notify,
+  resetScrollBar,
+  dialogCheckData,
+  canAccess,
+} from 'src/stores/utils';
+
+const route = useRoute();
+const ocrStore = useOcrStore();
+const optionStore = useOptionStore();
+const employeeStore = useEmployeeStore();
+const employeeFormStore = useEmployeeForm();
+const customerFormStore = useCustomerForm();
+const { t, locale } = useI18n();
+const { employeeConfirmUnsave, deleteEmployeeById } = employeeFormStore;
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  refreshImageState,
+  onCreateImageList,
+} = storeToRefs(employeeFormStore);
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+
+const props = defineProps<{
+  currentTab: string;
+  fetchListEmployee: (opt?: {
+    fetchStats?: boolean;
+    page?: number;
+    pageSize?: number;
+    customerId?: string;
+    mobileFetch?: boolean;
+  }) => Promise<void>;
+  fetchImageList: (
+    id: string,
+    selectedName: string,
+    type: 'customer' | 'employee',
+  ) => Promise<void>;
+}>();
+
+const mrz = defineModel<Awaited<ReturnType<typeof parseResultMRZ>>>('mrz');
+
+defineEmits<{
+  (e: 'fetchEmployee');
+  (e: 'changeStatus', status: string);
+}>();
+</script>
+
+<template>
+  <DrawerInfo
+    v-if="!!employeeFormState.currentEmployee"
+    hide-action
+    v-model:drawer-open="employeeFormState.drawerModal"
+    :close="
+      () => {
+        resetScrollBar('drawer-employee-form-content');
+      }
+    "
+    :title="
+      setPrefixName(
+        {
+          namePrefix: employeeFormState.currentEmployee.namePrefix,
+          firstName:
+            employeeFormState.currentEmployee.firstName ||
+            employeeFormState.currentEmployee.firstNameEN,
+          lastName: employeeFormState.currentEmployee.lastName,
+          firstNameEN: employeeFormState.currentEmployee.firstNameEN,
+          lastNameEN: employeeFormState.currentEmployee.lastNameEN,
+        },
+        { locale },
+      )
+    "
+    :badge-class="
+      currentFromDataEmployee.gender === 'male'
+        ? 'app-bg-male text-white'
+        : currentFromDataEmployee.gender === 'female'
+          ? 'app-bg-female text-white'
+          : ''
+    "
+    :submit="
+      async () => {
+        if (employeeFormState.currentTab === 'personalInfo') {
+          await employeeFormStore.submitPersonal();
+          employeeFormState.dialogType = 'info';
+          employeeFormState.isEmployeeEdit = false;
+        }
+
+        if (employeeFormState.currentTab === 'passport') {
+          await employeeFormStore.submitPassport();
+        }
+
+        if (employeeFormState.currentTab === 'visa') {
+          await employeeFormStore.submitVisa();
+        }
+
+        if (employeeFormState.currentTab === 'healthCheck') {
+          await employeeFormStore.submitHealthCheck();
+        }
+
+        if (employeeFormState.currentTab === 'workHistory') {
+          await employeeFormStore.submitWorkHistory();
+        }
+
+        if (employeeFormState.currentTab === 'other') {
+          await employeeFormStore.submitOther();
+        }
+
+        if (route.name !== 'CustomerBranchManagement') {
+          await fetchListEmployee(
+            currentTab === 'employer'
+              ? {
+                  page: 1,
+                  pageSize: 999,
+                  customerId: customerFormState.currentCustomerId,
+                }
+              : { mobileFetch: $q.screen.xs },
+          );
+        }
+
+        employeeFormState.isEmployeeEdit = false;
+      }
+    "
+    :before-close="
+      () => {
+        if (employeeFormStore.isFormDataDifferent()) {
+          employeeConfirmUnsave();
+          return true;
+        }
+
+        employeeFormState.currentTab = 'personalInfo';
+        return false;
+      }
+    "
+  >
+    <div class="column full-height">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <ProfileBanner
+          :prefix="employeeFormState.currentEmployee.firstName"
+          hideFade
+          @update:current-tab="
+            () => {
+              employeeFormState.isImageEdit = false;
+              employeeFormStore.resetFormDataEmployee();
+              employeeFormState.isEmployeeEdit = false;
+              employeeFormState.dialogType = 'info';
+              employeeFormState.currentIndexPassport = -1;
+            }
+          "
+          @view="
+            () => {
+              employeeFormState.imageDialog = true;
+              employeeFormState.isImageEdit = false;
+            }
+          "
+          @edit="
+            employeeFormState.imageDialog = employeeFormState.isImageEdit = true
+          "
+          @update:toggle-status="
+            (v) => {
+              if (currentFromDataEmployee.id !== undefined)
+                $emit('changeStatus', v);
+            }
+          "
+          :active="currentFromDataEmployee.status !== 'INACTIVE'"
+          use-toggle
+          color="white"
+          icon="mdi-account-outline"
+          :bg-color="
+            employeeFormState.profileUrl
+              ? 'white'
+              : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
+          "
+          v-model:current-tab="employeeFormState.currentTab"
+          v-model:toggle-status="currentFromDataEmployee.status"
+          fallback-cover="/images/employee-banner.png"
+          :title="
+            employeeFormState.currentEmployee
+              ? setPrefixName(
+                  {
+                    namePrefix: employeeFormState.currentEmployee.namePrefix,
+                    firstName:
+                      employeeFormState.currentEmployee.firstName ||
+                      employeeFormState.currentEmployee.firstNameEN,
+                    lastName:
+                      employeeFormState.currentEmployee.lastName ||
+                      employeeFormState.currentEmployee.lastNameEN,
+                    firstNameEN: employeeFormState.currentEmployee.firstNameEN,
+                    lastNameEN: employeeFormState.currentEmployee.lastNameEN,
+                  },
+                  { locale },
+                )
+              : '-'
+          "
+          :caption="currentFromDataEmployee.code"
+          :img="
+            `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
+              refreshImageState ? `?ts=${Date.now()}` : '',
+            ) || null
+          "
+          :fallbackImg="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
+          :tabs-list="[
+            {
+              name: 'personalInfo',
+              label: $t('customerEmployee.form.group.personalInfo'),
+            },
+            {
+              name: 'passport',
+              label: $t('customerEmployee.fileType.passport'),
+            },
+            {
+              name: 'visa',
+              label: $t('customerEmployee.form.group.visa'),
+            },
+            {
+              name: 'healthCheck',
+              label: $t('customerEmployee.form.group.healthCheck'),
+            },
+            {
+              name: 'workHistory',
+              label: $t('customerEmployee.form.group.workHistory'),
+            },
+            { name: 'other', label: $t('customerEmployee.form.group.other') },
+          ]"
+          :toggle-title="$t('status.title')"
+        />
+      </div>
+      <div
+        style="flex: 1; width: 100%; overflow-y: auto"
+        class="column relative-position"
+        id="drawer-employee-form"
+        :class="{
+          'q-px-lg q-pb-lg': $q.screen.gt.sm,
+          'q-px-md q-pb-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <div
+          class="col full-width surface-1 rounded bordered row"
+          :key="String(!employeeFormState.isEmployeeEdit)"
+        >
+          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
+            <div class="q-py-md q-pl-md q-pr-sm">
+              <SideMenu
+                :menu="
+                  [
+                    {
+                      name: $t('form.field.basicInformation'),
+                      anchor: 'drawer-form-information',
+                      tab: 'personalInfo',
+                    },
+                    {
+                      name: $t('customerEmployee.form.group.personalInfo'),
+                      anchor: 'drawer-form-personal',
+                      tab: 'personalInfo',
+                    },
+                    {
+                      name: $t('form.address'),
+                      anchor: 'drawer-form-personal-address',
+                      tab: 'personalInfo',
+                    },
+
+                    {
+                      name: $t('general.uploadFile'),
+                      anchor: 'drawer-upload-file',
+                      tab: 'personalInfo',
+                    },
+
+                    {
+                      name: $t('customerEmployee.form.group.passport'),
+                      anchor: 'drawer-passport',
+                      tab: 'passport',
+                      useBtn:
+                        currentFromDataEmployee.employeePassport?.filter(
+                          (item) => {
+                            if (item.id === undefined) {
+                              return true;
+                            }
+                            return false;
+                          },
+                        ).length === 0 &&
+                        employeeFormState.currentIndexPassport === -1
+                          ? true
+                          : false,
+                    },
+                    ...(currentFromDataEmployee.employeePassport?.map(
+                      (v, i) => ({
+                        name: dateFormat(v.expireDate),
+                        anchor: `drawer-employee-employeePassport-${i}`,
+                        tab: 'passport',
+                        sub: true,
+                      }),
+                    ) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.visa'),
+                      anchor: 'drawer-visa',
+                      tab: 'visa',
+                      useBtn:
+                        currentFromDataEmployee.employeeVisa?.filter((item) => {
+                          if (item.id === undefined) {
+                            return true;
+                          }
+                          return false;
+                        }).length === 0 &&
+                        employeeFormState.currentIndexVisa === -1
+                          ? true
+                          : false,
+                    },
+
+                    ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
+                      name: dateFormat(v.expireDate),
+                      anchor: `drawer-employee-visa-${i}`,
+                      tab: 'visa',
+                      sub: true,
+                    })) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.healthCheck'),
+                      anchor: 'drawer-employee-checkup',
+                      tab: 'healthCheck',
+                      useBtn:
+                        currentFromDataEmployee.employeeCheckup?.filter(
+                          (item) => {
+                            if (item.id === undefined) {
+                              return true;
+                            }
+                            return false;
+                          },
+                        ).length === 0 &&
+                        employeeFormState.currentIndexCheckup === -1
+                          ? true
+                          : false,
+                    },
+
+                    ...(currentFromDataEmployee.employeeCheckup?.map(
+                      (_v, i) => ({
+                        name: $t('general.times', { number: i + 1 }),
+                        anchor: `drawer-employee-checkup-${i}`,
+                        tab: 'healthCheck',
+                      }),
+                    ) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.workHistory'),
+                      anchor: 'drawer-employee-work-history',
+                      tab: 'workHistory',
+                      useBtn:
+                        currentFromDataEmployee.employeeWork?.filter((item) => {
+                          if (item.id === undefined) {
+                            return true;
+                          }
+                          return false;
+                        }).length === 0 &&
+                        employeeFormState.currentIndexWorkHistory === -1
+                          ? true
+                          : false,
+                    },
+
+                    ...(currentFromDataEmployee.employeeWork?.map((_v, i) => ({
+                      name: $t('general.times', { number: i + 1 }),
+                      anchor: `drawer-employee-work-history-${i}`,
+                      tab: 'workHistory',
+                    })) || []),
+
+                    {
+                      name: $t('customerEmployee.form.group.family'),
+                      anchor: 'drawer-other',
+                      tab: 'other',
+                    },
+                  ].filter((v) => v.tab === employeeFormState.currentTab)
+                "
+                background="transparent"
+                :active="{
+                  background: 'hsla(var(--blue-6-hsl) / .2)',
+                  foreground: 'var(--blue-6)',
+                }"
+                scroll-element="#drawer-employee-form-content"
+              >
+                <template v-slot:btn-drawer-passport>
+                  <q-btn
+                    id="form-add-passport"
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    padding="0px 0px"
+                    style="color: var(--stone-9)"
+                    @click.stop="employeeFormStore.addPassport()"
+                  />
+                </template>
+
+                <template v-slot:btn-drawer-visa>
+                  <q-btn
+                    id="form-add-visa"
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    style="color: var(--stone-9)"
+                    @click.stop="employeeFormStore.addVisa()"
+                  />
+                </template>
+
+                <template v-slot:btn-drawer-employee-checkup>
+                  <q-btn
+                    id="form-add-checkup"
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    style="color: var(--stone-9)"
+                    @click.stop="employeeFormStore.addCheckup()"
+                  />
+                </template>
+
+                <template v-slot:btn-drawer-employee-work-history>
+                  <q-btn
+                    id="form-add-work-history"
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    style="color: var(--stone-9)"
+                    @click.stop="employeeFormStore.addWorkHistory()"
+                  />
+                </template>
+              </SideMenu>
+            </div>
+          </div>
+          <div
+            class="col-12 col-md-10 row"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
+            }"
+            id="drawer-employee-form-content"
+            style="height: 100%; overflow-y: auto"
+          >
+            <template v-if="employeeFormState.currentTab === 'personalInfo'">
+              <div
+                class="rounded row q-py-sm q-mx-lg q-px-md"
+                style="position: absolute; z-index: 999; right: 0; top: 0"
+                v-if="currentFromDataEmployee.status !== 'INACTIVE'"
+              >
+                <div class="surface-1 row rounded">
+                  <UndoButton
+                    v-if="employeeFormState.isEmployeeEdit"
+                    id="btn-info-basic-undo"
+                    icon-only
+                    @click="
+                      () => {
+                        employeeFormStore.resetFormDataEmployee();
+                        employeeFormState.isEmployeeEdit = false;
+                        employeeFormState.dialogType = 'info';
+                      }
+                    "
+                    type="button"
+                  />
+                  <SaveButton
+                    v-if="employeeFormState.isEmployeeEdit"
+                    id="btn-info-basic-save"
+                    icon-only
+                    type="submit"
+                  />
+                  <EditButton
+                    v-if="!employeeFormState.isEmployeeEdit"
+                    id="btn-info-basic-edit"
+                    icon-only
+                    @click="
+                      () => {
+                        employeeFormState.isEmployeeEdit = true;
+                        employeeFormState.dialogType = 'edit';
+                      }
+                    "
+                    type="button"
+                  />
+                  <DeleteButton
+                    v-if="
+                      !employeeFormState.isEmployeeEdit &&
+                      canAccess('customer', 'edit')
+                    "
+                    id="btn-info-basic-delete"
+                    icon-only
+                    @click="
+                      () =>
+                        deleteEmployeeById({
+                          id: currentFromDataEmployee.id,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        })
+                    "
+                    type="button"
+                  />
+                </div>
+              </div>
+              <BasicInformation
+                no-action
+                id="drawer-form-information"
+                prefix-id="drawer-info-employee"
+                dense
+                outlined
+                title="form.field.basicInformation"
+                :readonly="!employeeFormState.isEmployeeEdit"
+                v-model:customer-branch-id="employeeFormState.currentBranchId"
+                v-model:current-customer-branch="
+                  employeeFormState.currentCustomerBranch
+                "
+                v-model:employee-id="employeeFormState.currentEmployeeCode"
+                v-model:nrc-no="currentFromDataEmployee.nrcNo"
+                v-model:code="currentFromDataEmployee.code"
+                class="q-mb-xl"
+              />
+              <FormPerson
+                id="drawer-form-personal"
+                prefix-id="drawer-info-employee"
+                dense
+                outlined
+                employee
+                separator
+                title="customerEmployee.form.group.personalInfo"
+                :readonly="!employeeFormState.isEmployeeEdit"
+                v-model:prefix-name="currentFromDataEmployee.namePrefix"
+                v-model:first-name="currentFromDataEmployee.firstName"
+                v-model:last-name="currentFromDataEmployee.lastName"
+                v-model:first-name-en="currentFromDataEmployee.firstNameEN"
+                v-model:last-name-en="currentFromDataEmployee.lastNameEN"
+                v-model:mid-name="currentFromDataEmployee.middleName"
+                v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
+                v-model:gender="currentFromDataEmployee.gender"
+                v-model:birth-date="currentFromDataEmployee.dateOfBirth"
+                v-model:nationality="currentFromDataEmployee.nationality"
+                class="q-mb-xl"
+              />
+              <AddressForm
+                id="drawer-form-personal-address"
+                employee
+                v-model:address="currentFromDataEmployee.address"
+                v-model:address-en="currentFromDataEmployee.addressEN"
+                v-model:moo="currentFromDataEmployee.moo"
+                v-model:moo-en="currentFromDataEmployee.mooEN"
+                v-model:soi="currentFromDataEmployee.soi"
+                v-model:soi-en="currentFromDataEmployee.soiEN"
+                v-model:street="currentFromDataEmployee.street"
+                v-model:street-en="currentFromDataEmployee.streetEN"
+                v-model:province-id="currentFromDataEmployee.provinceId"
+                v-model:district-id="currentFromDataEmployee.districtId"
+                v-model:sub-district-id="currentFromDataEmployee.subDistrictId"
+                v-model:same-with-employer="
+                  employeeFormState.formDataEmployeeSameAddr
+                "
+                :readonly="!employeeFormState.isEmployeeEdit"
+                :disabledRule="!employeeFormState.isEmployeeEdit"
+                prefix-id="drawer-info-personnel"
+                dense
+                class="q-mb-xl"
+              />
+
+              <div class="row" id="drawer-upload-file">
+                <div class="col-12 q-pb-sm text-weight-bold text-body1">
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-upload"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t(`general.uploadFile`) }}
+                </div>
+              </div>
+              <UploadFileGroup
+                v-model:current-id="currentFromDataEmployee.id"
+                v-model="currentFromDataEmployee.file"
+                hide-action
+                :readonly="!employeeFormState.isEmployeeEdit"
+                :group-list="uploadFileListEmployee"
+                :menu="uploadFileListEmployee"
+                :columns="columnsAttachment"
+                @submit="
+                  async (group, allMeta) => {
+                    if (allMeta === undefined) return;
+
+                    if (group === 'passport') {
+                      const fullName = allMeta['full_name'].split(' ');
+                      let tempValue: {
+                        oldData: { nameField: string; value: string }[];
+                        newData: { nameField: string; value: string }[];
+                      } = { oldData: [], newData: [] };
+
+                      if (
+                        currentFromDataEmployee.gender !== '' &&
+                        currentFromDataEmployee.gender !== allMeta['sex']
+                      ) {
+                        tempValue.oldData.push({
+                          nameField: $t('form.gender'),
+                          value: $t(
+                            `general.${currentFromDataEmployee.gender}`,
+                          ),
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('form.gender'),
+                          value: $t(`general.${allMeta['sex']}`),
+                        });
+                      }
+
+                      if (currentFromDataEmployee.firstName !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('personnel.form.firstName'),
+                          value: currentFromDataEmployee.firstName,
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('personnel.form.firstName'),
+                          value: fullName[0],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.lastName !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('personnel.form.lastName'),
+                          value: currentFromDataEmployee.lastName,
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('personnel.form.lastName'),
+                          value: fullName[1],
+                        });
+                      }
+
+                      if (currentFromDataEmployee.nationality !== '') {
+                        tempValue.oldData.push({
+                          nameField: $t('general.nationality'),
+                          value: currentFromDataEmployee.nationality || '',
+                        });
+                        tempValue.newData.push({
+                          nameField: $t('general.nationality'),
+                          value: allMeta['nationality'],
+                        });
+                      }
+
+                      dialogCheckData({
+                        action: async () => {
+                          currentFromDataEmployee.gender = allMeta['sex'];
+                          currentFromDataEmployee.firstName = fullName[0];
+                          currentFromDataEmployee.lastName = fullName[1];
+                          currentFromDataEmployee.nationality =
+                            allMeta['nationality'];
+                        },
+                        checkData: () => {
+                          return tempValue;
+                        },
+                        cancel: () => {
+                          if (!currentFromDataEmployee.gender) {
+                            currentFromDataEmployee.gender = allMeta['gender'];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.firstName) {
+                            currentFromDataEmployee.firstName = fullName[0];
+                          }
+                          if (!currentFromDataEmployee.lastName) {
+                            currentFromDataEmployee.lastName = fullName[1];
+                          }
+
+                          if (!currentFromDataEmployee.nationality) {
+                            currentFromDataEmployee.nationality =
+                              allMeta['nationality'];
+                          }
+                        },
+                      });
+                    }
+                  }
+                "
+                :ocr="
+                  async (group, file) => {
+                    if (group === 'passport') {
+                      mrz = await runOcr(file, parseResultMRZ);
+
+                      if (mrz) {
+                        const mapMrz = Object.entries(mrz.result || {}).map(
+                          ([key, value]) => ({
+                            name: key,
+                            value: String(value),
+                          }),
+                        );
+
+                        const tempValue = {
+                          status: true,
+                          group,
+                          meta: mapMrz,
+                        };
+
+                        return tempValue;
+                      }
+                    }
+                    if (group === 'visa') {
+                      const res = await ocrStore.sendOcr({
+                        file: file,
+                        category: group,
+                      });
+
+                      if (res) {
+                        const tempValue = {
+                          status: true,
+                          group,
+                          meta: res.fields,
+                        };
+
+                        return tempValue;
+                      }
+                    }
+
+                    return { status: true, group, meta: [] };
+                  }
+                "
+                :auto-save="currentFromDataEmployee.id !== ''"
+                :download="
+                  (obj) => {
+                    if (obj.group !== 'attachment') {
+                      employeeStore.getFile({
+                        parentId: currentFromDataEmployee.id || '',
+                        group: obj.group,
+                        fileId: obj._meta.id,
+                        download: true,
+                      });
+                    } else {
+                      employeeStore.getAttachment({
+                        parentId: currentFromDataEmployee.id || '',
+                        name: obj._meta.name,
+                        download: true,
+                      });
+                    }
+                  }
+                "
+                :delete-item="
+                  async (obj) => {
+                    let status: boolean = false;
+                    const res = await employeeStore.delMeta({
+                      parentId: currentFromDataEmployee.id || '',
+                      group: obj.group,
+                      metaId: obj._meta.id,
+                    });
+
+                    if (res) {
+                      status = true;
+                    }
+
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
+                    );
+
+                    return status;
+                  }
+                "
+                :save="
+                  async (
+                    group: 'passport' | 'visa' | 'attachment',
+                    _meta: any,
+                    file: File | undefined,
+                  ) => {
+                    let status: boolean = false;
+                    if (group === 'passport' || group === 'visa') {
+                      if (file !== undefined && currentFromDataEmployee.id) {
+                        const res = await employeeStore.postMeta({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          meta: _meta,
+                          file,
+                        });
+
+                        if (res) {
+                          status = true;
+                        }
+                      } else {
+                        const {
+                          id,
+                          employeeId,
+                          createdAt,
+                          updatedAt,
+                          ...payload
+                        } = _meta;
+
+                        const res = await employeeStore.putMeta({
+                          parentId: currentFromDataEmployee.id || '',
+                          group,
+                          metaId: _meta.id,
+                          meta: payload,
+                          file,
+                        });
+                        if (res) {
+                          status = true;
+                        }
+                      }
+                    } else {
+                      if (file !== undefined) {
+                        await employeeStore.uploadAttachment(
+                          currentFromDataEmployee.id || '',
+                          file,
+                          file.name,
+                        );
+                        status = true;
+                      }
+                    }
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
+                    );
+                    return status;
+                  }
+                "
+                :get-file-list="
+                  async (group: 'passport' | 'visa' | 'attachment') => {
+                    if (
+                      !!currentFromDataEmployee.id &&
+                      group !== 'attachment'
+                    ) {
+                      const resMeta = await employeeStore.getMetaList({
+                        parentId: currentFromDataEmployee.id,
+                        group,
+                      });
+
+                      const tempValue = resMeta.map(async (i: any) => {
+                        return {
+                          _meta: { ...i },
+                          name: `${group}-${dateFormat(i.expireDate)}` || '',
+                          group: group,
+                          url: await employeeStore.getFile({
+                            parentId: currentFromDataEmployee.id || '',
+                            group,
+                            fileId: i.id,
+                          }),
+                          file: undefined,
+                        };
+                      });
+
+                      return await waitAll(tempValue);
+                    } else {
+                      const res = await employeeStore.listAttachment({
+                        parentId: currentFromDataEmployee.id || '',
+                      });
+
+                      const tempValue = (res as string[]).map(
+                        async (i: any) => {
+                          return {
+                            _meta: { id: i, name: i },
+                            name: i || '',
+                            group: group,
+                            url: await employeeStore.getAttachment({
+                              parentId: currentFromDataEmployee.id || '',
+                              name: i,
+                            }),
+                            file: undefined,
+                          };
+                        },
+                      );
+
+                      return await waitAll(tempValue);
+                    }
+                  }
+                "
+              >
+                <template #form="{ mode, meta, isEdit }">
+                  <!-- <FormCitizen
+                    v-if="mode === 'citizen' && meta"
+                    orc
+                    ra
+                    :readonly="!isEdit"
+                    v-model:citizen-id="meta.citizenId"
+                    v-model:birth-date="meta.birthDate"
+                    v-model:first-name="meta.firstName"
+                    v-model:first-name-en="meta.firstNameEN"
+                    v-model:last-name="meta.lastName"
+                    v-model:last-name-en="meta.lastNameEN"
+                    v-model:address="meta.address"
+                  /> -->
+
+                  <FormEmployeePassport
+                    v-if="mode === 'passport' && meta"
+                    prefix-id="drawer-info-employee"
+                    id="form-passport"
+                    dense
+                    outlined
+                    separator
+                    ocr
+                    :title="$t('customerEmployee.form.group.passport')"
+                    :readonly="!isEdit"
+                    v-model:birth-country="meta.birthCountry"
+                    v-model:previous-passportRef="meta.previousPassportRef"
+                    v-model:issue-place="meta.issuePlace"
+                    v-model:issue-country="meta.issueCountry"
+                    v-model:issue-date="meta.issueDate"
+                    v-model:type="meta.type"
+                    v-model:expire-date="meta.expireDate"
+                    v-model:birth-date="meta.birthDate"
+                    v-model:worker-status="meta.workerStatus"
+                    v-model:nationality="meta.nationality"
+                    v-model:gender="meta.gender"
+                    v-model:last-name-en="meta.lastNameEN"
+                    v-model:last-name="meta.lastName"
+                    v-model:middle-name-en="meta.middleNameEN"
+                    v-model:middle-name="meta.middleName"
+                    v-model:first-name-en="meta.firstNameEN"
+                    v-model:first-name="meta.firstName"
+                    v-model:name-prefix="meta.namePrefix"
+                    v-model:passport-number="meta.number"
+                  ></FormEmployeePassport>
+                  <FormEmployeeVisa
+                    v-if="mode === 'visa' && meta"
+                    prefix-id="drawer-info-employee"
+                    id="form-visa"
+                    ocr
+                    dense
+                    outlined
+                    :title="$t('customerEmployee.form.group.visa')"
+                    :readonly="!isEdit"
+                    v-model:arrival-at="meta.arrivalAt"
+                    v-model:arrival-tm-no="meta.arrivalTMNo"
+                    v-model:arrival-tm="meta.arrivalTM"
+                    v-model:mrz="meta.mrz"
+                    v-model:entry-count="meta.entryCount"
+                    v-model:issue-place="meta.issuePlace"
+                    v-model:issue-country="meta.issueCountry"
+                    v-model:issueDate="meta.issueDate"
+                    v-model:type="meta.type"
+                    v-model:expire-date="meta.expireDate"
+                    v-model:visa-issue-date="meta.issueDate"
+                    v-model:visa-expiry-date="meta.expireDate"
+                    v-model:remark="meta.remark"
+                    v-model:worker-type="meta.workerType"
+                    v-model:number="meta.number"
+                    v-model:report-date="meta.reportDate"
+                  />
+
+                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
+                </template>
+              </UploadFileGroup>
+            </template>
+
+            <template v-if="employeeFormState.currentTab === 'passport'">
+              <div class="q-gutter-sm full-width column no-wrap">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center"
+                >
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-passport"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t('customerEmployee.form.group.passport') }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="employeeFormState.currentIndexPassport !== -1"
+                    @click.stop="employeeFormStore.addPassport()"
+                  />
+                  <!-- :disabled="
+                      currentFromDataEmployee.employeePassport?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return false;
+                          }
+                          return true;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexPassport === -1
+                        ? false
+                        : true
+                    " -->
+                </div>
+
+                <div class="col self-center">
+                  <div
+                    class="full-width full-height flex flex-center col"
+                    v-if="
+                      currentFromDataEmployee.employeePassport?.length === 0
+                    "
+                  >
+                    <NoData />
+                  </div>
+
+                  <template
+                    v-for="(
+                      value, index
+                    ) in currentFromDataEmployee.employeePassport"
+                    :key="index"
+                  >
+                    <div class="col" v-if="value !== undefined">
+                      <FormEmployeePassport
+                        prefix-id="drawer-info-employee"
+                        id="form-passport"
+                        hide-title
+                        dense
+                        outlined
+                        separator
+                        :title="$t('customerEmployee.form.group.passport')"
+                        :readonly="
+                          employeeFormState.currentIndexPassport !== index
+                        "
+                        :full-name="
+                          employeeFormState.currentIndexPassport !== index
+                        "
+                        v-model:birth-country="value.birthCountry"
+                        v-model:previous-passportRef="value.previousPassportRef"
+                        v-model:issue-place="value.issuePlace"
+                        v-model:issue-country="value.issueCountry"
+                        v-model:issue-date="value.issueDate"
+                        v-model:type="value.type"
+                        v-model:expire-date="value.expireDate"
+                        v-model:birth-date="value.birthDate"
+                        v-model:worker-status="value.workerStatus"
+                        v-model:nationality="value.nationality"
+                        v-model:gender="value.gender"
+                        v-model:last-name-en="value.lastNameEN"
+                        v-model:last-name="value.lastName"
+                        v-model:middle-name-en="value.middleNameEN"
+                        v-model:middle-name="value.middleName"
+                        v-model:first-name-en="value.firstNameEN"
+                        v-model:first-name="value.firstName"
+                        v-model:name-prefix="value.namePrefix"
+                        v-model:passport-number="value.number"
+                        v-model:file="value.file"
+                      >
+                        <template v-slot:expiryDate>
+                          {{ $t('general.expirationDate') }} :
+                          {{ dateFormat(value.expireDate) }}
+                          <ExpirationDate
+                            v-if="value.id !== undefined"
+                            :expiration-date="value.expireDate"
+                          />
+                        </template>
+
+                        <template v-slot:button>
+                          <div
+                            class="surface-1 row rounded"
+                            style="min-height: 35px"
+                          >
+                            <UndoButton
+                              v-if="
+                                employeeFormState.isEmployeeEdit &&
+                                !(
+                                  employeeFormState.currentIndexPassport === -1
+                                ) &&
+                                employeeFormState.currentIndexPassport === index
+                              "
+                              id="btn-info-basic-undo"
+                              icon-only
+                              @click="
+                                () => {
+                                  employeeFormStore.resetFormDataEmployee();
+                                  employeeFormState.isEmployeeEdit = false;
+                                  employeeFormState.dialogType = 'info';
+                                  employeeFormState.currentIndexPassport = -1;
+                                }
+                              "
+                              type="button"
+                            />
+                            <SaveButton
+                              v-if="
+                                (employeeFormState.isEmployeeEdit ||
+                                  value.id === undefined) &&
+                                !(
+                                  employeeFormState.currentIndexPassport === -1
+                                ) &&
+                                employeeFormState.currentIndexPassport === index
+                              "
+                              id="btn-info-basic-save"
+                              icon-only
+                              @click="
+                                () => {
+                                  employeeFormState.currentIndexPassport =
+                                    index;
+                                }
+                              "
+                              type="submit"
+                            />
+                            <EditButton
+                              v-if="
+                                employeeFormState.currentIndexPassport === -1 ||
+                                (!employeeFormState.isEmployeeEdit &&
+                                  value.id !== undefined &&
+                                  employeeFormState.currentIndexPassport ===
+                                    index)
+                              "
+                              id="btn-info-basic-edit"
+                              icon-only
+                              @click="
+                                () => {
+                                  employeeFormState.currentIndexPassport =
+                                    index;
+                                  employeeFormState.isEmployeeEdit = true;
+                                  employeeFormState.dialogType = 'edit';
+                                }
+                              "
+                              type="button"
+                            />
+                            <DeleteButton
+                              v-if="
+                                employeeFormState.currentIndexPassport === -1 ||
+                                (!employeeFormState.isEmployeeEdit &&
+                                  value.id !== undefined &&
+                                  !(
+                                    employeeFormState.currentIndexPassport ===
+                                    -1
+                                  ) &&
+                                  employeeFormState.currentIndexPassport ===
+                                    index)
+                              "
+                              id="btn-info-basic-delete"
+                              icon-only
+                              @click.stop="
+                                () => {
+                                  deleteEmployeeById({
+                                    type: 'passport',
+                                    index,
+                                    fetch: async () =>
+                                      await fetchListEmployee(
+                                        currentTab === 'employer'
+                                          ? {
+                                              page: 1,
+                                              pageSize: 999,
+                                              customerId:
+                                                customerFormState.currentCustomerId,
+                                            }
+                                          : {
+                                              fetchStats: true,
+                                              mobileFetch: $q.screen.xs,
+                                            },
+                                      ),
+                                  });
+                                }
+                              "
+                              type="button"
+                              :disabled="
+                                !(
+                                  employeeFormState.currentIndexPassport === -1
+                                ) &&
+                                !(
+                                  employeeFormState.currentIndexPassport ===
+                                  index
+                                )
+                              "
+                            />
+                          </div>
+                        </template>
+                      </FormEmployeePassport>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+
+            <template v-if="employeeFormState.currentTab === 'visa'">
+              <div class="q-gutter-sm full-width column no-wrap">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center"
+                >
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-passport"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t('customerEmployee.form.group.visa') }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="
+                      currentFromDataEmployee.employeeVisa?.filter((item) => {
+                        if (item.id === undefined) {
+                          return false;
+                        }
+                        return true;
+                      }).length === 0 &&
+                      employeeFormState.currentIndexVisa === -1
+                        ? false
+                        : true
+                    "
+                    @click.stop="employeeFormStore.addVisa()"
+                  />
+                </div>
+                <div class="col self-center">
+                  <div
+                    v-if="currentFromDataEmployee.employeeVisa?.length === 0"
+                    class="full-width full-height col flex flex-center"
+                  >
+                    <NoData />
+                  </div>
+                  <FormEmployeeVisa
+                    v-for="(
+                      value, index
+                    ) in currentFromDataEmployee.employeeVisa"
+                    :key="index"
+                    prefix-id="drawer-info-employee"
+                    id="form-visa"
+                    dense
+                    outlined
+                    :title="$t('customerEmployee.form.group.visa')"
+                    :readonly="employeeFormState.currentIndexVisa !== index"
+                    hide-title
+                    v-model:arrival-at="value.arrivalAt"
+                    v-model:arrival-tm-no="value.arrivalTMNo"
+                    v-model:arrival-tm="value.arrivalTM"
+                    v-model:mrz="value.mrz"
+                    v-model:entry-count="value.entryCount"
+                    v-model:issue-place="value.issuePlace"
+                    v-model:issue-country="value.issueCountry"
+                    v-model:issueDate="value.issueDate"
+                    v-model:type="value.type"
+                    v-model:expire-date="value.expireDate"
+                    v-model:visa-issue-date="value.issueDate"
+                    v-model:visa-expiry-date="value.expireDate"
+                    v-model:remark="value.remark"
+                    v-model:worker-type="value.workerType"
+                    v-model:number="value.number"
+                    v-model:report-date="value.reportDate"
+                  >
+                    <template v-slot:expiryDate>
+                      {{ $t('general.expirationDate') }} :
+                      {{ dateFormat(value.expireDate) }}
+                      <ExpirationDate
+                        v-if="value.id !== undefined"
+                        :expiration-date="value.expireDate"
+                      />
+                    </template>
+
+                    <template v-slot:button>
+                      <div
+                        class="surface-1 row rounded"
+                        style="min-height: 35px"
+                      >
+                        <UndoButton
+                          v-if="
+                            employeeFormState.isEmployeeEdit &&
+                            !(employeeFormState.currentIndexVisa === -1) &&
+                            employeeFormState.currentIndexVisa === index
+                          "
+                          id="btn-info-basic-undo"
+                          icon-only
+                          @click="
+                            () => {
+                              employeeFormStore.resetFormDataEmployee();
+                              employeeFormState.isEmployeeEdit = false;
+                              employeeFormState.dialogType = 'info';
+                              employeeFormState.currentIndexVisa = -1;
+                            }
+                          "
+                          type="button"
+                        />
+                        <SaveButton
+                          v-if="
+                            (employeeFormState.isEmployeeEdit ||
+                              value.id === undefined) &&
+                            !(employeeFormState.currentIndexVisa === -1) &&
+                            employeeFormState.currentIndexVisa === index
+                          "
+                          id="btn-info-basic-save"
+                          icon-only
+                          @click="
+                            () => {
+                              employeeFormState.currentIndexVisa = index;
+                            }
+                          "
+                          type="submit"
+                        />
+
+                        <EditButton
+                          v-if="
+                            employeeFormState.currentIndexVisa === -1 ||
+                            (!employeeFormState.isEmployeeEdit &&
+                              value.id !== undefined &&
+                              employeeFormState.currentIndexVisa === index)
+                          "
+                          id="btn-info-basic-edit"
+                          icon-only
+                          @click="
+                            () => {
+                              employeeFormState.currentIndexVisa = index;
+                              employeeFormState.isEmployeeEdit = true;
+                              employeeFormState.dialogType = 'edit';
+                            }
+                          "
+                          type="button"
+                        />
+                        <DeleteButton
+                          v-if="
+                            employeeFormState.currentIndexVisa === -1 ||
+                            (!employeeFormState.isEmployeeEdit &&
+                              value.id !== undefined &&
+                              !(employeeFormState.currentIndexVisa === -1) &&
+                              employeeFormState.currentIndexVisa === index)
+                          "
+                          id="btn-info-basic-delete"
+                          icon-only
+                          @click.stop="
+                            () => {
+                              deleteEmployeeById({
+                                type: 'visa',
+                                index,
+                                fetch: async () =>
+                                  await fetchListEmployee(
+                                    currentTab === 'employer'
+                                      ? {
+                                          page: 1,
+                                          pageSize: 999,
+                                          customerId:
+                                            customerFormState.currentCustomerId,
+                                        }
+                                      : {
+                                          fetchStats: true,
+                                          mobileFetch: $q.screen.xs,
+                                        },
+                                  ),
+                              });
+                            }
+                          "
+                          type="button"
+                          :disabled="
+                            !(employeeFormState.currentIndexVisa === -1) &&
+                            !(employeeFormState.currentIndexVisa === index)
+                          "
+                        />
+                      </div>
+                    </template>
+                  </FormEmployeeVisa>
+                </div>
+              </div>
+            </template>
+
+            <template v-if="employeeFormState.currentTab === 'healthCheck'">
+              <div class="q-gutter-sm full-width column">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center row items-center"
+                >
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-sm"
+                    color="info"
+                    name="mdi-hospital-box-outline"
+                    style="background-color: var(--surface-3)"
+                  />
+
+                  {{ $t(`customerEmployee.formHealthCheck.title`) }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="
+                      currentFromDataEmployee.employeeCheckup?.filter(
+                        (item) => {
+                          if (item.id === undefined) {
+                            return false;
+                          }
+                          return true;
+                        },
+                      ).length === 0 &&
+                      employeeFormState.currentIndexCheckup === -1
+                        ? false
+                        : true
+                    "
+                    @click.stop="employeeFormStore.addCheckup()"
+                  />
+                </div>
+
+                <div class="col self-center">
+                  <div
+                    v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
+                    class="full-width full-height col flex flex-center"
+                  >
+                    <NoData />
+                  </div>
+                  <FormEmployeeHealthCheck
+                    v-if="employeeFormState.currentTab === 'healthCheck'"
+                    id="drawer-form-checkup"
+                    prefix-id="drawer-employee"
+                    dense
+                    outlined
+                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
+                    v-model:current-index="
+                      employeeFormState.currentIndexCheckup
+                    "
+                    v-model:employee-checkup="
+                      currentFromDataEmployee.employeeCheckup
+                    "
+                    v-model:checkup-results-option="
+                      optionStore.globalOption.checkupResults
+                    "
+                    v-model:checkup-type-option="
+                      optionStore.globalOption.insurancePlace
+                    "
+                    v-model:medical-benefit-option="
+                      optionStore.globalOption.typeInsurance
+                    "
+                    v-model:insurance-company-option="
+                      optionStore.globalOption.insurancePlace
+                    "
+                    @save="
+                      (index) => {
+                        employeeFormState.currentIndexCheckup = index;
+                        notify('create', $t('general.success'));
+                      }
+                    "
+                    @edit="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeCheckup?.[index]
+                            .statusSave
+                        ) {
+                          employeeFormState.currentIndexCheckup = index;
+                          currentFromDataEmployee.employeeCheckup[
+                            index
+                          ].statusSave = false;
+                        }
+                      }
+                    "
+                    @undo="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeCheckup?.[index]
+                            .statusSave === false
+                        ) {
+                          employeeFormState.currentIndexCheckup = -1;
+                          currentFromDataEmployee.employeeCheckup[
+                            index
+                          ].statusSave = true;
+                          employeeFormStore.resetFormDataEmployee();
+                        }
+                      }
+                    "
+                    @delete="
+                      (index) => {
+                        employeeFormState.currentIndexCheckup = index;
+                        deleteEmployeeById({
+                          type: 'healthCheck',
+                          index,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        });
+                      }
+                    "
+                  />
+                </div>
+              </div>
+            </template>
+            <template v-if="employeeFormState.currentTab === 'workHistory'">
+              <div class="q-gutter-sm full-width column">
+                <div
+                  class="q-pb-sm text-weight-bold text-body1 row items-center"
+                >
+                  <q-icon
+                    flat
+                    size="xs"
+                    class="q-pa-sm rounded q-mr-xs"
+                    color="info"
+                    name="mdi-briefcase-outline"
+                    style="background-color: var(--surface-3)"
+                  />
+                  {{ $t(`customerEmployee.form.group.workHistory`) }}
+                  <AddButton
+                    v-if="$q.screen.lt.md"
+                    id="btn-add-work"
+                    icon-only
+                    class="q-ml-sm"
+                    :disabled="
+                      currentFromDataEmployee.employeeWork?.filter((item) => {
+                        if (item.id === undefined) {
+                          return false;
+                        }
+                        return true;
+                      }).length === 0 &&
+                      employeeFormState.currentIndexWorkHistory === -1
+                        ? false
+                        : true
+                    "
+                    @click.stop="employeeFormStore.addWorkHistory()"
+                  />
+                </div>
+
+                <div class="col self-center">
+                  <div
+                    class="full-width full-height col flex flex-center"
+                    v-if="currentFromDataEmployee.employeeWork?.length === 0"
+                  >
+                    <NoData />
+                  </div>
+
+                  <FormEmployeeWorkHistory
+                    v-if="employeeFormState.currentTab === 'workHistory'"
+                    id="drawer-work-history"
+                    prefix-id="drawer-employee"
+                    dense
+                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
+                    outlined
+                    v-model:current-index="
+                      employeeFormState.currentIndexWorkHistory
+                    "
+                    v-model:employee-work="currentFromDataEmployee.employeeWork"
+                    v-model:position-name-option="
+                      optionStore.globalOption.position
+                    "
+                    v-model:job-type-option="
+                      optionStore.globalOption.businessType
+                    "
+                    v-model:workplace-option="optionStore.globalOption.area"
+                    @delete="
+                      (index) => {
+                        employeeFormState.currentIndexWorkHistory = index;
+                        deleteEmployeeById({
+                          type: 'work',
+                          index,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        });
+                      }
+                    "
+                    @save="
+                      (index) => {
+                        employeeFormState.currentIndexWorkHistory = index;
+                      }
+                    "
+                    @undo="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeWork?.[index]
+                            .statusSave === false
+                        ) {
+                          employeeFormState.currentIndexWorkHistory = -1;
+                          currentFromDataEmployee.employeeWork[
+                            index
+                          ].statusSave = true;
+                        }
+                      }
+                    "
+                    @edit="
+                      (index) => {
+                        if (
+                          currentFromDataEmployee.employeeWork?.[index]
+                            .statusSave
+                        ) {
+                          employeeFormState.currentIndexWorkHistory = index;
+                          currentFromDataEmployee.employeeWork[
+                            index
+                          ].statusSave = false;
+                        }
+                      }
+                    "
+                  />
+                </div>
+              </div>
+            </template>
+            <template v-if="employeeFormState.currentTab === 'other'">
+              <FormEmployeeOther
+                :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
+                v-if="employeeFormState.currentTab === 'other'"
+                id="drawer-other"
+                prefix-id="drawer-employee"
+                dense
+                outlined
+                v-model:employee-other="
+                  currentFromDataEmployee.employeeOtherInfo
+                "
+                @undo="
+                  () => {
+                    if (
+                      currentFromDataEmployee.employeeOtherInfo?.statusSave ===
+                      false
+                    ) {
+                      employeeFormStore.resetFormDataEmployee();
+                      currentFromDataEmployee.employeeOtherInfo.statusSave = true;
+                    }
+                  }
+                "
+                @edit="
+                  () => {
+                    if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
+                      currentFromDataEmployee.employeeOtherInfo.statusSave = false;
+                    }
+                  }
+                "
+              />
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DrawerInfo>
+
+  <ImageUploadDialog
+    ref="dialogEmployeeImageUpload"
+    v-model:dialog-state="employeeFormState.imageDialog"
+    v-model:file="currentFromDataEmployee.image"
+    v-model:image-url="employeeFormState.profileUrl"
+    v-model:data-list="employeeFormState.imageList"
+    v-model:on-create-data-list="onCreateImageList"
+    :on-create="employeeFormState.dialogModal && !currentFromDataEmployee.id"
+    :hidden-footer="!employeeFormState.isImageEdit"
+    @add-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        await employeeStore.addImageList(
+          v,
+          currentFromDataEmployee.id,
+          Date.now().toString(),
+        );
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
+    "
+    @remove-image="
+      async (v) => {
+        if (!v) return;
+        if (!currentFromDataEmployee.id) return;
+        const name = v.split('/').pop() || '';
+        await employeeStore.deleteImageByName(currentFromDataEmployee.id, name);
+        await fetchImageList(
+          currentFromDataEmployee.id,
+          currentFromDataEmployee.selectedImage || '',
+          'employee',
+        );
+      }
+    "
+    @submit="
+      async (v) => {
+        if (employeeFormState.dialogModal && !currentFromDataEmployee.id) {
+          employeeFormState.profileUrl = v;
+          employeeFormState.imageDialog = false;
+        } else {
+          refreshImageState = true;
+          employeeFormState.dialogType = 'edit';
+          currentFromDataEmployee.selectedImage = v;
+          employeeFormState.imageList
+            ? (employeeFormState.imageList.selectedImage = v)
+            : '';
+          employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
+          employeeFormStore.resetFormDataEmployee();
+          await employeeFormStore.submitPersonal(onCreateImageList);
+          employeeFormState.imageDialog = false;
+          refreshImageState = false;
+          employeeFormState.isEmployeeEdit = false;
+          employeeFormState.dialogType = 'info';
+          await fetchListEmployee();
+        }
+      }
+    "
+  >
+    <template #title>
+      <span
+        v-if="!employeeFormState.dialogModal || currentFromDataEmployee.id"
+        class="justify-center flex text-bold"
+      >
+        {{ $t('general.image') }}
+        {{
+          $i18n.locale === 'eng'
+            ? `${currentFromDataEmployee.firstNameEN || currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastNameEN || currentFromDataEmployee.lastName}`
+            : `${currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastName}`
+        }}
+      </span>
+    </template>
+    <template #error>
+      <div class="full-height full-width" style="background: white">
+        <div
+          class="full-height full-width flex justify-center items-center"
+          style="background: #ee4367"
+        >
+          <q-img
+            :src="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
+            fit="contain"
+            style="height: 100%"
+          />
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
+</template>
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index b08e7a70..f8690dbe 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -268,6 +268,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
 
       <div class="col-md col-6">
         <DatePicker
+          :label="$t('customerEmployee.formHealthCheck.coverageStartDate')"
           v-model="checkup.coverageStartDate"
           :id="`${prefixId}-input-coverage-start-date`"
           :readonly="readonly || checkup.statusSave"
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 5fe21b52..06373538 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -9,6 +9,8 @@ import useOptionStore from 'stores/options';
 
 import DatePicker from '../shared/DatePicker.vue';
 
+import { dateFormat } from 'src/utils/datetime';
+
 const optionStore = useOptionStore();
 const { locale } = useI18n();
 
@@ -18,8 +20,8 @@ const issuePlace = defineModel<string>('issuePlace');
 const issueCountry = defineModel<string>('issueCountry');
 const issueDate = defineModel<Date | null | string>('issueDate');
 const type = defineModel<string>('type');
-const expireDate = defineModel<Date>('expireDate');
-const birthDate = defineModel<Date>('birthDate');
+const expireDate = defineModel<Date | string>('expireDate');
+const birthDate = defineModel<Date | string>('birthDate');
 const workerStatus = defineModel<string>('workerStatus');
 const nationality = defineModel<string>('nationality');
 const gender = defineModel<string>('gender');
@@ -32,6 +34,8 @@ const firstName = defineModel<string>('firstName');
 const namePrefix = defineModel<string>('namePrefix');
 const passportNumber = defineModel<string>('passportNumber');
 
+const file = defineModel<File>('file');
+
 const passportValidator = /[a-zA-Z]{1}[a-zA-Z0-9]{1}[0-9]{5,7}$/;
 
 const genderOptions = ref<Record<string, unknown>[]>([]);
@@ -177,6 +181,30 @@ watch(
   },
 );
 
+function browse() {
+  inputFile?.click();
+}
+
+const inputFile = (() => {
+  const _element = document.createElement('input');
+  _element.type = 'file';
+  _element.accept = 'image/jpeg,image/png';
+  _element.addEventListener('change', change);
+  return _element;
+})();
+
+async function change(e: Event) {
+  const _element = e.target as HTMLInputElement | null;
+  const _file = _element?.files?.[0];
+
+  if (_file) {
+    const newFileName = `passport-${dateFormat(new Date().toISOString())}-${_file.name}`;
+    const renamedFile = new File([_file], newFileName, { type: _file.type });
+
+    file.value = renamedFile;
+  }
+}
+
 watch(
   () => namePrefix.value,
   (v) => {
@@ -221,20 +249,14 @@ watch(
     </div>
 
     <div class="q-col-gutter-sm" :class="{ row: $q.screen.gt.sm }">
-      <div
-        class="col row justify-center q-col-gutter-sml"
-        style="max-height: 50%"
-        v-if="!ocr"
-      >
-        <q-avatar
-          style="border: 1px dashed; border-color: black"
-          square
-          size="100px"
-          font-size="50px"
-          color="grey-4"
-          text-color="grey"
-          icon="mdi-image-outline"
-        />
+      <div v-if="!ocr">
+        <q-btn
+          flat
+          color="primary"
+          icon="mdi-upload-box-outline"
+          @click="() => browse()"
+          :disable="readonly"
+        ></q-btn>
       </div>
       <div
         class="row q-col-gutter-sm"
@@ -258,7 +280,7 @@ watch(
           :options="workerStatusOptions"
           :hide-dropdown-icon="readonly"
           :for="`${prefixId}-select-visa-type`"
-          :label="$t('customerEmployee.form.workerType')"
+          :label="$t('customerEmployee.form.workerStatus')"
           @filter="workerStatusFilter"
           :model-value="readonly ? workerStatus || '-' : workerStatus"
           @update:model-value="
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 876c7a52..7c9085c4 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -28,20 +28,22 @@ const arrivalAt = defineModel<string>('arrivalAt');
 const arrivalTMNo = defineModel<string>('arrivalTmNo');
 const arrivalTM = defineModel<string>('arrivalTm');
 const mrz = defineModel<string>('mrz');
-const entryCount = defineModel<number>('entryCount');
+const entryCount = defineModel<number | string>('entryCount');
 const issuePlace = defineModel<string>('issuePlace');
 const issueCountry = defineModel<string>('issueCountry');
 const issueDate = defineModel<Date | null | string>('visaIssueDate');
-const type = defineModel<string>('visaType');
-const expireDate = defineModel<Date>('expireDate');
+const type = defineModel<string>('type');
+const expireDate = defineModel<Date | string>('expireDate');
 const remark = defineModel<string>('remark');
 const workerType = defineModel<string>('workerType');
-const number = defineModel<string>('visaNumber');
+const number = defineModel<string>('number');
+const reportDate = defineModel<Date | null | string>('reportDate');
 
-const calculatedVisaDate = computed(() => {
-  if (!issueDate.value) return undefined;
-  return calculate90DayNext(issueDate.value);
-});
+//
+// const calculatedVisaDate = computed(() => {
+//   if (!issueDate.value) return undefined;
+//   return calculate90DayNext(issueDate.value);
+// });
 
 defineProps<{
   title?: string;
@@ -78,6 +80,12 @@ onMounted(async () => {
   await fetchProvince();
 });
 
+const visaIssueCountryOptions = ref<Record<string, unknown>[]>([]);
+let visaIssueCountryFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
 const visaTypeOptions = ref<Record<string, unknown>[]>([]);
 let visaTypeFilter: (
   value: string,
@@ -97,6 +105,12 @@ onMounted(() => {
     'label',
   );
 
+  visaIssueCountryFilter = selectFilterOptionRefMod(
+    ref(optionStore.globalOption?.nationality),
+    visaIssueCountryOptions,
+    'label',
+  );
+
   workerTypeFilter = selectFilterOptionRefMod(
     ref(optionStore.globalOption?.workerType),
     workerTypeOptions,
@@ -107,8 +121,14 @@ onMounted(() => {
 watch(
   () => optionStore.globalOption,
   () => {
+    visaIssueCountryFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption?.nationality),
+      visaIssueCountryOptions,
+      'label',
+    );
+
     visaTypeFilter = selectFilterOptionRefMod(
-      optionStore.globalOption.nationality,
+      optionStore.globalOption.visaType,
       visaTypeOptions,
       'label',
     );
@@ -120,6 +140,10 @@ watch(
     );
   },
 );
+//
+// watch([() => issueDate.value], () => {
+//   reportDate.value = calculate90DayNext(issueDate.value);
+// });
 </script>
 
 <template>
@@ -133,7 +157,7 @@ watch(
         name="mdi-passport"
         style="background-color: var(--surface-3)"
       />
-      {{ title }}
+      {{ $t(title) }}
     </div>
 
     <div
@@ -353,10 +377,12 @@ watch(
             <DatePicker
               :id="`${prefixId}-date-picker-visa-issuance`"
               :readonly
-              :disabled="!readonly"
               :label="$t('customerEmployee.form.visa90Day')"
-              :model-value="calculatedVisaDate"
+              v-model="reportDate"
               clearable
+              :rules="[
+                (val) => (val && val.length > 0) || $t('form.error.required'),
+              ]"
             />
           </div>
         </div>
@@ -422,11 +448,11 @@ watch(
           class="col-md-4 col-6"
           :dense="dense"
           :readonly="readonly"
-          :options="visaTypeOptions"
+          :options="visaIssueCountryOptions"
           :hide-dropdown-icon="readonly"
           :for="`${prefixId}-select-issue-country`"
           :label="$t('customerEmployee.form.issueCountry')"
-          @filter="visaTypeFilter"
+          @filter="visaIssueCountryFilter"
           :model-value="readonly ? issueCountry || '-' : issueCountry"
           @update:model-value="
             (v) => (typeof v === 'string' ? (issueCountry = v) : '')
diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index e5e49b51..000c701a 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -22,6 +22,8 @@ const prop = withDefaults(
     inTable?: boolean;
     addButton?: boolean;
     prefixId?: string;
+    hideAction?: boolean;
+    hideDelete?: boolean;
   }>(),
   {
     gridView: false,
@@ -139,8 +141,9 @@ defineEmits<{
                   <q-avatar size="md">
                     <q-img
                       :src="
-                        `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
-                        `/images/employee-avatar-${props.row.gender}.png`
+                        props.row.selectedImage
+                          ? `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}`
+                          : `/images/employee-avatar-${props.row.gender}.png`
                       "
                       class="text-center"
                       :ratio="1"
@@ -265,9 +268,10 @@ defineEmits<{
             @click.stop="$emit('view', props.row)"
           />
           <KebabAction
-            v-if="!inTable"
+            v-if="!inTable && !hideAction"
             :id-name="props.row.firstName"
             :status="props.row.status"
+            :hide-delete="hideDelete"
             @view="$emit('view', props.row)"
             @edit="$emit('edit', props.row)"
             @delete="$emit('delete', props.row)"
@@ -280,9 +284,11 @@ defineEmits<{
     <template v-slot:item="props">
       <div class="col-12 col-md-3 col-sm-6">
         <PersonCard
+          history
+          :hide-delete="hideDelete"
+          :hide-action="hideAction"
           :id="`card-${props.row.firstNameEN}`"
           :field-selected="fieldSelected"
-          history
           :prefix-id="props.row.firstNameEN ?? props.rowIndex"
           :data="{
             code: props.row.code,
@@ -290,9 +296,9 @@ defineEmits<{
               $i18n.locale === 'eng'
                 ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
                 : `${props.row.firstName} ${props.row.lastName} `.trim(),
-            img:
-              `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}` ||
-              `/images/employee-avatar-${props.row.gender}.png`,
+            img: props.row.selectedImage
+              ? `${baseUrl}/employee/${props.row.id}/image/${props.row.selectedImage}`
+              : `/images/employee-avatar-${props.row.gender}.png`,
             fallbackImg: `/images/employee-avatar-${props.row.gender}.png`,
             male: props.row.gender === 'male',
             female: props.row.gender === 'female',
diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index da9a0c58..7c3dcb55 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -54,6 +54,7 @@ defineProps<{
   employeeOwnerOption?: CustomerBranch[];
   prefixId: string;
   showBtnSave?: boolean;
+  disableCustomerSelect?: boolean;
 }>();
 
 defineEmits<{
@@ -117,12 +118,16 @@ defineEmits<{
 
     <div class="col-12 row" style="gap: var(--size-2)">
       <SelectCustomer
+        id="form-select-customer-branch-id"
+        for="form-select-customer-branch-id"
         v-model:value="customerBranchId"
         v-model:value-option="currentCustomerBranch"
         :label="$t('customer.form.branchCode')"
         class="col-12 field-two"
+        simple
         required
         :readonly
+        :disabled="disableCustomerSelect && !readonly"
       />
 
       <q-input
diff --git a/src/components/04_flow-management/FormFlow.vue b/src/components/04_flow-management/FormFlow.vue
index 3db8aa6f..48ead08c 100644
--- a/src/components/04_flow-management/FormFlow.vue
+++ b/src/components/04_flow-management/FormFlow.vue
@@ -6,12 +6,14 @@ import { useI18n } from 'vue-i18n';
 
 import useUserStore from 'src/stores/user';
 import useOptionStore from 'src/stores/options';
+import { useWorkflowTemplate } from 'src/stores/workflow-template';
 import { baseUrl } from 'stores/utils';
 import { getRole } from 'src/services/keycloak';
 import {
   WorkflowUserInTable,
   WorkflowTemplatePayload,
   WorkFlowPayloadStep,
+  Group,
 } from 'src/stores/workflow-template/types';
 import { User } from 'src/stores/user/types';
 
@@ -20,15 +22,18 @@ import ToggleButton from 'src/components/button/ToggleButton.vue';
 import NoData from '../NoData.vue';
 import SelectBranch from '../shared/select/SelectBranch.vue';
 import AddButton from '../button/AddButton.vue';
+import { QField } from 'quasar';
 
 defineProps<{
   readonly?: boolean;
   onDrawer?: boolean;
+  hideAction?: boolean;
 }>();
 
 const { t } = useI18n();
 const userStore = useUserStore();
 const optionStore = useOptionStore();
+const workflowStore = useWorkflowTemplate();
 
 const userInTable = defineModel<WorkflowUserInTable[]>('userInTable', {
   default: [],
@@ -51,7 +56,9 @@ let objectOptions = [
 const options = ref(objectOptions);
 const role = ref<string[]>([]);
 const userList = ref<User[]>([]);
+const groupList = ref<Group[]>([]);
 const responsiblePersonSearch = ref('');
+const responsibleMenu = ref(false);
 
 async function getUserList(opts?: { query: string }) {
   const resUser = await userStore.fetchList({
@@ -60,10 +67,10 @@ async function getUserList(opts?: { query: string }) {
   if (resUser) userList.value = resUser.result;
 }
 
-// async function getUserById(responsiblePersonId: string) {
-//   const resUser = await userStore.fetchById(responsiblePersonId);
-//   if (resUser) userInTable.value.push(resUser);
-// }
+async function getGroupList() {
+  const resGroup = await workflowStore.getGroupList();
+  if (resGroup) groupList.value = resGroup;
+}
 
 function selectResponsiblePerson(stepIndex: number, responsiblePerson: User) {
   const currStep = flowData.value.step[stepIndex];
@@ -78,6 +85,7 @@ function selectResponsiblePerson(stepIndex: number, responsiblePerson: User) {
       userInTable.value[stepIndex] = {
         name: flowData.value.step[stepIndex].name,
         responsiblePerson: [],
+        responsibleGroup: [],
       };
     }
 
@@ -101,6 +109,33 @@ function selectResponsiblePerson(stepIndex: number, responsiblePerson: User) {
   }
 }
 
+function selectResponsibleGroup(stepIndex: number, responsibleGroup: string) {
+  const currStep = flowData.value.step[stepIndex];
+  const existGroupIndex = currStep.responsibleGroup?.findIndex(
+    (p) => p === responsibleGroup,
+  );
+
+  if (existGroupIndex === -1) {
+    currStep.responsibleGroup?.push(responsibleGroup);
+
+    if (!userInTable.value[stepIndex]) {
+      userInTable.value[stepIndex] = {
+        name: flowData.value.step[stepIndex].name,
+        responsiblePerson: [],
+        responsibleGroup: [],
+      };
+    }
+
+    userInTable.value[stepIndex]?.responsibleGroup.push(responsibleGroup);
+  } else {
+    currStep.responsibleGroup?.splice(Number(existGroupIndex), 1);
+    userInTable.value[stepIndex]?.responsibleGroup.splice(
+      Number(existGroupIndex),
+      1,
+    );
+  }
+}
+
 function selectItem(
   val: Record<string, unknown>,
   responsibleInstitution?: string[],
@@ -142,6 +177,7 @@ watch(
 onMounted(async () => {
   role.value = getRole() || [];
   await getUserList();
+  await getGroupList();
   await userStore.fetchHqOption();
 });
 </script>
@@ -166,6 +202,7 @@ onMounted(async () => {
         :class="{ 'q-ml-lg': $q.screen.gt.xs, 'q-mt-sm': $q.screen.lt.sm }"
       >
         <ToggleButton
+          :disable="hideAction"
           class="q-mr-sm"
           two-way
           :model-value="flowData.status !== 'INACTIVE'"
@@ -467,92 +504,128 @@ onMounted(async () => {
                   </div>
 
                   <!-- RESPONSIBLE-PERSON -->
-                  <q-select
+                  <q-field
                     v-if="step.responsiblePersonId"
-                    behavior="menu"
                     :for="`select-responsible-person-${index}-${onDrawer ? 'drawer' : 'dialog'}`"
                     :bg-color="readonly ? 'transparent' : ''"
                     :readonly
                     outlined
-                    dense
-                    v-model="step.responsiblePersonId"
-                    multiple
-                    :options="[1, 2, 3]"
-                    hide-bottom-space
-                    option-label="label"
-                    option-value="value"
-                    emit-value
+                    :stack-label="
+                      userInTable[index]?.responsiblePerson.length > 0 ||
+                      userInTable[index]?.responsibleGroup.length > 0
+                    "
                     :label="$t('flow.responsiblePerson')"
+                    dense
                     class="col-md-6 col-12"
-                    :hide-dropdown-icon="readonly"
+                    :class="{ 'cursor-pointer': !readonly }"
                   >
-                    <template v-slot:selected-item="scope">
-                      <div class="column full-width">
-                        <div
-                          class="row items-center no-wrap"
-                          v-for="person in userInTable[
-                            index
-                          ]?.responsiblePerson.filter(
-                            (p) => p.id === scope.opt,
-                          )"
-                          :key="person.id"
-                        >
-                          <q-avatar class="q-ml-sm" size="md">
-                            <q-img
-                              class="text-center"
-                              :ratio="1"
-                              :src="`${baseUrl}/user/${person.id}/profile-image/${person.selectedImage}`"
-                            >
-                              <template #error>
-                                <div
-                                  class="no-padding full-width full-height flex items-center justify-center"
-                                  :style="`${person.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
-                                >
-                                  <q-img
-                                    v-if="person.gender"
-                                    :src="
-                                      person.gender === 'male'
-                                        ? '/no-img-man.png'
-                                        : '/no-img-female.png'
-                                    "
-                                  />
-                                  <q-icon
-                                    v-else
-                                    size="sm"
-                                    name="mdi-account-outline"
-                                    style="color: white"
-                                  />
-                                </div>
-                              </template>
-                            </q-img>
-                          </q-avatar>
-                          <div
-                            class="column q-pl-md"
-                            style="color: var(--foreground)"
+                    <template #control>
+                      <q-item
+                        dense
+                        class="items-center full-width no-padding"
+                        v-for="person in userInTable[
+                          index
+                        ]?.responsiblePerson.filter((p) =>
+                          step.responsiblePersonId.includes(p.id),
+                        )"
+                        :key="person.id"
+                      >
+                        <q-avatar class="q-ml-sm" size="md">
+                          <q-img
+                            class="text-center"
+                            :ratio="1"
+                            :src="`${baseUrl}/user/${person.id}/profile-image/${person.selectedImage}`"
                           >
-                            <span>
-                              {{
-                                `${optionStore.mapOption(person.namePrefix || '')} ${
-                                  $i18n.locale === 'eng'
-                                    ? person.firstNameEN
-                                    : person.firstName
-                                } ${
-                                  $i18n.locale === 'eng'
-                                    ? person.lastNameEN
-                                    : person.lastName
-                                }`
-                              }}
-                            </span>
-                            <span class="text-caption app-text-muted">
-                              {{ person.code }}
-                            </span>
-                          </div>
+                            <template #error>
+                              <div
+                                class="no-padding full-width full-height flex items-center justify-center"
+                                :style="`${person.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
+                              >
+                                <q-img
+                                  v-if="person.gender"
+                                  :src="
+                                    person.gender === 'male'
+                                      ? '/no-img-man.png'
+                                      : '/no-img-female.png'
+                                  "
+                                />
+                                <q-icon
+                                  v-else
+                                  size="sm"
+                                  name="mdi-account-outline"
+                                  style="color: white"
+                                />
+                              </div>
+                            </template>
+                          </q-img>
+                        </q-avatar>
+                        <div
+                          class="column q-pl-md"
+                          style="color: var(--foreground)"
+                        >
+                          <span>
+                            {{
+                              `${optionStore.mapOption(person.namePrefix || '')} ${
+                                $i18n.locale === 'eng'
+                                  ? person.firstNameEN
+                                  : person.firstName
+                              } ${
+                                $i18n.locale === 'eng'
+                                  ? person.lastNameEN
+                                  : person.lastName
+                              }`
+                            }}
+                          </span>
+                          <span class="text-caption app-text-muted">
+                            {{ person.code }}
+                          </span>
                         </div>
-                      </div>
-                    </template>
+                      </q-item>
 
-                    <template v-slot:option></template>
-                    <q-menu v-if="!readonly" :offset="[0, 4]">
+                      <div
+                        v-if="step.responsibleGroup.length > 0"
+                        class="full-width app-text-muted text-weight-medium"
+                        style="font-size: 10px"
+                      >
+                        {{ $t('general.group') }}
+                      </div>
+                      <q-item
+                        class="items-center full-width no-padding"
+                        v-for="group in userInTable[
+                          index
+                        ]?.responsibleGroup.filter((g) =>
+                          step.responsibleGroup.includes(g),
+                        )"
+                        :key="group"
+                        dense
+                      >
+                        <q-avatar class="q-ml-sm" size="md">
+                          <q-img
+                            class="text-center"
+                            :ratio="1"
+                            :src="`/img-group.png`"
+                          />
+                        </q-avatar>
+                        <span class="q-pl-md">
+                          {{ group }}
+                        </span>
+                      </q-item>
+                    </template>
+                    <template v-if="!readonly" #append>
+                      <q-icon
+                        name="mdi-menu-down"
+                        :class="{ rotated: responsibleMenu }"
+                        class="transition-rotate"
+                      />
+                    </template>
+                    <q-menu
+                      v-if="!readonly"
+                      no-focus
+                      no-refocus
+                      :offset="[0, 4]"
+                      @before-show="() => (responsibleMenu = true)"
+                      @before-hide="() => (responsibleMenu = false)"
+                    >
                       <q-list>
                         <q-item>
                           <q-input
@@ -581,6 +654,7 @@ onMounted(async () => {
                           {{ $t('general.noData') }}
                         </q-item>
                         <q-item
+                          v-else
                           v-for="(person, i) in userList"
                           dense
                           :key="i"
@@ -655,6 +729,7 @@ onMounted(async () => {
                           {{ $t('personnel.MESSENGER') }}
                         </span>
                         <q-item
+                          dense
                           clickable
                           @click="step.messengerByArea = !step.messengerByArea"
                           class="column"
@@ -670,9 +745,49 @@ onMounted(async () => {
                             </div>
                           </div>
                         </q-item>
+
+                        <span class="text-caption app-text-muted-2 q-px-md">
+                          {{ $t('general.group') }}
+                        </span>
+                        <q-item
+                          v-if="groupList.length === 0"
+                          class="app-text-muted q-px-lg"
+                        >
+                          {{ $t('general.noData') }}
+                        </q-item>
+                        <q-item
+                          v-else
+                          v-for="(group, i) in groupList"
+                          dense
+                          clickable
+                          @click="selectResponsibleGroup(index, group.name)"
+                          class="column"
+                        >
+                          <div class="row items-center">
+                            <q-checkbox
+                              size="xs"
+                              :model-value="
+                                step.responsibleGroup.includes(group.name)
+                              "
+                              @click.stop="
+                                selectResponsibleGroup(index, group.name)
+                              "
+                            />
+                            <q-avatar class="q-ml-sm" size="md">
+                              <q-img
+                                class="text-center"
+                                :ratio="1"
+                                :src="`/img-group.png`"
+                              />
+                            </q-avatar>
+                            <div class="column q-pl-md">
+                              <span>{{ group.name }}</span>
+                            </div>
+                          </div>
+                        </q-item>
                       </q-list>
                     </q-menu>
-                  </q-select>
+                  </q-field>
 
                   <!-- RESPONSIBLE-AGENCIES, RESPONSIBLE-INSTITUTION -->
                   <q-select
@@ -815,4 +930,11 @@ onMounted(async () => {
 :deep(.q-dialog.fullscreen.no-pointer-events.q-dialog--modal) {
   visibility: hidden;
 }
+
+.transition-rotate {
+  transition: transform 0.3s ease;
+}
+.rotated {
+  transform: rotate(180deg);
+}
 </style>
diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
index 68ab5cbf..d005c043 100644
--- a/src/components/04_product-service/PriceDataComponent.vue
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -167,26 +167,28 @@ withDefaults(
     <div class="col-12 full-width">
       <q-table
         :rows-per-page-options="[0]"
-        :rows="[
-          {
-            label: $t('productService.product.salePrice'),
-            pricePerUnit: price,
-            calcVat,
-            vatIncluded,
-          },
-          {
-            label: $t('productService.product.agentPrice'),
-            calcVat: agentPriceCalcVat,
-            vatIncluded: agentPriceVatIncluded,
-            pricePerUnit: agentPrice,
-          },
-          {
-            label: $t('productService.product.processingPrice'),
-            calcVat: serviceChargeCalcVat,
-            vatIncluded: serviceChargeVatIncluded,
-            pricePerUnit: serviceCharge,
-          },
-        ]"
+        :rows="
+          [
+            priceDisplay.price && {
+              label: $t('productService.product.salePrice'),
+              pricePerUnit: price,
+              calcVat,
+              vatIncluded,
+            },
+            priceDisplay.agentPrice && {
+              label: $t('productService.product.agentPrice'),
+              calcVat: agentPriceCalcVat,
+              vatIncluded: agentPriceVatIncluded,
+              pricePerUnit: agentPrice,
+            },
+            priceDisplay.serviceCharge && {
+              label: $t('productService.product.processingPrice'),
+              calcVat: serviceChargeCalcVat,
+              vatIncluded: serviceChargeVatIncluded,
+              pricePerUnit: serviceCharge,
+            },
+          ].filter(Boolean)
+        "
         :columns
         hide-bottom
         bordered
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index e79872d9..86e79951 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -98,7 +98,8 @@ watch(
   (c, o) => {
     const list = c.map((v: { name: string }) => v.name);
     const oldList = o.map((v: { name: string }) => v.name);
-    const index = oldList.indexOf(workName.value || '');
+    const index = workName.value ? oldList.indexOf(workName.value) : -1;
+    if (index === -1) return;
 
     if (
       list[index] !== oldList[index] &&
@@ -704,8 +705,8 @@ watch(
 }
 
 :deep(
-    .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
-  ) {
+  .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
+) {
   justify-content: start !important;
   padding-right: 8px !important;
   padding-top: 16px;
@@ -735,8 +736,8 @@ watch(
 }
 
 :deep(
-    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-  ) {
+  i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+) {
   color: var(--brand-1);
 }
 
diff --git a/src/components/04_product-service/WorkNameManagement.vue b/src/components/04_product-service/WorkNameManagement.vue
index 2bde41ce..81854b9e 100644
--- a/src/components/04_product-service/WorkNameManagement.vue
+++ b/src/components/04_product-service/WorkNameManagement.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { nextTick, onMounted, ref, watch } from 'vue';
 import { DeleteButton, EditButton, SaveButton, UndoButton } from '../button';
-import { scrollToElement } from 'stores/utils';
 // import { useI18n } from 'vue-i18n';
 // import { storeToRefs } from 'pinia';
 
@@ -138,11 +137,8 @@ watch(
               @click="
                 () => {
                   assignClone();
-                  if (nameList[nameList.length - 1].name === '') {
-                    $emit('delete', cloneList[cloneList.length - 1].id, true);
-                    cloneList = cloneList.filter((item) => item.name !== '');
-                    nameList = nameList.filter((item) => item.name !== '');
-                  }
+                  cloneList = cloneList.filter((item) => item.name !== '');
+                  nameList = nameList.filter((item) => item.name !== '');
                 }
               "
             />
diff --git a/src/components/04_property-management/FormProperty.vue b/src/components/04_property-management/FormProperty.vue
index 34067e8e..6be9f885 100644
--- a/src/components/04_property-management/FormProperty.vue
+++ b/src/components/04_property-management/FormProperty.vue
@@ -48,6 +48,7 @@ defineProps<{
   readonly?: boolean;
   onDrawer?: boolean;
   inputOnly?: boolean;
+  disableToggle?: boolean;
 }>();
 
 defineEmits<{
@@ -76,6 +77,7 @@ defineEmits<{
         <ToggleButton
           class="q-mr-sm"
           two-way
+          :disable="disableToggle"
           :model-value="status !== 'INACTIVE'"
           @click="
             () => {
@@ -195,8 +197,8 @@ defineEmits<{
 }
 
 :deep(
-    .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
-  ) {
+  .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
+) {
   justify-content: start !important;
   padding-right: 8px !important;
   padding-top: 16px;
@@ -208,15 +210,15 @@ defineEmits<{
 }
 
 :deep(
-    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-  ) {
+  i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+) {
   color: var(--brand-1);
 }
 
 :deep(
-    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.expansion-rounded.surface-2
-      .q-focus-helper
-  ) {
+  .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.expansion-rounded.surface-2
+    .q-focus-helper
+) {
   visibility: hidden;
 }
 
diff --git a/src/components/05_quotation/FormAbout.vue b/src/components/05_quotation/FormAbout.vue
index 661ea581..e5505eff 100644
--- a/src/components/05_quotation/FormAbout.vue
+++ b/src/components/05_quotation/FormAbout.vue
@@ -2,11 +2,18 @@
 import SelectCustomer from '../shared/select/SelectCustomer.vue';
 import SelectBranch from '../shared/select/SelectBranch.vue';
 
+import { CustomerBranch } from 'src/stores/customer';
+import { ref } from 'vue';
+
 const branchId = defineModel<string>('branchId');
 const customerBranchId = defineModel<string>('customerBranchId');
 const agentPrice = defineModel<boolean>('agentPrice');
 const special = defineModel<boolean>('special');
 
+const customerBranchOption = defineModel<CustomerBranch>(
+  'customerBranchOption',
+);
+
 defineProps<{
   outlined?: boolean;
   readonly?: boolean;
@@ -67,8 +74,12 @@ defineEmits<{
         required
         :readonly
       />
+
       <SelectCustomer
+        id="about-select-customer-branch-id"
+        for="about-select-customer-branch-id"
         v-model:value="customerBranchId"
+        v-model:value-option="customerBranchOption"
         :label="$t('quotation.customer')"
         :creatable-disabled-text="`(${$t('form.error.selectField', {
           field: $t('quotation.branchVirtual'),
@@ -88,14 +99,14 @@ defineEmits<{
 
 <style scoped>
 :deep(
-    label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-one
-  ) {
+  label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-one
+) {
   padding-right: 4px;
 }
 
 :deep(
-    label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-two
-  ) {
+  label.q-field.row.no-wrap.items-start.q-field--outlined.q-select.field-two
+) {
   padding-left: 4px;
 }
 </style>
diff --git a/src/components/05_quotation/ProductItem.vue b/src/components/05_quotation/ProductItem.vue
index b1996d03..cfa2ad8e 100644
--- a/src/components/05_quotation/ProductItem.vue
+++ b/src/components/05_quotation/ProductItem.vue
@@ -58,16 +58,15 @@ const currentBtnOpen = ref<{ title: string; opened: boolean[] }[]>([
 
 function calcPrice(c: (typeof rows.value)[number]) {
   const originalPrice = c.pricePerUnit;
-  const finalPriceWithVat = precisionRound(
-    originalPrice + originalPrice * (config.value?.vat || 0.07),
+  const finalPricePerUnit = precisionRound(
+    originalPrice +
+      (c.product[props.agentPrice ? 'agentPriceCalcVat' : 'calcVat']
+        ? originalPrice * (config.value?.vat || 0.07)
+        : 0),
   );
-  const finalPriceNoVat = finalPriceWithVat / (1 + (config.value?.vat || 0.07));
+  const price = finalPricePerUnit * c.amount - c.discount;
 
-  const price = finalPriceNoVat * c.amount - c.discount;
-  const vat = c.product[props.agentPrice ? 'agentPriceCalcVat' : 'calcVat']
-    ? (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07)
-    : 0;
-  return precisionRound(price + vat);
+  return precisionRound(price);
 }
 
 const discount4Show = ref<string[]>([]);
@@ -435,8 +434,20 @@ watch(
               <q-td align="right">
                 {{
                   formatNumberDecimal(
-                    props.row.pricePerUnit * props.row.amount -
-                      props.row.discount,
+                    props.row.product[
+                      agentPrice ? 'agentPriceCalcVat' : 'calcVat'
+                    ]
+                      ? precisionRound(
+                          (props.row.pricePerUnit *
+                            (1 + (config?.vat || 0.07)) *
+                            props.row.amount -
+                            props.row.discount) /
+                            (1 + (config?.vat || 0.07)),
+                        )
+                      : precisionRound(
+                          props.row.pricePerUnit * props.row.amount -
+                            props.row.discount,
+                        ),
                     2,
                   )
                 }}
@@ -448,9 +459,12 @@ watch(
                       agentPrice ? 'agentPriceCalcVat' : 'calcVat'
                     ]
                       ? precisionRound(
-                          (props.row.pricePerUnit * props.row.amount -
-                            props.row.discount) *
-                            (config?.vat || 0.07),
+                          ((props.row.pricePerUnit *
+                            (1 + (config?.vat || 0.07)) *
+                            props.row.amount -
+                            props.row.discount) /
+                            (1 + (config?.vat || 0.07))) *
+                            0.07,
                         )
                       : 0,
                     2,
diff --git a/src/components/05_quotation/TableQuotation.vue b/src/components/05_quotation/TableQuotation.vue
index a80a4e40..76c9e38c 100644
--- a/src/components/05_quotation/TableQuotation.vue
+++ b/src/components/05_quotation/TableQuotation.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { QTableProps } from 'quasar';
-import { dateFormat } from 'src/utils/datetime';
+import { dateFormat, dateFormatJS } from 'src/utils/datetime';
 
 import { formatNumberDecimal } from 'stores/utils';
 
@@ -19,6 +19,8 @@ const props = withDefaults(
     page?: number;
     pageSize?: number;
     hideBtnPreview?: boolean;
+    hideAction?: boolean;
+    hideDelete?: boolean;
   }>(),
   {
     row: () => [],
@@ -84,11 +86,11 @@ defineEmits<{
         </q-td>
 
         <q-td v-if="visibleColumns.includes('createdAt')">
-          {{ dateFormat(props.row.createdAt) }}
+          {{ dateFormatJS({ date: props.row.createdAt }) }}
         </q-td>
 
         <q-td v-if="visibleColumns.includes('dueDate')">
-          {{ dateFormat(props.row.dueDate) }}
+          {{ dateFormatJS({ date: props.row.dueDate }) }}
         </q-td>
 
         <q-td v-if="visibleColumns.includes('contactName')">
@@ -147,12 +149,12 @@ defineEmits<{
             flat
             @click.stop="$emit('view', props.row)"
           />
-
           <KebabAction
+            v-if="!hideAction"
             :idName="`btn-kebab-${props.row.workName}`"
             status="'ACTIVE'"
             hide-toggle
-            hide-delete
+            :hide-delete
             :hide-edit="hideEdit"
             @view="$emit('view', props.row)"
             @edit="$emit('edit', props.row)"
diff --git a/src/components/07_agencies-management/FormBasicInfoAgencies.vue b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
index 7f3f3c5d..966d64ab 100644
--- a/src/components/07_agencies-management/FormBasicInfoAgencies.vue
+++ b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
@@ -1,6 +1,10 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import SelectInput from '../shared/SelectInput.vue';
 import useOptionStore from 'src/stores/options';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { useInstitution } from 'src/stores/institution';
 
 const optionStore = useOptionStore();
 
@@ -10,6 +14,11 @@ defineProps<{
   readonly?: boolean;
   onDrawer?: boolean;
 }>();
+const emit = defineEmits<{
+  (e: 'deleteAttachment', name: string): void;
+}>();
+
+const attachmentRef = ref();
 
 const group = defineModel('group', { default: '' });
 const name = defineModel('name', { default: '' });
@@ -17,8 +26,19 @@ const nameEn = defineModel('nameEn', { default: '' });
 const contactName = defineModel('contactName', { default: '' });
 const email = defineModel('email', { default: '' });
 const contactTel = defineModel('contactTel', { default: '' });
+const attachment = defineModel<File[]>('attachment');
+const attachmentList =
+  defineModel<{ name: string; url: string }[]>('attachmentList');
 
 type Options = { label: string; value: string };
+
+function openNewTab(url: string) {
+  window.open(url, '_blank');
+}
+
+function deleteAttachment(name: string) {
+  emit('deleteAttachment', name);
+}
 </script>
 <template>
   <div class="row col-12">
@@ -68,7 +88,12 @@ type Options = { label: string; value: string };
         class="col-md-4 col-12"
         :label="$t('agencies.name')"
         v-model="name"
-        :rules="[(val: string) => !!val || $t('form.error.required')]"
+        :rules="[
+          (val) => !!val || $t('form.error.required'),
+          (val) =>
+            /^[A-Za-z0-9ก-๙\s&.,'-]+$/.test(val) ||
+            $t('form.error.branchNameField'),
+        ]"
       />
       <q-input
         for="input-agencies-name-en"
@@ -79,6 +104,15 @@ type Options = { label: string; value: string };
         class="col-md-4 col-12"
         :label="'Agencies Name'"
         v-model="nameEn"
+        :rules="
+          nameEn
+            ? [
+                (val) =>
+                  /^[A-Za-z0-9ก-๙\s&.,'-]+$/.test(val) ||
+                  $t('form.error.branchNameENField'),
+              ]
+            : []
+        "
       />
 
       <q-input
@@ -148,6 +182,78 @@ type Options = { label: string; value: string };
           />
         </template>
       </q-input>
+
+      <q-file
+        v-if="!readonly"
+        ref="attachmentRef"
+        for="input-attachment"
+        dense
+        outlined
+        multiple
+        append
+        :readonly
+        :label="$t('personnel.form.attachment')"
+        class="col"
+        v-model="attachment"
+      >
+        <template v-slot:prepend>
+          <Icon
+            icon="material-symbols:attach-file"
+            width="20px"
+            style="color: var(--brand-1)"
+          />
+        </template>
+        <template v-slot:file="file">
+          <div class="row full-width items-center">
+            <span class="col ellipsis">
+              {{ file.file.name }}
+            </span>
+            <q-btn
+              dense
+              rounded
+              flat
+              padding="2 2"
+              class="app-text-muted"
+              icon="mdi-close-circle"
+              @click.stop="attachmentRef.removeAtIndex(file.index)"
+            />
+          </div>
+        </template>
+      </q-file>
+
+      <div v-if="attachmentList && attachmentList?.length > 0" class="col-12">
+        <q-list bordered separator class="rounded" style="padding: 0">
+          <q-item
+            id="attachment-file"
+            for="attachment-file"
+            v-for="item in attachmentList"
+            clickable
+            :key="item.url"
+            class="items-center row"
+            @click="() => openNewTab(item.url)"
+          >
+            <q-item-section>
+              <div class="row items-center justify-between">
+                <div class="col">
+                  {{ item.name }}
+                </div>
+                <q-btn
+                  v-if="!readonly"
+                  id="delete-file"
+                  rounded
+                  flat
+                  dense
+                  unelevated
+                  size="md"
+                  icon="mdi-trash-can-outline"
+                  class="app-text-negative"
+                  @click.stop="deleteAttachment(item.name)"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/08_request-list/DataDisplay.vue b/src/components/08_request-list/DataDisplay.vue
index 30a8e52b..f36acb4f 100644
--- a/src/components/08_request-list/DataDisplay.vue
+++ b/src/components/08_request-list/DataDisplay.vue
@@ -27,26 +27,38 @@ withDefaults(
       class="app-text-muted q-pr-sm"
       :width="iconSize || '2rem'"
     />
-    <span class="row col">
-      <span class="col-12 app-text-muted-2" style="font-size: 10px">
+    <span :id="`dd-wrapper-${label}`" class="row col">
+      <span
+        :id="`dd-label-${label}`"
+        class="col-12 app-text-muted-2"
+        style="font-size: 10px"
+      >
         {{ label }}
       </span>
-      <span class="col-12 ellipsis">
+      <span :id="`dd-value-wrapper-${label}`" class="col-12 ellipsis">
         <slot name="value">
           <span
             :class="{ 'link cursor-pointer': clickable }"
             v-if="typeof value === 'string'"
-            @click="$emit('labelClick', value, null)"
+            @click="clickable ? $emit('labelClick', value, null) : undefined"
+            :id="`link-${value}`"
+            :for="`link-${value}`"
           >
             {{ value }}
             <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
           </span>
-          <span v-else :class="{ 'link cursor-pointer': clickable }">
+          <span
+            :id="`dd-value-${label}`"
+            v-else
+            :class="{ 'link cursor-pointer': clickable }"
+          >
             <span
               v-for="(item, index) in value"
               :key="index"
               @click="$emit('labelClick', item, index)"
               class="link cursor-pointer"
+              :id="`link-${item}`"
+              :for="`link-${item}`"
             >
               {{ item }}
               <span v-if="index < value.length - 1">,&nbsp;</span>
diff --git a/src/components/11_credit-note/FormCredit.vue b/src/components/11_credit-note/FormCredit.vue
index b6e2bf1f..5e4ee55b 100644
--- a/src/components/11_credit-note/FormCredit.vue
+++ b/src/components/11_credit-note/FormCredit.vue
@@ -8,6 +8,10 @@ defineProps<{
 const quotationId = defineModel<string>('quotationId', {
   required: true,
 });
+const isDebitNote = defineModel<boolean>('isDebitNote', {
+  required: false,
+  default: false,
+});
 </script>
 <template>
   <div class="row col-12">
@@ -37,6 +41,7 @@ const quotationId = defineModel<string>('quotationId', {
           cancelIncludeDebitNote: true,
           hasCancel: true,
         }"
+        @selected="(v) => (isDebitNote = v.isDebitNote)"
       />
     </section>
   </div>
diff --git a/src/components/DialogForm.vue b/src/components/DialogForm.vue
index 84319bcf..fb29a4ca 100644
--- a/src/components/DialogForm.vue
+++ b/src/components/DialogForm.vue
@@ -42,6 +42,15 @@ defineProps<{
 
 const modal = defineModel('modal', { default: false });
 const currentTab = defineModel<string>('currentTab');
+
+async function onValidationError(ref: any) {
+  const el = ref.$el as Element;
+  el.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest',
+  });
+}
 </script>
 <template>
   <q-dialog
@@ -60,6 +69,7 @@ const currentTab = defineModel<string>('currentTab');
         @submit.prevent
         @validation-success="submit"
         class="column full-height"
+        @validation-error="onValidationError"
       >
         <!-- header -->
         <div
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index e796890a..defcb6d5 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -8,7 +8,7 @@ import {
   UndoButton,
 } from 'components/button';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     title: string;
     category?: string;
@@ -42,10 +42,24 @@ const drawerOpen = defineModel<boolean>('drawerOpen', {
 const myForm = ref();
 
 function reset() {
+  if (props.beforeClose) {
+    drawerOpen.value = props.beforeClose
+      ? props.beforeClose()
+      : !drawerOpen.value;
+  }
   if (myForm.value) {
     myForm.value.resetValidation();
   }
 }
+
+async function onValidationError(ref: any) {
+  const el = ref.$el as Element;
+  el.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest',
+  });
+}
 </script>
 <template>
   <q-drawer
@@ -53,7 +67,6 @@ function reset() {
     @show="show"
     @before-hide="reset"
     @hide="close"
-    @update:model-value="(v) => (drawerOpen = beforeClose ? beforeClose() : v)"
     :width="$q.screen.gt.xs ? windowSize * 0.85 : windowSize"
     v-model="drawerOpen"
     behavior="mobile"
@@ -66,6 +79,7 @@ function reset() {
       greedy
       @submit.prevent
       @validation-success="submit"
+      @validation-error="onValidationError"
     >
       <div
         class="column justify-between full-height"
diff --git a/src/components/GlobalDialog.vue b/src/components/GlobalDialog.vue
index 059f7755..f9df77d4 100644
--- a/src/components/GlobalDialog.vue
+++ b/src/components/GlobalDialog.vue
@@ -46,6 +46,7 @@ defineProps<{
           color="grey"
           icon="mdi-close"
           v-close-popup
+          @click="cancel"
         />
       </div>
 
diff --git a/src/components/PaginationPageSize.vue b/src/components/PaginationPageSize.vue
index 4eb86e0c..e8ece111 100644
--- a/src/components/PaginationPageSize.vue
+++ b/src/components/PaginationPageSize.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
 const pageSize = defineModel<number>({ required: true });
+
+withDefaults(
+  defineProps<{
+    fetchData?: (...args: unknown[]) => void;
+  }>(),
+  {},
+);
 </script>
 
 <template>
@@ -10,7 +17,12 @@ const pageSize = defineModel<number>({ required: true });
         :key="v"
         clickable
         v-close-popup
-        @click="pageSize = v"
+        @click="
+          () => {
+            pageSize = v;
+            fetchData();
+          }
+        "
       >
         <q-item-section>
           <q-item-label>{{ v }}</q-item-label>
diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index 9c72041c..2d4b3975 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -229,6 +229,7 @@ const smallBanner = ref(false);
 
             <ToggleButton
               v-if="useToggle"
+              :disable="readonly"
               two-way
               :model-value="toggleStatus !== 'INACTIVE'"
               @click="$emit('update:toggleStatus', toggleStatus)"
@@ -265,6 +266,7 @@ const smallBanner = ref(false);
               class="app-text-muted full-width"
               align="left"
               v-if="typeof tabsList === 'object'"
+              @update:model-value="(v) => $emit('update:currentTab', v)"
             >
               <q-tab
                 v-for="tab in tabsList"
diff --git a/src/components/TreeComponent.vue b/src/components/TreeComponent.vue
index ee5130ba..fca14f27 100644
--- a/src/components/TreeComponent.vue
+++ b/src/components/TreeComponent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { BranchWithChildren } from 'stores/branch/types';
 import KebabAction from './shared/KebabAction.vue';
-import { isRoleInclude } from 'stores/utils';
 
 const nodes = defineModel<(any | BranchWithChildren)[]>('nodes', {
   default: [],
@@ -17,6 +16,7 @@ withDefaults(
     labelKey?: string;
     childrenKey: string;
     action?: boolean;
+    hideCreate?: boolean;
   }>(),
   {
     color: 'transparent',
@@ -96,7 +96,9 @@ defineEmits<{
                   expandedTree[expandedTree.length - 1] === node.id,
               }"
             >
-              {{ node.name }}
+              {{
+                $i18n.locale === 'eng' ? node.nameEN || node.name : node.name
+              }}
             </span>
             <span class="app-text-muted text-caption ellipsis">
               {{ node.code }}
@@ -120,11 +122,7 @@ defineEmits<{
             />
 
             <q-btn
-              v-if="
-                node.isHeadOffice &&
-                typeTree === 'branch' &&
-                isRoleInclude(['head_of_admin', 'admin', 'system'])
-              "
+              v-if="node.isHeadOffice && typeTree === 'branch' && !hideCreate"
               :id="`create-sub-branch-btn-${node.name}`"
               @click.stop="$emit('create', node)"
               icon="mdi-file-plus-outline"
diff --git a/src/components/button/MainButton.vue b/src/components/button/MainButton.vue
index 836abe32..08233063 100644
--- a/src/components/button/MainButton.vue
+++ b/src/components/button/MainButton.vue
@@ -5,6 +5,7 @@ defineEmits<{
   (e: 'click', v: MouseEvent): void;
 }>();
 defineProps<{
+  id?: string;
   icon?: string;
   color: string;
   iconOnly?: boolean;
@@ -18,6 +19,7 @@ defineProps<{
 
 <template>
   <button
+    :id="id"
     @click="(e) => $emit('click', e)"
     class="main-btn"
     :class="{
diff --git a/src/components/button/SaveButton.vue b/src/components/button/SaveButton.vue
index d7325a45..10f42a9a 100644
--- a/src/components/button/SaveButton.vue
+++ b/src/components/button/SaveButton.vue
@@ -10,6 +10,7 @@ defineProps<{
   outlined?: boolean;
   disabled?: boolean;
   dark?: boolean;
+  color?: string;
 
   label?: string;
   icon?: string;
@@ -23,7 +24,7 @@ defineProps<{
     @click="(e) => $emit('click', e)"
     v-bind="{ ...$props, ...$attrs }"
     :icon="icon || 'mdi-content-save-outline'"
-    color="207 96% 32%"
+    :color="color || '207 96% 32%'"
     :title="iconOnly ? $t('general.save') : undefined"
   >
     {{ label || $t('general.save') }}
diff --git a/src/components/dialog/DialogFormContainer.vue b/src/components/dialog/DialogFormContainer.vue
index ccf174d2..c68f7d46 100644
--- a/src/components/dialog/DialogFormContainer.vue
+++ b/src/components/dialog/DialogFormContainer.vue
@@ -23,6 +23,15 @@ function update(value: boolean) {
   }
 }
 
+async function onValidationError(ref: any) {
+  const el = ref.$el as Element;
+  el.scrollIntoView({
+    behavior: 'smooth',
+    block: 'center',
+    inline: 'nearest',
+  });
+}
+
 const state = defineModel({ default: false });
 </script>
 
@@ -41,6 +50,7 @@ const state = defineModel({ default: false });
       }"
     >
       <q-form
+        @validation-error="onValidationError"
         @submit.prevent="(e) => $emit('submit', e)"
         @reset="$emit('reset')"
         greedy
diff --git a/src/components/form/AddressForm.vue b/src/components/form/AddressForm.vue
index cbdb0819..83440005 100644
--- a/src/components/form/AddressForm.vue
+++ b/src/components/form/AddressForm.vue
@@ -12,7 +12,7 @@ import { formatAddress } from 'src/utils/address';
 import useOptionStore from 'stores/options';
 
 const optionStore = useOptionStore();
-defineProps<{
+const props = defineProps<{
   title?: string;
   addressTitle?: string;
   addressTitleEN?: string;
@@ -30,6 +30,7 @@ defineProps<{
 
   useEmployment?: boolean;
   useWorkPlace?: boolean;
+  useForeignAddress?: boolean;
 }>();
 
 const addressStore = useAddressStore();
@@ -57,6 +58,25 @@ const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string | null | undefined>('zipCode');
 const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
 
+const provinceTextEN = defineModel<string | null | undefined>(
+  'provinceTextEn',
+  {
+    default: '',
+  },
+);
+const districtTextEN = defineModel<string | null | undefined>(
+  'districtTextEn',
+  {
+    default: '',
+  },
+);
+const subDistrictTextEN = defineModel<string | null | undefined>(
+  'subDistrictTextEn',
+  {
+    default: '',
+  },
+);
+
 const homeCode = defineModel<string | null | undefined>('homeCode');
 const employmentOffice = defineModel<string | null | undefined>(
   'employmentOffice',
@@ -64,6 +84,7 @@ const employmentOffice = defineModel<string | null | undefined>(
 const employmentOfficeEN = defineModel<string | null | undefined>(
   'employmentOfficeEn',
 );
+const addressForeign = defineModel<boolean>('addressForeign');
 
 const addrOptions = reactive<{
   provinceOps: Province[];
@@ -78,14 +99,18 @@ const addrOptions = reactive<{
 const area = ref<Office[]>([]);
 
 const fullAddress = computed(() => {
-  const province = provinceOptions.value.find((v) => v.id === provinceId.value);
-  const district = districtOptions.value.find((v) => v.id === districtId.value);
-  const sDistrict = subDistrictOptions.value.find(
-    (v) => v.id === subDistrictId.value,
-  );
+  const province = addressForeign.value
+    ? { id: '1', name: provinceId.value }
+    : provinceOptions.value.find((v) => v.id === provinceId.value);
+  const district = addressForeign.value
+    ? { id: '1', name: districtId.value }
+    : districtOptions.value.find((v) => v.id === districtId.value);
+  const sDistrict = addressForeign.value
+    ? { id: '1', name: subDistrictId.value }
+    : subDistrictOptions.value.find((v) => v.id === subDistrictId.value);
 
-  if (province && district && sDistrict) {
-    const fullAddress = formatAddress({
+  if (province?.name && district?.name && sDistrict?.name) {
+    const fullAddressText = formatAddress({
       address: address.value,
       addressEN: addressEN.value,
       moo: moo.value ? moo.value : '',
@@ -97,21 +122,26 @@ const fullAddress = computed(() => {
       province: province as unknown as Province,
       district: district as unknown as District,
       subDistrict: sDistrict as unknown as SubDistrict,
+      zipCode: addressForeign.value ? zipCode.value || ' ' : undefined,
     });
-    return fullAddress;
+    return fullAddressText;
   }
   return '-';
 });
 
 const fullAddressEN = computed(() => {
-  const province = provinceOptions.value.find((v) => v.id === provinceId.value);
-  const district = districtOptions.value.find((v) => v.id === districtId.value);
-  const sDistrict = subDistrictOptions.value.find(
-    (v) => v.id === subDistrictId.value,
-  );
+  const province = addressForeign.value
+    ? { nameEN: provinceTextEN.value }
+    : provinceOptions.value.find((v) => v.id === provinceId.value);
+  const district = addressForeign.value
+    ? { nameEN: districtTextEN.value }
+    : districtOptions.value.find((v) => v.id === districtId.value);
+  const sDistrict = addressForeign.value
+    ? { nameEN: subDistrictTextEN.value }
+    : subDistrictOptions.value.find((v) => v.id === subDistrictId.value);
 
-  if (province && district && sDistrict) {
-    const fullAddress = formatAddress({
+  if (province?.nameEN && district?.nameEN && sDistrict?.nameEN) {
+    const fullAddressText = formatAddress({
       address: address.value,
       addressEN: addressEN.value,
       moo: moo.value ? moo.value : '',
@@ -124,8 +154,9 @@ const fullAddressEN = computed(() => {
       district: district as unknown as District,
       subDistrict: sDistrict as unknown as SubDistrict,
       en: true,
+      zipCode: addressForeign.value ? zipCode.value || ' ' : undefined,
     });
-    return fullAddress;
+    return fullAddressText;
   }
   return '-';
 });
@@ -149,7 +180,7 @@ async function fetchProvince() {
 }
 
 async function fetchDistrict() {
-  if (!provinceId.value) return;
+  if (!provinceId.value || addressForeign.value) return;
 
   const result = await addressStore.fetchDistrictByProvinceId(provinceId.value);
   if (result) addrOptions.districtOps = result;
@@ -168,7 +199,7 @@ async function fetchDistrict() {
 }
 
 async function fetchSubDistrict() {
-  if (!districtId.value) return;
+  if (!districtId.value || addressForeign.value) return;
   const result = await addressStore.fetchSubDistrictByProvinceId(
     districtId.value,
   );
@@ -255,6 +286,16 @@ onMounted(async () => {
   await fetchSubDistrict();
 });
 
+function clearAddress() {
+  provinceId.value = null;
+  districtId.value = null;
+  subDistrictId.value = null;
+  provinceTextEN.value = null;
+  districtTextEN.value = null;
+  subDistrictTextEN.value = null;
+  zipCode.value = null;
+}
+
 watch(provinceId, fetchDistrict);
 watch(districtId, fetchSubDistrict);
 
@@ -313,6 +354,15 @@ watchEffect(async () => {
           {{ $t('customerEmployee.form.addressCustom') }}
         </span>
       </div>
+
+      <div v-if="useForeignAddress" class="text-caption q-ml-md app-text-muted">
+        <q-checkbox
+          size="xs"
+          v-model="addressForeign"
+          @update:model-value="clearAddress"
+        />
+        {{ $t('personnel.form.addressForeign') }}
+      </div>
     </div>
 
     <div class="col-12 row q-col-gutter-y-md">
@@ -449,7 +499,24 @@ watchEffect(async () => {
             (v) => (typeof v === 'string' ? (street = v) : '')
           "
         />
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="provinceId"
+          :dense="dense"
+          :label="$t('form.province')"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-province-${indexId}` : 'input-province'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -493,7 +560,24 @@ watchEffect(async () => {
           </template>
         </q-select>
 
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="districtId"
+          :dense="dense"
+          :label="$t('form.district')"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-district-${indexId}` : 'input-district'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -536,7 +620,25 @@ watchEffect(async () => {
             </q-item>
           </template>
         </q-select>
+
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="subDistrictId"
+          :dense="dense"
+          :label="$t('form.district')"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-sub-district-${indexId}` : 'input-sub-district'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -580,17 +682,27 @@ watchEffect(async () => {
           </template>
         </q-select>
         <q-input
+          :key="Number(addressForeign)"
+          hide-bottom-space
           :for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
           :dense="dense"
           outlined
-          :disable="!readonly && !sameWithEmployer"
-          readonly
+          :disable="!addressForeign && !readonly && !sameWithEmployer"
+          :readonly="!addressForeign || readonly"
           :label="$t('form.zipCode')"
           class="col-md-3 col-6"
           :model-value="
-            addrOptions.subDistrictOps
-              ?.filter((x) => x.id === subDistrictId)
-              .map((x) => x.zipCode)[0] ?? ''
+            !addressForeign
+              ? (addrOptions.subDistrictOps
+                  ?.filter((x) => x.id === subDistrictId)
+                  .map((x) => x.zipCode)[0] ?? '')
+              : zipCode
+          "
+          @update:model-value="(v) => (zipCode = v.toString())"
+          :rules="
+            !addressForeign
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
           "
         />
         <q-input
@@ -689,7 +801,24 @@ watchEffect(async () => {
             (v) => (typeof v === 'string' ? (streetEN = v) : '')
           "
         />
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="provinceTextEN"
+          :dense="dense"
+          label="Province"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-province-en-${indexId}` : 'input-province-en'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -732,7 +861,25 @@ watchEffect(async () => {
             </q-item>
           </template>
         </q-select>
+
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="districtTextEN"
+          :dense="dense"
+          label="District"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-district-en-${indexId}` : 'input-district-en'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -775,7 +922,25 @@ watchEffect(async () => {
             </q-item>
           </template>
         </q-select>
+
+        <q-input
+          v-if="addressForeign"
+          outlined
+          hide-bottom-space
+          class="col-md-3 col-6"
+          v-model="subDistrictTextEN"
+          :dense="dense"
+          label="Sub-District"
+          :readonly="readonly || sameWithEmployer"
+          :for="`${prefixId}-${indexId !== undefined ? `input-sub-district-en-${indexId}` : 'input-sub-district-en'}`"
+          :rules="
+            disabledRule
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
+          "
+        />
         <q-select
+          v-else
           autocomplete="off"
           outlined
           clearable
@@ -819,19 +984,28 @@ watchEffect(async () => {
           </template>
         </q-select>
         <q-input
+          :key="Number(addressForeign)"
           hide-bottom-space
           :for="`${prefixId}-${indexId !== undefined ? `input-zip-code-${indexId}` : 'input-zip-code'}`"
           :dense="dense"
           outlined
-          readonly
-          :disable="!readonly && !sameWithEmployer"
+          :readonly="!addressForeign || readonly"
+          :disable="!addressForeign && !readonly && !sameWithEmployer"
           zip="zip-en"
           label="Zip Code"
           class="col-md-3 col-6"
           :model-value="
-            addrOptions.subDistrictOps
-              ?.filter((x) => x.id === subDistrictId)
-              .map((x) => x.zipCode)[0] ?? ''
+            !addressForeign
+              ? (addrOptions.subDistrictOps
+                  ?.filter((x) => x.id === subDistrictId)
+                  .map((x) => x.zipCode)[0] ?? '')
+              : zipCode
+          "
+          @update:model-value="(v) => (zipCode = v.toString())"
+          :rules="
+            !addressForeign
+              ? []
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
           "
         />
         <q-input
diff --git a/src/components/index.ts b/src/components/index.ts
index ecca1c1e..4f82d6a8 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -16,3 +16,4 @@ export { default as SideMenu } from './SideMenu.vue';
 export { default as StatCardComponent } from './StatCardComponent.vue';
 export { default as TooltipComponent } from './TooltipComponent.vue';
 export { default as TreeComponent } from './TreeComponent.vue';
+export { default as PaginationPageSize } from './PaginationPageSize.vue';
diff --git a/src/components/shared/AdvanceSearch.vue b/src/components/shared/AdvanceSearch.vue
index 5b5b33a9..79456a42 100644
--- a/src/components/shared/AdvanceSearch.vue
+++ b/src/components/shared/AdvanceSearch.vue
@@ -106,6 +106,7 @@ watch(
       :persistent="isDateSelect"
     >
       <div class="q-pa-sm">
+        <slot name="prepend"></slot>
         <div class="text-weight-medium">
           {{ $t('general.advanceSearch') }}
         </div>
diff --git a/src/components/shared/AvatarGroup.vue b/src/components/shared/AvatarGroup.vue
index a3f3d85e..ed8f63ef 100644
--- a/src/components/shared/AvatarGroup.vue
+++ b/src/components/shared/AvatarGroup.vue
@@ -25,7 +25,11 @@ withDefaults(
         alt="Image"
       />
     </div>
-    <div v-if="data.length > 3" class="avatar remaining-count">
+    <div
+      v-if="data.length > 3"
+      class="avatar remaining-count"
+      style="cursor: default"
+    >
       <q-tooltip>
         <div v-for="(person, i) in data.slice(3)" :key="i + 3">
           {{ person.name }}
diff --git a/src/components/shared/PersonCard.vue b/src/components/shared/PersonCard.vue
index 3abc14b0..d53a0b5c 100644
--- a/src/components/shared/PersonCard.vue
+++ b/src/components/shared/PersonCard.vue
@@ -23,6 +23,8 @@ defineProps<{
   history?: boolean;
   prefixId?: string;
   separateEnter?: boolean;
+  hideAction?: boolean;
+  hideDelete?: boolean;
 }>();
 
 defineEmits<{
@@ -76,8 +78,10 @@ defineEmits<{
         />
 
         <KebabAction
+          v-if="!hideAction"
           :id-name="prefixId"
           :status="disabled ? 'INACTIVE' : 'ACTIVE'"
+          :hide-delete="hideDelete"
           @view="
             separateEnter
               ? $emit('viewCard', 'INFO')
diff --git a/src/components/shared/SelectInput.vue b/src/components/shared/SelectInput.vue
index ff7403d4..82309031 100644
--- a/src/components/shared/SelectInput.vue
+++ b/src/components/shared/SelectInput.vue
@@ -13,6 +13,7 @@ let defaultFilter: (
 
 const props = withDefaults(
   defineProps<{
+    prefix?: string;
     id?: string;
     label?: string;
     option: T[];
@@ -71,6 +72,7 @@ watch(
 </script>
 <template>
   <q-select
+    :id="id"
     :placeholder="placeholder"
     outlined
     :clearable
@@ -106,7 +108,7 @@ watch(
     :rules
     @clear="
       () => {
-        model = '';
+        multiple ? (model = []) : (model = '');
       }
     "
   >
diff --git a/src/components/shared/select-muliple/SelectOffice.vue b/src/components/shared/select-muliple/SelectOffice.vue
index 24437cd1..22a0a327 100644
--- a/src/components/shared/select-muliple/SelectOffice.vue
+++ b/src/components/shared/select-muliple/SelectOffice.vue
@@ -72,7 +72,11 @@ onMounted(async () => {
     :option="selectOptions"
     :hide-selected="false"
     :fill-input="false"
-    :rules="[(v: string) => !!v || $t('form.error.required')]"
+    :rules="[
+      (v: string) => {
+        return !!v?.length || $t('form.error.required');
+      },
+    ]"
     @filter="filter"
   >
     <template #before-options v-if="creatable">
diff --git a/src/components/shared/select/SelectBranch.vue b/src/components/shared/select/SelectBranch.vue
index b18a1e51..6fa6aa8c 100644
--- a/src/components/shared/select/SelectBranch.vue
+++ b/src/components/shared/select/SelectBranch.vue
@@ -75,9 +75,9 @@ function setDefaultValue() {
 </script>
 <template>
   <SelectInput
-    for="select-hq-id"
     v-model="value"
     incremental
+    id="select-hq-id"
     :label
     :placeholder
     :readonly
diff --git a/src/components/shared/select/SelectBusinessType.vue b/src/components/shared/select/SelectBusinessType.vue
new file mode 100644
index 00000000..12b6172e
--- /dev/null
+++ b/src/components/shared/select/SelectBusinessType.vue
@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+import { createSelect, SelectProps } from './select';
+import SelectInput from '../SelectInput.vue';
+
+import { BusinessType } from 'src/stores/business-type/types';
+
+import useStore from 'src/stores/business-type';
+
+type SelectOption = BusinessType;
+
+const value = defineModel<string | null | undefined>('value', {
+  required: true,
+});
+const valueOption = defineModel<SelectOption>('valueOption', {
+  required: false,
+});
+
+const selectOptions = ref<SelectOption[]>([]);
+
+const { fetchList: getList, fetchById: getById } = useStore();
+
+defineEmits<{
+  (e: 'create'): void;
+}>();
+
+type ExclusiveProps = {
+  lang?: string;
+  codeOnly?: boolean;
+  selectFirstValue?: boolean;
+  branchVirtual?: boolean;
+  checkRole?: string[];
+};
+
+const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
+
+const { getOptions, setFirstValue, getSelectedOption, filter } =
+  createSelect<SelectOption>(
+    {
+      value,
+      valueOption,
+      selectOptions,
+      getList: async (query) => {
+        const ret = await getList({
+          query,
+          ...props.params,
+          pageSize: 99999,
+        });
+        if (ret) return ret.result;
+      },
+      getByValue: async (id) => {
+        const ret = await getById(id);
+        if (ret) return ret;
+      },
+    },
+    { valueField: 'id' },
+  );
+
+onMounted(async () => {
+  await getOptions();
+
+  if (props.autoSelectOnSingle && selectOptions.value.length === 1) {
+    setFirstValue();
+  }
+
+  if (props.selectFirstValue) {
+    setDefaultValue();
+  } else await getSelectedOption();
+});
+
+function setDefaultValue() {
+  setFirstValue();
+}
+</script>
+<template>
+  <SelectInput
+    v-model="value"
+    incremental
+    option-value="id"
+    :label="label || $t('menu.manage.businessType')"
+    :placeholder
+    :readonly
+    :disable="disabled"
+    :option="selectOptions"
+    :hide-selected="false"
+    :fill-input="false"
+    :rules="[
+      (v: string) => !props.required || !!v || $t('form.error.required'),
+    ]"
+    @filter="filter"
+  >
+    <template #selected-item="{ opt }">
+      {{ (lang ?? $i18n.locale) !== 'eng' ? opt.name : opt.nameEN }}
+    </template>
+
+    <template #no-option v-if="creatable">
+      <q-item
+        :disable="creatableDisabled"
+        clickable
+        v-close-popup
+        @click.stop="$emit('create')"
+      >
+        <q-item-section>
+          <span class="row items-center">
+            <q-icon
+              name="mdi-plus-circle-outline"
+              class="q-mr-sm"
+              style="color: hsl(var(--positive-bg))"
+            />
+            <b>
+              {{ $t('general.add', { text: $t('businessType.title') }) }}
+            </b>
+            <span
+              v-if="creatableDisabled && creatableDisabledText"
+              class="app-text-muted q-pl-xs"
+              style="font-size: 80%"
+            >
+              {{ creatableDisabledText }}
+            </span>
+          </span>
+        </q-item-section>
+      </q-item>
+
+      <q-separator class="q-mx-sm" />
+    </template>
+
+    <template #before-options v-if="creatable">
+      <q-item
+        :disable="creatableDisabled"
+        clickable
+        v-close-popup
+        @click.stop="$emit('create')"
+        for="select-biz-type-add-new"
+        id="select-biz-type-add-new"
+      >
+        <q-item-section>
+          <span class="row items-center">
+            <q-icon
+              name="mdi-plus-circle-outline"
+              class="q-mr-sm"
+              style="color: hsl(var(--positive-bg))"
+            />
+            <b>
+              {{ $t('general.add', { text: $t('businessType.title') }) }}
+            </b>
+            <span
+              v-if="creatableDisabled && creatableDisabledText"
+              class="app-text-muted q-pl-xs"
+              style="font-size: 80%"
+            >
+              {{ creatableDisabledText }}
+            </span>
+          </span>
+        </q-item-section>
+      </q-item>
+
+      <q-separator class="q-mx-sm" />
+    </template>
+
+    <template #before-options v-if="creatable">
+      <q-item
+        :disable="creatableDisabled"
+        clickable
+        v-close-popup
+        @click.stop="$emit('create')"
+        for="select-business-type-add-new"
+        id="select-business-type-add-new"
+      >
+        <q-item-section>
+          <span class="row items-center">
+            <q-icon
+              name="mdi-plus-circle-outline"
+              class="q-mr-sm"
+              style="color: hsl(var(--positive-bg))"
+            />
+            <b>
+              {{ $t('general.add', { text: $t('menu.manage.businessType') }) }}
+            </b>
+            <span
+              v-if="creatableDisabled && creatableDisabledText"
+              class="app-text-muted q-pl-xs"
+              style="font-size: 80%"
+            >
+              {{ creatableDisabledText }}
+            </span>
+          </span>
+        </q-item-section>
+      </q-item>
+
+      <q-separator class="q-mx-sm" />
+    </template>
+
+    <template #option="{ opt, scope }">
+      <q-item v-bind="scope.itemProps">
+        <span class="row items-center">
+          {{ (lang ?? $i18n.locale) !== 'eng' ? opt.name : opt.nameEN }}
+        </span>
+      </q-item>
+
+      <q-separator class="q-mx-sm" />
+    </template>
+
+    <template #append v-if="clearable">
+      <q-icon
+        v-if="!readonly && value"
+        name="mdi-close-circle"
+        @click.stop="value = ''"
+        class="cursor-pointer clear-btn"
+      />
+    </template>
+  </SelectInput>
+</template>
diff --git a/src/components/shared/select/SelectCustomer.vue b/src/components/shared/select/SelectCustomer.vue
index 73fafd79..2e62eba8 100644
--- a/src/components/shared/select/SelectCustomer.vue
+++ b/src/components/shared/select/SelectCustomer.vue
@@ -30,6 +30,7 @@ defineEmits<{
 type ExclusiveProps = {
   simple?: boolean;
   simpleBranchNo?: boolean;
+  selectFirstValue?: boolean;
 };
 
 const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
@@ -64,10 +65,14 @@ onMounted(async () => {
     setFirstValue();
   }
 
-  await getSelectedOption();
-
-  valueOption.value = selectOptions.value.find((v) => v.id === value.value);
+  if (props.selectFirstValue) {
+    setDefaultValue();
+  } else await getSelectedOption();
 });
+
+function setDefaultValue() {
+  setFirstValue();
+}
 </script>
 <template>
   <SelectInput
@@ -160,11 +165,9 @@ onMounted(async () => {
     </template>
 
     <template #option="{ opt, scope }">
-      <q-item @click="valueOption = opt" v-bind="scope.itemProps">
+      <q-item v-bind="scope.itemProps" class="q-mx-sm bodrder">
         <SelectCustomerItem :data="opt" :simple :simple-branch-no />
       </q-item>
-
-      <q-separator class="q-mx-sm" />
     </template>
 
     <template #append v-if="clearable">
@@ -177,3 +180,11 @@ onMounted(async () => {
     </template>
   </SelectInput>
 </template>
+
+<style scoped>
+.bodrder {
+  border-bottom: solid;
+  border-bottom-width: 1px;
+  border-color: var(--border-color);
+}
+</style>
diff --git a/src/components/shared/select/SelectInstitution.vue b/src/components/shared/select/SelectInstitution.vue
index bf5877c0..4b4ea912 100644
--- a/src/components/shared/select/SelectInstitution.vue
+++ b/src/components/shared/select/SelectInstitution.vue
@@ -43,6 +43,7 @@ const { getOptions, setFirstValue, getSelectedOption, filter } =
         const ret = await getList({
           query: query === '' ? undefined : query,
           ...props.params,
+          activeOnly: true,
         });
         if (ret) return ret.result;
       },
diff --git a/src/components/shared/select/SelectQuotation.vue b/src/components/shared/select/SelectQuotation.vue
index ae9f7863..344e500b 100644
--- a/src/components/shared/select/SelectQuotation.vue
+++ b/src/components/shared/select/SelectQuotation.vue
@@ -25,6 +25,7 @@ const { getQuotationList: getList, getQuotation: getById } = useStore();
 
 defineEmits<{
   (e: 'create'): void;
+  (e: 'selected', value: SelectOption): void;
 }>();
 
 type ExclusiveProps = {
@@ -117,6 +118,14 @@ function setDefaultValue() {
       (v: string) => !props.required || !!v || $t('form.error.required'),
     ]"
     @filter="filter"
+    @update:model-value="
+      (v) => {
+        $emit(
+          'selected',
+          selectOptions.find((opt) => opt.id === v),
+        );
+      }
+    "
   >
     <template #append v-if="clearable">
       <q-icon
diff --git a/src/components/shared/select/SelectUser.vue b/src/components/shared/select/SelectUser.vue
index 64e661f9..5a8b89e3 100644
--- a/src/components/shared/select/SelectUser.vue
+++ b/src/components/shared/select/SelectUser.vue
@@ -26,6 +26,7 @@ defineEmits<{
 
 type ExclusiveProps = {
   selectFirstValue?: boolean;
+  prefix?: string;
 };
 
 const props = defineProps<SelectProps<typeof getList> & ExclusiveProps>();
@@ -71,6 +72,7 @@ function setDefaultValue() {
   <SelectInput
     v-model="value"
     incremental
+    :id="`${prefix || 'nome'}-select-user`"
     :label
     :placeholder
     :readonly
@@ -92,7 +94,9 @@ function setDefaultValue() {
     :hide-selected="false"
     :fill-input="false"
     :rules="
-      required ? [(v: string) => !!v || $t('form.error.required')] : undefined
+      required && !readonly
+        ? [(v: string) => !!v || $t('form.error.required')]
+        : undefined
     "
     @filter="filter"
   >
diff --git a/src/components/shared/select/select.ts b/src/components/shared/select/select.ts
index 08fd88b2..11ec46d4 100644
--- a/src/components/shared/select/select.ts
+++ b/src/components/shared/select/select.ts
@@ -35,7 +35,13 @@ export const createSelect = <T extends Record<string, any>>(
   let previousSearch = '';
 
   watch(value, (v) => {
-    if (!v || (cache && cache.find((opt) => opt[valueField] === v))) return;
+    if (!v) return;
+
+    if (cache && cache.find((opt) => opt[valueField] === v)) {
+      valueOption.value = cache.find((opt) => opt[valueField] === v);
+      return;
+    }
+
     getSelectedOption();
   });
 
@@ -63,15 +69,26 @@ export const createSelect = <T extends Record<string, any>>(
     const currentValue = value.value;
 
     if (!currentValue) return;
-    if (selectOptions.value.find((v) => v[valueField] === currentValue)) return;
+
     if (valueOption.value && valueOption.value[valueField] === currentValue) {
-      return selectOptions.value.unshift(valueOption.value);
+      selectOptions.value.unshift(valueOption.value);
+      selectOptions.value = selectOptions.value.filter((curr, idx, arr) => {
+        return (
+          arr.findIndex((item) => item[valueField] === curr[valueField]) === idx
+        );
+      });
+      return;
     }
 
     const ret = await getByValue(currentValue);
 
     if (ret) {
       selectOptions.value.unshift(ret);
+      selectOptions.value = selectOptions.value.filter((curr, idx, arr) => {
+        return (
+          arr.findIndex((item) => item[valueField] === curr[valueField]) === idx
+        );
+      });
       valueOption.value = ret;
     }
   }
diff --git a/src/components/shared/table/TableProductAndService.vue b/src/components/shared/table/TableProductAndService.vue
index e1801167..d8e0c683 100644
--- a/src/components/shared/table/TableProductAndService.vue
+++ b/src/components/shared/table/TableProductAndService.vue
@@ -251,7 +251,10 @@ function selectedIndex(item: any) {
         >
           <!-- NOTE: custom column will starts with # -->
           <template v-if="!col.name.startsWith('#')">
-            <span>
+            <span v-if="col.name === 'serviceDetail'">
+              {{ props.row.detail.replace(/<\/?[^>]+(>|$)/g, '') || '-' }}
+            </span>
+            <span v-else>
               {{
                 typeof col.field === 'string'
                   ? props.row[col.field as keyof (Product | Service)]
diff --git a/src/components/shared/table/TableWorker.vue b/src/components/shared/table/TableWorker.vue
index 8594b0e7..e8cfa214 100644
--- a/src/components/shared/table/TableWorker.vue
+++ b/src/components/shared/table/TableWorker.vue
@@ -145,6 +145,7 @@ function selectedIndex(item: Employee) {
           <template v-if="col.name === '#check'">
             <q-checkbox
               id="select-worker-all"
+              for="select-worker-all"
               v-model="props.selected"
               @update:model-value="(v) => handleUpdate()"
               size="sm"
@@ -200,6 +201,7 @@ function selectedIndex(item: Employee) {
               v-model="props.selected"
               size="sm"
               :id="`select-worker-${props.row.firstName}`"
+              :for="`select-worker-${props.row.firstName}`"
             />
           </template>
         </q-td>
diff --git a/src/components/upload-file/FormCitizen.vue b/src/components/upload-file/FormCitizen.vue
index 5d35209e..06c97e6d 100644
--- a/src/components/upload-file/FormCitizen.vue
+++ b/src/components/upload-file/FormCitizen.vue
@@ -188,6 +188,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :label="$t('customer.form.citizenId')"
             for="input-citizen-id"
             v-model="citizenId"
+            :rules="[(val: string) => !!val || $t('form.error.required')]"
           />
 
           <DatePicker
@@ -221,6 +222,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :label="$t('customer.form.religion')"
             for="input-religion"
             v-model="religion"
+            :rules="[(val: string) => !!val || $t('form.error.required')]"
           />
           <q-select
             outlined
@@ -305,6 +307,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :label="$t('customer.form.firstName')"
             for="input-first-name"
             v-model="firstName"
+            :rules="[(val: string) => !!val || $t('form.error.required')]"
           />
 
           <q-input
@@ -316,6 +319,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :label="$t('customer.form.lastName')"
             for="input-last-name"
             v-model="lastName"
+            :rules="[(val: string) => !!val || $t('form.error.required')]"
           />
 
           <q-input
diff --git a/src/components/upload-file/OcrDialog.vue b/src/components/upload-file/OcrDialog.vue
index 426196bd..e6d35a9e 100644
--- a/src/components/upload-file/OcrDialog.vue
+++ b/src/components/upload-file/OcrDialog.vue
@@ -22,6 +22,7 @@ type Props = {
   autoSave?: boolean;
   data?: Data;
   hideBtn?: boolean;
+  disabledSubmit?: boolean;
 };
 
 type HandleProps = {
@@ -109,6 +110,7 @@ async function change(e: Event) {
     hide-delete
     hide-btn
     edit
+    :disabledSubmit
     :title
     :is-edit
     :readonly
diff --git a/src/components/upload-file/UploadFile.vue b/src/components/upload-file/UploadFile.vue
index 1e5bd73a..13d1584e 100644
--- a/src/components/upload-file/UploadFile.vue
+++ b/src/components/upload-file/UploadFile.vue
@@ -31,7 +31,7 @@ const currentIndexDropdownList = ref(0);
 
 const props = withDefaults(
   defineProps<{
-    treeFile: { label: string; file: { label: string }[] }[];
+    treeFile?: { label: string; file: { label: string }[] }[];
     readonly?: boolean;
     dropdownList?: { label: string; value: string }[];
     hideAction?: boolean;
diff --git a/src/components/upload-file/UploadFileCard.vue b/src/components/upload-file/UploadFileCard.vue
index 2e269d8b..b299c51d 100644
--- a/src/components/upload-file/UploadFileCard.vue
+++ b/src/components/upload-file/UploadFileCard.vue
@@ -54,10 +54,11 @@ onMounted(() => {
     @click="$emit('click')"
   >
     <q-icon :name="icon" size="lg" :style="`color: ${color}`" />
-    <article class="col column q-pl-md">
-      <span class="ellipsis full-width">
+    <div class="col column q-pl-md">
+      <div class="ellipsis full-width" style="max-width: 65vw !important">
         {{ name }}
-      </span>
+      </div>
+
       <span class="text-caption app-text-muted-2">
         {{
           uploading.loaded
@@ -79,7 +80,7 @@ onMounted(() => {
         />
         {{ idle ? `Pending` : progress !== 1 ? `Uploading...` : 'Completed' }}
       </span>
-    </article>
+    </div>
     <q-btn
       v-if="closeable"
       icon="mdi-close"
diff --git a/src/components/upload-file/UploadFileGroup.vue b/src/components/upload-file/UploadFileGroup.vue
index ab547b58..399d5192 100644
--- a/src/components/upload-file/UploadFileGroup.vue
+++ b/src/components/upload-file/UploadFileGroup.vue
@@ -45,9 +45,9 @@ const props = withDefaults(
     readonly?: boolean;
     showTitle?: boolean;
     ocr?: (
-      group: any,
+      group: string,
       file: File,
-    ) => void | Promise<{
+    ) => Promise<{
       status: boolean;
       group: string;
       meta: { name: string; value: string }[];
@@ -123,7 +123,7 @@ async function change(e: Event) {
         ...obj.value,
         {
           _meta: structuredClone(toRaw(selectedMenu.value)._meta || {}),
-          group: selectedMenu.value?.value,
+          group: selectedMenu.value?.group,
           file: renamedFile,
         },
       ];
@@ -168,8 +168,8 @@ async function change(e: Event) {
           type: map['doc_type'],
           number: map['doc_number'],
           gender: map['sex'],
-          firstName: map['first_name'],
-          lastName: map['last_name'],
+          firstName: map['last_name'],
+          lastName: map['first_name'],
           issueDate: map['issue_date'],
           expireDate: map['expire_date'],
           issuePlace: map['nationality'],
@@ -327,7 +327,7 @@ defineEmits<{
               :rows="
                 obj
                   .filter((v) => {
-                    if (!autoSave && v.group !== selectedMenu?.value) {
+                    if (!autoSave && v.group !== selectedMenu?.group) {
                       return false;
                     }
                     return true;
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 7bd226ac..eb2b877b 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -198,3 +198,10 @@ i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-i
   .q-focus-helper {
   visibility: hidden;
 }
+
+.clear-btn {
+  opacity: 0.6;
+  &:hover {
+    opacity: 1;
+  }
+}
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index fd4edc0e..3379ba60 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -4,7 +4,7 @@ export default {
     save: 'Save',
     open: 'Open',
     close: 'Close',
-    edit: 'Edit',
+    edit: 'Edit{text}',
     cancel: 'Cancel',
     back: 'Back',
     undo: 'Undo',
@@ -31,6 +31,7 @@ export default {
     displayField: 'Display Fields',
     order: 'Order',
     name: '{msg} Name',
+    nameEN: 'Name (English)',
     fullName: 'Full Name',
     detail: '{msg} Detail',
     remark: '{msg} Remark',
@@ -160,6 +161,7 @@ export default {
     documentStatus: 'Document Status',
     advanceSearch: 'Advance Search',
     totalPeople: '{meg} people',
+    price: 'Price {price} Baht',
   },
 
   menu: {
@@ -202,12 +204,14 @@ export default {
       title: 'Manage',
       branch: 'Branch',
       personnel: 'Personnel',
+      group: 'Group',
       productService: 'Product and Service',
       workflow: 'Workflow',
       property: 'Property',
       customer: 'Customer',
       mainData: 'Main Data',
       agencies: 'Agencies',
+      businessType: 'Business Type',
     },
 
     sales: {
@@ -254,7 +258,8 @@ export default {
 
     manual: {
       title: 'Manual',
-      usage: 'การใช้งาน',
+      usage: 'Usage',
+      troubleshooting: 'Troubleshooting',
     },
   },
 
@@ -336,7 +341,7 @@ export default {
       requireLength: 'Please enter {msg} character',
       branchNameField: "Only letters, numbers, or the characters . , - ' &.",
       branchNameENField:
-        "Only English letters, numbers, or the characters . , - ' &.",
+        "Only English letters, numbers, or the characters . , - ' &. ( )",
       passportFormat: 'Please enter the passport number in the correct format.',
     },
     warning: {
@@ -455,7 +460,7 @@ export default {
       regisNo: 'Registration Number',
       startDate: 'Start Date',
       retireDate: 'Retire Date',
-      responsibleArea: 'Responsibel Area',
+      responsibleArea: 'Responsible Area',
       discount: 'Discount Condition',
       sourceNationality: 'Source Nationality',
       importNationality: 'Import Nationality',
@@ -472,6 +477,7 @@ export default {
       blacklist: 'Black list',
       contactName: 'Contact Person',
       contactTel: 'Contact Number',
+      addressForeign: 'Use foreign address',
     },
   },
   customer: {
@@ -487,7 +493,7 @@ export default {
     },
     employer: 'Employer',
     employerLegalEntity: 'Legal Entity',
-    employerNaturalPerson: 'Natrual Person',
+    employerNaturalPerson: 'Natural Person',
     employerType: 'Employer Type',
     employee: 'Employee',
     form: {
@@ -497,11 +503,12 @@ export default {
       },
 
       prefix: {
-        mr: 'Mr.',
-        mrs: 'Mrs.',
-        miss: 'Miss.',
+        mr: 'MR.',
+        mrs: 'MRS.',
+        miss: 'MISS.',
       },
 
+      taxpayyerNo: 'Taxpayer Identification Number',
       citizenId: 'Citizen ID',
       religion: 'Religion',
       issueDate: 'Issue Date',
@@ -617,7 +624,7 @@ export default {
       placeOfBirth: 'Place of Birth',
       countryOfbirth: 'Country of Birth',
       issueCountry: 'Issue Country',
-      entryCount: 'Entry Count',
+      entryCount: 'Number of Days in the Country',
       employerSelect: {
         branchName: 'Branch Name',
         customerName: 'Employer Name',
@@ -767,10 +774,13 @@ export default {
   },
 
   quotation: {
+    ownOnly: 'View Own Quotation Only',
     quotationDate: 'Quotation Date',
     seller: 'Seller',
     paymentChannels: 'Payment Channels',
     channelsThat: 'Channels That',
+    refNo: 'Reference Number',
+    bankAccount: 'Bank Account',
     bankAccountNumber: 'Bank Account Number',
     bankAccountName: 'Bank Account Name',
     inTheNameOf: 'In The Name Of',
@@ -922,6 +932,7 @@ export default {
     contactName: 'Contact Person',
     contactTel: 'Contact Number',
     bankInfo: 'Bank Information',
+    attachment: 'Attachment',
   },
 
   requestList: {
@@ -1116,7 +1127,7 @@ export default {
       oneOrMoreBranchMissing:
         'One or more branch cannot be delete and is missing.',
       cantMakeHQAndBranchSameTime:
-        'Cannot make this as headquaters and branch at the same time.',
+        'Cannot make this as headquarters and branch at the same time.',
       unknowHowToVerify: 'Unknown how to verify identity.',
       noPermission:
         'You do not have permission to access or perform with this resource.',
@@ -1223,6 +1234,9 @@ export default {
       taskListNotPending: 'One or more task is not pending.',
       reqNotMet: 'Not Match',
       systemError: 'A system error occurred.',
+      taskOrderInvalid: 'Please select the product and the organization.',
+
+      flowAccountProductIdNotFound: 'Product not found in flow account',
     },
   },
 
@@ -1507,4 +1521,11 @@ export default {
     last90Days: 'Last 90 Days',
     customDateRange: 'Custom Date Range',
   },
+
+  businessType: {
+    title: 'Business Type',
+    caption: 'Manage Business Type',
+    name: 'Business Type Name',
+    nameEn: 'Business Type Name (English)',
+  },
 };
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index fe0045bb..921e25fd 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -4,7 +4,7 @@ export default {
     save: 'บันทึก',
     open: 'เปิด',
     close: 'ปิด',
-    edit: 'แก้ไข',
+    edit: 'แก้ไข{text}',
     cancel: 'ยกเลิก',
     back: 'ย้อนกลับ',
     undo: 'ย้อนกลับ',
@@ -31,6 +31,7 @@ export default {
     displayField: 'ฟิลด์แสดงผล',
     order: 'ลำดับ',
     name: 'ชื่อ{msg}',
+    nameEN: 'ชื่อ (ภาษาอังกฤษ)',
     fullName: 'ชื่อ-สกุล',
     detail: 'รายละเอียด{msg}',
     remark: 'หมายเหตุ{msg}',
@@ -160,6 +161,7 @@ export default {
     documentStatus: 'สถานะเอกสาร',
     advanceSearch: 'ค้นหาขั้นสูง',
     totalPeople: '{meg} คน',
+    price: 'ราคา {price} บาท',
   },
 
   menu: {
@@ -202,12 +204,14 @@ export default {
       title: 'จัดการ',
       branch: 'สาขา',
       personnel: 'บุคลากร',
+      group: 'กลุ่ม',
       productService: 'สินค้าและบริการ',
       workflow: 'ขั้นตอนการทำงาน',
       property: 'คุณสมบัติ',
       customer: 'ลูกค้า',
       mainData: 'ข้อมูลหลัก',
       agencies: 'หน่วยงาน',
+      businessType: 'ประเภทกิจการ',
     },
 
     sales: {
@@ -255,6 +259,7 @@ export default {
     manual: {
       title: 'คู่มือ',
       usage: 'การใช้งาน',
+      troubleshooting: 'การแก้ปัญหา',
     },
   },
 
@@ -333,7 +338,7 @@ export default {
       letterAndNumOnly: 'โปรดใช้เฉพาะ _ ตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้น',
       numOnly: 'โปรดใช้เฉพาะตัวเลขเท่านั้น',
       requireLength: 'กรุณากรอกให้ครบ {msg} หลัก',
-      branchNameField: "โปรดใช้ตัวอักษร ตัวเลข หรือ . , - ' & เท่านั้น",
+      branchNameField: "โปรดใช้ตัวอักษร ตัวเลข หรือ . , - ' ( ) & เท่านั้น",
       branchNameENField:
         "โปรดใช้ตัวอักษรภาษาอังกฤษ ตัวเลข หรือ . , - ' & เท่านั้น",
       passportFormat: 'กรุณากรอกหมายเลขพาสปอร์ตให้ถูกต้องตามรูปแบบ',
@@ -468,6 +473,7 @@ export default {
       blacklist: 'แบล็คลิสต์',
       contactName: 'ชื่อผู้ติดต่อ',
       contactTel: 'เบอร์โทรศัพท์ผู้ติดต่อ',
+      addressForeign: 'ใช้ที่อยู่ต่างประเทศ',
     },
   },
   customer: {
@@ -494,15 +500,16 @@ export default {
       },
 
       prefix: {
-        mr: 'Mr.',
-        mrs: 'Mrs.',
-        miss: 'Miss.',
+        mr: 'นาย',
+        mrs: 'นาง',
+        miss: 'นางสาว',
       },
 
       citizenId: 'บัตรประจำตัวประชาชน',
       religion: 'ศาสนา',
       issueDate: 'วันที่ออกหนังสือ',
       passportExpiryDate: 'วันหiมดอายุหนังสือเดินทาง',
+      taxpayyerNo: 'เลขที่ประจำตัวผู้เสียภาษี',
 
       ownerName: 'ชื่อนายจ้าง',
       firstName: 'ชื่อ ',
@@ -586,7 +593,7 @@ export default {
         family: 'ข้อมูลครอบครัว',
       },
       workerStatus: 'สถานะคนงาน',
-      previousPassportNumber: 'หมายเลขอันเก่าหนังสือเดินทาง',
+      previousPassportNumber: 'หมายเลขหนังสือเดินทางเล่มเก่า',
       employerBranch: 'สาขานายจ้าง',
       employeeCode: 'รหัสลูกจ้าง',
       nrcNo: 'เลขบัตรประจำตัวคนซึ่งไม่มีสัญชาติไทย (N.R.C No.)',
@@ -619,7 +626,7 @@ export default {
       placeOfBirth: 'สถานที่เกิด',
       countryOfbirth: 'ประเทศที่เกิด',
       issueCountry: 'ประเทศที่ออก',
-      entryCount: 'จำนวนที่เข้าประเทศ',
+      entryCount: 'จำนวนวันที่เข้าประเทศ',
       employerSelect: {
         branchName: 'ชื่อสาขา',
         customerName: 'ชื่อนายจ้าง',
@@ -647,7 +654,7 @@ export default {
       permitIssuedAt: 'สถานที่ออกใบอนุญาต',
       permitIssueDate: 'วันที่ออกใบอนุญาตทำงาน',
       permitExpireDate: 'วันที่หมดอายุใบอนุญาตทำงาน',
-      identityNo: 'เลขประจำตัวคนต่างด้าว (13หลัก)',
+      identityNo: 'เลขประจำตัวคนต่างด้าว (13 หลัก)',
     },
     formFamily: {
       citizenId:
@@ -765,10 +772,13 @@ export default {
   },
 
   quotation: {
+    ownOnly: 'เห็นเฉพาะใบเสนอราคาของตัวเอง',
     quotationDate: 'วันที่ใบเสนอราคา',
     seller: 'ผู้ขาย',
     paymentChannels: 'ช่องทางชำระเงิน',
     channelsThat: 'ช่องทางที่',
+    refNo: 'เลขที่อ้างอิง',
+    bankAccount: 'บัญชีธนาคาร',
     bankAccountNumber: 'เลขบัญชีธนาคาร',
     bankAccountName: 'ชื่อบัญชี',
     inTheNameOf: 'ในนาม',
@@ -793,7 +803,7 @@ export default {
     branch: 'สาขาที่ออกใบเสนอราคา',
     branchVirtual: 'จุดรับบริการที่ออกใบเสนอราคา',
     customer: 'ลูกค้า',
-    newCustomer: 'ลูกค้าใหม่',
+    newCustomer: 'แรงงานใหม่',
     employeeList: 'รายชื่อแรงงาน',
     employee: 'แรงงาน',
     employeeName: 'ชื่อ-นามสกุล แรงงาน',
@@ -919,6 +929,7 @@ export default {
     contactName: 'ชื่อผู้ติดต่อ',
     contactTel: 'เบอร์โทรผู้ติดต่อ',
     bankInfo: 'ข้อมูลธนาคาร',
+    attachment: 'เอกสารเพิ่มเติม',
   },
 
   requestList: {
@@ -1209,6 +1220,8 @@ export default {
         'มีงานหนึ่งงานหรือมากกว่าที่ไม่อยู่ในสถานะรอดำเนินการ',
       reqNotMet: 'ไม่ตรงกัน',
       systemError: 'ระบบเกิดข้อผิดพลาด',
+      taskOrderInvalid: 'โปรดเลือก สินค้าเเละสาขา',
+      flowAccountProductIdNotFound: 'ไม่พบสินค้าใน flow account',
     },
   },
 
@@ -1495,4 +1508,11 @@ export default {
     last90Days: '90 วันที่ผ่านมา',
     customDateRange: 'กำหนดช่วงวันที่เอง',
   },
+
+  businessType: {
+    title: 'ประเภทกิจการ',
+    caption: 'จัดการประเภทกิจการ',
+    name: 'ชื่อประเภทกิจการ',
+    nameEn: 'ชื่อประเภทกิจการ (ภาษาอังกฤษ)',
+  },
 };
diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index c1b01436..d7a70d33 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -7,7 +7,7 @@ import useMyBranch from 'stores/my-branch';
 import { getUserId, getRole } from 'src/services/keycloak';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { isRoleInclude } from 'src/stores/utils';
+import { canAccess } from 'src/stores/utils';
 
 type Menu = {
   label: string;
@@ -71,82 +71,50 @@ function initMenu() {
         {
           label: 'branch',
           route: '/branch-management',
-          hidden: !isRoleInclude([
-            'system',
-            'head_of_admin',
-            'admin',
-            'branch_manager',
-            'head_of_accountant',
-          ]),
+          hidden: !canAccess('branch'),
         },
         {
           label: 'personnel',
           route: '/personnel-management',
-          hidden: !isRoleInclude([
-            'owner',
-            'system',
-            'head_of_admin',
-            'admin',
-            'branch_manager',
-          ]),
+          hidden: !canAccess('personnel'),
+        },
+        {
+          label: 'group',
+          route: '/group-management',
+          hidden: !canAccess('personnel'),
         },
         {
           label: 'workflow',
           route: '/workflow',
-          hidden: !isRoleInclude(['system', 'head_of_admin', 'admin']),
+          hidden: !canAccess('workflow'),
         },
         {
           label: 'property',
           route: '/property',
-          hidden: !isRoleInclude(['system', 'head_of_admin', 'admin']),
+          hidden: !canAccess('workflow'),
+        },
+        {
+          label: 'businessType',
+          route: '/business-type',
         },
         {
           label: 'productService',
           route: '/product-service',
-          hidden: !isRoleInclude([
-            'system',
-            'head_of_admin',
-            'admin',
-            'branch_manager',
-            'head_of_accountant',
-            'head_of_sale',
-            'sale',
-          ]),
         },
         {
           label: 'customer',
           route: '/customer-management',
-          hidden: !isRoleInclude([
-            'system',
-            'head_of_admin',
-            'admin',
-            'branch_manager',
-            'head_of_accountant',
-            'accountant',
-            'head_of_sale',
-            'sale',
-          ]),
+          hidden: !canAccess('customer'),
         },
         {
           label: 'agencies',
           route: '/agencies-management',
-          hidden: !isRoleInclude(['system', 'head_of_admin', 'admin']),
         },
       ],
     },
     {
       label: 'menu.sales',
       icon: 'mdi-store-settings-outline',
-      hidden: !isRoleInclude([
-        'system',
-        'head_of_admin',
-        'admin',
-        'branch_manager',
-        'head_of_accountant',
-        'accountant',
-        'head_of_sale',
-        'sale',
-      ]),
       children: [
         { label: 'quotation', route: '/quotation' },
         { label: 'invoice', route: '/invoice' },
@@ -169,16 +137,6 @@ function initMenu() {
       label: 'menu.account',
       icon: 'mdi-bank-outline',
       disabled: false,
-      hidden: !isRoleInclude([
-        'system',
-        'head_of_admin',
-        'admin',
-        'branch_manager',
-        'head_of_accountant',
-        'accountant',
-        'head_of_sale',
-        'sale',
-      ]),
       children: [
         { label: 'receipt', route: '/receipt' },
         { label: 'creditNote', route: '/credit-note' },
@@ -200,10 +158,13 @@ function initMenu() {
     {
       label: 'menu.overall',
       icon: 'mdi-monitor-dashboard',
-      hidden: !isRoleInclude(['system', 'head_of_admin', 'admin', 'executive']),
       children: [
         { label: 'report', route: '/report' },
-        { label: 'dashboard', route: '/dash-board' },
+        {
+          label: 'dashboard',
+          route: '/dash-board',
+          hidden: !canAccess('dashBoard'),
+        },
       ],
     },
 
@@ -215,6 +176,10 @@ function initMenu() {
           label: 'usage',
           route: '/manual',
         },
+        {
+          label: 'troubleshooting',
+          route: '/troubleshooting',
+        },
       ],
     },
   ];
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index c09effed..29e106bc 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -2,7 +2,7 @@
 import { ref, onMounted, computed, reactive } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
-import { getUserId, getUsername, logout, getRole } from 'src/services/keycloak';
+import { getUserId, getUsername, getName, logout, getRole } from 'src/services/keycloak';
 import { Icon } from '@iconify/vue';
 import { useI18n } from 'vue-i18n';
 import moment from 'moment';
@@ -39,7 +39,7 @@ const configStore = useConfigStore();
 const { data: notificationData } = storeToRefs(notificationStore);
 
 const { visible } = storeToRefs(loaderStore);
-const { t } = useI18n({ useScope: 'global' });
+const { t, locale } = useI18n({ useScope: 'global' });
 const userStore = useUserStore();
 
 const canvasModal = ref(false);
@@ -52,8 +52,14 @@ const unread = computed<number>(
 );
 const userImage = ref<string>();
 const userGender = ref('');
+const userName = ref({ th: '', en: '' });
 const canvasRef = ref();
 
+const displayName = computed(() => {
+  if (!userName.value.th && !userName.value.en) return getName() || 'Guest';
+  return locale.value === 'eng' ? userName.value.en : userName.value.th;
+});
+
 const language: {
   value: Lang;
   label: string;
@@ -161,9 +167,14 @@ onMounted(async () => {
   if (user === 'admin') return;
   if (uid) {
     const res = await userStore.fetchById(uid);
-    if (res && res.gender) {
-      userGender.value = res.gender;
-      userImage.value = `${baseUrl}/user/${uid}/profile-image/${res.selectedImage}`;
+    if (res) {
+      if (res.gender) {
+        userGender.value = res.gender;
+        userImage.value = `${baseUrl}/user/${uid}/profile-image/${res.selectedImage}`;
+      }
+      // เก็บชื่อทั้งสองภาษา
+      userName.value.th = `${res.firstName || ''} ${res.lastName || ''}`.trim();
+      userName.value.en = `${res.firstNameEN || ''} ${res.lastNameEN || ''}`.trim();
     }
   }
 });
@@ -484,6 +495,7 @@ onMounted(async () => {
             <!-- User -->
             <ProfileMenu
               id="btn-profile-menu"
+              :user-name="displayName"
               @logout="doLogout"
               @edit-personal-info="console.log('edit')"
               @signature="
diff --git a/src/layouts/ProfileMenu.vue b/src/layouts/ProfileMenu.vue
index eb240abd..79429736 100644
--- a/src/layouts/ProfileMenu.vue
+++ b/src/layouts/ProfileMenu.vue
@@ -12,6 +12,7 @@ const filterRole = ref<string[]>();
 defineProps<{
   userImage?: string;
   gender?: string;
+  userName?: string;
 }>();
 
 const inputFile = document.createElement('input');
@@ -147,9 +148,9 @@ onMounted(async () => {
             class="text-weight-bold ellipsis"
             style="max-width: 9vw"
           >
-            {{ getName() }}
+            {{ userName || getName() }}
             <q-tooltip>
-              {{ getName() }}
+              {{ userName || getName() }}
             </q-tooltip>
           </span>
           <span
@@ -234,12 +235,12 @@ onMounted(async () => {
             style="margin-top: 58px"
           >
             <span v-if="isLoggedIn()">
-              {{ getName() }}
+              {{ userName || getName() }}
             </span>
             <span v-else>{{ 'Guest' }}</span>
             <q-tooltip>
               <span v-if="isLoggedIn()">
-                {{ getName() }}
+                {{ userName || getName() }}
               </span>
               <span v-else>{{ 'Guest' }}</span>
             </q-tooltip>
diff --git a/src/pages/00_manual/MainPage.vue b/src/pages/00_manual/MainPage.vue
index adcb668f..33a19ebe 100644
--- a/src/pages/00_manual/MainPage.vue
+++ b/src/pages/00_manual/MainPage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // NOTE: Library
 import { storeToRefs } from 'pinia';
-import { onMounted } from 'vue';
+import { onMounted, watch } from 'vue';
 
 // NOTE:  Components
 
@@ -10,22 +10,44 @@ import { onMounted } from 'vue';
 import { useManualStore } from 'src/stores/manual';
 import { useNavigator } from 'src/stores/navigator';
 import { Icon } from '@iconify/vue/dist/iconify.js';
+import { useRoute, useRouter } from 'vue-router';
 
 // NOTE: Variable
+const route = useRoute();
+const router = useRouter();
 const manualStore = useManualStore();
 const navigatorStore = useNavigator();
-const { dataManual } = storeToRefs(manualStore);
-
-async function fetchManual() {
-  const res = await manualStore.getManual();
-  dataManual.value = res ? res : [];
-}
+const { dataManual, dataTroubleshooting } = storeToRefs(manualStore);
 
 onMounted(async () => {
   navigatorStore.current.title = 'menu.manual.title';
   navigatorStore.current.path = [{ text: '' }];
-  await fetchManual();
 });
+
+watch(
+  () => route.name,
+  async () => {
+    if (route.name === 'Manual') {
+      const res = await manualStore.getManual();
+      dataManual.value = res ? res : [];
+    }
+    if (route.name === 'Troubleshooting') {
+      const res = await manualStore.getTroubleshooting();
+      dataTroubleshooting.value = res ? res : [];
+      if (
+        res.length &&
+        res.length === 1 &&
+        res[0].page &&
+        res[0].page.length === 1
+      ) {
+        router.replace(
+          `/troubleshooting/${res[0].category}/${res[0].page[0].name}`,
+        );
+      }
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
@@ -34,7 +56,7 @@ onMounted(async () => {
   >
     <section class="scroll q-gutter-y-sm">
       <q-expansion-item
-        v-for="v in dataManual"
+        v-for="v in $route.name === 'Manual' ? dataManual : dataTroubleshooting"
         :key="v.labelEN"
         :content-inset-level="0.5"
         class="rounded overflow-hidden bordered"
@@ -58,7 +80,11 @@ onMounted(async () => {
           clickable
           dense
           class="dot items-center rounded q-my-xs"
-          :to="`/manual/${v.category}/${x.name}`"
+          :to="
+            $route.name === 'Manual'
+              ? `/manual/${v.category}/${x.name}`
+              : `/troubleshooting/${v.category}/${x.name}`
+          "
         >
           <Icon
             v-if="!!x.icon"
diff --git a/src/pages/00_manual/ViewPage.vue b/src/pages/00_manual/ViewPage.vue
index 35f2d6d6..eabccd6f 100644
--- a/src/pages/00_manual/ViewPage.vue
+++ b/src/pages/00_manual/ViewPage.vue
@@ -56,14 +56,28 @@ onUnmounted(() => {
 
 async function getContent() {
   if (!category.value || !page.value) return;
-  const res = await manualStore.getManualByPage({
-    category: category.value,
-    pageName: page.value,
-  });
-  if (res && res.ok) {
-    const text = await res.text();
-    content.value = text;
-    contentParsed.value = md.parse(text, {});
+
+  if (ROUTE.name === 'ManualView') {
+    const res = await manualStore.getManualByPage({
+      category: category.value,
+      pageName: page.value,
+    });
+    if (res && res.ok) {
+      const text = await res.text();
+      content.value = text;
+      contentParsed.value = md.parse(text, {});
+    }
+  }
+  if (ROUTE.name === 'TroubleshootingView') {
+    const res = await manualStore.getTroubleshootingByPage({
+      category: category.value,
+      pageName: page.value,
+    });
+    if (res && res.ok) {
+      const text = await res.text();
+      content.value = text;
+      contentParsed.value = md.parse(text, {});
+    }
   }
 }
 
@@ -102,8 +116,8 @@ async function scrollTo(id: string) {
 
 <template>
   <main
-    class="full-height q-gutter-sm"
-    :class="{ 'row reverse': $q.screen.gt.xs, column: $q.screen.xs }"
+    class="full-height q-gutter-sm no-wrap"
+    :class="{ column: !toc && $q.screen.lt.md, 'row reverse': $q.screen.gt.sm }"
   >
     <section
       v-if="toc"
@@ -154,7 +168,7 @@ async function scrollTo(id: string) {
       </q-list>
     </section>
 
-    <section v-if="!toc && $q.screen.xs">
+    <section v-if="!toc && $q.screen.lt.md">
       <q-btn
         dense
         class="full-width text-capitalize"
@@ -167,7 +181,7 @@ async function scrollTo(id: string) {
     </section>
 
     <section
-      v-if="content || (!toc && $q.screen.xs)"
+      v-if="$q.screen.gt.xs || (!toc && $q.screen.xs)"
       ref="wrapper"
       class="markdown col scroll full-height rounded"
     >
@@ -184,7 +198,9 @@ async function scrollTo(id: string) {
           md.render(
             content.replaceAll(
               'assets/',
-              `${baseUrl}/manual/${category}/assets/`,
+              $route.name === 'ManualView'
+                ? `${baseUrl}/manual/${category}/assets/`
+                : `${baseUrl}/troubleshooting/${category}/assets/`,
             ),
           )
         "
@@ -312,7 +328,31 @@ async function scrollTo(id: string) {
   padding: 0px 16px;
 }
 
+.markdown :deep(h4) {
+  text-align: left;
+  margin-block: 0;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 0px 16px;
+}
+
 .markdown :deep(video) {
   width: 100%;
 }
+
+.markdown :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1.5rem;
+}
+
+.markdown :deep(:where(table th)) {
+  background: var(--surface-2);
+  border: 1px solid var(--border-color);
+}
+
+.markdown :deep(:where(table td, table th)) {
+  border: 1px solid var(--border-color);
+  padding: 0.25rem 1rem;
+}
 </style>
diff --git a/src/pages/00_notification/MainPage.vue b/src/pages/00_notification/MainPage.vue
index a3506813..bc4cee01 100644
--- a/src/pages/00_notification/MainPage.vue
+++ b/src/pages/00_notification/MainPage.vue
@@ -94,21 +94,22 @@ onMounted(async () => {
 <template>
   <main class="column full-height no-wrap">
     <div class="surface-1 col bordered rounded column">
-      <div class="q-px-lg q-py-xs row items-center">
+      <div class="q-py-xs row items-center" style="padding-inline: 38px">
         <q-checkbox
           size="xs"
-          :model-value="selectedNoti.length === noti.length"
-          class="q-px-sm"
+          :model-value="noti.length > 0 && selectedNoti.length === noti.length"
+          :disable="noti.length === 0"
           @click="toggleSelection('', true)"
         />
+        <q-separator vertical inset spaced="md" />
         <q-btn
           v-if="selectedNoti.length === 0"
           icon="mdi-refresh"
           rounded
           flat
           dense
-          size="xs"
-          class="app-text-muted-2 q-ml-sm q-mt-xs"
+          size="sm"
+          class="app-text-muted-2 q-mt-xs"
           @click="async () => await fetchNoti()"
         >
           <q-tooltip>Refresh</q-tooltip>
@@ -119,8 +120,8 @@ onMounted(async () => {
           rounded
           flat
           dense
-          size="xs"
-          class="app-text-muted-2 q-ml-sm"
+          size="sm"
+          class="app-text-muted-2"
           @click="async () => await deleteNoti()"
         >
           <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
@@ -131,7 +132,7 @@ onMounted(async () => {
           rounded
           flat
           dense
-          size="xs"
+          size="sm"
           class="app-text-muted-2 q-mx-sm"
           @click="async () => await markAsRead()"
         >
@@ -177,7 +178,13 @@ onMounted(async () => {
             <q-badge
               rounded
               class="q-ml-md"
-              style="background: hsl(var(--info-bg))"
+              :color="
+                (tab.value === 'all'
+                  ? noti.length
+                  : noti.filter((v) => !v.read).length) > 0
+                  ? 'info'
+                  : 'grey'
+              "
             >
               {{
                 tab.value === 'all'
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index 83ddc3c6..35428b65 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -10,7 +10,7 @@ import type { QTableProps, QTableSlots } from 'quasar';
 import { resetScrollBar } from 'src/stores/utils';
 import useBranchStore from 'stores/branch';
 import useFlowStore from 'stores/flow';
-import { isRoleInclude } from 'stores/utils';
+import { isRoleInclude, canAccess } from 'stores/utils';
 import {
   BranchWithChildren,
   BranchCreate,
@@ -791,6 +791,8 @@ async function onSubmit(submitSelectedItem?: boolean) {
     );
 
     if (!res) return;
+
+    formType.value = 'view';
     formData.value.codeHeadOffice = formData.value.code = res.code;
     imageUrl.value = `${baseUrl}/branch/${res.id}/image/${res.selectedImage}`;
 
@@ -865,7 +867,9 @@ async function onSubmit(submitSelectedItem?: boolean) {
         actionText: t('dialog.action.ok'),
         persistent: true,
         title: t('form.warning.title'),
-        cancel: () => {},
+        cancel: () => {
+          formType.value = 'create';
+        },
         action: async () => {
           await createBranch();
         },
@@ -1046,7 +1050,7 @@ watch(currentHq, () => {
                     {{ $t('branch.allBranch') }}
                   </div>
                   <q-btn
-                    v-if="isRoleInclude(['head_of_admin', 'admin', 'system'])"
+                    v-if="isRoleInclude(['system'])"
                     round
                     flat
                     size="md"
@@ -1070,6 +1074,7 @@ watch(currentHq, () => {
                 <div class="col full-width scroll">
                   <div class="q-pa-md">
                     <TreeComponent
+                      :hide-create="!canAccess('branch', 'create')"
                       v-model:nodes="treeData"
                       v-model:expanded-tree="expandedTree"
                       node-key="id"
@@ -1557,8 +1562,18 @@ watch(currentHq, () => {
                         </q-td>
                         <q-td>
                           <KebabAction
+                            v-if="
+                              !currentHq.id
+                                ? canAccess('branch', 'create')
+                                : true
+                            "
                             :status="props.row.status"
                             :idName="props.row.name"
+                            :hide-delete="
+                              !currentHq.id
+                                ? !isRoleInclude(['system'])
+                                : !canAccess('branch', 'create')
+                            "
                             @view="
                               if (props.row.isHeadOffice) {
                                 triggerEdit(
@@ -1698,8 +1713,18 @@ watch(currentHq, () => {
                         >
                           <template v-slot:action>
                             <KebabAction
+                              v-if="
+                                !currentHq.id
+                                  ? canAccess('branch', 'create')
+                                  : true
+                              "
                               :status="props.row.status"
                               :idName="props.row.name"
+                              :hide-delete="
+                                !currentHq.id
+                                  ? !isRoleInclude(['system'])
+                                  : !canAccess('branch', 'create')
+                              "
                               @view="
                                 if (props.row.isHeadOffice) {
                                   triggerEdit(
@@ -2247,13 +2272,22 @@ watch(currentHq, () => {
                 @click="drawerEdit()"
                 type="button"
               />
-              <DeleteButton
-                v-if="formType !== 'edit'"
-                id="btn-info-basic-delete"
-                icon-only
-                @click="triggerDelete(currentEdit.id)"
-                type="button"
-              />
+
+              <template
+                v-if="
+                  formType !== 'edit' && formTypeBranch === 'headOffice'
+                    ? isRoleInclude(['system'])
+                    : canAccess('branch', 'create')
+                "
+              >
+                <DeleteButton
+                  v-if="formType !== 'edit'"
+                  id="btn-info-basic-delete"
+                  icon-only
+                  @click="triggerDelete(currentEdit.id)"
+                  type="button"
+                />
+              </template>
             </div>
           </div>
           <div
diff --git a/src/pages/02_group-management/MainPage.vue b/src/pages/02_group-management/MainPage.vue
new file mode 100644
index 00000000..f4b46a26
--- /dev/null
+++ b/src/pages/02_group-management/MainPage.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { getInstance } from 'src/services/keycloak';
+import { useNavigator } from 'src/stores/navigator';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import { initLang } from 'src/utils/ui';
+
+const $q = useQuasar();
+const { locale } = useI18n();
+const navigatorStore = useNavigator();
+const EDM_SERVICE = import.meta.env.VITE_EDM_MICRO_FRONTEND_URL;
+const kc = getInstance();
+const at = ref(kc.token);
+const rt = ref(kc.refreshToken);
+const iframe = ref<InstanceType<typeof HTMLIFrameElement>>();
+
+function sendMessage() {
+  iframe?.value?.contentWindow?.postMessage(
+    {
+      i18n: locale.value,
+      darkMode: $q.dark.isActive,
+    },
+    '*',
+  );
+}
+
+onMounted(() => {
+  initLang();
+  currentLocale.value = locale.value;
+  navigatorStore.current.title = 'menu.dms';
+  navigatorStore.current.path = [
+    {
+      text: '',
+      i18n: true,
+      handler: () => {},
+    },
+  ];
+  sendMessage();
+});
+
+watch(
+  () => kc.token,
+  () => {
+    at.value = kc.token;
+    rt.value = kc.refreshToken;
+  },
+);
+
+watch([locale, $q.dark], () => {
+  sendMessage();
+});
+
+const currentLocale = ref(locale.value);
+</script>
+
+<template>
+  <iframe
+    ref="iframe"
+    :src="`${EDM_SERVICE}/user?at=${at}&rt=${rt}&lang=${currentLocale}`"
+    frameborder="0"
+    class="full-width full-height rounded"
+    allowtransparency="true"
+  ></iframe>
+</template>
+
+<style scoped></style>
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index b3ea5058..4c1676fc 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -99,7 +99,7 @@ const userFileList = ref<{ name: string; url: string }[]>([]);
 const typeStats = ref<UserTypeStats>();
 const userStats = ref<BranchUserStats[]>();
 
-const searchDate = ref<Date[]>([]);
+const searchDate = ref<[]>([]);
 
 const urlProfile = ref<string>();
 const profileFileImg = ref<File | null>(null);
@@ -126,7 +126,7 @@ const defaultFormData = {
   streetEN: '',
   street: '',
   trainingPlace: null,
-  importNationality: null,
+  importNationality: [],
   sourceNationality: null,
   licenseExpireDate: null,
   licenseIssueDate: null,
@@ -157,6 +157,14 @@ const defaultFormData = {
   contactTel: '',
   remark: '',
   agencyStatus: '',
+  addressForeign: false,
+  provinceText: null,
+  districtText: null,
+  subDistrictText: null,
+  provinceTextEN: null,
+  districtTextEN: null,
+  subDistrictTextEN: null,
+  zipCodeText: null,
 };
 
 const formData = ref<UserCreate>({
@@ -178,7 +186,7 @@ const formData = ref<UserCreate>({
   streetEN: '',
   street: '',
   trainingPlace: null,
-  importNationality: null,
+  importNationality: [],
   sourceNationality: null,
   licenseExpireDate: null,
   licenseIssueDate: null,
@@ -209,6 +217,14 @@ const formData = ref<UserCreate>({
   contactTel: '',
   remark: '',
   agencyStatus: '',
+  addressForeign: false,
+  provinceText: null,
+  districtText: null,
+  subDistrictText: null,
+  provinceTextEN: null,
+  districtTextEN: null,
+  subDistrictTextEN: null,
+  zipCodeText: null,
 });
 
 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
@@ -431,6 +447,28 @@ async function onSubmit(excludeDialog?: boolean) {
       ...formData.value,
       checkpointEN: formData.value.checkpoint,
       status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
+      provinceId: formData.value.addressForeign
+        ? null
+        : formData.value.provinceId,
+      districtId: formData.value.addressForeign
+        ? null
+        : formData.value.districtId,
+      subDistrictId: formData.value.addressForeign
+        ? null
+        : formData.value.subDistrictId,
+
+      provinceText: formData.value.addressForeign
+        ? formData.value.provinceId
+        : null,
+      districtText: formData.value.addressForeign
+        ? formData.value.districtId
+        : null,
+      subDistrictText: formData.value.addressForeign
+        ? formData.value.subDistrictId
+        : null,
+      zipCodeText: formData.value.addressForeign
+        ? formData.value.zipCode
+        : null,
     } as const;
 
     await userStore.editById(currentUser.value.id, formDataEdit);
@@ -462,7 +500,31 @@ async function onSubmit(excludeDialog?: boolean) {
         : '';
     formData.value.checkpointEN = formData.value.checkpoint;
     const result = await userStore.create(
-      formData.value,
+      {
+        ...formData.value,
+        provinceId: formData.value.addressForeign
+          ? null
+          : formData.value.provinceId,
+        districtId: formData.value.addressForeign
+          ? null
+          : formData.value.districtId,
+        subDistrictId: formData.value.addressForeign
+          ? null
+          : formData.value.subDistrictId,
+
+        provinceText: formData.value.addressForeign
+          ? formData.value.provinceId
+          : null,
+        districtText: formData.value.addressForeign
+          ? formData.value.districtId
+          : null,
+        subDistrictText: formData.value.addressForeign
+          ? formData.value.subDistrictId
+          : null,
+        zipCodeText: formData.value.addressForeign
+          ? formData.value.zipCode
+          : null,
+      },
       onCreateImageList.value,
     );
 
@@ -560,12 +622,20 @@ async function assignFormData(idEdit: string) {
     currentUser.value = foundUser;
     formData.value = {
       branchId: foundUser.branch[0]?.id,
-      provinceId: foundUser.provinceId,
-      districtId: foundUser.districtId,
-      subDistrictId: foundUser.subDistrictId,
+      provinceId: foundUser.addressForeign
+        ? foundUser.provinceText
+        : foundUser.provinceId,
+      districtId: foundUser.addressForeign
+        ? foundUser.districtText
+        : foundUser.districtId,
+      subDistrictId: foundUser.addressForeign
+        ? foundUser.subDistrictText
+        : foundUser.subDistrictId,
       telephoneNo: foundUser.telephoneNo,
       email: foundUser.email,
-      zipCode: foundUser.zipCode,
+      zipCode: foundUser.addressForeign
+        ? foundUser.zipCodeText
+        : foundUser.zipCode,
       gender: foundUser.gender,
       addressEN: foundUser.addressEN,
       address: foundUser.address,
@@ -576,7 +646,10 @@ async function assignFormData(idEdit: string) {
       street: foundUser.street,
       streetEN: foundUser.streetEN,
       trainingPlace: foundUser.trainingPlace,
-      importNationality: foundUser.importNationality,
+      importNationality:
+        typeof foundUser.importNationality === 'string'
+          ? [foundUser.importNationality]
+          : foundUser.importNationality,
       sourceNationality: foundUser.sourceNationality,
       licenseNo: foundUser.licenseNo,
       discountCondition: foundUser.discountCondition,
@@ -596,8 +669,8 @@ async function assignFormData(idEdit: string) {
       responsibleArea: foundUser.responsibleArea,
       status: foundUser.status,
       selectedImage: foundUser.selectedImage,
-      contactName: foundUser.contactName,
-      contactTel: foundUser.contactTel,
+      contactName: foundUser.contactName || '',
+      contactTel: foundUser.contactTel || '',
       licenseExpireDate:
         (foundUser.licenseExpireDate &&
           new Date(foundUser.licenseExpireDate)) ||
@@ -616,6 +689,10 @@ async function assignFormData(idEdit: string) {
         (foundUser.citizenExpire && new Date(foundUser.citizenExpire)) || null,
       remark: foundUser.remark || '',
       agencyStatus: foundUser.agencyStatus || '',
+      addressForeign: foundUser.addressForeign || false,
+      provinceTextEN: foundUser.provinceTextEN,
+      districtTextEN: foundUser.districtTextEN,
+      subDistrictTextEN: foundUser.subDistrictTextEN,
     };
 
     formData.value.status === 'ACTIVE' || 'CREATED'
@@ -742,7 +819,17 @@ watch(
 
 watch(
   () => formData.value.userType,
-  async () => {
+  async (type) => {
+    if (type !== 'AGENCY') {
+      formData.value.addressForeign = false;
+      formData.value.provinceId = null;
+      formData.value.districtId = null;
+      formData.value.subDistrictId = null;
+      formData.value.provinceTextEN = null;
+      formData.value.districtTextEN = null;
+      formData.value.subDistrictTextEN = null;
+      formData.value.zipCodeText = null;
+    }
     if (!infoDrawerEdit.value) return;
     formData.value.registrationNo = null;
     formData.value.startDate = null;
@@ -750,7 +837,7 @@ watch(
     formData.value.responsibleArea = null;
     formData.value.discountCondition = null;
     formData.value.sourceNationality = null;
-    formData.value.importNationality = null;
+    formData.value.importNationality = [];
     formData.value.trainingPlace = null;
     formData.value.checkpoint = null;
     formData.value.checkpointEN = null;
@@ -1275,7 +1362,7 @@ watch(
                         {{
                           locale === 'eng'
                             ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
-                            : `${props.row.firstName} ${props.row.lastName}`.trim()
+                            : `${props.row.firstName || props.row.firstNameEN} ${props.row.lastName || props.row.lastNameEN}`.trim()
                         }}
                         <q-tooltip
                           anchor="bottom left"
@@ -1285,7 +1372,7 @@ watch(
                           {{
                             locale === 'eng'
                               ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
-                              : `${props.row.firstName} ${props.row.lastName}`.trim()
+                              : `${props.row.firstName || props.row.firstNameEN} ${props.row.lastName || props.row.lastNameEN}`.trim()
                           }}
                         </q-tooltip>
 
@@ -1551,9 +1638,12 @@ watch(
     hide-action
     :is-edit="infoDrawerEdit"
     :title="
-      locale === 'eng'
+      (currentUser.namePrefix
+        ? $t('customer.form.prefix.' + currentUser.namePrefix) + ' '
+        : '') +
+      (locale === 'eng'
         ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
-        : `${currentUser.firstName} ${currentUser.lastName}`
+        : `${currentUser.firstName || currentUser.firstNameEN} ${currentUser.lastName || currentUser.lastNameEN}`)
     "
     v-model:drawerOpen="infoDrawer"
     :submit="() => onSubmit()"
@@ -1589,8 +1679,8 @@ watch(
             setPrefixName(
               {
                 namePrefix: formData.namePrefix,
-                firstName: formData.firstName,
-                lastName: formData.lastName,
+                firstName: formData.firstName || formData.firstNameEN,
+                lastName: formData.lastName || formData.lastNameEN,
                 firstNameEN: formData.firstNameEN,
                 lastNameEN: formData.lastNameEN,
               },
@@ -1807,10 +1897,15 @@ watch(
               v-model:district-id="formData.districtId"
               v-model:sub-district-id="formData.subDistrictId"
               v-model:zip-code="formData.zipCode"
+              v-model:address-foreign="formData.addressForeign"
+              v-model:province-text-en="formData.provinceTextEN"
+              v-model:district-text-en="formData.districtTextEN"
+              v-model:sub-district-text-en="formData.subDistrictTextEN"
               :readonly="!infoDrawerEdit"
               prefix-id="drawer-info-personnel"
               :title="'personnel.form.addressInformation'"
               dense
+              :use-foreign-address="formData.userType === 'AGENCY'"
               class="q-mb-xl"
             />
             <FormByType
@@ -2036,8 +2131,13 @@ watch(
             v-model:district-id="formData.districtId"
             v-model:sub-district-id="formData.subDistrictId"
             v-model:zip-code="formData.zipCode"
+            v-model:address-foreign="formData.addressForeign"
+            v-model:province-text-en="formData.provinceTextEN"
+            v-model:district-text-en="formData.districtTextEN"
+            v-model:sub-district-text-en="formData.subDistrictTextEN"
             prefix-id="drawer-info-personnel"
             dense
+            :use-foreign-address="formData.userType === 'AGENCY'"
             class="q-mb-xl"
           />
           <FormByType
diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index bf1b8fd7..dd8c4737 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -9,7 +9,7 @@ import { baseUrl } from 'src/stores/utils';
 import useCustomerStore from 'stores/customer';
 import useFlowStore from 'stores/flow';
 import useOptionStore from 'stores/options';
-import { dialog } from 'stores/utils';
+import { dialog, canAccess } from 'stores/utils';
 
 import { Status } from 'stores/types';
 import { Employee } from 'stores/employee/types';
@@ -18,6 +18,8 @@ import { CustomerBranch, CustomerType } from 'stores/customer/types';
 import { columnsEmployee } from './constant';
 import { useCustomerBranchForm, useEmployeeForm } from './form';
 
+import DialogEmployee from 'src/components/03_customer-management/DialogEmployee.vue';
+import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
 import EmployerFormAuthorized from './components/employer/EmployerFormAuthorized.vue';
 import FloatingActionButton from 'components/FloatingActionButton.vue';
 import SideMenu from 'components/SideMenu.vue';
@@ -89,6 +91,11 @@ const prop = withDefaults(
     currentCitizenId?: string;
     gender: string;
     selectedImage: string;
+    fetchImageList: (
+      id: string,
+      selectedName: string,
+      type: 'customer' | 'employee',
+    ) => Promise<void>;
   }>(),
   {
     color: 'green',
@@ -96,7 +103,6 @@ const prop = withDefaults(
 );
 const currentBranchEmployee = ref<string>('');
 const listEmployee = ref<Employee[]>([]);
-
 const customerId = defineModel<string>('customerId', { required: true });
 
 defineEmits<{
@@ -106,16 +112,6 @@ defineEmits<{
   (e: 'dialog'): void;
 }>();
 
-onMounted(async () => {
-  customerBranchFormState.value.currentCustomerId = route.params
-    .customerId as string;
-  await fetchList();
-
-  branch.value?.forEach((v) => {
-    currentBtnOpen.value.push(false);
-  });
-});
-
 const columns = [
   {
     name: 'branchName',
@@ -257,10 +253,6 @@ async function fetchEmployee(opts: { branchId: string; pageSize?: number }) {
   }
 }
 
-onMounted(async () => {
-  await fetchList();
-});
-
 watch([customerId, inputSearch, currentStatus, pageSizeBranch], async () => {
   await fetchList();
 });
@@ -280,12 +272,22 @@ watch(
     }
   },
 );
+
+onMounted(async () => {
+  customerBranchFormState.value.currentCustomerId = route.params
+    .customerId as string;
+  await fetchList();
+
+  branch.value?.forEach((v) => {
+    currentBtnOpen.value.push(false);
+  });
+});
 </script>
 
 <template>
   <FloatingActionButton
     style="z-index: 999"
-    v-if="$route.name !== 'CustomerManagement'"
+    v-if="$route.name !== 'CustomerManagement' && canAccess('customer', 'edit')"
     @click="openEmployerBranchForm('create')"
     hide-icon
   ></FloatingActionButton>
@@ -473,7 +475,6 @@ watch(
           <q-tr
             :class="{
               'app-text-muted': props.row.status === 'INACTIVE',
-              'cursor-pointer': props.row._count?.branch !== 0,
             }"
             :props="props"
             @click="$emit('viewDetail', props.row, props.rowIndex)"
@@ -547,7 +548,13 @@ watch(
               v-if="branchFieldSelected.includes('businessTypePure')"
               class="text-left"
             >
-              {{ useOptionStore().mapOption(props.row.businessType) || '-' }}
+              {{
+                props.row.businessType
+                  ? props.row.businessType[
+                      $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                    ]
+                  : '-'
+              }}
             </q-td>
             <q-td
               v-if="branchFieldSelected.includes('totalEmployee')"
@@ -566,8 +573,6 @@ watch(
                     await fetchEmployee({
                       branchId: currentBranchEmployee,
                       pageSize: 999,
-                      passport: true,
-                      visa: true,
                     });
 
                     currentBtnOpen.map((v, i) => {
@@ -615,7 +620,7 @@ watch(
               <div class="text-center">
                 <TableEmpoloyee
                   :prefix-id="props.row.registerName || props.row.firstName"
-                  add-button
+                  :add-button="canAccess('customer', 'edit')"
                   in-table
                   :list-employee="listEmployee"
                   :columns-employee="columnsEmployee"
@@ -638,10 +643,15 @@ watch(
                   "
                   @history="(item) => {}"
                   @view="
-                    (item) => {
+                    async (item) => {
                       employeeFormState.drawerModal = true;
                       //employeeFormState.isEmployeeEdit = true;
                       employeeFormStore.assignFormDataEmployee(item.id);
+                      await fetchImageList(
+                        item.id,
+                        item.selectedImage || '',
+                        'employee',
+                      );
                     }
                   "
                 />
@@ -668,9 +678,11 @@ watch(
                     ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                     : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
                 telephone: props.row.telephoneNo,
-                businessTypePure: useOptionStore().mapOption(
-                  props.row.businessType,
-                ),
+                businessTypePure: props.row.businessType
+                  ? props.row.businessType[
+                      $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                    ]
+                  : '-',
                 totalEmployee: props.row._count?.employee,
               }"
               :visible-columns="branchFieldSelected"
@@ -759,7 +771,10 @@ watch(
           />
           <DeleteButton
             icon-only
-            v-if="customerBranchFormState.dialogType === 'info'"
+            v-if="
+              customerBranchFormState.dialogType === 'info' &&
+              canAccess('customer', 'edit')
+            "
             @click="
               () => {
                 deleteBranchById(customerBranchFormData.id || '');
@@ -853,7 +868,6 @@ watch(
             v-model:last-name-en="customerBranchFormData.lastNameEN"
             v-model:gender="customerBranchFormData.gender"
             v-model:birth-date="customerBranchFormData.birthDate"
-            v-model:customer-name="customerBranchFormData.customerName"
             v-model:legal-person-no="customerBranchFormData.legalPersonNo"
             v-model:branch-code="customerBranchFormData.code"
             v-model:register-name="customerBranchFormData.registerName"
@@ -883,15 +897,14 @@ watch(
           </div>
           <EmployerFormBusiness
             dense
-            class="q-mb-xl"
             outlined
             prefix-id="employer-branch"
             :readonly="customerBranchFormState.dialogType === 'info'"
-            v-model:bussiness-type="customerBranchFormData.businessType"
+            v-model:business-type-id="customerBranchFormData.businessTypeId"
             v-model:job-position="customerBranchFormData.jobPosition"
             v-model:job-description="customerBranchFormData.jobDescription"
             v-model:pay-date="customerBranchFormData.payDate"
-            v-model:pay-date-e-n="customerBranchFormData.payDateEN"
+            v-model:pay-date-en="customerBranchFormData.payDateEN"
             v-model:wage-rate="customerBranchFormData.wageRate"
             v-model:wage-rate-text="customerBranchFormData.wageRateText"
           />
@@ -982,7 +995,7 @@ watch(
             v-model:email="customerBranchFormData.email"
             v-model:contact-tel="customerBranchFormData.contactTel"
             v-model:office-tel="customerBranchFormData.officeTel"
-            v-model:agent="customerBranchFormData.agent"
+            v-model:agent-user-id="customerBranchFormData.agentUserId"
           />
         </div>
       </div>
@@ -998,6 +1011,18 @@ watch(
       />
     </template>
   </DialogFormContainer>
+
+  <DialogEmployee
+    :fetch-list-employee="fetchEmployee"
+    :fetch-image-list="fetchImageList"
+    current-tab="employer"
+  />
+
+  <DrawerEmployee
+    :fetch-list-employee="fetchEmployee"
+    :fetch-image-list="fetchImageList"
+    current-tab="employer"
+  />
 </template>
 
 <style scoped>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index cfd29786..df06fbb7 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -1,92 +1,39 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, computed } from 'vue';
+import { ref, watch, onMounted, nextTick, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import { useRoute, useRouter } from 'vue-router';
-import { getUserId, getRole } from 'src/services/keycloak';
-import { baseUrl, setPrefixName, waitAll } from 'src/stores/utils';
-import { dateFormat } from 'src/utils/datetime';
-import { dialogCheckData } from 'stores/utils';
+import { canAccess } from 'stores/utils';
 
-import useOcrStore from 'stores/ocr';
+import type { District, Province, SubDistrict } from 'src/stores/address';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
-import useMyBranchStore from 'stores/my-branch';
-import {
-  dialog,
-  notify,
-  resetScrollBar,
-  capitalizeFirstLetter,
-} from 'stores/utils';
-import { useNavigator } from 'src/stores/navigator';
+import useAddressStore from 'src/stores/address';
 import useFlowStore from 'stores/flow';
+import { dialog } from 'stores/utils';
+import { useNavigator } from 'src/stores/navigator';
 import { Status } from 'stores/types';
 import {
   CustomerStats,
   Customer,
   CustomerBranch,
-  CustomerBranchCreate,
   CustomerType,
 } from 'stores/customer/types';
-import { Employee, EmployeeHistory } from 'stores/employee/types';
-import {
-  EditButton,
-  DeleteButton,
-  SaveButton,
-  UndoButton,
-} from 'components/button';
 
-import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
-import { AddressForm } from 'components/form';
-import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
-import ItemCard from 'src/components/ItemCard.vue';
-import DrawerInfo from 'components/DrawerInfo.vue';
+import DialogEmployee from 'src/components/03_customer-management/DialogEmployee.vue';
+import { SaveButton } from 'components/button';
+import TabCustomer from './TabCustomer.vue';
 import FloatingActionButton from 'components/FloatingActionButton.vue';
 import StatCardComponent from 'components/StatCardComponent.vue';
-import TooltipComponent from 'components/TooltipComponent.vue';
-import EmptyAddButton from 'components/AddButton.vue';
-import NoData from 'components/NoData.vue';
-import PaginationComponent from 'components/PaginationComponent.vue';
-import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
-import FormPerson from 'components/02_personnel-management/FormPerson.vue';
-import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
 import BranchPage from './BranchPage.vue';
-import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
-import DialogForm from 'components/DialogForm.vue';
-import SideMenu from 'components/SideMenu.vue';
-import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
-import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
-import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
-import { runOcr, parseResultMRZ } from 'src/utils/ocr';
-import { formatAddress } from 'src/utils/address';
-import {
-  UploadFileGroup,
-  FormTm6,
-  NoticeJobEmployment,
-} from 'components/upload-file';
+import SelectBusinessType from 'src/components/shared/select/SelectBusinessType.vue';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
+import TabEmployee from './TabEmployee.vue';
+import SelectInput from 'src/components/shared/SelectInput.vue';
 
-import {
-  columnsCustomer,
-  columnsEmployee,
-  uploadFileListEmployee,
-  columnsAttachment,
-  dialogCreateCustomerItem,
-} from './constant';
+import { columnsCustomer, columnsEmployee } from './constant';
 import { useCustomerForm, useEmployeeForm } from './form';
 import { storeToRefs } from 'pinia';
-import ProfileBanner from 'components/ProfileBanner.vue';
-import ImageUploadDialog from 'components/ImageUploadDialog.vue';
-import FormEmployeeHealthCheck from 'components/03_customer-management/FormEmployeeHealthCheck.vue';
-import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmployeeWorkHistory.vue';
-import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue';
-import useOptionStore from 'stores/options';
-import { DialogContainer, DialogHeader } from 'components/dialog';
-import KebabAction from 'src/components/shared/KebabAction.vue';
-import { nextTick } from 'vue';
-import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
-import PaginationPageSize from 'src/components/PaginationPageSize.vue';
-import { AddButton } from 'components/button';
-import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const { t, locale } = useI18n();
 const $q = useQuasar();
@@ -94,41 +41,243 @@ const route = useRoute();
 const router = useRouter();
 const flowStore = useFlowStore();
 const navigatorStore = useNavigator();
+const addressStore = useAddressStore();
 const customerStore = useCustomerStore();
-const userBranchStore = useMyBranchStore();
 const employeeStore = useEmployeeStore();
 const customerFormStore = useCustomerForm();
 const employeeFormStore = useEmployeeForm();
-const optionStore = useOptionStore();
-const ocrStore = useOcrStore();
 
-const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+const { state: employeeFormState, statusEmployeeCreate } =
+  storeToRefs(employeeFormStore);
 
-const {
-  fetchListOfOptionBranch,
-  customerFormUndo,
-  customerConfirmUnsave,
-  deleteCustomerById,
-  validateTabField,
-  deleteCustomerBranchById,
-} = customerFormStore;
+// NOTE: Component ref
+const refTabCustomer = ref<InstanceType<typeof TabCustomer>>();
+const refTabEmployee = ref<InstanceType<typeof TabEmployee>>();
 
-const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
-  employeeFormStore;
+// NOTE: Page Data
+const currentCustomer = ref<Customer>();
 
-const {
-  state: customerFormState,
-  currentFormData: customerFormData,
-  registerAbleBranchOption,
-  tabFieldRequired,
-} = storeToRefs(customerFormStore);
-const {
-  state: employeeFormState,
-  currentFromDataEmployee,
-  onCreateImageList,
-  statusEmployeeCreate,
-  refreshImageState,
-} = storeToRefs(employeeFormStore);
+// NOTE: Page State
+const hideStats = ref(false);
+const gridView = ref(false);
+const employeeStats = ref(0);
+const inputSearch = ref('');
+const filterBusinessType = ref('');
+const searchDate = ref<string[]>([]);
+const currentTab = ref<'employer' | 'employee'>('employer');
+const currentStatus = ref<Status | 'All'>('All');
+const customerTypeSelected = ref<{
+  label: string;
+  value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson';
+}>({
+  label: t('general.all'),
+  value: 'all',
+});
+const statsCustomerType = ref<CustomerStats>({
+  CORP: 0,
+  PERS: 0,
+});
+const fieldDisplayCustomer = ref<
+  {
+    label: string;
+    value: string;
+  }[]
+>(
+  columnsCustomer
+    .filter((v) => v.name !== 'action')
+    .map((v) => ({ label: v.label, value: v.name })),
+);
+const fieldDisplayEmployee = ref<
+  {
+    label: string;
+    value: string;
+  }[]
+>(
+  columnsEmployee
+    .filter((v) => v.name !== 'action')
+    .map((v) => ({ label: v.label, value: v.name })),
+);
+const fieldSelected = ref<string[]>(
+  [
+    ...columnsEmployee.map((v) => v.name),
+    ...columnsCustomer.map((v) => v.name),
+  ].filter((v, index, self) => self.indexOf(v) === index),
+);
+const filterAddress = reactive({
+  provinceId: '',
+  districtId: '',
+  subDistrictId: '',
+});
+const addressOpt = reactive<{
+  provinceOpt: Province[];
+  districtOpt: District[];
+  subDistrictOpt: SubDistrict[];
+}>({
+  provinceOpt: [],
+  districtOpt: [],
+  subDistrictOpt: [],
+});
+const fieldCustomer = [
+  'all',
+  'customerLegalEntity',
+  'customerNaturalPerson',
+] as const;
+
+// image
+const imageList = ref<{ selectedImage: string; list: string[] }>();
+const branch = ref<CustomerBranch[]>();
+
+async function triggerChangeStatus(
+  id: string,
+  status: string,
+  employeeName?: string,
+) {
+  return await new Promise((resolve, reject) => {
+    dialog({
+      color: status !== 'INACTIVE' ? 'warning' : 'info',
+      icon:
+        status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
+      title: t('dialog.title.confirmChangeStatus'),
+      actionText:
+        status !== 'INACTIVE' ? t('general.close') : t('general.open'),
+      message:
+        status !== 'INACTIVE'
+          ? t('dialog.message.confirmChangeStatusOff')
+          : t('dialog.message.confirmChangeStatusOn'),
+      action: async () => {
+        if (currentTab.value === 'employee') {
+          await refTabEmployee.value
+            ?.toggleStatusEmployee(
+              id,
+              status === 'INACTIVE' ? false : true,
+              employeeName,
+            )
+            .then(resolve)
+            .catch(reject);
+        } else {
+          await refTabCustomer.value
+            ?.toggleStatusCustomer(id, status === 'INACTIVE' ? false : true)
+            .then(resolve)
+            .catch(reject);
+        }
+      },
+      cancel: () => {},
+    });
+  });
+}
+
+async function createCustomerForm(customerType: 'CORP' | 'PERS') {
+  customerFormState.value.dialogModal = true;
+  customerFormState.value.dialogType = 'create';
+  customerFormData.value.customerType =
+    customerType === 'CORP' ? CustomerType.Corporate : CustomerType.Person;
+}
+
+function createEmployeeForm() {
+  employeeFormStore.resetFormDataEmployee(true);
+  employeeFormState.value.currentEmployee = null;
+  employeeFormState.value.dialogType = 'create';
+  employeeFormState.value.dialogModal = true;
+  employeeFormState.value.isEmployeeEdit = true;
+}
+
+async function fetchImageList(
+  id: string,
+  selectedName: string,
+  type: 'customer' | 'employee',
+) {
+  const res =
+    type === 'customer'
+      ? await customerStore.fetchImageListById(id)
+      : await employeeStore.fetchImageListById(id);
+
+  const imageList = {
+    selectedImage: selectedName,
+    list: res.map((n: string) => `${type}/${id}/image/${n}`),
+  };
+
+  type === 'customer'
+    ? (customerFormState.value.imageList = imageList)
+    : (employeeFormState.value.imageList = imageList);
+
+  return res;
+}
+
+async function triggerExport() {
+  switch (currentTab.value) {
+    case 'employer':
+      customerStore.customerExport({
+        pageSize: 10000,
+        status: currentStatus.value === 'All' ? undefined : currentStatus.value,
+        startDate: searchDate.value[0],
+        endDate: searchDate.value[1],
+        businessTypeId: filterBusinessType.value,
+        provinceId: filterAddress.provinceId || undefined,
+        districtId: filterAddress.districtId || undefined,
+        subDistrictId: filterAddress.subDistrictId || undefined,
+        customerType:
+          customerTypeSelected.value.value === 'customerLegalEntity'
+            ? CustomerType.Corporate
+            : customerTypeSelected.value.value === 'customerNaturalPerson'
+              ? CustomerType.Person
+              : undefined,
+      });
+
+      break;
+
+    case 'employee':
+      employeeStore.employeeExport({
+        pageSize: 10000,
+        status: currentStatus.value === 'All' ? undefined : currentStatus.value,
+        startDate: searchDate.value[0],
+        endDate: searchDate.value[1],
+      });
+      break;
+  }
+}
+
+async function fetchAddressData(type: 'province' | 'district' | 'subDistrict') {
+  let result;
+
+  if (type === 'province') {
+    result = await addressStore.fetchProvince();
+    if (result) addressOpt.provinceOpt = result;
+  }
+
+  if (type === 'district') {
+    if (!filterAddress.provinceId) return;
+    result = await addressStore.fetchDistrictByProvinceId(
+      filterAddress.provinceId,
+    );
+    if (result) addressOpt.districtOpt = result;
+  }
+
+  if (type === 'subDistrict') {
+    if (!filterAddress.districtId) return;
+    result = await addressStore.fetchSubDistrictByProvinceId(
+      filterAddress.districtId,
+    );
+    if (result) addressOpt.subDistrictOpt = result;
+  }
+
+  return result;
+}
+
+async function handleSelectAddress(type: 'province' | 'district') {
+  if (type === 'province') {
+    filterAddress.districtId = filterAddress.subDistrictId = '';
+    addressOpt.districtOpt = addressOpt.subDistrictOpt = [];
+
+    await fetchAddressData('district');
+  }
+
+  if (type === 'district') {
+    filterAddress.subDistrictId = '';
+    await fetchAddressData('subDistrict');
+  }
+}
 
 async function init() {
   navigatorStore.current.title = 'menu.customer';
@@ -144,14 +293,16 @@ async function init() {
 
   if (route.query.tab === 'customer') {
     currentTab.value = 'employer';
-    if (route.query.id) openSpecificCustomer(route.query.id as string);
+    if (route.query.id)
+      refTabCustomer.value?.openSpecificCustomer(route.query.id as string);
   } else if (route.query.tab === 'employee') {
     currentTab.value = 'employee';
-    if (route.query.id) openSpecificEmployee(route.query.id as string);
+    setTimeout(async () => {
+      if (route.query.id)
+        refTabEmployee.value?.openSpecificEmployee(route.query.id as string);
+    }, 150);
   }
 
-  if (route.name === 'CustomerManagement') await fetchListCustomer(true);
-
   if (
     route.name === 'CustomerBranchManagement' &&
     typeof route.params.customerId === 'string'
@@ -174,491 +325,34 @@ async function init() {
       router.push('/customer-management');
     }
   }
+
+  await fetchAddressData('province');
+
   flowStore.rotate();
 }
-onMounted(init);
 
-// NOTE: Page Data
-const currentCustomer = ref<Customer>();
-const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
-const listEmployee = ref<Employee[]>([]);
-const hideStats = ref(false);
-const statsCustomerType = ref<CustomerStats>({
-  CORP: 0,
-  PERS: 0,
-});
-
-// NOTE: Page State
-const searchDate = ref<string[]>([]);
-const currentTab = ref<'employer' | 'employee'>('employer');
-const inputSearch = ref('');
-const currentStatus = ref<Status | 'All'>('All');
-const customerTypeSelected = ref<{
-  label: string;
-  value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson';
-}>({
-  label: t('general.all'),
-  value: 'all',
-});
-
-const customerNameInfo = computed(() => {
-  if (customerFormData.value.customerBranch === undefined) return;
-
-  const name =
-    locale.value === 'eng'
-      ? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
-      : `${customerFormData.value.customerBranch[0]?.firstName} ${customerFormData.value.customerBranch[0]?.lastName}`;
-  return name || '-';
-});
-const currentBtnOpen = ref<boolean[]>([]);
-const employeeStats = ref(0);
-const gridView = ref(false);
-const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
-
-const currentPageCustomer = ref<number>(1);
-const maxPageCustomer = ref<number>(1);
-const currentPageEmployee = ref<number>(1);
-const maxPageEmployee = ref<number>(1);
-const pageSize = ref<number>(30);
-const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
-const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
-
-// image
-const imageList = ref<{ selectedImage: string; list: string[] }>();
 watch(() => route.name, init);
-watch(
-  [
-    currentTab,
-    currentStatus,
-    inputSearch,
-    customerTypeSelected,
-    pageSize,
-    searchDate,
-  ],
-  async ([tabName], [oldTabName]) => {
-    // if (tabName !== oldTabName) searchDate.value = [];
-    if (tabName === 'employer') {
-      currentPageCustomer.value = 1;
-      currentBtnOpen.value = [];
-      listCustomer.value = [];
-      await fetchListCustomer(true);
-    }
-    if (tabName === 'employee') {
-      currentPageEmployee.value = 1;
-      listEmployee.value = [];
-      await fetchListEmployee({ fetchStats: true });
-    }
 
-    customerFormState.value.currentCustomerId = undefined;
-    flowStore.rotate();
-  },
-);
 watch(locale, () => {
   customerTypeSelected.value = {
     label: `${customerTypeSelected.value.label}`,
     value: customerTypeSelected.value?.value,
   };
 });
+
 watch(
   () => $q.screen.lt.md,
   () => $q.screen.lt.md && (gridView.value = true),
 );
 
-const fieldDisplayCustomer = ref<
-  {
-    label: string;
-    value: string;
-  }[]
->(
-  columnsCustomer
-    .filter((v) => v.name !== 'action')
-    .map((v) => ({ label: v.label, value: v.name })),
-);
-
-const fieldDisplayEmployee = ref<
-  {
-    label: string;
-    value: string;
-  }[]
->(
-  columnsEmployee
-    .filter((v) => v.name !== 'action')
-    .map((v) => ({ label: v.label, value: v.name })),
-);
-
-const fieldSelected = ref<string[]>(
-  [
-    ...columnsEmployee.map((v) => v.name),
-    ...columnsCustomer.map((v) => v.name),
-  ].filter((v, index, self) => self.indexOf(v) === index),
-);
-
-const branch = ref<CustomerBranch[]>();
-
-const customerStats = [
-  { id: 1, count: 2, name: 'CORP' },
-  { id: 2, count: 3, name: 'PERS' },
-];
-
-const fieldCustomer = [
-  'all',
-  'customerLegalEntity',
-  'customerNaturalPerson',
-] as const;
-
-const employeeHistoryDialog = ref(false);
-const employeeHistory = ref<EmployeeHistory[]>();
-
-async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
-  const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
-
-  const resultList = await customerStore.fetchList({
-    includeBranch: true,
-    page: mobileFetch ? 1 : currentPageCustomer.value,
-    pageSize: mobileFetch
-      ? listCustomer.value.length +
-        (total === listCustomer.value.length ? 1 : 0)
-      : pageSize.value,
-    status:
-      currentStatus.value === 'All'
-        ? undefined
-        : currentStatus.value === 'ACTIVE'
-          ? 'ACTIVE'
-          : 'INACTIVE',
-    query: inputSearch.value,
-    startDate: searchDate.value[0],
-    endDate: searchDate.value[1],
-    customerType: (
-      {
-        all: undefined,
-        customerLegalEntity: CustomerType.Corporate,
-        customerNaturalPerson: CustomerType.Person,
-      } as const
-    )[customerTypeSelected.value.value],
-  });
-
-  if (resultList) {
-    // currentPageCustomer.value = resultList.page;
-    maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
-    $q.screen.xs && !mobileFetch
-      ? listCustomer.value.push(...resultList.result)
-      : (listCustomer.value = resultList.result);
-  }
-
-  if (fetchStats) {
-    statsCustomerType.value = await customerStore
-      .getStatsCustomer()
-      .then((value) => (value ? value : { CORP: 0, PERS: 0 }));
-  }
-}
-
-async function fetchListEmployee(opt?: {
-  fetchStats?: boolean;
-  page?: number;
-  pageSize?: number;
-  customerId?: string;
-  mobileFetch?: boolean;
-}) {
-  const resultListEmployee = await employeeStore.fetchList({
-    customerId: opt?.customerId,
-    page: opt
-      ? opt.mobileFetch
-        ? 1
-        : opt.page || currentPageEmployee.value
-      : currentPageEmployee.value,
-    pageSize: opt
-      ? opt.mobileFetch
-        ? listEmployee.value.length +
-          (employeeStats.value === listEmployee.value.length ? 1 : 0)
-        : opt.pageSize || pageSize.value
-      : pageSize.value,
-    status:
-      currentStatus.value === 'All'
-        ? undefined
-        : currentStatus.value === 'ACTIVE'
-          ? 'ACTIVE'
-          : 'INACTIVE',
-    query: inputSearch.value,
-    passport: true,
-    visa: true,
-    startDate: searchDate.value[0],
-    endDate: searchDate.value[1],
-  });
-  if (resultListEmployee) {
-    maxPageEmployee.value = Math.ceil(
-      resultListEmployee.total / pageSize.value,
-    );
-    $q.screen.xs && !(opt && opt.mobileFetch)
-      ? listEmployee.value.push(...resultListEmployee.result)
-      : (listEmployee.value = resultListEmployee.result);
-  }
-
-  if (opt && opt.fetchStats)
-    employeeStats.value = await employeeStore.getStatsEmployee();
-}
-
-async function triggerChangeStatus(id: string, status: string) {
-  return await new Promise((resolve, reject) => {
-    dialog({
-      color: status !== 'INACTIVE' ? 'warning' : 'info',
-      icon:
-        status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
-      title: t('dialog.title.confirmChangeStatus'),
-      actionText:
-        status !== 'INACTIVE' ? t('general.close') : t('general.open'),
-      message:
-        status !== 'INACTIVE'
-          ? t('dialog.message.confirmChangeStatusOff')
-          : t('dialog.message.confirmChangeStatusOn'),
-      action: async () => {
-        if (currentTab.value === 'employee') {
-          await toggleStatusEmployee(id, status === 'INACTIVE' ? false : true)
-            .then(resolve)
-            .catch(reject);
-        } else {
-          await toggleStatusCustomer(id, status === 'INACTIVE' ? false : true)
-            .then(resolve)
-            .catch(reject);
-        }
-      },
-      cancel: () => {},
-    });
-  });
-}
-
-async function toggleStatusEmployee(id: string, status: boolean) {
-  const res = await employeeStore.editById(id, {
-    status: !status ? 'ACTIVE' : 'INACTIVE',
-  });
-  if (res && employeeFormState.value.drawerModal)
-    currentFromDataEmployee.value.status = res.status;
-
-  await fetchListEmployee({ mobileFetch: $q.screen.xs });
-  flowStore.rotate();
-}
-
-async function toggleStatusCustomer(id: string, status: boolean) {
-  const res = await customerStore.editById(id, {
-    status: !status ? 'ACTIVE' : 'INACTIVE',
-  });
-  if (res && customerFormState.value.drawerModal)
-    customerFormData.value.status = res.status;
-
-  await fetchListCustomer(false, $q.screen.xs);
-  flowStore.rotate();
-}
-async function openHistory(id: string) {
-  const res = await employeeStore.getEditHistory(id);
-  employeeHistory.value = res.reverse();
-  employeeHistoryDialog.value = true;
-}
-
-async function editCustomerForm(id: string) {
-  await customerFormStore.assignFormData(id);
-  await fetchListOfOptionBranch();
-  await fetchImageList(
-    id,
-    customerFormData.value.selectedImage || '',
-    'customer',
-  );
-  customerFormState.value.branchIndex = -1;
-  customerFormState.value.dialogType = 'edit';
-  customerFormState.value.drawerModal = true;
-  customerFormState.value.editCustomerId = id;
-}
-
-async function editEmployeeFormPersonal(id: string) {
-  await employeeFormStore.assignFormDataEmployee(id);
-  await fetchImageList(
-    id,
-    currentFromDataEmployee.value.selectedImage || '',
-    'employee',
-  );
-
-  employeeFormState.value.isEmployeeEdit = true;
-  employeeFormState.value.dialogType = 'edit';
-  employeeFormState.value.drawerModal = true;
-}
-
-async function createCustomerForm(customerType: 'CORP' | 'PERS') {
-  customerFormState.value.dialogModal = true;
-  customerFormState.value.dialogType = 'create';
-  customerFormData.value.customerType =
-    customerType === 'CORP' ? CustomerType.Corporate : CustomerType.Person;
-}
-
-function createEmployeeForm() {
-  employeeFormStore.resetFormDataEmployee(true);
-  employeeFormState.value.dialogType = 'create';
-  employeeFormState.value.dialogModal = true;
-  employeeFormState.value.isEmployeeEdit = true;
-}
-
-async function fetchImageList(
-  id: string,
-  selectedName: string,
-  type: 'customer' | 'employee',
-) {
-  const res =
-    type === 'customer'
-      ? await customerStore.fetchImageListById(id)
-      : await employeeStore.fetchImageListById(id);
-  imageList.value = {
-    selectedImage: selectedName,
-    list: res.map((n: string) => `${type}/${id}/image/${n}`),
-  };
-
-  return res;
-}
-
-async function openSpecificCustomer(id: string) {
-  await customerFormStore.assignFormData(id);
-  await fetchImageList(
-    id,
-    customerFormData.value.selectedImage || '',
-    'customer',
-  );
-  customerFormState.value.branchIndex = -1;
-  customerFormState.value.drawerModal = true;
-  customerFormState.value.editCustomerId = id;
-  customerFormState.value.dialogType = 'info';
-}
-
-async function openSpecificEmployee(id: string) {
-  await employeeFormStore.assignFormDataEmployee(id);
-  await fetchImageList(
-    id,
-    currentFromDataEmployee.value.selectedImage || '',
-    'employee',
-  );
-  employeeFormState.value.dialogType = 'info';
-  employeeFormState.value.drawerModal = true;
-}
-
-// 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;
-  },
-);
-
-const emptyCreateDialog = ref(false);
+onMounted(async () => await init());
 </script>
 
 <template>
   <FloatingActionButton
     style="z-index: 999"
     :hide-icon="currentTab === 'employee'"
-    v-if="$route.name === 'CustomerManagement'"
+    v-if="$route.name === 'CustomerManagement' && canAccess('customer', 'edit')"
     @click="
       () => {
         if (currentTab === 'employee') {
@@ -692,11 +386,14 @@ const emptyCreateDialog = ref(false);
   </FloatingActionButton>
 
   <div class="column full-height no-wrap">
-    <div v-if="$route.name === 'CustomerManagement'" class="column full-height">
+    <!-- หน้า table -->
+    <div
+      v-show="$route.name === 'CustomerManagement'"
+      class="column full-height"
+    >
       <div class="text-body-2 text-weight-medium q-mb-xs flex items-center">
         {{ $t('general.dataSum') }}
         <q-badge
-          v-if="listCustomer"
           rounded
           class="q-ml-sm"
           style="
@@ -724,32 +421,30 @@ const emptyCreateDialog = ref(false);
         />
       </div>
 
+      <!-- stat -->
       <div class="row full-width">
-        <!-- stat -->
         <transition name="slide">
           <div v-if="!hideStats" class="col-12 q-mb-md">
             <div class="scroll">
               <StatCardComponent
-                v-if="customerStats"
+                v-if="statsCustomerType"
                 label-i18n
                 :branch="
-                  customerStats &&
-                  (currentTab === 'employer'
-                    ? customerStats.map((v) => ({
-                        count:
-                          v.name === 'CORP'
-                            ? (statsCustomerType?.CORP ?? 0)
-                            : (statsCustomerType?.PERS ?? 0),
-                        label:
-                          v.name === 'CORP'
-                            ? 'customer.employerLegalEntity'
-                            : 'customer.employerNaturalPerson',
-                        icon:
-                          v.name === 'CORP'
-                            ? 'mdi-office-building-outline'
-                            : 'mdi-account-outline',
-                        color: v.name === 'CORP' ? 'purple' : 'green',
-                      }))
+                  currentTab === 'employer'
+                    ? [
+                        {
+                          count: statsCustomerType.CORP ?? 0,
+                          label: 'customer.employerLegalEntity',
+                          icon: 'mdi-office-building-outline',
+                          color: 'purple',
+                        },
+                        {
+                          count: statsCustomerType.PERS ?? 0,
+                          label: 'customer.employerNaturalPerson',
+                          icon: 'mdi-account-outline',
+                          color: 'green',
+                        },
+                      ]
                     : [
                         {
                           label: 'customer.employee',
@@ -757,7 +452,7 @@ const emptyCreateDialog = ref(false);
                           icon: 'mdi-account-outline',
                           color: 'pink',
                         },
-                      ])
+                      ]
                 "
                 :dark="$q.dark.isActive"
               />
@@ -780,7 +475,7 @@ const emptyCreateDialog = ref(false);
               outlined
               dense
               :label="$t('general.search')"
-              class="col col-md-3"
+              class="col col-md-3 q-mr-sm"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
               debounce="200"
@@ -792,7 +487,11 @@ const emptyCreateDialog = ref(false);
                 <q-separator vertical inset class="q-mr-xs" />
                 <AdvanceSearch
                   v-model="searchDate"
-                  :active="$q.screen.lt.md && currentStatus !== 'All'"
+                  :active="
+                    ($q.screen.lt.md && currentStatus !== 'All') ||
+                    (currentTab === 'employer' && !!filterBusinessType) ||
+                    (currentTab === 'employer' && !!filterAddress.provinceId)
+                  "
                 >
                   <div
                     v-if="$q.screen.lt.md"
@@ -818,10 +517,57 @@ const emptyCreateDialog = ref(false);
                       { label: $t('status.INACTIVE'), value: 'INACTIVE' },
                     ]"
                   />
+                  <template v-if="currentTab === 'employer'">
+                    <div class="q-mt-sm text-weight-medium">
+                      {{ $t('customer.form.businessType') }}
+                    </div>
+                    <SelectBusinessType
+                      v-model:value="filterBusinessType"
+                      clearable
+                    />
+                    <div class="q-mt-sm text-weight-medium">
+                      {{ $t('customer.form.address') }}
+                    </div>
+                    <SelectInput
+                      clearable
+                      v-model="filterAddress.provinceId"
+                      option-value="id"
+                      :label="$t('form.province')"
+                      :option="addressOpt.provinceOpt"
+                      :option-label="locale === 'eng' ? 'nameEN' : 'name'"
+                      @update:model-value="handleSelectAddress('province')"
+                    />
+                    <SelectInput
+                      clearable
+                      class="q-mt-sm"
+                      option-value="id"
+                      v-model="filterAddress.districtId"
+                      :option="addressOpt.districtOpt"
+                      :label="$t('form.district')"
+                      :option-label="locale === 'eng' ? 'nameEN' : 'name'"
+                      @update:model-value="handleSelectAddress('district')"
+                    />
+                    <SelectInput
+                      clearable
+                      class="q-mt-sm"
+                      option-value="id"
+                      v-model="filterAddress.subDistrictId"
+                      :option="addressOpt.subDistrictOpt"
+                      :label="$t('form.subDistrict')"
+                      :option-label="locale === 'eng' ? 'nameEN' : 'name'"
+                    />
+                  </template>
                 </AdvanceSearch>
               </template>
             </q-input>
 
+            <SaveButton
+              icon-only
+              class="q-mr-auto"
+              :icon="'material-symbols:download'"
+              @click.stop="triggerExport()"
+            />
+
             <div class="row col-md-5" style="white-space: nowrap">
               <q-select
                 v-if="$q.screen.gt.sm"
@@ -843,8 +589,7 @@ const emptyCreateDialog = ref(false);
                   { label: $t('status.ACTIVE'), value: 'ACTIVE' },
                   { label: $t('status.INACTIVE'), value: 'INACTIVE' },
                 ]"
-              ></q-select>
-              <!-- v-if="gridView === false" -->
+              />
               <q-select
                 v-if="!gridView"
                 id="select-field"
@@ -941,7 +686,6 @@ const emptyCreateDialog = ref(false);
                 id="tab-employer"
                 @click="
                   () => {
-                    currentPageCustomer = 1;
                     inputSearch = '';
                     currentStatus = 'All';
                     flowStore.rotate();
@@ -963,7 +707,6 @@ const emptyCreateDialog = ref(false);
                 class="text-capitalize"
                 @click="
                   () => {
-                    currentPageEmployee = 1;
                     inputSearch = '';
                     currentStatus = 'All';
                     flowStore.rotate();
@@ -1011,917 +754,40 @@ const emptyCreateDialog = ref(false);
         </div>
 
         <!-- body -->
+        <TabCustomer
+          v-if="currentTab === 'employer'"
+          ref="refTabCustomer"
+          v-model:customer-type-selected="customerTypeSelected"
+          v-model:stats-customer-type="statsCustomerType"
+          :filter-address="filterAddress"
+          :filter-business-type="filterBusinessType"
+          :gridView
+          :searchDate
+          :currentTab
+          :inputSearch
+          :currentStatus
+          :fieldSelected
+          :fetchImageList
+          :triggerChangeStatus
+        />
 
-        <q-splitter
-          v-model="splitPercent"
-          :limits="[0, 100]"
-          class="col full-width"
-          before-class="overflow-hidden"
-          after-class="overflow-hidden"
-          :disable="$q.screen.lt.sm"
-        >
-          <template v-slot:before>
-            <div
-              class="column q-pa-md surface-1 full-height full-width"
-              style="gap: var(--size-1)"
-            >
-              <template v-if="currentTab === 'employer'">
-                <q-item
-                  v-close-popup
-                  clickable
-                  v-for="v in fieldCustomer"
-                  :key="v"
-                  dense
-                  class="no-padding items-center rounded full-width"
-                  active-class="employer-active"
-                  :active="customerTypeSelected.value === v"
-                  @click="customerTypeSelected = { label: v, value: v }"
-                  :id="`btn-${v}`"
-                >
-                  <span class="q-px-md ellipsis">
-                    {{
-                      $t(
-                        {
-                          all: 'general.all',
-                          customerLegalEntity: 'customer.employerLegalEntity',
-                          customerNaturalPerson:
-                            'customer.employerNaturalPerson',
-                        }[v],
-                      )
-                    }}
-                  </span>
-                </q-item>
-              </template>
-              <template v-else>
-                <q-item
-                  active
-                  dense
-                  active-class="employer-active"
-                  class="no-padding items-center rounded full-width"
-                  v-close-popup
-                  clickable
-                >
-                  <span class="q-px-md ellipsis">
-                    {{ $t('general.all') }}
-                  </span>
-                </q-item>
-              </template>
-            </div>
-          </template>
-
-          <template v-slot:after>
-            <div class="column full-height no-wrap">
-              <!-- employer -->
-              <template
-                v-if="
-                  listCustomer &&
-                  statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
-                  currentTab === 'employer'
-                "
-              >
-                <div
-                  v-if="listCustomer.length === 0"
-                  class="row col full-width items-center justify-center"
-                  style="min-height: 250px"
-                >
-                  <NoData :not-found="!!inputSearch" />
-                </div>
-
-                <article
-                  v-if="listCustomer.length !== 0"
-                  class="col q-pa-md scroll full-width"
-                >
-                  <q-infinite-scroll
-                    :offset="10"
-                    @load="
-                      (_, done) => {
-                        if (
-                          $q.screen.gt.xs ||
-                          currentPageCustomer === maxPageCustomer
-                        )
-                          return;
-                        currentPageCustomer = currentPageCustomer + 1;
-                        fetchListCustomer().then(() =>
-                          done(currentPageCustomer >= maxPageCustomer),
-                        );
-                      }
-                    "
-                  >
-                    <q-table
-                      flat
-                      bordered
-                      :grid="gridView"
-                      :rows="listCustomer"
-                      :columns="columnsCustomer"
-                      class="full-width"
-                      card-container-class="q-col-gutter-md"
-                      row-key="name"
-                      :rows-per-page-options="[0]"
-                      hide-pagination
-                      :visible-columns="fieldSelected"
-                    >
-                      <template v-slot:header="props">
-                        <q-tr
-                          style="background-color: hsla(var(--info-bg) / 0.07)"
-                          :props="props"
-                        >
-                          <q-th
-                            v-for="col in props.cols"
-                            :key="col.name"
-                            :props="props"
-                          >
-                            {{ $t(col.label) }}
-                          </q-th>
-                          <q-th auto-width />
-                        </q-tr>
-                      </template>
-
-                      <template v-slot:body="props">
-                        <q-tr
-                          :class="{
-                            'app-text-muted': props.row.status === 'INACTIVE',
-                            'status-active': props.row.status !== 'INACTIVE',
-                            'status-inactive': props.row.status === 'INACTIVE',
-                          }"
-                          :id="`row-table-${props.row.id}`"
-                          :props="props"
-                          @click="
-                            $router.push(
-                              `/customer-management/${props.row.id}/branch`,
-                            )
-                          "
-                          :style="
-                            props.rowIndex % 2 !== 0
-                              ? $q.dark.isActive
-                                ? 'background: hsl(var(--gray-11-hsl)/0.2)'
-                                : `background: #f9fafc`
-                              : ''
-                          "
-                        >
-                          <q-td
-                            class="text-center"
-                            v-if="fieldSelected.includes('orderNumber')"
-                          >
-                            {{
-                              $q.screen.xs
-                                ? props.rowIndex + 1
-                                : (currentPageCustomer - 1) * pageSize +
-                                  props.rowIndex +
-                                  1
-                            }}
-                          </q-td>
-
-                          <q-td
-                            v-if="fieldSelected.includes('titleName')"
-                            class="ellipsis"
-                          >
-                            <div class="row items-center no-wrap">
-                              <div
-                                class="q-mr-sm"
-                                style="
-                                  display: flex;
-                                  margin-bottom: var(--size-2);
-                                "
-                              >
-                                <div
-                                  :style="`
-                                  border-radius: 50%;
-                                  border-style: solid;
-                                  border-width: 2px;
-                                  border-color: hsl(var(${props.row.customerType === 'CORP' ? '--violet-11-hsl' : '--teal-10-hsl'}));
-                                `"
-                                >
-                                  <div class="branch-card__icon">
-                                    <q-avatar size="md">
-                                      <q-img
-                                        :src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
-                                        class="full-height full-width"
-                                      >
-                                        <template #error>
-                                          <q-img
-                                            :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
-                                          />
-                                        </template>
-                                      </q-img>
-                                    </q-avatar>
-                                  </div>
-                                </div>
-                              </div>
-                              <div class="col">
-                                <div class="col">
-                                  {{
-                                    props.row.customerType === 'CORP'
-                                      ? props.row.branch[0]?.registerName || '-'
-                                      : optionStore.mapOption(
-                                          props.row.branch[0].namePrefix,
-                                        ) +
-                                          ' ' +
-                                          props.row.branch[0]?.firstName +
-                                          ' ' +
-                                          props.row.branch[0]?.lastName || '-'
-                                  }}
-                                </div>
-                                <div class="col app-text-muted">
-                                  {{
-                                    props.row.customerType === 'CORP'
-                                      ? props.row.branch[0]?.registerNameEN ||
-                                        '-'
-                                      : capitalizeFirstLetter(
-                                          props.row.branch[0].namePrefix,
-                                        ) +
-                                          ' ' +
-                                          props.row.branch[0]?.firstNameEN +
-                                          ' ' +
-                                          props.row.branch[0]?.lastNameEN || '-'
-                                  }}
-                                </div>
-                              </div>
-                            </div>
-                          </q-td>
-
-                          <q-td
-                            v-if="fieldSelected.includes('businessTypePure')"
-                            style="max-width: 150px"
-                            class="ellipsis"
-                          >
-                            {{
-                              props.row.branch.length !== 0
-                                ? props.row.branch[0].businessType !== null
-                                  ? optionStore.mapOption(
-                                      props.row.branch[0].businessType,
-                                    )
-                                  : ''
-                                : '-'
-                            }}
-
-                            <q-tooltip>
-                              {{
-                                props.row.branch.length !== 0
-                                  ? props.row.branch[0].businessType !== null
-                                    ? optionStore.mapOption(
-                                        props.row.branch[0].businessType,
-                                      )
-                                    : ''
-                                  : '-'
-                              }}
-                            </q-tooltip>
-                          </q-td>
-
-                          <q-td
-                            v-if="fieldSelected.includes('jobPosition')"
-                            style="max-width: 150px"
-                            class="ellipsis"
-                          >
-                            {{
-                              props.row.branch.length !== 0
-                                ? props.row.branch[0].jobPosition !== null
-                                  ? optionStore.mapOption(
-                                      props.row.branch[0].jobPosition,
-                                    )
-                                  : ''
-                                : '-'
-                            }}
-
-                            <q-tooltip>
-                              {{
-                                props.row.branch.length !== 0
-                                  ? props.row.branch[0].jobPosition !== null
-                                    ? optionStore.mapOption(
-                                        props.row.branch[0].jobPosition,
-                                      )
-                                    : ''
-                                  : '-'
-                              }}
-                            </q-tooltip>
-                          </q-td>
-
-                          <q-td v-if="fieldSelected.includes('address')">
-                            {{
-                              formatAddress({
-                                address: props.row.branch[0].address,
-                                addressEN: props.row.branch[0].addressEN,
-                                moo: props.row.branch[0].moo,
-                                mooEN: props.row.branch[0].mooEN,
-                                soi: props.row.branch[0].soi,
-                                soiEN: props.row.branch[0].soiEN,
-                                street: props.row.branch[0].street,
-                                streetEN: props.row.branch[0].streetEN,
-                                province: props.row.branch[0].province,
-                                district: props.row.branch[0].district,
-                                subDistrict: props.row.branch[0].subDistrict,
-                                en: $i18n.locale === 'eng',
-                              })
-                            }}
-                            <q-tooltip>
-                              {{
-                                formatAddress({
-                                  address: props.row.branch[0].address,
-                                  addressEN: props.row.branch[0].addressEN,
-                                  moo: props.row.branch[0].moo,
-                                  mooEN: props.row.branch[0].mooEN,
-                                  soi: props.row.branch[0].soi,
-                                  soiEN: props.row.branch[0].soiEN,
-                                  street: props.row.branch[0].street,
-                                  streetEN: props.row.branch[0].streetEN,
-                                  province: props.row.branch[0].province,
-                                  district: props.row.branch[0].district,
-                                  subDistrict: props.row.branch[0].subDistrict,
-                                  en: $i18n.locale === 'eng',
-                                })
-                              }}
-                            </q-tooltip>
-                          </q-td>
-
-                          <q-td v-if="fieldSelected.includes('contactName')">
-                            {{ props.row.branch[0]?.contactName || '-' }}
-                          </q-td>
-
-                          <q-td v-if="fieldSelected.includes('officeTel')">
-                            {{ props.row.branch[0]?.officeTel || '-' }}
-                          </q-td>
-
-                          <q-td>
-                            <q-btn
-                              :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
-                              dense
-                              flat
-                              @click.stop="
-                                async () => {
-                                  if (!currentBtnOpen[props.rowIndex]) {
-                                    customerFormState.currentCustomerId =
-                                      props.row.id;
-
-                                    await fetchListEmployee({
-                                      customerId: props.row.id,
-                                      page: 1,
-                                      pageSize: 9999,
-                                    });
-
-                                    currentBtnOpen.map((v, i) => {
-                                      if (i !== props.rowIndex) {
-                                        currentBtnOpen[i] = false;
-                                      }
-                                    });
-                                  }
-                                  currentBtnOpen[props.rowIndex] =
-                                    !currentBtnOpen[props.rowIndex];
-                                }
-                              "
-                            >
-                              <div class="row items-center">
-                                <q-icon name="mdi-account-group-outline" />
-                                <q-icon
-                                  class="btn-arrow-right"
-                                  :class="{
-                                    active: currentBtnOpen[props.rowIndex],
-                                  }"
-                                  size="xs"
-                                  name="mdi-chevron-right"
-                                />
-                              </div>
-                            </q-btn>
-                            <q-btn
-                              icon="mdi-eye-outline"
-                              :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
-                              size="sm"
-                              dense
-                              round
-                              flat
-                              @click.stop="editCustomerForm(props.row.id)"
-                            />
-
-                            <KebabAction
-                              :id-name="
-                                props.row.branch[0].customerName ||
-                                props.row.branch[0].firstName
-                              "
-                              :status="props.row.status"
-                              @view="
-                                () => {
-                                  const { branch, ...payload } = props.row;
-                                  currentCustomer = payload;
-                                  editCustomerForm(props.row.id);
-                                }
-                              "
-                              @edit="
-                                async () => {
-                                  await editCustomerForm(props.row.id);
-                                  customerFormState.branchIndex = 0;
-                                }
-                              "
-                              @delete="
-                                deleteCustomerById(
-                                  props.row.id,
-                                  async () =>
-                                    await fetchListCustomer(true, $q.screen.xs),
-                                )
-                              "
-                              @change-status="
-                                async () => {
-                                  triggerChangeStatus(
-                                    props.row.id,
-                                    props.row.status,
-                                  );
-                                }
-                              "
-                            />
-                          </q-td>
-                        </q-tr>
-
-                        <q-tr
-                          v-show="currentBtnOpen[props.rowIndex]"
-                          :props="props"
-                        >
-                          <q-td colspan="100%" style="padding: 16px">
-                            <div class="text-center">
-                              <TableEmpoloyee
-                                in-table
-                                :list-employee="listEmployee"
-                                :columns-employee="columnsEmployee"
-                                @history="
-                                  (item: any) => {
-                                    openHistory(item.id);
-                                  }
-                                "
-                                @view="
-                                  async (item: any) => {
-                                    employeeFormState.drawerModal = true;
-                                    employeeFormState.isEmployeeEdit = false;
-                                    employeeFormStore.assignFormDataEmployee(
-                                      item.id,
-                                    );
-                                    await fetchImageList(
-                                      item.id,
-                                      item.selectedImage || '',
-                                      'employee',
-                                    );
-                                  }
-                                "
-                                @edit="
-                                  (item: any) =>
-                                    editEmployeeFormPersonal(item.id)
-                                "
-                                @delete="
-                                  (item: any) => {
-                                    deleteEmployeeById({
-                                      id: item.id,
-                                      fetch: async () =>
-                                        await fetchListEmployee(
-                                          currentTab === 'employer'
-                                            ? {
-                                                page: 1,
-                                                pageSize: 999,
-                                                customerId:
-                                                  customerFormState.currentCustomerId,
-                                              }
-                                            : {
-                                                fetchStats: true,
-                                                mobileFetch: $q.screen.xs,
-                                              },
-                                        ),
-                                    });
-                                  }
-                                "
-                                @toggle-status="
-                                  async (item: any) => {
-                                    triggerChangeStatus(item.id, item.status);
-                                  }
-                                "
-                              />
-                            </div>
-                          </q-td>
-                        </q-tr>
-                      </template>
-
-                      <template v-slot:item="props">
-                        <div class="col-12 col-md-6 column">
-                          <BranchCard
-                            i18n-key="customer.table"
-                            class="surface-1 col"
-                            :virtual-branch="false"
-                            :id="`branch-card-${props.row.name}`"
-                            :class="{
-                              'cursor-pointer': props.row._count.branch !== 0,
-                            }"
-                            @click="
-                              $router.push(
-                                `/customer-management/${props.row.id}/branch`,
-                              )
-                            "
-                            :metadata="props.row"
-                            :color="
-                              props.row.customerType === 'CORP'
-                                ? 'hq'
-                                : 'br-virtual'
-                            "
-                            :key="props.row.id"
-                            :data="{
-                              branchLabelName:
-                                props.row.customerType === 'CORP'
-                                  ? $i18n.locale === 'eng'
-                                    ? props.row.branch[0]?.registerNameEN || '-'
-                                    : props.row.branch[0]?.registerName || '-'
-                                  : $i18n.locale === 'eng'
-                                    ? props.row.branch[0]?.firstNameEN +
-                                        ' ' +
-                                        props.row.branch[0]?.lastNameEN || '-'
-                                    : props.row.branch[0]?.firstName +
-                                        ' ' +
-                                        props.row.branch[0]?.lastName || '-',
-                            }"
-                            :inactive="props.row.status === 'INACTIVE'"
-                            :field-selected="
-                              fieldSelected.filter((v) => {
-                                return columnsCustomer.some(
-                                  (c) => c.name === v,
-                                );
-                              })
-                            "
-                          >
-                            <template #image>
-                              <q-avatar size="3rem">
-                                <q-img
-                                  :src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
-                                  class="full-height full-width"
-                                >
-                                  <template #error>
-                                    <q-img
-                                      :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
-                                    />
-                                  </template>
-                                </q-img>
-                                <q-badge
-                                  class="absolute-bottom-right no-padding"
-                                  style="
-                                    border-radius: 50%;
-                                    min-width: 10px;
-                                    min-height: 10px;
-                                  "
-                                  :style="{
-                                    background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
-                                  }"
-                                ></q-badge>
-                              </q-avatar>
-                            </template>
-                            <template #data>
-                              <div
-                                class="row"
-                                style="
-                                  display: flex;
-                                  padding-block: var(--size-2);
-                                "
-                              >
-                                <div class="col-12 q-py-sm row">
-                                  <span class="col-4 app-text-muted">
-                                    {{
-                                      props.row.customerType === 'CORP'
-                                        ? $t('customer.form.legalPersonCode')
-                                        : $t('customer.form.cardNumber')
-                                    }}
-                                  </span>
-                                  <span class="col">
-                                    {{
-                                      props.row.customerType === 'CORP'
-                                        ? props.row.branch[0]?.legalPersonNo
-                                        : props.row.branch[0]?.citizenId
-                                    }}
-                                  </span>
-                                </div>
-                                <div
-                                  class="col-12 q-py-sm row"
-                                  v-for="key in fieldSelected
-                                    .filter((v) => {
-                                      return (
-                                        v !== 'orderNumber' &&
-                                        v !== 'titleName' &&
-                                        v !== 'address' &&
-                                        v !== 'contactName' &&
-                                        columnsCustomer.some(
-                                          (c) => c.name === v,
-                                        )
-                                      );
-                                    })
-                                    .sort((lhs, rhs) => {
-                                      const fields = [
-                                        ...columnsEmployee,
-                                        ...columnsCustomer,
-                                      ];
-                                      return (
-                                        fields.findIndex(
-                                          (i) => i.name === lhs,
-                                        ) -
-                                        fields.findIndex((i) => i.name === rhs)
-                                      );
-                                    })"
-                                  :key="key"
-                                >
-                                  <span class="col-4 app-text-muted">
-                                    {{ $t(`customer.table.${key}`) }}
-                                  </span>
-                                  <span class="col">
-                                    {{
-                                      key === 'businessTypePure'
-                                        ? optionStore.mapOption(
-                                            props.row.branch[0].businessType,
-                                          )
-                                        : key === 'jobPosition'
-                                          ? optionStore.mapOption(
-                                              props.row.branch[0].jobPosition,
-                                            )
-                                          : key === 'officeTel'
-                                            ? props.row.branch[0].officeTel ||
-                                              '-'
-                                            : ''
-                                    }}
-                                  </span>
-                                </div>
-                              </div>
-                            </template>
-                            <template v-slot:action>
-                              <KebabAction
-                                :status="props.row.status"
-                                :id-name="props.row.name"
-                                @view="
-                                  () => {
-                                    const { branch, ...payload } = props.row;
-                                    currentCustomer = payload;
-                                    editCustomerForm(props.row.id);
-                                  }
-                                "
-                                @edit="
-                                  async () => {
-                                    await editCustomerForm(props.row.id);
-                                    customerFormState.branchIndex = 0;
-                                  }
-                                "
-                                @delete="
-                                  deleteCustomerById(
-                                    props.row.id,
-                                    async () =>
-                                      await fetchListCustomer(
-                                        true,
-                                        $q.screen.xs,
-                                      ),
-                                  )
-                                "
-                                @change-status="
-                                  triggerChangeStatus(
-                                    props.row.id,
-                                    props.row.status,
-                                  )
-                                "
-                              />
-                            </template>
-                          </BranchCard>
-                        </div>
-                      </template>
-                    </q-table>
-                    <template v-slot:loading>
-                      <div
-                        v-if="
-                          $q.screen.lt.sm &&
-                          currentPageCustomer !== maxPageCustomer
-                        "
-                        class="row justify-center"
-                      >
-                        <q-spinner-dots color="primary" size="40px" />
-                      </div>
-                    </template>
-                  </q-infinite-scroll>
-                </article>
-
-                <footer
-                  v-if="listCustomer.length !== 0 && $q.screen.gt.xs"
-                  class="row justify-between items-center q-px-md q-py-sm"
-                >
-                  <div class="row col-4 items-center">
-                    <div
-                      class="app-text-muted"
-                      style="width: 80px"
-                      v-if="$q.screen.gt.sm"
-                    >
-                      {{ $t('general.recordPerPage') }}
-                    </div>
-
-                    <div><PaginationPageSize v-model="pageSize" /></div>
-                  </div>
-
-                  <div class="col-4 flex justify-center app-text-muted">
-                    {{
-                      $q.screen.gt.sm
-                        ? $t('general.recordsPage', {
-                            resultcurrentPage: listCustomer.length,
-                            total:
-                              statsCustomerType.PERS + statsCustomerType.CORP,
-                          })
-                        : $t('general.ofPage', {
-                            current: listCustomer.length,
-                            total:
-                              statsCustomerType.PERS + statsCustomerType.CORP,
-                          })
-                    }}
-                  </div>
-
-                  <div class="col-4 flex justify-end">
-                    <PaginationComponent
-                      v-model:current-page="currentPageCustomer"
-                      v-model:max-page="maxPageCustomer"
-                      :fetch-data="
-                        async () => {
-                          await fetchListCustomer();
-                          flowStore.rotate();
-                        }
-                      "
-                    />
-                  </div>
-                </footer>
-              </template>
-
-              <!-- employee -->
-              <template
-                v-if="
-                  listEmployee && employeeStats > 0 && currentTab === 'employee'
-                "
-              >
-                <div
-                  v-if="listEmployee.length === 0"
-                  class="row col full-width items-center justify-center"
-                  style="min-height: 250px"
-                >
-                  <NoData :not-found="!!inputSearch" />
-                </div>
-
-                <article
-                  v-if="listEmployee.length !== 0"
-                  class="surface-2 q-pa-md scroll col full-width"
-                >
-                  <q-infinite-scroll
-                    :offset="10"
-                    @load="
-                      (_, done) => {
-                        if (
-                          $q.screen.gt.xs ||
-                          currentPageEmployee === maxPageEmployee
-                        )
-                          return;
-                        currentPageEmployee = currentPageEmployee + 1;
-                        fetchListEmployee().then(() =>
-                          done(currentPageEmployee >= maxPageEmployee),
-                        );
-                      }
-                    "
-                  >
-                    <TableEmpoloyee
-                      v-model:page-size="pageSize"
-                      v-model:current-page="currentPageEmployee"
-                      :grid-view="gridView"
-                      :list-employee="listEmployee"
-                      :columns-employee="columnsEmployee"
-                      :field-selected="fieldSelected"
-                      @history="
-                        (item: any) => {
-                          openHistory(item.id);
-                        }
-                      "
-                      @view="
-                        async (item: any) => {
-                          employeeFormState.drawerModal = true;
-                          employeeFormState.isEmployeeEdit = false;
-                          employeeFormStore.assignFormDataEmployee(item.id);
-                          await fetchImageList(
-                            item.id,
-                            item.selectedImage || '',
-                            'employee',
-                          );
-                        }
-                      "
-                      @edit="(item: any) => editEmployeeFormPersonal(item.id)"
-                      @delete="
-                        (item: any) => {
-                          deleteEmployeeById({
-                            id: item.id,
-                            fetch: async () =>
-                              await fetchListEmployee(
-                                currentTab === 'employer'
-                                  ? {
-                                      page: 1,
-                                      pageSize: 999,
-                                      customerId:
-                                        customerFormState.currentCustomerId,
-                                    }
-                                  : {
-                                      fetchStats: true,
-                                      mobileFetch: $q.screen.xs,
-                                    },
-                              ),
-                          });
-                        }
-                      "
-                      @toggle-status="
-                        async (item: any) => {
-                          triggerChangeStatus(item.id, item.status);
-                        }
-                      "
-                    />
-                    <template v-slot:loading>
-                      <div
-                        v-if="
-                          $q.screen.lt.sm &&
-                          currentPageEmployee !== maxPageEmployee
-                        "
-                        class="row justify-center"
-                      >
-                        <q-spinner-dots color="primary" size="40px" />
-                      </div>
-                    </template>
-                  </q-infinite-scroll>
-                </article>
-                <footer
-                  v-if="listEmployee.length !== 0 && $q.screen.gt.xs"
-                  class="row justify-between items-center q-px-md q-py-sm"
-                >
-                  <div class="row col-4 items-center">
-                    <div
-                      class="app-text-muted"
-                      style="width: 80px"
-                      v-if="$q.screen.gt.sm"
-                    >
-                      {{ $t('general.recordPerPage') }}
-                    </div>
-
-                    <div><PaginationPageSize v-model="pageSize" /></div>
-                  </div>
-
-                  <div class="col-4 flex justify-center app-text-muted">
-                    {{
-                      $q.screen.gt.sm
-                        ? $t('general.recordsPage', {
-                            resultcurrentPage: listEmployee.length,
-                            total: employeeStats,
-                          })
-                        : $t('general.ofPage', {
-                            current: listEmployee.length,
-                            total: employeeStats,
-                          })
-                    }}
-                  </div>
-
-                  <div class="col-4 flex justify-end">
-                    <PaginationComponent
-                      v-model:current-page="currentPageEmployee"
-                      v-model:max-page="maxPageEmployee"
-                      :fetch-data="
-                        async () => {
-                          await fetchListEmployee();
-                          flowStore.rotate();
-                        }
-                      "
-                    />
-                  </div>
-                </footer>
-              </template>
-
-              <template
-                v-if="
-                  (statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
-                    currentTab === 'employer') ||
-                  (employeeStats === 0 && currentTab === 'employee')
-                "
-              >
-                <TooltipComponent
-                  class="self-end q-ma-md"
-                  :title="'general.noData'"
-                  :caption="'general.clickToCreate'"
-                  imgSrc="personnel-table-"
-                />
-
-                <div
-                  class="row items-center justify-center"
-                  style="flex-grow: 1"
-                >
-                  <EmptyAddButton
-                    :label="'general.add'"
-                    :i18n-args="{
-                      text: $t(`customer.${currentTab}`),
-                    }"
-                    @trigger="
-                      () => {
-                        if (currentTab === 'employer') {
-                          emptyCreateDialog = true;
-                        } else {
-                          createEmployeeForm();
-                        }
-                      }
-                    "
-                  />
-                </div>
-              </template>
-            </div>
-          </template>
-        </q-splitter>
+        <TabEmployee
+          v-if="currentTab === 'employee'"
+          ref="refTabEmployee"
+          v-model:employee-stats="employeeStats"
+          :gridView
+          :searchDate
+          :currentTab
+          :inputSearch
+          :currentStatus
+          :fieldSelected
+          :fetchImageList
+          :triggerChangeStatus
+        />
       </div>
     </div>
 
+    <!-- หน้า id ลูกค้า -->
     <div
       class="col column rounded bordered"
       style="overflow: hidden"
@@ -1931,6 +797,7 @@ const emptyCreateDialog = ref(false);
         v-model:status-employee-create="statusEmployeeCreate"
         v-model:status-employee-edit="employeeFormState.drawerModal"
         v-if="currentCustomer"
+        :fetch-image-list="fetchImageList"
         :customer-type="currentCustomer.customerType"
         :current-customer-name="
           currentCustomer.customerType === 'PERS'
@@ -1960,4091 +827,9 @@ const emptyCreateDialog = ref(false);
       />
     </div>
   </div>
-
-  <!-- add customer -->
-  <DialogForm
-    v-model:modal="emptyCreateDialog"
-    :title="$t('customer.employerType')"
-    hide-footer
-    no-app-box
-    width="40vw"
-    height="250px"
-    :close="
-      () => {
-        emptyCreateDialog = false;
-        onCreateImageList = { selectedImage: '', list: [] };
-      }
-    "
-  >
-    <div class="full-height row q-pa-md">
-      <ItemCard
-        class="col q-mx-sm full-height"
-        v-for="value in dialogCreateCustomerItem"
-        :key="value.text"
-        :icon="value.icon"
-        :text="value.text"
-        :icon-color="value.iconColor"
-        :bg-color="value.color"
-        @trigger="
-          () => {
-            createCustomerForm(
-              value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
-            );
-            emptyCreateDialog = false;
-          }
-        "
-      />
-    </div>
-  </DialogForm>
-
-  <DialogContainer
-    :model-value="customerFormState.dialogModal"
-    :on-open="
-      async () => {
-        customerFormStore.resetForm(customerFormState.dialogType === 'create');
-        onCreateImageList = { selectedImage: '', list: [] };
-        customerFormState.customerImageUrl = '';
-        await fetchListOfOptionBranch();
-        await customerFormStore.addCurrentCustomerBranch();
-      }
-    "
-    :on-close="
-      () => {
-        customerFormState.dialogModal = false;
-        onCreateImageList = { selectedImage: '', list: [] };
-      }
-    "
-  >
-    <template #header>
-      <DialogHeader
-        :title="
-          customerFormState.dialogType === 'create'
-            ? $t(`general.add`, {
-                text: `${$t('customer.employer')} `,
-              })
-            : `${$t('customer.employer')} `
-        "
-      >
-        <template #title-after>
-          <span
-            :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
-          >
-            :
-            {{
-              customerFormData.customerType === 'CORP'
-                ? $t('customer.employerLegalEntity')
-                : $t('customer.employerNaturalPerson')
-            }}
-          </span>
-        </template>
-      </DialogHeader>
-    </template>
-
-    <div
-      :class="{
-        'q-mx-lg q-my-md': $q.screen.gt.sm,
-        'q-mx-md q-my-sm': !$q.screen.gt.sm,
-      }"
-    >
-      <ProfileBanner
-        v-if="customerFormData.customerBranch !== undefined"
-        active
-        hide-fade
-        prefix="dialog"
-        :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
-        :img="
-          customerFormState.customerImageUrl ||
-          `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`
-        "
-        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
-        :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
-        :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
-        :icon="
-          customerFormData.customerType === 'PERS'
-            ? 'mdi-account-plus-outline'
-            : 'mdi-office-building-outline'
-        "
-        :title="
-          customerFormData.customerType === 'PERS'
-            ? setPrefixName(
-                {
-                  namePrefix: customerFormData.customerBranch[0]?.namePrefix,
-                  firstName: customerFormData.customerBranch[0]?.firstName,
-                  lastName: customerFormData.customerBranch[0]?.lastName,
-                  firstNameEN: customerFormData.customerBranch[0]?.firstNameEN,
-                  lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
-                },
-                { locale },
-              )
-            : customerFormData.customerBranch[0]?.registerName
-        "
-        :caption="
-          customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
-            : customerFormData.customerBranch[0]?.registerNameEN
-        "
-        @view="
-          () => {
-            customerFormState.imageDialog = true;
-            customerFormState.isImageEdit = false;
-          }
-        "
-        @edit="
-          customerFormState.imageDialog = customerFormState.isImageEdit = true
-        "
-      />
-    </div>
-    <div
-      style="flex: 1; width: 100%; overflow-y: auto"
-      id="customer-form"
-      :class="{
-        'q-px-lg q-pb-lg': $q.screen.gt.sm,
-        'q-px-md q-pb-sm': !$q.screen.gt.sm,
-      }"
-    >
-      <div class="col surface-1 full-height rounded bordered scroll row">
-        <div
-          class="col"
-          style="height: 100%; max-height: 100; overflow-y: auto"
-          v-if="$q.screen.gt.sm"
-        >
-          <div class="q-py-md q-pl-md q-pr-sm">
-            <SideMenu
-              :menu="[
-                {
-                  name: $t('form.field.basicInformation'),
-                  anchor: 'form-basic-info-customer',
-                },
-                {
-                  name: $t('customer.form.group.branch'),
-                  anchor: 'form-branch-customer-branch',
-                  useBtn: true,
-                },
-                ...(customerFormData.customerBranch?.map((v, i) => ({
-                  name:
-                    i === 0
-                      ? $t('customer.form.headQuarters.title')
-                      : $t('customer.form.branch.title', {
-                          name: i,
-                        }),
-                  anchor: `form-branch-customer-no-${i}`,
-                  sub: true,
-                })) || []),
-              ]"
-              background="transparent"
-              :active="{
-                background: 'hsla(var(--blue-6-hsl) / .2)',
-                foreground: 'var(--blue-6)',
-              }"
-              scroll-element="#customer-form-content"
-            >
-              <template v-slot:btn-form-branch-customer-branch>
-                <q-btn
-                  dense
-                  flat
-                  icon="mdi-plus"
-                  size="sm"
-                  rounded
-                  padding="0px 0px"
-                  style="color: var(--stone-9)"
-                  @click.stop="customerFormStore.addCurrentCustomerBranch()"
-                  v-if="
-                    customerFormState.branchIndex === -1 &&
-                    !!customerFormState.editCustomerId &&
-                    customerFormState.dialogType !== 'create'
-                  "
-                  :disabled="!customerFormState.readonly"
-                />
-              </template>
-            </SideMenu>
-          </div>
-        </div>
-        <div
-          class="col-12 col-md-10"
-          :class="{
-            'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-pa-sm': !$q.screen.gt.sm,
-          }"
-          id="customer-form-content"
-          style="height: 100%; max-height: 100%; overflow-y: auto"
-        >
-          <EmployerFormBasicInfo
-            prefixId="form"
-            v-if="
-              customerFormData.customerBranch !== undefined &&
-              customerFormData.customerBranch.length > 0
-            "
-            class="q-mb-xl"
-            :readonly="
-              (customerFormState.dialogType === 'edit' &&
-                customerFormState.readonly === true) ||
-              customerFormState.dialogType === 'info'
-            "
-            :action-disabled="customerFormState.branchIndex !== -1"
-            id="form-basic-info-customer"
-            :onCreate="customerFormState.dialogType === 'create'"
-            @edit="
-              ((customerFormState.dialogType = 'edit'),
-              (customerFormState.readonly = false))
-            "
-            @cancel="() => customerFormUndo(false)"
-            @delete="
-              customerFormState.editCustomerId &&
-              deleteCustomerById(
-                customerFormState.editCustomerId,
-                async () => await fetchListCustomer(true, $q.screen.xs),
-              )
-            "
-            :customer-type="customerFormData.customerType"
-            v-model:registered-branch-id="customerFormData.registeredBranchId"
-            v-model:customer-name="customerNameInfo"
-            v-model:register-name="
-              customerFormData.customerBranch[0].registerName
-            "
-            v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
-            v-model:legal-person-no="
-              customerFormData.customerBranch[0].legalPersonNo
-            "
-            v-model:business-type="
-              customerFormData.customerBranch[0].businessType
-            "
-            v-model:job-position="
-              customerFormData.customerBranch[0].jobPosition
-            "
-            v-model:telephone-no="
-              customerFormData.customerBranch[0].telephoneNo
-            "
-            v-model:branch-options="registerAbleBranchOption"
-          />
-          <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
-            <div class="col-12 text-weight-bold text-body1 row items-center">
-              <q-icon
-                flat
-                size="xs"
-                class="q-pa-sm rounded q-mr-xs"
-                color="info"
-                name="mdi-briefcase-outline"
-                style="background-color: var(--surface-3)"
-              />
-              <span>{{ $t('customer.form.group.branch') }}</span>
-            </div>
-
-            <template
-              v-for="(_, idx) in customerFormData.customerBranch"
-              :key="idx"
-            >
-              <!-- v-if="customerFormData.customerBranch" -->
-              <q-form
-                class="full-width"
-                greedy
-                @submit.prevent="
-                  async () => {
-                    if (!customerFormData.customerBranch) return;
-
-                    if (customerFormData.customerType === 'PERS') {
-                      tabFieldRequired.main = [
-                        'citizenId',
-                        'namePrefix',
-                        'firstName',
-                        'firstNameEN',
-                        'lastName',
-                        'lastNameEN',
-                        'gender',
-                        'birthDate',
-                      ];
-                    }
-                    if (customerFormData.customerType === 'CORP') {
-                      tabFieldRequired.main = ['legalPersonNo', 'registerName'];
-                    }
-                    let tapIsUndefined = validateTabField(
-                      customerFormData.customerBranch?.[idx],
-                      tabFieldRequired,
-                    );
-
-                    if (tapIsUndefined.length > 0) {
-                      return dialog({
-                        color: 'warning',
-                        icon: 'mdi-alert',
-                        title: t('dialog.title.incompleteDataEntry'),
-                        actionText: t('general.ok'),
-                        persistent: true,
-                        message: t('dialog.message.incompleteDataEntry', {
-                          tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
-                        }),
-                        action: async () => {
-                          return;
-                        },
-                      });
-                    }
-                    if (!customerFormData.customerBranch[idx].id) {
-                      let res;
-                      if (idx === 0) {
-                        res =
-                          await customerFormStore.submitFormCustomer(
-                            onCreateImageList,
-                          );
-                      } else {
-                        res = await customerStore.createBranch({
-                          ...customerFormData.customerBranch[idx],
-                          customerId: customerFormState.editCustomerId || '',
-                          id: undefined,
-                        });
-                      }
-                      if (res) {
-                        customerFormState.readonly = true;
-                        notify('create', $t('general.success'));
-                      }
-                    } else {
-                      if (!customerFormState.editCustomerId) return;
-                      await customerStore.editBranchById(
-                        customerFormData.customerBranch[idx].id || '',
-                        {
-                          ...customerFormData.customerBranch[idx],
-                          id: undefined,
-                        },
-                      );
-                    }
-
-                    const uploadResult =
-                      customerFormData.customerBranch[idx].file?.map(
-                        async (v) => {
-                          if (!v.file) return;
-
-                          const ext = v.file.name.split('.').at(-1);
-                          let filename = v.group + '-' + new Date().getTime();
-                          if (ext) filename += `.${ext}`;
-
-                          const res = await customerStore.putAttachment({
-                            branchId:
-                              customerFormData.customerBranch?.[idx].id || '',
-                            file: v.file,
-                            filename,
-                          });
-
-                          if (res) {
-                            await customerFormStore.assignFormData(
-                              customerFormState.editCustomerId,
-                            );
-                          }
-                        },
-                      ) || [];
-
-                    for (const r of uploadResult) await r;
-
-                    await customerFormStore.assignFormData(
-                      customerFormState.editCustomerId,
-                    );
-
-                    await fetchListCustomer(true, $q.screen.xs);
-                    customerFormStore.resetForm();
-                  }
-                "
-              >
-                <!-- v-if="!!customerFormState.editCustomerId" -->
-
-                <EmployerFormBranch
-                  :index="idx"
-                  prefixId="form"
-                  v-if="customerFormData.customerBranch"
-                  v-model:customer="customerFormData"
-                  v-model:customer-branch="customerFormData.customerBranch[idx]"
-                  :onCreate="customerFormState.dialogType === 'create'"
-                  :customer-type="customerFormData.customerType"
-                  :readonly="customerFormState.branchIndex !== idx"
-                  :action-disabled="
-                    !customerFormState.readonly ||
-                    (customerFormState.branchIndex !== -1 &&
-                      customerFormState.branchIndex !== idx)
-                  "
-                  @edit="() => (customerFormState.branchIndex = idx)"
-                  @cancel="() => customerFormUndo(false)"
-                  @delete="
-                    async () => {
-                      if (!customerFormState.editCustomerId) return;
-
-                      if (idx === 0) {
-                        deleteCustomerById(
-                          customerFormState.editCustomerId,
-                          async () =>
-                            await fetchListCustomer(true, $q.screen.xs),
-                        );
-                        return;
-                      }
-                      if (!!customerFormData.customerBranch?.[idx].id) {
-                        const action = await deleteCustomerBranchById(
-                          customerFormData.customerBranch[idx].id || '',
-                        );
-                        if (action) {
-                          await customerFormStore.assignFormData(
-                            customerFormState.editCustomerId,
-                          );
-                        }
-                        customerFormStore.resetForm();
-                      }
-                    }
-                  "
-                  @save="() => {}"
-                />
-              </q-form>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </DialogContainer>
-
-  <!-- add employee -->
-  <DialogForm
-    hideFooter
-    :title="$t('form.title.create', { name: $t('customer.employee') })"
-    v-model:modal="employeeFormState.dialogModal"
-    :undo="() => employeeFormUndo(false)"
-    :submit="
-      async () => {
-        if (employeeFormState.currentTab === 'personalInfo') {
-          await employeeFormStore.submitPersonal(onCreateImageList);
-          employeeFormState.isEmployeeEdit = false;
-          employeeFormState.dialogType = 'info';
-        }
-
-        if (employeeFormState.currentTab === 'passport') {
-          await employeeFormStore.submitPassport();
-        }
-
-        if (employeeFormState.currentTab === 'visa') {
-          await employeeFormStore.submitVisa();
-        }
-
-        if (employeeFormState.currentTab === 'healthCheck') {
-          await employeeFormStore.submitHealthCheck();
-        }
-
-        if (employeeFormState.currentTab === 'workHistory') {
-          await employeeFormStore.submitWorkHistory();
-        }
-
-        if (employeeFormState.currentTab === 'other') {
-          await employeeFormStore.submitOther();
-        }
-        statusEmployeeCreate = true;
-        employeeFormState.isEmployeeEdit = false;
-
-        if (route.name !== 'CustomerBranchManagement') {
-          await fetchListEmployee(
-            currentTab === 'employer'
-              ? {
-                  page: 1,
-                  pageSize: 999,
-                  customerId: customerFormState.currentCustomerId,
-                }
-              : { fetchStats: true, mobileFetch: $q.screen.xs },
-          );
-
-          flowStore.rotate();
-        }
-      }
-    "
-    :show="
-      () => {
-        employeeFormStore.resetFormDataEmployee(true);
-      }
-    "
-    :before-close="
-      () => {
-        if (employeeFormStore.isFormDataDifferent()) {
-          employeeConfirmUnsave();
-          return true;
-        } else {
-          if ($q.screen.gt.xs) fetchListEmployee();
-        }
-
-        employeeFormState.currentTab = 'personalInfo';
-        return false;
-      }
-    "
-  >
-    <div
-      :class="{
-        'q-mx-lg q-my-md': $q.screen.gt.sm,
-        'q-mx-md q-my-sm': !$q.screen.gt.sm,
-      }"
-    >
-      <ProfileBanner
-        active
-        useToggle
-        prefix="dialog"
-        color="white"
-        icon="mdi-account-plus-outline"
-        :bg-color="
-          employeeFormState.profileUrl
-            ? 'white'
-            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
-        "
-        v-model:current-tab="employeeFormState.currentTab"
-        v-model:toggle-status="currentFromDataEmployee.status"
-        fallbackCover="/images/employee-banner.png"
-        :img="
-          `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
-            refreshImageState ? `?ts=${Date.now()}` : '',
-          ) || null
-        "
-        :fallbackImg="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
-        :tabs-list="
-          [
-            {
-              name: 'personalInfo',
-              label: $t('customerEmployee.form.group.personalInfo'),
-            },
-            {
-              name: 'passport',
-              label: $t('customerEmployee.fileType.passport'),
-            },
-            {
-              name: 'visa',
-              label: $t('customerEmployee.form.group.visa'),
-            },
-
-            {
-              name: 'healthCheck',
-              label: $t('customerEmployee.form.group.healthCheck'),
-            },
-            {
-              name: 'workHistory',
-              label: $t('customerEmployee.form.group.workHistory'),
-            },
-            { name: 'other', label: $t('customerEmployee.form.group.other') },
-          ].filter((v) => {
-            if (!employeeFormState.statusSavePersonal) {
-              return v.name === 'personalInfo';
-            }
-
-            return true;
-          })
-        "
-        :toggleTitle="$t('status.title')"
-        hideFade
-        :title="
-          currentFromDataEmployee
-            ? setPrefixName(
-                {
-                  namePrefix: currentFromDataEmployee.namePrefix,
-                  firstName: currentFromDataEmployee.firstName,
-                  lastName: currentFromDataEmployee.lastName,
-                  firstNameEN: currentFromDataEmployee.firstNameEN,
-                  lastNameEN: currentFromDataEmployee.lastNameEN,
-                },
-                { locale },
-              )
-            : '-'
-        "
-        @view="
-          () => {
-            employeeFormState.imageDialog = true;
-            employeeFormState.isImageEdit = false;
-          }
-        "
-        @edit="
-          employeeFormState.imageDialog = employeeFormState.isImageEdit = true
-        "
-        @update:toggle-status="
-          () => {
-            currentFromDataEmployee.status =
-              currentFromDataEmployee.status === 'CREATED'
-                ? 'INACTIVE'
-                : 'CREATED';
-          }
-        "
-      />
-    </div>
-
-    <div
-      style="flex: 1; width: 100%; overflow-y: auto"
-      :class="{
-        'q-px-lg q-pb-lg': $q.screen.gt.sm,
-        'q-px-md q-pb-sm': !$q.screen.gt.sm,
-      }"
-      id="drawer-employee-form"
-    >
-      <div
-        class="col surface-1 full-height rounded bordered scroll row relative-position"
-        :key="String(!employeeFormState.isEmployeeEdit)"
-      >
-        <div
-          class="col"
-          style="height: 100%; max-height: 100; overflow-y: auto"
-          v-if="$q.screen.gt.sm"
-        >
-          <div class="q-py-md q-pl-md q-pr-sm">
-            <SideMenu
-              :menu="
-                [
-                  {
-                    name: $t('form.field.basicInformation'),
-                    anchor: 'form-information',
-                    tab: 'personalInfo',
-                  },
-                  {
-                    name: $t('customerEmployee.form.group.personalInfo'),
-                    anchor: 'form-personal',
-                    tab: 'personalInfo',
-                  },
-                  {
-                    name: $t('general.address'),
-                    anchor: 'form-personal-address',
-                    tab: 'personalInfo',
-                  },
-                  {
-                    name: $t('general.uploadFile'),
-                    anchor: 'form-info-file-upload',
-                    tab: 'personalInfo',
-                  },
-
-                  {
-                    name: $t('customerEmployee.form.group.passport'),
-                    anchor: 'form-passport',
-                    tab: 'passport',
-                    useBtn:
-                      currentFromDataEmployee.employeePassport?.filter(
-                        (item) => {
-                          if (item.id === undefined) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      ).length === 0 &&
-                      employeeFormState.currentIndexPassport === -1
-                        ? true
-                        : false,
-                  },
-                  ...(currentFromDataEmployee.employeePassport?.map((v, i) => ({
-                    name: dateFormat(v.expireDate),
-                    anchor: `form-employee-employeePassport-${i}`,
-                    tab: 'passport',
-                    sub: true,
-                  })) || []),
-
-                  {
-                    name: $t('customerEmployee.form.group.visa'),
-                    anchor: 'form-visa',
-                    tab: 'visa',
-                    useBtn:
-                      currentFromDataEmployee.employeeVisa?.filter((item) => {
-                        if (item.id === undefined) {
-                          return true;
-                        }
-                        return false;
-                      }).length === 0 &&
-                      employeeFormState.currentIndexVisa === -1
-                        ? true
-                        : false,
-                  },
-
-                  ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
-                    name: dateFormat(v.expireDate),
-                    anchor: `form-employee-visa-${i}`,
-                    tab: 'visa',
-                    sub: true,
-                  })) || []),
-
-                  {
-                    name: $t('customerEmployee.form.group.healthCheck'),
-                    anchor: 'form-employee-checkup',
-                    tab: 'healthCheck',
-                    useBtn:
-                      currentFromDataEmployee.employeeCheckup?.filter(
-                        (item) => {
-                          if (item.id === undefined) {
-                            return true;
-                          }
-                          return false;
-                        },
-                      ).length === 0 &&
-                      employeeFormState.currentIndexCheckup === -1
-                        ? true
-                        : false,
-                  },
-
-                  ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
-                    name: $t('general.times', { number: i + 1 }),
-                    anchor: `form-employee-checkup-${i}`,
-                    tab: 'healthCheck',
-                  })) || []),
-
-                  {
-                    name: $t('customerEmployee.form.group.workHistory'),
-                    anchor: 'form-employee-work-history',
-                    tab: 'workHistory',
-                    useBtn:
-                      currentFromDataEmployee.employeeWork?.filter((item) => {
-                        if (item.id === undefined) {
-                          return true;
-                        }
-                        return false;
-                      }).length === 0 &&
-                      employeeFormState.currentIndexWorkHistory === -1
-                        ? true
-                        : false,
-                  },
-
-                  ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
-                    name: $t('general.times', { number: i + 1 }),
-                    anchor: `form-employee-work-history-${i}`,
-                    tab: 'workHistory',
-                  })) || []),
-
-                  {
-                    name: $t('customerEmployee.form.group.family'),
-                    anchor: 'form-employee-other',
-                    tab: 'other',
-                  },
-                ].filter((v) => v.tab === employeeFormState.currentTab)
-              "
-              background="transparent"
-              :active="{
-                background: 'hsla(var(--blue-6-hsl) / .2)',
-                foreground: 'var(--blue-6)',
-              }"
-              scroll-element="#employee-form-content"
-            >
-              <template v-slot:btn-form-passport>
-                <q-btn
-                  id="form-add-passport"
-                  dense
-                  flat
-                  icon="mdi-plus"
-                  size="sm"
-                  rounded
-                  padding="0px 0px"
-                  style="color: var(--stone-9)"
-                  @click.stop="employeeFormStore.addPassport()"
-                />
-              </template>
-
-              <template v-slot:btn-form-visa>
-                <q-btn
-                  id="form-add-visa"
-                  dense
-                  flat
-                  icon="mdi-plus"
-                  size="sm"
-                  rounded
-                  style="color: var(--stone-9)"
-                  @click.stop="employeeFormStore.addVisa()"
-                />
-              </template>
-
-              <template v-slot:btn-form-employee-checkup>
-                <q-btn
-                  id="form-add-checkup"
-                  dense
-                  flat
-                  icon="mdi-plus"
-                  size="sm"
-                  rounded
-                  style="color: var(--stone-9)"
-                  @click.stop="employeeFormStore.addCheckup()"
-                />
-              </template>
-
-              <template v-slot:btn-form-employee-work-history>
-                <q-btn
-                  id="form-add-work-history"
-                  dense
-                  flat
-                  icon="mdi-plus"
-                  size="sm"
-                  rounded
-                  style="color: var(--stone-9)"
-                  @click.stop="employeeFormStore.addWorkHistory()"
-                />
-              </template>
-            </SideMenu>
-          </div>
-        </div>
-
-        <div
-          class="col-12 col-md-10"
-          :class="{
-            'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-pa-sm': !$q.screen.gt.sm,
-          }"
-          id="employee-form-content"
-          style="height: 100%; max-height: 100; overflow-y: auto"
-        >
-          <template v-if="employeeFormState.currentTab === 'personalInfo'">
-            <div
-              class="rounded row q-py-md q-px-md"
-              style="position: absolute; z-index: 999; top: 0; right: 0"
-            >
-              <div class="surface-1 row rounded">
-                <UndoButton
-                  v-if="
-                    employeeFormState.isEmployeeEdit &&
-                    employeeFormState.dialogType !== 'create'
-                  "
-                  id="btn-info-basic-undo"
-                  icon-only
-                  @click="
-                    () => {
-                      employeeFormStore.resetFormDataEmployee();
-                      employeeFormState.isEmployeeEdit = false;
-                      employeeFormState.dialogType = 'info';
-                    }
-                  "
-                  type="button"
-                />
-                <SaveButton
-                  v-if="employeeFormState.isEmployeeEdit"
-                  id="btn-info-basic-save"
-                  icon-only
-                  type="submit"
-                />
-                <EditButton
-                  v-if="!employeeFormState.isEmployeeEdit"
-                  id="btn-info-basic-edit"
-                  icon-only
-                  @click="
-                    () => {
-                      employeeFormState.isEmployeeEdit = true;
-                      employeeFormState.dialogType = 'edit';
-                    }
-                  "
-                  type="button"
-                />
-                <DeleteButton
-                  v-if="!employeeFormState.isEmployeeEdit"
-                  id="btn-info-basic-delete"
-                  icon-only
-                  @click="
-                    () =>
-                      deleteEmployeeById({
-                        id: currentFromDataEmployee.id,
-                        fetch: async () =>
-                          await fetchListEmployee(
-                            currentTab === 'employer'
-                              ? {
-                                  page: 1,
-                                  pageSize: 999,
-                                  customerId:
-                                    customerFormState.currentCustomerId,
-                                }
-                              : {
-                                  fetchStats: true,
-                                  mobileFetch: $q.screen.xs,
-                                },
-                          ),
-                      })
-                  "
-                  type="button"
-                />
-              </div>
-            </div>
-
-            <BasicInformation
-              no-action
-              id="form-information"
-              prefix-id="form-employee"
-              :show-btn-save="employeeFormState.dialogType === 'create'"
-              employee
-              dense
-              outlined
-              separator
-              title="form.field.basicInformation"
-              :readonly="!employeeFormState.isEmployeeEdit"
-              :employee-owner-option="employeeStore.ownerOption || []"
-              v-model:customer-branch-id="employeeFormState.currentBranchId"
-              v-model:current-customer-branch="
-                employeeFormState.currentCustomerBranch
-              "
-              v-model:employee-id="employeeFormState.currentEmployeeCode"
-              v-model:nrc-no="currentFromDataEmployee.nrcNo"
-              v-model:code="currentFromDataEmployee.code"
-              class="q-mb-xl"
-            />
-            <FormPerson
-              id="form-personal"
-              prefix-id="form-employee"
-              dense
-              outlined
-              employee
-              separator
-              title="customerEmployee.form.group.personalInfo"
-              :readonly="!employeeFormState.isEmployeeEdit"
-              v-model:open="employeeFormState.dialogModal"
-              v-model:prefix-name="currentFromDataEmployee.namePrefix"
-              v-model:first-name="currentFromDataEmployee.firstName"
-              v-model:last-name="currentFromDataEmployee.lastName"
-              v-model:first-name-en="currentFromDataEmployee.firstNameEN"
-              v-model:last-name-en="currentFromDataEmployee.lastNameEN"
-              v-model:mid-name="currentFromDataEmployee.middleName"
-              v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
-              v-model:gender="currentFromDataEmployee.gender"
-              v-model:birth-date="currentFromDataEmployee.dateOfBirth"
-              v-model:nationality="currentFromDataEmployee.nationality"
-              class="q-mb-xl"
-            />
-            <AddressForm
-              disabledRule
-              id="form-personal-address"
-              prefix-id="form-employee"
-              :readonly="!employeeFormState.isEmployeeEdit"
-              v-model:same-with-employer="
-                employeeFormState.formDataEmployeeSameAddr
-              "
-              v-model:address="currentFromDataEmployee.address"
-              v-model:address-en="currentFromDataEmployee.addressEN"
-              v-model:moo="currentFromDataEmployee.moo"
-              v-model:moo-en="currentFromDataEmployee.mooEN"
-              v-model:soi="currentFromDataEmployee.soi"
-              v-model:soi-en="currentFromDataEmployee.soiEN"
-              v-model:street="currentFromDataEmployee.street"
-              v-model:street-en="currentFromDataEmployee.streetEN"
-              v-model:province-id="currentFromDataEmployee.provinceId"
-              v-model:district-id="currentFromDataEmployee.districtId"
-              v-model:sub-district-id="currentFromDataEmployee.subDistrictId"
-              employee
-              dense
-              class="q-mb-xl"
-            />
-
-            <div class="row q-mb-md" id="form-info-file-upload">
-              <div class="col-12 q-pb-sm text-weight-bold text-body1">
-                <q-icon
-                  flat
-                  size="xs"
-                  class="q-pa-sm rounded q-mr-xs"
-                  color="info"
-                  name="mdi-upload"
-                  style="background-color: var(--surface-3)"
-                />
-                {{ $t(`general.uploadFile`) }}
-              </div>
-              <!-- สร้างลูกจ้าง -->
-              <UploadFileGroup
-                v-model:current-id="currentFromDataEmployee.id"
-                v-model="currentFromDataEmployee.file"
-                hide-action
-                :readonly="!employeeFormState.isEmployeeEdit"
-                :menu="uploadFileListEmployee"
-                :columns="columnsAttachment"
-                @submit="
-                  async (group, allMeta) => {
-                    if (allMeta === undefined) return;
-
-                    if (group === 'passport') {
-                      const fullName = allMeta['full_name'].split(' ');
-                      let tempValue: {
-                        oldData: { nameField: string; value: string }[];
-                        newData: { nameField: string; value: string }[];
-                      } = { oldData: [], newData: [] };
-
-                      if (
-                        currentFromDataEmployee.gender !== '' &&
-                        currentFromDataEmployee.gender !== allMeta['sex']
-                      ) {
-                        tempValue.oldData.push({
-                          nameField: $t('form.gender'),
-                          value: $t(
-                            `general.${currentFromDataEmployee.gender}`,
-                          ),
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('form.gender'),
-                          value: $t(`general.${allMeta['sex']}`),
-                        });
-                      }
-
-                      if (currentFromDataEmployee.firstName !== '') {
-                        tempValue.oldData.push({
-                          nameField: $t('personnel.form.firstName'),
-                          value: currentFromDataEmployee.firstName,
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('personnel.form.firstName'),
-                          value: fullName[0],
-                        });
-                      }
-
-                      if (currentFromDataEmployee.lastName !== '') {
-                        tempValue.oldData.push({
-                          nameField: $t('personnel.form.lastName'),
-                          value: currentFromDataEmployee.lastName,
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('personnel.form.lastName'),
-                          value: fullName[1],
-                        });
-                      }
-
-                      if (currentFromDataEmployee.nationality !== '') {
-                        tempValue.oldData.push({
-                          nameField: $t('general.nationality'),
-                          value: currentFromDataEmployee.nationality || '',
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('general.nationality'),
-                          value: allMeta['nationality'],
-                        });
-                      }
-
-                      dialogCheckData({
-                        action: async () => {
-                          currentFromDataEmployee.gender = allMeta['sex'];
-                          currentFromDataEmployee.firstName = fullName[0];
-                          currentFromDataEmployee.lastName = fullName[1];
-                          currentFromDataEmployee.nationality =
-                            allMeta['nationality'];
-                        },
-                        checkData: () => {
-                          return tempValue;
-                        },
-                        cancel: () => {
-                          if (!currentFromDataEmployee.gender) {
-                            currentFromDataEmployee.gender = allMeta['gender'];
-                          }
-                          if (!currentFromDataEmployee.firstName) {
-                            currentFromDataEmployee.firstName = fullName[0];
-                          }
-                          if (!currentFromDataEmployee.firstName) {
-                            currentFromDataEmployee.firstName = fullName[0];
-                          }
-                          if (!currentFromDataEmployee.lastName) {
-                            currentFromDataEmployee.lastName = fullName[1];
-                          }
-
-                          if (!currentFromDataEmployee.nationality) {
-                            currentFromDataEmployee.nationality =
-                              allMeta['nationality'];
-                          }
-                        },
-                      });
-                    }
-                  }
-                "
-                :ocr="
-                  async (group, file) => {
-                    if (group === 'passport') {
-                      mrz = await runOcr(file, parseResultMRZ);
-
-                      if (mrz !== null) {
-                        const mapMrz = Object.entries(mrz.result || {}).map(
-                          ([key, value]) => ({
-                            name: key,
-                            value: value,
-                          }),
-                        );
-                        const tempValue = {
-                          status: true,
-                          group,
-                          meta: mapMrz,
-                        };
-
-                        return tempValue;
-                      }
-                    }
-                    if (group === 'visa') {
-                      const res = await ocrStore.sendOcr({
-                        file: file,
-                        category: group,
-                      });
-
-                      if (res) {
-                        const tempValue = {
-                          status: true,
-                          group,
-                          meta: res.fields,
-                        };
-
-                        return tempValue;
-                      }
-                    }
-
-                    return { status: true, group, meta: [] };
-                  }
-                "
-                :auto-save="currentFromDataEmployee.id !== ''"
-                :download="
-                  (obj) => {
-                    if (obj.group !== 'attachment') {
-                      employeeStore.getFile({
-                        parentId: currentFromDataEmployee.id || '',
-                        group: obj.group,
-                        fileId: obj._meta.id,
-                        download: true,
-                      });
-                    } else {
-                      employeeStore.getAttachment({
-                        parentId: currentFromDataEmployee.id || '',
-                        name: obj._meta.name,
-                        download: true,
-                      });
-                    }
-                  }
-                "
-                :delete-item="
-                  async (obj) => {
-                    let status: boolean = false;
-                    const res = await employeeStore.delMeta({
-                      parentId: currentFromDataEmployee.id || '',
-                      group: obj.group,
-                      metaId: obj._meta.id,
-                    });
-
-                    if (res) {
-                      status = true;
-                    }
-
-                    await employeeFormStore.assignFormDataEmployee(
-                      currentFromDataEmployee.id,
-                    );
-
-                    return status;
-                  }
-                "
-                :save="
-                  async (
-                    group: 'passport' | 'visa' | 'attachment',
-                    _meta: any,
-                    file: File | undefined,
-                  ) => {
-                    let status: boolean = false;
-                    if (group !== 'attachment') {
-                      if (file !== undefined && currentFromDataEmployee.id) {
-                        const res = await employeeStore.postMeta({
-                          parentId: currentFromDataEmployee.id || '',
-                          group,
-                          meta: _meta,
-                          file,
-                        });
-
-                        if (res) {
-                          status = true;
-                        }
-                      } else {
-                        const {
-                          id,
-                          employeeId,
-                          createdAt,
-                          updatedAt,
-                          ...payload
-                        } = _meta;
-
-                        const res = await employeeStore.putMeta({
-                          parentId: currentFromDataEmployee.id || '',
-                          group,
-                          metaId: _meta.id,
-                          meta: payload,
-                          file,
-                        });
-                        if (res) {
-                          status = true;
-                        }
-                      }
-                    } else {
-                      if (file !== undefined) {
-                        await employeeStore.uploadAttachment(
-                          currentFromDataEmployee.id || '',
-                          file,
-                          file.name,
-                        );
-                        status = true;
-                      }
-                    }
-                    await employeeFormStore.assignFormDataEmployee(
-                      currentFromDataEmployee.id,
-                    );
-                    return status;
-                  }
-                "
-                :get-file-list="
-                  async (group: 'passport' | 'visa' | 'attachment') => {
-                    if (
-                      !!currentFromDataEmployee.id &&
-                      group !== 'attachment'
-                    ) {
-                      const resMeta = await employeeStore.getMetaList({
-                        parentId: currentFromDataEmployee.id,
-                        group,
-                      });
-
-                      const tempValue = resMeta.map(async (i: any) => {
-                        return {
-                          _meta: { ...i },
-                          name: `${group}-${dateFormat(i.expireDate)}` || '',
-                          group: group,
-                          url: await employeeStore.getFile({
-                            parentId: currentFromDataEmployee.id || '',
-                            group,
-                            fileId: i.id,
-                          }),
-                          file: undefined,
-                        };
-                      });
-
-                      return await waitAll(tempValue);
-                    } else {
-                      const res = await employeeStore.listAttachment({
-                        parentId: currentFromDataEmployee.id || '',
-                      });
-
-                      const tempValue = (res as string[]).map(
-                        async (i: any) => {
-                          return {
-                            _meta: { id: i, name: i },
-                            name: i || '',
-                            group: group,
-                            url: await employeeStore.getAttachment({
-                              parentId: currentFromDataEmployee.id || '',
-                              name: i,
-                            }),
-                            file: undefined,
-                          };
-                        },
-                      );
-
-                      return await waitAll(tempValue);
-                    }
-                  }
-                "
-              >
-                <template #form="{ mode, meta, isEdit }">
-                  <FormEmployeePassport
-                    v-if="mode === 'passport' && meta"
-                    prefix-id="drawer-info-employee"
-                    id="form-passport"
-                    dense
-                    outlined
-                    separator
-                    ocr
-                    :title="$t('customerEmployee.form.group.passport')"
-                    :readonly="!isEdit"
-                    v-model:birth-country="meta.birthCountry"
-                    v-model:previous-passportRef="meta.previousPassportRef"
-                    v-model:issue-place="meta.issuePlace"
-                    v-model:issue-country="meta.issueCountry"
-                    v-model:issue-date="meta.issueDate"
-                    v-model:type="meta.type"
-                    v-model:expire-date="meta.expireDate"
-                    v-model:birth-date="meta.birthDate"
-                    v-model:worker-status="meta.workerStatus"
-                    v-model:nationality="meta.nationality"
-                    v-model:gender="meta.gender"
-                    v-model:last-name-en="meta.lastNameEN"
-                    v-model:last-name="meta.lastName"
-                    v-model:middle-name-en="meta.middleNameEN"
-                    v-model:middle-name="meta.middleName"
-                    v-model:first-name-en="meta.firstNameEN"
-                    v-model:first-name="meta.firstName"
-                    v-model:name-prefix="meta.namePrefix"
-                    v-model:passport-number="meta.number"
-                  />
-                  <FormEmployeeVisa
-                    v-if="mode === 'visa' && meta"
-                    prefix-id="drawer-info-employee"
-                    id="form-visa"
-                    ocr
-                    dense
-                    outlined
-                    title="customerEmployee.form.group.visa"
-                    :readonly="!isEdit"
-                    v-model:arrival-at="meta.arrivalAt"
-                    v-model:arrival-tm-no="meta.arrivalTMNo"
-                    v-model:arrival-tm="meta.arrivalTM"
-                    v-model:mrz="meta.mrz"
-                    v-model:entry-count="meta.entryCount"
-                    v-model:issue-place="meta.issuePlace"
-                    v-model:issue-country="meta.issueCountry"
-                    v-model:issueDate="meta.issueDate"
-                    v-model:type="meta.type"
-                    v-model:expire-date="meta.expireDate"
-                    v-model:visa-issue-date="meta.issueDate"
-                    v-model:visa-expiry-date="meta.expireDate"
-                    v-model:remark="meta.remark"
-                    v-model:worker-type="meta.workerType"
-                    v-model:number="meta.number"
-                  />
-
-                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
-                </template>
-              </UploadFileGroup>
-            </div>
-          </template>
-
-          <template v-if="employeeFormState.currentTab === 'passport'">
-            <div class="q-gutter-sm">
-              <div
-                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
-              >
-                <q-icon
-                  flat
-                  size="xs"
-                  class="q-pa-sm rounded q-mr-xs"
-                  color="info"
-                  name="mdi-passport"
-                  style="background-color: var(--surface-3)"
-                />
-                {{ $t('customerEmployee.form.group.passport') }}
-                <AddButton
-                  v-if="$q.screen.lt.md"
-                  id="btn-add-work"
-                  icon-only
-                  class="q-ml-sm"
-                  :disabled="
-                    currentFromDataEmployee.employeePassport?.filter((item) => {
-                      if (item.id === undefined) {
-                        return false;
-                      }
-                      return true;
-                    }).length === 0 &&
-                    employeeFormState.currentIndexPassport === -1
-                      ? false
-                      : true
-                  "
-                  @click.stop="employeeFormStore.addPassport()"
-                />
-              </div>
-
-              <FormEmployeePassport
-                v-for="(
-                  value, index
-                ) in currentFromDataEmployee.employeePassport"
-                prefix-id="drawer-info-employee"
-                :key="index"
-                id="form-passport"
-                hide-title
-                dense
-                outlined
-                separator
-                :title="$t('customerEmployee.form.group.passport')"
-                :readonly="employeeFormState.currentIndexPassport !== index"
-                :full-name="employeeFormState.currentIndexPassport !== index"
-                v-model:birth-country="value.birthCountry"
-                v-model:previous-passportRef="value.previousPassportRef"
-                v-model:issue-place="value.issuePlace"
-                v-model:issue-country="value.issueCountry"
-                v-model:issue-date="value.issueDate"
-                v-model:type="value.type"
-                v-model:expire-date="value.expireDate"
-                v-model:birth-date="value.birthDate"
-                v-model:worker-status="value.workerStatus"
-                v-model:nationality="value.nationality"
-                v-model:gender="value.gender"
-                v-model:last-name-en="value.lastNameEN"
-                v-model:last-name="value.lastName"
-                v-model:middle-name-en="value.middleNameEN"
-                v-model:middle-name="value.middleName"
-                v-model:first-name-en="value.firstNameEN"
-                v-model:first-name="value.firstName"
-                v-model:name-prefix="value.namePrefix"
-                v-model:passport-number="value.number"
-              >
-                <template v-slot:expiryDate>
-                  {{ $t('general.expirationDate') }} :
-                  {{ dateFormat(value.expireDate) }}
-                  <ExpirationDate
-                    v-if="value.id !== undefined"
-                    :expiration-date="value.expireDate"
-                  />
-                </template>
-
-                <template v-slot:button>
-                  <div class="surface-1 row rounded" style="min-height: 35px">
-                    <UndoButton
-                      v-if="
-                        employeeFormState.isEmployeeEdit &&
-                        !(employeeFormState.currentIndexPassport === -1) &&
-                        employeeFormState.currentIndexPassport === index
-                      "
-                      id="btn-info-basic-undo"
-                      icon-only
-                      @click="
-                        () => {
-                          employeeFormStore.resetFormDataEmployee();
-                          employeeFormState.isEmployeeEdit = false;
-                          employeeFormState.dialogType = 'info';
-                          employeeFormState.currentIndexPassport = -1;
-                        }
-                      "
-                      type="button"
-                    />
-                    <SaveButton
-                      v-if="
-                        (employeeFormState.isEmployeeEdit ||
-                          value.id === undefined) &&
-                        !(employeeFormState.currentIndexPassport === -1) &&
-                        employeeFormState.currentIndexPassport === index
-                      "
-                      id="btn-info-basic-save"
-                      icon-only
-                      @click="
-                        () => {
-                          employeeFormState.currentIndexPassport = index;
-                        }
-                      "
-                      type="submit"
-                    />
-
-                    <EditButton
-                      v-if="
-                        employeeFormState.currentIndexPassport === -1 ||
-                        (!employeeFormState.isEmployeeEdit &&
-                          value.id !== undefined &&
-                          employeeFormState.currentIndexPassport === index)
-                      "
-                      id="btn-info-basic-edit"
-                      icon-only
-                      @click="
-                        () => {
-                          employeeFormState.currentIndexPassport = index;
-                          employeeFormState.isEmployeeEdit = true;
-                          employeeFormState.dialogType = 'edit';
-                        }
-                      "
-                      type="button"
-                    />
-                    <DeleteButton
-                      v-if="
-                        employeeFormState.currentIndexPassport === -1 ||
-                        (!employeeFormState.isEmployeeEdit &&
-                          value.id !== undefined &&
-                          !(employeeFormState.currentIndexPassport === -1) &&
-                          employeeFormState.currentIndexPassport === index)
-                      "
-                      id="btn-info-basic-delete"
-                      icon-only
-                      @click.stop="
-                        () => {
-                          employeeFormState.currentIndexPassport = index;
-                          deleteEmployeeById({
-                            type: 'passport',
-                            index,
-                            fetch: async () =>
-                              await fetchListEmployee(
-                                currentTab === 'employer'
-                                  ? {
-                                      page: 1,
-                                      pageSize: 999,
-                                      customerId:
-                                        customerFormState.currentCustomerId,
-                                    }
-                                  : {
-                                      fetchStats: true,
-                                      mobileFetch: $q.screen.xs,
-                                    },
-                              ),
-                          });
-                        }
-                      "
-                      type="button"
-                      :disabled="
-                        !(employeeFormState.currentIndexPassport === -1) &&
-                        !(employeeFormState.currentIndexPassport === index)
-                      "
-                    />
-                  </div>
-                </template>
-              </FormEmployeePassport>
-            </div>
-          </template>
-
-          <template v-if="employeeFormState.currentTab === 'visa'">
-            <div class="q-gutter-sm">
-              <div
-                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
-              >
-                <q-icon
-                  flat
-                  size="xs"
-                  class="q-pa-sm rounded q-mr-xs"
-                  color="info"
-                  name="mdi-passport"
-                  style="background-color: var(--surface-3)"
-                />
-                {{ $t('customerEmployee.form.group.visa') }}
-                <AddButton
-                  v-if="$q.screen.lt.md"
-                  id="btn-add-work"
-                  icon-only
-                  class="q-ml-sm"
-                  :disabled="
-                    currentFromDataEmployee.employeeVisa?.filter((item) => {
-                      if (item.id === undefined) {
-                        return false;
-                      }
-                      return true;
-                    }).length === 0 && employeeFormState.currentIndexVisa === -1
-                      ? false
-                      : true
-                  "
-                  @click.stop="employeeFormStore.addVisa()"
-                />
-              </div>
-
-              <FormEmployeeVisa
-                v-for="(value, index) in currentFromDataEmployee.employeeVisa"
-                :key="index"
-                prefix-id="drawer-info-employee"
-                id="form-visa"
-                dense
-                outlined
-                title="customerEmployee.form.group.visa"
-                :readonly="employeeFormState.currentIndexVisa !== index"
-                hide-title
-                v-model:arrival-at="value.arrivalAt"
-                v-model:arrival-tm-no="value.arrivalTMNo"
-                v-model:arrival-tm="value.arrivalTM"
-                v-model:mrz="value.mrz"
-                v-model:entry-count="value.entryCount"
-                v-model:issue-place="value.issuePlace"
-                v-model:issue-country="value.issueCountry"
-                v-model:issueDate="value.issueDate"
-                v-model:type="value.type"
-                v-model:expire-date="value.expireDate"
-                v-model:visa-issue-date="value.issueDate"
-                v-model:visa-expiry-date="value.expireDate"
-                v-model:remark="value.remark"
-                v-model:worker-type="value.workerType"
-                v-model:number="value.number"
-              >
-                <template v-slot:expiryDate>
-                  {{ $t('general.expirationDate') }} :
-                  {{ dateFormat(value.expireDate) }}
-                  <ExpirationDate
-                    v-if="value.id !== undefined"
-                    :expiration-date="value.expireDate"
-                  />
-                </template>
-
-                <template v-slot:button>
-                  <div class="surface-1 row rounded" style="min-height: 35px">
-                    <UndoButton
-                      v-if="
-                        employeeFormState.isEmployeeEdit &&
-                        !(employeeFormState.currentIndexVisa === -1) &&
-                        employeeFormState.currentIndexVisa === index
-                      "
-                      id="btn-info-basic-undo"
-                      icon-only
-                      @click="
-                        () => {
-                          employeeFormStore.resetFormDataEmployee();
-                          employeeFormState.isEmployeeEdit = false;
-                          employeeFormState.dialogType = 'info';
-                          employeeFormState.currentIndexVisa = -1;
-                        }
-                      "
-                      type="button"
-                    />
-                    <SaveButton
-                      v-if="
-                        (employeeFormState.isEmployeeEdit ||
-                          value.id === undefined) &&
-                        !(employeeFormState.currentIndexVisa === -1) &&
-                        employeeFormState.currentIndexVisa === index
-                      "
-                      id="btn-info-basic-save"
-                      icon-only
-                      @click="
-                        () => {
-                          employeeFormState.currentIndexVisa = index;
-                        }
-                      "
-                      type="submit"
-                    />
-
-                    <EditButton
-                      v-if="
-                        employeeFormState.currentIndexVisa === -1 ||
-                        (!employeeFormState.isEmployeeEdit &&
-                          value.id !== undefined &&
-                          employeeFormState.currentIndexVisa === index)
-                      "
-                      id="btn-info-basic-edit"
-                      icon-only
-                      @click="
-                        () => {
-                          employeeFormState.currentIndexVisa = index;
-                          employeeFormState.isEmployeeEdit = true;
-                          employeeFormState.dialogType = 'edit';
-                        }
-                      "
-                      type="button"
-                    />
-                    <DeleteButton
-                      v-if="
-                        employeeFormState.currentIndexVisa === -1 ||
-                        (!employeeFormState.isEmployeeEdit &&
-                          value.id !== undefined &&
-                          !(employeeFormState.currentIndexVisa === -1) &&
-                          employeeFormState.currentIndexVisa === index)
-                      "
-                      id="btn-info-basic-delete"
-                      icon-only
-                      @click.stop="
-                        () => {
-                          employeeFormState.currentIndexVisa = index;
-                          deleteEmployeeById({
-                            type: 'visa',
-                            index,
-                            fetch: async () =>
-                              await fetchListEmployee(
-                                currentTab === 'employer'
-                                  ? {
-                                      page: 1,
-                                      pageSize: 999,
-                                      customerId:
-                                        customerFormState.currentCustomerId,
-                                    }
-                                  : {
-                                      fetchStats: true,
-                                      mobileFetch: $q.screen.xs,
-                                    },
-                              ),
-                          });
-                        }
-                      "
-                      type="button"
-                      :disabled="
-                        !(employeeFormState.currentIndexVisa === -1) &&
-                        !(employeeFormState.currentIndexVisa === index)
-                      "
-                    />
-                  </div>
-                </template>
-              </FormEmployeeVisa>
-            </div>
-          </template>
-
-          <template v-if="employeeFormState.currentTab === 'healthCheck'">
-            <div class="q-gutter-sm">
-              <div class="q-pb-sm text-weight-bold text-body1 row items-center">
-                <q-icon
-                  flat
-                  size="xs"
-                  class="q-pa-sm rounded q-mr-sm"
-                  color="info"
-                  name="mdi-hospital-box-outline"
-                  style="background-color: var(--surface-3)"
-                />
-
-                {{ $t(`customerEmployee.formHealthCheck.title`) }}
-                <AddButton
-                  v-if="$q.screen.lt.md"
-                  id="btn-add-work"
-                  icon-only
-                  class="q-ml-sm"
-                  :disabled="
-                    currentFromDataEmployee.employeeCheckup?.filter((item) => {
-                      if (item.id === undefined) {
-                        return false;
-                      }
-                      return true;
-                    }).length === 0 &&
-                    employeeFormState.currentIndexCheckup === -1
-                      ? false
-                      : true
-                  "
-                  @click.stop="employeeFormStore.addCheckup()"
-                />
-              </div>
-              <FormEmployeeHealthCheck
-                v-if="employeeFormState.currentTab === 'healthCheck'"
-                id="form-checkup"
-                prefix-id="form-employee"
-                dense
-                outlined
-                v-model:current-index="employeeFormState.currentIndexCheckup"
-                v-model:employee-checkup="
-                  currentFromDataEmployee.employeeCheckup
-                "
-                v-model:checkup-results-option="
-                  optionStore.globalOption.checkupResults
-                "
-                v-model:checkup-type-option="
-                  optionStore.globalOption.insurancePlace
-                "
-                v-model:medical-benefit-option="
-                  optionStore.globalOption.typeInsurance
-                "
-                v-model:insurance-company-option="
-                  optionStore.globalOption.insurancePlace
-                "
-                @delete="
-                  (index) => {
-                    employeeFormState.currentIndexCheckup = index;
-                    deleteEmployeeById({
-                      type: 'healthCheck',
-                      index,
-                      fetch: async () =>
-                        await fetchListEmployee(
-                          currentTab === 'employer'
-                            ? {
-                                page: 1,
-                                pageSize: 999,
-                                customerId: customerFormState.currentCustomerId,
-                              }
-                            : {
-                                fetchStats: true,
-                                mobileFetch: $q.screen.xs,
-                              },
-                        ),
-                    });
-                  }
-                "
-                @save="
-                  (index) => {
-                    employeeFormState.currentIndexCheckup = index;
-                    notify('create', $t('general.success'));
-                  }
-                "
-                @undo="
-                  (index) => {
-                    if (
-                      currentFromDataEmployee.employeeCheckup?.[index]
-                        .statusSave === false
-                    ) {
-                      currentFromDataEmployee.employeeCheckup[
-                        index
-                      ].statusSave = true;
-                    }
-                  }
-                "
-                @edit="
-                  (index) => {
-                    if (
-                      currentFromDataEmployee.employeeCheckup?.[index]
-                        .statusSave
-                    ) {
-                      currentFromDataEmployee.employeeCheckup[
-                        index
-                      ].statusSave = false;
-                    }
-                  }
-                "
-              />
-            </div>
-          </template>
-
-          <template v-if="employeeFormState.currentTab === 'workHistory'">
-            <div class="q-gutter-sm">
-              <div
-                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
-              >
-                <q-icon
-                  flat
-                  size="xs"
-                  class="q-pa-sm rounded q-mr-xs"
-                  color="info"
-                  name="mdi-briefcase-outline"
-                  style="background-color: var(--surface-3)"
-                />
-                {{ $t(`customerEmployee.form.group.workHistory`) }}
-                <AddButton
-                  v-if="$q.screen.lt.md"
-                  id="btn-add-work"
-                  icon-only
-                  class="q-ml-sm"
-                  :disabled="
-                    currentFromDataEmployee.employeeWork?.filter((item) => {
-                      if (item.id === undefined) {
-                        return false;
-                      }
-                      return true;
-                    }).length === 0 &&
-                    employeeFormState.currentIndexWorkHistory === -1
-                      ? false
-                      : true
-                  "
-                  @click.stop="employeeFormStore.addWorkHistory()"
-                />
-              </div>
-              <FormEmployeeWorkHistory
-                v-if="employeeFormState.currentTab === 'workHistory'"
-                id="form-work-history"
-                prefix-id="form-employee"
-                dense
-                outlined
-                v-model:current-index="
-                  employeeFormState.currentIndexWorkHistory
-                "
-                v-model:employee-work="currentFromDataEmployee.employeeWork"
-                v-model:position-name-option="optionStore.globalOption.position"
-                v-model:job-type-option="optionStore.globalOption.businessType"
-                v-model:workplace-option="optionStore.globalOption.area"
-                @delete="
-                  (index) => {
-                    employeeFormState.currentIndexWorkHistory = index;
-                    deleteEmployeeById({
-                      type: 'work',
-                      index,
-                      fetch: async () =>
-                        await fetchListEmployee(
-                          currentTab === 'employer'
-                            ? {
-                                page: 1,
-                                pageSize: 999,
-                                customerId: customerFormState.currentCustomerId,
-                              }
-                            : {
-                                fetchStats: true,
-                                mobileFetch: $q.screen.xs,
-                              },
-                        ),
-                    });
-                  }
-                "
-                @save="
-                  (index) => {
-                    employeeFormState.currentIndexWorkHistory = index;
-                  }
-                "
-                @undo="
-                  (index) => {
-                    if (
-                      currentFromDataEmployee.employeeWork?.[index]
-                        .statusSave === false
-                    ) {
-                      currentFromDataEmployee.employeeWork[index].statusSave =
-                        true;
-                    }
-                  }
-                "
-                @edit="
-                  (index) => {
-                    if (
-                      currentFromDataEmployee.employeeWork?.[index].statusSave
-                    ) {
-                      currentFromDataEmployee.employeeWork[index].statusSave =
-                        false;
-                    }
-                  }
-                "
-              />
-            </div>
-          </template>
-
-          <template v-if="employeeFormState.currentTab === 'other'">
-            <FormEmployeeOther
-              v-if="employeeFormState.currentTab === 'other'"
-              id="form-employee-other"
-              prefix-id="form-employee"
-              dense
-              outlined
-              v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
-              @undo="
-                () => {
-                  if (
-                    currentFromDataEmployee.employeeOtherInfo?.statusSave ===
-                    false
-                  ) {
-                    currentFromDataEmployee.employeeOtherInfo.statusSave = true;
-                  }
-                }
-              "
-              @edit="
-                () => {
-                  if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
-                    currentFromDataEmployee.employeeOtherInfo.statusSave = false;
-                  }
-                }
-              "
-            />
-          </template>
-        </div>
-      </div>
-    </div>
-  </DialogForm>
-
-  <ImageUploadDialog
-    ref="dialogCustomerImageUpload"
-    v-model:dialog-state="customerFormState.imageDialog"
-    v-model:file="customerFormData.image"
-    v-model:image-url="customerFormState.customerImageUrl"
-    v-model:data-list="imageList"
-    v-model:on-create-data-list="onCreateImageList"
-    :on-create="customerFormState.dialogModal"
-    :default-url="customerFormState.defaultCustomerImageUrl"
-    :hidden-footer="!customerFormState.isImageEdit"
-    @add-image="
-      async (v) => {
-        if (!v) return;
-        if (!customerFormState.editCustomerId) return;
-        await customerStore.addImageList(
-          v,
-          customerFormState.editCustomerId,
-          Date.now().toString(),
-        );
-        await fetchImageList(
-          customerFormState.editCustomerId,
-          customerFormData.selectedImage || '',
-          'customer',
-        );
-      }
-    "
-    @remove-image="
-      async (v) => {
-        if (!v) return;
-        if (!customerFormState.editCustomerId) return;
-        const name = v.split('/').pop() || '';
-        await customerStore.deleteImageByName(
-          customerFormState.editCustomerId,
-          name,
-        );
-        await fetchImageList(
-          customerFormState.editCustomerId,
-          customerFormData.selectedImage || '',
-          'customer',
-        );
-      }
-    "
-    @submit="
-      async (v) => {
-        if (customerFormState.dialogModal) {
-          customerFormState.customerImageUrl = v;
-          customerFormState.imageDialog = false;
-        } else {
-          refreshImageState = true;
-          customerFormData.selectedImage = v;
-          imageList ? (imageList.selectedImage = v) : '';
-          customerFormState.customerImageUrl = `${baseUrl}/customer/${customerFormState.editCustomerId && customerFormState.editCustomerId}/image/${v}`;
-          customerFormStore.resetForm();
-          await customerFormStore.submitFormCustomer();
-          customerFormState.imageDialog = false;
-          refreshImageState = false;
-        }
-      }
-    "
-  >
-    <template #title>
-      <span
-        v-if="!customerFormState.dialogModal"
-        class="justify-center flex text-bold"
-      >
-        {{ $t('general.image') }}
-        {{
-          $i18n.locale === 'eng'
-            ? customerFormData.customerType === 'CORP'
-              ? customerFormData?.customerBranch?.[0].registerNameEN || '-'
-              : customerFormData?.customerBranch?.[0].firstNameEN +
-                  ' ' +
-                  customerFormData?.customerBranch?.[0].lastNameEN || '-'
-            : customerFormData.customerType === 'CORP'
-              ? customerFormData?.customerBranch?.[0].registerName || '-'
-              : customerFormData?.customerBranch?.[0].firstName +
-                  ' ' +
-                  customerFormData?.customerBranch?.[0].lastName || '-'
-        }}
-      </span>
-    </template>
-    <template #error>
-      <div class="full-height full-width" style="background: white">
-        <div class="full-height full-width flex justify-center items-center">
-          <q-img
-            :src="`/images/customer-${customerFormData.customerType}-avartar-male.png`"
-            fit="contain"
-            style="height: 100%"
-          >
-            <template #error>
-              <span
-                class="full-width full-height column items-center justify-center"
-              >
-                <q-icon
-                  size="3rem"
-                  :name="
-                    customerFormData.customerType === 'PERS'
-                      ? 'mdi-account-plus-outline'
-                      : 'mdi-office-building-outline'
-                  "
-                  :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
-                />
-              </span>
-            </template>
-          </q-img>
-        </div>
-      </div>
-    </template>
-  </ImageUploadDialog>
-
-  <ImageUploadDialog
-    ref="dialogEmployeeImageUpload"
-    v-model:dialog-state="employeeFormState.imageDialog"
-    v-model:file="currentFromDataEmployee.image"
-    v-model:image-url="employeeFormState.profileUrl"
-    v-model:data-list="imageList"
-    v-model:on-create-data-list="onCreateImageList"
-    :on-create="employeeFormState.dialogModal"
-    :hidden-footer="!employeeFormState.isImageEdit"
-    @add-image="
-      async (v) => {
-        if (!v) return;
-        if (!currentFromDataEmployee.id) return;
-        await employeeStore.addImageList(
-          v,
-          currentFromDataEmployee.id,
-          Date.now().toString(),
-        );
-        await fetchImageList(
-          currentFromDataEmployee.id,
-          currentFromDataEmployee.selectedImage || '',
-          'employee',
-        );
-      }
-    "
-    @remove-image="
-      async (v) => {
-        if (!v) return;
-        if (!currentFromDataEmployee.id) return;
-        const name = v.split('/').pop() || '';
-        await employeeStore.deleteImageByName(currentFromDataEmployee.id, name);
-        await fetchImageList(
-          currentFromDataEmployee.id,
-          currentFromDataEmployee.selectedImage || '',
-          'employee',
-        );
-      }
-    "
-    @submit="
-      async (v) => {
-        if (employeeFormState.dialogModal) {
-          employeeFormState.profileUrl = v;
-          employeeFormState.imageDialog = false;
-        } else {
-          refreshImageState = true;
-          employeeFormState.dialogType = 'edit';
-          currentFromDataEmployee.selectedImage = v;
-          imageList ? (imageList.selectedImage = v) : '';
-          employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
-          employeeFormStore.resetFormDataEmployee();
-          await employeeFormStore.submitPersonal(onCreateImageList);
-          employeeFormState.imageDialog = false;
-          refreshImageState = false;
-          employeeFormState.isEmployeeEdit = false;
-          employeeFormState.dialogType = 'info';
-          await fetchListEmployee();
-        }
-      }
-    "
-  >
-    <template #title>
-      <span
-        v-if="!employeeFormState.dialogModal"
-        class="justify-center flex text-bold"
-      >
-        {{ $t('general.image') }}
-        {{
-          $i18n.locale === 'eng'
-            ? `${currentFromDataEmployee.firstNameEN} ${currentFromDataEmployee.lastNameEN}`
-            : `${currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastName}`
-        }}
-      </span>
-    </template>
-    <template #error>
-      <div class="full-height full-width" style="background: white">
-        <div
-          class="full-height full-width flex justify-center items-center"
-          style="background: #ee4367"
-        >
-          <q-img
-            :src="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
-            fit="contain"
-            style="height: 100%"
-          />
-        </div>
-      </div>
-    </template>
-  </ImageUploadDialog>
-  <!-- นายจ้าง edit customer -->
-  <DrawerInfo
-    hide-action
-    v-model:drawer-open="customerFormState.drawerModal"
-    :title="
-      customerFormData.customerType === 'CORP' &&
-      customerFormData.customerBranch
-        ? customerFormData.customerBranch[0]?.registerName || '-'
-        : customerNameInfo || '-'
-    "
-    :badge-label="
-      customerFormData.customerType === 'CORP'
-        ? $t('customer.employerLegalEntity')
-        : $t('customer.employerNaturalPerson')
-    "
-    :badge-style="
-      customerFormData.customerType === 'CORP'
-        ? `color: var(--${$q.dark.isActive ? 'violet-10' : 'violet-11'}); background: hsl(var(--${$q.dark.isActive ? 'violet-10-hsl' : 'violet-11-hsl'})/0.15)`
-        : `color: var(--${$q.dark.isActive ? 'teal-8' : 'teal-10'}); background: hsl(var(--${$q.dark.isActive ? 'teal-8-hsl' : 'teal-10-hsl'})/0.15)`
-    "
-    :close="
-      () => {
-        resetScrollBar('customer-form-content');
-      }
-    "
-    :submit="
-      async () => {
-        await customerFormStore.submitFormCustomer();
-        customerFormState.readonly = true;
-        notify('create', $t('general.success'));
-        await fetchListCustomer();
-      }
-    "
-    :show="
-      async () => {
-        // await fetchListOfOptionBranch();
-        // customerFormStore.resetForm(true);
-      }
-    "
-    :before-close="
-      () => {
-        if (customerFormStore.isFormDataDifferent()) {
-          customerConfirmUnsave();
-          return true;
-        } else {
-          fetchListCustomer();
-          customerFormState.branchIndex = -1;
-          customerFormStore.resetForm(true);
-        }
-        return false;
-      }
-    "
-  >
-    <div class="column full-height">
-      <div
-        :class="{
-          'q-mx-lg q-my-md': $q.screen.gt.sm,
-          'q-mx-md q-my-sm': !$q.screen.gt.sm,
-        }"
-      >
-        <ProfileBanner
-          v-if="customerFormData.customerBranch !== undefined"
-          :prefix="customerFormData.registeredBranchId"
-          :active="customerFormData.status !== 'INACTIVE'"
-          hide-fade
-          use-toggle
-          v-model:toggle-status="customerFormData.status"
-          :toggle-title="$t('status.title')"
-          :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
-          :img="
-            `${baseUrl}/customer/${customerFormState.editCustomerId}/image/${customerFormData.selectedImage}`.concat(
-              refreshImageState ? `?ts=${Date.now()}` : '',
-            ) || null
-          "
-          :fallback-img="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
-          :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
-          :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
-          :icon="
-            customerFormData.customerType === 'PERS'
-              ? 'mdi-account-plus-outline'
-              : 'mdi-office-building-outline'
-          "
-          :title="
-            customerFormData.customerType === 'PERS'
-              ? setPrefixName(
-                  {
-                    namePrefix: customerFormData.customerBranch[0]?.namePrefix,
-                    firstName: customerFormData.customerBranch[0]?.firstName,
-                    lastName: customerFormData.customerBranch[0]?.lastName,
-                    firstNameEN:
-                      customerFormData.customerBranch[0]?.firstNameEN,
-                    lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
-                  },
-                  { locale },
-                )
-              : customerFormData.customerBranch[0]?.registerName
-          "
-          :caption="
-            customerFormData.customerType === 'PERS'
-              ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
-              : customerFormData.customerBranch[0]?.registerNameEN
-          "
-          @view="
-            () => {
-              customerFormState.imageDialog = true;
-              customerFormState.isImageEdit = false;
-            }
-          "
-          @edit="
-            customerFormState.imageDialog = customerFormState.isImageEdit = true
-          "
-          @update:toggle-status="
-            async (v) => {
-              if (!customerFormState.editCustomerId) return;
-              await triggerChangeStatus(customerFormState.editCustomerId, v);
-            }
-          "
-        />
-      </div>
-
-      <div
-        style="flex: 1; width: 100%; overflow-y: auto"
-        class="column"
-        id="customer-form"
-        :class="{
-          'q-px-lg q-pb-lg': $q.screen.gt.sm,
-          'q-px-md q-pb-sm': !$q.screen.gt.sm,
-        }"
-      >
-        <div class="col full-width surface-1 rounded bordered row">
-          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
-            <div class="q-py-md q-pl-md q-pr-sm">
-              <SideMenu
-                :menu="[
-                  {
-                    name: $t('form.field.basicInformation'),
-                    anchor: 'form-basic-info-customer',
-                  },
-                  {
-                    name: $t('customer.form.group.branch'),
-                    anchor: 'form-branch-customer-branch',
-                    useBtn: true,
-                  },
-
-                  ...(customerFormData.customerBranch?.map((v, i) => ({
-                    name:
-                      i === 0
-                        ? $t('customer.form.headQuarters.title')
-                        : $t('customer.form.branch.title', {
-                            name: i,
-                          }),
-                    anchor: `form-branch-customer-no-${i}`,
-                    sub: true,
-                  })) || []),
-                ]"
-                background="transparent"
-                :active="{
-                  background: 'hsla(var(--blue-6-hsl) / .2)',
-                  foreground: 'var(--blue-6)',
-                }"
-                scroll-element="#customer-form-content"
-              >
-                <template v-slot:btn-form-branch-customer-branch>
-                  <q-btn
-                    dense
-                    flat
-                    icon="mdi-plus"
-                    size="sm"
-                    rounded
-                    padding="0px 0px"
-                    style="color: var(--stone-9)"
-                    @click.stop="customerFormStore.addCurrentCustomerBranch()"
-                    v-if="
-                      customerFormState.branchIndex === -1 &&
-                      !!customerFormState.editCustomerId &&
-                      customerFormState.dialogType !== 'create'
-                    "
-                    :disabled="!customerFormState.readonly"
-                  />
-                </template>
-              </SideMenu>
-            </div>
-          </div>
-
-          <div
-            class="col-12 col-md-10"
-            :class="{
-              'q-py-md q-pr-md ': $q.screen.gt.sm,
-              'q-pa-sm': !$q.screen.gt.sm,
-            }"
-            id="customer-form-content"
-            style="height: 100%; max-height: 100%; overflow-y: auto"
-          >
-            <EmployerFormBasicInfo
-              v-if="
-                customerFormData.customerBranch !== undefined &&
-                customerFormData.customerBranch.length > 0
-              "
-              :readonly="
-                (customerFormState.dialogType === 'edit' &&
-                  customerFormState.readonly === true) ||
-                customerFormState.dialogType === 'info'
-              "
-              :hide-action="customerFormData.status === 'INACTIVE'"
-              :action-disabled="customerFormState.branchIndex !== -1"
-              id="form-basic-info-customer"
-              :onCreate="customerFormState.dialogType === 'create'"
-              @edit="
-                ((customerFormState.dialogType = 'edit'),
-                (customerFormState.readonly = false))
-              "
-              @cancel="() => customerFormUndo(false)"
-              @delete="
-                customerFormState.editCustomerId &&
-                deleteCustomerById(
-                  customerFormState.editCustomerId,
-                  async () => await fetchListCustomer(true, $q.screen.xs),
-                )
-              "
-              :customer-type="customerFormData.customerType"
-              v-model:registered-branch-id="customerFormData.registeredBranchId"
-              v-model:customer-name="customerNameInfo"
-              v-model:register-name="
-                customerFormData.customerBranch[0].registerName
-              "
-              v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
-              v-model:legal-person-no="
-                customerFormData.customerBranch[0].legalPersonNo
-              "
-              v-model:business-type="
-                customerFormData.customerBranch[0].businessType
-              "
-              v-model:job-position="
-                customerFormData.customerBranch[0].jobPosition
-              "
-              v-model:telephone-no="
-                customerFormData.customerBranch[0].telephoneNo
-              "
-              v-model:branch-options="registerAbleBranchOption"
-            />
-
-            <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
-              <div
-                class="col-12 text-weight-bold text-body1 row items-center q-mt-lg"
-              >
-                <q-icon
-                  flat
-                  size="xs"
-                  class="q-pa-sm rounded q-mr-xs"
-                  color="info"
-                  name="mdi-briefcase-outline"
-                  style="background-color: var(--surface-3)"
-                />
-                <span>{{ $t('customer.form.group.branch') }}</span>
-              </div>
-
-              <template
-                v-for="(_, idx) in customerFormData.customerBranch"
-                :key="idx"
-              >
-                <q-form
-                  class="full-width q-mb-xl"
-                  v-if="customerFormData.customerBranch"
-                  greedy
-                  @submit.prevent="
-                    async () => {
-                      if (!customerFormData.customerBranch) return;
-                      if (!customerFormState.editCustomerId) return;
-
-                      if (customerFormData.customerType === 'PERS') {
-                        tabFieldRequired.main = [
-                          'citizenId',
-                          'namePrefix',
-                          'firstName',
-                          'firstNameEN',
-                          'lastName',
-                          'lastNameEN',
-                          'gender',
-                          'birthDate',
-                        ];
-                      }
-                      if (customerFormData.customerType === 'CORP') {
-                        tabFieldRequired.main = [
-                          'legalPersonNo',
-                          'registerName',
-                        ];
-                      }
-
-                      let tapIsUndefined = validateTabField(
-                        customerFormData.customerBranch?.[idx],
-                        tabFieldRequired,
-                      );
-
-                      if (tapIsUndefined.length > 0) {
-                        return dialog({
-                          color: 'warning',
-                          icon: 'mdi-alert',
-                          title: t('dialog.title.incompleteDataEntry'),
-                          actionText: t('general.ok'),
-                          persistent: true,
-                          message: t('dialog.message.incompleteDataEntry', {
-                            tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
-                          }),
-                          action: async () => {
-                            return;
-                          },
-                        });
-                      }
-                      if (!customerFormData.customerBranch[idx].id) {
-                        await customerStore.createBranch({
-                          ...customerFormData.customerBranch[idx],
-                          customerId: customerFormState.editCustomerId,
-                          id: undefined,
-                        });
-                      } else {
-                        await customerStore.editBranchById(
-                          customerFormData.customerBranch[idx].id || '',
-                          {
-                            ...customerFormData.customerBranch[idx],
-                            id: undefined,
-                          },
-                        );
-                      }
-
-                      customerFormData.customerBranch[idx].file?.forEach(
-                        async (v) => {
-                          if (!v.file) return;
-
-                          const ext = v.file.name.split('.').at(-1);
-                          let filename = v.group + '-' + new Date().getTime();
-                          if (ext) filename += `.${ext}`;
-
-                          const res = await customerStore.putAttachment({
-                            branchId:
-                              customerFormData.customerBranch?.[idx].id || '',
-                            file: v.file,
-                            filename,
-                          });
-
-                          if (res) {
-                            await customerFormStore.assignFormData(
-                              customerFormState.editCustomerId,
-                            );
-                          }
-                        },
-                      );
-
-                      await customerFormStore.assignFormData(
-                        customerFormState.editCustomerId,
-                      );
-
-                      customerFormStore.resetForm();
-                    }
-                  "
-                >
-                  <EmployerFormBranch
-                    prefix-id="info"
-                    v-if="!!customerFormState.editCustomerId"
-                    :index="idx"
-                    :hide-action="customerFormData.status === 'INACTIVE'"
-                    v-model:customer="customerFormData"
-                    v-model:customer-branch="
-                      customerFormData.customerBranch[idx]
-                    "
-                    :customer-type="customerFormData.customerType"
-                    :action-disabled="
-                      !customerFormState.readonly ||
-                      (customerFormState.branchIndex !== -1 &&
-                        customerFormState.branchIndex !== idx)
-                    "
-                    :readonly="customerFormState.branchIndex !== idx"
-                    @edit="() => (customerFormState.branchIndex = idx)"
-                    @cancel="() => customerFormUndo(false)"
-                    @delete="
-                      async () => {
-                        if (!!customerFormData.customerBranch?.[idx].id) {
-                          const action = await deleteCustomerBranchById(
-                            customerFormData.customerBranch[idx].id || '',
-                          );
-                          if (action) {
-                            await customerFormStore.assignFormData(
-                              customerFormState.editCustomerId,
-                            );
-                          }
-                          customerFormStore.resetForm();
-                        }
-                      }
-                    "
-                    @save="() => {}"
-                  />
-                </q-form>
-              </template>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </DrawerInfo>
-
-  <!-- ลูกจ้าง edit employee -->
-  <DrawerInfo
-    v-if="!!employeeFormState.currentEmployee"
-    hide-action
-    v-model:drawer-open="employeeFormState.drawerModal"
-    :close="
-      () => {
-        resetScrollBar('drawer-employee-form-content');
-      }
-    "
-    :title="
-      employeeFormState.currentEmployee
-        ? $i18n.locale === 'eng'
-          ? `${employeeFormState.currentEmployee.firstNameEN} ${employeeFormState.currentEmployee.lastNameEN}`
-          : `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
-        : '-'
-    "
-    :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
-          @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);
-            }
-          "
-          :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,
-                    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"
-                    id="btn-info-basic-delete"
-                    icon-only
-                    @click="
-                      () =>
-                        deleteEmployeeById({
-                          id: currentFromDataEmployee.id,
-                          fetch: async () =>
-                            await fetchListEmployee(
-                              currentTab === 'employer'
-                                ? {
-                                    page: 1,
-                                    pageSize: 999,
-                                    customerId:
-                                      customerFormState.currentCustomerId,
-                                  }
-                                : {
-                                    fetchStats: true,
-                                    mobileFetch: $q.screen.xs,
-                                  },
-                            ),
-                        })
-                    "
-                    type="button"
-                  />
-                </div>
-              </div>
-              <BasicInformation
-                no-action
-                id="drawer-form-information"
-                prefix-id="drawer-info-employee"
-                dense
-                outlined
-                title="form.field.basicInformation"
-                :readonly="!employeeFormState.isEmployeeEdit"
-                v-model:customer-branch-id="employeeFormState.currentBranchId"
-                v-model:current-customer-branch="
-                  employeeFormState.currentCustomerBranch
-                "
-                v-model:employee-id="employeeFormState.currentEmployeeCode"
-                v-model:nrc-no="currentFromDataEmployee.nrcNo"
-                v-model:code="currentFromDataEmployee.code"
-                class="q-mb-xl"
-              />
-              <FormPerson
-                id="drawer-form-personal"
-                prefix-id="drawer-info-employee"
-                dense
-                outlined
-                employee
-                separator
-                title="customerEmployee.form.group.personalInfo"
-                :readonly="!employeeFormState.isEmployeeEdit"
-                v-model:prefix-name="currentFromDataEmployee.namePrefix"
-                v-model:first-name="currentFromDataEmployee.firstName"
-                v-model:last-name="currentFromDataEmployee.lastName"
-                v-model:first-name-en="currentFromDataEmployee.firstNameEN"
-                v-model:last-name-en="currentFromDataEmployee.lastNameEN"
-                v-model:mid-name="currentFromDataEmployee.middleName"
-                v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
-                v-model:gender="currentFromDataEmployee.gender"
-                v-model:birth-date="currentFromDataEmployee.dateOfBirth"
-                v-model:nationality="currentFromDataEmployee.nationality"
-                class="q-mb-xl"
-              />
-              <AddressForm
-                id="drawer-form-personal-address"
-                employee
-                disabledRule
-                v-model:address="currentFromDataEmployee.address"
-                v-model:address-en="currentFromDataEmployee.addressEN"
-                v-model:moo="currentFromDataEmployee.moo"
-                v-model:moo-en="currentFromDataEmployee.mooEN"
-                v-model:soi="currentFromDataEmployee.soi"
-                v-model:soi-en="currentFromDataEmployee.soiEN"
-                v-model:street="currentFromDataEmployee.street"
-                v-model:street-en="currentFromDataEmployee.streetEN"
-                v-model:province-id="currentFromDataEmployee.provinceId"
-                v-model:district-id="currentFromDataEmployee.districtId"
-                v-model:sub-district-id="currentFromDataEmployee.subDistrictId"
-                v-model:same-with-employer="
-                  employeeFormState.formDataEmployeeSameAddr
-                "
-                :readonly="!employeeFormState.isEmployeeEdit"
-                :disabledRule="!employeeFormState.isEmployeeEdit"
-                prefix-id="drawer-info-personnel"
-                dense
-                class="q-mb-xl"
-              />
-
-              <div class="row" id="drawer-upload-file">
-                <div class="col-12 q-pb-sm text-weight-bold text-body1">
-                  <q-icon
-                    flat
-                    size="xs"
-                    class="q-pa-sm rounded q-mr-xs"
-                    color="info"
-                    name="mdi-upload"
-                    style="background-color: var(--surface-3)"
-                  />
-                  {{ $t(`general.uploadFile`) }}
-                </div>
-              </div>
-              <UploadFileGroup
-                v-model:current-id="currentFromDataEmployee.id"
-                v-model="currentFromDataEmployee.file"
-                hide-action
-                :readonly="!employeeFormState.isEmployeeEdit"
-                :group-list="uploadFileListEmployee"
-                :menu="uploadFileListEmployee"
-                :columns="columnsAttachment"
-                @submit="
-                  async (group, allMeta) => {
-                    if (allMeta === undefined) return;
-
-                    if (group === 'passport') {
-                      const fullName = allMeta['full_name'].split(' ');
-                      let tempValue: {
-                        oldData: { nameField: string; value: string }[];
-                        newData: { nameField: string; value: string }[];
-                      } = { oldData: [], newData: [] };
-
-                      if (
-                        currentFromDataEmployee.gender !== '' &&
-                        currentFromDataEmployee.gender !== allMeta['sex']
-                      ) {
-                        tempValue.oldData.push({
-                          nameField: $t('form.gender'),
-                          value: $t(
-                            `general.${currentFromDataEmployee.gender}`,
-                          ),
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('form.gender'),
-                          value: $t(`general.${allMeta['sex']}`),
-                        });
-                      }
-
-                      if (currentFromDataEmployee.firstName !== '') {
-                        tempValue.oldData.push({
-                          nameField: $t('personnel.form.firstName'),
-                          value: currentFromDataEmployee.firstName,
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('personnel.form.firstName'),
-                          value: fullName[0],
-                        });
-                      }
-
-                      if (currentFromDataEmployee.lastName !== '') {
-                        tempValue.oldData.push({
-                          nameField: $t('personnel.form.lastName'),
-                          value: currentFromDataEmployee.lastName,
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('personnel.form.lastName'),
-                          value: fullName[1],
-                        });
-                      }
-
-                      if (currentFromDataEmployee.nationality !== '') {
-                        tempValue.oldData.push({
-                          nameField: $t('general.nationality'),
-                          value: currentFromDataEmployee.nationality || '',
-                        });
-                        tempValue.newData.push({
-                          nameField: $t('general.nationality'),
-                          value: allMeta['nationality'],
-                        });
-                      }
-
-                      dialogCheckData({
-                        action: async () => {
-                          currentFromDataEmployee.gender = allMeta['sex'];
-                          currentFromDataEmployee.firstName = fullName[0];
-                          currentFromDataEmployee.lastName = fullName[1];
-                          currentFromDataEmployee.nationality =
-                            allMeta['nationality'];
-                        },
-                        checkData: () => {
-                          return tempValue;
-                        },
-                        cancel: () => {
-                          if (!currentFromDataEmployee.gender) {
-                            currentFromDataEmployee.gender = allMeta['gender'];
-                          }
-                          if (!currentFromDataEmployee.firstName) {
-                            currentFromDataEmployee.firstName = fullName[0];
-                          }
-                          if (!currentFromDataEmployee.firstName) {
-                            currentFromDataEmployee.firstName = fullName[0];
-                          }
-                          if (!currentFromDataEmployee.lastName) {
-                            currentFromDataEmployee.lastName = fullName[1];
-                          }
-
-                          if (!currentFromDataEmployee.nationality) {
-                            currentFromDataEmployee.nationality =
-                              allMeta['nationality'];
-                          }
-                        },
-                      });
-                    }
-                  }
-                "
-                :ocr="
-                  async (group, file) => {
-                    if (group === 'passport') {
-                      mrz = await runOcr(file, parseResultMRZ);
-
-                      if (mrz) {
-                        const mapMrz = Object.entries(mrz.result || {}).map(
-                          ([key, value]) => ({
-                            name: key,
-                            value: value,
-                          }),
-                        );
-
-                        const tempValue = {
-                          status: true,
-                          group,
-                          meta: mapMrz,
-                        };
-
-                        return tempValue;
-                      }
-                    }
-                    if (group === 'visa') {
-                      const res = await ocrStore.sendOcr({
-                        file: file,
-                        category: group,
-                      });
-
-                      if (res) {
-                        const tempValue = {
-                          status: true,
-                          group,
-                          meta: res.fields,
-                        };
-
-                        return tempValue;
-                      }
-                    }
-
-                    return { status: true, group, meta: [] };
-                  }
-                "
-                :auto-save="currentFromDataEmployee.id !== ''"
-                :download="
-                  (obj) => {
-                    if (obj.group !== 'attachment') {
-                      employeeStore.getFile({
-                        parentId: currentFromDataEmployee.id || '',
-                        group: obj.group,
-                        fileId: obj._meta.id,
-                        download: true,
-                      });
-                    } else {
-                      employeeStore.getAttachment({
-                        parentId: currentFromDataEmployee.id || '',
-                        name: obj._meta.name,
-                        download: true,
-                      });
-                    }
-                  }
-                "
-                :delete-item="
-                  async (obj) => {
-                    let status: boolean = false;
-                    const res = await employeeStore.delMeta({
-                      parentId: currentFromDataEmployee.id || '',
-                      group: obj.group,
-                      metaId: obj._meta.id,
-                    });
-
-                    if (res) {
-                      status = true;
-                    }
-
-                    await employeeFormStore.assignFormDataEmployee(
-                      currentFromDataEmployee.id,
-                    );
-
-                    return status;
-                  }
-                "
-                :save="
-                  async (
-                    group: 'passport' | 'visa' | 'attachment',
-                    _meta: any,
-                    file: File | undefined,
-                  ) => {
-                    let status: boolean = false;
-                    if (group !== 'attachment') {
-                      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"
-                  />
-
-                  <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="
-                      currentFromDataEmployee.employeePassport?.filter(
-                        (item) => {
-                          if (item.id === undefined) {
-                            return false;
-                          }
-                          return true;
-                        },
-                      ).length === 0 &&
-                      employeeFormState.currentIndexPassport === -1
-                        ? false
-                        : true
-                    "
-                    @click.stop="employeeFormStore.addPassport()"
-                  />
-                </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"
-                      >
-                        <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"
-                  >
-                    <template v-slot:expiryDate>
-                      {{ $t('general.expirationDate') }} :
-                      {{ dateFormat(value.expireDate) }}
-                      <ExpirationDate
-                        v-if="value.id !== undefined"
-                        :expiration-date="value.expireDate"
-                      />
-                    </template>
-
-                    <template v-slot:button>
-                      <div
-                        class="surface-1 row rounded"
-                        style="min-height: 35px"
-                      >
-                        <UndoButton
-                          v-if="
-                            employeeFormState.isEmployeeEdit &&
-                            !(employeeFormState.currentIndexVisa === -1) &&
-                            employeeFormState.currentIndexVisa === index
-                          "
-                          id="btn-info-basic-undo"
-                          icon-only
-                          @click="
-                            () => {
-                              employeeFormStore.resetFormDataEmployee();
-                              employeeFormState.isEmployeeEdit = false;
-                              employeeFormState.dialogType = 'info';
-                              employeeFormState.currentIndexVisa = -1;
-                            }
-                          "
-                          type="button"
-                        />
-                        <SaveButton
-                          v-if="
-                            (employeeFormState.isEmployeeEdit ||
-                              value.id === undefined) &&
-                            !(employeeFormState.currentIndexVisa === -1) &&
-                            employeeFormState.currentIndexVisa === index
-                          "
-                          id="btn-info-basic-save"
-                          icon-only
-                          @click="
-                            () => {
-                              employeeFormState.currentIndexVisa = index;
-                            }
-                          "
-                          type="submit"
-                        />
-
-                        <EditButton
-                          v-if="
-                            employeeFormState.currentIndexVisa === -1 ||
-                            (!employeeFormState.isEmployeeEdit &&
-                              value.id !== undefined &&
-                              employeeFormState.currentIndexVisa === index)
-                          "
-                          id="btn-info-basic-edit"
-                          icon-only
-                          @click="
-                            () => {
-                              employeeFormState.currentIndexVisa = index;
-                              employeeFormState.isEmployeeEdit = true;
-                              employeeFormState.dialogType = 'edit';
-                            }
-                          "
-                          type="button"
-                        />
-                        <DeleteButton
-                          v-if="
-                            employeeFormState.currentIndexVisa === -1 ||
-                            (!employeeFormState.isEmployeeEdit &&
-                              value.id !== undefined &&
-                              !(employeeFormState.currentIndexVisa === -1) &&
-                              employeeFormState.currentIndexVisa === index)
-                          "
-                          id="btn-info-basic-delete"
-                          icon-only
-                          @click.stop="
-                            () => {
-                              deleteEmployeeById({
-                                type: 'visa',
-                                index,
-                                fetch: async () =>
-                                  await fetchListEmployee(
-                                    currentTab === 'employer'
-                                      ? {
-                                          page: 1,
-                                          pageSize: 999,
-                                          customerId:
-                                            customerFormState.currentCustomerId,
-                                        }
-                                      : {
-                                          fetchStats: true,
-                                          mobileFetch: $q.screen.xs,
-                                        },
-                                  ),
-                              });
-                            }
-                          "
-                          type="button"
-                          :disabled="
-                            !(employeeFormState.currentIndexVisa === -1) &&
-                            !(employeeFormState.currentIndexVisa === index)
-                          "
-                        />
-                      </div>
-                    </template>
-                  </FormEmployeeVisa>
-                </div>
-              </div>
-            </template>
-
-            <template v-if="employeeFormState.currentTab === 'healthCheck'">
-              <div class="q-gutter-sm full-width column">
-                <div
-                  class="q-pb-sm text-weight-bold text-body1 row items-center row items-center"
-                >
-                  <q-icon
-                    flat
-                    size="xs"
-                    class="q-pa-sm rounded q-mr-sm"
-                    color="info"
-                    name="mdi-hospital-box-outline"
-                    style="background-color: var(--surface-3)"
-                  />
-
-                  {{ $t(`customerEmployee.formHealthCheck.title`) }}
-                  <AddButton
-                    v-if="$q.screen.lt.md"
-                    id="btn-add-work"
-                    icon-only
-                    class="q-ml-sm"
-                    :disabled="
-                      currentFromDataEmployee.employeeCheckup?.filter(
-                        (item) => {
-                          if (item.id === undefined) {
-                            return false;
-                          }
-                          return true;
-                        },
-                      ).length === 0 &&
-                      employeeFormState.currentIndexCheckup === -1
-                        ? false
-                        : true
-                    "
-                    @click.stop="employeeFormStore.addCheckup()"
-                  />
-                </div>
-
-                <div class="col self-center">
-                  <div
-                    v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
-                    class="full-width full-height col flex flex-center"
-                  >
-                    <NoData />
-                  </div>
-                  <FormEmployeeHealthCheck
-                    v-if="employeeFormState.currentTab === 'healthCheck'"
-                    id="drawer-form-checkup"
-                    prefix-id="drawer-employee"
-                    dense
-                    outlined
-                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                    v-model:current-index="
-                      employeeFormState.currentIndexCheckup
-                    "
-                    v-model:employee-checkup="
-                      currentFromDataEmployee.employeeCheckup
-                    "
-                    v-model:checkup-results-option="
-                      optionStore.globalOption.checkupResults
-                    "
-                    v-model:checkup-type-option="
-                      optionStore.globalOption.insurancePlace
-                    "
-                    v-model:medical-benefit-option="
-                      optionStore.globalOption.typeInsurance
-                    "
-                    v-model:insurance-company-option="
-                      optionStore.globalOption.insurancePlace
-                    "
-                    @save="
-                      (index) => {
-                        employeeFormState.currentIndexCheckup = index;
-                        notify('create', $t('general.success'));
-                      }
-                    "
-                    @edit="
-                      (index) => {
-                        if (
-                          currentFromDataEmployee.employeeCheckup?.[index]
-                            .statusSave
-                        ) {
-                          employeeFormState.currentIndexCheckup = index;
-                          currentFromDataEmployee.employeeCheckup[
-                            index
-                          ].statusSave = false;
-                        }
-                      }
-                    "
-                    @undo="
-                      (index) => {
-                        if (
-                          currentFromDataEmployee.employeeCheckup?.[index]
-                            .statusSave === false
-                        ) {
-                          employeeFormState.currentIndexCheckup = -1;
-                          currentFromDataEmployee.employeeCheckup[
-                            index
-                          ].statusSave = true;
-                          employeeFormStore.resetFormDataEmployee();
-                        }
-                      }
-                    "
-                    @delete="
-                      (index) => {
-                        employeeFormState.currentIndexCheckup = index;
-                        deleteEmployeeById({
-                          type: 'healthCheck',
-                          index,
-                          fetch: async () =>
-                            await fetchListEmployee(
-                              currentTab === 'employer'
-                                ? {
-                                    page: 1,
-                                    pageSize: 999,
-                                    customerId:
-                                      customerFormState.currentCustomerId,
-                                  }
-                                : {
-                                    fetchStats: true,
-                                    mobileFetch: $q.screen.xs,
-                                  },
-                            ),
-                        });
-                      }
-                    "
-                  />
-                </div>
-              </div>
-            </template>
-            <template v-if="employeeFormState.currentTab === 'workHistory'">
-              <div class="q-gutter-sm full-width column">
-                <div
-                  class="q-pb-sm text-weight-bold text-body1 row items-center"
-                >
-                  <q-icon
-                    flat
-                    size="xs"
-                    class="q-pa-sm rounded q-mr-xs"
-                    color="info"
-                    name="mdi-briefcase-outline"
-                    style="background-color: var(--surface-3)"
-                  />
-                  {{ $t(`customerEmployee.form.group.workHistory`) }}
-                  <AddButton
-                    v-if="$q.screen.lt.md"
-                    id="btn-add-work"
-                    icon-only
-                    class="q-ml-sm"
-                    :disabled="
-                      currentFromDataEmployee.employeeWork?.filter((item) => {
-                        if (item.id === undefined) {
-                          return false;
-                        }
-                        return true;
-                      }).length === 0 &&
-                      employeeFormState.currentIndexWorkHistory === -1
-                        ? false
-                        : true
-                    "
-                    @click.stop="employeeFormStore.addWorkHistory()"
-                  />
-                </div>
-
-                <div class="col self-center">
-                  <div
-                    class="full-width full-height col flex flex-center"
-                    v-if="currentFromDataEmployee.employeeWork?.length === 0"
-                  >
-                    <NoData />
-                  </div>
-
-                  <FormEmployeeWorkHistory
-                    v-if="employeeFormState.currentTab === 'workHistory'"
-                    id="drawer-work-history"
-                    prefix-id="drawer-employee"
-                    dense
-                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                    outlined
-                    v-model:current-index="
-                      employeeFormState.currentIndexWorkHistory
-                    "
-                    v-model:employee-work="currentFromDataEmployee.employeeWork"
-                    v-model:position-name-option="
-                      optionStore.globalOption.position
-                    "
-                    v-model:job-type-option="
-                      optionStore.globalOption.businessType
-                    "
-                    v-model:workplace-option="optionStore.globalOption.area"
-                    @delete="
-                      (index) => {
-                        employeeFormState.currentIndexWorkHistory = index;
-                        deleteEmployeeById({
-                          type: 'work',
-                          index,
-                          fetch: async () =>
-                            await fetchListEmployee(
-                              currentTab === 'employer'
-                                ? {
-                                    page: 1,
-                                    pageSize: 999,
-                                    customerId:
-                                      customerFormState.currentCustomerId,
-                                  }
-                                : {
-                                    fetchStats: true,
-                                    mobileFetch: $q.screen.xs,
-                                  },
-                            ),
-                        });
-                      }
-                    "
-                    @save="
-                      (index) => {
-                        employeeFormState.currentIndexWorkHistory = index;
-                      }
-                    "
-                    @undo="
-                      (index) => {
-                        if (
-                          currentFromDataEmployee.employeeWork?.[index]
-                            .statusSave === false
-                        ) {
-                          employeeFormState.currentIndexWorkHistory = -1;
-                          currentFromDataEmployee.employeeWork[
-                            index
-                          ].statusSave = true;
-                        }
-                      }
-                    "
-                    @edit="
-                      (index) => {
-                        if (
-                          currentFromDataEmployee.employeeWork?.[index]
-                            .statusSave
-                        ) {
-                          employeeFormState.currentIndexWorkHistory = index;
-                          currentFromDataEmployee.employeeWork[
-                            index
-                          ].statusSave = false;
-                        }
-                      }
-                    "
-                  />
-                </div>
-              </div>
-            </template>
-            <template v-if="employeeFormState.currentTab === 'other'">
-              <FormEmployeeOther
-                :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
-                v-if="employeeFormState.currentTab === 'other'"
-                id="drawer-other"
-                prefix-id="drawer-employee"
-                dense
-                outlined
-                v-model:employee-other="
-                  currentFromDataEmployee.employeeOtherInfo
-                "
-                @undo="
-                  () => {
-                    if (
-                      currentFromDataEmployee.employeeOtherInfo?.statusSave ===
-                      false
-                    ) {
-                      currentFromDataEmployee.employeeOtherInfo.statusSave = true;
-                    }
-                  }
-                "
-                @edit="
-                  () => {
-                    if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
-                      currentFromDataEmployee.employeeOtherInfo.statusSave = false;
-                    }
-                  }
-                "
-              />
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </DrawerInfo>
-
-  <DialogForm
-    :title="$t('general.historyEdit')"
-    hide-footer
-    v-model:modal="employeeHistoryDialog"
-  >
-    <div class="q-pa-md">
-      <HistoryEditComponent
-        v-if="employeeHistory"
-        v-model:history-list="employeeHistory"
-      />
-    </div>
-  </DialogForm>
 </template>
 
 <style scoped>
-.customer-row {
-  display: grid;
-  gap: var(--size-6);
-  transition: 0.3s ease-in-out;
-}
-
-.hover-card:hover {
-  cursor: pointer;
-  border-radius: 10px;
-  box-shadow: var(--shadow-3);
-}
-
 .slide-enter-active {
   transition: all 0.1s ease-out;
 }
@@ -6059,39 +844,6 @@ const emptyCreateDialog = ref(false);
   opacity: 0;
 }
 
-.employer-active {
-  background-color: hsla(var(--info-bg) / 0.1);
-  color: hsl(var(--info-bg));
-}
-
-.tags {
-  display: inline-block;
-  color: hsla(var(--_color) / 1);
-  background: hsla(var(--_color) / 0.15);
-  border-radius: var(--radius-2);
-  padding-inline: var(--size-2);
-}
-
-.tags__pink {
-  --_color: var(--pink-6-hsl);
-}
-
-.tags__purple {
-  --_color: var(--violet-11-hsl);
-}
-
-.tags__green {
-  --_color: var(--teal-10-hsl);
-}
-
-.dark .tags__purple {
-  --_color: var(--violet-10-hsl);
-}
-
-.dark .tags__green {
-  --_color: var(--teal-8-hsl);
-}
-
 .status-active {
   --_branch-status-color: var(--green-6-hsl);
 }
@@ -6103,54 +855,6 @@ const emptyCreateDialog = ref(false);
   opacity: 0.5;
 }
 
-.branch-card__icon {
-  background-color: hsla(var(--_branch-card-bg) / 0.15);
-  border-radius: 50%;
-  padding: var(--size-1);
-  position: relative;
-  transform: rotate(45deg);
-
-  &::after {
-    content: ' ';
-    display: block;
-    block-size: 0.5rem;
-    aspect-ratio: 1;
-    position: absolute;
-    border-radius: 50%;
-    right: -0.1rem;
-    top: calc(50% - 0.25rem);
-    bottom: calc(50% - 0.25rem);
-    background-color: hsla(var(--_branch-status-color) / 1);
-  }
-
-  & :deep(.q-avatar) {
-    transform: rotate(-45deg);
-    color: hsla(var(--_branch-card-bg) / 1);
-  }
-}
-
-& .symbol-gender {
-  color: hsla(var(--_fg));
-
-  &.symbol-gender__male {
-    --_fg: var(--gender-male);
-  }
-
-  &.symbol-gender__female {
-    --_fg: var(--gender-female);
-  }
-}
-
-.btn-arrow-right {
-  transform: rotate(0deg);
-  transition: transform 0.3s ease;
-}
-
-.btn-arrow-right.active {
-  transform: rotate(90deg);
-  transition: transform 0.3s ease;
-}
-
 .active-tab-sm {
   color: hsla(var(--info-bg) / 1);
   background-color: hsla(var(--info-bg) / 0.1);
diff --git a/src/pages/03_customer-management/TabCustomer.vue b/src/pages/03_customer-management/TabCustomer.vue
new file mode 100644
index 00000000..bbce08f3
--- /dev/null
+++ b/src/pages/03_customer-management/TabCustomer.vue
@@ -0,0 +1,2078 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { useRoute, useRouter } from 'vue-router';
+
+import BranchCard from 'src/components/01_branch-management/BranchCard.vue';
+import KebabAction from 'src/components/shared/KebabAction.vue';
+import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
+import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
+import { DialogContainer, DialogHeader } from 'components/dialog';
+import { EmployerFormBasicInfo, EmployerFormBranch } from './components';
+import EmptyAddButton from 'components/AddButton.vue';
+import {
+  PaginationComponent,
+  PaginationPageSize,
+  ImageUploadDialog,
+  TooltipComponent,
+  ProfileBanner,
+  DialogForm,
+  DrawerInfo,
+  ItemCard,
+  SideMenu,
+  NoData,
+} from 'src/components';
+
+import useCustomerStore from 'src/stores/customer';
+import useOptionStore from 'src/stores/options';
+import { formatAddress } from 'src/utils/address';
+import { Status } from 'src/stores/types';
+import { useCustomerForm, useEmployeeForm } from './form';
+import {
+  baseUrl,
+  setPrefixName,
+  waitAll,
+  dialog,
+  notify,
+  resetScrollBar,
+  capitalizeFirstLetter,
+  dialogCheckData,
+  canAccess,
+} from 'src/stores/utils';
+import {
+  CustomerStats,
+  Customer,
+  CustomerBranch,
+  CustomerBranchCreate,
+  CustomerType,
+} from 'stores/customer/types';
+import {
+  columnsCustomer,
+  columnsEmployee,
+  uploadFileListEmployee,
+  columnsAttachment,
+  dialogCreateCustomerItem,
+} from './constant';
+import { Employee } from 'src/stores/employee/types';
+import { useNavigator } from 'src/stores/navigator';
+import useFlowStore from 'src/stores/flow';
+import useEmployeeStore from 'src/stores/employee';
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const flowStore = useFlowStore();
+const navigatorStore = useNavigator();
+const optionStore = useOptionStore();
+const customerFormStore = useCustomerForm();
+const customerStore = useCustomerStore();
+const employeeStore = useEmployeeStore();
+const employeeFormStore = useEmployeeForm();
+const { t, locale } = useI18n();
+const {
+  fetchListOfOptionBranch,
+  customerFormUndo,
+  customerConfirmUnsave,
+  deleteCustomerById,
+  validateTabField,
+  deleteCustomerBranchById,
+} = customerFormStore;
+const {
+  state: customerFormState,
+  currentFormData: customerFormData,
+  registerAbleBranchOption,
+  tabFieldRequired,
+  onCreateImageList,
+} = storeToRefs(customerFormStore);
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  statusEmployeeCreate,
+  refreshImageState,
+} = storeToRefs(employeeFormStore);
+
+const statsCustomerType = defineModel<CustomerStats>('statsCustomerType', {
+  default: {
+    CORP: 0,
+    PERS: 0,
+  },
+});
+
+const props = defineProps<{
+  currentTab: 'employee' | 'employer';
+  currentStatus: Status | 'All';
+  gridView: boolean;
+  inputSearch: string;
+  searchDate: string[];
+  fieldSelected: string[];
+  filterBusinessType: string;
+  filterAddress: {
+    provinceId: string;
+    districtId: string;
+    subDistrictId: string;
+  };
+  fetchImageList: (
+    id: string,
+    selectedName: string,
+    type: 'customer' | 'employee',
+  ) => Promise<void>;
+  triggerChangeStatus: (
+    id: string,
+    status: string,
+    employeeName?: string,
+  ) => void;
+}>();
+
+defineExpose({
+  openSpecificCustomer,
+  fetchListCustomer,
+  toggleStatusCustomer,
+});
+
+const emptyCreateDialog = ref(false);
+const currentPageCustomer = ref<number>(1);
+const maxPageCustomer = ref<number>(1);
+const pageSize = ref<number>(30);
+const currentBtnOpen = ref<boolean[]>([]);
+const currentCustomer = ref<Customer>();
+const listEmployee = ref<Employee[]>([]);
+const listCustomer = ref<(Customer & { branch: CustomerBranch[] })[]>([]);
+const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
+
+const fieldCustomer = [
+  'all',
+  'customerLegalEntity',
+  'customerNaturalPerson',
+] as const;
+const customerTypeSelected = defineModel<{
+  label: string;
+  value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson';
+}>('customerTypeSelected');
+const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
+
+const customerNameInfo = computed(() => {
+  if (customerFormData.value.customerBranch === undefined) return;
+
+  const name =
+    locale.value === 'eng'
+      ? `${customerFormData.value.customerBranch[0]?.firstNameEN} ${customerFormData.value.customerBranch[0]?.lastNameEN}`
+      : `${customerFormData.value.customerBranch[0]?.firstName} ${customerFormData.value.customerBranch[0]?.lastName}`;
+  return name || '-';
+});
+
+async function createCustomerForm(customerType: 'CORP' | 'PERS') {
+  customerFormState.value.dialogModal = true;
+  customerFormState.value.dialogType = 'create';
+  customerFormData.value.customerType =
+    customerType === 'CORP' ? CustomerType.Corporate : CustomerType.Person;
+}
+
+async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
+  const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
+
+  const resultList = await customerStore.fetchList({
+    includeBranch: true,
+    page: mobileFetch ? 1 : currentPageCustomer.value,
+    pageSize: mobileFetch
+      ? listCustomer.value.length +
+        (total === listCustomer.value.length ? 1 : 0)
+      : pageSize.value,
+    status:
+      props.currentStatus === 'All'
+        ? undefined
+        : props.currentStatus === 'ACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+    query: props.inputSearch,
+    businessTypeId: props.filterBusinessType,
+    provinceId: props.filterAddress.provinceId || undefined,
+    districtId: props.filterAddress.districtId || undefined,
+    subDistrictId: props.filterAddress.subDistrictId || undefined,
+    startDate: props.searchDate[0],
+    endDate: props.searchDate[1],
+    customerType: (
+      {
+        all: undefined,
+        customerLegalEntity: CustomerType.Corporate,
+        customerNaturalPerson: CustomerType.Person,
+      } as const
+    )[customerTypeSelected.value.value],
+  });
+
+  if (resultList) {
+    // currentPageCustomer.value = resultList.page;
+    maxPageCustomer.value = Math.ceil(resultList.total / pageSize.value);
+    $q.screen.xs && !mobileFetch
+      ? listCustomer.value.push(...resultList.result)
+      : (listCustomer.value = resultList.result);
+  }
+
+  if (fetchStats) {
+    statsCustomerType.value = await customerStore
+      .getStatsCustomer()
+      .then((value) => (value ? value : { CORP: 0, PERS: 0 }));
+  }
+}
+
+async function editCustomerForm(id: string) {
+  await customerFormStore.assignFormData(id);
+  await fetchListOfOptionBranch();
+  await props.fetchImageList(
+    id,
+    customerFormData.value.selectedImage || '',
+    'customer',
+  );
+  customerFormState.value.branchIndex = -1;
+  customerFormState.value.dialogType = 'edit';
+  customerFormState.value.drawerModal = true;
+  customerFormState.value.editCustomerId = id;
+}
+
+async function editEmployeeFormPersonal(id: string) {
+  await employeeFormStore.assignFormDataEmployee(id);
+  await props.fetchImageList(
+    id,
+    currentFromDataEmployee.value.selectedImage || '',
+    'employee',
+  );
+
+  employeeFormState.value.isEmployeeEdit = true;
+  employeeFormState.value.dialogType = 'edit';
+  employeeFormState.value.drawerModal = true;
+}
+
+async function openSpecificCustomer(id: string) {
+  await customerFormStore.assignFormData(id);
+  await props.fetchImageList(
+    id,
+    customerFormData.value.selectedImage || '',
+    'customer',
+  );
+  customerFormState.value.branchIndex = -1;
+  customerFormState.value.drawerModal = true;
+  customerFormState.value.editCustomerId = id;
+  customerFormState.value.dialogType = 'info';
+}
+
+async function toggleStatusCustomer(id: string, status: boolean) {
+  const res = await customerStore.editById(id, {
+    status: !status ? 'ACTIVE' : 'INACTIVE',
+  });
+  if (res && customerFormState.value.drawerModal)
+    customerFormData.value.status = res.status;
+
+  await fetchListCustomer(false, $q.screen.xs);
+  flowStore.rotate();
+}
+
+async function fetchListEmployee(opt?: {
+  fetchStats?: boolean;
+  page?: number;
+  pageSize?: number;
+  customerId?: string;
+  mobileFetch?: boolean;
+}) {
+  // ลูกจ้างภายในนายจ้าง
+  const resultListEmployee = await employeeStore.fetchList({
+    customerId: opt.customerId,
+    page: 1,
+    pageSize: 9999,
+    passport: true,
+    visa: true,
+  });
+  if (resultListEmployee) {
+    listEmployee.value = resultListEmployee.result;
+  }
+}
+
+watch(
+  () => [
+    props.inputSearch,
+    props.searchDate,
+    props.currentStatus,
+    props.filterBusinessType,
+    props.filterAddress,
+    customerTypeSelected.value,
+    pageSize.value,
+  ],
+  async () => {
+    if (props.currentTab === 'employer') {
+      currentPageCustomer.value = 1;
+      currentBtnOpen.value = [];
+      listCustomer.value = [];
+      await fetchListCustomer(true);
+    }
+
+    customerFormState.value.currentCustomerId = undefined;
+    flowStore.rotate();
+  },
+  { deep: true },
+);
+
+watch(
+  () => customerFormData.value.image,
+  () => {
+    if (customerFormData.value.image !== null)
+      customerFormState.value.isImageEdit = true;
+  },
+);
+
+onMounted(async () => {
+  currentPageCustomer.value = 1;
+  currentBtnOpen.value = [];
+  listCustomer.value = [];
+  await fetchListCustomer(true);
+});
+</script>
+<template>
+  <q-splitter
+    v-model="splitPercent"
+    :limits="[0, 100]"
+    class="col full-width"
+    before-class="overflow-hidden"
+    after-class="overflow-hidden"
+    :disable="$q.screen.lt.sm"
+  >
+    <template v-slot:before>
+      <div
+        class="column q-pa-md surface-1 full-height full-width"
+        style="gap: var(--size-1)"
+      >
+        <q-item
+          v-for="v in fieldCustomer"
+          v-close-popup
+          clickable
+          :key="v"
+          dense
+          class="no-padding items-center rounded full-width"
+          active-class="employer-active"
+          :active="customerTypeSelected.value === v"
+          @click="customerTypeSelected = { label: v, value: v }"
+          :id="`btn-${v}`"
+        >
+          <span class="q-px-md ellipsis">
+            {{
+              $t(
+                {
+                  all: 'general.all',
+                  customerLegalEntity: 'customer.employerLegalEntity',
+                  customerNaturalPerson: 'customer.employerNaturalPerson',
+                }[v],
+              )
+            }}
+          </span>
+        </q-item>
+      </div>
+    </template>
+
+    <template v-slot:after>
+      <div class="column full-height no-wrap">
+        <!-- ไม่มีข้อมูล -->
+        <template
+          v-if="
+            statsCustomerType.CORP + statsCustomerType.PERS === 0 &&
+            currentTab === 'employer'
+          "
+        >
+          <TooltipComponent
+            v-if="canAccess('customer', 'edit')"
+            class="self-end q-ma-md"
+            :title="'general.noData'"
+            :caption="'general.clickToCreate'"
+            imgSrc="personnel-table-"
+          />
+
+          <div class="row items-center justify-center" style="flex-grow: 1">
+            <EmptyAddButton
+              v-if="canAccess('customer', 'edit')"
+              :label="'general.add'"
+              :i18n-args="{
+                text: $t(`customer.${currentTab}`),
+              }"
+              @trigger="
+                () => {
+                  if (currentTab === 'employer') emptyCreateDialog = true;
+                }
+              "
+            />
+            <NoData v-else />
+          </div>
+        </template>
+
+        <!-- มีข้อมูล -->
+        <template
+          v-if="
+            listCustomer &&
+            statsCustomerType.PERS + statsCustomerType.CORP > 0 &&
+            currentTab === 'employer'
+          "
+        >
+          <div
+            v-if="listCustomer.length === 0"
+            class="row col full-width items-center justify-center"
+            style="min-height: 250px"
+          >
+            <NoData :not-found="!!inputSearch" />
+          </div>
+
+          <div
+            v-if="listCustomer.length !== 0"
+            class="column scroll q-pa-md col"
+          >
+            <q-infinite-scroll
+              :offset="10"
+              @load="
+                (_, done) => {
+                  if (
+                    $q.screen.gt.xs ||
+                    currentPageCustomer === maxPageCustomer
+                  )
+                    return;
+                  currentPageCustomer = currentPageCustomer + 1;
+                  fetchListCustomer().then(() =>
+                    done(currentPageCustomer >= maxPageCustomer),
+                  );
+                }
+              "
+            >
+              <q-table
+                flat
+                bordered
+                :grid="gridView"
+                :rows="listCustomer"
+                :columns="columnsCustomer"
+                card-container-class="q-col-gutter-md"
+                row-key="name"
+                :rows-per-page-options="[0]"
+                hide-pagination
+                :visible-columns="fieldSelected"
+              >
+                <template v-slot:header="props">
+                  <q-tr
+                    style="background-color: hsla(var(--info-bg) / 0.07)"
+                    :props="props"
+                  >
+                    <q-th
+                      v-for="col in props.cols"
+                      :key="col.name"
+                      :props="props"
+                    >
+                      {{ $t(col.label) }}
+                    </q-th>
+                    <q-th auto-width />
+                  </q-tr>
+                </template>
+
+                <template v-slot:body="props">
+                  <q-tr
+                    class="cursor-pointer"
+                    :class="{
+                      'app-text-muted': props.row.status === 'INACTIVE',
+                      'status-active': props.row.status !== 'INACTIVE',
+                      'status-inactive': props.row.status === 'INACTIVE',
+                    }"
+                    :id="`row-table-${props.row.id}`"
+                    :props="props"
+                    @click="
+                      $router.push(
+                        `/customer-management/${props.row.id}/branch`,
+                      )
+                    "
+                    :style="
+                      props.rowIndex % 2 !== 0
+                        ? $q.dark.isActive
+                          ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                          : `background: #f9fafc`
+                        : ''
+                    "
+                  >
+                    <q-td
+                      class="text-center"
+                      v-if="fieldSelected.includes('orderNumber')"
+                    >
+                      {{
+                        $q.screen.xs
+                          ? props.rowIndex + 1
+                          : (currentPageCustomer - 1) * pageSize +
+                            props.rowIndex +
+                            1
+                      }}
+                    </q-td>
+
+                    <q-td
+                      v-if="fieldSelected.includes('titleName')"
+                      class="ellipsis"
+                    >
+                      <div class="row items-center no-wrap">
+                        <div
+                          class="q-mr-sm"
+                          style="display: flex; margin-bottom: var(--size-2)"
+                        >
+                          <div
+                            :style="`
+                                  border-radius: 50%;
+                                  border-style: solid;
+                                  border-width: 2px;
+                                  border-color: hsl(var(${props.row.customerType === 'CORP' ? '--violet-11-hsl' : '--teal-10-hsl'}));
+                                `"
+                          >
+                            <div class="branch-card__icon">
+                              <q-avatar size="md">
+                                <q-img
+                                  :src="
+                                    props.row.selectedImage
+                                      ? `${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`
+                                      : `/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`
+                                  "
+                                  class="full-height full-width"
+                                >
+                                  <template #error>
+                                    <q-img
+                                      :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
+                                    />
+                                  </template>
+                                </q-img>
+                              </q-avatar>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="col">
+                          <div class="col">
+                            {{
+                              props.row.customerType === 'CORP' &&
+                              locale === 'tha'
+                                ? props.row.branch[0]?.registerName || '-'
+                                : optionStore.mapOption(
+                                    props.row.branch[0].namePrefix,
+                                  ) +
+                                    ' ' +
+                                    props.row.branch[0]?.firstName +
+                                    ' ' +
+                                    props.row.branch[0]?.lastName || '-'
+                            }}
+
+                            {{
+                              props.row.customerType === 'CORP' &&
+                              locale === 'eng'
+                                ? props.row.branch[0]?.registerNameEN || '-'
+                                : optionStore.mapOption(
+                                    props.row.branch[0].namePrefix,
+                                  ) +
+                                    ' ' +
+                                    props.row.branch[0]?.firstNameEN +
+                                    ' ' +
+                                    props.row.branch[0]?.lastNameEN || '-'
+                            }}
+                          </div>
+                          <div class="col app-text-muted">
+                            {{
+                              props.row.customerType === 'CORP' &&
+                              locale === 'tha'
+                                ? props.row.branch[0]?.registerNameEN || '-'
+                                : capitalizeFirstLetter(
+                                    props.row.branch[0].namePrefix,
+                                  ) +
+                                    ' ' +
+                                    props.row.branch[0]?.firstNameEN +
+                                    ' ' +
+                                    props.row.branch[0]?.lastNameEN || '-'
+                            }}
+
+                            {{
+                              props.row.customerType === 'CORP' &&
+                              locale === 'eng'
+                                ? props.row.branch[0]?.registerName || '-'
+                                : capitalizeFirstLetter(
+                                    props.row.branch[0].namePrefix,
+                                  ) +
+                                    ' ' +
+                                    props.row.branch[0]?.firstName +
+                                    ' ' +
+                                    props.row.branch[0]?.lastName || '-'
+                            }}
+                          </div>
+                        </div>
+                      </div>
+                    </q-td>
+
+                    <q-td
+                      v-if="fieldSelected.includes('businessTypePure')"
+                      style="max-width: 150px"
+                      class="ellipsis"
+                    >
+                      {{
+                        props.row.branch[0].businessType
+                          ? props.row.branch[0].businessType[
+                              $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                            ]
+                          : '-'
+                      }}
+                      <q-tooltip>
+                        {{
+                          props.row.branch[0].businessType
+                            ? props.row.branch[0].businessType[
+                                $i18n.locale === 'eng' ? 'nameEN' : 'name'
+                              ]
+                            : '-'
+                        }}
+                      </q-tooltip>
+                    </q-td>
+
+                    <q-td
+                      v-if="fieldSelected.includes('jobPosition')"
+                      style="max-width: 150px"
+                      class="ellipsis"
+                    >
+                      {{
+                        props.row.branch.length !== 0
+                          ? props.row.branch[0].jobPosition !== null
+                            ? optionStore.mapOption(
+                                props.row.branch[0].jobPosition,
+                              )
+                            : ''
+                          : '-'
+                      }}
+
+                      <q-tooltip>
+                        {{
+                          props.row.branch.length !== 0
+                            ? props.row.branch[0].jobPosition !== null
+                              ? optionStore.mapOption(
+                                  props.row.branch[0].jobPosition,
+                                )
+                              : ''
+                            : '-'
+                        }}
+                      </q-tooltip>
+                    </q-td>
+
+                    <q-td v-if="fieldSelected.includes('address')">
+                      {{
+                        formatAddress({
+                          address: props.row.branch[0].address,
+                          addressEN: props.row.branch[0].addressEN,
+                          moo: props.row.branch[0].moo,
+                          mooEN: props.row.branch[0].mooEN,
+                          soi: props.row.branch[0].soi,
+                          soiEN: props.row.branch[0].soiEN,
+                          street: props.row.branch[0].street,
+                          streetEN: props.row.branch[0].streetEN,
+                          province: props.row.branch[0].province,
+                          district: props.row.branch[0].district,
+                          subDistrict: props.row.branch[0].subDistrict,
+                          en: $i18n.locale === 'eng',
+                        })
+                      }}
+                      <q-tooltip>
+                        {{
+                          formatAddress({
+                            address: props.row.branch[0].address,
+                            addressEN: props.row.branch[0].addressEN,
+                            moo: props.row.branch[0].moo,
+                            mooEN: props.row.branch[0].mooEN,
+                            soi: props.row.branch[0].soi,
+                            soiEN: props.row.branch[0].soiEN,
+                            street: props.row.branch[0].street,
+                            streetEN: props.row.branch[0].streetEN,
+                            province: props.row.branch[0].province,
+                            district: props.row.branch[0].district,
+                            subDistrict: props.row.branch[0].subDistrict,
+                            en: $i18n.locale === 'eng',
+                          })
+                        }}
+                      </q-tooltip>
+                    </q-td>
+
+                    <q-td v-if="fieldSelected.includes('contactName')">
+                      {{ props.row.branch[0]?.contactName || '-' }}
+                    </q-td>
+
+                    <q-td v-if="fieldSelected.includes('officeTel')">
+                      {{ props.row.branch[0]?.officeTel || '-' }}
+                    </q-td>
+
+                    <q-td>
+                      <q-btn
+                        :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
+                        dense
+                        flat
+                        @click.stop="
+                          async () => {
+                            if (!currentBtnOpen[props.rowIndex]) {
+                              customerFormState.currentCustomerId =
+                                props.row.id;
+
+                              // TODO:
+                              await fetchListEmployee({
+                                customerId: props.row.id,
+                              });
+
+                              currentBtnOpen.map((v, i) => {
+                                if (i !== props.rowIndex) {
+                                  currentBtnOpen[i] = false;
+                                }
+                              });
+                            }
+                            currentBtnOpen[props.rowIndex] =
+                              !currentBtnOpen[props.rowIndex];
+                          }
+                        "
+                      >
+                        <div class="row items-center">
+                          <q-icon name="mdi-account-group-outline" />
+                          <q-icon
+                            class="btn-arrow-right"
+                            :class="{
+                              active: currentBtnOpen[props.rowIndex],
+                            }"
+                            size="xs"
+                            name="mdi-chevron-right"
+                          />
+                        </div>
+                      </q-btn>
+                      <q-btn
+                        icon="mdi-eye-outline"
+                        :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
+                        size="sm"
+                        dense
+                        round
+                        flat
+                        @click.stop="editCustomerForm(props.row.id)"
+                      />
+
+                      <KebabAction
+                        :hide-delete="!canAccess('customer', 'edit')"
+                        :id-name="
+                          props.row.branch[0].customerName ||
+                          props.row.branch[0].firstName
+                        "
+                        :status="props.row.status"
+                        @view="
+                          () => {
+                            const { branch, ...payload } = props.row;
+                            currentCustomer = payload;
+                            editCustomerForm(props.row.id);
+                          }
+                        "
+                        @edit="
+                          async () => {
+                            await editCustomerForm(props.row.id);
+                            customerFormState.branchIndex = 0;
+                          }
+                        "
+                        @delete="
+                          deleteCustomerById(
+                            props.row.id,
+                            async () =>
+                              await fetchListCustomer(true, $q.screen.xs),
+                          )
+                        "
+                        @change-status="
+                          triggerChangeStatus(props.row.id, props.row.status)
+                        "
+                      />
+                    </q-td>
+                  </q-tr>
+
+                  <q-tr v-show="currentBtnOpen[props.rowIndex]" :props="props">
+                    <q-td colspan="100%" style="padding: 16px">
+                      <div class="text-center">
+                        <TableEmpoloyee
+                          in-table
+                          :list-employee="listEmployee"
+                          :columns-employee="columnsEmployee"
+                          @view="
+                            async (item: any) => {
+                              employeeFormState.drawerModal = true;
+                              employeeFormState.isEmployeeEdit = false;
+                              employeeFormStore.assignFormDataEmployee(item.id);
+                              await fetchImageList(
+                                item.id,
+                                item.selectedImage || '',
+                                'employee',
+                              );
+                            }
+                          "
+                        />
+                      </div>
+                    </q-td>
+                  </q-tr>
+                </template>
+
+                <template v-slot:item="props">
+                  <div class="col-12 col-md-6 column">
+                    <BranchCard
+                      i18n-key="customer.table"
+                      class="surface-1 col"
+                      :virtual-branch="false"
+                      :id="`branch-card-${props.row.name}`"
+                      :class="{
+                        'cursor-pointer': props.row._count.branch !== 0,
+                      }"
+                      @click="
+                        $router.push(
+                          `/customer-management/${props.row.id}/branch`,
+                        )
+                      "
+                      :metadata="props.row"
+                      :color="
+                        props.row.customerType === 'CORP' ? 'hq' : 'br-virtual'
+                      "
+                      :key="props.row.id"
+                      :data="{
+                        branchLabelName:
+                          props.row.customerType === 'CORP'
+                            ? $i18n.locale === 'eng'
+                              ? props.row.branch[0]?.registerNameEN || '-'
+                              : props.row.branch[0]?.registerName || '-'
+                            : $i18n.locale === 'eng'
+                              ? props.row.branch[0]?.firstNameEN +
+                                  ' ' +
+                                  props.row.branch[0]?.lastNameEN || '-'
+                              : props.row.branch[0]?.firstName +
+                                  ' ' +
+                                  props.row.branch[0]?.lastName || '-',
+                      }"
+                      :inactive="props.row.status === 'INACTIVE'"
+                      :field-selected="
+                        fieldSelected.filter((v) => {
+                          return columnsCustomer.some((c) => c.name === v);
+                        })
+                      "
+                    >
+                      <template #image>
+                        <q-avatar size="3rem">
+                          <q-img
+                            :src="
+                              props.row.selectedImage
+                                ? `${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`
+                                : `/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`
+                            "
+                            class="full-height full-width"
+                          >
+                            <template #error>
+                              <q-img
+                                :src="`/images/customer-${props.row.customerType}-avartar-${props.row.customerType === 'PERS' ? props.row.branch[0].gender : 'male'}.png`"
+                              />
+                            </template>
+                          </q-img>
+                          <q-badge
+                            class="absolute-bottom-right no-padding"
+                            style="
+                              border-radius: 50%;
+                              min-width: 10px;
+                              min-height: 10px;
+                            "
+                            :style="{
+                              background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                            }"
+                          ></q-badge>
+                        </q-avatar>
+                      </template>
+                      <template #data>
+                        <div
+                          class="row"
+                          style="display: flex; padding-block: var(--size-2)"
+                        >
+                          <div class="col-12 q-py-sm row">
+                            <span class="col-4 app-text-muted">
+                              {{
+                                props.row.customerType === 'CORP'
+                                  ? $t('customer.form.legalPersonCode')
+                                  : $t('customer.form.cardNumber')
+                              }}
+                            </span>
+                            <span class="col">
+                              {{
+                                props.row.customerType === 'CORP'
+                                  ? props.row.branch[0]?.legalPersonNo
+                                  : props.row.branch[0]?.citizenId
+                              }}
+                            </span>
+                          </div>
+                          <div
+                            class="col-12 q-py-sm row"
+                            v-for="key in fieldSelected
+                              .filter((v) => {
+                                return (
+                                  v !== 'orderNumber' &&
+                                  v !== 'titleName' &&
+                                  v !== 'address' &&
+                                  v !== 'contactName' &&
+                                  columnsCustomer.some((c) => c.name === v)
+                                );
+                              })
+                              .sort((lhs, rhs) => {
+                                const fields = [
+                                  ...columnsEmployee,
+                                  ...columnsCustomer,
+                                ];
+                                return (
+                                  fields.findIndex((i) => i.name === lhs) -
+                                  fields.findIndex((i) => i.name === rhs)
+                                );
+                              })"
+                            :key="key"
+                          >
+                            <span class="col-4 app-text-muted">
+                              {{ $t(`customer.table.${key}`) }}
+                            </span>
+                            <span class="col">
+                              {{
+                                key === 'businessTypePure'
+                                  ? ($i18n.locale === 'eng'
+                                      ? props.row.branch[0]?.businessType
+                                          ?.nameEN
+                                      : props.row.branch[0]?.businessType
+                                          ?.name) || '-'
+                                  : key === 'jobPosition'
+                                    ? optionStore.mapOption(
+                                        props.row.branch[0]?.jobPosition,
+                                      )
+                                    : key === 'officeTel'
+                                      ? props.row.branch[0]?.officeTel || '-'
+                                      : ''
+                              }}
+                            </span>
+                          </div>
+                        </div>
+                      </template>
+                      <template v-slot:action>
+                        <q-btn
+                          icon="mdi-eye-outline"
+                          :id="`btn-eye-${props.row.branch[0].customerName || props.row.branch[0].firstName}`"
+                          size="sm"
+                          dense
+                          round
+                          flat
+                          @click.stop="editCustomerForm(props.row.id)"
+                        />
+                        <KebabAction
+                          :hide-delete="!canAccess('customer', 'edit')"
+                          :status="props.row.status"
+                          :id-name="props.row.name"
+                          @view="
+                            () => {
+                              const { branch, ...payload } = props.row;
+                              currentCustomer = payload;
+                              editCustomerForm(props.row.id);
+                            }
+                          "
+                          @edit="
+                            async () => {
+                              await editCustomerForm(props.row.id);
+                              customerFormState.branchIndex = 0;
+                            }
+                          "
+                          @delete="
+                            deleteCustomerById(
+                              props.row.id,
+                              async () =>
+                                await fetchListCustomer(true, $q.screen.xs),
+                            )
+                          "
+                          @change-status="
+                            triggerChangeStatus(props.row.id, props.row.status)
+                          "
+                        />
+                      </template>
+                    </BranchCard>
+                  </div>
+                </template>
+              </q-table>
+              <template v-slot:loading>
+                <div
+                  v-if="
+                    $q.screen.lt.sm && currentPageCustomer !== maxPageCustomer
+                  "
+                  class="row justify-center"
+                >
+                  <q-spinner-dots color="primary" size="40px" />
+                </div>
+              </template>
+            </q-infinite-scroll>
+          </div>
+
+          <footer
+            v-if="listCustomer.length !== 0 && $q.screen.gt.xs"
+            class="row justify-between items-center q-px-md q-py-sm"
+          >
+            <div class="row col-4 items-center">
+              <div
+                class="app-text-muted"
+                style="width: 80px"
+                v-if="$q.screen.gt.sm"
+              >
+                {{ $t('general.recordPerPage') }}
+              </div>
+
+              <div><PaginationPageSize v-model="pageSize" /></div>
+            </div>
+
+            <div class="col-4 flex justify-center app-text-muted">
+              {{
+                $q.screen.gt.sm
+                  ? $t('general.recordsPage', {
+                      resultcurrentPage: listCustomer.length,
+                      total: statsCustomerType.PERS + statsCustomerType.CORP,
+                    })
+                  : $t('general.ofPage', {
+                      current: listCustomer.length,
+                      total: statsCustomerType.PERS + statsCustomerType.CORP,
+                    })
+              }}
+            </div>
+
+            <div class="col-4 flex justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageCustomer"
+                v-model:max-page="maxPageCustomer"
+                :fetch-data="
+                  async () => {
+                    await fetchListCustomer();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
+          </footer>
+        </template>
+      </div>
+    </template>
+  </q-splitter>
+
+  <!-- select type to add customer -->
+  <DialogForm
+    v-model:modal="emptyCreateDialog"
+    :title="$t('customer.employerType')"
+    hide-footer
+    no-app-box
+    width="40vw"
+    height="250px"
+    :close="
+      () => {
+        emptyCreateDialog = false;
+        onCreateImageList = { selectedImage: '', list: [] };
+      }
+    "
+  >
+    <div class="full-height row q-pa-md">
+      <ItemCard
+        class="col q-mx-sm full-height"
+        v-for="value in dialogCreateCustomerItem"
+        :key="value.text"
+        :icon="value.icon"
+        :text="value.text"
+        :icon-color="value.iconColor"
+        :bg-color="value.color"
+        @trigger="
+          () => {
+            createCustomerForm(
+              value.text === 'customer.employerLegalEntity' ? 'CORP' : 'PERS',
+            );
+            emptyCreateDialog = false;
+          }
+        "
+      />
+    </div>
+  </DialogForm>
+
+  <!-- add customer -->
+  <DialogContainer
+    :model-value="customerFormState.dialogModal"
+    :on-open="
+      async () => {
+        customerFormStore.resetForm(customerFormState.dialogType === 'create');
+        onCreateImageList = { selectedImage: '', list: [] };
+        customerFormState.customerImageUrl = '';
+        await fetchListOfOptionBranch();
+        await customerFormStore.addCurrentCustomerBranch();
+      }
+    "
+    :on-close="
+      () => {
+        customerFormState.dialogModal = false;
+        onCreateImageList = { selectedImage: '', list: [] };
+      }
+    "
+  >
+    <template #header>
+      <DialogHeader
+        :title="
+          customerFormState.dialogType === 'create'
+            ? $t(`general.add`, {
+                text: `${$t('customer.employer')} `,
+              })
+            : `${$t('customer.employer')} `
+        "
+      >
+        <template #title-after>
+          <span
+            :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+          >
+            :
+            {{
+              customerFormData.customerType === 'CORP'
+                ? $t('customer.employerLegalEntity')
+                : $t('customer.employerNaturalPerson')
+            }}
+          </span>
+        </template>
+      </DialogHeader>
+    </template>
+
+    <div
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <ProfileBanner
+        v-if="customerFormData.customerBranch !== undefined"
+        active
+        hide-fade
+        prefix="dialog"
+        :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
+        :img="
+          customerFormState.customerImageUrl ||
+          `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`
+        "
+        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
+        :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+        :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
+        :icon="
+          customerFormData.customerType === 'PERS'
+            ? 'mdi-account-plus-outline'
+            : 'mdi-office-building-outline'
+        "
+        :title="
+          customerFormData.customerType === 'PERS'
+            ? setPrefixName(
+                {
+                  namePrefix: customerFormData.customerBranch[0]?.namePrefix,
+                  firstName: customerFormData.customerBranch[0]?.firstName,
+                  lastName: customerFormData.customerBranch[0]?.lastName,
+                  firstNameEN: customerFormData.customerBranch[0]?.firstNameEN,
+                  lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
+                },
+                { locale },
+              )
+            : customerFormData.customerBranch[0]?.registerName
+        "
+        :caption="
+          customerFormData.customerType === 'PERS'
+            ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
+            : customerFormData.customerBranch[0]?.registerNameEN
+        "
+        @view="
+          () => {
+            customerFormState.imageDialog = true;
+            customerFormState.isImageEdit = false;
+          }
+        "
+        @edit="
+          () => {
+            if (customerFormState.editCustomerId) {
+              fetchImageList(
+                customerFormState.editCustomerId,
+                customerFormData.selectedImage,
+                'customer',
+              );
+            }
+            customerFormState.imageDialog =
+              customerFormState.isImageEdit = true;
+          }
+        "
+      />
+    </div>
+    <div
+      style="flex: 1; width: 100%; overflow-y: auto"
+      id="customer-form"
+      :class="{
+        'q-px-lg q-pb-lg': $q.screen.gt.sm,
+        'q-px-md q-pb-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <div class="col surface-1 full-height rounded bordered scroll row">
+        <div
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
+        >
+          <div class="q-py-md q-pl-md q-pr-sm">
+            <SideMenu
+              :menu="[
+                {
+                  name: $t('form.field.basicInformation'),
+                  anchor: 'form-basic-info-customer',
+                },
+                {
+                  name: $t('customer.form.group.branch'),
+                  anchor: 'form-branch-customer-branch',
+                  useBtn: true,
+                },
+                ...(customerFormData.customerBranch?.map((v, i) => ({
+                  name:
+                    i === 0
+                      ? $t('customer.form.headQuarters.title')
+                      : $t('customer.form.branch.title', {
+                          name: i,
+                        }),
+                  anchor: `form-branch-customer-no-${i}`,
+                  sub: true,
+                })) || []),
+              ]"
+              background="transparent"
+              :active="{
+                background: 'hsla(var(--blue-6-hsl) / .2)',
+                foreground: 'var(--blue-6)',
+              }"
+              scroll-element="#customer-form-content"
+            >
+              <template v-slot:btn-form-branch-customer-branch>
+                <q-btn
+                  dense
+                  flat
+                  icon="mdi-plus"
+                  size="sm"
+                  rounded
+                  padding="0px 0px"
+                  style="color: var(--stone-9)"
+                  @click.stop="customerFormStore.addCurrentCustomerBranch()"
+                  v-if="
+                    customerFormState.branchIndex === -1 &&
+                    !!customerFormState.editCustomerId &&
+                    customerFormState.dialogType !== 'create'
+                  "
+                  :disabled="!customerFormState.readonly"
+                />
+              </template>
+            </SideMenu>
+          </div>
+        </div>
+        <div
+          class="col-12 col-md-10"
+          :class="{
+            'q-py-md q-pr-md ': $q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
+          }"
+          id="customer-form-content"
+          style="height: 100%; max-height: 100%; overflow-y: auto"
+        >
+          <EmployerFormBasicInfo
+            prefixId="form"
+            v-if="
+              customerFormData.customerBranch !== undefined &&
+              customerFormData.customerBranch.length > 0
+            "
+            class="q-mb-xl"
+            :readonly="
+              (customerFormState.dialogType === 'edit' &&
+                customerFormState.readonly === true) ||
+              customerFormState.dialogType === 'info'
+            "
+            :action-disabled="customerFormState.branchIndex !== -1"
+            id="form-basic-info-customer"
+            :onCreate="customerFormState.dialogType === 'create'"
+            @edit="
+              ((customerFormState.dialogType = 'edit'),
+              (customerFormState.readonly = false))
+            "
+            @cancel="() => customerFormUndo(false)"
+            @delete="
+              customerFormState.editCustomerId &&
+              deleteCustomerById(
+                customerFormState.editCustomerId,
+                async () => await fetchListCustomer(true, $q.screen.xs),
+              )
+            "
+            :customer-type="customerFormData.customerType"
+            v-model:registered-branch-id="customerFormData.registeredBranchId"
+            v-model:customer-name="customerNameInfo"
+            v-model:register-name="
+              customerFormData.customerBranch[0].registerName
+            "
+            v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
+            v-model:legal-person-no="
+              customerFormData.customerBranch[0].legalPersonNo
+            "
+            v-model:business-type="
+              customerFormData.customerBranch[0].businessTypeId
+            "
+            v-model:job-position="
+              customerFormData.customerBranch[0].jobPosition
+            "
+            v-model:telephone-no="
+              customerFormData.customerBranch[0].telephoneNo
+            "
+            v-model:branch-options="registerAbleBranchOption"
+          />
+          <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
+            <div class="col-12 text-weight-bold text-body1 row items-center">
+              <q-icon
+                flat
+                size="xs"
+                class="q-pa-sm rounded q-mr-xs"
+                color="info"
+                name="mdi-briefcase-outline"
+                style="background-color: var(--surface-3)"
+              />
+              <span>{{ $t('customer.form.group.branch') }}</span>
+            </div>
+
+            <template
+              v-for="(_, idx) in customerFormData.customerBranch"
+              :key="idx"
+            >
+              <q-form
+                class="full-width"
+                greedy
+                @submit.prevent="
+                  async () => {
+                    if (!customerFormData.customerBranch) return;
+
+                    if (customerFormData.customerType === 'PERS') {
+                      tabFieldRequired.main = [
+                        'citizenId',
+                        'namePrefix',
+                        'firstName',
+                        'firstNameEN',
+                        'lastName',
+                        'lastNameEN',
+                        'gender',
+                        'birthDate',
+                      ];
+                    }
+                    if (customerFormData.customerType === 'CORP') {
+                      tabFieldRequired.main = ['legalPersonNo', 'registerName'];
+                    }
+                    let tapIsUndefined = validateTabField(
+                      customerFormData.customerBranch?.[idx],
+                      tabFieldRequired,
+                    );
+
+                    if (tapIsUndefined.length > 0) {
+                      return dialog({
+                        color: 'warning',
+                        icon: 'mdi-alert',
+                        title: t('dialog.title.incompleteDataEntry'),
+                        actionText: t('general.ok'),
+                        persistent: true,
+                        message: t('dialog.message.incompleteDataEntry', {
+                          tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
+                        }),
+                        action: async () => {
+                          return;
+                        },
+                      });
+                    }
+                    if (!customerFormData.customerBranch[idx].id) {
+                      let res;
+                      if (idx === 0) {
+                        res =
+                          await customerFormStore.submitFormCustomer(
+                            onCreateImageList,
+                          );
+                      } else {
+                        res = await customerStore.createBranch({
+                          ...customerFormData.customerBranch[idx],
+                          customerId: customerFormState.editCustomerId || '',
+                        });
+                      }
+                      if (res) {
+                        customerFormState.readonly = true;
+                        notify('create', $t('general.success'));
+                      }
+                    } else {
+                      if (!customerFormState.editCustomerId) return;
+                      await customerStore.editBranchById(
+                        customerFormData.customerBranch[idx].id || '',
+                        {
+                          ...customerFormData.customerBranch[idx],
+                          id: undefined,
+                        },
+                      );
+                    }
+
+                    const uploadResult =
+                      customerFormData.customerBranch[idx].file?.map(
+                        async (v) => {
+                          if (!v.file) return;
+
+                          const ext = v.file.name.split('.').at(-1);
+                          let filename = v.group + '-' + new Date().getTime();
+                          if (ext) filename += `.${ext}`;
+
+                          const res = await customerStore.putAttachment({
+                            parentId:
+                              customerFormData.customerBranch?.[idx].id || '',
+                            file: v.file,
+                            name: filename,
+                          });
+
+                          if (res) {
+                            await customerFormStore.assignFormData(
+                              customerFormState.editCustomerId,
+                            );
+                          }
+                        },
+                      ) || [];
+
+                    for (const r of uploadResult) await r;
+
+                    await customerFormStore.assignFormData(
+                      customerFormState.editCustomerId,
+                    );
+
+                    await fetchListCustomer(true, $q.screen.xs);
+                    customerFormStore.resetForm();
+                  }
+                "
+              >
+                <EmployerFormBranch
+                  :index="idx"
+                  prefixId="form"
+                  v-if="customerFormData.customerBranch"
+                  v-model:customer-branch="customerFormData.customerBranch[idx]"
+                  :onCreate="customerFormState.dialogType === 'create'"
+                  :customer-type="customerFormData.customerType"
+                  :readonly="customerFormState.branchIndex !== idx"
+                  :action-disabled="
+                    !customerFormState.readonly ||
+                    (customerFormState.branchIndex !== -1 &&
+                      customerFormState.branchIndex !== idx)
+                  "
+                  @edit="() => (customerFormState.branchIndex = idx)"
+                  @cancel="() => customerFormUndo(false)"
+                  @delete="
+                    async () => {
+                      if (!customerFormState.editCustomerId) return;
+
+                      if (idx === 0) {
+                        deleteCustomerById(
+                          customerFormState.editCustomerId,
+                          async () =>
+                            await fetchListCustomer(true, $q.screen.xs),
+                        );
+                        return;
+                      }
+                      if (!!customerFormData.customerBranch?.[idx].id) {
+                        const action = await deleteCustomerBranchById(
+                          customerFormData.customerBranch[idx].id || '',
+                        );
+                        if (action) {
+                          await customerFormStore.assignFormData(
+                            customerFormState.editCustomerId,
+                          );
+                        }
+                        customerFormStore.resetForm();
+                      }
+                    }
+                  "
+                  @save="() => {}"
+                />
+              </q-form>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DialogContainer>
+
+  <!-- edit customer -->
+  <DrawerInfo
+    hide-action
+    v-model:drawer-open="customerFormState.drawerModal"
+    :title="
+      customerFormData.customerType === 'CORP' &&
+      customerFormData.customerBranch
+        ? customerFormData.customerBranch[0]?.registerName || '-'
+        : (customerFormData.customerBranch[0]?.namePrefix
+            ? $t(
+                'customer.form.prefix.' +
+                  customerFormData.customerBranch[0]?.namePrefix,
+              ) + ' '
+            : '') + customerNameInfo || '-'
+    "
+    :badge-label="
+      customerFormData.customerType === 'CORP'
+        ? $t('customer.employerLegalEntity')
+        : $t('customer.employerNaturalPerson')
+    "
+    :badge-style="
+      customerFormData.customerType === 'CORP'
+        ? `color: var(--${$q.dark.isActive ? 'violet-10' : 'violet-11'}); background: hsl(var(--${$q.dark.isActive ? 'violet-10-hsl' : 'violet-11-hsl'})/0.15)`
+        : `color: var(--${$q.dark.isActive ? 'teal-8' : 'teal-10'}); background: hsl(var(--${$q.dark.isActive ? 'teal-8-hsl' : 'teal-10-hsl'})/0.15)`
+    "
+    :close="
+      () => {
+        resetScrollBar('customer-form-content');
+      }
+    "
+    :submit="
+      async () => {
+        await customerFormStore.submitFormCustomer();
+        customerFormState.readonly = true;
+        notify('create', $t('general.success'));
+        await fetchListCustomer();
+      }
+    "
+    :show="
+      async () => {
+        // await fetchListOfOptionBranch();
+        // customerFormStore.resetForm(true);
+      }
+    "
+    :before-close="
+      () => {
+        if (customerFormStore.isFormDataDifferent()) {
+          customerConfirmUnsave();
+          return true;
+        } else {
+          fetchListCustomer();
+          customerFormState.branchIndex = -1;
+          customerFormStore.resetForm(true);
+        }
+        return false;
+      }
+    "
+  >
+    <div class="column full-height">
+      <div
+        :class="{
+          'q-mx-lg q-my-md': $q.screen.gt.sm,
+          'q-mx-md q-my-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <ProfileBanner
+          v-if="customerFormData.customerBranch !== undefined"
+          :prefix="customerFormData.registeredBranchId"
+          :active="customerFormData.status !== 'INACTIVE'"
+          hide-fade
+          use-toggle
+          v-model:toggle-status="customerFormData.status"
+          :toggle-title="$t('status.title')"
+          :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
+          :img="
+            `${baseUrl}/customer/${customerFormState.editCustomerId}/image/${customerFormData.selectedImage}`.concat(
+              refreshImageState ? `?ts=${Date.now()}` : '',
+            ) || null
+          "
+          :fallback-img="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
+          :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+          :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
+          :icon="
+            customerFormData.customerType === 'PERS'
+              ? 'mdi-account-plus-outline'
+              : 'mdi-office-building-outline'
+          "
+          :title="
+            customerFormData.customerType === 'PERS'
+              ? setPrefixName(
+                  {
+                    namePrefix: customerFormData.customerBranch[0]?.namePrefix,
+                    firstName: customerFormData.customerBranch[0]?.firstName,
+                    lastName: customerFormData.customerBranch[0]?.lastName,
+                    firstNameEN:
+                      customerFormData.customerBranch[0]?.firstNameEN,
+                    lastNameEN: customerFormData.customerBranch[0]?.lastNameEN,
+                  },
+                  { locale },
+                )
+              : customerFormData.customerBranch[0]?.registerName
+          "
+          :caption="
+            customerFormData.customerType === 'PERS'
+              ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
+              : customerFormData.customerBranch[0]?.registerNameEN
+          "
+          @view="
+            () => {
+              customerFormState.imageDialog = true;
+              customerFormState.isImageEdit = false;
+            }
+          "
+          @edit="
+            customerFormState.imageDialog = customerFormState.isImageEdit = true
+          "
+          @update:toggle-status="
+            async (v) => {
+              if (!customerFormState.editCustomerId) return;
+              triggerChangeStatus(customerFormState.editCustomerId, v);
+            }
+          "
+        />
+      </div>
+
+      <div
+        style="flex: 1; width: 100%; overflow-y: auto"
+        class="column"
+        id="customer-form"
+        :class="{
+          'q-px-lg q-pb-lg': $q.screen.gt.sm,
+          'q-px-md q-pb-sm': !$q.screen.gt.sm,
+        }"
+      >
+        <div class="col full-width surface-1 rounded bordered row">
+          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
+            <div class="q-py-md q-pl-md q-pr-sm">
+              <SideMenu
+                :menu="[
+                  {
+                    name: $t('form.field.basicInformation'),
+                    anchor: 'form-basic-info-customer',
+                  },
+                  {
+                    name: $t('customer.form.group.branch'),
+                    anchor: 'form-branch-customer-branch',
+                    useBtn: true,
+                  },
+
+                  ...(customerFormData.customerBranch?.map((v, i) => ({
+                    name:
+                      i === 0
+                        ? $t('customer.form.headQuarters.title')
+                        : $t('customer.form.branch.title', {
+                            name: i,
+                          }),
+                    anchor: `form-branch-customer-no-${i}`,
+                    sub: true,
+                  })) || []),
+                ]"
+                background="transparent"
+                :active="{
+                  background: 'hsla(var(--blue-6-hsl) / .2)',
+                  foreground: 'var(--blue-6)',
+                }"
+                scroll-element="#customer-form-content"
+              >
+                <template v-slot:btn-form-branch-customer-branch>
+                  <q-btn
+                    dense
+                    flat
+                    icon="mdi-plus"
+                    size="sm"
+                    rounded
+                    padding="0px 0px"
+                    style="color: var(--stone-9)"
+                    @click.stop="customerFormStore.addCurrentCustomerBranch()"
+                    v-if="
+                      customerFormState.branchIndex === -1 &&
+                      !!customerFormState.editCustomerId &&
+                      customerFormState.dialogType !== 'create'
+                    "
+                    :disabled="!customerFormState.readonly"
+                  />
+                </template>
+              </SideMenu>
+            </div>
+          </div>
+
+          <div
+            class="col-12 col-md-10"
+            :class="{
+              'q-py-md q-pr-md ': $q.screen.gt.sm,
+              'q-pa-sm': !$q.screen.gt.sm,
+            }"
+            id="customer-form-content"
+            style="height: 100%; max-height: 100%; overflow-y: auto"
+          >
+            <EmployerFormBasicInfo
+              v-if="
+                customerFormData.customerBranch !== undefined &&
+                customerFormData.customerBranch.length > 0
+              "
+              :readonly="
+                (customerFormState.dialogType === 'edit' &&
+                  customerFormState.readonly === true) ||
+                customerFormState.dialogType === 'info'
+              "
+              :hide-action="customerFormData.status === 'INACTIVE'"
+              :action-disabled="customerFormState.branchIndex !== -1"
+              id="form-basic-info-customer"
+              :onCreate="customerFormState.dialogType === 'create'"
+              @edit="
+                ((customerFormState.dialogType = 'edit'),
+                (customerFormState.readonly = false))
+              "
+              @cancel="() => customerFormUndo(false)"
+              @delete="
+                customerFormState.editCustomerId &&
+                deleteCustomerById(
+                  customerFormState.editCustomerId,
+                  async () => await fetchListCustomer(true, $q.screen.xs),
+                )
+              "
+              :customer-type="customerFormData.customerType"
+              v-model:registered-branch-id="customerFormData.registeredBranchId"
+              v-model:customer-name="customerNameInfo"
+              v-model:register-name="
+                customerFormData.customerBranch[0].registerName
+              "
+              v-model:citizen-id="customerFormData.customerBranch[0].citizenId"
+              v-model:legal-person-no="
+                customerFormData.customerBranch[0].legalPersonNo
+              "
+              v-model:business-type="
+                customerFormData.customerBranch[0].businessTypeId
+              "
+              v-model:job-position="
+                customerFormData.customerBranch[0].jobPosition
+              "
+              v-model:telephone-no="
+                customerFormData.customerBranch[0].telephoneNo
+              "
+              v-model:branch-options="registerAbleBranchOption"
+            />
+
+            <div class="row q-col-gutter-sm" id="form-branch-customer-branch">
+              <div
+                class="col-12 text-weight-bold text-body1 row items-center q-mt-lg"
+              >
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-briefcase-outline"
+                  style="background-color: var(--surface-3)"
+                />
+                <span>{{ $t('customer.form.group.branch') }}</span>
+              </div>
+
+              <template
+                v-for="(_, idx) in customerFormData.customerBranch"
+                :key="idx"
+              >
+                <q-form
+                  class="full-width q-mb-xl"
+                  v-if="customerFormData.customerBranch"
+                  greedy
+                  @submit.prevent="
+                    async () => {
+                      if (!customerFormData.customerBranch) return;
+                      if (!customerFormState.editCustomerId) return;
+
+                      if (customerFormData.customerType === 'PERS') {
+                        tabFieldRequired.main = [
+                          'citizenId',
+                          'namePrefix',
+                          'firstName',
+                          'firstNameEN',
+                          'lastName',
+                          'lastNameEN',
+                          'gender',
+                          'birthDate',
+                        ];
+                      }
+                      if (customerFormData.customerType === 'CORP') {
+                        tabFieldRequired.main = [
+                          'legalPersonNo',
+                          'registerName',
+                        ];
+                      }
+
+                      let tapIsUndefined = validateTabField(
+                        customerFormData.customerBranch?.[idx],
+                        tabFieldRequired,
+                      );
+
+                      if (tapIsUndefined.length > 0) {
+                        return dialog({
+                          color: 'warning',
+                          icon: 'mdi-alert',
+                          title: t('dialog.title.incompleteDataEntry'),
+                          actionText: t('general.ok'),
+                          persistent: true,
+                          message: t('dialog.message.incompleteDataEntry', {
+                            tap: `${tapIsUndefined.map((v: string) => t(`customerBranch.tab.${v}`)).join(', ')}`,
+                          }),
+                          action: async () => {
+                            return;
+                          },
+                        });
+                      }
+                      if (!customerFormData.customerBranch[idx].id) {
+                        await customerStore.createBranch({
+                          ...customerFormData.customerBranch[idx],
+                          customerId: customerFormState.editCustomerId,
+                        });
+                      } else {
+                        await customerStore.editBranchById(
+                          customerFormData.customerBranch[idx].id || '',
+                          {
+                            ...customerFormData.customerBranch[idx],
+                            id: undefined,
+                          },
+                        );
+                      }
+
+                      customerFormData.customerBranch[idx].file?.forEach(
+                        async (v) => {
+                          if (!v.file) return;
+
+                          const ext = v.file.name.split('.').at(-1);
+                          let filename = v.group + '-' + new Date().getTime();
+                          if (ext) filename += `.${ext}`;
+
+                          const res = await customerStore.putAttachment({
+                            parentId:
+                              customerFormData.customerBranch?.[idx].id || '',
+                            file: v.file,
+                            name: filename,
+                          });
+
+                          if (res) {
+                            await customerFormStore.assignFormData(
+                              customerFormState.editCustomerId,
+                            );
+                          }
+                        },
+                      );
+
+                      await customerFormStore.assignFormData(
+                        customerFormState.editCustomerId,
+                      );
+
+                      customerFormStore.resetForm();
+                    }
+                  "
+                >
+                  <EmployerFormBranch
+                    prefix-id="info"
+                    v-if="!!customerFormState.editCustomerId"
+                    :index="idx"
+                    :hide-action="customerFormData.status === 'INACTIVE'"
+                    v-model:customer-branch="
+                      customerFormData.customerBranch[idx]
+                    "
+                    :customer-type="customerFormData.customerType"
+                    :action-disabled="
+                      !customerFormState.readonly ||
+                      (customerFormState.branchIndex !== -1 &&
+                        customerFormState.branchIndex !== idx)
+                    "
+                    :hide-delete="!canAccess('customer', 'edit')"
+                    :readonly="customerFormState.branchIndex !== idx"
+                    @edit="() => (customerFormState.branchIndex = idx)"
+                    @cancel="() => customerFormUndo(false)"
+                    @delete="
+                      async () => {
+                        if (!!customerFormData.customerBranch?.[idx].id) {
+                          const action = await deleteCustomerBranchById(
+                            customerFormData.customerBranch[idx].id || '',
+                          );
+                          if (action) {
+                            await customerFormStore.assignFormData(
+                              customerFormState.editCustomerId,
+                            );
+                          }
+                          customerFormStore.resetForm();
+                        }
+                      }
+                    "
+                    @save="() => {}"
+                  />
+                </q-form>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DrawerInfo>
+
+  <!-- upload profile image -->
+  <ImageUploadDialog
+    ref="dialogCustomerImageUpload"
+    v-model:dialog-state="customerFormState.imageDialog"
+    v-model:file="customerFormData.image"
+    v-model:image-url="customerFormState.customerImageUrl"
+    v-model:data-list="customerFormState.imageList"
+    v-model:on-create-data-list="onCreateImageList"
+    :on-create="
+      customerFormState.dialogModal && !customerFormState.editCustomerId
+    "
+    :default-url="customerFormState.defaultCustomerImageUrl"
+    :hidden-footer="!customerFormState.isImageEdit"
+    @add-image="
+      async (v) => {
+        if (!v) return;
+        if (!customerFormState.editCustomerId) return;
+        await customerStore.addImageList(
+          v,
+          customerFormState.editCustomerId,
+          Date.now().toString(),
+        );
+        await fetchImageList(
+          customerFormState.editCustomerId,
+          customerFormData.selectedImage || '',
+          'customer',
+        );
+      }
+    "
+    @remove-image="
+      async (v) => {
+        if (!v) return;
+        if (!customerFormState.editCustomerId) return;
+        const name = v.split('/').pop() || '';
+        await customerStore.deleteImageByName(
+          customerFormState.editCustomerId,
+          name,
+        );
+        await fetchImageList(
+          customerFormState.editCustomerId,
+          customerFormData.selectedImage || '',
+          'customer',
+        );
+      }
+    "
+    @submit="
+      async (v) => {
+        console.log(customerFormState.editCustomerId);
+        if (
+          customerFormState.dialogModal &&
+          !customerFormState.editCustomerId
+        ) {
+          console.log(1);
+          customerFormState.customerImageUrl = v;
+          customerFormState.imageDialog = false;
+        } else {
+          console.log(2);
+          refreshImageState = true;
+          customerFormData.selectedImage = v;
+          customerFormState.imageList
+            ? (customerFormState.imageList.selectedImage = v)
+            : '';
+          customerFormState.customerImageUrl = `${baseUrl}/customer/${customerFormState.editCustomerId && customerFormState.editCustomerId}/image/${v}`;
+          console.log(customerFormData.selectedImage);
+          customerFormStore.resetForm();
+          console.log(customerFormData.selectedImage);
+          await customerFormStore.submitFormCustomer();
+          console.log(customerFormData.selectedImage);
+          customerFormState.imageDialog = false;
+          refreshImageState = false;
+          await fetchListCustomer();
+          console.log(customerFormData.selectedImage);
+        }
+      }
+    "
+  >
+    <template #title>
+      <span
+        v-if="
+          !customerFormState.dialogModal || customerFormState.editCustomerId
+        "
+        class="justify-center flex text-bold"
+      >
+        {{ $t('general.image') }}
+        {{
+          $i18n.locale === 'eng'
+            ? customerFormData.customerType === 'CORP'
+              ? customerFormData?.customerBranch?.[0].registerNameEN || '-'
+              : customerFormData?.customerBranch?.[0].firstNameEN +
+                  ' ' +
+                  customerFormData?.customerBranch?.[0].lastNameEN || '-'
+            : customerFormData.customerType === 'CORP'
+              ? customerFormData?.customerBranch?.[0].registerName || '-'
+              : customerFormData?.customerBranch?.[0].firstName +
+                  ' ' +
+                  customerFormData?.customerBranch?.[0].lastName || '-'
+        }}
+      </span>
+    </template>
+    <template #error>
+      <div class="full-height full-width" style="background: white">
+        <div class="full-height full-width flex justify-center items-center">
+          <q-img
+            :src="`/images/customer-${customerFormData.customerType}-avartar-male.png`"
+            fit="contain"
+            style="height: 100%"
+          >
+            <template #error>
+              <span
+                class="full-width full-height column items-center justify-center"
+              >
+                <q-icon
+                  size="3rem"
+                  :name="
+                    customerFormData.customerType === 'PERS'
+                      ? 'mdi-account-plus-outline'
+                      : 'mdi-office-building-outline'
+                  "
+                  :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+                />
+              </span>
+            </template>
+          </q-img>
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
+
+  <DrawerEmployee
+    :fetch-list-employee="fetchListEmployee"
+    :fetch-image-list="fetchImageList"
+    :current-tab="currentTab"
+  />
+</template>
+
+<style scoped>
+.status-active {
+  --_branch-status-color: var(--green-6-hsl);
+}
+
+.status-inactive {
+  --_branch-status-color: var(--stone-5-hsl);
+  --_branch-badge-bg: var(--stone-5-hsl);
+  filter: grayscale(0.5);
+  opacity: 0.5;
+}
+
+.branch-card__icon {
+  background-color: hsla(var(--_branch-card-bg) / 0.15);
+  border-radius: 50%;
+  padding: var(--size-1);
+  position: relative;
+  transform: rotate(45deg);
+
+  &::after {
+    content: ' ';
+    display: block;
+    block-size: 0.5rem;
+    aspect-ratio: 1;
+    position: absolute;
+    border-radius: 50%;
+    right: -0.1rem;
+    top: calc(50% - 0.25rem);
+    bottom: calc(50% - 0.25rem);
+    background-color: hsla(var(--_branch-status-color) / 1);
+  }
+
+  & :deep(.q-avatar) {
+    transform: rotate(-45deg);
+    color: hsla(var(--_branch-card-bg) / 1);
+  }
+}
+
+.btn-arrow-right {
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+
+.btn-arrow-right.active {
+  transform: rotate(90deg);
+  transition: transform 0.3s ease;
+}
+
+.employer-active {
+  background-color: hsla(var(--info-bg) / 0.1);
+  color: hsl(var(--info-bg));
+}
+
+:deep(.q-table__middle.scroll) {
+  overflow: hidden;
+}
+</style>
diff --git a/src/pages/03_customer-management/TabEmployee.vue b/src/pages/03_customer-management/TabEmployee.vue
new file mode 100644
index 00000000..81348622
--- /dev/null
+++ b/src/pages/03_customer-management/TabEmployee.vue
@@ -0,0 +1,514 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+
+import {
+  PaginationComponent,
+  PaginationPageSize,
+  ImageUploadDialog,
+  DialogForm,
+  NoData,
+} from 'src/components';
+import DialogEmployee from 'src/components/03_customer-management/DialogEmployee.vue';
+import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
+import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
+import DrawerEmployee from 'src/components/03_customer-management/DrawerEmployee.vue';
+
+import useFlowStore from 'src/stores/flow';
+import useEmployeeStore from 'src/stores/employee';
+import { Status } from 'src/stores/types';
+import { Employee, EmployeeHistory } from 'src/stores/employee/types';
+import { baseUrl, dialog, canAccess } from 'src/stores/utils';
+import { calculateAge, toISOStringWithTimezone } from 'src/utils/datetime';
+import { useCustomerForm, useEmployeeForm } from './form';
+import { columnsEmployee } from './constant';
+
+const $q = useQuasar();
+const flowStore = useFlowStore();
+const employeeStore = useEmployeeStore();
+const employeeFormStore = useEmployeeForm();
+const customerFormStore = useCustomerForm();
+const { t } = useI18n();
+const { state: employeeFormState, currentFromDataEmployee } =
+  storeToRefs(employeeFormStore);
+const { deleteEmployeeById } = employeeFormStore;
+const { state: customerFormState } = storeToRefs(customerFormStore);
+
+const employeeStats = defineModel('employeeStats', { default: 0 });
+
+const props = defineProps<{
+  currentTab: 'employee' | 'employer';
+  currentStatus: Status | 'All';
+  gridView: boolean;
+  inputSearch: string;
+  searchDate: string[];
+  fieldSelected: string[];
+  fetchImageList: (
+    id: string,
+    selectedName: string,
+    type: 'customer' | 'employee',
+  ) => Promise<void>;
+  triggerChangeStatus: (
+    id: string,
+    status: string,
+    employeeName?: string,
+  ) => void;
+}>();
+
+defineExpose({
+  openSpecificEmployee,
+  fetchListEmployee,
+  toggleStatusEmployee,
+});
+
+const listEmployee = ref<Employee[]>([]);
+const currentPageEmployee = ref<number>(1);
+const maxPageEmployee = ref<number>(1);
+const pageSize = ref<number>(30);
+const employeeHistoryDialog = ref(false);
+const employeeHistory = ref<EmployeeHistory[]>();
+
+const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));
+
+async function fetchListEmployee(opt?: {
+  fetchStats?: boolean;
+  page?: number;
+  pageSize?: number;
+  customerId?: string;
+  mobileFetch?: boolean;
+}) {
+  const resultListEmployee = await employeeStore.fetchList({
+    customerId: opt?.customerId,
+    page: opt
+      ? opt.mobileFetch
+        ? 1
+        : opt.page || currentPageEmployee.value
+      : currentPageEmployee.value,
+    pageSize: opt
+      ? opt.mobileFetch
+        ? listEmployee.value.length +
+          (employeeStats.value === listEmployee.value.length ? 1 : 0)
+        : opt.pageSize || pageSize.value
+      : pageSize.value,
+    status:
+      props.currentStatus === 'All'
+        ? undefined
+        : props.currentStatus === 'ACTIVE'
+          ? 'ACTIVE'
+          : 'INACTIVE',
+    query: props.inputSearch,
+    passport: true,
+    visa: true,
+    startDate: props.searchDate[0],
+    endDate: props.searchDate[1],
+  });
+  if (resultListEmployee) {
+    maxPageEmployee.value = Math.ceil(
+      resultListEmployee.total / pageSize.value,
+    );
+    $q.screen.xs && !(opt && opt.mobileFetch)
+      ? listEmployee.value.push(...resultListEmployee.result)
+      : (listEmployee.value = resultListEmployee.result);
+  }
+
+  if (opt && opt.fetchStats)
+    employeeStats.value = await employeeStore.getStatsEmployee();
+}
+
+async function openHistory(id: string) {
+  const res = await employeeStore.getEditHistory(id);
+  employeeHistory.value = res.reverse();
+  employeeHistoryDialog.value = true;
+}
+
+async function editEmployeeFormPersonal(id: string) {
+  await employeeFormStore.assignFormDataEmployee(id);
+  await props.fetchImageList(
+    id,
+    currentFromDataEmployee.value.selectedImage || '',
+    'employee',
+  );
+
+  employeeFormState.value.isEmployeeEdit = true;
+  employeeFormState.value.dialogType = 'edit';
+  employeeFormState.value.drawerModal = true;
+}
+
+async function openSpecificEmployee(id: string) {
+  await employeeFormStore.assignFormDataEmployee(id);
+  await props.fetchImageList(
+    id,
+    currentFromDataEmployee.value.selectedImage || '',
+    'employee',
+  );
+  employeeFormState.value.dialogType = 'info';
+  employeeFormState.value.drawerModal = true;
+}
+
+async function toggleStatusEmployee(
+  id: string,
+  status: boolean,
+  employeeName: string,
+) {
+  const res = await employeeStore.editById(id, {
+    status: !status ? 'ACTIVE' : 'INACTIVE',
+    firstNameEN: employeeName,
+  });
+  if (res && employeeFormState.value.drawerModal) {
+    currentFromDataEmployee.value.status = res.status;
+  }
+
+  await employeeFormStore.assignFormDataEmployee(id);
+  await fetchListEmployee({ mobileFetch: $q.screen.xs });
+  flowStore.rotate();
+}
+
+watch(
+  () => [
+    props.inputSearch,
+    props.searchDate,
+    props.currentStatus,
+    pageSize.value,
+  ],
+  async () => {
+    currentPageEmployee.value = 1;
+    listEmployee.value = [];
+    await fetchListEmployee({ fetchStats: true });
+
+    customerFormState.value.currentCustomerId = undefined;
+    flowStore.rotate();
+  },
+);
+
+watch(
+  () => employeeFormState.value.currentCustomerBranch,
+  (e) => {
+    if (!e) return;
+    if (employeeFormState.value.formDataEmployeeSameAddr) {
+      currentFromDataEmployee.value.address = e.address;
+      currentFromDataEmployee.value.addressEN = e.addressEN;
+      currentFromDataEmployee.value.provinceId = e.provinceId;
+      currentFromDataEmployee.value.districtId = e.districtId;
+      currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
+    }
+    currentFromDataEmployee.value.customerBranchId = e.id;
+  },
+);
+
+watch(
+  () => employeeFormState.value.formDataEmployeeSameAddr,
+  (isSame) => {
+    if (!employeeFormState.value.currentCustomerBranch) return;
+    if (isSame) {
+      currentFromDataEmployee.value.address =
+        employeeFormState.value.currentCustomerBranch.address;
+      currentFromDataEmployee.value.addressEN =
+        employeeFormState.value.currentCustomerBranch.addressEN;
+      currentFromDataEmployee.value.provinceId =
+        employeeFormState.value.currentCustomerBranch.provinceId;
+      currentFromDataEmployee.value.districtId =
+        employeeFormState.value.currentCustomerBranch.districtId;
+      currentFromDataEmployee.value.subDistrictId =
+        employeeFormState.value.currentCustomerBranch.subDistrictId;
+    }
+    currentFromDataEmployee.value.customerBranchId =
+      employeeFormState.value.currentCustomerBranch.id;
+  },
+);
+
+watch(
+  () => currentFromDataEmployee.value.dateOfBirth,
+  (v) => {
+    const isEdit =
+      employeeFormState.value.drawerModal &&
+      employeeFormState.value.isEmployeeEdit;
+    let currentFormDate = v && toISOStringWithTimezone(new Date(v));
+    let currentDate: string = '';
+
+    if (isEdit && employeeFormState.value.currentEmployee) {
+      currentDate = toISOStringWithTimezone(
+        new Date(employeeFormState.value.currentEmployee.dateOfBirth),
+      );
+    }
+
+    if (
+      employeeFormState.value.dialogModal ||
+      (isEdit && currentFormDate !== currentDate)
+    ) {
+      const age = calculateAge(
+        currentFromDataEmployee.value.dateOfBirth,
+        'year',
+      );
+      if (currentFromDataEmployee.value.dateOfBirth && Number(age) < 15) {
+        dialog({
+          color: 'warning',
+          icon: 'mdi-alert',
+          title: t('dialog.title.youngWorker15'),
+          cancelText: t('general.edit'),
+          persistent: true,
+          message: t('dialog.message.youngWorker15'),
+
+          cancel: async () => {
+            currentFromDataEmployee.value.dateOfBirth = null;
+            return;
+          },
+        });
+      }
+
+      if (
+        currentFromDataEmployee.value.dateOfBirth &&
+        Number(age) > 15 &&
+        Number(age) <= 18
+      ) {
+        dialog({
+          color: 'warning',
+          icon: 'mdi-alert',
+          title: t('dialog.title.youngWorker18'),
+          cancelText: t('general.cancel'),
+          actionText: t('general.confirm'),
+          persistent: true,
+          message: t('dialog.message.youngWorker18'),
+          action: () => {},
+          cancel: async () => {
+            currentFromDataEmployee.value.dateOfBirth = null;
+            return;
+          },
+        });
+      }
+    }
+  },
+);
+
+watch(
+  () => currentFromDataEmployee.value.image,
+  () => {
+    if (currentFromDataEmployee.value.image !== null)
+      employeeFormState.value.isImageEdit = true;
+  },
+);
+
+onMounted(async () => {
+  currentPageEmployee.value = 1;
+  listEmployee.value = [];
+  await fetchListEmployee({ fetchStats: true });
+});
+</script>
+<template>
+  <q-splitter
+    v-model="splitPercent"
+    :limits="[0, 100]"
+    class="col full-width"
+    before-class="overflow-hidden"
+    after-class="overflow-hidden"
+    :disable="$q.screen.lt.sm"
+  >
+    <template v-slot:before>
+      <div
+        class="column q-pa-md surface-1 full-height full-width"
+        style="gap: var(--size-1)"
+      >
+        <q-item
+          active
+          dense
+          active-class="employer-active"
+          class="no-padding items-center rounded full-width"
+          v-close-popup
+          clickable
+        >
+          <span class="q-px-md ellipsis">
+            {{ $t('general.all') }}
+          </span>
+        </q-item>
+      </div>
+    </template>
+
+    <template v-slot:after>
+      <div class="column full-height no-wrap">
+        <!-- employee -->
+        <template
+          v-if="listEmployee && employeeStats > 0 && currentTab === 'employee'"
+        >
+          <div
+            v-if="listEmployee.length === 0"
+            class="row col full-width items-center justify-center"
+            style="min-height: 250px"
+          >
+            <NoData :not-found="!!inputSearch" />
+          </div>
+
+          <article
+            v-if="listEmployee.length !== 0"
+            class="column scroll q-pa-md col"
+          >
+            <q-infinite-scroll
+              :offset="10"
+              @load="
+                (_, done) => {
+                  if (
+                    $q.screen.gt.xs ||
+                    currentPageEmployee === maxPageEmployee
+                  )
+                    return;
+                  currentPageEmployee = currentPageEmployee + 1;
+                  fetchListEmployee().then(() =>
+                    done(currentPageEmployee >= maxPageEmployee),
+                  );
+                }
+              "
+            >
+              <TableEmpoloyee
+                :hide-delete="!canAccess('customer', 'edit')"
+                v-model:page-size="pageSize"
+                v-model:current-page="currentPageEmployee"
+                :grid-view="gridView"
+                :list-employee="listEmployee"
+                :columns-employee="columnsEmployee"
+                :field-selected="fieldSelected"
+                @history="
+                  (item: any) => {
+                    openHistory(item.id);
+                  }
+                "
+                @view="
+                  async (item: any) => {
+                    employeeFormState.drawerModal = true;
+                    employeeFormState.isEmployeeEdit = false;
+                    employeeFormStore.assignFormDataEmployee(item.id);
+                    await fetchImageList(
+                      item.id,
+                      item.selectedImage || '',
+                      'employee',
+                    );
+                  }
+                "
+                @edit="(item: any) => editEmployeeFormPersonal(item.id)"
+                @delete="
+                  (item: any) => {
+                    deleteEmployeeById({
+                      id: item.id,
+                      fetch: async () =>
+                        await fetchListEmployee(
+                          currentTab === 'employer'
+                            ? {
+                                page: 1,
+                                pageSize: 999,
+                                customerId: customerFormState.currentCustomerId,
+                              }
+                            : {
+                                fetchStats: true,
+                                mobileFetch: $q.screen.xs,
+                              },
+                        ),
+                    });
+                  }
+                "
+                @toggle-status="
+                  async (item: any) => {
+                    triggerChangeStatus(item.id, item.status, item.firstNameEN);
+                  }
+                "
+              />
+              <template v-slot:loading>
+                <div
+                  v-if="
+                    $q.screen.lt.sm && currentPageEmployee !== maxPageEmployee
+                  "
+                  class="row justify-center"
+                >
+                  <q-spinner-dots color="primary" size="40px" />
+                </div>
+              </template>
+            </q-infinite-scroll>
+          </article>
+          <footer
+            v-if="listEmployee.length !== 0 && $q.screen.gt.xs"
+            class="row justify-between items-center q-px-md q-py-sm"
+          >
+            <div class="row col-4 items-center">
+              <div
+                class="app-text-muted"
+                style="width: 80px"
+                v-if="$q.screen.gt.sm"
+              >
+                {{ $t('general.recordPerPage') }}
+              </div>
+
+              <div><PaginationPageSize v-model="pageSize" /></div>
+            </div>
+
+            <div class="col-4 flex justify-center app-text-muted">
+              {{
+                $q.screen.gt.sm
+                  ? $t('general.recordsPage', {
+                      resultcurrentPage: listEmployee.length,
+                      total: employeeStats,
+                    })
+                  : $t('general.ofPage', {
+                      current: listEmployee.length,
+                      total: employeeStats,
+                    })
+              }}
+            </div>
+
+            <div class="col-4 flex justify-end">
+              <PaginationComponent
+                v-model:current-page="currentPageEmployee"
+                v-model:max-page="maxPageEmployee"
+                :fetch-data="
+                  async () => {
+                    await fetchListEmployee();
+                    flowStore.rotate();
+                  }
+                "
+              />
+            </div>
+          </footer>
+        </template>
+      </div>
+    </template>
+  </q-splitter>
+
+  <!-- add employee -->
+  <DialogEmployee
+    :fetch-list-employee="fetchListEmployee"
+    :fetch-image-list="fetchImageList"
+    :current-tab="currentTab"
+  />
+
+  <!-- ลูกจ้าง edit employee -->
+  <DrawerEmployee
+    :fetch-list-employee="fetchListEmployee"
+    :fetch-image-list="fetchImageList"
+    :current-tab="currentTab"
+    @change-status="
+      (s) =>
+        triggerChangeStatus(
+          currentFromDataEmployee.id,
+          s,
+          currentFromDataEmployee.firstNameEN,
+        )
+    "
+  />
+
+  <DialogForm
+    :title="$t('general.historyEdit')"
+    hide-footer
+    v-model:modal="employeeHistoryDialog"
+  >
+    <div class="q-pa-md">
+      <HistoryEditComponent
+        v-if="employeeHistory"
+        v-model:history-list="employeeHistory"
+      />
+    </div>
+  </DialogForm>
+</template>
+
+<style scoped>
+.employer-active {
+  background-color: hsla(var(--info-bg) / 0.1);
+  color: hsl(var(--info-bg));
+}
+</style>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
index eb131ea9..7353db3c 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
@@ -137,7 +137,12 @@ watch(
           @update:model-value="
             (v) => (typeof v === 'string' ? (registerName = v.trim()) : '')
           "
-          :rules="[(val: string) => !!val || $t('form.error.required')]"
+          :rules="[
+            (val) => !!val || $t('form.error.required'),
+            (val) =>
+              /^[A-Za-z0-9ก-๙\s&.,'()-]+$/.test(val) ||
+              $t('form.error.branchNameField'),
+          ]"
         />
 
         <q-input
@@ -153,29 +158,15 @@ watch(
             (v) => (typeof v === 'string' ? (registerNameEN = v.trim()) : '')
           "
           :rules="[
-            (val: string) =>
-              val === '' ||
-              /^[0-9A-Za-z\s.,]+$/.test(val) ||
-              $t('form.error.letterOnly'),
+            (val) => !!val || $t('form.error.required'),
+            (val) =>
+              /^[A-Za-z0-9\s&.,'-]+$/.test(val) ||
+              $t('form.error.branchNameENField'),
           ]"
         />
       </div>
 
       <div class="col-12 row q-col-gutter-sm">
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-12 col-md-5"
-          :label="$t('customer.form.employerName')"
-          for="input-legal-person-no"
-          :model-value="customerName"
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (customerName = v.trim()) : '')
-          "
-        />
-
         <q-input
           dense
           outlined
@@ -345,6 +336,7 @@ watch(
             (v) => (typeof v === 'string' ? (prefixName = v) : '')
           "
           @clear="prefixName = ''"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
         >
           <template v-slot:no-option>
             <q-item>
@@ -393,11 +385,11 @@ watch(
           :readonly="readonly"
           :disable="!readonly"
           class="col-md-2 col-6"
-          label="Title"
+          label="Prefix"
           :model-value="
             readonly
-              ? capitalize(prefixName || '') || '-'
-              : capitalize(prefixName || '')
+              ? prefixName.toUpperCase() || '-'
+              : prefixName.toUpperCase() || ''
           "
           @update:model-value="
             (v) => (typeof v === 'string' ? (prefixName = v) : '')
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
index d31d3889..dbb57c80 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
@@ -2,6 +2,7 @@
 import useOptionStore from 'stores/options';
 import SelectBranch from 'src/components/shared/select/SelectBranch.vue';
 import { isRoleInclude } from 'src/stores/utils';
+import SelectBusinessType from 'src/components/shared/select/SelectBusinessType.vue';
 
 withDefaults(
   defineProps<{
@@ -102,7 +103,13 @@ const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
           class="col-md-6"
           :readonly
           :disabled="
-            !isRoleInclude(['admin', 'system', 'head_of_admin']) && !readonly
+            !isRoleInclude([
+              'admin',
+              'system',
+              'head_of_admin',
+              'executive',
+              'accountant',
+            ]) && !readonly
           "
           :label="$t('customer.form.registeredBranch')"
           select-first-value
@@ -136,15 +143,10 @@ const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
           for="input-tax"
           v-model="legalPersonNo"
         />
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
+        <SelectBusinessType
           class="col-6 col-md-3"
-          :label="$t('customer.table.businessTypePure')"
-          for="input-business-type"
-          :model-value="optionStore.mapOption(businessType)"
+          v-model:value="businessType"
+          :readonly
         />
       </div>
 
@@ -173,15 +175,10 @@ const telephoneNo = defineModel<string>('telephoneNo', { default: '' });
           :label="$t('personnel.form.citizenId')"
           for="input-citizen-id"
         />
-        <q-input
-          dense
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
+        <SelectBusinessType
           class="col-6 col-md-3"
-          :label="$t('customer.table.businessTypePure')"
-          for="input-first-name-en"
-          :model-value="optionStore.mapOption(businessType)"
+          v-model:value="businessType"
+          :readonly
         />
       </div>
 
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
index 1b70b651..14f7aa98 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBranch.vue
@@ -7,6 +7,8 @@ import { CustomerCreate } from 'stores/customer/types';
 import EmployerFormAbout from './EmployerFormAbout.vue';
 import EmployerFormAuthorized from './EmployerFormAuthorized.vue';
 import { waitAll } from 'src/stores/utils';
+import FormEmployeePassport from 'src/components/03_customer-management/FormEmployeePassport.vue';
+import FormEmployeeVisa from 'src/components/03_customer-management/FormEmployeeVisa.vue';
 import {
   FormCitizen,
   CorpFormBusinessRegistration,
@@ -51,6 +53,7 @@ withDefaults(
     actionDisabled?: boolean;
     customerType?: 'CORP' | 'PERS';
     hideAction?: boolean;
+    hideDelete?: boolean;
   }>(),
   {
     hideAction: false,
@@ -81,7 +84,7 @@ withDefaults(
       />
       <DeleteButton
         icon-only
-        v-if="readonly"
+        v-if="readonly && !hideDelete"
         @click="$emit('delete')"
         type="button"
         :disabled="actionDisabled"
@@ -141,7 +144,6 @@ withDefaults(
             v-model:last-name-en="item.lastNameEN"
             v-model:gender="item.gender"
             v-model:birth-date="item.birthDate"
-            v-model:customer-name="item.customerName"
             v-model:legal-person-no="item.legalPersonNo"
             v-model:branch-code="item.code"
             v-model:register-name="item.registerName"
@@ -158,7 +160,7 @@ withDefaults(
             outlined
             :prefix-id="prefixId || 'employer'"
             :readonly="readonly"
-            v-model:bussiness-type="item.businessType"
+            v-model:business-type-id="item.businessTypeId"
             v-model:job-position="item.jobPosition"
             v-model:job-description="item.jobDescription"
             v-model:pay-date="item.payDate"
@@ -220,7 +222,6 @@ withDefaults(
             hide-action
             :ocr="
               async (group, file) => {
-                console.log(group);
                 if (group !== 'attachment') {
                   const res = await ocrStore.sendOcr({
                     file: file,
@@ -245,12 +246,20 @@ withDefaults(
             :auto-save="item.id !== ''"
             :download="
               (obj) => {
-                customerStore.getFile({
-                  parentId: item.id || '',
-                  group: obj.group,
-                  fileId: obj._meta.id,
-                  download: true,
-                });
+                if (obj.group === 'citizen') {
+                  customerStore.getFile({
+                    parentId: item.id || '',
+                    group: obj.group,
+                    fileId: obj._meta.id,
+                    download: true,
+                  });
+                } else {
+                  customerStore.getAttachment({
+                    parentId: item.id || '',
+                    name: obj._meta.id,
+                    download: true,
+                  });
+                }
               }
             "
             :delete-item="
@@ -279,7 +288,7 @@ withDefaults(
                 _meta: any,
                 file: File | undefined,
               ) => {
-                if (group !== 'attachment') {
+                if (group === 'citizen') {
                   if (file !== undefined && item.id) {
                     const res = await customerStore.postMeta({
                       parentId: item.id || '',
@@ -347,7 +356,6 @@ withDefaults(
                     });
 
                     const tempValue = resMeta.map(async (v: any) => {
-                      console.log(v.expireDate);
                       return {
                         _meta: { ...v },
                         name: `${group}-${dateFormat(v.expireDate)}`,
@@ -368,7 +376,6 @@ withDefaults(
                     });
 
                     const tempValue = (res as string[]).map(async (i: any) => {
-                      console.log(i);
                       return {
                         _meta: { id: i, name: i },
                         name: i || '',
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
index 5f3ab63f..26b0d659 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
@@ -8,12 +8,28 @@ import { onMounted, watch } from 'vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ThaiBahtText from 'thai-baht-text';
+import SelectBusinessType from 'src/components/shared/select/SelectBusinessType.vue';
+
+import BusinessTypeDialog from 'src/pages/16_business-type-management/BusinessTypeDialog.vue';
+
+import useBusinessTypeStore from 'src/stores/business-type';
 
 const { locale } = useI18n({ useScope: 'global' });
 
 const rawOption = ref();
 
-const bussinessType = defineModel<string>('bussinessType');
+const businessTypeDialog = ref<boolean>(false);
+const formDataBusinessType = ref<{
+  name: string;
+  nameEN: string;
+}>({
+  name: '',
+  nameEN: '',
+});
+
+const useBusinessType = useBusinessTypeStore();
+
+const businessTypeId = defineModel<string>('businessTypeId');
 const jobPosition = defineModel<string>('jobPosition');
 const jobDescription = defineModel<string>('jobDescription');
 const payDate = defineModel<string>('payDate');
@@ -28,6 +44,8 @@ const typeBusinessENOption = ref([]);
 const jobPositionOption = ref([]);
 const jobPositionENOption = ref([]);
 
+const keySelect = ref<number>(0);
+
 defineProps<{
   title?: string;
   dense?: boolean;
@@ -37,35 +55,33 @@ defineProps<{
   showTitle?: boolean;
 }>();
 
+function resetFormBusinessType() {
+  businessTypeDialog.value = false;
+  formDataBusinessType.value = { name: '', nameEN: '' };
+}
+
+async function submitBusinessType() {
+  const res = await useBusinessType.create(formDataBusinessType.value);
+  if (res) {
+    businessTypeId.value = res.id;
+    resetFormBusinessType();
+    keySelect.value++;
+  }
+}
+
 onMounted(async () => {
   const resultOption = await fetch('/option/option.json');
   rawOption.value = await resultOption.json();
-  typeBusinessENOption.value = rawOption.value.eng.businessType;
   jobPositionENOption.value = rawOption.value.eng.position;
 
   if (locale.value === 'eng') {
-    typeBusinessOption.value = rawOption.value.eng.businessType;
     jobPositionOption.value = rawOption.value.eng.position;
   }
   if (locale.value === 'tha') {
-    typeBusinessOption.value = rawOption.value.tha.businessType;
     jobPositionOption.value = rawOption.value.tha.position;
   }
 });
 
-watch([typeBusinessOption, typeBusinessENOption], () => {
-  typeBusinessFilter = selectFilterOptionRefMod(
-    typeBusinessOption,
-    typeBusinessOptions,
-    'label',
-  );
-  typeBusinessENFilter = selectFilterOptionRefMod(
-    typeBusinessENOption,
-    typeBusinessENOptions,
-    'label',
-  );
-});
-
 watch(
   () => rate.value,
   (newValue) => {
@@ -135,69 +151,26 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       <span>{{ $t('customerBranch.tab.business') }}</span>
     </div>
 
-    <q-select
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      :hide-dropdown-icon="readonly"
-      input-debounce="0"
-      option-value="value"
-      option-label="label"
-      v-model="bussinessType"
+    <SelectBusinessType
+      :key="keySelect"
       class="col-md-6 col-12"
-      :dense="dense"
-      :readonly="readonly"
-      :label="$t('customer.form.businessType')"
-      :options="typeBusinessOptions"
-      :for="`${prefixId}-select-business-type`"
-      @filter="typeBusinessFilter"
+      v-model:value="businessTypeId"
+      :readonly
+      creatable
+      lang="tha"
       :rules="[(val: string) => !!val || $t('form.error.required')]"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('general.noData') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
-    <q-select
-      :for="`${prefixId}-input-bussiness-type-en`"
-      :id="`${prefixId}-input-bussiness-type-en`"
-      :label="`${$t('customer.form.businessType')} (EN)`"
-      outlined
-      clearable
-      use-input
-      fill-input
-      emit-value
-      map-options
-      hide-selected
-      hide-bottom-space
-      :hide-dropdown-icon="readonly"
-      input-debounce="0"
-      option-value="value"
-      option-label="label"
-      v-model="bussinessType"
+      @create="() => (businessTypeDialog = true)"
+    />
+    <SelectBusinessType
+      :key="keySelect"
       class="col-md-6 col-12"
-      :dense="dense"
-      :readonly="readonly"
-      :options="typeBusinessENOptions"
-      @filter="typeBusinessENFilter"
+      v-model:value="businessTypeId"
+      :readonly
+      creatable
+      lang="eng"
       :rules="[(val: string) => !!val || $t('form.error.required')]"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey">
-            {{ $t('general.noData') }}
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-select>
+      @create="() => (businessTypeDialog = true)"
+    />
 
     <q-select
       outlined
@@ -348,4 +321,12 @@ let jobPositionENFilter = selectFilterOptionRefMod(
       "
     />
   </div>
+
+  <BusinessTypeDialog
+    ref="refBusinessTypeDialog"
+    @close="resetFormBusinessType()"
+    @submit="submitBusinessType()"
+    v-model="businessTypeDialog"
+    v-model:data="formDataBusinessType"
+  />
 </template>
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormContact.vue b/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
index 4a58439c..7f56742c 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormContact.vue
@@ -9,8 +9,6 @@ const contactName = defineModel<string>('contactName');
 const email = defineModel<string>('email');
 const contactTel = defineModel<string>('contactTel');
 const officeTel = defineModel<string>('officeTel');
-const agent = defineModel<string>('agent');
-
 const agentUserId = defineModel<string>('agentUserId');
 </script>
 
@@ -109,7 +107,6 @@ const agentUserId = defineModel<string>('agentUserId');
         />
       </template>
     </q-input>
-
     <SelectAgent
       :label="$t('customer.form.agent')"
       v-model:value="agentUserId"
diff --git a/src/pages/03_customer-management/constant.ts b/src/pages/03_customer-management/constant.ts
index 8d633b64..78e63bdc 100644
--- a/src/pages/03_customer-management/constant.ts
+++ b/src/pages/03_customer-management/constant.ts
@@ -69,19 +69,19 @@ export const uploadFileListCustomer: {
 }[] = [
   {
     label: 'customer.typeFile.citizenId',
-    value: 'citizen',
     group: 'citizen',
+    value: 'citizen',
   },
   {
     label: 'customer.typeFile.registrationBook',
-    value: 'attachment',
     group: 'houseRegistration',
+    value: 'attachment',
   },
 
   {
     label: 'customer.typeFile.houseMap',
-    value: 'attachment',
     group: 'vatRegistration',
+    value: 'attachment',
   },
 
   {
@@ -92,7 +92,7 @@ export const uploadFileListCustomer: {
 
   {
     label: 'customer.typeFile.dbdCertificate',
-    group: 'powerOfAttorney',
+    group: 'dbdCertificate',
     value: 'attachment',
   },
 
@@ -144,43 +144,43 @@ export const uploadFileListEmployee: {
   },
   {
     label: 'customerEmployee.fileType.tm6',
-    value: 'attachment',
     group: 'tm6',
+    value: 'attachment',
   },
   {
     label: 'customerEmployee.fileType.workPermit',
-    value: 'attachment',
     group: 'workPermit',
+    value: 'attachment',
   },
   {
     label: 'customerEmployee.fileType.noticeJobEmployment',
-    value: 'attachment',
     group: 'noticeJobEmployment',
+    value: 'attachment',
   },
   {
     label: 'customerEmployee.fileType.noticeJobEntry',
-    value: 'attachment',
     group: 'noticeJobEntry',
+    value: 'attachment',
   },
   {
     label: 'customerEmployee.fileType.historyJob',
-    value: 'attachment',
     group: 'historyJob',
+    value: 'attachment',
   },
   {
     label: 'customerEmployee.fileType.acceptJob',
-    value: 'attachment',
     group: 'acceptJob',
+    value: 'attachment',
   },
   {
     label: 'customerEmployee.fileType.receipt',
-    value: 'attachment',
     group: 'receipt',
+    value: 'attachment',
   },
   {
     label: 'customerEmployee.fileType.other',
-    value: 'attachment',
     group: 'other',
+    value: 'attachment',
   },
 ];
 
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 2d529a5c..cb7c3718 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -22,6 +22,10 @@ import { useRoute } from 'vue-router';
 
 export const useCustomerForm = defineStore('form-customer', () => {
   const customerStore = useCustomerStore();
+  const onCreateImageList = ref<{
+    selectedImage: string;
+    list: { url: string; imgFile: File | null; name: string }[];
+  }>({ selectedImage: '', list: [] });
 
   const { t } = useI18n();
   const flowStore = useFlowStore();
@@ -30,11 +34,13 @@ export const useCustomerForm = defineStore('form-customer', () => {
 
   const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
 
+  const currentBranchRootId = ref<string>('');
+
   const tabFieldRequired = ref<{
     [key: string]: (keyof CustomerBranchCreate)[];
   }>({
     main: [],
-    business: ['businessType', 'jobPosition'],
+    business: ['businessTypeId', 'jobPosition'],
     address: [
       'address',
       'addressEN',
@@ -82,6 +88,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     formDataOcr: Record<string, any>;
     isImageEdit: boolean;
     currentCustomerId?: string;
+    imageList: { list: string[]; selectedImage: string };
   }>({
     dialogType: 'info',
     dialogOpen: false,
@@ -98,6 +105,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     treeFile: [],
     formDataOcr: {},
     isImageEdit: false,
+    imageList: { list: [], selectedImage: '' },
   });
 
   watch(
@@ -160,6 +168,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
     state.value.editCustomerCode = data.code;
     state.value.customerImageUrl = `${baseUrl}/customer/${id}/image/${data.selectedImage}`;
     state.value.defaultCustomerImageUrl = `${baseUrl}/customer/${id}/image/${data.selectedImage}`;
+    currentBranchRootId.value = data.branch[0].id || '';
 
     resetFormData.registeredBranchId = data.registeredBranchId;
     resetFormData.status = data.status;
@@ -181,7 +190,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
         payDate: v.payDate,
         jobDescription: v.jobDescription,
         jobPosition: v.jobPosition,
-        businessType: v.businessType,
+        businessTypeId: v.businessTypeId,
         employmentOffice: v.employmentOffice,
         employmentOfficeEN: v.employmentOfficeEN,
         telephoneNo: v.telephoneNo,
@@ -218,7 +227,6 @@ export const useCustomerForm = defineStore('form-customer', () => {
         contactTel: v.contactTel,
         officeTel: v.officeTel,
         agentUserId: v.agentUserId || undefined,
-        customerName: v.customerName,
         authorizedName: v.authorizedName,
         authorizedNameEN: v.authorizedNameEN,
 
@@ -256,7 +264,6 @@ export const useCustomerForm = defineStore('form-customer', () => {
   async function addCurrentCustomerBranch() {
     if (currentFormData.value.customerBranch?.some((v) => !v.id)) return;
     currentFormData.value.customerBranch?.push({
-      id: '',
       customerId: '',
       branchCode:
         currentFormData.value.customerBranch.length !== 0
@@ -290,8 +297,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
       birthDate:
         currentFormData.value.customerBranch?.at(0)?.birthDate || undefined,
 
-      businessType:
-        currentFormData.value.customerBranch?.at(0)?.businessType || '',
+      businessTypeId:
+        currentFormData.value.customerBranch?.at(0)?.businessTypeId || '',
       jobPosition:
         currentFormData.value.customerBranch?.at(0)?.jobPosition || '',
       jobDescription:
@@ -328,8 +335,6 @@ export const useCustomerForm = defineStore('form-customer', () => {
         currentFormData.value.customerBranch?.at(0)?.agentUserId || undefined,
       status: 'CREATED',
 
-      customerName:
-        currentFormData.value.customerBranch?.at(0)?.customerName || '',
       registerName:
         currentFormData.value.customerBranch?.at(0)?.registerName || '',
       registerNameEN:
@@ -498,11 +503,14 @@ export const useCustomerForm = defineStore('form-customer', () => {
   }
 
   return {
+    onCreateImageList,
     tabFieldRequired,
     registerAbleBranchOption,
     state,
     resetFormData,
     currentFormData,
+    currentBranchRootId,
+
     isFormDataDifferent,
     resetForm,
     assignFormData,
@@ -541,7 +549,7 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
     gender: '',
     birthDate: undefined,
 
-    businessType: '',
+    businessTypeId: '',
     jobPosition: '',
     jobDescription: '',
     payDate: '',
@@ -571,7 +579,6 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
     agentUserId: undefined,
     status: 'CREATED',
 
-    customerName: '',
     registerName: '',
     registerNameEN: '',
     registerDate: undefined,
@@ -623,7 +630,7 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
       payDateEN: _data.payDateEN,
       jobDescription: _data.jobDescription,
       jobPosition: _data.jobPosition,
-      businessType: _data.businessType,
+      businessTypeId: _data.businessTypeId,
       employmentOffice: _data.employmentOffice,
       employmentOfficeEN: _data.employmentOfficeEN,
       telephoneNo: _data.telephoneNo,
@@ -657,7 +664,6 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
       officeTel: _data.officeTel,
       agentUserId: _data.agentUserId || undefined,
       codeCustomer: _data.codeCustomer,
-      customerName: _data.customerName,
       homeCode: _data.homeCode,
       authorizedName: _data.authorizedName,
       authorizedNameEN: _data.authorizedNameEN,
@@ -784,6 +790,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         }
       | undefined;
     ocr: boolean;
+    imageList: { list: string[]; selectedImage: string };
   }>({
     currentBranchId: '',
     isImageEdit: false,
@@ -808,9 +815,10 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     infoEmployeePersonCard: [],
     formDataEmployeeOwner: undefined,
     ocr: false,
+    imageList: { list: [], selectedImage: '' },
   });
 
-  const defaultFormData: EmployeeCreate = {
+  const defaultFormData: EmployeeCreate & { image?: File } = {
     id: '',
     code: '',
     customerBranchId: '',
@@ -892,6 +900,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         expireDate: new Date(),
         remark: undefined,
         workerType: '',
+        reportDate: null,
         number: '',
       },
     ],
@@ -937,7 +946,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
   };
 
   let resetEmployeeData = structuredClone(defaultFormData);
-  const currentFromDataEmployee = ref<EmployeeCreate>(
+  const currentFromDataEmployee = ref<EmployeeCreate & { image?: File }>(
     structuredClone(defaultFormData),
   );
 
@@ -959,12 +968,14 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     state.value.currentIndexVisa = -1;
     state.value.currentIndexCheckup = -1;
     state.value.currentIndexWorkHistory = -1;
-    state.value.currentTab = 'personalInfo';
+    state.value.imageList = { list: [], selectedImage: '' };
+    // state.value.currentTab = 'personalInfo';
     if (clean) {
       state.value.formDataEmployeeOwner = undefined;
       resetEmployeeData = structuredClone(defaultFormData);
       state.value.statusSavePersonal = false;
       state.value.profileUrl = '';
+      state.value.currentBranchId = '';
     } else {
       resetEmployeeData.selectedImage =
         currentFromDataEmployee.value.selectedImage;
@@ -985,12 +996,16 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         state.value.currentIndexPassport
       ].id === undefined
     ) {
+      const { id, employeeId, updatedAt, createdAt, file, ...payload } =
+        currentFromDataEmployee.value.employeePassport?.[
+          state.value.currentIndexPassport
+        ];
+
       const res = await employeeStore.postMeta({
         parentId: currentFromDataEmployee.value.id || '',
         group: 'passport',
-        meta: currentFromDataEmployee.value.employeePassport?.[
-          state.value.currentIndexPassport
-        ],
+        meta: payload,
+        file: file,
       });
 
       if (res) {
@@ -1004,7 +1019,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         state.value.currentIndexPassport
       ].id !== undefined
     ) {
-      const { id, employeeId, updatedAt, createdAt, ...payload } =
+      const { id, employeeId, updatedAt, createdAt, file, ...payload } =
         currentFromDataEmployee.value.employeePassport?.[
           state.value.currentIndexPassport
         ];
@@ -1017,6 +1032,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
             state.value.currentIndexPassport
           ].id || '',
         meta: payload,
+        file: file || undefined,
       });
     }
 
@@ -1244,7 +1260,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     await assignFormDataEmployee(currentFromDataEmployee.value.id);
   }
 
-  async function submitPersonal(imgList: {
+  async function submitPersonal(imgList?: {
     selectedImage: string;
     list: { url: string; imgFile: File | null; name: string }[];
   }) {
@@ -1265,6 +1281,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       currentFromDataEmployee.value.lastNameEN.trim();
 
     if (state.value.dialogType === 'create') {
+      delete currentFromDataEmployee.value.image;
       const res = await employeeStore.create(
         {
           ...currentFromDataEmployee.value,
@@ -1293,7 +1310,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
             state.value.currentEmployee?.status === 'CREATED'
               ? 'ACTIVE'
               : state.value.currentEmployee?.status,
-          customerBranchId: state.value.formDataEmployeeOwner?.id || '',
+          customerBranchId: state.value.currentBranchId || '',
           employeeWork: [],
           employeeCheckup: [],
           employeeOtherInfo: undefined,
@@ -1381,12 +1398,10 @@ export const useEmployeeForm = defineStore('form-employee', () => {
                 statusSave: true,
               })),
         ),
-        employeeOtherInfo: structuredClone(
-          {
-            ...payload.employeeOtherInfo,
-            statusSave: !!payload.employeeOtherInfo?.id ? true : false,
-          } || {},
-        ),
+        employeeOtherInfo: structuredClone({
+          ...(payload.employeeOtherInfo ?? {}),
+          statusSave: true,
+        }),
         employeeWork: structuredClone(
           payload.employeeWork?.length === 0
             ? state.value.dialogModal
@@ -1535,6 +1550,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       expireDate: new Date(),
       remark: undefined,
       workerType: '',
+      reportDate: null,
       number: '',
     });
 
@@ -1659,6 +1675,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     state,
     currentFromDataEmployee,
     resetEmployeeData,
+
     addPassport,
     addVisa,
     addCheckup,
diff --git a/src/pages/04_flow-managment/FlowDialog.vue b/src/pages/04_flow-managment/FlowDialog.vue
index 77d8bd12..42c429ba 100644
--- a/src/pages/04_flow-managment/FlowDialog.vue
+++ b/src/pages/04_flow-managment/FlowDialog.vue
@@ -43,6 +43,7 @@ withDefaults(
   defineProps<{
     readonly?: boolean;
     isEdit?: boolean;
+    hideAction?: boolean;
   }>(),
   { readonly: false, isEdit: false },
 );
@@ -60,6 +61,7 @@ async function addStep() {
   flowData.value.step.push({
     responsibleInstitution: [],
     responsiblePersonId: [],
+    responsibleGroup: [],
     value: [],
     detail: '',
     name: '',
@@ -166,6 +168,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
         id="flow-form-dialog"
       >
         <FormFlow
+          v-model:user-in-table="userInTable"
           v-model:flow-data="flowData"
           v-model:register-branch-id="registerBranchId"
           @trigger-properties="triggerPropertiesDialog"
@@ -205,7 +208,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
             style="position: absolute; z-index: 999; top: 0; right: 0"
           >
             <div
-              v-if="flowData.status !== 'INACTIVE'"
+              v-if="flowData.status !== 'INACTIVE' && !hideAction"
               class="surface-1 row rounded"
             >
               <UndoButton
@@ -285,6 +288,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
               >
                 <template v-slot:btn-form-flow-step-drawer>
                   <q-btn
+                    v-if="!hideAction"
                     dense
                     flat
                     icon="mdi-plus"
@@ -313,6 +317,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) {
             <FormFlow
               :readonly
               onDrawer
+              :hide-action="hideAction"
               v-model:user-in-table="userInTable"
               v-model:flow-data="flowData"
               v-model:register-branch-id="registerBranchId"
diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 1285a99c..f2c169ea 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -11,7 +11,7 @@ import {
 } from 'src/stores/workflow-template/types';
 import { useWorkflowTemplate } from 'src/stores/workflow-template';
 import { useNavigator } from 'src/stores/navigator';
-import { dialog } from 'src/stores/utils';
+import { dialog, canAccess } from 'src/stores/utils';
 
 import FloatingActionButton from 'components/FloatingActionButton.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -103,6 +103,7 @@ const columns = [
 function triggerDialog(type: 'add' | 'edit' | 'view') {
   if (type === 'add') {
     registeredBranchId.value = '';
+    userInTable.value = [];
     formDataWorkflow.value = {
       status: 'CREATED',
       name: '',
@@ -207,7 +208,7 @@ async function submit() {
       ...formDataWorkflow.value,
     });
   } else {
-    await workflowStore.creatWorkflowTemplate({
+    await workflowStore.createWorkflowTemplate({
       registeredBranchId: registeredBranchId.value,
       ...formDataWorkflow.value,
     });
@@ -223,7 +224,11 @@ function assignFormData(workflowData: WorkflowTemplate) {
       status: workflowData.status,
       name: workflowData.name,
       step: workflowData.step.map((s, i) => {
-        userInTable.value[i] = { name: s.name, responsiblePerson: [] };
+        userInTable.value[i] = {
+          name: s.name,
+          responsiblePerson: [],
+          responsibleGroup: [],
+        };
         s.responsiblePerson.forEach((p) => {
           userInTable.value[i].responsiblePerson.push({
             id: p.user.id,
@@ -237,12 +242,16 @@ function assignFormData(workflowData: WorkflowTemplate) {
             code: p.user.code,
           });
         });
+        s.responsibleGroup.forEach((g) => {
+          userInTable.value[i].responsibleGroup.push(g);
+        });
         return {
           id: s.id,
           name: s.name,
           detail: s.detail,
           messengerByArea: s.messengerByArea || false,
           value: s.value.length > 0 ? JSON.parse(JSON.stringify(s.value)) : [],
+          responsibleGroup: s.responsibleGroup.map((g) => g),
           responsiblePersonId: s.responsiblePerson.map((p) => p.userId),
           responsibleInstitution: JSON.parse(
             JSON.stringify(s.responsibleInstitution),
@@ -325,6 +334,7 @@ watch(
 </script>
 <template>
   <FloatingActionButton
+    v-if="canAccess('workflow', 'edit')"
     style="z-index: 999"
     hide-icon
     @click="triggerDialog('add')"
@@ -673,6 +683,7 @@ watch(
                       "
                     />
                     <KebabAction
+                      v-if="canAccess('workflow', 'edit')"
                       :id-name="props.row.name"
                       :status="props.row.status"
                       @view="
@@ -754,7 +765,8 @@ watch(
                         "
                       />
                       <KebabAction
-                        :id-name="props.row.id"
+                        v-if="canAccess('workflow', 'edit')"
+                        :id-name="props.row.name"
                         :status="props.row.status"
                         @view="
                           () => {
@@ -837,6 +849,7 @@ watch(
     @drawer-undo="undo"
     @close="resetForm"
     @submit="submit"
+    :hide-action="!canAccess('workflow', 'edit')"
     :readonly="!pageState.isDrawerEdit"
     :isEdit="pageState.isDrawerEdit"
     v-model="pageState.addModal"
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 09d4f118..17cd4040 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -33,7 +33,6 @@ import {
   SaveButton,
   UndoButton,
   ToggleButton,
-  PasteButton,
   ImportButton,
 } from 'components/button';
 import TableProduct from 'src/components/04_product-service/TableProduct.vue';
@@ -42,7 +41,7 @@ import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 import useFlowStore from 'stores/flow';
 
 import { dateFormat } from 'src/utils/datetime';
-import { formatNumberDecimal, isRoleInclude, notify } from 'stores/utils';
+import { formatNumberDecimal, isRoleInclude, canAccess } from 'stores/utils';
 const { getWorkflowTemplate } = useWorkflowTemplate();
 
 import { Status } from 'stores/types';
@@ -61,6 +60,7 @@ import {
   ServiceById,
   WorkItems,
   Attributes,
+  WorkCreate,
 } from 'stores/product-service/types';
 import { computed } from 'vue';
 import {
@@ -102,12 +102,10 @@ const {
   deleteWork,
 
   importProduct,
+
+  productExport,
 } = productServiceStore;
 
-const currentCopy = ref<{
-  id: string | undefined;
-  type: 'service' | 'product';
-}>();
 const { workNameItems } = storeToRefs(productServiceStore);
 const allStat = ref<{ mode: string; count: number }[]>([]);
 
@@ -147,27 +145,25 @@ const { t } = useI18n();
 const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 
 const priceDisplay = computed(() => ({
-  price: !isRoleInclude(['sale_agent']),
+  // price: !isRoleInclude(['sale_agent']),
+  price: true,
   agentPrice: isRoleInclude([
-    'admin',
-    'head_of_admin',
-    'head_of_sale',
     'system',
-    'owner',
+    'head_of_admin',
+    'admin',
+    'executive',
     'accountant',
-    'sale_agent',
+    'head_of_sale',
   ]),
   serviceCharge: isRoleInclude([
-    'admin',
-    'head_of_admin',
     'system',
-    'owner',
+    'head_of_admin',
+    'admin',
+    'executive',
     'accountant',
   ]),
 }));
-const actionDisplay = computed(() =>
-  isRoleInclude(['admin', 'head_of_admin', 'system', 'owner', 'accountant']),
-);
+const actionDisplay = computed(() => canAccess('product', 'edit'));
 const splitterModel = computed(() =>
   $q.screen.lt.md ? (productMode.value !== 'group' ? 0 : 100) : 25,
 );
@@ -1175,6 +1171,7 @@ function clearFormService() {
   profileSubmit.value = false;
   imageProduct.value = undefined;
   profileFileImg.value = null;
+  serviceTab.value = 1;
 }
 
 function sameFormService() {
@@ -1401,6 +1398,7 @@ function submitAddWorkProduct() {
           if (!s.hasOwnProperty('productsId')) {
             s.productsId = [];
           }
+          if (s.productsId.length === 0) return;
           s.productsId.push(i.id);
         },
       );
@@ -1453,17 +1451,11 @@ function confirmDeleteWork(id: string, noDialog?: boolean) {
   }
 }
 
-function triggerConfirmCloseWork() {
+function triggerConfirmCloseWorkName() {
   dialogWarningClose(t, {
     message: t('dialog.message.warningClose'),
     action: () => {
       manageWorkNameDialog.value = false;
-      if (workNameItems.value[workNameItems.value.length - 1].name === '') {
-        confirmDeleteWork(
-          workNameItems.value[workNameItems.value.length - 1].id,
-          true,
-        );
-      }
     },
     cancel: () => {},
   });
@@ -1848,65 +1840,82 @@ function handleSubmitSameWorkflow() {
   );
 }
 
-async function paste() {
-  if (
-    !!currentCopy.value &&
-    currentCopy.value.type === 'service' &&
-    !!currentCopy.value.id
-  )
-    dialogWarningClose(t, {
-      message: t('dialog.message.warningPaste'),
-      action: async () => {
-        const res = await fetchListServiceById(currentCopy.value.id);
-        if (res) {
-          formService.value = {
-            code: res.code,
-            name: res.name,
-            detail: res.detail,
-            attributes: res.attributes,
-            work: res.work.map((v) => ({
-              id: v.id,
-              name: v.name,
-              attributes: v.attributes,
-              product: v.productOnWork.map((productOnWorkItem) => ({
-                id: productOnWorkItem.product.id,
-                installmentNo: productOnWorkItem.installmentNo,
-                stepCount: productOnWorkItem.stepCount,
-              })),
-            })),
-            status: res.status,
-            productGroupId: res.productGroupId,
-            selectedImage: res.selectedImage,
-            installments: res.installments,
-          };
+async function copy(id: string) {
+  {
+    const res = await fetchListServiceById(id);
+    if (res) {
+      formService.value = {
+        code: res.code.slice(0, -3),
+        name: res.name,
+        detail: res.detail,
+        attributes: res.attributes,
+        work: res.work.map((v) => ({
+          id: v.id,
+          name: v.name,
+          attributes: v.attributes,
+          product: v.productOnWork.map((productOnWorkItem) => ({
+            id: productOnWorkItem.product.id,
+            installmentNo: productOnWorkItem.installmentNo,
+            stepCount: productOnWorkItem.stepCount,
+          })),
+        })),
+        status: res.status,
+        productGroupId: res.productGroupId,
+        selectedImage: res.selectedImage,
+        installments: res.installments,
+      };
 
-          workItems.value = res.work.map((item) => {
+      workItems.value = res.work.map((item) => {
+        return {
+          id: item.id,
+          name: item.name,
+          attributes: item.attributes,
+          product: item.productOnWork.map((productOnWorkItem) => {
             return {
-              id: item.id,
-              name: item.name,
-              attributes: item.attributes,
-              product: item.productOnWork.map((productOnWorkItem) => {
-                return {
-                  ...productOnWorkItem.product,
-                  nameEn: productOnWorkItem.product.name,
-                  installmentNo: productOnWorkItem.installmentNo,
-                };
-              }),
+              ...productOnWorkItem.product,
+              nameEn: productOnWorkItem.product.name,
+              installmentNo: productOnWorkItem.installmentNo,
             };
-          });
-        }
-      },
-    });
-  else {
-    dialog({
-      color: 'warning',
-      icon: 'mdi-alert',
-      title: t('form.warning.title'),
-      actionText: t('dialog.action.ok'),
-      message: t('dialog.message.warningCopyEmpty'),
-      action: async () => {},
-    });
+          }),
+        };
+      });
+    }
   }
+
+  dialogService.value = true;
+}
+
+function addWorkName(data: { name: string; order: number }) {
+  workNameItems.value.push({ id: '', name: data.name, isEdit: true });
+}
+
+async function submitWorkName(
+  workId: string,
+  data: Partial<WorkCreate & { status: string }>,
+) {
+  if (workNameItems.value.length === 0) return;
+
+  if (!workId) await createWork({ ...data, order: 1 });
+  else await editWork(workId, data);
+}
+
+async function triggerExport() {
+  productExport({
+    pageSize: 100_000,
+    productGroupId: currentIdGroup.value,
+    query: !!inputSearchProductAndService.value
+      ? inputSearchProductAndService.value
+      : undefined,
+    status:
+      currentStatus.value === 'INACTIVE'
+        ? 'INACTIVE'
+        : currentStatus.value === 'ACTIVE'
+          ? 'ACTIVE'
+          : undefined,
+
+    startDate: searchDate.value[0] ? new Date(searchDate.value[0]) : undefined,
+    endDate: searchDate.value[1] ? new Date(searchDate.value[1]) : undefined,
+  });
 }
 
 watch(
@@ -2242,7 +2251,6 @@ watch(
                     </AdvanceSearch>
                   </template>
                 </q-input>
-
                 <div class="row col-md-6" style="white-space: nowrap">
                   <q-select
                     v-show="$q.screen.gt.sm"
@@ -2477,7 +2485,10 @@ watch(
                             )
                           "
                         >
-                          {{ props.row.detail || '-' }}
+                          {{
+                            props.row.detail.replace(/<\/?[^>]+(>|$)/g, '') ||
+                            '-'
+                          }}
                         </q-td>
 
                         <q-td
@@ -2527,6 +2538,7 @@ watch(
                           />
 
                           <KebabAction
+                            v-if="actionDisplay"
                             :disable-delete="props.row.status !== 'CREATED'"
                             :status="props.row.status"
                             :id-name="props.row.name"
@@ -2669,7 +2681,15 @@ watch(
                         {{ $t('general.recordPerPage') }}
                       </div>
                       <div>
-                        <PaginationPageSize v-model="pageSizeGroup" />
+                        <PaginationPageSize
+                          v-model="pageSizeGroup"
+                          :fetch-data="
+                            async () => {
+                              await fetchListGroups();
+                              flowStore.rotate();
+                            }
+                          "
+                        />
                       </div>
                     </div>
                   </div>
@@ -2781,6 +2801,13 @@ watch(
                       }
                     "
                   />
+
+                  <SaveButton
+                    icon-only
+                    :icon="'material-symbols:download'"
+                    color="var(--info-bg)"
+                    @click.stop="triggerExport()"
+                  />
                 </div>
 
                 <div class="row col-md-6" style="white-space: nowrap">
@@ -3273,16 +3300,13 @@ watch(
                               "
                             />
                             <KebabAction
+                              v-if="actionDisplay"
                               :use-copy="productAndServiceTab === 'service'"
                               :status="props.row.status"
                               :id-name="props.row.name"
                               @copy="
                                 () => {
-                                  notify('create', $t('dialog.message.copy'));
-                                  currentCopy = {
-                                    id: props.row.id,
-                                    type: productAndServiceTab,
-                                  };
+                                  copy(props.row.id);
                                 }
                               "
                               @view="
@@ -3431,7 +3455,15 @@ watch(
                       {{ $t('general.recordPerPage') }}
                     </div>
                     <div>
-                      <PaginationPageSize v-model="pageSizeServiceAndProduct" />
+                      <PaginationPageSize
+                        v-model="pageSizeServiceAndProduct"
+                        :fetch-data="
+                          async () => {
+                            await alternativeFetch();
+                            flowStore.rotate();
+                          }
+                        "
+                      />
                     </div>
                   </div>
                 </div>
@@ -3563,7 +3595,7 @@ watch(
       </div>
       <div
         class="col-12 col-md-10"
-        id="customer-form-content"
+        id="group-create"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
           'q-py-md q-px-lg': !$q.screen.gt.sm,
@@ -4082,7 +4114,7 @@ watch(
         </div>
         <div
           class="col-12 col-md-10"
-          id="customer-form-content"
+          id="product-create"
           :class="{
             'q-py-md q-pr-md ': $q.screen.gt.sm,
             'q-pa-sm': !$q.screen.gt.sm,
@@ -4308,7 +4340,7 @@ watch(
             'q-py-md q-pr-md ': $q.screen.gt.sm,
             'q-pa-sm': !$q.screen.gt.sm,
           }"
-          id="customer-form-content"
+          id="product-info"
           style="height: 100%; max-height: 100%; overflow-y: auto"
         >
           <BasicInfoProduct
@@ -4353,6 +4385,7 @@ watch(
 
   <!-- add service -->
   <DialogForm
+    v-if="dialogService"
     hide-footer
     no-address
     no-app-box
@@ -4489,6 +4522,11 @@ watch(
                 sub: true,
               }))
             "
+            :active="{
+              background: 'hsla(var(--blue-6-hsl) / .2)',
+              foreground: 'var(--blue-6)',
+            }"
+            scroll-element="#service-create"
           />
         </div>
         <span
@@ -4511,7 +4549,7 @@ watch(
       </div>
       <div
         class="col-12 col-md-10"
-        id="customer-form-content"
+        id="service-create"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
           'q-pa-sm': !$q.screen.gt.sm,
@@ -4578,11 +4616,7 @@ watch(
               @click="serviceTreeView = false"
             />
           </div>
-          <PasteButton
-            id="btn-info-basic-paste"
-            icon-only
-            @click="() => paste()"
-          />
+
           <SaveButton id="btn-info-basic-save" icon-only type="submit" />
         </div>
 
@@ -4696,7 +4730,7 @@ watch(
             ? workNameRef.isWorkNameEdit()
             : false;
         if (isWorkNameEdit) {
-          triggerConfirmCloseWork();
+          triggerConfirmCloseWorkName();
           return true;
         }
         return false;
@@ -4708,15 +4742,16 @@ watch(
         ref="workNameRef"
         v-model:name-list="workNameItems"
         @delete="confirmDeleteWork"
-        @edit="editWork"
-        @add="createWork"
+        @edit="submitWorkName"
+        @add="addWorkName"
       />
     </div>
   </DialogForm>
 
-  <!-- edit service -->
+  <!-- edit service edit package-->
   <!-- :edit="!(formDataProductService.status === 'INACTIVE')" -->
   <DialogForm
+    v-if="dialogServiceEdit"
     hide-footer
     no-address
     height="95vh"
@@ -4969,6 +5004,7 @@ watch(
               background: 'hsla(var(--blue-6-hsl) / .2)',
               foreground: 'var(--blue-6)',
             }"
+            scroll-element="#service-info"
           />
         </div>
         <span
@@ -4991,7 +5027,7 @@ watch(
       </div>
       <div
         class="col-12 col-md-10"
-        id="customer-form-content"
+        id="service-info"
         :class="{
           'q-py-md q-pr-md ': $q.screen.gt.sm,
           'q-pa-sm': !$q.screen.gt.sm,
diff --git a/src/pages/04_property-managment/MainPage.vue b/src/pages/04_property-managment/MainPage.vue
index 2ced8354..f22a8334 100644
--- a/src/pages/04_property-managment/MainPage.vue
+++ b/src/pages/04_property-managment/MainPage.vue
@@ -14,7 +14,7 @@ import { FloatingActionButton, PaginationComponent } from 'src/components';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
 import PropertyDialog from './PropertyDialog.vue';
 import { Property } from 'src/stores/property/types';
-import { dialog, toCamelCase } from 'src/stores/utils';
+import { dialog, toCamelCase, canAccess } from 'src/stores/utils';
 import CreateButton from 'src/components/AddButton.vue';
 import useOptionStore from 'stores/options';
 import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
@@ -331,6 +331,7 @@ watch(
 </script>
 <template>
   <FloatingActionButton
+    v-if="canAccess('workflow', 'edit')"
     style="z-index: 999"
     hide-icon
     @click="triggerDialog('add')"
@@ -536,11 +537,19 @@ watch(
           class="col surface-2 flex items-center justify-center"
         >
           <NoData
-            v-if="pageState.total !== 0 || pageState.searchDate.length > 0"
+            v-if="
+              pageState.total !== 0 ||
+              pageState.searchDate.length > 0 ||
+              !canAccess('workflow', 'edit')
+            "
             :not-found="!!pageState.inputSearch"
           />
           <CreateButton
-            v-if="pageState.total === 0 && pageState.searchDate.length === 0"
+            v-if="
+              pageState.total === 0 &&
+              pageState.searchDate.length === 0 &&
+              canAccess('workflow', 'edit')
+            "
             @click="triggerDialog('add')"
             label="general.add"
             :i18n-args="{ text: $t('flow.title') }"
@@ -698,6 +707,7 @@ watch(
                       "
                     />
                     <KebabAction
+                      v-if="canAccess('workflow', 'edit')"
                       :id-name="props.row.name"
                       :status="props.row.status"
                       @view="
@@ -815,6 +825,7 @@ watch(
                         "
                       />
                       <KebabAction
+                        v-if="canAccess('workflow', 'edit')"
                         :id-name="props.row.id"
                         :status="props.row.status"
                         @view="
@@ -906,6 +917,7 @@ watch(
     @drawer-undo="() => undo()"
     @close="() => resetForm()"
     @submit="() => submit()"
+    :hide-action="!canAccess('workflow', 'edit')"
     :readonly="!pageState.isDrawerEdit"
     :isEdit="pageState.isDrawerEdit"
     v-model="pageState.addModal"
diff --git a/src/pages/04_property-managment/PropertyDialog.vue b/src/pages/04_property-managment/PropertyDialog.vue
index 333f0ec7..66161d57 100644
--- a/src/pages/04_property-managment/PropertyDialog.vue
+++ b/src/pages/04_property-managment/PropertyDialog.vue
@@ -30,6 +30,7 @@ withDefaults(
   defineProps<{
     readonly?: boolean;
     isEdit?: boolean;
+    hideAction?: boolean;
   }>(),
   { readonly: false, isEdit: false },
 );
@@ -151,7 +152,7 @@ defineEmits<{
             style="position: absolute; z-index: 999; top: 0; right: 0"
           >
             <div
-              v-if="propertyData.status !== 'INACTIVE'"
+              v-if="propertyData.status !== 'INACTIVE' && !hideAction"
               class="surface-1 row rounded"
             >
               <UndoButton
@@ -236,6 +237,7 @@ defineEmits<{
             <FormProperty
               onDrawer
               :readonly="!isEdit"
+              :disable-toggle="hideAction"
               v-model:name="formProperty.name"
               v-model:name-en="formProperty.nameEN"
               v-model:type="formProperty.type"
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 826cbe95..269a4882 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, reactive, ref, watch, computed } from 'vue';
+import { onMounted, onUnmounted, reactive, ref, watch, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
@@ -14,7 +14,8 @@ import useMyBranch from 'stores/my-branch';
 import { useQuotationForm } from './form';
 import { hslaColors } from './constants';
 import { pageTabs, columnQuotation } from './constants';
-import { toCamelCase } from 'stores/utils';
+import { toCamelCase, canAccess } from 'stores/utils';
+import { getUserId } from 'src/services/keycloak';
 
 // NOTE  Import Types
 import { CustomerBranchCreate, CustomerType } from 'stores/customer/types';
@@ -59,7 +60,6 @@ const flowStore = useFlowStore();
 const userBranch = useMyBranch();
 const navigatorStore = useNavigator();
 const customerStore = useCustomerStore();
-
 const {
   fetchListOfOptionBranch,
   customerFormUndo,
@@ -75,6 +75,7 @@ const {
 const {
   state: customerFormState,
   currentFormData: customerFormData,
+  currentBranchRootId,
   registerAbleBranchOption,
   tabFieldRequired,
 } = storeToRefs(customerFormStore);
@@ -88,6 +89,8 @@ const fieldSelectedOption = computed(() => {
       value: v.name,
     }));
 });
+
+const keyAddDialog = ref<number>(0);
 const special = ref(false);
 const branchId = ref('');
 const agentPrice = ref<boolean>(false);
@@ -104,6 +107,7 @@ const pageState = reactive({
   fieldSelected: [''],
   gridView: false,
   total: 0,
+  sellerId: '',
 
   currentTab: 'Issued',
   addModal: false,
@@ -271,6 +275,10 @@ const customerNameInfo = computed(() => {
   return name || '-';
 });
 
+function handleWindowFocus() {
+  fetchQuotationList();
+}
+
 onMounted(async () => {
   pageState.gridView = $q.screen.lt.md ? true : false;
   navigatorStore.current.title = 'quotation.title';
@@ -297,6 +305,7 @@ onMounted(async () => {
       pageSize: quotationPageSize.value,
       status: 'Issued',
       urgentFirst: true,
+      sellerId: pageState.sellerId || undefined,
     });
 
     if (ret) {
@@ -307,6 +316,12 @@ onMounted(async () => {
   }
 
   flowStore.rotate();
+
+  window.addEventListener('focus', handleWindowFocus);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('focus', handleWindowFocus);
 });
 
 async function fetchQuotationList(mobileFetch?: boolean) {
@@ -331,6 +346,7 @@ async function fetchQuotationList(mobileFetch?: boolean) {
       urgentFirst: true,
       startDate: pageState.searchDate[0],
       endDate: pageState.searchDate[1],
+      sellerId: pageState.sellerId || undefined,
     });
 
     if (ret) {
@@ -406,6 +422,11 @@ async function storeDataLocal(id: string) {
 
   window.open(url, '_blank');
 }
+
+async function filterBySellerId() {
+  pageState.sellerId = pageState.sellerId ? '' : getUserId();
+  await fetchQuotationList();
+}
 </script>
 
 <template>
@@ -413,6 +434,7 @@ async function storeDataLocal(id: string) {
     hide-icon
     style="z-index: 999"
     @click.stop="triggerAddQuotationDialog"
+    v-if="canAccess('quotation', 'create')"
   />
 
   <div class="column full-height no-wrap">
@@ -528,7 +550,18 @@ async function storeDataLocal(id: string) {
               </template>
               <template v-slot:append>
                 <q-separator vertical inset class="q-mr-xs" />
-                <AdvanceSearch v-model="pageState.searchDate" />
+                <AdvanceSearch v-model="pageState.searchDate">
+                  <template #prepend>
+                    <div class="text-weight-medium q-mb-sm">
+                      <q-checkbox
+                        size="xs"
+                        :model-value="!!pageState.sellerId"
+                        @click="filterBySellerId"
+                      />
+                      {{ $t('quotation.ownOnly') }}
+                    </div>
+                  </template>
+                </AdvanceSearch>
               </template>
             </q-input>
 
@@ -647,12 +680,20 @@ async function storeDataLocal(id: string) {
           class="col surface-2 flex items-center justify-center"
         >
           <NoData
-            v-if="pageState.inputSearch || pageState.currentTab !== 'Issued'"
+            v-if="
+              pageState.inputSearch ||
+              !canAccess('quotation', 'create') ||
+              pageState.currentTab !== 'Issued'
+            "
             :not-found="!!pageState.inputSearch"
           />
 
           <CreateButton
-            v-if="!pageState.inputSearch && pageState.currentTab === 'Issued'"
+            v-if="
+              !pageState.inputSearch &&
+              pageState.currentTab === 'Issued' &&
+              canAccess('quotation', 'create')
+            "
             @click="triggerAddQuotationDialog"
             label="general.add"
             :i18n-args="{ text: $t('quotation.title') }"
@@ -682,6 +723,8 @@ async function storeDataLocal(id: string) {
                 :visible-columns="pageState.fieldSelected"
                 :grid="pageState.gridView"
                 :hide-edit="pageState.currentTab !== 'Issued'"
+                :hide-action="!canAccess('quotation', 'edit')"
+                :hide-delete="!canAccess('quotation', 'delete')"
                 :hide-btn-preview="pageState.currentTab === 'PaymentSuccess'"
                 @preview="(id: any) => storeDataLocal(id)"
                 @view="
@@ -707,7 +750,8 @@ async function storeDataLocal(id: string) {
                   <div class="col-md-4 col-sm-6 col-12 column">
                     <QuotationCard
                       class="col"
-                      hide-kebab-delete
+                      :hide-action="!canAccess('quotation', 'edit')"
+                      :hide-kebab-delete="!canAccess('quotation', 'delete')"
                       :hide-kebab-edit="!(pageState.currentTab === 'Issued')"
                       :hide-preview="pageState.currentTab === 'PaymentSuccess'"
                       :urgent="item.row.urgent"
@@ -733,8 +777,13 @@ async function storeDataLocal(id: string) {
                       :worker-count="item.row._count.worker"
                       :worker-max="item.row.workerMax || item.row._count.worker"
                       :customer-name="
-                        item.row.customerBranch.registerName ||
-                        `${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
+                        item.row.customerBranch.customer.customerType === 'CORP'
+                          ? $i18n.locale === 'tha'
+                            ? item.row.customerBranch.registerName
+                            : item.row.customerBranch.registerNameEN
+                          : $i18n.locale === 'tha'
+                            ? `${item.row.customerBranch.firstName || '-'} ${item.row.customerBranch.lastName || ''}`
+                            : `${item.row.customerBranch.firstNameEN || '-'} ${item.row.customerBranch.lastNameEN || ''}`
                       "
                       :reporter="
                         $i18n.locale === 'eng'
@@ -833,6 +882,7 @@ async function storeDataLocal(id: string) {
   <!-- NOTE: START - Quotation Form, Add Quotation -->
 
   <DialogForm
+    :key="keyAddDialog"
     :title="$t('general.add', { text: $t('quotation.title') })"
     v-model:modal="pageState.addModal"
     :submit-label="$t('general.add', { text: $t('quotation.title') })"
@@ -842,13 +892,14 @@ async function storeDataLocal(id: string) {
     :submit="
       () => {
         quotationFormState.mode = 'create';
+        quotationFormData.customerBranchId = currentBranchRootId;
         triggerQuotationDialog({ statusDialog: 'create' });
       }
     "
     :close="
       () => {
         branchId = '';
-        quotationFormData.customerBranchId = '';
+        currentBranchRootId = '';
       }
     "
     :beforeClose="
@@ -898,7 +949,7 @@ async function storeDataLocal(id: string) {
           v-model:agent-price="agentPrice"
           v-model:branch-id="branchId"
           v-model:special="special"
-          v-model:customer-branch-id="quotationFormData.customerBranchId"
+          v-model:customer-branch-id="currentBranchRootId"
           @add-customer="triggerSelectTypeCustomerd()"
         />
       </div>
@@ -967,6 +1018,7 @@ async function storeDataLocal(id: string) {
       () => {
         customerFormState.dialogModal = false;
         onCreateImageList = { selectedImage: '', list: [] };
+        keyAddDialog++;
       }
     "
   >
@@ -1158,7 +1210,7 @@ async function storeDataLocal(id: string) {
               customerFormData.customerBranch[0].legalPersonNo
             "
             v-model:business-type="
-              customerFormData.customerBranch[0].businessType
+              customerFormData.customerBranch[0].businessTypeId
             "
             v-model:job-position="
               customerFormData.customerBranch[0].jobPosition
@@ -1239,7 +1291,6 @@ async function storeDataLocal(id: string) {
                         res = await customerStore.createBranch({
                           ...customerFormData.customerBranch[idx],
                           customerId: customerFormState.editCustomerId || '',
-                          id: undefined,
                         });
                       }
                       if (res) {
diff --git a/src/pages/05_quotation/PaymentForm.vue b/src/pages/05_quotation/PaymentForm.vue
index 5bf0e43e..cf3d7c63 100644
--- a/src/pages/05_quotation/PaymentForm.vue
+++ b/src/pages/05_quotation/PaymentForm.vue
@@ -1,15 +1,9 @@
 <script setup lang="ts">
-import { baseUrl, dialog } from 'stores/utils';
+import { onMounted, reactive, ref } from 'vue';
+import { QFile, QMenu } from 'quasar';
 import { storeToRefs } from 'pinia';
-import { useConfigStore } from 'stores/config';
-import { formatNumberDecimal } from 'stores/utils';
-import { MainButton } from 'components/button';
-
 import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-
-import { reactive, ref } from 'vue';
 import { useQuotationPayment } from 'src/stores/quotations';
 import {
   PaymentPayload,
@@ -18,17 +12,27 @@ import {
   QuotationPaymentData,
 } from 'src/stores/quotations/types';
 import { dateFormatJS } from 'src/utils/datetime';
-import { QFile, QMenu } from 'quasar';
-import UploadFileCard from 'src/components/upload-file/UploadFileCard.vue';
-import { onMounted } from 'vue';
 import { DebitNote } from 'src/stores/debit-note';
+import { baseUrl, dialog, formatNumberDecimal } from 'stores/utils';
+import { useConfigStore } from 'stores/config';
+import useBranchStore from 'src/stores/branch';
+import useOptionStore from 'src/stores/options';
 
+import UploadFileCard from 'src/components/upload-file/UploadFileCard.vue';
+import SelectInput from 'src/components/shared/SelectInput.vue';
+import { SaveButton, EditButton, UndoButton } from 'components/button';
+
+const { t } = useI18n();
+const { fetchListBankByBranch } = useBranchStore();
+const { mapOption } = useOptionStore();
 const configStore = useConfigStore();
 const quotationPayment = useQuotationPayment();
 const { data: config } = storeToRefs(configStore);
 
 const prop = defineProps<{
+  branchId: string;
   data?: Quotation | QuotationFull | DebitNote;
+  readonly?: boolean;
   isDebitNote?: boolean;
 }>();
 
@@ -37,8 +41,16 @@ const firstCodePayment = defineModel<string>('firstCodePayment');
 const refQFile = ref<InstanceType<typeof QFile>[]>([]);
 const refQMenu = ref<InstanceType<typeof QMenu>[]>([]);
 const paymentData = ref<QuotationPaymentData[]>([]);
-const submitPaymentData = ref<QuotationPaymentData[]>([]);
-const payAll = ref<boolean>(false);
+const accountOpt = ref<{ label: string; value: string }[]>([]);
+const formPaymentMethod = ref<
+  {
+    id: string;
+    channel: string | null;
+    reference: string | null;
+    account: string | null;
+    isEdit?: boolean;
+  }[]
+>([]);
 const paymentStatusOpts = [
   {
     status: 'PaymentInProcess',
@@ -171,7 +183,7 @@ async function selectStatus(
       payment.paymentStatus = status;
       const payload = {
         paymentStatus: payment.paymentStatus,
-        date: new Date(payment.date),
+        date: new Date(),
         amount: payment.amount,
       };
       const res = await quotationPayment.updateQuotationPayment(
@@ -187,18 +199,30 @@ async function selectStatus(
   refQMenu.value[index].hide();
 }
 
-async function triggerSubmit() {
-  submitPaymentData.value.forEach(async (p) => {
-    const payload: PaymentPayload = {
-      paymentStatus: p.paymentStatus,
-      date: new Date(p.date),
-      amount: p.amount,
-    };
-    await quotationPayment.updateQuotationPayment(p.id, payload);
-  });
+async function triggerSubmit(id: string) {
+  const index = paymentData.value.findIndex((p) => p.id === id);
+  if (index === -1) return;
+
+  const p = paymentData.value[index];
+
+  const payload: PaymentPayload = {
+    paymentStatus: p.paymentStatus,
+    date: new Date(p.date),
+    amount: p.amount,
+    account: formPaymentMethod.value[index].account,
+    channel: formPaymentMethod.value[index].channel,
+    reference: formPaymentMethod.value[index].reference,
+  };
+
+  await quotationPayment.updateQuotationPayment(p.id, payload);
+  formPaymentMethod.value[index].isEdit = false;
+  setTimeout(async () => {
+    await fetchData();
+    await getSlipList(paymentData.value[index], index);
+  }, 300);
 }
 
-onMounted(async () => {
+async function fetchData() {
   if (!prop.data) return;
   const ret = await quotationPayment.getQuotationPayment({
     quotationId: prop.isDebitNote === true ? undefined : prop.data.id,
@@ -208,6 +232,13 @@ onMounted(async () => {
   });
   if (ret) {
     paymentData.value = ret.result;
+    formPaymentMethod.value = ret.result.map((p, i) => ({
+      id: p.id,
+      channel: p.channel,
+      reference: p.reference,
+      account: p.account,
+      isEdit: formPaymentMethod.value[i]?.isEdit || false,
+    }));
     slipFile.value = paymentData.value.map((v, i) => {
       if (i === 0) {
         firstCodePayment.value = v.code;
@@ -218,468 +249,601 @@ onMounted(async () => {
       };
     });
   }
+}
+
+async function fetchBankOption() {
+  const bankOption = await fetchListBankByBranch(prop.branchId);
+  accountOpt.value = bankOption
+    .map((b) => {
+      const name =
+        `${b.accountName} ${mapOption(b.bankName)} ${mapOption(b.accountType)} ${b.accountNumber}`.trim();
+      if (!name) return;
+
+      return {
+        label: name,
+        value: name,
+      };
+    })
+    .filter((i) => !!i);
+}
+
+onMounted(async () => {
+  await fetchData();
+  await fetchBankOption();
 });
 </script>
 <template>
-  <q-form
-    greedy
-    @submit.prevent
-    @validation-success="triggerSubmit"
-    class="column full-height"
-    v-if="data"
-  >
-    <div class="col column no-wrap">
-      <!-- PRICE DETAIL -->
-      <section class="bordered rounded surface-1" style="overflow: hidden">
-        <q-expansion-item
-          hide-expand-icon
-          v-model="state.waitExpansion"
-          header-style="padding:0px"
-        >
-          <template v-slot:header>
-            <div class="column full-width bordered-b">
-              <header class="bg-color-orange text-bold text-body1 q-pa-sm">
-                <q-avatar class="surface-1 q-mr-sm" size="10px" />
-                {{ $t('quotation.receiptDialog.paymentWait') }}
-              </header>
-              <span class="q-pa-md row items-center">
-                <q-img
-                  src="/images/quotation-avatar.png"
-                  width="3rem"
-                  class="q-mr-lg"
-                />
-                <div class="column col">
-                  <span class="text-bold text-body1">
-                    {{ data.workName }}
-                  </span>
-                  <span
-                    class="row items-center"
-                    :class="data.urgent ? 'urgent' : 'app-text-muted'"
-                  >
-                    {{ data.code }}
-                    <q-icon
-                      v-if="data.urgent"
-                      class="q-pl-sm"
-                      name="mdi-fire"
-                      size="xs"
-                    />
-                    <span class="q-ml-auto" style="color: var(--foreground)">
-                      ฿ {{ formatNumberDecimal(data.finalPrice, 2) || '0.00' }}
-                    </span>
-                  </span>
-                </div>
-              </span>
-            </div>
-          </template>
-
-          <span class="app-text-muted-2 q-px-md q-py-sm column">
-            <span class="row">
-              {{ $t('general.total') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿
-                {{ formatNumberDecimal(data.totalPrice, 2) || '0.00' }}
-              </span>
-            </span>
-            <span class="row">
-              {{ $t('quotation.discountList') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿
-                {{ formatNumberDecimal(data.totalDiscount, 2) || '0.00' }}
-              </span>
-            </span>
-            <span class="row">
-              {{ $t('general.totalAfterDiscount') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿
-                {{
-                  formatNumberDecimal(
-                    data.totalPrice - data.totalDiscount,
-                    2,
-                  ) || '0.00'
-                }}
-              </span>
-            </span>
-            <span class="row">
-              {{ $t('general.totalVatExcluded') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿ {{ formatNumberDecimal(data.vatExcluded, 2) || '0.00' }}
-              </span>
-            </span>
-            <span class="row">
-              {{
-                $t('general.vat', {
-                  msg: `${config && Math.round(config.vat * 100)}%`,
-                })
-              }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿ {{ formatNumberDecimal(data.vat, 2) || '0.00' }}
-              </span>
-            </span>
-            <span class="row">
-              {{ $t('general.totalVatIncluded') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿
-                {{
-                  formatNumberDecimal(
-                    data.totalPrice - data.totalDiscount + data.vat,
-                    2,
-                  ) || '0.00'
-                }}
-              </span>
-            </span>
-            <span class="row">
-              {{ $t('general.discountAfterVat') }}
-              <span class="q-ml-auto" style="color: var(--foreground)">
-                ฿ {{ formatNumberDecimal(data.discount, 2) || '0.00' }}
-              </span>
-            </span>
-          </span>
-        </q-expansion-item>
-        <q-separator inset v-if="state.waitExpansion" />
-        <div
-          class="q-py-sm q-px-md row items-center justify-end app-text-muted-2"
-        >
-          {{ $t('quotation.totalPriceBaht') }}:
-          <span class="q-px-sm" style="color: var(--foreground)">
-            {{ formatNumberDecimal(data.finalPrice, 2) || '0.00' }}
-          </span>
-          <q-btn
-            dense
-            flat
-            rounded
-            padding="0"
-            :icon="`mdi-chevron-${state.waitExpansion ? 'down' : 'up'}`"
-            @click.stop="state.waitExpansion = !state.waitExpansion"
-          />
-        </div>
-      </section>
-
-      <!-- PAYMENT DETAIL -->
-      <section
-        class="surface-1 rounded bordered column q-mt-md q-pa-md col scroll no-wrap"
+  <div class="column no-wrap">
+    <!-- PRICE DETAIL -->
+    <section class="bordered rounded surface-1" style="overflow: hidden">
+      <q-expansion-item
+        hide-expand-icon
+        v-model="state.waitExpansion"
+        header-style="padding:0px"
       >
-        <span class="text-weight-bold text-body1">
-          {{ $t('general.payment') }}
-        </span>
-        <div class="row items-center q-pb-md">
-          <span class="app-text-muted-2">{{ $t('quotation.payType') }}</span>
-          <div
-            class="badge-card q-ml-auto rounded"
-            :class="`badge-card__${data.payCondition}`"
-          >
-            {{ $t(`quotation.type.${data.payCondition}`) }}
+        <template v-slot:header>
+          <div class="column full-width bordered-b">
+            <header class="bg-color-orange text-bold text-body1 q-pa-sm">
+              <q-avatar class="surface-1 q-mr-sm" size="10px" />
+              {{ $t('quotation.receiptDialog.paymentWait') }}
+            </header>
+            <span class="q-pa-md row items-center">
+              <q-img
+                src="/images/quotation-avatar.png"
+                width="3rem"
+                class="q-mr-lg"
+              />
+              <div class="column col">
+                <span class="text-bold text-body1">
+                  {{ data.workName }}
+                </span>
+                <span
+                  class="row items-center"
+                  :class="data.urgent ? 'urgent' : 'app-text-muted'"
+                >
+                  {{ data.code }}
+                  <q-icon
+                    v-if="data.urgent"
+                    class="q-pl-sm"
+                    name="mdi-fire"
+                    size="xs"
+                  />
+                  <span class="q-ml-auto" style="color: var(--foreground)">
+                    ฿ {{ formatNumberDecimal(data.finalPrice, 2) || '0.00' }}
+                  </span>
+                </span>
+              </div>
+            </span>
           </div>
-        </div>
+        </template>
 
-        <!-- split summary -->
+        <span class="app-text-muted-2 q-px-md q-py-sm column">
+          <span class="row">
+            {{ $t('general.total') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿
+              {{ formatNumberDecimal(data.totalPrice, 2) || '0.00' }}
+            </span>
+          </span>
+          <span class="row">
+            {{ $t('quotation.discountList') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿
+              {{ formatNumberDecimal(data.totalDiscount, 2) || '0.00' }}
+            </span>
+          </span>
+          <span class="row">
+            {{ $t('general.totalAfterDiscount') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿
+              {{
+                formatNumberDecimal(data.totalPrice - data.totalDiscount, 2) ||
+                '0.00'
+              }}
+            </span>
+          </span>
+          <span class="row">
+            {{ $t('general.totalVatExcluded') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿ {{ formatNumberDecimal(data.vatExcluded, 2) || '0.00' }}
+            </span>
+          </span>
+          <span class="row">
+            {{
+              $t('general.vat', {
+                msg: `${config && Math.round(config.vat * 100)}%`,
+              })
+            }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿ {{ formatNumberDecimal(data.vat, 2) || '0.00' }}
+            </span>
+          </span>
+          <span class="row">
+            {{ $t('general.totalVatIncluded') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿
+              {{
+                formatNumberDecimal(
+                  data.totalPrice - data.totalDiscount + data.vat,
+                  2,
+                ) || '0.00'
+              }}
+            </span>
+          </span>
+          <span class="row">
+            {{ $t('general.discountAfterVat') }}
+            <span class="q-ml-auto" style="color: var(--foreground)">
+              ฿ {{ formatNumberDecimal(data.discount, 2) || '0.00' }}
+            </span>
+          </span>
+        </span>
+      </q-expansion-item>
+      <q-separator inset v-if="state.waitExpansion" />
+      <div
+        class="q-py-sm q-px-md row items-center justify-end app-text-muted-2"
+      >
+        {{ $t('quotation.totalPriceBaht') }}:
+        <span class="q-px-sm" style="color: var(--foreground)">
+          {{ formatNumberDecimal(data.finalPrice, 2) || '0.00' }}
+        </span>
+        <q-btn
+          dense
+          flat
+          rounded
+          padding="0"
+          :icon="`mdi-chevron-${state.waitExpansion ? 'down' : 'up'}`"
+          @click.stop="state.waitExpansion = !state.waitExpansion"
+        />
+      </div>
+    </section>
+
+    <!-- PAYMENT DETAIL -->
+    <section
+      class="surface-1 rounded bordered column q-mt-md q-pa-md col scroll no-wrap"
+    >
+      <span class="text-weight-bold text-body1">
+        {{ $t('general.payment') }}
+      </span>
+      <div class="row items-center q-pb-md">
+        <span class="app-text-muted-2">{{ $t('quotation.payType') }}</span>
         <div
-          v-if="
-            data.payCondition === 'BillSplit' || data.payCondition === 'Split'
-          "
-          class="row items-center q-pb-sm"
+          class="badge-card q-ml-auto rounded"
+          :class="`badge-card__${data.payCondition}`"
         >
-          <span class="app-text-muted-2 col-12 col-md">
-            {{ $t('quotation.paySplitCount') }}
-          </span>
-
-          <span>
-            {{ $t('quotation.receiptDialog.total') }}
-          </span>
-          <span class="bordered rounded surface-2 number-box q-mx-sm">
-            {{ data.paySplitCount }}
-          </span>
-          {{ $t('quotation.receiptDialog.installments') }}
-          {{ $i18n.locale === 'eng' ? ',' : '' }}
-          {{ $t('quotation.receiptDialog.paid') }}
-          <span class="bordered rounded surface-2 number-box q-mx-sm">
-            {{
-              paymentData.reduce(
-                (c, i) => (i.paymentStatus === 'PaymentSuccess' ? c + 1 : c),
-                0,
-              )
-            }}
-          </span>
-          {{
-            $i18n.locale === 'tha'
-              ? $t('quotation.receiptDialog.installments')
-              : ','
-          }}
-          {{ $t('quotation.receiptDialog.remain') }}
-          <span class="bordered rounded surface-2 number-box q-mx-sm">
-            {{
-              paymentData.reduce(
-                (c, i) => (i.paymentStatus !== 'PaymentSuccess' ? c + 1 : c),
-                0,
-              )
-            }}
-          </span>
-          {{
-            $i18n.locale === 'tha'
-              ? $t('quotation.receiptDialog.installments')
-              : ''
-          }}
+          {{ $t(`quotation.type.${data.payCondition}`) }}
         </div>
+      </div>
 
-        <!-- summary total, paid, remain -->
-        <div class="row items-center">
-          <span
-            class="row col rounded q-px-sm q-py-md justify-end"
-            style="border: 1px solid hsl(var(--info-bg))"
-          >
-            <span
-              class="col-sm col-12"
-              :class="{ 'text-right': $q.screen.lt.sm }"
-            >
-              {{ $t('quotation.receiptDialog.totalAmount') }}
-            </span>
-            {{ formatNumberDecimal(data.finalPrice, 2) }}
-          </span>
-          <span
-            class="row col rounded q-px-sm q-py-md q-mx-md justify-end"
-            style="border: 1px solid hsl(var(--positive-bg))"
-          >
-            <span
-              class="col-sm col-12"
-              :class="{ 'text-right': $q.screen.lt.sm }"
-            >
-              {{ $t('quotation.receiptDialog.paid') }}
-            </span>
-            {{
-              formatNumberDecimal(
-                paymentData.reduce(
-                  (c, i) =>
-                    i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
-                  0,
-                ),
-                2,
-              )
-            }}
-          </span>
-          <span
-            class="row col rounded q-px-sm q-py-md justify-end"
-            style="border: 1px solid hsl(var(--warning-bg))"
-          >
-            <span
-              class="col-sm col-12"
-              :class="{ 'text-right': $q.screen.lt.sm }"
-            >
-              {{ $t('quotation.receiptDialog.remain') }}
-            </span>
-            {{
-              formatNumberDecimal(
-                paymentData.reduce(
-                  (c, i) =>
-                    i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
-                  0,
-                ),
-                2,
-              )
-            }}
-          </span>
-        </div>
-
-        <!-- bill -->
-        <span class="app-text-muted-2 q-pt-md">
-          {{ $t('quotation.receiptDialog.billOfPayment') }}
+      <!-- split summary -->
+      <div
+        v-if="
+          data.payCondition === 'BillSplit' || data.payCondition === 'Split'
+        "
+        class="row items-center q-pb-sm"
+      >
+        <span class="app-text-muted-2 col-12 col-md">
+          {{ $t('quotation.paySplitCount') }}
         </span>
 
-        <!-- payment item -->
-        <section class="row">
-          <div
-            v-for="(p, i) in paymentData"
-            :key="i"
-            class="bordered rounded surface-1 q-mb-md col-12"
-            style="overflow: hidden"
+        <span>
+          {{ $t('quotation.receiptDialog.total') }}
+        </span>
+        <span class="bordered rounded surface-2 number-box q-mx-sm">
+          {{ data.paySplitCount }}
+        </span>
+        {{ $t('quotation.receiptDialog.installments') }}
+        {{ $i18n.locale === 'eng' ? ',' : '' }}
+        {{ $t('quotation.receiptDialog.paid') }}
+        <span class="bordered rounded surface-2 number-box q-mx-sm">
+          {{
+            paymentData.reduce(
+              (c, i) => (i.paymentStatus === 'PaymentSuccess' ? c + 1 : c),
+              0,
+            )
+          }}
+        </span>
+        {{
+          $i18n.locale === 'tha'
+            ? $t('quotation.receiptDialog.installments')
+            : ','
+        }}
+        {{ $t('quotation.receiptDialog.remain') }}
+        <span class="bordered rounded surface-2 number-box q-mx-sm">
+          {{
+            paymentData.reduce(
+              (c, i) => (i.paymentStatus !== 'PaymentSuccess' ? c + 1 : c),
+              0,
+            )
+          }}
+        </span>
+        {{
+          $i18n.locale === 'tha'
+            ? $t('quotation.receiptDialog.installments')
+            : ''
+        }}
+      </div>
+
+      <!-- summary total, paid, remain -->
+      <div class="row items-center">
+        <span
+          class="row col rounded q-px-sm q-py-md justify-end"
+          style="border: 1px solid hsl(var(--info-bg))"
+        >
+          <span
+            class="col-sm col-12"
+            :class="{ 'text-right': $q.screen.lt.sm }"
           >
-            <q-expansion-item
-              hide-expand-icon
-              v-model="state.payExpansion[i]"
-              header-style="padding:0px"
-              @before-show="getSlipList(p, i)"
-            >
-              <template v-slot:header>
-                <div class="column full-width">
-                  <section
-                    class="row full-width items-center surface-2 bordered-b q-px-md q-py-sm"
-                  >
-                    <span class="text-weight-medium column">
-                      {{ $t('quotation.periodNo') }} {{ i + 1 }}
-                      {{ monthDisplay(p.createdAt) }}
-                      <!-- {{ monthDisplay(p.date) }} -->
-                      <!-- <span -->
-                      <!--   class="text-caption app-text-muted-2" -->
-                      <!--   v-if="data.payCondition !== 'Full'" -->
-                      <!-- > -->
-                      <!--   {{ $t('quotation.receiptDialog.paymentDueDate') }} -->
-                      <!--   {{ -->
-                      <!--     data.payCondition !== 'BillFull' -->
-                      <!--       ? dateFormat(p.date, true) -->
-                      <!--       : dateFormat(data.payBillDate) -->
-                      <!--   }} -->
-                      <!-- </span> -->
-                    </span>
+            {{ $t('quotation.receiptDialog.totalAmount') }}
+          </span>
+          {{ formatNumberDecimal(data.finalPrice, 2) }}
+        </span>
+        <span
+          class="row col rounded q-px-sm q-py-md q-mx-md justify-end"
+          style="border: 1px solid hsl(var(--positive-bg))"
+        >
+          <span
+            class="col-sm col-12"
+            :class="{ 'text-right': $q.screen.lt.sm }"
+          >
+            {{ $t('quotation.receiptDialog.paid') }}
+          </span>
+          {{
+            formatNumberDecimal(
+              paymentData.reduce(
+                (c, i) =>
+                  i.paymentStatus === 'PaymentSuccess' ? c + i.amount : c,
+                0,
+              ),
+              2,
+            )
+          }}
+        </span>
+        <span
+          class="row col rounded q-px-sm q-py-md justify-end"
+          style="border: 1px solid hsl(var(--warning-bg))"
+        >
+          <span
+            class="col-sm col-12"
+            :class="{ 'text-right': $q.screen.lt.sm }"
+          >
+            {{ $t('quotation.receiptDialog.remain') }}
+          </span>
+          {{
+            formatNumberDecimal(
+              paymentData.reduce(
+                (c, i) =>
+                  i.paymentStatus !== 'PaymentSuccess' ? c + i.amount : c,
+                0,
+              ),
+              2,
+            )
+          }}
+        </span>
+      </div>
 
-                    <div class="q-ml-auto row" style="gap: 10px">
-                      <q-btn
-                        id="btn-payment"
-                        @click.stop
-                        unelevated
-                        padding="4px 8px"
-                        class="rounded text-capitalize text-weight-regular payment-wait row items-center"
-                        :class="{
-                          'payment-pending': p.paymentStatus === 'PaymentWait',
-                          'payment-process':
-                            p.paymentStatus === 'PaymentInProcess',
-                          'payment-retry': p.paymentStatus === 'PaymentRetry',
-                          'payment-success':
-                            p.paymentStatus === 'PaymentSuccess',
-                        }"
-                      >
-                        <q-icon
-                          size="xs"
-                          :name="
-                            paymentStatusOpts.find(
-                              (s) => s.status === p.paymentStatus,
-                            )?.icon || 'mdi-hand-coin-outline'
-                          "
-                          class="q-pr-sm"
-                        />
-                        <span>
-                          {{ $t(`quotation.receiptDialog.${p.paymentStatus}`) }}
-                        </span>
-                        <q-icon name="mdi-chevron-down" class="q-pl-xs" />
-                        <q-menu
-                          ref="refQMenu"
-                          fit
-                          :offset="[0, 8]"
-                          class="rounded"
-                        >
-                          <q-list dense>
-                            <template
-                              v-for="opts in paymentStatusOpts"
-                              :key="opts.status"
-                            >
-                              <q-item
-                                :id="`btn-payment-${opts.status}`"
-                                v-if="
-                                  (p.paymentStatus === 'PaymentWait' &&
-                                    opts.status !== 'PaymentRetry') ||
-                                  (p.paymentStatus === 'PaymentInProcess' &&
-                                    opts.status !== 'PaymentInProcess') ||
-                                  (p.paymentStatus === 'PaymentRetry' &&
-                                    opts.status !== 'PaymentRetry')
-                                "
-                                clickable
-                                class="row items-center"
-                                @click="selectStatus(p, opts.status, i)"
-                              >
-                                <q-icon
-                                  :name="opts.icon"
-                                  :color="opts.color"
-                                  class="q-pr-sm"
-                                  size="xs"
-                                />
-                                {{ $t(opts.name) }}
-                              </q-item>
-                            </template>
-                          </q-list>
-                        </q-menu>
-                      </q-btn>
-                    </div>
-                  </section>
-                  <section class="row items-center q-px-md q-py-sm">
-                    {{ $t('quotation.receiptDialog.amountToBePaid') }}
-                    <span
-                      class="q-px-sm q-ml-auto"
-                      style="color: var(--foreground)"
-                    >
-                      {{ formatNumberDecimal(p.amount, 2) }}
-                    </span>
+      <!-- bill -->
+      <span class="app-text-muted-2 q-pt-md" v-if="paymentData.length > 0">
+        {{ $t('quotation.receiptDialog.billOfPayment') }}
+      </span>
+
+      <!-- payment item -->
+      <section class="row">
+        <div
+          v-for="(payment, i) in paymentData"
+          :key="i"
+          class="bordered rounded surface-1 q-mb-md col-12"
+          style="overflow: hidden"
+        >
+          <q-expansion-item
+            hide-expand-icon
+            v-model="state.payExpansion[i]"
+            header-style="padding:0px"
+            @before-show="getSlipList(payment, i)"
+          >
+            <template v-slot:header>
+              <div class="column full-width">
+                <section
+                  class="row full-width items-center surface-2 bordered-b q-px-md q-py-sm"
+                >
+                  <span class="text-weight-medium column">
+                    {{ $t('quotation.periodNo') }} {{ i + 1 }}
+                    {{ monthDisplay(payment.createdAt) }}
+                    <!-- {{ monthDisplay(p.date) }} -->
+                    <!-- <span -->
+                    <!--   class="text-caption app-text-muted-2" -->
+                    <!--   v-if="data.payCondition !== 'Full'" -->
+                    <!-- > -->
+                    <!--   {{ $t('quotation.receiptDialog.paymentDueDate') }} -->
+                    <!--   {{ -->
+                    <!--     data.payCondition !== 'BillFull' -->
+                    <!--       ? dateFormat(p.date, true) -->
+                    <!--       : dateFormat(data.payBillDate) -->
+                    <!--   }} -->
+                    <!-- </span> -->
+                  </span>
+
+                  <div class="q-ml-auto row" style="gap: 10px">
                     <q-btn
-                      dense
-                      flat
-                      rounded
-                      padding="0"
-                      id="btn-show-file"
-                      :icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
-                      @click.stop="
-                        state.payExpansion[i] = !state.payExpansion[i]
-                      "
-                    />
-                  </section>
-                </div>
-              </template>
+                      :disable="readonly"
+                      id="btn-payment"
+                      @click.stop
+                      unelevated
+                      padding="4px 8px"
+                      class="rounded text-capitalize text-weight-regular payment-wait row items-center"
+                      :class="{
+                        'payment-pending':
+                          payment.paymentStatus === 'PaymentWait',
+                        'payment-process':
+                          payment.paymentStatus === 'PaymentInProcess',
+                        'payment-retry':
+                          payment.paymentStatus === 'PaymentRetry',
+                        'payment-success':
+                          payment.paymentStatus === 'PaymentSuccess',
+                      }"
+                    >
+                      <q-icon
+                        size="xs"
+                        :name="
+                          paymentStatusOpts.find(
+                            (s) => s.status === payment.paymentStatus,
+                          )?.icon || 'mdi-hand-coin-outline'
+                        "
+                        class="q-pr-sm"
+                      />
+                      <span>
+                        {{
+                          $t(`quotation.receiptDialog.${payment.paymentStatus}`)
+                        }}
+                      </span>
+                      <q-icon
+                        v-if="!readonly"
+                        name="mdi-chevron-down"
+                        class="q-pl-xs"
+                      />
+                      <q-menu
+                        ref="refQMenu"
+                        fit
+                        :offset="[0, 8]"
+                        class="rounded"
+                      >
+                        <q-list dense>
+                          <template
+                            v-for="opts in paymentStatusOpts"
+                            :key="opts.status"
+                          >
+                            <q-item
+                              :id="`btn-payment-${opts.status}`"
+                              v-if="
+                                (payment.paymentStatus === 'PaymentWait' &&
+                                  opts.status !== 'PaymentRetry') ||
+                                (payment.paymentStatus === 'PaymentInProcess' &&
+                                  opts.status !== 'PaymentInProcess') ||
+                                (payment.paymentStatus === 'PaymentRetry' &&
+                                  opts.status !== 'PaymentRetry')
+                              "
+                              clickable
+                              class="row items-center"
+                              @click="selectStatus(payment, opts.status, i)"
+                            >
+                              <q-icon
+                                :name="opts.icon"
+                                :color="opts.color"
+                                class="q-pr-sm"
+                                size="xs"
+                              />
+                              {{ $t(opts.name) }}
+                            </q-item>
+                          </template>
+                        </q-list>
+                      </q-menu>
+                    </q-btn>
+                  </div>
+                </section>
+                <section class="row items-center q-px-md q-py-sm">
+                  {{ $t('quotation.receiptDialog.amountToBePaid') }}
+                  <span
+                    class="q-px-sm q-ml-auto"
+                    style="color: var(--foreground)"
+                  >
+                    {{ formatNumberDecimal(payment.amount, 2) }}
+                  </span>
+                  <q-btn
+                    dense
+                    flat
+                    rounded
+                    padding="0"
+                    id="btn-show-file"
+                    :icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
+                    @click.stop="state.payExpansion[i] = !state.payExpansion[i]"
+                  />
+                </section>
+              </div>
+            </template>
 
-              <div
+            <!-- วิธีการรับชำระ -->
+            <template v-if="payment.paymentStatus === 'PaymentSuccess'">
+              <section
                 class="q-px-md q-py-xs text-weight-medium row items-center"
                 style="background-color: hsla(var(--info-bg) / 0.1)"
               >
+                {{ $t('quotation.receiptDialog.paymentMethod') }}
+              </section>
+
+              <q-form
+                class="column full-height"
+                @submit.prevent
+                @submit="triggerSubmit(payment.id)"
+              >
+                <div
+                  class="surface-2 q-px-md q-py-sm row q-col-gutter-sm items-center"
+                >
+                  <SelectInput
+                    id="input-payment-channel"
+                    for="input-payment-channel"
+                    :readonly="
+                      readonly ||
+                      (!formPaymentMethod[i].isEdit && !!payment.channel)
+                    "
+                    v-model="formPaymentMethod[i].channel"
+                    class="col-md-2 col-6"
+                    :rules="[
+                      (val: string) => !!val || $t('form.error.required'),
+                    ]"
+                    :option="[
+                      {
+                        label: $t('creditNote.label.Cash'),
+                        value: 'Cash',
+                      },
+                      {
+                        label: $t('creditNote.label.BankTransfer'),
+                        value: 'BankTransfer',
+                      },
+                    ]"
+                    :label="$t('quotation.receiptDialog.paymentMethod')"
+                    @update:model-value="
+                      () => {
+                        if (formPaymentMethod[i].channel === 'Cash') {
+                          formPaymentMethod[i].reference = null;
+                          formPaymentMethod[i].account = null;
+                        }
+                      }
+                    "
+                  />
+                  <q-input
+                    v-if="formPaymentMethod[i].channel === 'BankTransfer'"
+                    dense
+                    outlined
+                    class="col-md-3 col-6"
+                    v-model="formPaymentMethod[i].reference"
+                    :readonly="
+                      readonly ||
+                      (!formPaymentMethod[i].isEdit && !!payment.channel)
+                    "
+                    :label="$t('quotation.refNo')"
+                    :rules="[
+                      (val: string) => !!val || $t('form.error.required'),
+                    ]"
+                    hide-bottom-space
+                  />
+                  <SelectInput
+                    v-if="formPaymentMethod[i].channel === 'BankTransfer'"
+                    id="select-payment-account"
+                    for="select-payment-account"
+                    :readonly="
+                      readonly ||
+                      (!formPaymentMethod[i].isEdit && !!payment.channel)
+                    "
+                    v-model="formPaymentMethod[i].account"
+                    class="col"
+                    :option="accountOpt"
+                    :label="$t('quotation.bankAccount')"
+                    :rules="[
+                      (val: string) => !!val || $t('form.error.required'),
+                    ]"
+                  />
+                  <div class="q-ml-auto">
+                    <UndoButton
+                      v-if="formPaymentMethod[i].isEdit"
+                      icon-only
+                      @click="
+                        () => {
+                          formPaymentMethod[i].isEdit = false;
+                          formPaymentMethod[i].channel = payment.channel;
+                          formPaymentMethod[i].reference = payment.reference;
+                          formPaymentMethod[i].account = payment.account;
+                        }
+                      "
+                    />
+                    <SaveButton
+                      v-if="!payment.channel || formPaymentMethod[i].isEdit"
+                      icon-only
+                      type="submit"
+                    />
+                    <EditButton
+                      v-if="
+                        payment.channel && formPaymentMethod[i].isEdit === false
+                      "
+                      icon-only
+                      @click="formPaymentMethod[i].isEdit = true"
+                    />
+                  </div>
+                </div>
+              </q-form>
+            </template>
+
+            <!-- อัปโหลดใบเสร็จ -->
+            <section
+              class="q-px-md q-py-xs text-weight-medium row items-center"
+              style="background-color: hsla(var(--info-bg) / 0.1)"
+            >
+              {{
+                $t('general.upload', {
+                  msg: $t('quotation.receiptDialog.slip'),
+                })
+              }}
+            </section>
+            <div class="surface-2 q-pa-md">
+              <div
+                class="upload-section column rounded q-py-md full-height items-center justify-center no-wrap"
+              >
+                <q-img src="/images/upload.png" width="150px" />
+                {{ $t('general.upload', { msg: ' E-slip' }) }}
                 {{
-                  $t('general.upload', {
-                    msg: $t('quotation.receiptDialog.slip'),
+                  $t('general.or', {
+                    msg: $t('general.upload', {
+                      msg: $t('quotation.receiptDialog.paymentDocs'),
+                    }),
                   })
                 }}
+                <q-btn
+                  v-if="!readonly"
+                  unelevated
+                  id="btn-upload-file"
+                  :label="$t('general.upload')"
+                  rounded
+                  class="app-bg-info q-mt-sm"
+                  @click.stop="() => pickFile(i)"
+                />
+                <q-file
+                  ref="refQFile"
+                  v-show="false"
+                  v-model="slipFile[i].file"
+                  @update:model-value="
+                    triggerUpload(payment, i, slipFile[i].file)
+                  "
+                />
               </div>
-              <div class="surface-2 q-pa-md">
-                <div
-                  class="upload-section column rounded q-py-md full-height items-center justify-center no-wrap"
-                >
-                  <q-img src="/images/upload.png" width="150px" />
-                  {{ $t('general.upload', { msg: ' E-slip' }) }}
-                  {{
-                    $t('general.or', {
-                      msg: $t('general.upload', {
-                        msg: $t('quotation.receiptDialog.paymentDocs'),
-                      }),
-                    })
-                  }}
-                  <q-btn
-                    unelevated
-                    id="btn-upload-file"
-                    :label="$t('general.upload')"
-                    rounded
-                    class="app-bg-info q-mt-sm"
-                    @click.stop="() => pickFile(i)"
-                  />
-                  <q-file
-                    ref="refQFile"
-                    v-show="false"
-                    v-model="slipFile[i].file"
-                    @update:model-value="triggerUpload(p, i, slipFile[i].file)"
-                  />
-                </div>
-              </div>
+            </div>
 
-              <section class="surface-2 row q-px-md">
-                <!-- upload card -->
-                <div
-                  v-for="(d, j) in slipFile[i].data"
-                  :key="j"
-                  class="col-12"
-                  :class="{
-                    'q-pb-md': j === slipFile[i].data.length - 1,
-                    'q-pb-sm': j < slipFile[i].data.length,
-                  }"
-                >
-                  <UploadFileCard
-                    :name="d.name"
-                    :progress="d.progress"
-                    :uploading="{ loaded: d.loaded, total: d.total }"
-                    :url="`/quotation/${data.id}/payment/${p.id}/attachment/${d.name}`"
-                    icon="mdi-file-image-outline"
-                    color="hsl(var(--text-mute))"
-                    clickable
-                    @click="triggerViewSlip(p, d.name)"
-                    @close="triggerDelete(p, d.name, i)"
-                  />
-                </div>
-              </section>
-            </q-expansion-item>
-          </div>
-        </section>
+            <section class="surface-2 row q-px-md">
+              <!-- upload card -->
+              <div
+                v-for="(d, j) in slipFile[i].data"
+                :key="j"
+                class="col-12"
+                :class="{
+                  'q-pb-md': j === slipFile[i].data.length - 1,
+                  'q-pb-sm': j < slipFile[i].data.length,
+                }"
+              >
+                <UploadFileCard
+                  :name="d.name"
+                  :progress="d.progress"
+                  :uploading="{ loaded: d.loaded, total: d.total }"
+                  :url="`/payment/${payment.id}/attachment/${d.name}`"
+                  icon="mdi-file-image-outline"
+                  color="hsl(var(--text-mute))"
+                  clickable
+                  @click="triggerViewSlip(payment, d.name)"
+                  @close="triggerDelete(payment, d.name, i)"
+                />
+              </div>
+            </section>
+          </q-expansion-item>
+        </div>
       </section>
-    </div>
-  </q-form>
+    </section>
+  </div>
 </template>
 <style scoped>
 .bg-color-orange {
@@ -762,10 +926,10 @@ onMounted(async () => {
 }
 
 :deep(
-    .q-expansion-item
-      .q-item.q-item-type.row.no-wrap.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable
-      .q-focus-helper
-  ) {
+  .q-expansion-item
+    .q-item.q-item-type.row.no-wrap.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable
+    .q-focus-helper
+) {
   visibility: hidden;
 }
 </style>
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index d7e332f7..cd24e5cd 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -2,12 +2,15 @@
 import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { QSelect, useQuasar } from 'quasar';
+import { getUserId } from 'src/services/keycloak';
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import {
   baseUrl,
   dialogCheckData,
   dialogWarningClose,
   formatNumberDecimal,
+  canAccess,
+  isRoleInclude,
 } from 'stores/utils';
 import { ProductTree, quotationProductTree } from './utils';
 
@@ -76,7 +79,8 @@ import { api } from 'src/boot/axios';
 import { RouterLink, useRoute } from 'vue-router';
 import { initLang, initTheme, Lang } from 'src/utils/ui';
 import { convertTemplate } from 'src/utils/string-template';
-import { getRole } from 'src/services/keycloak';
+
+import { CustomerBranch } from 'src/stores/customer';
 
 type Node = {
   [key: string]: any;
@@ -92,6 +96,8 @@ type ProductGroupId = string;
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
+const customerBranchOption = ref<CustomerBranch>();
+
 const employeeStore = useEmployeeStore();
 const route = useRoute();
 const useReceiptStore = useReceipt();
@@ -155,50 +161,7 @@ const selectedWorker = ref<
     }[];
   })[]
 >([]);
-const selectedWorkerItem = computed(() => {
-  return [
-    ...selectedWorker.value.map((e) => ({
-      foreignRefNo: e.employeePassport
-        ? e.employeePassport[0]?.number || '-'
-        : '-',
-      employeeName:
-        locale.value === Lang.English
-          ? `${e.firstNameEN} ${e.lastNameEN}`
-          : e.firstName
-            ? `${e.firstName} ${e.lastName}`
-            : `${e.firstNameEN} ${e.lastNameEN}`,
-      birthDate: dateFormatJS({ date: e.dateOfBirth }),
-      gender: e.gender,
-      age: calculateAge(e.dateOfBirth),
-      nationality: optionStore.mapOption(e.nationality),
-      documentExpireDate:
-        e.employeePassport !== undefined &&
-        e.employeePassport[0]?.expireDate !== undefined
-          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
-          : '-',
-      imgUrl: e.selectedImage
-        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
-        : '',
-      status: e.status,
-    })),
-
-    ...newWorkerList.value.map((v: any) => ({
-      foreignRefNo: v.passportNo,
-      employeeName:
-        locale.value === Lang.English
-          ? `${v.firstNameEN} ${v.lastNameEN}`
-          : `${v.firstName} ${v.lastName}`,
-      birthDate: dateFormatJS({ date: v.dateOfBirth }),
-      gender: v.gender,
-      age: calculateAge(v.dateOfBirth),
-      nationality: optionStore.mapOption(v.nationality),
-      documentExpireDate: '-',
-      imgUrl: '',
-      status: 'CREATED',
-    })),
-  ];
-});
-const workerList = ref<Employee[]>([]);
+const selectedWorkerItem = ref([]);
 const firstCodePayment = ref('');
 const selectedProductGroup = ref('');
 const selectedInstallmentNo = ref<number[]>([]);
@@ -214,17 +177,6 @@ const attachmentData = ref<
     url?: string;
   }[]
 >([]);
-const hideBtnApproveInvoice = computed(() => {
-  const role = getRole();
-  const allowedRoles = [
-    'system',
-    'head_of_admin',
-    'admin',
-    'head_of_accountant',
-    'accountant',
-  ];
-  return !role || !role.some((r) => allowedRoles.includes(r));
-});
 
 const getToolbarConfig = computed(() => {
   const toolbar = [['left', 'center', 'justify'], ['toggle'], ['clip']];
@@ -244,7 +196,7 @@ function getPrice(
 ) {
   if (filterHook) list = list.filter(filterHook);
 
-  return list.reduce(
+  const value = list.reduce(
     (a, c) => {
       if (
         selectedInstallmentNo.value.length > 0 &&
@@ -254,32 +206,25 @@ function getPrice(
         return a;
       }
 
-      const originalPrice = c.pricePerUnit;
-      const finalPriceWithVat = precisionRound(
-        originalPrice * (1 + (config.value?.vat || 0.07)),
-      );
-      const finalPriceNoVat =
-        finalPriceWithVat / (1 + (config.value?.vat || 0.07));
-
-      const price = finalPriceNoVat * c.amount;
-      const vat =
-        (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07);
-
       const calcVat =
         c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
+      const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
 
-      a.totalPrice = precisionRound(a.totalPrice + price);
-      a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
-      a.vat = calcVat ? precisionRound(a.vat + vat) : a.vat;
+      const pricePerUnit =
+        precisionRound(c.pricePerUnit * (1 + vatFactor)) / (1 + vatFactor);
+
+      const price =
+        (pricePerUnit * c.amount * (1 + vatFactor) - c.discount) /
+        (1 + vatFactor);
+      const vat = price * vatFactor;
+
+      a.totalPrice = precisionRound(a.totalPrice + price + c.discount);
+      a.totalDiscount = precisionRound(a.totalDiscount + c.discount);
+      a.vat = precisionRound(a.vat + vat);
       a.vatExcluded = calcVat
         ? a.vatExcluded
         : precisionRound(a.vatExcluded + price);
-      a.finalPrice = precisionRound(
-        a.totalPrice -
-          a.totalDiscount +
-          a.vat -
-          Number(quotationFormData.value.discount || 0),
-      );
+      a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
 
       return a;
     },
@@ -291,6 +236,8 @@ function getPrice(
       finalPrice: 0,
     },
   );
+
+  return value;
 }
 
 const summaryPrice = computed(() => getPrice(productServiceList.value));
@@ -569,7 +516,7 @@ async function convertDataToFormSubmit() {
     ),
   );
 
-  selectedWorker.value.forEach((v, i) => {
+  selectedWorkerItem.value.forEach((v, i) => {
     if (v.attachment !== undefined) {
       v.attachment.forEach((value) => {
         fileItemNewWorker.value.push({
@@ -586,7 +533,7 @@ async function convertDataToFormSubmit() {
 
   quotationFormData.value.worker = JSON.parse(
     JSON.stringify([
-      ...selectedWorker.value.map((v) => {
+      ...selectedWorkerItem.value.map((v) => {
         {
           return v.id;
         }
@@ -626,6 +573,7 @@ async function convertDataToFormSubmit() {
     discount: quotationFormData.value.discount,
     remark: quotationFormData.value.remark || '',
     agentPrice: agentPrice.value,
+    sellerId: quotationFormData.value.sellerId,
   };
 
   newWorkerList.value = [];
@@ -728,19 +676,13 @@ function handleUpdateProductTable(
   // handleChangePayType(quotationFormData.value.payCondition);
   // calc price
   const calc = (c: QuotationPayload['productServiceList'][number]) => {
-    const originalPrice = c.pricePerUnit || 0;
-    const finalPriceWithVat = precisionRound(
-      originalPrice * (1 + (config.value?.vat || 0.07)),
-    );
-    const finalPriceNoVat =
-      finalPriceWithVat / (1 + (config.value?.vat || 0.07));
-
-    const price = finalPriceNoVat * c.amount;
-    const vat = c.product.calcVat
-      ? (finalPriceNoVat * c.amount - (c.discount || 0)) *
-        (config.value?.vat || 0.07)
-      : 0;
-    return precisionRound(price + vat);
+    const calcVat =
+      c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
+    const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
+    const pricePerUnit =
+      precisionRound(c.pricePerUnit * (1 + vatFactor)) / (1 + vatFactor);
+    const price = pricePerUnit * c.amount * (1 + vatFactor) - c.discount;
+    return precisionRound(price);
   };
 
   // installment
@@ -793,21 +735,16 @@ function toggleDeleteProduct(index: number) {
 
   // cal curr amount
   if (currPaySplit && currTempPaySplit) {
-    const price = agentPrice.value
-      ? currProduct.product.agentPrice
-      : currProduct.product.price;
-    const pricePerUnit = currProduct.product.vatIncluded
-      ? price / (1 + (config.value?.vat || 0.07))
-      : price;
-    const vat =
-      (pricePerUnit * currProduct.amount - currProduct.discount) *
-      (config.value?.vat || 0.07);
-    const finalPrice =
-      pricePerUnit * currProduct.amount +
-      vat -
-      Number(currProduct.discount || 0);
+    const calcVat =
+      currProduct.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
+    const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
 
-    currTempPaySplit.amount = currPaySplit.amount - finalPrice;
+    const price = precisionRound(
+      currProduct.pricePerUnit * currProduct.amount * (1 + vatFactor) -
+        currProduct.discount,
+    );
+
+    currTempPaySplit.amount = currPaySplit.amount - price;
     currPaySplit.amount = currTempPaySplit.amount;
   }
 
@@ -829,7 +766,40 @@ function toggleDeleteProduct(index: number) {
 }
 
 async function assignWorkerToSelectedWorker() {
-  selectedWorker.value = quotationFormData.value.worker;
+  selectedWorkerItem.value = quotationFormData.value.worker.map((e) => {
+    return {
+      id: e.id,
+      foreignRefNo: e.employeePassport
+        ? e.employeePassport[0]?.number || '-'
+        : '-',
+      employeeName:
+        locale.value === Lang.English
+          ? `${e.firstNameEN} ${e.lastNameEN}`
+          : `${e.firstName || e.firstNameEN} ${e.lastName || e.lastNameEN}`,
+      birthDate: dateFormatJS({ date: e.dateOfBirth }),
+      gender: e.gender,
+      age: calculateAge(e.dateOfBirth),
+      nationality: optionStore.mapOption(e.nationality),
+      documentExpireDate:
+        e.employeePassport !== undefined &&
+        e.employeePassport[0]?.expireDate !== undefined
+          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
+          : '-',
+      imgUrl: e.selectedImage
+        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
+        : '',
+      employeePassport: e.employeePassport,
+      status: e.status,
+      workerNew: false,
+      lastNameEN: e.lastNameEN,
+      lastName: e.lastName,
+      middleNameEN: e.middleNameEN,
+      middleName: e.middleName,
+      firstNameEN: e.firstNameEN,
+      firstName: e.firstName,
+      namePrefix: e.namePrefix,
+    };
+  });
 }
 
 function convertToTable(nodes: Node[]) {
@@ -862,8 +832,7 @@ function convertToTable(nodes: Node[]) {
   tempTableProduct.value = JSON.parse(JSON.stringify(list));
 
   if (nodes.length > 0) {
-    quotationFormData.value.paySplit = Array.apply(
-      null,
+    quotationFormData.value.paySplit = Array.from(
       new Array(quotationFormData.value.paySplitCount),
     ).map((_, i) => ({
       no: i + 1,
@@ -889,21 +858,21 @@ function convertToTable(nodes: Node[]) {
 
 function convertEmployeeToTable(selected: Employee[]) {
   productServiceList.value.forEach((v) => {
-    if (selectedWorker.value.length === 0 && v.amount === 1) v.amount -= 1;
+    if (selectedWorkerItem.value.length === 0 && v.amount === 1) v.amount -= 1;
 
     v.amount = Math.max(
-      v.amount + selected.length - selectedWorker.value.length,
+      v.amount + selected.length - selectedWorkerItem.value.length,
       1,
     );
 
     const oldWorkerId: string[] = [];
     const newWorkerIndex: number[] = [];
 
-    selectedWorker.value.forEach((item, i) => {
+    selectedWorkerItem.value.forEach((item, i) => {
       if (v.workerIndex.includes(i)) oldWorkerId.push(item.id);
     });
     selected.forEach((item, i) => {
-      if (selectedWorker.value.find((n) => item.id === n.id)) return;
+      if (selectedWorkerItem.value.find((n) => item.id === n.id)) return;
       newWorkerIndex.push(i);
     });
 
@@ -916,7 +885,7 @@ function convertEmployeeToTable(selected: Employee[]) {
   pageState.employeeModal = false;
   quotationFormData.value.workerMax = Math.max(
     quotationFormData.value.workerMax || 1,
-    selectedWorker.value.length,
+    selectedWorkerItem.value.length,
   );
 }
 
@@ -989,6 +958,71 @@ function viewProductFile(data: ProductRelation) {
   pageState.imageDialogUrl = base64 ? base64[1] : '';
 }
 
+function combineWorker(newWorker: any, oldWorker: any) {
+  selectedWorkerItem.value = [
+    ...oldWorker.map((e) => ({
+      id: e.id,
+      foreignRefNo: e.employeePassport
+        ? e.employeePassport[0]?.number || '-'
+        : '-',
+      employeeName:
+        locale.value === Lang.English
+          ? `${e.firstNameEN} ${e.lastNameEN}`
+          : `${e.firstName || e.firstNameEN} ${e.lastName || e.lastNameEN}`,
+      birthDate: dateFormatJS({ date: e.dateOfBirth }),
+      gender: e.gender,
+      age: calculateAge(e.dateOfBirth),
+      nationality: optionStore.mapOption(e.nationality),
+      documentExpireDate:
+        e.employeePassport !== undefined &&
+        e.employeePassport[0]?.expireDate !== undefined
+          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
+          : '-',
+      imgUrl: e.selectedImage
+        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
+        : '',
+
+      employeePassport: e.employeePassport,
+      status: e.status,
+      workerNew: false,
+      lastNameEN: e.lastNameEN,
+      lastName: e.lastName,
+      middleNameEN: e.middleNameEN,
+      middleName: e.middleName,
+      firstNameEN: e.firstNameEN,
+      firstName: e.firstName,
+      namePrefix: e.namePrefix,
+    })),
+
+    ...newWorker.map((v: any) => ({
+      id: v.id,
+      foreignRefNo: v.passportNo || '-',
+      employeeName:
+        locale.value === Lang.English
+          ? `${v.firstNameEN} ${v.lastNameEN}`
+          : `${v.firstName || v.firstNameEN} ${v.lastName || v.lastNameEN}`,
+      birthDate: dateFormatJS({ date: v.dateOfBirth }),
+      gender: v.gender,
+      age: calculateAge(v.dateOfBirth),
+      nationality: optionStore.mapOption(v.nationality),
+      documentExpireDate: '-',
+      imgUrl: '',
+      status: 'CREATED',
+
+      lastNameEN: v.lastNameEN,
+      lastName: v.lastName,
+      middleNameEN: v.middleNameEN,
+      middleName: v.middleName,
+      firstNameEN: v.firstNameEN,
+      firstName: v.firstName,
+      namePrefix: v.namePrefix,
+
+      dateOfBirth: v.dateOfBirth,
+      workerNew: true,
+    })),
+  ];
+}
+
 const sessionData = ref<Record<string, any>>();
 
 onMounted(async () => {
@@ -1025,6 +1059,7 @@ onMounted(async () => {
     quotationFormData.value.customerBranchId = parsed.customerBranchId;
     currentQuotationId.value = parsed.quotationId;
     agentPrice.value = parsed.agentPrice;
+    quotationFormData.value.sellerId = getUserId();
     await fetchQuotation();
     await assignWorkerToSelectedWorker();
     sessionData.value = parsed;
@@ -1059,12 +1094,7 @@ watch(
   () => quotationFormData.value.customerBranchId,
   async (v) => {
     if (!v) return;
-
-    const retEmp = await customerStore.fetchBranchEmployee(v, {
-      passport: true,
-    });
-
-    if (retEmp) workerList.value = retEmp.data.result;
+    selectedWorkerItem.value = [];
   },
 );
 
@@ -1080,6 +1110,15 @@ watch(
 
 const productServiceNodes = ref<ProductTree>([]);
 
+watch(customerBranchOption, () => {
+  if (!customerBranchOption.value) return;
+
+  quotationFormData.value.contactName =
+    customerBranchOption.value.contactName || '';
+  quotationFormData.value.contactTel =
+    customerBranchOption.value.contactTel || '';
+});
+
 watch(
   () => productServiceList.value,
   () => {
@@ -1087,6 +1126,13 @@ watch(
   },
 );
 
+watch(customerBranchOption, () => {
+  if (!customerBranchOption.value) return;
+
+  quotationFormData.value.contactName = customerBranchOption.value.contactName;
+  quotationFormData.value.contactTel = customerBranchOption.value.contactTel;
+});
+
 // async function searchEmployee(text: string) {
 //   let query: string | undefined = text;
 //   let pageSize = 50;
@@ -1108,7 +1154,19 @@ watch(
 // }
 
 function storeDataLocal() {
-  quotationFormData.value.productServiceList = productService.value;
+  const tempProductService = productService.value.map((v) => {
+    return {
+      ...v,
+      vat: v.product[agentPrice ? 'agentPriceCalcVat' : 'calcVat']
+        ? precisionRound(
+            ((v.pricePerUnit * (1 + (config?.value.vat || 0.07)) * v.amount -
+              v.discount) /
+              (1 + (config?.value.vat || 0.07))) *
+              0.07,
+          )
+        : 0,
+    };
+  });
 
   localStorage.setItem(
     'quotation-preview',
@@ -1117,7 +1175,7 @@ function storeDataLocal() {
         codeInvoice: code.value,
         codePayment: firstCodePayment.value,
         ...quotationFormData.value,
-        productServiceList: productService.value,
+        productServiceList: tempProductService,
       },
       meta: {
         source: {
@@ -1137,7 +1195,7 @@ function storeDataLocal() {
           workName: quotationFormData.value.workName,
           dueDate: quotationFormData.value.dueDate,
         },
-        selectedWorker: selectedWorker.value,
+        selectedWorker: selectedWorkerItem.value,
         createdBy: quotationFormState.value.createdBy('tha'),
         agentPrice: agentPrice.value,
       },
@@ -1222,10 +1280,10 @@ async function getWorkerFromCriteria(
   if (!ret) return false; // error, do not close dialog
 
   const deduplicate = ret.result.filter(
-    (a) => !selectedWorker.value.find((b) => a.id === b.id),
+    (a) => !selectedWorkerItem.value.find((b) => a.id === b.id),
   );
 
-  convertEmployeeToTable([...deduplicate, ...selectedWorker.value]);
+  convertEmployeeToTable([...deduplicate, ...selectedWorkerItem.value]);
 
   return true;
 }
@@ -1515,11 +1573,13 @@ function covertToNode() {
                   :quotation-status="
                     quotationFormState.source?.quotationStatus === 'Expired'
                   "
+                  :created-at="quotationFormState.createdAt"
                   v-model:urgent="quotationFormData.urgent"
                   v-model:work-name="quotationFormData.workName"
                   v-model:contactor="quotationFormData.contactName"
                   v-model:telephone="quotationFormData.contactTel"
                   v-model:due-date="quotationFormData.dueDate"
+                  v-model:seller-id="quotationFormData.sellerId"
                 >
                   <template #issue-info>
                     <FormAbout
@@ -1530,6 +1590,7 @@ function covertToNode() {
                       v-model:customer-branch-id="
                         quotationFormData.customerBranchId
                       "
+                      v-model:customer-branch-option="customerBranchOption"
                       :readonly="readonly"
                     />
                   </template>
@@ -1574,7 +1635,7 @@ function covertToNode() {
                       }}
                     </template>
                   </div>
-                  <nav class="q-ml-auto">
+                  <nav v-if="canAccess('quotation', 'edit')" class="q-ml-auto">
                     <AddButton
                       id="btn-add-worker"
                       for="btn-add-worker"
@@ -1612,15 +1673,15 @@ function covertToNode() {
                     (v) =>
                       (quotationFormData.workerMax = Math.max(
                         v,
-                        selectedWorker.length,
+                        selectedWorkerItem.length,
                       ))
                   "
                   :employee-amount="
-                    quotationFormData.workerMax || selectedWorker.length
+                    quotationFormData.workerMax || selectedWorkerItem.length
                   "
                   :readonly="readonly"
                   :rows="selectedWorkerItem"
-                  @delete="(i) => deleteItem(selectedWorker, i)"
+                  @delete="(i) => deleteItem(selectedWorkerItem, i)"
                 />
               </div>
             </q-expansion-item>
@@ -1751,7 +1812,9 @@ function covertToNode() {
                   :readonly="
                     {
                       quotation: quotationFormState.mode !== 'edit',
-                      invoice: false,
+                      invoice:
+                        isRoleInclude(['sale', 'head_of_sale']) ||
+                        !canAccess('quotation', 'edit'),
                       accepted: true,
                     }[view]
                   "
@@ -1862,10 +1925,10 @@ function covertToNode() {
                             installments: quotationFormData.paySplit,
                           },
                           'quotation-labor': {
-                            name: selectedWorker.map(
+                            name: selectedWorkerItem.map(
                               (v, i) =>
                                 `${i + 1}. ` +
-                                `${v.employeePassport.length !== 0 ? v.employeePassport[0].number + '_' : ''}  ${v.namePrefix}.${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
+                                `${v.employeePassport.length !== 0 ? v.employeePassport[0].number + '_' : ''}${v.namePrefix}.${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
                             ),
                           },
                         })
@@ -1955,6 +2018,11 @@ function covertToNode() {
                 view !== View.Receipt &&
                 view !== View.Complete
               "
+              :branch-id="quotationFull.registeredBranchId"
+              :readonly="
+                isRoleInclude(['sale', 'head_of_sale']) ||
+                !canAccess('quotation', 'edit')
+              "
               :data="quotationFormState.source"
               v-model:first-code-payment="firstCodePayment"
               @fetch-status="
@@ -2093,7 +2161,14 @@ function covertToNode() {
                           :style="`background-color:hsla(var(--info-bg) / 0.07)`"
                         >
                           <q-th auto-width>
-                            <q-checkbox v-model="props.selected" />
+                            <q-checkbox
+                              v-if="
+                                !quotationFormData.paySplit.every(
+                                  (p) => p.invoiceId,
+                                )
+                              "
+                              v-model="props.selected"
+                            />
                           </q-th>
                           <q-th
                             v-for="col in props.cols"
@@ -2123,8 +2198,6 @@ function covertToNode() {
 
                                 installmentAmount = props.row.amount;
                                 view = View.Invoice;
-
-                                console.log(code);
                               }
                             }
                           "
@@ -2286,6 +2359,7 @@ function covertToNode() {
           class="q-ml-sm"
           v-if="
             view === View.Accepted &&
+            canAccess('quotation', 'edit') &&
             quotationFormData.quotationStatus === 'Issued'
           "
         >
@@ -2304,9 +2378,15 @@ function covertToNode() {
           </MainButton>
         </div>
 
-        <template v-if="view === View.InvoicePre">
+        <template
+          v-if="
+            view === View.InvoicePre &&
+            !quotationFormData.paySplit.every((p) => p.invoiceId)
+          "
+        >
           <MainButton
             solid
+            :disabled="selectedInstallment.length === 0"
             icon="mdi-account-multiple-check-outline"
             class="q-ml-sm"
             color="207 96% 32%"
@@ -2325,6 +2405,7 @@ function covertToNode() {
           class="q-ml-sm"
           v-if="
             view === View.Invoice &&
+            canAccess('quotation', 'edit') &&
             ((quotationFormData.quotationStatus !== 'PaymentPending' &&
               quotationFormData.payCondition !== 'Full') ||
               quotationFormData.quotationStatus === 'Accepted') &&
@@ -2332,7 +2413,6 @@ function covertToNode() {
           "
         >
           <MainButton
-            v-if="!hideBtnApproveInvoice"
             solid
             icon="mdi-account-multiple-check-outline"
             color="207 96% 32%"
@@ -2352,6 +2432,7 @@ function covertToNode() {
           style="gap: var(--size-2)"
           v-if="
             (view === View.Quotation &&
+              canAccess('quotation', 'edit') &&
               (quotationFormData.quotationStatus === 'Issued' ||
                 quotationFormData.quotationStatus === 'Expired')) ||
             !quotationFormData.quotationStatus
@@ -2388,13 +2469,12 @@ function covertToNode() {
     <!-- add employee quotation -->
 
     <QuotationFormWorkerSelect
-      :preselect-worker="selectedWorker"
+      :preselect-worker="selectedWorkerItem"
       :customerBranchId="quotationFormData.customerBranchId"
       v-model:open="pageState.employeeModal"
-      v-model:new-worker-list="newWorkerList"
       @success="
         (v) => {
-          selectedWorker = v.worker;
+          combineWorker(v.newWorker, v.worker);
         }
       "
     />
@@ -2437,7 +2517,7 @@ function covertToNode() {
   <!-- add Worker -->
   <QuotationFormWorkerAddDialog
     v-if="quotationFormState.source"
-    :disabled-worker-id="selectedWorker.map((v) => v.id)"
+    :disabled-worker-id="selectedWorkerItem.map((v) => v.id)"
     :product-service-list="quotationFormState.source.productServiceList"
     :quotation-id="quotationFormState.source.id"
     :customer-branch-id="quotationFormState.source.customerBranchId"
@@ -2531,8 +2611,8 @@ function covertToNode() {
 }
 
 :deep(
-    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-  ) {
+  i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+) {
   color: var(--brand-1);
 }
 
@@ -2549,9 +2629,9 @@ function covertToNode() {
 }
 
 :deep(
-    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
-      .q-focus-helper
-  ) {
+  .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
+    .q-focus-helper
+) {
   visibility: hidden;
 }
 
diff --git a/src/pages/05_quotation/QuotationFormInfo.vue b/src/pages/05_quotation/QuotationFormInfo.vue
index cc7731e5..18129883 100644
--- a/src/pages/05_quotation/QuotationFormInfo.vue
+++ b/src/pages/05_quotation/QuotationFormInfo.vue
@@ -234,14 +234,14 @@ watch(
           <section class="row q-col-gutter-sm col-12 items-center">
             <SelectInput
               class="col-md-6 col-12"
+              id="select-pay-type"
               :label="$t('quotation.payType')"
               :option="
                 taskOrder
                   ? payTypeOption.filter((v) => v.value === 'Full')
                   : payTypeOption
               "
-              :readonly
-              id="pay-type"
+              :readonly="readonly || debitNote"
               :model-value="payType"
               @update:model-value="
                 (v) => {
@@ -275,6 +275,7 @@ watch(
                 </div>
                 <q-input
                   v-model="paySplitCount"
+                  id="input-pay-split-count"
                   :readonly="readonly || payType === 'Split'"
                   class="col-3"
                   type="number"
@@ -311,6 +312,7 @@ watch(
                 <q-input
                   :readonly="readonly"
                   :label="$t('general.name')"
+                  :id="`input-period-name-${i}`"
                   v-if="payType === 'SplitCustom'"
                   v-model="period.name"
                   class="col q-mx-sm"
@@ -320,6 +322,7 @@ watch(
                 <q-input
                   :readonly="readonly || payType === 'Split'"
                   class="col q-mx-sm"
+                  :id="`input-period-amount-${i}`"
                   :label="$t('quotation.amount')"
                   :model-value="
                     amount4Show[i] || commaInput(period.amount.toString())
@@ -377,6 +380,7 @@ watch(
 
           <DatePicker
             v-if="payType === 'BillFull'"
+            id="datepicker-bill-date"
             :readonly
             class="col-12"
             :label="$t('quotation.callDueDate')"
@@ -446,7 +450,9 @@ watch(
           <span class="q-ml-auto">
             {{
               formatNumberDecimal(
-                summaryPrice.totalPrice - summaryPrice.totalDiscount,
+                summaryPrice.totalPrice -
+                  summaryPrice.totalDiscount -
+                  summaryPrice.vatExcluded,
                 2,
               )
             }}
@@ -482,7 +488,11 @@ watch(
       <div class="q-pa-sm row surface-2 items-center text-weight-bold">
         {{ $t('quotation.totalPriceBaht') }}
 
-        <span class="q-ml-auto" style="color: var(--brand-1)">
+        <span
+          class="q-ml-auto"
+          style="color: var(--brand-1)"
+          id="value-final-price"
+        >
           {{
             payType === 'SplitCustom' && view === View.Invoice
               ? formatNumberDecimal(Math.max(installmentAmount || 0, 0), 2) || 0
diff --git a/src/pages/05_quotation/QuotationFormMetadata.vue b/src/pages/05_quotation/QuotationFormMetadata.vue
index 071bc84b..161b0420 100644
--- a/src/pages/05_quotation/QuotationFormMetadata.vue
+++ b/src/pages/05_quotation/QuotationFormMetadata.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import DatePicker from 'src/components/shared/DatePicker.vue';
+import SelectUser from 'src/components/shared/select/SelectUser.vue';
 
 defineProps<{
   readonly: boolean;
@@ -13,6 +14,7 @@ const contactor = defineModel<string>('contactor', { required: true });
 const telephone = defineModel<string>('telephone', { required: true });
 const dueDate = defineModel<Date | string>('dueDate', { required: true });
 const createdAt = defineModel<Date | string>('createdAt');
+const sellerId = defineModel<string>('sellerId', { required: true });
 </script>
 
 <template>
@@ -95,5 +97,11 @@ const createdAt = defineModel<Date | string>('createdAt');
       dense
       outlined
     />
+    <SelectUser
+      :label="$t('preview.seller')"
+      v-model:value="sellerId"
+      :readonly
+      class="col-12 col-md-2"
+    />
   </div>
 </template>
diff --git a/src/pages/05_quotation/QuotationFormProductSelect.vue b/src/pages/05_quotation/QuotationFormProductSelect.vue
index eb6ffef8..b2e92761 100644
--- a/src/pages/05_quotation/QuotationFormProductSelect.vue
+++ b/src/pages/05_quotation/QuotationFormProductSelect.vue
@@ -51,6 +51,8 @@ const emit = defineEmits<{
 const selectedProductGroup = defineModel<string>('selectedProductGroup', {
   default: '',
 });
+
+const selectedProductGroupOption = ref<ProductGroup | undefined>();
 const model = defineModel<boolean>();
 const inputSearch = defineModel<string>('inputSearch');
 const productGroup = defineModel<ProductGroup[]>('productGroup', {
@@ -66,21 +68,21 @@ const serviceList = defineModel<Partial<Record<ProductGroupId, Service[]>>>(
 );
 
 const priceDisplay = computed(() => ({
-  price: !isRoleInclude(['sale_agent']),
+  // price: !isRoleInclude(['sale_agent']),
+  price: true,
   agentPrice: isRoleInclude([
-    'admin',
-    'head_of_admin',
-    'head_of_sale',
     'system',
-    'owner',
+    'head_of_admin',
+    'admin',
+    'executive',
     'accountant',
-    'sale_agent',
+    'head_of_sale',
   ]),
   serviceCharge: isRoleInclude([
-    'admin',
-    'head_of_admin',
     'system',
-    'owner',
+    'head_of_admin',
+    'admin',
+    'executive',
     'accountant',
   ]),
 }));
@@ -569,14 +571,18 @@ watch(
                             {{
                               productGroup.find(
                                 (g) => g.id === selectedProductGroup,
-                              )?.name || '-'
+                              )?.name ||
+                              selectedProductGroupOption?.name ||
+                              '-'
                             }}
                           </span>
                           <span class="text-caption app-text-muted">
                             {{
                               productGroup.find(
                                 (g) => g.id === selectedProductGroup,
-                              )?.code || '-'
+                              )?.code ||
+                              selectedProductGroupOption?.code ||
+                              '-'
                             }}
                           </span>
                         </div>
@@ -862,13 +868,13 @@ watch(
               <span class="q-pr-sm">
                 {{ $t('productService.group.title') }}
               </span>
-
               <SelectProductGroup
                 class="col-md-4 col-12"
                 :class="{ 'q-mb-sm': $q.screen.lt.md }"
                 id="product-group-select"
                 clearable
                 v-model:value="selectedProductGroup"
+                v-model:value-option="selectedProductGroupOption"
                 :placeholder="
                   !selectedProductGroup
                     ? $t('general.select', {
diff --git a/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue b/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
index 89904bbf..64a7fbbf 100644
--- a/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerAddDialog.vue
@@ -341,12 +341,13 @@ watch(() => state.search, getWorkerList);
               >
                 <div
                   style="display: inline-block; margin-inline: auto"
-                  v-if="workerList.length === 0"
+                  v-if="workerList.length === 0 && state.search"
                 >
                   <NoData :not-found="!!state.search" />
                 </div>
 
                 <TableWorker
+                  v-else
                   v-model:selected="workerSelected"
                   :rows="workerList"
                   :disabledWorkerId
diff --git a/src/pages/05_quotation/QuotationFormWorkerSelect.vue b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
index edee9f41..3f4f3a47 100644
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
@@ -21,6 +21,7 @@ import useOcrStore from 'stores/ocr';
 
 // NOTE: Import Components
 import {
+  AddButton,
   SaveButton,
   EditButton,
   UndoButton,
@@ -53,6 +54,9 @@ import { SideMenu } from 'src/components';
 import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
 import { AddressForm } from 'src/components/form';
 import ExpirationDate from 'src/components/03_customer-management/ExpirationDate.vue';
+import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
+import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
+import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
@@ -109,7 +113,7 @@ const props = withDefaults(
   defineProps<{
     customerBranchId?: string;
     disabledWorkerId?: string[];
-    preselectWorker?: Employee[];
+    preselectWorker?: (Employee & { workerNew: boolean })[];
   }>(),
   {},
 );
@@ -129,7 +133,7 @@ const optionStore = useOptionStore();
 const employeeStore = useEmployeeStore();
 
 const open = defineModel<boolean>('open', { default: false });
-const newWorkerList = defineModel<
+const newWorkerList = ref<
   (EmployeeWorker & {
     attachment?: {
       name?: string;
@@ -139,7 +143,7 @@ const newWorkerList = defineModel<
       _meta?: Record<string, any>;
     }[];
   })[]
->('newWorkerList', { default: [] });
+>([]);
 const workerSelected = ref<Employee[]>([]);
 const workerList = ref<Employee[]>([]);
 const importWorkerCriteria = ref<{
@@ -204,7 +208,13 @@ function getEmployeeImageUrl(item: Employee) {
 
 function init() {
   if (props.preselectWorker) {
-    workerSelected.value = JSON.parse(JSON.stringify(props.preselectWorker));
+    workerSelected.value = JSON.parse(
+      JSON.stringify(props.preselectWorker.filter((v) => !v.workerNew)),
+    );
+
+    newWorkerList.value = JSON.parse(
+      JSON.stringify(props.preselectWorker.filter((v) => v.workerNew)),
+    );
   }
   getWorkerList();
 }
@@ -604,11 +614,14 @@ watch(
           solid
           id="btn-success"
           @click="
-            emits('success', {
-              worker: workerSelected,
-              newWorker: newWorkerList,
-            }),
-              (open = false)
+            () => {
+              $emit('success', {
+                worker: workerSelected,
+                newWorker: newWorkerList,
+              });
+
+              open = false;
+            }
           "
         >
           {{ $t('general.select', { msg: $t('quotation.employeeList') }) }}
@@ -630,9 +643,11 @@ watch(
         if (employeeFormState.currentTab === 'personalInfo') {
           const currentEmployeeId =
             await employeeFormStore.submitPersonal(onCreateImageList);
-          quotationForm.injectNewEmployee({
-            data: { ...currentFromDataEmployee, id: currentEmployeeId },
-          });
+          newWorkerList.push(
+            quotationForm.injectNewEmployee({
+              data: { ...currentFromDataEmployee, id: currentEmployeeId },
+            }),
+          );
           employeeFormState.isEmployeeEdit = false;
           employeeFormState.dialogType = 'info';
         }
@@ -663,6 +678,7 @@ watch(
     :show="
       () => {
         employeeFormStore.resetFormDataEmployee(true);
+        setCurrentBranchId();
       }
     "
     :before-close="
@@ -1035,6 +1051,7 @@ watch(
             </div>
 
             <BasicInformation
+              disable-customer-select
               no-action
               id="form-information"
               prefix-id="form-employee"
@@ -1455,6 +1472,7 @@ watch(
                     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'" />
@@ -1681,6 +1699,7 @@ watch(
                 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') }} :
@@ -1991,8 +2010,8 @@ watch(
 }
 
 :deep(
-    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-  ) {
+  i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+) {
   color: var(--brand-1);
 }
 
@@ -2009,9 +2028,9 @@ watch(
 }
 
 :deep(
-    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
-      .q-focus-helper
-  ) {
+  .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
+    .q-focus-helper
+) {
   visibility: hidden;
 }
 
diff --git a/src/pages/05_quotation/form.ts b/src/pages/05_quotation/form.ts
index 45801a5a..5b16785a 100644
--- a/src/pages/05_quotation/form.ts
+++ b/src/pages/05_quotation/form.ts
@@ -8,6 +8,7 @@ import {
   QuotationPayload,
   QuotationFull,
   EmployeeWorker,
+  PayCondition,
 } from 'src/stores/quotations/types';
 import { Employee } from 'src/stores/employee/types';
 
@@ -29,7 +30,7 @@ export const DEFAULT_DATA: QuotationPayload = {
   payBillDate: new Date(),
   paySplit: [],
   paySplitCount: 0,
-  payCondition: 'Full',
+  payCondition: PayCondition.Full,
   dueDate: new Date(Date.now() + 86400000),
   discount: 0,
   contactTel: '',
@@ -40,6 +41,7 @@ export const DEFAULT_DATA: QuotationPayload = {
   status: 'CREATED',
   remark: '#[quotation-labor]<br/><br/>#[quotation-payment]',
   agentPrice: false,
+  sellerId: '',
 };
 
 const DEFAULT_DATA_INVOICE: InvoicePayload = {
@@ -67,6 +69,7 @@ export const useQuotationForm = defineStore('form-quotation', () => {
         file?: File;
         _meta?: Record<string, any>;
       }[];
+      workerNew: boolean;
     })[]
   >([]);
 
@@ -218,7 +221,7 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     },
     callback?: () => void,
   ) {
-    newWorkerList.value.push({
+    const temp = {
       //passportNo: obj.data.passportNo,
       //documentExpireDate: obj.data.documentExpireDate,
       id: obj.data.id,
@@ -233,9 +236,12 @@ export const useQuotationForm = defineStore('form-quotation', () => {
       gender: obj.data.gender,
       dateOfBirth: obj.data.dateOfBirth,
       attachment: obj.data.attachment,
-    });
+      workerNew: true,
+    };
 
     callback?.();
+
+    return temp;
   }
 
   function dialogDelete(callback: () => void) {
diff --git a/src/pages/05_quotation/preview/ViewForm.vue b/src/pages/05_quotation/preview/ViewForm.vue
index 9977a6c7..3a7fd081 100644
--- a/src/pages/05_quotation/preview/ViewForm.vue
+++ b/src/pages/05_quotation/preview/ViewForm.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia';
-import { onMounted, nextTick, ref, watch } from 'vue';
+import { onMounted, nextTick, ref, watch, toRaw } from 'vue';
 import { precisionRound } from 'src/utils/arithmetic';
 import { useI18n } from 'vue-i18n';
 import ThaiBahtText from 'thai-baht-text';
@@ -175,6 +175,8 @@ enum View {
 const view = ref<View>(View.Quotation);
 
 onMounted(async () => {
+  await configStore.getConfig();
+
   const currentDocumentType = new URL(window.location.href).searchParams.get(
     'type',
   );
@@ -259,18 +261,6 @@ onMounted(async () => {
     productList.value =
       (data?.value?.productServiceList ?? data.value?.productServiceList).map(
         (v) => {
-          const originalPrice = v.pricePerUnit;
-          const finalPriceWithVat = precisionRound(
-            originalPrice * (1 + (config.value?.vat || 0.07)),
-          );
-          const finalPriceNoVat =
-            finalPriceWithVat / (1 + (config.value?.vat || 0.07));
-
-          const price = finalPriceNoVat * v.amount - v.discount;
-          const vat =
-            (finalPriceNoVat * v.amount - v.discount) *
-            (config.value?.vat || 0.07);
-
           return {
             id: v.product.id,
             code: v.product.code,
@@ -279,8 +269,8 @@ onMounted(async () => {
             pricePerUnit: v.pricePerUnit || 0,
             discount: v.discount || 0,
             vat: v.vat || 0,
-            value: precisionRound(price + (v.product.calcVat ? vat : 0)),
-            calcVat: v.product.calcVat,
+            value: 0,
+            calcVat: v.vat > 0,
             product: v.product,
           };
         },
@@ -292,23 +282,17 @@ onMounted(async () => {
     []
   ).reduce(
     (a, c) => {
-      const originalPrice = c.pricePerUnit;
-      const finalPriceWithVat = precisionRound(
-        originalPrice * (1 + (config.value?.vat || 0.07)),
-      );
-      const finalPriceNoVat =
-        finalPriceWithVat / (1 + (config.value?.vat || 0.07));
+      const calcVat = c.vat > 0;
+      const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
+      const pricePerUnit =
+        precisionRound(c.pricePerUnit * (1 + vatFactor)) / (1 + vatFactor);
+      const price =
+        (pricePerUnit * c.amount * (1 + vatFactor) - c.discount) /
+        (1 + vatFactor);
 
-      const price = finalPriceNoVat * c.amount;
-      const vat =
-        (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07);
-
-      const calcVat =
-        c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
-
-      a.totalPrice = precisionRound(a.totalPrice + price);
+      a.totalPrice = precisionRound(a.totalPrice + price + c.discount);
       a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
-      a.vat = calcVat ? precisionRound(a.vat + vat) : a.vat;
+      a.vat = calcVat ? precisionRound(a.vat + c.vat) : a.vat;
       a.vatExcluded = calcVat
         ? a.vatExcluded
         : precisionRound(a.vatExcluded + price);
@@ -334,16 +318,12 @@ onMounted(async () => {
 
 function calcPrice(c: Product) {
   const originalPrice = c.pricePerUnit;
-  const finalPriceWithVat = precisionRound(
-    originalPrice + originalPrice * (config.value?.vat || 0.07),
+  const finalPricePerUnit = precisionRound(
+    originalPrice +
+      (c.calcVat ? originalPrice * (config.value?.vat || 0.07) : 0),
   );
-  const finalPriceNoVat = finalPriceWithVat / (1 + (config.value?.vat || 0.07));
-
-  const price = finalPriceNoVat * c.amount - c.discount;
-  const vat = c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat']
-    ? (finalPriceNoVat * c.amount - c.discount) * (config.value?.vat || 0.07)
-    : 0;
-  return precisionRound(price + vat);
+  const price = finalPricePerUnit * c.amount - c.discount;
+  return precisionRound(price);
 }
 
 async function closeTab() {
@@ -427,31 +407,15 @@ function print() {
             <td>{{ v.detail }}</td>
             <td style="text-align: right">{{ v.amount }}</td>
             <td style="text-align: right">
-              {{
-                formatNumberDecimal(
-                  v.pricePerUnit +
-                    (v.product[agentPrice ? 'agentPriceCalcVat' : 'calcVat']
-                      ? v.pricePerUnit * (config?.vat || 0.07)
-                      : 0),
-                  2,
-                )
-              }}
+              {{ formatNumberDecimal(v.pricePerUnit, 2) }}
             </td>
             <td style="text-align: right">
-              {{ formatNumberDecimal(v.discount, 2) }}
+              <template v-if="v.discount !== 0">
+                {{ formatNumberDecimal(v.discount, 2) }} ฿
+              </template>
             </td>
             <td style="text-align: right">
-              {{
-                formatNumberDecimal(
-                  v.product[agentPrice ? 'agentPriceCalcVat' : 'calcVat']
-                    ? precisionRound(
-                        (v.pricePerUnit * v.amount - v.discount) *
-                          (config?.vat || 0.07),
-                      )
-                    : 0,
-                  2,
-                )
-              }}
+              {{ Math.round((v.vat > 0 ? config?.vat || 0.07 : 0) * 100) }}%
             </td>
             <td style="text-align: right">
               {{ formatNumberDecimal(calcPrice(v), 2) }}
@@ -511,7 +475,9 @@ function print() {
             <td class="text-right">
               {{
                 formatNumberDecimal(
-                  summaryPrice.totalPrice - summaryPrice.totalDiscount,
+                  summaryPrice.totalPrice -
+                    summaryPrice.totalDiscount -
+                    summaryPrice.vatExcluded,
                   2,
                 )
               }}
@@ -600,7 +566,7 @@ function print() {
                   details?.worker.map(
                     (v, i) =>
                       `${i + 1}. ` +
-                      `${v.namePrefix}. ${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
+                      `${v.employeePassport.length !== 0 ? v.employeePassport[0].number + '_' : ''}${v.namePrefix}. ${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
                   ) || [],
               },
             }) || '-'
diff --git a/src/pages/05_quotation/preview/ViewHeader.vue b/src/pages/05_quotation/preview/ViewHeader.vue
index 932bef75..78f66511 100644
--- a/src/pages/05_quotation/preview/ViewHeader.vue
+++ b/src/pages/05_quotation/preview/ViewHeader.vue
@@ -3,6 +3,7 @@ import { dateFormat } from 'src/utils/datetime';
 
 // NOTE: Import stores
 import { formatAddress } from 'src/utils/address';
+import { getCustomerName } from 'src/stores/utils';
 
 // NOTE  Import Types
 import { Branch } from 'src/stores/branch/types';
@@ -78,12 +79,15 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
-        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
+        <span>{{ $t('branch.form.taxNo') }} {{ branch.taxNo }}</span>
+        <span>{{ $t('taskOrder.telephone') }} {{ branch.telephoneNo }}</span>
         <span>{{ branch.webUrl }}</span>
       </article>
       <article>
         <b>{{ $t('quotation.customer') }}</b>
+        <div>
+          {{ getCustomerName(customer, { noCode: true, locale: 'tha' }) }}
+        </div>
         <span>
           {{
             formatAddress({
@@ -101,8 +105,18 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
-        <span>เบอร์โทร {{ customer.telephoneNo }}</span>
+        <span>
+          {{
+            customer.customer.customerType === 'CORP'
+              ? `${$t('customer.form.legalPersonNo')} `
+              : `${$t('customer.form.taxpayyerNo')} `
+          }}{{
+            customer.customer.customerType === 'CORP'
+              ? customer.codeCustomer
+              : customer.citizenId
+          }}
+        </span>
+        <span>{{ $t('taskOrder.telephone') }} {{ customer.telephoneNo }}</span>
       </article>
     </section>
     <section class="detail-quotation-info">
diff --git a/src/pages/07_agencies-management/AgenciesDialog.vue b/src/pages/07_agencies-management/AgenciesDialog.vue
index c71cb3e9..cda5b733 100644
--- a/src/pages/07_agencies-management/AgenciesDialog.vue
+++ b/src/pages/07_agencies-management/AgenciesDialog.vue
@@ -21,6 +21,7 @@ import {
 import AddressForm from 'src/components/form/AddressForm.vue';
 import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
 import { BankBook } from 'src/stores/branch/types';
+import QrCodeUploadDialog from 'src/components/QrCodeUploadDialog.vue';
 
 const institutionStore = useInstitution();
 
@@ -33,6 +34,10 @@ const imageListOnCreate = defineModel<{
   selectedImage: string;
   list: { url: string; imgFile: File | null; name: string }[];
 }>('imageListOnCreate', { default: { selectedImage: '', list: [] } });
+const deletesStatusQrCodeBankImag = defineModel<number[]>(
+  'deletesStatusQrCodeBankImag',
+  { default: [] },
+);
 
 const imageState = reactive({
   imageDialog: false,
@@ -45,10 +50,20 @@ const imageState = reactive({
 const imageFile = ref<File | null>(null);
 const imageList = ref<{ selectedImage: string; list: string[] }>();
 
+const qrCodeDialog = ref(false);
+const qrCodeImageUrl = ref<string>('');
+const currentIndexQrCodeBank = ref<number>(-1);
+const statusQrCodeFile = ref<File | undefined>(undefined);
+const refQrCodeUpload = ref();
+const statusQrCodeUrl = ref<string>('');
+const statusDeletesQrCode = ref<boolean>(false);
+
 const props = withDefaults(
   defineProps<{
     readonly?: boolean;
     isEdit?: boolean;
+    hideAction?: boolean;
+    hideDelete?: boolean;
 
     dataId?: string;
   }>(),
@@ -67,6 +82,7 @@ const emit = defineEmits<{
   (e: 'addImage'): void;
   (e: 'removeImage'): void;
   (e: 'submitImage', name: string): void;
+  (e: 'deleteAttachment', name: string): void;
 }>();
 
 const data = defineModel<InstitutionPayload>('data', {
@@ -106,6 +122,9 @@ const formBankBook = defineModel<BankBook[]>('formBankBook', {
     },
   ],
 });
+const attachment = defineModel<File[]>('attachment');
+const attachmentList =
+  defineModel<{ name: string; url: string }[]>('attachmentList');
 
 function viewImage() {
   imageState.imageDialog = true;
@@ -163,6 +182,35 @@ function clearImageState() {
   imageState.refreshImageState = false;
 }
 
+function triggerEditQrCodeBank(opts?: { save?: boolean }) {
+  if (opts?.save === undefined) {
+    qrCodeDialog.value = true;
+    statusDeletesQrCode.value = false;
+    statusQrCodeUrl.value =
+      formBankBook.value[currentIndexQrCodeBank.value].bankUrl || '';
+    statusDeletesQrCode.value = false;
+  } else {
+    formBankBook.value[currentIndexQrCodeBank.value].bankUrl =
+      statusQrCodeUrl.value;
+
+    formBankBook.value[currentIndexQrCodeBank.value].bankQr =
+      statusQrCodeFile.value;
+
+    if (statusDeletesQrCode.value === true) {
+      deletesStatusQrCodeBankImag.value.push(currentIndexQrCodeBank.value);
+    }
+    if (statusDeletesQrCode.value === false) {
+      deletesStatusQrCodeBankImag.value =
+        deletesStatusQrCodeBankImag.value.filter(
+          (item) => item !== currentIndexQrCodeBank.value,
+        );
+    }
+
+    currentIndexQrCodeBank.value = -1;
+    statusDeletesQrCode.value = false;
+  }
+}
+
 watch(
   () => imageFile.value,
   () => {
@@ -177,7 +225,6 @@ watch(
     imageList.value
       ? (imageList.value.selectedImage = data.value.selectedImage || '')
       : '';
-    console.log(imageState.imageUrl);
     imageState.refreshImageState = false;
   },
 );
@@ -305,6 +352,7 @@ watch(
           v-model:contact-name="data.contactName"
           v-model:email="data.contactEmail"
           v-model:contact-tel="data.contactTel"
+          v-model:attachment="attachment"
         />
         <AddressForm
           id="agencies-form-address-info"
@@ -327,8 +375,19 @@ watch(
           title="agencies.bankInfo"
           class="q-pt-xl"
           dense
-          single
           v-model:bank-book-list="formBankBook"
+          @view-qr="
+            (i) => {
+              currentIndexQrCodeBank = i;
+              triggerEditQrCodeBank();
+            }
+          "
+          @edit-qr="
+            (i) => {
+              currentIndexQrCodeBank = i;
+              refQrCodeUpload && refQrCodeUpload.browse();
+            }
+          "
         />
       </div>
     </div>
@@ -359,6 +418,7 @@ watch(
           :prefix="data.name"
           hide-fade
           use-toggle
+          :readonly="hideAction"
           :active="data.status !== 'INACTIVE'"
           :toggle-title="$t('status.title')"
           :icon="'ph-building-office'"
@@ -398,7 +458,7 @@ watch(
             style="position: absolute; z-index: 999; top: 0; right: 0"
           >
             <div
-              v-if="data.status !== 'INACTIVE'"
+              v-if="data.status !== 'INACTIVE' && !hideAction"
               class="surface-1 row rounded"
             >
               <UndoButton
@@ -432,7 +492,7 @@ watch(
                 type="button"
               />
               <DeleteButton
-                v-if="!isEdit"
+                v-if="!isEdit && !hideDelete"
                 id="btn-info-basic-delete"
                 icon-only
                 @click="
@@ -495,6 +555,9 @@ watch(
               v-model:contact-name="data.contactName"
               v-model:email="data.contactEmail"
               v-model:contact-tel="data.contactTel"
+              v-model:attachment="attachment"
+              :attachment-list="attachmentList"
+              @delete-attachment="(name) => $emit('deleteAttachment', name)"
             />
             <AddressForm
               id="agencies-address-info"
@@ -518,9 +581,20 @@ watch(
               title="agencies.bankInfo"
               class="q-pt-xl"
               dense
-              single
               :readonly
               v-model:bank-book-list="formBankBook"
+              @view-qr="
+                (i) => {
+                  currentIndexQrCodeBank = i;
+                  triggerEditQrCodeBank();
+                }
+              "
+              @edit-qr="
+                (i) => {
+                  currentIndexQrCodeBank = i;
+                  refQrCodeUpload && refQrCodeUpload.browse();
+                }
+              "
             />
           </div>
         </div>
@@ -534,6 +608,7 @@ watch(
     v-model:on-create-data-list="imageListOnCreate"
     v-model:image-url="imageState.imageUrl"
     v-model:data-list="imageList"
+    :changeDisabled="hideAction"
     :on-create="model"
     :hiddenFooter="!imageState.isImageEdit"
     @add-image="addImage"
@@ -561,5 +636,31 @@ watch(
       </div>
     </template>
   </ImageUploadDialog>
+
+  <QrCodeUploadDialog
+    ref="refQrCodeUpload"
+    v-model:dialog-state="qrCodeDialog"
+    v-model:file="statusQrCodeFile as File"
+    v-model:image-url="statusQrCodeUrl"
+    @save="
+      (_file) => {
+        qrCodeDialog = false;
+        if (currentIndexQrCodeBank !== -1) {
+          triggerEditQrCodeBank({ save: true });
+        }
+      }
+    "
+    @clear="statusDeletesQrCode = true"
+    clearButton
+  >
+    <template #error>
+      <div
+        class="full-width full-height flex items-center justify-center"
+        style="color: gray"
+      >
+        <q-icon size="15rem" name="mdi-qrcode" />
+      </div>
+    </template>
+  </QrCodeUploadDialog>
 </template>
 <style scoped></style>
diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index 9f40a0c4..436dcfdf 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -7,7 +7,7 @@ import { Icon } from '@iconify/vue/dist/iconify.js';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 
-import { baseUrl } from 'src/stores/utils';
+import { baseUrl, canAccess } from 'src/stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import { useInstitution } from 'src/stores/institution';
 import { Institution, InstitutionPayload } from 'src/stores/institution/types';
@@ -81,7 +81,7 @@ const pageState = reactive({
   isDrawerEdit: true,
   searchDate: [],
 });
-
+const deletesStatusQrCodeBankImag = ref<number[]>([]);
 const blankFormData: InstitutionPayload = {
   group: '',
   code: '',
@@ -115,6 +115,8 @@ const blankFormData: InstitutionPayload = {
   ],
 };
 
+const attachment = ref<File[]>([]);
+const attachmentList = ref<{ name: string; url: string }[]>([]);
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
 const refAgenciesDialog = ref();
 const formData = ref<InstitutionPayload>(structuredClone(blankFormData));
@@ -145,6 +147,8 @@ function resetForm() {
   pageState.addModal = false;
   pageState.viewDrawer = false;
   currAgenciesData.value = undefined;
+  attachment.value = [];
+  attachmentList.value = [];
   formData.value = structuredClone(blankFormData);
 }
 
@@ -154,7 +158,7 @@ function undo() {
   pageState.isDrawerEdit = false;
 }
 
-function assignFormData(data: Institution) {
+async function assignFormData(data: Institution) {
   currAgenciesData.value = data;
   formData.value = {
     group: data.group,
@@ -174,20 +178,21 @@ function assignFormData(data: Institution) {
     provinceId: data.provinceId,
     selectedImage: data.selectedImage,
     status: data.status,
-    contactEmail: data.contactEmail,
-    contactName: data.contactName,
-    contactTel: data.contactTel,
-    bank: [
-      {
-        bankName: data.bank[0]?.bankName,
-        accountNumber: data.bank[0]?.accountNumber,
-        bankBranch: data.bank[0]?.bankBranch,
-        accountName: data.bank[0]?.accountName,
-        accountType: data.bank[0]?.accountType,
-        currentlyUse: data.bank[0]?.currentlyUse,
-      },
-    ],
+    contactEmail: data.contactEmail || '',
+    contactName: data.contactName || '',
+    contactTel: data.contactTel || '',
+    bank: data.bank.map((v) => ({
+      bankName: v.bankName,
+      accountNumber: v.accountNumber,
+      bankBranch: v.bankBranch,
+      accountName: v.accountName,
+      accountType: v.accountType,
+      currentlyUse: v.currentlyUse,
+      bankUrl: `${baseUrl}/institution/${data.id}/bank-qr/${v.id}?ts=${Date.now()}`,
+    })),
   };
+
+  await fetchAttachment();
 }
 
 async function submit(opt?: { selectedImage: string }) {
@@ -212,12 +217,7 @@ async function submit(opt?: { selectedImage: string }) {
     provinceId: formData.value.provinceId,
     status: formData.value.status,
     bank: formData.value.bank.map((v) => ({
-      bankName: v.bankName,
-      accountNumber: v.accountNumber,
-      bankBranch: v.bankBranch,
-      accountName: v.accountName,
-      accountType: v.accountType,
-      currentlyUse: v.currentlyUse,
+      ...v,
     })),
   };
   if (
@@ -230,21 +230,33 @@ async function submit(opt?: { selectedImage: string }) {
         id: currAgenciesData.value.id,
         selectedImage: opt?.selectedImage || undefined,
       }),
+      { indexDeleteQrCodeBank: deletesStatusQrCodeBankImag.value },
     );
 
     if (ret) {
+      attachment.value.forEach(async (file) => {
+        await institutionStore.putAttachment({
+          parentId: ret.id || '',
+          name: file.name,
+          file: file,
+        });
+      });
       pageState.isDrawerEdit = false;
       currAgenciesData.value = ret;
       formData.value.selectedImage = ret.selectedImage;
       await fetchData($q.screen.xs);
+      attachment.value = [];
 
       if (refAgenciesDialog.value && opt?.selectedImage) {
         refAgenciesDialog.value.clearImageState();
       }
+      setTimeout(async () => {
+        await fetchAttachment();
+      }, 300);
       return;
     }
   } else {
-    await institutionStore.createInstitution(
+    const res = await institutionStore.createInstitution(
       {
         ...payload,
         code: formData.value.group || '',
@@ -252,6 +264,16 @@ async function submit(opt?: { selectedImage: string }) {
       imageListOnCreate.value,
     );
 
+    if (!res) return;
+
+    attachment.value.forEach(async (file) => {
+      await institutionStore.putAttachment({
+        parentId: res.id || '',
+        name: file.name,
+        file: file,
+      });
+    });
+
     await fetchData($q.screen.xs);
     pageState.addModal = false;
     return;
@@ -351,6 +373,49 @@ async function changeStatus(id?: string) {
   }
 }
 
+async function deleteAttachment(attachmentName: string) {
+  dialog({
+    color: 'negative',
+    icon: 'mdi-trash-can-outline',
+    title: t('dialog.title.confirmDelete', {
+      msg: t('personnel.form.attachment'),
+    }),
+    actionText: t('general.delete'),
+    persistent: true,
+    message: t('dialog.message.confirmDelete'),
+    action: async () => {
+      if (!currAgenciesData.value?.id) return;
+      institutionStore.delAttachment({
+        parentId: currAgenciesData.value?.id,
+        name: attachmentName,
+      });
+      setTimeout(async () => {
+        await fetchAttachment();
+      }, 300);
+    },
+    cancel: () => {},
+  });
+}
+
+async function fetchAttachment() {
+  const resAttachment = await institutionStore.listAttachment({
+    parentId: currAgenciesData.value.id,
+  });
+
+  if (!resAttachment) return;
+
+  attachmentList.value = await Promise.all(
+    resAttachment.map(async (f) => ({
+      name: f,
+      url: await institutionStore.getAttachment({
+        parentId: currAgenciesData.value.id,
+        name: f,
+        download: false,
+      }),
+    })),
+  );
+}
+
 onMounted(async () => {
   navigatorStore.current.title = 'agencies.title';
   navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }];
@@ -370,6 +435,7 @@ watch(
 </script>
 <template>
   <FloatingActionButton
+    v-if="canAccess('agencies', 'edit')"
     style="z-index: 999"
     hide-icon
     @click="triggerDialog('add')"
@@ -754,6 +820,7 @@ watch(
                       "
                     />
                     <KebabAction
+                      v-if="canAccess('agencies', 'edit')"
                       :id-name="props.row.name"
                       :status="props.row.status"
                       @view="
@@ -837,6 +904,7 @@ watch(
                           "
                         />
                         <KebabAction
+                          v-if="canAccess('agencies', 'edit')"
                           :id-name="props.row.id"
                           :status="props.row.status"
                           @view="
@@ -924,7 +992,10 @@ watch(
                 {{ $t('general.recordPerPage') }}
               </div>
               <div>
-                <PaginationPageSize v-model="pageSize" />
+                <PaginationPageSize
+                  v-model="pageSize"
+                  :fetch-data="() => fetchData()"
+                />
               </div>
             </div>
           </div>
@@ -975,13 +1046,18 @@ watch(
       }
     "
     @change-status="triggerChangeStatus"
+    @delete-attachment="deleteAttachment"
     :readonly="!pageState.isDrawerEdit"
     :isEdit="pageState.isDrawerEdit"
+    :hide-action="!canAccess('agencies', 'edit')"
     v-model="pageState.addModal"
     v-model:drawer-model="pageState.viewDrawer"
     v-model:data="formData"
     v-model:form-bank-book="formData.bank"
     v-model:image-list-on-create="imageListOnCreate"
+    v-model:deletes-status-qr-code-bank-imag="deletesStatusQrCodeBankImag"
+    v-model:attachment="attachment"
+    :attachment-list="attachmentList"
   />
 </template>
 <style scoped>
diff --git a/src/pages/08_request-list/DocumentExpansion.vue b/src/pages/08_request-list/DocumentExpansion.vue
index 333a4cc8..5ac5208c 100644
--- a/src/pages/08_request-list/DocumentExpansion.vue
+++ b/src/pages/08_request-list/DocumentExpansion.vue
@@ -24,6 +24,7 @@ import {
   EmployeePassportPayload,
   EmployeeVisaPayload,
 } from 'stores/employee/types';
+import { canAccess } from 'src/stores/utils';
 
 type Data = {
   id: string;
@@ -50,6 +51,8 @@ defineEmits<{
 }>();
 
 const group = ref('passport');
+const refFormEmployeePassport = ref();
+const refFormEmployeeVisa = ref();
 
 const requestListStore = useRequestList();
 
@@ -58,6 +61,7 @@ const props = withDefaults(
     readonly?: boolean;
     listDocument: string[];
     currentId: { customer: string; employee: string };
+    prefix?: string;
   }>(),
   {
     listDocument: () => [],
@@ -241,14 +245,14 @@ function changeCustomerTab(opts: { tab: 'customer' | 'employee' }) {
       <nav class="q-ml-auto row" v-if="!readonly">
         <CancelButton
           v-if="state.isEdit"
-          id="btn-info-basic-undo"
+          :id="`btn-docs-${props.prefix || 'nome'}-info-basic-undo`"
           icon-only
           type="button"
           @click.stop="triggerCancel"
         />
         <EditButton
           v-if="!state.isEdit"
-          id="btn-info-basic-edit"
+          :id="`btn-docs-${props.prefix || 'nome'}-info-basic-edit`"
           icon-only
           @click.stop="triggerEdit"
           type="button"
@@ -474,6 +478,13 @@ function changeCustomerTab(opts: { tab: 'customer' | 'employee' }) {
                   <q-td>
                     <span class="row justify-end no-wrap">
                       <OcrDialog
+                        :disabled-submit="
+                          group === 'passport'
+                            ? !refFormEmployeePassport
+                            : group === 'visa'
+                              ? !refFormEmployeeVisa
+                              : undefined
+                        "
                         @submit="
                           (file, meta) => {
                             $emit(
@@ -500,7 +511,13 @@ function changeCustomerTab(opts: { tab: 'customer' | 'employee' }) {
                       >
                         <template #trigger="{ browse }">
                           <MainButton
-                            v-if="!!state.isEdit"
+                            v-if="
+                              !!state.isEdit &&
+                              (props.row.documentType === 'passport' ||
+                              props.row.documentType === 'visa'
+                                ? canAccess('customer', 'edit')
+                                : true)
+                            "
                             iconOnly
                             icon="mdi-tray-arrow-up"
                             color="var(--positive-bg)"
@@ -513,6 +530,7 @@ function changeCustomerTab(opts: { tab: 'customer' | 'employee' }) {
                         </template>
                         <template #body="{ metadata, isRunning }">
                           <FormEmployeePassport
+                            ref="refFormEmployeePassport"
                             v-if="group === 'passport' && metadata"
                             :title="$t('customerEmployee.form.group.passport')"
                             dense
@@ -545,6 +563,7 @@ function changeCustomerTab(opts: { tab: 'customer' | 'employee' }) {
 
                           <FormEmployeeVisa
                             v-if="group === 'visa' && metadata"
+                            ref="refFormEmployeeVisa"
                             :title="$t('customerEmployee.form.group.visa')"
                             ocr
                             dense
@@ -564,6 +583,7 @@ function changeCustomerTab(opts: { tab: 'customer' | 'employee' }) {
                             v-model:remark="metadata.remark"
                             v-model:worker-type="metadata.workerType"
                             v-model:visa-number="metadata.doc_number"
+                            v-model:report-date="metadata.reportDate"
                           />
                           <div
                             v-if="isRunning"
diff --git a/src/pages/08_request-list/DutyExpansion.vue b/src/pages/08_request-list/DutyExpansion.vue
index 8a19521a..3d6e364e 100644
--- a/src/pages/08_request-list/DutyExpansion.vue
+++ b/src/pages/08_request-list/DutyExpansion.vue
@@ -11,6 +11,7 @@ import { useRequestList } from 'src/stores/request-list';
 const props = defineProps<{
   readonly?: boolean;
   step: Step;
+  prefix?: string;
 }>();
 
 const requestListStore = useRequestList();
@@ -100,21 +101,21 @@ function assignToForm() {
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          id="btn-info-basic-undo"
+          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-undo`"
           icon-only
           type="button"
           @click.stop="triggerUndo"
         />
         <SaveButton
           v-if="state.isEdit"
-          id="btn-info-basic-save"
+          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-save`"
           icon-only
           type="submit"
           @click.stop="triggerSubmit"
         />
         <EditButton
           v-if="!state.isEdit"
-          id="btn-info-basic-edit"
+          :id="`btn-duty-${props.prefix || 'nome'}-info-basic-edit`"
           icon-only
           @click.stop="triggerEdit"
           type="button"
diff --git a/src/pages/08_request-list/FormExpansion.vue b/src/pages/08_request-list/FormExpansion.vue
index 5aa75f31..7b871e04 100644
--- a/src/pages/08_request-list/FormExpansion.vue
+++ b/src/pages/08_request-list/FormExpansion.vue
@@ -12,6 +12,7 @@ const props = defineProps<{
   readonly?: boolean;
   step: Step;
   requestWorkId: string;
+  prefix?: string;
 }>();
 
 const requestListStore = useRequestList();
@@ -90,21 +91,21 @@ function assignToForm() {
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          id="btn-info-basic-undo"
+          :id="`btn-form-${props.prefix || 'nome'}-info-basic-undo`"
           icon-only
           type="button"
           @click.stop="triggerUndo"
         />
         <SaveButton
           v-if="state.isEdit"
-          id="btn-info-basic-save"
+          :id="`btn-form-${props.prefix || 'nome'}-info-basic-save`"
           icon-only
           type="submit"
           @click.stop="triggerSubmit"
         />
         <EditButton
           v-if="!state.isEdit"
-          id="btn-info-basic-edit"
+          :id="`btn-form-${props.prefix || 'nome'}-info-basic-edit`"
           icon-only
           @click.stop="triggerEdit"
           type="button"
diff --git a/src/pages/08_request-list/FormResponsibleUser.vue b/src/pages/08_request-list/FormResponsibleUser.vue
index b2bf9bb8..010aab92 100644
--- a/src/pages/08_request-list/FormResponsibleUser.vue
+++ b/src/pages/08_request-list/FormResponsibleUser.vue
@@ -12,6 +12,7 @@ const responsibleUserId = defineModel<string>('responsibleUserId', {
 defineProps<{
   readonly?: boolean;
   districtId?: string;
+  prefix?: string;
 }>();
 
 watch(responsibleUserLocal, (lhs, rhs) => {
@@ -27,6 +28,8 @@ watch(responsibleUserLocal, (lhs, rhs) => {
         :label="$t('requestList.localEmployee')"
         :disable="readonly"
         class="col"
+        :id="`${prefix || 'nome'}-radio-local-employee`"
+        :for="`${prefix || 'nome'}-radio-local-employee`"
       />
       <q-radio
         v-model="responsibleUserLocal"
@@ -34,6 +37,8 @@ watch(responsibleUserLocal, (lhs, rhs) => {
         :label="$t('requestList.nonLocalEmployee')"
         :disable="readonly"
         class="col"
+        :id="`${prefix || 'nome'}-radio-non-local-employee`"
+        :for="`${prefix || 'nome'}-radio-non-local-employee`"
       />
       <div class="col" />
       <div class="offset-md-7"></div>
@@ -52,6 +57,8 @@ watch(responsibleUserLocal, (lhs, rhs) => {
         }"
         :readonly
         :label="$t('general.select', { msg: $t('personnel.MESSENGER') })"
+        :id="`${prefix || 'nome'}-select-user`"
+        :for="`${prefix || 'nome'}-select-user`"
       />
     </div>
   </div>
diff --git a/src/pages/08_request-list/MainPage.vue b/src/pages/08_request-list/MainPage.vue
index 7f98b870..7e6527c0 100644
--- a/src/pages/08_request-list/MainPage.vue
+++ b/src/pages/08_request-list/MainPage.vue
@@ -21,7 +21,7 @@ import { column } from './constants';
 import useFlowStore from 'src/stores/flow';
 import { useRequestList } from 'src/stores/request-list';
 import { RequestData, RequestDataStatus } from 'src/stores/request-list/types';
-import { dialogWarningClose } from 'src/stores/utils';
+import { dialogWarningClose, canAccess } from 'src/stores/utils';
 import { CancelButton, SaveButton } from 'src/components/button';
 import { getRole } from 'src/services/keycloak';
 import FloatingActionButton from 'src/components/FloatingActionButton.vue';
@@ -95,24 +95,12 @@ function triggerCancel(id: string) {
       const res = await requestListStore.cancelRequest(id);
       if (res) {
         fetchList();
+        fetchStats();
       }
     },
   });
 }
 
-const hideAction = computed(() => {
-  const role = getRole();
-  const allowedRoles = [
-    'head_of_admin',
-    'head_of_sale',
-    'admin',
-    'sale',
-    'system',
-  ];
-
-  return !role || !role.some((r) => allowedRoles.includes(r));
-});
-
 function triggerView(opts: { requestData: RequestData }) {
   const url = new URL(
     `/request-list/${opts.requestData.id}`,
@@ -143,6 +131,7 @@ async function openRequestListDialog() {
     page: 1,
     pageSize: 999,
     incomplete: true,
+    responsibleOnly: true,
   });
 
   if (ret) {
@@ -472,11 +461,12 @@ watch(
             "
           >
             <TableRequestList
+              :no-link="!canAccess('customer', 'view')"
               :columns="column"
               :rows="data"
               :grid="pageState.gridView"
               :visible-columns="pageState.fieldSelected"
-              :hide-action
+              :hide-action="!canAccess('requestList', 'edit')"
               @view="(data) => triggerView({ requestData: data })"
               @delete="(data) => triggerCancel(data.id)"
               @reject-cancel="
@@ -573,6 +563,7 @@ watch(
       v-if="requestListActionData"
       v-model="pageState.requestListActionDialog"
       :request-list="requestListActionData"
+      :no-link="!canAccess('customer', 'view')"
       @submit="submitRequestListAction"
     />
   </div>
diff --git a/src/pages/08_request-list/MessengerExpansion.vue b/src/pages/08_request-list/MessengerExpansion.vue
index 4b7958cb..456aefe4 100644
--- a/src/pages/08_request-list/MessengerExpansion.vue
+++ b/src/pages/08_request-list/MessengerExpansion.vue
@@ -14,6 +14,7 @@ const props = defineProps<{
   step: Step;
   responsibleAreaDistrictId?: string;
   defaultMessenger?: string;
+  prefix?: string;
 }>();
 
 const emit = defineEmits<{
@@ -57,6 +58,7 @@ const formData = ref<AttributesForm>(defaultForm);
 function triggerUndo() {
   assignToForm();
   state.isEdit = false;
+  refForm.value?.resetValidation();
 }
 
 async function triggerSubmit() {
@@ -85,7 +87,11 @@ function assignToForm() {
       customerDutyCost: attributesForm.value.customerDutyCost ?? 30,
       companyDuty: attributesForm.value.companyDuty ?? false,
       companyDutyCost: attributesForm.value.companyDutyCost ?? 30,
-      responsibleUserLocal: attributesForm.value.responsibleUserLocal ?? true,
+      responsibleUserLocal: attributesForm.value.responsibleUserLocal
+        ? attributesForm.value.responsibleUserLocal
+        : props.responsibleAreaDistrictId
+          ? false
+          : true,
       responsibleUserId:
         attributesForm.value.responsibleUserId || props.defaultMessenger,
       individualDuty: attributesForm.value.individualDuty ?? false,
@@ -111,21 +117,21 @@ function assignToForm() {
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          id="btn-info-basic-undo"
+          :id="`btn-messenger-${props.prefix || 'nome'}-info-basic-undo`"
           icon-only
           type="button"
           @click.stop="triggerUndo"
         />
         <SaveButton
           v-if="state.isEdit"
-          id="btn-info-basic-save"
+          :id="`btn-messenger-${props.prefix || 'nome'}-info-basic-save`"
           icon-only
           type="submit"
           @click.stop="(e) => refForm?.submit(e)"
         />
         <EditButton
           v-if="!state.isEdit"
-          id="btn-info-basic-edit"
+          :id="`btn-messenger-${props.prefix || 'nome'}-info-basic-edit`"
           icon-only
           @click.stop="triggerEdit"
           type="button"
@@ -152,6 +158,7 @@ function assignToForm() {
             v-model:responsible-user-local="formData.responsibleUserLocal"
             v-model:responsible-user-id="formData.responsibleUserId"
             :district-id="responsibleAreaDistrictId"
+            :prefix
           />
         </q-form>
       </section>
diff --git a/src/pages/08_request-list/ProductExpansion.vue b/src/pages/08_request-list/ProductExpansion.vue
index d2214d03..ed5f5784 100644
--- a/src/pages/08_request-list/ProductExpansion.vue
+++ b/src/pages/08_request-list/ProductExpansion.vue
@@ -83,6 +83,8 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
 </script>
 <template>
   <q-expansion-item
+    :id="`expansion-${product?.name || name}`"
+    :for="`expansion-${product?.name || name}`"
     dense
     :class="{ 'status-unpaid': !paySuccess }"
     class="overflow-hidden"
@@ -146,6 +148,8 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
         <div class="q-ml-auto q-gutter-y-xs">
           <div class="justify-end flex">
             <q-btn-dropdown
+              :id="`btn-dropdown-${product?.name || name}`"
+              :for="`btn-dropdown-${product?.name || name}`"
               :disable="
                 readonly || changeableStatus(status?.workStatus).length === 0
               "
@@ -197,6 +201,8 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
               <q-list dense>
                 <q-item
                   v-for="(value, index) in changeableStatus(status?.workStatus)"
+                  :id="`btn-dropdown-${product?.name || name}-${value}`"
+                  :for="`btn-dropdown-${product?.name || name}-${value}`"
                   :key="index"
                   clickable
                   v-close-popup
@@ -271,15 +277,15 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
 }
 
 :deep(
-    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-  ) {
+  i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+) {
   color: var(--brand-1);
 }
 
 :deep(
-    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
-      .q-focus-helper
-  ) {
+  .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
+    .q-focus-helper
+) {
   visibility: hidden;
 }
 
diff --git a/src/pages/08_request-list/PropertiesExpansion.vue b/src/pages/08_request-list/PropertiesExpansion.vue
index b2b9baad..718a7957 100644
--- a/src/pages/08_request-list/PropertiesExpansion.vue
+++ b/src/pages/08_request-list/PropertiesExpansion.vue
@@ -28,6 +28,7 @@ const props = withDefaults(
     readonly?: boolean;
     propertiesToShow: (PropString | PropNumber | PropDate | PropOptions)[];
     requestListData: RequestData;
+    prefix?: string;
   }>(),
   {
     id: '',
@@ -128,7 +129,7 @@ defineEmits<{
       <nav class="q-ml-auto row" v-if="!readonly">
         <UndoButton
           v-if="state.isEdit"
-          id="btn-info-basic-undo"
+          :id="`btn-properties-${props.prefix || 'nome'}-info-basic-undo`"
           icon-only
           type="button"
           @click.stop="triggerUndo"
@@ -136,13 +137,14 @@ defineEmits<{
         <SaveButton
           v-if="state.isEdit"
           id="btn-info-basic-save"
+          :id="`btn-properties-${props.prefix || 'nome'}-info-basic-save`"
           icon-only
           type="submit"
           @click.stop="triggerSubmit"
         />
         <EditButton
           v-if="!state.isEdit"
-          id="btn-info-basic-edit"
+          :id="`btn-properties-${props.prefix || 'nome'}-info-basic-edit`"
           icon-only
           @click.stop="triggerEdit"
           type="button"
diff --git a/src/pages/08_request-list/RequestListAction .vue b/src/pages/08_request-list/RequestListAction .vue
index 7ec34ff4..93a367f5 100644
--- a/src/pages/08_request-list/RequestListAction .vue	
+++ b/src/pages/08_request-list/RequestListAction .vue	
@@ -16,6 +16,7 @@ import useAddressStore from 'src/stores/address';
 
 defineProps<{
   requestList: RequestData[];
+  noLink?: boolean;
 }>();
 
 defineEmits<{
@@ -99,6 +100,7 @@ watch(
         hide-action
         hide-view
         checkable
+        :no-link="noLink"
         :list-same-area="listSameArea"
         :columns="column"
         :rows="requestList"
@@ -153,6 +155,7 @@ watch(
           @click="prev"
         />
         <MainButton
+          :disabled="selected.length === 0"
           icon="mdi-check"
           color="207 96% 32%"
           solid
@@ -164,6 +167,7 @@ watch(
         </MainButton>
         <SaveButton
           v-if="step === Step.Configure"
+          :disabled="form.responsibleUserId === ''"
           id="btn-save"
           solid
           @click="$emit('submit', { form, selected })"
diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 9327f419..afb649b8 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -26,6 +26,7 @@ import {
   getEmployeeName,
   getCustomerName,
   dialogWarningClose,
+  canAccess,
 } from 'src/stores/utils';
 import { dateFormatJS } from 'src/utils/datetime';
 import { useRequestList } from 'src/stores/request-list';
@@ -54,6 +55,7 @@ import { Invoice } from 'src/stores/payment/types';
 import { CreatedBy } from 'src/stores/types';
 import { getUserId } from 'src/services/keycloak';
 import { QuotationFull } from 'src/stores/quotations/types';
+import useUserStore from 'src/stores/user';
 
 const { locale, t } = useI18n();
 
@@ -62,7 +64,9 @@ const route = useRoute();
 const optionStore = useOptionStore();
 const requestListStore = useRequestList();
 const flowTemplateStore = useWorkflowTemplate();
+const userStore = useUserStore();
 
+const currentUserGroup = ref<string[]>([]);
 const workList = ref<RequestWork[]>([]);
 const statusFile = ref<Attributes>({
   customer: {},
@@ -158,6 +162,10 @@ onMounted(async () => {
   initTheme();
   initLang();
 
+  const result = await userStore.fetchUserGroup();
+
+  currentUserGroup.value = result.map((v) => v.name);
+
   // get data
   await getData();
 });
@@ -283,26 +291,38 @@ async function triggerViewFile(opt: {
   if (!opt.download) window.open(url, '_blank');
 }
 
-const responsiblePersonList = computed(() => {
-  const temp = workList.value?.reduce<Record<string, CreatedBy[]>>(
-    (acc, curr: RequestWork) => {
-      curr.productService.service?.workflow?.step.forEach((v) => {
-        const key = v.order.toString();
+const responsibleList = computed(() => {
+  const temp = workList.value?.reduce<
+    Record<string, { user: CreatedBy[]; group: string[] }>
+  >((acc, curr: RequestWork) => {
+    curr.productService.service?.workflow?.step.forEach((v) => {
+      const key = v.order.toString();
+      const responsibleGroup = (
+        v.responsibleGroup as unknown as { group: string }[]
+      ).map((v) => v.group);
 
-        if (!acc[key]) acc[key] = v.responsiblePerson.map((v) => v.user);
+      if (!acc[key]) {
+        acc[key] = {
+          user: v.responsiblePerson.map((v) => v.user),
+          group: responsibleGroup,
+        };
+      }
 
-        const current = acc[key];
+      const current = acc[key];
 
-        v.responsiblePerson.forEach((lhs) => {
-          if (current.find((rhs) => rhs.id === lhs.userId)) return;
-          current.push(lhs.user);
-        });
+      v.responsiblePerson.forEach((lhs) => {
+        if (current.user.find((rhs) => rhs.id === lhs.userId)) return;
+        current.user.push(lhs.user);
       });
 
-      return acc;
-    },
-    {},
-  );
+      responsibleGroup.forEach((lhs) => {
+        if (current.group.find((rhs) => rhs === lhs)) return;
+        current.group.push(lhs);
+      });
+    });
+
+    return acc;
+  }, {});
 
   return temp || {};
 });
@@ -440,6 +460,7 @@ async function submitRejectCancel() {
 }
 
 function toCustomer(customer: RequestData['quotation']['customerBranch']) {
+  if (!canAccess('customer', 'view')) return;
   const url = new URL(
     `/customer-management?tab=customer&id=${customer.customerId}`,
     window.location.origin,
@@ -449,6 +470,7 @@ function toCustomer(customer: RequestData['quotation']['customerBranch']) {
 }
 
 function toEmployee(employee: RequestData['employee']) {
+  if (!canAccess('customer', 'view')) return;
   const url = new URL(
     `/customer-management?tab=employee&id=${employee.id}`,
     window.location.origin,
@@ -496,11 +518,11 @@ function toEmployee(employee: RequestData['employee']) {
           <span class="app-text-muted">{{ $t('flow.responsiblePerson') }}</span>
           <span>
             <template
-              v-if="responsiblePersonList[pageState.currentStep]?.length"
+              v-if="responsibleList[pageState.currentStep]?.user.length"
             >
               <AvatarGroup
-                :data="
-                  (responsiblePersonList[pageState.currentStep] || []).map(
+                :data="[
+                  ...(responsibleList[pageState.currentStep].user || []).map(
                     (v) => ({
                       name:
                         $i18n.locale === 'eng'
@@ -512,8 +534,12 @@ function toEmployee(employee: RequestData['employee']) {
                           : `/no-img-female.png`
                         : `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
                     }),
-                  )
-                "
+                  ),
+                  ...responsibleList[pageState.currentStep].group.map((g) => ({
+                    name: `${$t('general.group')} ${g}`,
+                    imgUrl: '/img-group.png',
+                  })),
+                ]"
               />
             </template>
             <template v-else>-</template>
@@ -719,7 +745,7 @@ function toEmployee(employee: RequestData['employee']) {
                   }"
                 >
                   <DataDisplay
-                    clickable
+                    :clickable="canAccess('customer', 'view')"
                     class="col"
                     icon="mdi-account-settings-outline"
                     :label="$t('customer.employer')"
@@ -732,7 +758,7 @@ function toEmployee(employee: RequestData['employee']) {
                     @label-click="toCustomer(data.quotation.customerBranch)"
                   />
                   <DataDisplay
-                    clickable
+                    :clickable="canAccess('customer', 'view')"
                     class="col"
                     icon="mdi-account-settings-outline"
                     :label="$t('customer.employee')"
@@ -789,21 +815,32 @@ function toEmployee(employee: RequestData['employee']) {
             </transition>
           </article>
           <!-- product -->
-          <template v-for="(value, index) in productsList" :key="value">
+          <template
+            v-for="(value, index) in productsList.map((v) =>
+              Object.assign(v, {
+                _readonly:
+                  data.requestDataStatus === RequestDataStatus.Canceled ||
+                  (responsibleList &&
+                    (!!responsibleList[pageState.currentStep]?.user?.length ||
+                      !!responsibleList[pageState.currentStep]?.group
+                        ?.length) &&
+                    !responsibleList[pageState.currentStep]?.user.find(
+                      (v) => v.id === getUserId(),
+                    ) &&
+                    !responsibleList[pageState.currentStep]?.group.some((v) =>
+                      currentUserGroup.includes(v),
+                    )),
+              }),
+            )"
+            :key="value"
+          >
             <ProductExpansion
               :request-cancel="value.customerRequestCancel"
               :request-cancel-reason="value.customerRequestCancelReason"
               :reject-request-cancel="value.rejectRequestCancel"
               :reject-request-cancel-reason="value.rejectRequestCancelReason"
               :cancel="data.requestDataStatus === RequestDataStatus.Canceled"
-              :readonly="
-                data.requestDataStatus === RequestDataStatus.Canceled ||
-                (responsiblePersonList &&
-                  !!responsiblePersonList[pageState.currentStep]?.length &&
-                  !responsiblePersonList[pageState.currentStep]?.find(
-                    (v) => v.id === getUserId(),
-                  ))
-              "
+              :readonly="value._readonly"
               :order-able="value._messengerExpansion"
               :installment-info="getInstallmentInfo()"
               :pay-success="
@@ -830,7 +867,7 @@ function toEmployee(employee: RequestData['employee']) {
                       requestWorkId: value.id || '',
                     },
                     value.stepStatus?.[pageState.currentStep - 1]
-                      ?.responsibleUserId,
+                      ?.responsibleUserId ?? data.defaultMessengerId,
                   );
                 }
               "
@@ -841,11 +878,10 @@ function toEmployee(employee: RequestData['employee']) {
                 >
                   <DocumentExpansion
                     v-if="value._documentExpansion"
-                    :readonly="
-                      data.requestDataStatus === RequestDataStatus.Canceled
-                    "
+                    :readonly="value._readonly"
                     ref="refDocumentExpansion"
                     :attributes="value.attributes"
+                    :prefix="value.productService.product.name"
                     @change-status="
                       (opt) => {
                         triggerChangeStatusFile({
@@ -892,9 +928,8 @@ function toEmployee(employee: RequestData['employee']) {
                   />
                   <MessengerExpansion
                     v-if="value._messengerExpansion"
-                    :readonly="
-                      data.requestDataStatus === RequestDataStatus.Canceled
-                    "
+                    :readonly="value._readonly"
+                    :prefix="value.productService.product.name"
                     :default-messenger="
                       value.stepStatus[pageState.currentStep - 1]
                         ? undefined
@@ -919,9 +954,8 @@ function toEmployee(employee: RequestData['employee']) {
                   />
                   <DutyExpansion
                     v-if="value._dutyExpansion"
-                    :readonly="
-                      data.requestDataStatus === RequestDataStatus.Canceled
-                    "
+                    :readonly="value._readonly"
+                    :prefix="value.productService.product.name"
                     :step="{
                       step: pageState.currentStep,
                       requestWorkId: value.id || '',
@@ -934,9 +968,8 @@ function toEmployee(employee: RequestData['employee']) {
                   <FormExpansion
                     v-if="value._formExpansion"
                     :request-work-id="value.id"
-                    :readonly="
-                      data.requestDataStatus === RequestDataStatus.Canceled
-                    "
+                    :readonly="value._readonly"
+                    :prefix="value.productService.product.name"
                     :step="{
                       step: pageState.currentStep,
                       requestWorkId: value.id || '',
@@ -949,9 +982,8 @@ function toEmployee(employee: RequestData['employee']) {
                   <PropertiesExpansion
                     :request-list-data="data"
                     :id="value.id"
-                    :readonly="
-                      data.requestDataStatus === RequestDataStatus.Canceled
-                    "
+                    :readonly="value._readonly"
+                    :prefix="value.productService.product.name"
                     :properties-to-show="
                       value.productService.work?.attributes.workflowStep[
                         pageState.currentStep - 1
@@ -978,7 +1010,22 @@ function toEmployee(employee: RequestData['employee']) {
         :label="$t('dialog.action.close')"
       />
       <MainButton
-        v-if="productsList.some((v) => v._messengerExpansion)"
+        v-if="
+          productsList.some((v) => v._messengerExpansion) &&
+          !(
+            data.requestDataStatus === RequestDataStatus.Completed ||
+            data.requestDataStatus === RequestDataStatus.Canceled ||
+            (responsibleList &&
+              !responsibleList[pageState.currentStep]?.user.find(
+                (v) => v.id === getUserId(),
+              ) &&
+              !responsibleList[pageState.currentStep]?.group.some((v) =>
+                currentUserGroup.includes(v),
+              )) ||
+            (!!responsibleList[pageState.currentStep]?.user?.length &&
+              !!responsibleList[pageState.currentStep]?.user?.length)
+          )
+        "
         solid
         icon="mdi-account-outline"
         color="207 96% 32%"
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index cbad4a7a..70e1ac59 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -25,6 +25,7 @@ const props = withDefaults(
     hideView?: boolean;
     checkable?: boolean;
     listSameArea?: string[];
+    noLink?: boolean;
   }>(),
   {
     row: () => [],
@@ -42,9 +43,17 @@ defineEmits<{
 
 const selected = defineModel<RequestData[]>('selected');
 
-function responsiblePerson(quotation: QuotationFull): CreatedBy[] | undefined {
+function responsiblePerson(quotation: QuotationFull) {
   const productServiceList = quotation.productServiceList;
   const tempPerson: CreatedBy[] = [];
+  const tempGroup: {
+    group: string;
+    id: string;
+    workflowTemplateStepId: string;
+  }[] = [];
+
+  const userIds = new Set<string>();
+  const groupKeys = new Set<string>();
 
   for (const v of productServiceList) {
     const tempStep = v.service?.workflow?.step;
@@ -52,10 +61,30 @@ function responsiblePerson(quotation: QuotationFull): CreatedBy[] | undefined {
     if (tempStep) {
       tempStep.forEach((lhs) => {
         for (const rhs of lhs.responsiblePerson) {
-          tempPerson.push(rhs.user);
+          if (!userIds.has(rhs.user.id)) {
+            userIds.add(rhs.user.id);
+            tempPerson.push(rhs.user);
+          }
         }
       });
-      return tempPerson;
+
+      tempStep.forEach((lhs) => {
+        const newGroup = lhs.responsibleGroup as unknown as {
+          group: string;
+          id: string;
+          workflowTemplateStepId: string;
+        }[];
+
+        for (const rhs of newGroup) {
+          const key = `${rhs.group}-${rhs.id}-${rhs.workflowTemplateStepId}`;
+          if (!groupKeys.has(key)) {
+            groupKeys.add(key);
+            tempGroup.push(rhs);
+          }
+        }
+      });
+
+      return { user: tempPerson, group: tempGroup };
     }
   }
 
@@ -104,6 +133,7 @@ function getEmployeeName(
 }
 
 function toCustomer(customer: RequestData['quotation']['customerBranch']) {
+  if (props.noLink) return;
   const url = new URL(
     `/customer-management?tab=customer&id=${customer.customerId}`,
     window.location.origin,
@@ -113,6 +143,7 @@ function toCustomer(customer: RequestData['quotation']['customerBranch']) {
 }
 
 function toEmployee(employee: RequestData['employee']) {
+  if (props.noLink) return;
   const url = new URL(
     `/customer-management?tab=employee&id=${employee.id}`,
     window.location.origin,
@@ -159,6 +190,8 @@ function handleCheckAll() {
       >
         <q-th v-if="checkable">
           <q-checkbox
+            :for="`list-checkbox-all`"
+            :id="`list-checkbox-all`"
             v-if="selected.length > 0"
             :model-value="
               selected.length ===
@@ -198,6 +231,8 @@ function handleCheckAll() {
       >
         <q-td v-if="checkable">
           <q-checkbox
+            :for="`list-checkbox-${props.rowIndex + 1}`"
+            :id="`list-checkbox-${props.rowIndex + 1}`"
             :disable="
               selected.length > 0 &&
               !listSameArea.includes(
@@ -219,7 +254,7 @@ function handleCheckAll() {
         </q-td>
         <q-td v-if="visibleColumns.includes('employer')" class="text-left">
           <span
-            class="link"
+            :class="{ link: !noLink }"
             @click="toCustomer(props.row.quotation.customerBranch)"
           >
             {{
@@ -228,16 +263,13 @@ function handleCheckAll() {
                 locale: $i18n.locale,
               }) || '-'
             }}
-            {{
-              getCustomerName(props.row, {
-                noCode: true,
-                locale: $i18n.locale,
-              }) || '-'
-            }}
           </span>
         </q-td>
         <q-td v-if="visibleColumns.includes('employee')" class="text-left">
-          <span class="link" @click="toEmployee(props.row.employee)">
+          <span
+            :class="{ link: !noLink }"
+            @click="toEmployee(props.row.employee)"
+          >
             {{ getEmployeeName(props.row, { locale: $i18n.locale }) || '-' }}
           </span>
         </q-td>
@@ -267,7 +299,7 @@ function handleCheckAll() {
           {{ props.row.quotation.code || '-' }}
         </q-td>
         <q-td v-if="visibleColumns.includes('responsiblePerson')">
-          <AvatarGroup
+          <!-- <AvatarGroup
             :data="
               responsiblePerson(props.row.quotation)?.map((v) => {
                 return {
@@ -283,7 +315,26 @@ function handleCheckAll() {
                 };
               })
             "
-          />
+          /> -->
+          <AvatarGroup
+            :data="[
+              ...(responsiblePerson(props.row.quotation)?.user.map((v) => ({
+                name:
+                  $i18n.locale === 'eng'
+                    ? `${v.firstNameEN} ${v.lastNameEN}`
+                    : `${v.firstName} ${v.lastName}`,
+                imgUrl: !v.selectedImage
+                  ? v.gender === 'male'
+                    ? `/no-img-man.png`
+                    : `/no-img-female.png`
+                  : `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
+              })) || []),
+              ...(responsiblePerson(props.row.quotation)?.group.map((g) => ({
+                name: `${$t('general.group')} ${g.group}`,
+                imgUrl: '/img-group.png',
+              })) || []),
+            ]"
+          ></AvatarGroup>
         </q-td>
         <q-td v-if="visibleColumns.includes('status')">
           <BadgeComponent
@@ -375,6 +426,7 @@ function handleCheckAll() {
           hide-kebab-delete
           :use-cancel="!hideAction"
           class="full-height"
+          :hide-action="hideAction"
           :use-reject-cancel="
             props.row.customerRequestCancel && !props.row.rejectRequestCancel
           "
@@ -429,22 +481,29 @@ function handleCheckAll() {
             </div>
             <div class="col-8">
               <AvatarGroup
-                v-if="(responsiblePerson(props.row.quotation) ?? []).length > 0"
-                :data="
-                  responsiblePerson(props.row.quotation)?.map((v) => {
-                    return {
-                      name:
-                        $i18n.locale === 'eng'
-                          ? `${v.firstNameEN} ${v.lastNameEN}`
-                          : `${v.firstName} ${v.lastName}`,
-                      imgUrl: !v.selectedImage
-                        ? v.gender === 'male'
-                          ? `/no-img-man.png`
-                          : `/no-img-female.png`
-                        : `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
-                    };
-                  })
+                v-if="
+                  (responsiblePerson(props.row.quotation).user ?? []).length >
+                    0 ||
+                  (responsiblePerson(props.row.quotation).group ?? []).length >
+                    0
                 "
+                :data="[
+                  ...responsiblePerson(props.row.quotation).user.map((v) => ({
+                    name:
+                      $i18n.locale === 'eng'
+                        ? `${v.firstNameEN} ${v.lastNameEN}`
+                        : `${v.firstName} ${v.lastName}`,
+                    imgUrl: !v.selectedImage
+                      ? v.gender === 'male'
+                        ? `/no-img-man.png`
+                        : `/no-img-female.png`
+                      : `${baseUrl}/user/${v.id}/profile-image/${v.selectedImage}`,
+                  })),
+                  ...responsiblePerson(props.row.quotation).group.map((g) => ({
+                    name: `${$t('general.group')} ${g.group}`,
+                    imgUrl: '/img-group.png',
+                  })),
+                ]"
               />
               <span v-else>-</span>
             </div>
diff --git a/src/pages/09_task-order/MainPage.vue b/src/pages/09_task-order/MainPage.vue
index cda7d75e..2a9f22bd 100644
--- a/src/pages/09_task-order/MainPage.vue
+++ b/src/pages/09_task-order/MainPage.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { computed, onMounted, reactive, watch, ref } from 'vue';
+import { computed, onMounted, onUnmounted, reactive, watch, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import { canAccess } from 'src/stores/utils';
 
 // NOTE:  Components
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -85,6 +86,7 @@ async function fetchTaskOrderList(opts?: { page?: number; pageSize?: number }) {
     });
   }
   if (res) {
+    taskOrderStore.getTaskOrderStats();
     data.value = res.result;
     pageState.total = res.total;
     pageMax.value = Math.ceil(res.total / pageSize.value);
@@ -145,6 +147,10 @@ async function deleteTaskOrder(id: string) {
   });
 }
 
+function handleWindowFocus() {
+  fetchTaskOrderList();
+}
+
 onMounted(async () => {
   pageState.gridView = $q.screen.lt.md ? true : false;
   navigatorStore.current.title = 'taskOrder.title';
@@ -155,6 +161,12 @@ onMounted(async () => {
   if (route.query['tab'] && typeof route.query['tab'] === 'string') {
     pageState.currentTab = route.query['tab'];
   }
+
+  window.addEventListener('focus', handleWindowFocus);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('focus', handleWindowFocus);
 });
 
 watch(
@@ -172,6 +184,7 @@ watch(
 </script>
 <template>
   <FloatingActionButton
+    v-if="canAccess('taskOrder', 'create') || pageState.isMessenger"
     style="z-index: 999"
     :hide-icon="!pageState.isMessenger"
     @click.stop="
@@ -216,7 +229,11 @@ watch(
           color: hsl(var(--info-bg));
         "
       >
-        {{ Object.values(stats).reduce((s, v) => s + v, 0) }}
+        {{
+          pageState.isMessenger
+            ? pageState.total
+            : stats[pageState.currentTab as TaskOrderStatus]
+        }}
       </q-badge>
       <q-btn
         class="q-ml-sm"
diff --git a/src/pages/09_task-order/SelectReadyRequestWork.vue b/src/pages/09_task-order/SelectReadyRequestWork.vue
index 34d9dd22..5276a1a5 100644
--- a/src/pages/09_task-order/SelectReadyRequestWork.vue
+++ b/src/pages/09_task-order/SelectReadyRequestWork.vue
@@ -4,6 +4,7 @@ import {
   useRequestList,
   RequestWork,
   RequestWorkStatus,
+  RequestDataStatus,
 } from 'src/stores/request-list';
 import DialogHeader from 'src/components/dialog/DialogHeader.vue';
 import CancelButton from 'src/components/button/CancelButton.vue';
@@ -192,7 +193,8 @@ function submit() {
           s.workStatus ===
             (props.creditNote
               ? RequestWorkStatus.Canceled
-              : RequestWorkStatus.InProgress),
+              : RequestWorkStatus.InProgress) ||
+          v.request.requestDataStatus === RequestDataStatus.Canceled,
       );
       if (curr) {
         const task: Task = {
@@ -293,6 +295,7 @@ function assignTempGroup() {
           class="bordered-b"
         >
           <q-expansion-item
+            :id="`expansion-product-${product.code}`"
             dense
             class="overflow-hidden"
             switch-toggle-side
@@ -346,6 +349,7 @@ function assignTempGroup() {
               </FormGroupHead>
               <div class="q-pa-md full-width">
                 <TableEmployee
+                  :id="`table-employee-${product.code}`"
                   checkbox-on
                   check-all
                   select-ready
@@ -369,9 +373,15 @@ function assignTempGroup() {
     </section>
 
     <template #footer>
-      <CancelButton class="q-ml-auto" outlined @click="close" />
+      <CancelButton
+        id="btn-dialog-cancel"
+        class="q-ml-auto"
+        outlined
+        @click="close"
+      />
       <SaveButton
         :label="$t('general.select')"
+        id="btn-dialog-select"
         class="q-ml-sm"
         icon="mdi-check"
         solid
@@ -387,8 +397,8 @@ function assignTempGroup() {
 }
 
 :deep(
-    i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
-  ) {
+  i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated
+) {
   color: var(--brand-1);
 }
 
diff --git a/src/pages/09_task-order/TableEmployee.vue b/src/pages/09_task-order/TableEmployee.vue
index e8b931cc..f8aababf 100644
--- a/src/pages/09_task-order/TableEmployee.vue
+++ b/src/pages/09_task-order/TableEmployee.vue
@@ -79,7 +79,7 @@ function getEmployeeName(
   return (
     {
       ['eng']: `${useOptionStore().mapOption(employee?.namePrefix || '')} ${employee?.firstNameEN} ${employee?.lastNameEN}`,
-      ['tha']: `${useOptionStore().mapOption(employee?.namePrefix || '')} ${employee?.firstName} ${employee?.lastName}`,
+      ['tha']: `${useOptionStore().mapOption(employee?.namePrefix || '')} ${employee?.firstName || employee?.firstNameEN} ${employee?.lastName}`,
     }[opts?.locale || 'eng'] || '-'
   );
 }
@@ -225,6 +225,7 @@ function disableCheckAll() {
 <template>
   <q-table
     flat
+    id="table-employee"
     bordered
     row-key="id"
     v-bind="props"
@@ -273,6 +274,7 @@ function disableCheckAll() {
       >
         <q-th v-if="checkboxOn" class="relative-position">
           <q-checkbox
+            id="checkbox-check-all"
             v-if="checkAll"
             :disable="disableCheckAll()"
             :model-value="
@@ -305,6 +307,7 @@ function disableCheckAll() {
             class="absolute-right row items-center"
           >
             <q-btn
+              id="btn-change-all-status"
               flat
               dense
               rounded
@@ -339,6 +342,7 @@ function disableCheckAll() {
                     {{ $t(`taskOrder.status.Complete`) }}
                   </q-item>
                   <q-item
+                    id="menu-item-redo"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -358,6 +362,7 @@ function disableCheckAll() {
                     {{ $t(`taskOrder.status.Redo`) }}
                   </q-item>
                   <q-item
+                    id="menu-item-restart"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -379,6 +384,7 @@ function disableCheckAll() {
                 </q-list>
                 <q-list v-if="!validate" dense>
                   <q-item
+                    id="menu-item-success"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -398,6 +404,7 @@ function disableCheckAll() {
                     {{ $t(`taskOrder.status.Success`) }}
                   </q-item>
                   <q-item
+                    id="menu-item-failed"
                     clickable
                     v-close-popup
                     class="items-center"
@@ -480,6 +487,7 @@ function disableCheckAll() {
         <q-td>
           <span
             class="cursor-pointer link"
+            :id="`link-request-list-${props.row.request.code}`"
             @click="goToRequestList(props.row.request.id)"
           >
             {{ props.row.request.code }}
@@ -489,6 +497,7 @@ function disableCheckAll() {
         <q-td>
           <span
             class="cursor-pointer link"
+            :id="`link-quotation-${props.row.request.quotation?.code}`"
             @click="goToQuotation(props.row.request.quotation)"
           >
             {{ props.row.request.quotation?.code }}
@@ -496,7 +505,11 @@ function disableCheckAll() {
         </q-td>
 
         <q-td v-if="stepOn" class="text-left">
-          <div v-if="props.row._template" class="column text-left">
+          <div
+            v-if="props.row._template"
+            class="column text-left"
+            :id="`template-step-${props.row.request.code}`"
+          >
             <span>{{ props.row._template.templateName }}</span>
             <span class="app-text-muted text-caption">
               {{ $t('flow.stepNo', { msg: props.row._template.step }) }}
@@ -522,7 +535,10 @@ function disableCheckAll() {
                 </template>
               </q-img>
             </q-avatar>
-            <div class="column text-left q-ml-sm">
+            <div
+              class="column text-left q-ml-sm"
+              :id="`employee-name-${props.row.request.employee?.code}`"
+            >
               <div>
                 {{ getEmployeeName(props.row, { locale: $i18n.locale }) }}
               </div>
@@ -532,6 +548,7 @@ function disableCheckAll() {
               </div>
             </div>
             <Icon
+              :id="`icon-gender-${props.row.request.employee?.code}`"
               class="q-ml-md"
               :class="`app-text-${props.row.request.employee?.gender}`"
               :icon="`material-symbols:${props.row.request.employee?.gender}`"
@@ -539,13 +556,18 @@ function disableCheckAll() {
             />
           </div>
         </q-td>
-        <q-td>{{ calculateAge(props.row.request.employee?.dateOfBirth) }}</q-td>
-        <q-td>
+        <q-td :id="`employee-age-${props.row.request.employee?.code}`">
+          {{ calculateAge(props.row.request.employee?.dateOfBirth) }}
+        </q-td>
+        <q-td :id="`employee-nationality-${props.row.request.employee?.code}`">
           {{
             useOptionStore().mapOption(props.row.request.employee?.nationality)
           }}
         </q-td>
-        <q-td>
+        <q-td
+          :id="`quotation-due-date-${props.row.request.quotation?.code}`"
+          v-if="!statusOn"
+        >
           {{
             dateFormatJS({
               date: props.row.request.quotation?.dueDate,
@@ -555,13 +577,16 @@ function disableCheckAll() {
             })
           }}
         </q-td>
-        <q-td>
+        <q-td
+          :id="`expiration-date-${props.row.request.quotation?.code}`"
+          v-if="!statusOn"
+        >
           <ExpirationDate
             :expiration-date="new Date(props.row.request.quotation?.dueDate)"
           />
         </q-td>
 
-        <q-td>
+        <q-td v-if="!statusOn">
           <BadgeComponent
             v-if="props.row.request.quotation?.urgent"
             icon="mdi-fire"
diff --git a/src/pages/09_task-order/TableTaskOrder.vue b/src/pages/09_task-order/TableTaskOrder.vue
index 44fa01e7..fb787476 100644
--- a/src/pages/09_task-order/TableTaskOrder.vue
+++ b/src/pages/09_task-order/TableTaskOrder.vue
@@ -2,6 +2,8 @@
 import { ref } from 'vue';
 import { QTableProps, QTableSlots } from 'quasar';
 
+import { canAccess } from 'src/stores/utils';
+
 import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
 import BadgeComponent from 'src/components/BadgeComponent.vue';
 import KebabAction from 'src/components/shared/KebabAction.vue';
@@ -112,6 +114,7 @@ const emit = defineEmits<{
 </script>
 <template>
   <q-table
+    id="table-task-order"
     v-bind="props"
     :columns="column"
     bordered
@@ -131,7 +134,11 @@ const emit = defineEmits<{
         :props="props"
       >
         <q-th v-if="selection !== 'none'">
-          <q-checkbox v-model="props.selected" size="sm" />
+          <q-checkbox
+            id="checkbox-select-all-task"
+            v-model="props.selected"
+            size="sm"
+          />
         </q-th>
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           {{ col.label && $t(col.label) }}
@@ -147,13 +154,21 @@ const emit = defineEmits<{
     >
       <q-tr class="text-center" :class="{ urgent: props.row.urgent }">
         <q-td v-if="selection !== 'none'">
-          <q-checkbox v-model="props.selected" size="sm" />
+          <q-checkbox
+            :id="`checkbox-task-${props.row.code}`"
+            v-model="props.selected"
+            size="sm"
+          />
         </q-td>
         <q-td v-if="visibleColumns.includes('order')">
           {{ props.rowIndex + 1 }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('taskName')" class="text-left">
-          <div>
+        <q-td
+          v-if="visibleColumns.includes('taskName')"
+          class="text-left"
+          :id="`task-name-${props.row.code}`"
+        >
+          <div :id="`task-name-div-${props.row.code}`">
             {{ props.row.taskName || '-' }}
             <q-tooltip :delay="300">
               {{ props.row.taskName || '-' }}
@@ -168,31 +183,51 @@ const emit = defineEmits<{
             }}
           </div>
         </q-td>
-        <q-td v-if="visibleColumns.includes('issueBranch')">
+        <q-td
+          v-if="visibleColumns.includes('issueBranch')"
+          :id="`task-issue-branch-${props.row.code}`"
+        >
           {{
             $i18n.locale === 'eng'
               ? props.row.registeredBranch.nameEN || '-'
               : props.row.registeredBranch.name || '-'
           }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('institution')">
+        <q-td
+          v-if="visibleColumns.includes('institution')"
+          :id="`task-institution-${props.row.code}`"
+        >
           {{
             $i18n.locale === 'eng'
               ? props.row.institution.nameEN || '-'
               : props.row.institution.name || '-'
           }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('createdAt')">
+        <q-td
+          v-if="visibleColumns.includes('createdAt')"
+          :id="`task-created-at-${props.row.code}`"
+        >
           {{ dateFormatJS({ date: props.row.createdAt }) || '-' }}
           {{ dateFormatJS({ date: props.row.createdAt, timeOnly: true }) }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('createdBy')" class="text-left">
+        <q-td
+          v-if="visibleColumns.includes('createdBy')"
+          class="text-left"
+          :id="`task-created-by-${props.row.code}`"
+        >
           {{ getCreatedByName(props.row, $i18n) }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('contactTel')">
+        <q-td
+          v-if="visibleColumns.includes('contactTel')"
+          :id="`task-contact-tel-${props.row.code}`"
+        >
           {{ props.row.contactTel || '-' }}
         </q-td>
-        <q-td v-if="visibleColumns.includes('contactName')" class="text-left">
+        <q-td
+          v-if="visibleColumns.includes('contactName')"
+          class="text-left"
+          :id="`task-contact-name-${props.row.code}`"
+        >
           {{ props.row.contactName || '-' }}
         </q-td>
         <q-td v-if="visibleColumns.includes('taskStatus')">
@@ -200,11 +235,12 @@ const emit = defineEmits<{
             hide-icon
             :hsla-color="taskOrderStatus(props.row.taskOrderStatus, 'color')"
             :title="$t(taskOrderStatus(props.row.taskOrderStatus, 'status'))"
+            :id="`badge-task-status-${props.row.code}`"
           />
         </q-td>
         <q-td v-if="selection === 'none'">
           <q-btn
-            :id="`btn-eye-${props.row.taskName}`"
+            :id="`btn-view-task-${props.row.code}`"
             icon="mdi-eye-outline"
             size="sm"
             dense
@@ -214,9 +250,12 @@ const emit = defineEmits<{
           />
           <KebabAction
             v-if="
-              !receive && props.row.taskOrderStatus === TaskOrderStatus.Pending
+              !receive &&
+              props.row.taskOrderStatus === TaskOrderStatus.Pending &&
+              canAccess('taskOrder', 'edit')
             "
-            :idName="`btn-kebab-${props.row.taskName}`"
+            :hide-delete="!canAccess('taskOrder', 'create')"
+            :idName="`btn-kebab-${props.row.code}`"
             status="'ACTIVE'"
             hide-toggle
             @view="$emit('view', props.row)"
@@ -228,6 +267,7 @@ const emit = defineEmits<{
           <q-btn
             dense
             flat
+            :id="`btn-sub-row-${props.row.code}`"
             class="rounded"
             @click.stop="
               () => {
@@ -264,8 +304,11 @@ const emit = defineEmits<{
           :status="$t(taskOrderStatus(props.row.taskOrderStatus, 'status'))"
           :badge-color="taskOrderStatus(props.row.taskOrderStatus, 'color')"
           hide-preview
+          :hideKebabDelete="!canAccess('taskOrder', 'create')"
           :hide-action="
-            receive || props.row.taskOrderStatus !== TaskOrderStatus.Pending
+            receive ||
+            props.row.taskOrderStatus !== TaskOrderStatus.Pending ||
+            !canAccess('taskOrder', 'edit')
           "
           :code="props.row.code"
           :title="props.row.taskName"
diff --git a/src/pages/09_task-order/TaskStatusComponent.vue b/src/pages/09_task-order/TaskStatusComponent.vue
index 30a7195b..5b223cbd 100644
--- a/src/pages/09_task-order/TaskStatusComponent.vue
+++ b/src/pages/09_task-order/TaskStatusComponent.vue
@@ -60,16 +60,25 @@ function inactiveCheck() {
 </script>
 <template>
   <div
+    :id="`readonly-status-${status}`"
+    :for="`readonly-status-${status}`"
     v-if="readonly"
     class="row rounded bordered surface-2 items-center justify-center q-pa-xs no-wrap"
     :style="`color: hsl(var(--${currStatus?.color}-bg))`"
   >
-    <q-icon :name="currStatus?.icon" class="q-pr-xs" size="xs" />
-    {{ $t(`taskOrder.status.${status}`) }}
+    <q-icon
+      :id="`readonly-status-icon-${status}`"
+      :name="currStatus?.icon"
+      class="q-pr-xs"
+      size="xs"
+    />
+    <span :id="`readonly-status-label-${status}`">{{ $t(`taskOrder.status.${status}`) }}</span>
   </div>
 
   <div v-else class="row items-center justify-center no-wrap">
     <q-btn-dropdown
+      :id="`btn-dropdown-status-${status}`"
+      :for="`btn-dropdown-status-${status}`"
       dense
       unelevated
       :label="
@@ -110,6 +119,8 @@ function inactiveCheck() {
     >
       <q-list v-if="!noAction" dense>
         <q-item
+          :for="`menu-item-status-${v.value}`"
+          :id="`menu-item-status-${v.value}`"
           v-for="(v, index) in type === 'order'
             ? {
                 Success: taskStatusOrderToggle.filter(
@@ -147,6 +158,8 @@ function inactiveCheck() {
     </q-btn-dropdown>
 
     <q-btn
+      :id="`btn-failed-remark-${status}`"
+      :for="`btn-failed-remark-${status}`"
       v-if="currStatus?.value === TaskStatus.Failed"
       flat
       dense
@@ -186,9 +199,9 @@ function inactiveCheck() {
 }
 
 :deep(
-    .hide-icon
-      i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container
-  ) {
+  .hide-icon
+    i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container
+) {
   display: none;
 }
 </style>
diff --git a/src/pages/09_task-order/document_view/MainPage.vue b/src/pages/09_task-order/document_view/MainPage.vue
index b631dbb1..fc936db4 100644
--- a/src/pages/09_task-order/document_view/MainPage.vue
+++ b/src/pages/09_task-order/document_view/MainPage.vue
@@ -202,40 +202,44 @@ onMounted(async () => {
     })
     .reduce(
       (a, c) => {
-        const priceNoVat = c.product.serviceChargeVatIncluded
-          ? c.pricePerUnit / (1 + (config.value?.vat || 0.07))
-          : c.pricePerUnit;
-        const adjustedPriceWithVat = precisionRound(
-          priceNoVat * (1 + (config.value?.vat || 0.07)),
-        );
-        const adjustedPriceNoVat =
-          adjustedPriceWithVat / (1 + (config.value?.vat || 0.07));
-        const priceDiscountNoVat = adjustedPriceNoVat * c.amount - c.discount;
+        const vatFactor = c.product.serviceChargeCalcVat
+          ? (config.value?.vat ?? 0.07)
+          : 0;
 
-        const rawVatTotal = priceDiscountNoVat * (config.value?.vat || 0.07);
-        const rawVat = rawVatTotal / c.amount;
+        const pricePerUnit =
+          precisionRound(c.product.serviceCharge * (1 + vatFactor)) /
+          (1 + vatFactor);
+
+        const amount = c.amount;
+        const discount = c.discount || 0;
+
+        const price =
+          (pricePerUnit * amount * (1 + vatFactor) - discount) /
+          (1 + vatFactor);
+
+        const vat = price * vatFactor;
 
         product.value.push({
           id: c.product.id,
           code: c.product.code,
           detail: c.product.name,
-          priceUnit: precisionRound(priceNoVat),
+          priceUnit: precisionRound(pricePerUnit),
           amount: c.amount,
           discount: c.discount,
-          vat: c.product.serviceChargeCalcVat ? precisionRound(rawVat) : 0,
+          vat: c.product.serviceChargeCalcVat ? precisionRound(vat) : 0,
           value: precisionRound(
-            priceNoVat * c.amount +
-              (c.product.serviceChargeCalcVat ? rawVatTotal : 0),
+            pricePerUnit * c.amount +
+              (c.product.serviceChargeCalcVat ? vat : 0),
           ),
         });
 
-        a.totalPrice = a.totalPrice + priceDiscountNoVat;
-        a.totalDiscount = a.totalDiscount + Number(c.discount);
-        a.vat = c.product.calcVat ? a.vat + rawVatTotal : a.vat;
-        a.vatExcluded = c.product.calcVat
+        a.totalPrice = precisionRound(a.totalPrice + price + discount);
+        a.totalDiscount = precisionRound(a.totalDiscount + discount);
+        a.vat = precisionRound(a.vat + vat);
+        a.vatExcluded = c.product.serviceChargeCalcVat
           ? a.vatExcluded
-          : precisionRound(a.vatExcluded + priceDiscountNoVat);
-        a.finalPrice = a.totalPrice - a.totalDiscount + a.vat;
+          : precisionRound(a.vatExcluded + price);
+        a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
         return a;
       },
       {
@@ -311,7 +315,7 @@ function closeAble() {
           border-bottom: 2px solid var(--main);
         "
       >
-        {{ $t('taskOrder.goodReceipt') }}
+        {{ $t('preview.productList') }}
       </span>
 
       <table ref="elements" class="q-mb-sm" cellpadding="0" style="width: 100%">
@@ -335,7 +339,9 @@ function closeAble() {
               {{ formatNumberDecimal(v.priceUnit, 2) }}
             </td>
             <td style="text-align: right">
-              {{ formatNumberDecimal(v.discount, 2) }}
+              <template v-if="v.discount !== 0">
+                {{ formatNumberDecimal(v.discount, 2) }} ฿
+              </template>
             </td>
             <td style="text-align: right">
               {{ formatNumberDecimal(v.vat, 2) }}
@@ -346,7 +352,6 @@ function closeAble() {
           </tr>
         </tbody>
       </table>
-
       <table
         style="width: 40%; margin-left: auto"
         class="q-mb-md"
@@ -398,7 +403,9 @@ function closeAble() {
             <td class="text-right">
               {{
                 formatNumberDecimal(
-                  summaryPrice.totalPrice - summaryPrice.totalDiscount,
+                  summaryPrice.totalPrice -
+                    summaryPrice.totalDiscount -
+                    summaryPrice.vatExcluded,
                   2,
                 )
               }}
diff --git a/src/pages/09_task-order/document_view/ViewHeader.vue b/src/pages/09_task-order/document_view/ViewHeader.vue
index 0d1a89c3..9097cc89 100644
--- a/src/pages/09_task-order/document_view/ViewHeader.vue
+++ b/src/pages/09_task-order/document_view/ViewHeader.vue
@@ -64,8 +64,8 @@ defineProps<{
             })
           }}
         </span>
-        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
-        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
+        <span>{{ $t('branch.form.taxNo') }} {{ branch.taxNo }}</span>
+        <span>{{ $t('taskOrder.telephone') }} {{ branch.telephoneNo }}</span>
         <span>{{ branch.webUrl }}</span>
       </article>
       <article>
diff --git a/src/pages/09_task-order/expansion/AdditionalFileExpansion.vue b/src/pages/09_task-order/expansion/AdditionalFileExpansion.vue
index b14ee28a..2d3ebdea 100644
--- a/src/pages/09_task-order/expansion/AdditionalFileExpansion.vue
+++ b/src/pages/09_task-order/expansion/AdditionalFileExpansion.vue
@@ -25,6 +25,7 @@ const fileData = defineModel<
 </script>
 <template>
   <q-expansion-item
+    id="expansion-additional-file"
     dense
     class="overflow-hidden bordered full-width"
     switch-toggle-side
@@ -41,6 +42,7 @@ const fileData = defineModel<
 
     <main class="q-px-md q-py-sm surface-1">
       <UploadFileSection
+        id="upload-additional-file"
         multiple
         :layout="$q.screen.gt.sm ? 'column' : 'row'"
         :readonly
diff --git a/src/pages/09_task-order/expansion/DocumentExpansion.vue b/src/pages/09_task-order/expansion/DocumentExpansion.vue
index cb646968..44bd0431 100644
--- a/src/pages/09_task-order/expansion/DocumentExpansion.vue
+++ b/src/pages/09_task-order/expansion/DocumentExpansion.vue
@@ -22,6 +22,7 @@ const contactTel = defineModel<string>('contactTel');
 </script>
 <template>
   <q-expansion-item
+    id="expansion-document"
     default-opened
     dense
     class="overflow-hidden bordered full-width"
@@ -38,13 +39,16 @@ const contactTel = defineModel<string>('contactTel');
 
     <main class="q-px-md q-py-sm surface-1 row q-col-gutter-sm">
       <SelectBranch
+        id="select-issue-branch"
         :readonly
+        required
         class="col-md-4 col-12"
         :label="`${$t('taskOrder.issueBranch')}${$i18n.locale === 'tha' ? $t('taskOrder.title') : ''}`"
         v-model:value="registeredBranchId"
         auto-select-on-single
       />
       <SelectInstitution
+        id="select-agencies"
         :readonly
         required
         class="col-md-4 col-12"
@@ -55,6 +59,7 @@ const contactTel = defineModel<string>('contactTel');
         auto-select-on-single
       />
       <DatePicker
+        id="datepicker-issue-date"
         :label="$t('taskOrder.issueDate')"
         class="col-md-2 col-6"
         :model-value="issueDate || new Date(Date.now())"
@@ -62,6 +67,7 @@ const contactTel = defineModel<string>('contactTel');
         :disabled="!readonly"
       />
       <q-input
+        id="input-task-code"
         :label="$t('taskOrder.code')"
         outlined
         dense
@@ -72,6 +78,7 @@ const contactTel = defineModel<string>('contactTel');
       />
 
       <q-input
+        id="input-task-name"
         :readonly
         :label="$t('general.name', { msg: $t('taskOrder.title') })"
         outlined
@@ -80,6 +87,7 @@ const contactTel = defineModel<string>('contactTel');
         v-model="taskName"
       />
       <q-input
+        id="input-contact-name"
         :readonly
         :label="$t('taskOrder.contactName')"
         outlined
@@ -88,6 +96,7 @@ const contactTel = defineModel<string>('contactTel');
         v-model="contactName"
       />
       <q-input
+        id="input-contact-tel"
         :readonly
         :label="$t('general.telephone')"
         outlined
@@ -96,6 +105,7 @@ const contactTel = defineModel<string>('contactTel');
         v-model="contactTel"
       />
       <q-input
+        id="input-made-by"
         :readonly
         :label="$t('taskOrder.madeBy')"
         outlined
diff --git a/src/pages/09_task-order/expansion/PaymentExpansion.vue b/src/pages/09_task-order/expansion/PaymentExpansion.vue
index 79d1f295..a2f88f84 100644
--- a/src/pages/09_task-order/expansion/PaymentExpansion.vue
+++ b/src/pages/09_task-order/expansion/PaymentExpansion.vue
@@ -1,18 +1,14 @@
 <script lang="ts" setup>
 import QuotationFormInfo from 'src/pages/05_quotation/QuotationFormInfo.vue';
+import { PayCondition } from 'src/stores/quotations/types';
 
 defineProps<{
   complete?: boolean;
 }>();
 
-const payType = defineModel<
-  | 'Full'
-  | 'Split'
-  | 'SplitCustom'
-  | 'BillFull'
-  | 'BillSplit'
-  | 'BillSplitCustom'
->('payType', { default: 'Full' });
+const payType = defineModel<PayCondition>('payType', {
+  default: PayCondition.Full,
+});
 const paySplit = defineModel<{ no: number; name?: string; amount: number }[]>(
   'paySplit',
   { default: [] },
@@ -36,6 +32,7 @@ const summaryPrice = defineModel<{
 </script>
 <template>
   <q-expansion-item
+    id="expansion-payment"
     dense
     class="overflow-hidden bordered full-width"
     switch-toggle-side
@@ -51,6 +48,7 @@ const summaryPrice = defineModel<{
 
     <main class="q-px-md q-py-sm surface-1">
       <QuotationFormInfo
+        id="form-info-payment"
         task-order
         :task-order-complete="complete"
         v-model:pay-type="payType"
diff --git a/src/pages/09_task-order/expansion/ProductExpansion.vue b/src/pages/09_task-order/expansion/ProductExpansion.vue
index 97a1f3bc..5d2b4887 100644
--- a/src/pages/09_task-order/expansion/ProductExpansion.vue
+++ b/src/pages/09_task-order/expansion/ProductExpansion.vue
@@ -14,6 +14,10 @@ import { storeToRefs } from 'pinia';
 import BadgeComponent from 'src/components/BadgeComponent.vue';
 import { TaskStatus } from 'src/stores/task-order/types';
 
+import { useTaskOrderForm } from '../form';
+
+const taskOrderFormStore = useTaskOrderForm();
+
 const currentBtnOpen = ref<boolean[]>([]);
 const configStore = useConfigStore();
 const { data: config } = storeToRefs(configStore);
@@ -61,60 +65,28 @@ function openList(index: number) {
 }
 
 function calcPricePerUnit(product: RequestWork['productService']['product']) {
-  const val = props.creditNote
-    ? props.agentPrice
-      ? product.agentPrice
-      : product.price
-    : product.serviceCharge;
-
-  if (
-    product[
-      props.creditNote
-        ? props.agentPrice
-          ? 'agentPriceCalcVat'
-          : 'calcVat'
-        : 'serviceChargeCalcVat'
-    ]
-  ) {
-    return val / (1 + (config.value?.vat || 0.07));
-  } else {
-    return val;
-  }
+  return product.serviceCharge;
 }
 
 function calcPrice(
   product: RequestWork['productService']['product'],
   amount: number,
 ) {
-  const pricePerUnit = props.creditNote
-    ? props.agentPrice
-      ? product.agentPrice
-      : product.price
-    : product.serviceCharge;
-  const discount =
-    taskProduct.value.find((v) => v.productId === product.id)?.discount || 0;
-  const priceNoVat = product[
-    props.creditNote
-      ? props.agentPrice
-        ? 'agentPriceVatIncluded'
-        : 'vatIncluded'
-      : 'serviceChargeVatIncluded'
-  ]
-    ? pricePerUnit / (1 + (config.value?.vat || 0.07))
-    : pricePerUnit;
-  const priceDiscountNoVat = priceNoVat * amount - discount;
-
-  const rawVatTotal = product[
-    props.creditNote
-      ? props.agentPrice
-        ? 'agentPriceCalcVat'
-        : 'calcVat'
-      : 'serviceChargeCalcVat'
-  ]
-    ? priceDiscountNoVat * (config.value?.vat || 0.07)
+  const vatFactor = product.serviceChargeCalcVat
+    ? (config.value?.vat ?? 0.07)
     : 0;
 
-  return precisionRound(priceNoVat * amount + rawVatTotal);
+  const discount =
+    taskProduct.value.find((v) => v.productId === product.id)?.discount || 0;
+
+  const pricePerUnit = precisionRound(product.serviceCharge);
+
+  const price =
+    (pricePerUnit * amount * (1 + vatFactor) - discount) / (1 + vatFactor);
+
+  const vat = price * vatFactor;
+
+  return price + vat;
 }
 
 function taskOrderStatus(value: TaskStatus) {
@@ -139,6 +111,7 @@ function taskOrderStatus(value: TaskStatus) {
 </script>
 <template>
   <q-expansion-item
+    id="expansion-product-list"
     dense
     class="overflow-hidden bordered full-width"
     switch-toggle-side
@@ -151,9 +124,11 @@ function taskOrderStatus(value: TaskStatus) {
       <span
         class="row items-center justify-between full-width"
         style="min-height: 31.01px"
+        id="header-product-list"
       >
         {{ $t('general.information', { msg: $t('taskOrder.productList') }) }}
         <AddButton
+          id="btn-add-product"
           icon-only
           @click.stop="$emit('addProduct')"
           v-if="!readonly"
@@ -163,6 +138,7 @@ function taskOrderStatus(value: TaskStatus) {
 
     <main class="q-px-md q-py-sm surface-1">
       <q-table
+        id="table-product-list"
         :columns="
           creditNote
             ? productColumn.filter(
@@ -208,7 +184,7 @@ function taskOrderStatus(value: TaskStatus) {
           } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
         >
           <q-tr class="text-center">
-            <q-td>
+            <q-td :id="`product-order-${props.rowIndex}`">
               {{ props.rowIndex + 1 }}
             </q-td>
             <q-td>
@@ -234,20 +210,21 @@ function taskOrderStatus(value: TaskStatus) {
             </q-td>
             <q-td class="text-left" v-if="!creditNote">
               <BadgeComponent
+                :id="`badge-status-${props.row.product.code}`"
                 hide-icon
                 :hsla-color="taskOrderStatus(props.row.product.taskStatus)"
                 :title="`${$t(`taskOrder.status.${props.row.product.taskStatus}`)} ${!!props.row.product.totalNotStatusComplete ? $t('general.totalPeople', { meg: props.row.product.totalNotStatusComplete }) : ''}`"
               />
             </q-td>
 
-            <q-td>
+            <q-td :id="`product-amount-${props.row.product.code}`">
               {{ props.row.list.length }}
             </q-td>
-            <q-td class="text-right">
+            <q-td :id="`product-price-per-unit-${props.row.product.code}`" class="text-right">
               {{
                 formatNumberDecimal(
                   calcPricePerUnit(props.row.product) +
-                    (props.row.product.calcVat
+                    (props.row.product.serviceChargeCalcVat
                       ? calcPricePerUnit(props.row.product) *
                         (config?.vat || 0.07)
                       : 0),
@@ -258,6 +235,7 @@ function taskOrderStatus(value: TaskStatus) {
             <!-- TODO: display price detail -->
             <q-td align="center" v-if="!creditNote">
               <q-input
+                :id="`input-discount-${props.row.product.code}`"
                 :readonly
                 :bg-color="readonly ? 'transparent' : ''"
                 dense
@@ -295,37 +273,49 @@ function taskOrderStatus(value: TaskStatus) {
               />
             </q-td>
             <!-- before vat -->
-            <q-td class="text-right" v-if="!creditNote">
+            <q-td
+              :id="`product-price-before-vat-${props.row.product.code}`"
+              class="text-right"
+              v-if="!creditNote"
+            >
               {{
                 formatNumberDecimal(
-                  calcPricePerUnit(props.row.product) * props.row.list.length -
-                    (taskProduct.find(
-                      (v) => v.productId === props.row.product.id,
-                    )?.discount || 0),
-                  2,
+                  props.row.product.serviceChargeCalcVat
+                    ? (calcPricePerUnit(props.row.product) *
+                        props.row.list.length *
+                        (1 + (config?.vat || 0.07))) /
+                        (1 + (config?.vat || 0.07))
+                    : calcPricePerUnit(props.row.product) *
+                        props.row.list.length -
+                        taskProduct.find(
+                          (v) => v.productId === props.row.product.id,
+                        )?.discount || 0,
                 )
               }}
             </q-td>
             <!-- vat -->
-            <q-td class="text-right" v-if="!creditNote">
+            <q-td
+              :id="`product-vat-${props.row.product.code}`"
+              class="text-right"
+              v-if="!creditNote"
+            >
               {{
                 formatNumberDecimal(
-                  props.row.product.calcVat
-                    ? precisionRound(
-                        (calcPricePerUnit(props.row.product) *
-                          props.row.list.length -
-                          (taskProduct.find(
-                            (v) => v.productId === props.row.product.id,
-                          )?.discount || 0)) *
-                          (config?.vat || 0.07),
-                      )
+                  props.row.product.serviceChargeCalcVat
+                    ? ((calcPricePerUnit(props.row.product) *
+                        props.row.list.length *
+                        (1 + (config?.vat || 0.07)) -
+                        taskProduct.find(
+                          (v) => v.productId === props.row.product.id,
+                        )?.discount || 0) /
+                        (1 + (config?.vat || 0.07))) *
+                        0.07
                     : 0,
-                  2,
                 )
               }}
             </q-td>
             <!-- total -->
-            <q-td class="text-right">
+            <q-td :id="`product-total-price-${props.row.product.code}`" class="text-right">
               {{
                 formatNumberDecimal(
                   calcPrice(props.row.product, props.row.list.length),
@@ -335,6 +325,7 @@ function taskOrderStatus(value: TaskStatus) {
             </q-td>
             <q-td>
               <q-btn
+                :id="`btn-toggle-employee-${props.row.product.code}`"
                 dense
                 flat
                 class="rounded"
@@ -358,6 +349,7 @@ function taskOrderStatus(value: TaskStatus) {
           <q-tr v-show="currentBtnOpen[props.rowIndex]" :props="props">
             <q-td colspan="100%" style="padding: 16px">
               <TableEmployee
+                :id="`table-employee-in-product-${props.row.product.code}`"
                 :step-on="!creditNote"
                 :status-on="creditNote"
                 :rows="props.row.list"
@@ -375,7 +367,9 @@ function taskOrderStatus(value: TaskStatus) {
             })
           }}
         </span>
-        <div class="surface-3 q-px-sm rounded">{{ taskList.length }}</div>
+        <div class="surface-3 q-px-sm rounded" id="total-product-count">
+          {{ taskList.length }}
+        </div>
       </div>
     </main>
   </q-expansion-item>
diff --git a/src/pages/09_task-order/expansion/RemarkExpansion.vue b/src/pages/09_task-order/expansion/RemarkExpansion.vue
index 2fe12e0d..986ef074 100644
--- a/src/pages/09_task-order/expansion/RemarkExpansion.vue
+++ b/src/pages/09_task-order/expansion/RemarkExpansion.vue
@@ -33,6 +33,7 @@ const getToolbarConfig = computed(() => {
 </script>
 <template>
   <q-expansion-item
+    id="expansion-remark"
     dense
     class="overflow-hidden bordered full-width"
     switch-toggle-side
@@ -48,6 +49,7 @@ const getToolbarConfig = computed(() => {
 
     <main class="surface-1 q-pa-md full-width">
       <q-editor
+        id="editor-remark"
         dense
         :readonly="readonly || !remarkWrite"
         :model-value="
@@ -90,6 +92,7 @@ const getToolbarConfig = computed(() => {
         <template v-if="!readonly" v-slot:toggle>
           <div class="text-caption row no-wrap q-px-sm">
             <MainButton
+              id="btn-remark-view"
               :solid="!remarkWrite"
               icon="mdi-eye-outline"
               color="0 0% 40%"
@@ -102,6 +105,7 @@ const getToolbarConfig = computed(() => {
               {{ $t('general.view', { msg: $t('general.example') }) }}
             </MainButton>
             <MainButton
+              id="btn-remark-edit"
               :solid="remarkWrite"
               icon="mdi-pencil-outline"
               color="0 0% 40%"
diff --git a/src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue b/src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue
index d05568e5..ce22851c 100644
--- a/src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue
+++ b/src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue
@@ -47,11 +47,17 @@ defineProps<{
       <div class="row q-col-gutter-sm q-px-md q-py-sm">
         <DataDisplay
           class="col-md col-6"
+          id="dd-recipient"
           :label="$t('taskOrder.recipientOrSender')"
         >
           <template #value>
             <q-avatar size="md" class="q-mr-xs">
-              <q-img class="text-center" :ratio="1" :src="contactUrl">
+              <q-img
+                :id="`img-avatar-${contactName}`"
+                class="text-center"
+                :ratio="1"
+                :src="contactUrl"
+              >
                 <template #error>
                   <div
                     class="no-padding full-width full-height flex items-center justify-center"
@@ -59,6 +65,7 @@ defineProps<{
                   >
                     <q-img
                       v-if="gender"
+                      :id="`img-gender-${contactName}`"
                       :src="
                         gender === 'male'
                           ? '/no-img-man.png'
@@ -67,6 +74,7 @@ defineProps<{
                     />
                     <q-icon
                       v-else
+                      :id="`icon-avatar-${contactName}`"
                       size="sm"
                       name="mdi-account-outline"
                       style="color: white"
@@ -81,18 +89,21 @@ defineProps<{
 
         <DataDisplay
           class="col-md col-6"
+          id="dd-telephone"
           :label="$t('general.telephone')"
           :value="contactTel || '-'"
         />
 
         <DataDisplay
           class="col-md col-6"
+          id="dd-email"
           :label="$t('form.email')"
           :value="email || '-'"
         />
 
         <DataDisplay
           class="col-md col-6"
+          id="dd-work-start-date"
           :label="$t('taskOrder.workStartDate')"
         >
           <template #value>
@@ -106,6 +117,7 @@ defineProps<{
 
         <DataDisplay
           class="col-md col-6"
+          id="dd-work-submission-date"
           :label="$t('taskOrder.workSubmissionDate')"
         >
           <template #value>
@@ -117,9 +129,14 @@ defineProps<{
           </template>
         </DataDisplay>
 
-        <DataDisplay class="col-md col-6" :label="$t('general.status')">
+        <DataDisplay
+          id="dd-status"
+          class="col-md col-6"
+          :label="$t('general.status')"
+        >
           <template #value>
             <BadgeComponent
+              :id="`badge-status-${contactName}`"
               v-if="status"
               hide-icon
               :title="
diff --git a/src/pages/09_task-order/order_view/MainPage.vue b/src/pages/09_task-order/order_view/MainPage.vue
index 8d459fc8..8de2e5cd 100644
--- a/src/pages/09_task-order/order_view/MainPage.vue
+++ b/src/pages/09_task-order/order_view/MainPage.vue
@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { api } from 'src/boot/axios';
 import { Lang } from 'src/utils/ui';
-import { baseUrl } from 'stores/utils';
+import { baseUrl, canAccess } from 'stores/utils';
 
 import TaskStatusComponent from '../TaskStatusComponent.vue';
 import StateButton from 'src/components/button/StateButton.vue';
@@ -128,32 +128,33 @@ function getPrice(
     })[];
   }[],
 ) {
-  return list.reduce(
+  const value = list.reduce(
     (a, c) => {
-      const pricePerUnit = c.product.serviceCharge;
+      const vatFactor = c.product.serviceChargeCalcVat
+        ? (config.value?.vat ?? 0.07)
+        : 0;
+
+      const pricePerUnit =
+        precisionRound(c.product.serviceCharge * (1 + vatFactor)) /
+        (1 + vatFactor);
+
       const amount = c.list.length;
       const discount =
         taskProduct.value.find((v) => v.productId === c.product.id)?.discount ||
         0;
-      const priceNoVat = c.product.serviceChargeVatIncluded
-        ? pricePerUnit / (1 + (config.value?.vat || 0.07))
-        : pricePerUnit;
-      const adjustedPriceWithVat = precisionRound(
-        priceNoVat * (1 + (config.value?.vat || 0.07)),
-      );
-      const adjustedPriceNoVat =
-        adjustedPriceWithVat / (1 + (config.value?.vat || 0.07));
-      const priceDiscountNoVat = adjustedPriceNoVat * amount - discount;
 
-      const rawVatTotal = priceDiscountNoVat * (config.value?.vat || 0.07);
+      const price =
+        (pricePerUnit * amount * (1 + vatFactor) - discount) / (1 + vatFactor);
 
-      a.totalPrice = a.totalPrice + priceDiscountNoVat;
-      a.totalDiscount = a.totalDiscount + Number(discount);
-      a.vat = c.product.serviceChargeCalcVat ? a.vat + rawVatTotal : a.vat;
+      const vat = price * vatFactor;
+
+      a.totalPrice = precisionRound(a.totalPrice + price + discount);
+      a.totalDiscount = precisionRound(a.totalDiscount + discount);
+      a.vat = precisionRound(a.vat + vat);
       a.vatExcluded = c.product.serviceChargeCalcVat
         ? a.vatExcluded
-        : precisionRound(a.vatExcluded + priceDiscountNoVat);
-      a.finalPrice = a.totalPrice - a.totalDiscount + a.vat;
+        : precisionRound(a.vatExcluded + price);
+      a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
       return a;
     },
     {
@@ -164,6 +165,8 @@ function getPrice(
       finalPrice: 0,
     },
   );
+
+  return value;
 }
 
 function getTemplateData(
@@ -811,7 +814,7 @@ watch(
     >
       <section class="banner" :class="{ dark: $q.dark.isActive }"></section>
       <div style="flex: 1" class="row items-center">
-        <RouterLink to="/task-order">
+        <RouterLink to="/task-order" id="link-task-order">
           <q-img src="/icons/favicon-512x512.png" width="3rem" />
         </RouterLink>
         <span class="column text-h6 text-bold q-ml-md">
@@ -860,6 +863,7 @@ watch(
             <!-- TODO: replace step and status -->
             <StateButton
               v-for="i in statusTabForm"
+              :id="`btn-status-${i.title}`"
               :key="i.title"
               :label="$t(`taskOrder.${i.title}`)"
               :status-active="i.active?.()"
@@ -913,6 +917,7 @@ watch(
             "
           >
             <DocumentExpansion
+              id="expansion-document"
               :readonly="!['create', 'edit'].includes(state.mode || '')"
               v-model:registered-branch-id="currentFormData.registeredBranchId"
               v-model:institution-id="currentFormData.institutionId"
@@ -932,6 +937,7 @@ watch(
             />
           </q-form>
           <ProductExpansion
+            id="expansion-product"
             ref="refProductExpansion"
             v-if="
               view === TaskOrderStatus.Pending ||
@@ -944,6 +950,7 @@ watch(
           />
 
           <PaymentExpansion
+            id="expansion-payment"
             v-model:summary-price="summaryPrice"
             :complete="view === TaskOrderStatus.Complete"
             v-if="
@@ -953,6 +960,7 @@ watch(
           />
 
           <AdditionalFileExpansion
+            id="expansion-additional-file"
             :readonly="!['create', 'edit'].includes(state.mode || '')"
             v-if="
               view === TaskOrderStatus.Pending ||
@@ -1010,8 +1018,8 @@ watch(
             "
           />
           <!-- TODO: blind remark, urgent -->
-          {{ console.log(taskListGroup) }}
           <RemarkExpansion
+            id="expansion-remark"
             v-if="
               view === TaskOrderStatus.Pending ||
               view === TaskOrderStatus.Complete
@@ -1036,6 +1044,7 @@ watch(
             "
           >
             <InfoMessengerExpansion
+              :id="`expansion-messenger-${messengerIndex}`"
               v-for="(v, messengerIndex) in messengerListGroup"
               :key="messengerIndex"
               :gender="getMessengerName(v.responsibleUser, { gender: true })"
@@ -1071,6 +1080,7 @@ watch(
                   class="bordered-b"
                 >
                   <q-expansion-item
+                    :id="`expansion-product-${productIndex}`"
                     dense
                     class="overflow-hidden"
                     switch-toggle-side
@@ -1143,13 +1153,15 @@ watch(
                           validate
                           step-on
                           :checkbox-on="
-                            view === TaskOrderStatus.Validate &&
-                            (fullTaskOrder?.userTask.find(
-                              (l) => l.userId === v.responsibleUser.id,
-                            )?.userTaskStatus === UserTaskStatus.Submit ||
-                              fullTaskOrder?.userTask.find(
-                                (l) => l.userId === v.responsibleUser.id,
-                              )?.userTaskStatus === UserTaskStatus.Restart)
+                            canAccess('taskOrder', 'edit')
+                              ? view === TaskOrderStatus.Validate &&
+                                (fullTaskOrder?.userTask.find(
+                                  (l) => l.userId === v.responsibleUser.id,
+                                )?.userTaskStatus === UserTaskStatus.Submit ||
+                                  fullTaskOrder?.userTask.find(
+                                    (l) => l.userId === v.responsibleUser.id,
+                                  )?.userTaskStatus === UserTaskStatus.Restart)
+                              : false
                           "
                           :check-all="
                             (view === TaskOrderStatus.Validate &&
@@ -1176,7 +1188,10 @@ watch(
                           <template #append="{ props: subProps }">
                             <TaskStatusComponent
                               :key="subProps.row.id"
-                              :no-action="view !== TaskOrderStatus.Validate"
+                              :no-action="
+                                view !== TaskOrderStatus.Validate ||
+                                !canAccess('taskOrder', 'edit')
+                              "
                               type="order"
                               :readonly="
                                 (() => {
@@ -1239,6 +1254,7 @@ watch(
       <nav class="row justify-end">
         <MainButton
           class="q-mr-auto"
+          id="btn-view-example"
           v-if="currentFormData.id"
           outlined
           icon="mdi-play-box-outline"
@@ -1253,26 +1269,35 @@ watch(
           {{ $t('general.view', { msg: $t('general.example') }) }}
         </MainButton>
         <div class="row" style="gap: var(--size-2)">
-          <UndoButton outlined @click="undo()" v-if="state.mode === 'edit'" />
+          <UndoButton
+            id="btn-undo"
+            outlined
+            @click="undo()"
+            v-if="state.mode === 'edit'"
+          />
           <CancelButton
             v-if="state.mode !== 'edit'"
             :label="$t('dialog.action.close')"
+            id="btn-close"
             outlined
             @click="closeTab()"
           />
           <template
             v-if="
-              fullTaskOrder?.taskOrderStatus === TaskOrderStatus.Pending ||
-              state.mode === 'create'
+              (fullTaskOrder?.taskOrderStatus === TaskOrderStatus.Pending ||
+                state.mode === 'create') &&
+              canAccess('taskOrder', 'edit')
             "
           >
             <SaveButton
+              id="btn-save"
               v-if="state.mode && ['create', 'edit'].includes(state.mode)"
               @click="() => formDocument.submit()"
               solid
             />
             <EditButton
               v-else
+              id="btn-edit"
               class="no-print"
               @click="state.mode = 'edit'"
               solid
@@ -1280,9 +1305,11 @@ watch(
           </template>
           <SaveButton
             v-if="
+              canAccess('taskOrder', 'edit') &&
               state.mode !== 'create' &&
               view === TaskOrderStatus.Validate &&
-              fullTaskOrder?.taskOrderStatus !== TaskOrderStatus.Pending
+              fullTaskOrder?.taskOrderStatus !== TaskOrderStatus.Pending &&
+              canAccess('taskOrder', 'edit')
             "
             :disabled="
               !fullTaskOrder?.taskList.some((t) =>
@@ -1317,6 +1344,7 @@ watch(
             "
             :label="$t('taskOrder.confirmEndWork')"
             icon="mdi-check"
+            id="btn-confirm-end-work"
             solid
           ></SaveButton>
         </div>
@@ -1326,6 +1354,7 @@ watch(
 
   <!-- SEC: Dialog -->
   <SelectReadyRequestWork
+    id="dialog-select-request-work"
     :task-list-group="taskListGroup"
     :fetch-params="{ readyToTask: true }"
     v-model:open="pageState.productDialog"
diff --git a/src/pages/09_task-order/receive_view/FailRemarkDialog.vue b/src/pages/09_task-order/receive_view/FailRemarkDialog.vue
index eb8869d9..a9988d8c 100644
--- a/src/pages/09_task-order/receive_view/FailRemarkDialog.vue
+++ b/src/pages/09_task-order/receive_view/FailRemarkDialog.vue
@@ -98,6 +98,7 @@ function tooltip(id: string) {
     <main class="q-py-sm q-px-md scroll">
       <q-select
         :readonly
+        id="select-fail-task"
         dense
         outlined
         multiple
@@ -131,6 +132,7 @@ function tooltip(id: string) {
       >
         <template #selected-item="scope">
           <q-chip
+            :id="`chip-fail-task-${taskStatusList[scope.index].code}`"
             dense
             :removable="!readonly"
             @remove="scope.removeAtIndex(scope.index)"
@@ -170,6 +172,7 @@ function tooltip(id: string) {
 
         <template #option="scope">
           <q-item
+            :id="`option-fail-task-${scope.opt.request.code}`"
             clickable
             v-bind="scope.itemProps"
             class="row items-start col-12 no-padding"
@@ -230,6 +233,7 @@ function tooltip(id: string) {
 
       <SelectInput
         :readonly
+        id="select-fail-type"
         :option="[
           {
             label: $t('taskOrder.documentSubmitFailed'),
@@ -260,6 +264,7 @@ function tooltip(id: string) {
 
       <div v-if="failedType === 'other'" class="q-mt-sm rounded">
         <q-editor
+          id="editor-fail-comment"
           dense
           flat
           v-model="failedComment"
@@ -279,8 +284,18 @@ function tooltip(id: string) {
     </main>
 
     <template #footer v-if="!readonly">
-      <CancelButton class="q-ml-auto" outlined @click="$emit('close')" />
-      <SaveButton class="q-ml-sm" solid @click="submit" />
+      <CancelButton
+        id="btn-fail-remark-cancel"
+        class="q-ml-auto"
+        outlined
+        @click="$emit('close')"
+      />
+      <SaveButton
+        id="btn-fail-remark-save"
+        class="q-ml-sm"
+        solid
+        @click="submit"
+      />
     </template>
   </DialogFormContainer>
 </template>
diff --git a/src/pages/10_invoice/MainPage.vue b/src/pages/10_invoice/MainPage.vue
index ef20cd7f..8057693d 100644
--- a/src/pages/10_invoice/MainPage.vue
+++ b/src/pages/10_invoice/MainPage.vue
@@ -394,8 +394,14 @@ watch(
                       {
                         label: $t('general.customer'),
                         value:
-                          item.row.quotation.customerBranch.registerName ||
-                          `${item.row.quotation.customerBranch?.firstName || '-'} ${item.row.quotation.customerBranch?.lastName || ''}`,
+                          item.row.quotation.customerBranch.customer
+                            .customerType === 'CORP'
+                            ? $i18n.locale === 'tha'
+                              ? item.row.quotation.customerBranch.registerName
+                              : item.row.quotation.customerBranch.registerNameEN
+                            : $i18n.locale === 'tha'
+                              ? `${item.row.quotation.customerBranch?.firstName || '-'} ${item.row.quotation.customerBranch?.lastName || ''}`
+                              : `${item.row.quotation.customerBranch?.firstNameEN || '-'} ${item.row.quotation.customerBranch?.lastNameEN || ''}`,
                       },
                       {
                         label: $t('taskOrder.issueDate'),
diff --git a/src/pages/10_invoice/TableInvoice.vue b/src/pages/10_invoice/TableInvoice.vue
index 901533ca..9fe591dd 100644
--- a/src/pages/10_invoice/TableInvoice.vue
+++ b/src/pages/10_invoice/TableInvoice.vue
@@ -83,11 +83,16 @@ defineEmits<{
           <!-- NOTE: custom column will starts with # -->
           <template v-if="!col.name.startsWith('#')">
             <span>
-              {{
-                typeof col.field === 'string'
-                  ? props.row[col.field as keyof Invoice]
-                  : col.field(props.row)
-              }}
+              <template v-if="typeof col.field === 'function'">
+                {{
+                  typeof col.field(props.row) === 'object'
+                    ? col.field(props.row)[$i18n.locale]
+                    : col.field(props.row)
+                }}
+              </template>
+              <template v-else>
+                {{ props.row[col.field as keyof Invoice] }}
+              </template>
             </span>
           </template>
           <template v-if="col.name === '#order'">
diff --git a/src/pages/10_invoice/constants.ts b/src/pages/10_invoice/constants.ts
index e21573f6..139ea76b 100644
--- a/src/pages/10_invoice/constants.ts
+++ b/src/pages/10_invoice/constants.ts
@@ -29,7 +29,16 @@ export const columns = [
     name: 'customer',
     align: 'center',
     label: 'general.customer',
-    field: (v: Invoice) => v.quotation.customerBranch.customerName,
+    field: (v: Invoice) =>
+      v.quotation.customerBranch.customer.customerType === 'CORP'
+        ? {
+            tha: v.quotation.customerBranch.registerName,
+            eng: v.quotation.customerBranch.registerNameEN,
+          }
+        : {
+            tha: `${v.quotation.customerBranch.firstName || ''} ${v.quotation.customerBranch.lastName || ''}`,
+            eng: `${v.quotation.customerBranch.firstNameEN || ''} ${v.quotation.customerBranch.lastNameEN || ''}`,
+          },
   },
 
   {
diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index 0dde0352..a73d1d6d 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -4,7 +4,7 @@ import { api } from 'src/boot/axios';
 import { useRoute, useRouter } from 'vue-router';
 import { dateFormatJS } from 'src/utils/datetime';
 import { initLang, initTheme } from 'src/utils/ui';
-import { useQuotationStore } from 'src/stores/quotations';
+import { QuotationFull, useQuotationStore } from 'src/stores/quotations';
 import {
   CreditNote,
   CreditNotePaybackStatus,
@@ -31,25 +31,31 @@ import {
   EditButton,
   UndoButton,
 } from 'src/components/button';
+import { precisionRound } from 'src/utils/arithmetic';
+import { DebitNote, useDebitNote } from 'src/stores/debit-note';
 import { RequestWork } from 'src/stores/request-list/types';
 import { storeToRefs } from 'pinia';
 import useOptionStore from 'src/stores/options';
-import { dialogWarningClose } from 'src/stores/utils';
+import { dialogWarningClose, canAccess, isRoleInclude } from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import { QForm } from 'quasar';
 import { getName } from 'src/services/keycloak';
 
+import { RequestWorkStatus } from 'src/stores/request-list/types';
+
 const route = useRoute();
 const router = useRouter();
 const creditNote = useCreditNote();
+const debitNote = useDebitNote();
 const quotation = useQuotationStore();
 const configStore = useConfigStore();
 const { data: config } = storeToRefs(configStore);
 const { t } = useI18n();
 
+const agentPrice = ref<boolean>(false);
 const refForm = ref<InstanceType<typeof QForm>>();
 const creditNoteData = ref<CreditNote>();
-const quotationData = ref<CreditNote['quotation']>();
+const quotationData = ref<DebitNote | QuotationFull>();
 const view = ref<CreditNoteStatus | null>(null);
 const fileList = ref<FileList>();
 const attachmentList = ref<FileList>();
@@ -94,7 +100,7 @@ const pageState = reactive({
   mode: 'view' as 'view' | 'edit' | 'info',
 });
 
-const defaultRemark = '#[quotation-labor]<br/><br/>#[quotation-payment]';
+const defaultRemark = '';
 
 const formData = ref<CreditNotePayload>({
   quotationId: '',
@@ -204,22 +210,23 @@ function getPrice(
 ) {
   return list.reduce(
     (a, c) => {
-      const pricePerUnit =
-        c.product.pricePerUnit - c.product.discount / c.product.amount;
-      const amount = c.list.length;
-      const priceNoVat = pricePerUnit;
-      const priceDiscountNoVat = priceNoVat * amount;
+      const value = creditNote.getfinalPriceCredit(c.list || []);
 
-      const rawVatTotal = priceDiscountNoVat * (config.value?.vat || 0.07);
+      a.totalPrice = precisionRound(a.totalPrice + value.totalPrice);
+      a.totalDiscount = precisionRound(a.totalDiscount + value.totalDiscount);
+      a.vat = precisionRound(a.vat + value.vat);
+      a.vatIncluded = precisionRound(a.vatIncluded + value.vatIncluded);
+      a.vatExcluded = precisionRound(a.vatExcluded + value.vatExcluded);
+      a.finalPrice = precisionRound(a.finalPrice + value.finalPrice);
 
-      a.totalPrice = a.totalPrice + priceDiscountNoVat;
-      a.vat = c.product.vat !== 0 ? a.vat + rawVatTotal : a.vat;
-      a.finalPrice = a.totalPrice + a.vat;
       return a;
     },
     {
       totalPrice: 0,
+      totalDiscount: 0,
       vat: 0,
+      vatIncluded: 0,
+      vatExcluded: 0,
       finalPrice: 0,
     },
   );
@@ -286,11 +293,16 @@ async function getQuotation() {
     return;
   }
 
-  const ret = await quotation.getQuotation(route.query['quotationId']);
+  const isDebitNote = route.query['isDebitNote'] === 'true';
+  const ret = isDebitNote
+    ? await debitNote.getDebitNote(route.query['quotationId'])
+    : await quotation.getQuotation(route.query['quotationId']);
 
   if (!ret) return;
 
   quotationData.value = ret;
+
+  agentPrice.value = quotationData.value.agentPrice;
 }
 
 async function submit() {
@@ -639,6 +651,10 @@ onMounted(async () => {
           </nav>
 
           <DocumentExpansion
+            :noLink="
+              route.query['isDebitNote'] === 'true' ||
+              quotationData?.code.startsWith('DN')
+            "
             readonly
             :registered-branch-id="quotationData?.registeredBranchId"
             :customer-id="quotationData?.customerBranchId"
@@ -684,6 +700,7 @@ onMounted(async () => {
 
           <RefundInformation
             v-if="view === CreditNoteStatus.Pending"
+            :readonly="!canAccess('related', 'edit')"
             :total="creditNoteData?.value"
             :paid="
               creditNoteData?.paybackStatus === CreditNotePaybackStatus.Done
@@ -727,7 +744,7 @@ onMounted(async () => {
 
           <AdditionalFileExpansion
             v-if="view !== CreditNoteStatus.Success"
-            :readonly="false"
+            :readonly="isRoleInclude(['sale', 'head_of_sale'])"
             v-model:file-data="attachmentData"
             :transform-url="
               async (url: string) => {
@@ -788,16 +805,7 @@ onMounted(async () => {
             :default-remark="defaultRemark"
             :items="[]"
             :readonly="pageState.mode === 'info'"
-          >
-            <template #hint>
-              {{ $t('general.hintRemark') }}
-              <code>#[quotation-labor]</code>
-              {{ $t('general.quotationLabor') }}
-              {{ $t('general.or') }}
-              <code>#[quotation-payment]</code>
-              {{ $t('general.quotationPayment') }}
-            </template>
-          </RemarkExpansion>
+          ></RemarkExpansion>
 
           <QuotationFormReceipt
             v-if="creditNoteData && view === CreditNoteStatus.Success"
@@ -871,7 +879,8 @@ onMounted(async () => {
         <SaveButton
           v-if="
             !creditNoteData ||
-            creditNoteData?.creditNoteStatus === CreditNoteStatus.Waiting
+            (creditNoteData?.creditNoteStatus === CreditNoteStatus.Waiting &&
+              canAccess('related', 'edit'))
           "
           :disabled="taskListGroup.length === 0 || pageState.mode === 'edit'"
           type="submit"
diff --git a/src/pages/11_credit-note/MainPage.vue b/src/pages/11_credit-note/MainPage.vue
index 1cea36fe..7b1bf0b7 100644
--- a/src/pages/11_credit-note/MainPage.vue
+++ b/src/pages/11_credit-note/MainPage.vue
@@ -23,7 +23,7 @@ import useFlowStore from 'src/stores/flow';
 import { pageTabs, columns, hslaColors } from './constants';
 import { CreditNoteStatus, useCreditNote } from 'src/stores/credit-note';
 import TableCreditNote from './TableCreditNote.vue';
-import { dialogWarningClose } from 'src/stores/utils';
+import { dialogWarningClose, canAccess } from 'src/stores/utils';
 import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const $q = useQuasar();
@@ -45,6 +45,7 @@ const pageState = reactive({
     .map((v) => v.name),
   gridView: false,
   total: 0,
+  isDebitNote: false,
 
   creditDialog: false,
   searchDate: [],
@@ -108,13 +109,17 @@ function navigateTo(opts: {
 
   if (opts.statusDialog === 'create') {
     url.searchParams.append('quotationId', opts.quotationId || '');
+    url.searchParams.append('isDebitNote', pageState.isDebitNote.toString());
   }
 
   window.open(url.toString(), '_blank');
 }
 
 async function submit() {
-  navigateTo({ statusDialog: 'create', quotationId: pageState.quotationId });
+  navigateTo({
+    statusDialog: 'create',
+    quotationId: pageState.quotationId,
+  });
   close();
 }
 
@@ -129,6 +134,11 @@ onMounted(async () => {
 
   creditNote.getCreditNoteStats().then((res) => res && (stats.value = res));
   getList();
+
+  window.addEventListener('focus', () => {
+    creditNote.getCreditNoteStats().then((res) => res && (stats.value = res));
+    getList();
+  });
 });
 
 watch(
@@ -146,6 +156,7 @@ watch(
 </script>
 <template>
   <FloatingActionButton
+    v-if="canAccess('related', 'edit')"
     style="z-index: 999"
     hide-icon
     @click.stop="triggerCreateCreditNote()"
@@ -187,7 +198,7 @@ watch(
             :branch="[
               {
                 icon: 'icon-park-outline:loading-one',
-                count: stats[CreditNoteStatus.Pending] || 0,
+                count: stats[CreditNoteStatus.Waiting] || 0,
                 label: `creditNote.status.${CreditNoteStatus.Waiting}`,
                 color: 'light-yellow',
               },
@@ -360,7 +371,10 @@ watch(
           <TableCreditNote
             :grid="pageState.gridView"
             :visible-columns="pageState.fieldSelected"
-            :hide-delete="pageState.currentTab !== CreditNoteStatus.Waiting"
+            :hide-delete="
+              pageState.currentTab !== CreditNoteStatus.Waiting ||
+              !canAccess('related', 'edit')
+            "
             @view="(v) => navigateTo({ statusDialog: 'info', creditId: v.id })"
             @delete="(v) => triggerDelete(v.id)"
           >
@@ -376,6 +390,10 @@ watch(
                       })
                   "
                   @delete="() => triggerDelete(item.row.id)"
+                  :hide-kebab-delete="
+                    pageState.currentTab !== CreditNoteStatus.Waiting ||
+                    !canAccess('related', 'edit')
+                  "
                   :title="item.row.quotation.workName"
                   :code="item.row.code"
                   :status="$t(`creditNote.status.${item.row.creditNoteStatus}`)"
@@ -393,10 +411,12 @@ watch(
                       value:
                         item.row.quotation.customerBranch.customer
                           .customerType === 'CORP'
-                          ? item.row.quotation.customerBranch.customerName
+                          ? $i18n.locale === 'tha'
+                            ? item.row.quotation.customerBranch.registerName
+                            : item.row.quotation.customerBranch.registerNameEN
                           : $i18n.locale === 'tha'
-                            ? `${item.row.quotation.customerBranch.firstName} ${item.row.quotation.customerBranch.lastName}`
-                            : `${item.row.quotation.customerBranch.firstNameEN} ${item.row.quotation.customerBranch.lastNameEN}`,
+                            ? `${item.row.quotation.customerBranch.firstName || ''} ${item.row.quotation.customerBranch.lastName || ''}`
+                            : `${item.row.quotation.customerBranch.firstNameEN || ''} ${item.row.quotation.customerBranch.lastNameEN || ''}`,
                     },
                     {
                       label: $t('requestList.quotationCode'),
@@ -472,7 +492,10 @@ watch(
 
     <section class="q-pa-md col full-width">
       <div class="surface-1 rounded bordered q-pa-md full-height full-width">
-        <FormCredit v-model:quotation-id="pageState.quotationId" />
+        <FormCredit
+          v-model:quotation-id="pageState.quotationId"
+          v-model:is-debit-note="pageState.isDebitNote"
+        />
       </div>
     </section>
 
diff --git a/src/pages/11_credit-note/RefundInformation.vue b/src/pages/11_credit-note/RefundInformation.vue
index a6e0427c..0e42326b 100644
--- a/src/pages/11_credit-note/RefundInformation.vue
+++ b/src/pages/11_credit-note/RefundInformation.vue
@@ -172,11 +172,13 @@ const refundOpts = ref<
     >
       {{ $t('creditNote.label.refund') }}
       <q-btn-dropdown
+        :disable="readonly"
         dense
         unelevated
         :label="$t(`creditNote.status.payback.${paybackStatus}`)"
         class="text-capitalize text-weight-regular product-status rounded"
         :class="{
+          'hide-dropdown q-pr-md': readonly,
           warning: paybackStatus === CreditNotePaybackStatus.Pending,
           danger: paybackStatus === CreditNotePaybackStatus.Verify,
           'positive hide-dropdown q-pr-md':
@@ -219,7 +221,6 @@ const refundOpts = ref<
       <UploadFileSection
         multiple
         :layout="$q.screen.gt.sm ? 'column' : 'row'"
-        :readonly
         :label="`${$t('general.upload', { msg: ' E-slip' })} ${$t(
           'general.or',
           {
@@ -281,9 +282,9 @@ const refundOpts = ref<
 }
 
 :deep(
-    .hide-dropdown
-      i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container
-  ) {
+  .hide-dropdown
+    i.q-icon.mdi.mdi-chevron-down.q-btn-dropdown__arrow.q-btn-dropdown__arrow-container
+) {
   display: none;
 }
 </style>
diff --git a/src/pages/11_credit-note/TableCreditNote.vue b/src/pages/11_credit-note/TableCreditNote.vue
index 32668a27..5078fa42 100644
--- a/src/pages/11_credit-note/TableCreditNote.vue
+++ b/src/pages/11_credit-note/TableCreditNote.vue
@@ -8,7 +8,7 @@ import { columns } from './constants';
 import KebabAction from 'src/components/shared/KebabAction.vue';
 
 const creditNote = useCreditNote();
-const { data, page } = storeToRefs(creditNote);
+const { data, page, pageSize } = storeToRefs(creditNote);
 
 const prop = defineProps<{
   grid: boolean;
@@ -26,7 +26,14 @@ const visible = computed(() =>
 <template>
   <q-table
     :rows-per-page-options="[0]"
-    :rows="data.map((item, i) => ({ ...item, _index: i, _page: page }))"
+    :rows="
+      data.map((item, i) => ({
+        ...item,
+        _index: i,
+        _page: page,
+        _pageSize: pageSize,
+      }))
+    "
     :columns="visible"
     :grid
     hide-bottom
@@ -52,7 +59,7 @@ const visible = computed(() =>
 
     <template
       v-slot:body="props: {
-        row: CreditNote & { _index: number; _page: number };
+        row: CreditNote & { _index: number; _page: number; _pageSize: number };
       } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
     >
       <q-tr :class="{ dark: $q.dark.isActive }" class="text-center">
diff --git a/src/pages/11_credit-note/constants.ts b/src/pages/11_credit-note/constants.ts
index 4042661e..b6f561d3 100644
--- a/src/pages/11_credit-note/constants.ts
+++ b/src/pages/11_credit-note/constants.ts
@@ -32,8 +32,9 @@ export const columns = [
     name: 'order',
     align: 'center',
     label: 'general.order',
-    field: (data: CreditNote & { _index: number; _page: number }) =>
-      data._page * (data._index + 1),
+    field: (
+      data: CreditNote & { _index: number; _page: number; _pageSize: number },
+    ) => (data._page - 1) * data._pageSize + (data._index + 1),
   },
   {
     name: 'code',
diff --git a/src/pages/11_credit-note/document-view/MainPage.vue b/src/pages/11_credit-note/document-view/MainPage.vue
index e15fe13d..f8231467 100644
--- a/src/pages/11_credit-note/document-view/MainPage.vue
+++ b/src/pages/11_credit-note/document-view/MainPage.vue
@@ -237,30 +237,12 @@ onMounted(async () => {
 });
 
 function calcPricePerUnit(product: RequestWork['productService']['product']) {
-  return product.vatIncluded
-    ? (agentPrice.value ? product.agentPrice : product.price) /
-        (1 + (config.value?.vat || 0.07))
-    : agentPrice.value
-      ? product.agentPrice
-      : product.price;
+  return agentPrice.value ? product.agentPrice : product.price;
 }
 
-function calcPrice(
-  product: RequestWork['productService']['product'],
-  amount: number,
-  vat: number = 0,
-) {
-  const pricePerUnit = agentPrice.value ? product.agentPrice : product.price;
-
-  const priceNoVat = product.vatIncluded
-    ? pricePerUnit / (1 + (config.value?.vat || 0.07))
-    : pricePerUnit;
-  const priceDiscountNoVat = priceNoVat * amount - 0;
-
-  const rawVatTotal =
-    vat === 0 ? 0 : priceDiscountNoVat * (config.value?.vat || 0.07);
-
-  return precisionRound(priceNoVat * amount + rawVatTotal);
+function calcPrice(c: RequestWork[]): number {
+  const price = creditNoteStore.getfinalPriceCredit(c);
+  return price.finalPrice;
 }
 
 watch(elements, () => {});
@@ -327,31 +309,15 @@ function closeAble() {
             <th>{{ $t('preview.pricePerUnit') }}</th>
             <th>{{ $t('preview.value') }}</th>
           </tr>
-          {{ console.log(chunks) }}
-          {{ console.log(chunk) }}
           <tr v-for="(v, i) in chunk" :key="i">
             <td class="text-center">{{ i + 1 }}</td>
             <td>{{ v.product.product.code }}</td>
             <td>{{ v.product.product.name }}</td>
-            <td style="text-align: center">
-              {{
-                formatNumberDecimal(
-                  calcPricePerUnit(v.product.product) +
-                    (v.product.product.calcVat
-                      ? calcPricePerUnit(v.product.product) *
-                        (config?.vat || 0.07)
-                      : 0),
-                  2,
-                )
-              }}
+            <td style="text-align: right">
+              {{ formatNumberDecimal(calcPricePerUnit(v.product.product), 2) }}
             </td>
-            <td style="text-align: center">
-              {{
-                formatNumberDecimal(
-                  calcPrice(v.product.product, v.list.length, v.product.vat),
-                  2,
-                )
-              }}
+            <td style="text-align: right">
+              {{ formatNumberDecimal(calcPrice(v.list), 2) }}
             </td>
           </tr>
         </tbody>
@@ -409,8 +375,8 @@ function closeAble() {
               {{
                 formatNumberDecimal(
                   summaryPrice.totalPrice -
-                    summaryPrice.totalDiscount +
-                    summaryPrice.vat,
+                    summaryPrice.totalDiscount -
+                    summaryPrice.vatExcluded,
                   2,
                 )
               }}
diff --git a/src/pages/11_credit-note/document-view/ViewHeader.vue b/src/pages/11_credit-note/document-view/ViewHeader.vue
index 71cce1cc..93c51dab 100644
--- a/src/pages/11_credit-note/document-view/ViewHeader.vue
+++ b/src/pages/11_credit-note/document-view/ViewHeader.vue
@@ -3,6 +3,7 @@ import { dateFormat } from 'src/utils/datetime';
 
 // NOTE: Import stores
 import { formatAddress } from 'src/utils/address';
+import { getCustomerName } from 'src/stores/utils';
 
 // NOTE  Import Types
 import { Branch } from 'src/stores/branch/types';
@@ -78,13 +79,16 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
-        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
+        <span>{{ $t('branch.form.taxNo') }} {{ branch.taxNo }}</span>
+        <span>{{ $t('taskOrder.telephone') }} {{ branch.telephoneNo }}</span>
         <span>{{ branch.webUrl }}</span>
       </article>
       <article>
         <b>ลูกค้า</b>
         <span>
+          <div>
+            {{ getCustomerName(customer, { noCode: true, locale: 'tha' }) }}
+          </div>
           {{
             formatAddress({
               address: customer.address,
@@ -101,8 +105,18 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
-        <span>เบอร์โทร {{ customer.telephoneNo }}</span>
+        <span>
+          {{
+            customer.customer.customerType === 'CORP'
+              ? `${$t('customer.form.legalPersonNo')} `
+              : `${$t('customer.form.taxpayyerNo')} `
+          }}{{
+            customer.customer.customerType === 'CORP'
+              ? customer.codeCustomer
+              : customer.citizenId
+          }}
+        </span>
+        <span>{{ $t('taskOrder.telephone') }} {{ customer.telephoneNo }}</span>
       </article>
     </section>
     <section class="detail-quotation-info">
diff --git a/src/pages/11_credit-note/expansion/DocumentExpansion.vue b/src/pages/11_credit-note/expansion/DocumentExpansion.vue
index b500c2f9..0c5ee09a 100644
--- a/src/pages/11_credit-note/expansion/DocumentExpansion.vue
+++ b/src/pages/11_credit-note/expansion/DocumentExpansion.vue
@@ -6,6 +6,7 @@ import DataDisplay from 'src/components/08_request-list/DataDisplay.vue';
 
 defineProps<{
   readonly?: boolean;
+  noLink?: boolean;
 }>();
 
 defineEmits<{
@@ -61,7 +62,7 @@ const quotationCreatedBy = defineModel<string>('quotationCreatedBy');
       />
 
       <DataDisplay
-        clickable
+        :clickable="!noLink"
         class="col-md col-6"
         style="padding-inline: 20px"
         :label="$t('creditNote.label.quotationCode')"
diff --git a/src/pages/11_credit-note/expansion/ProductExpansion.vue b/src/pages/11_credit-note/expansion/ProductExpansion.vue
index af4e6ea3..a20dd953 100644
--- a/src/pages/11_credit-note/expansion/ProductExpansion.vue
+++ b/src/pages/11_credit-note/expansion/ProductExpansion.vue
@@ -12,10 +12,13 @@ import { baseUrl, formatNumberDecimal } from 'src/stores/utils';
 import { precisionRound } from 'src/utils/arithmetic';
 import { productColumn } from '../constants';
 
+import { useCreditNote } from 'src/stores/credit-note';
+
 const configStore = useConfigStore();
 const { data: config } = storeToRefs(configStore);
 
 const currentExpanded = ref<boolean[]>([]);
+const creditNote = useCreditNote();
 
 defineProps<{
   readonly?: boolean;
@@ -44,15 +47,22 @@ function calcPricePerUnit(product: RequestWork['productService']) {
   return product.pricePerUnit - product.discount / product.amount;
 }
 
-function calcPrice(c: RequestWork['productService'], amount: number) {
-  const pricePerUnit = c.pricePerUnit - c.discount / c.amount;
-  const priceNoVat = pricePerUnit;
-  const priceDiscountNoVat = priceNoVat * amount;
+function calcVat(c: RequestWork['productService']) {
+  const vatFactor = c.product.serviceChargeCalcVat
+    ? (config.value?.vat ?? 0.07)
+    : 0;
 
-  const rawVatTotal =
-    c.vat === 0 ? 0 : priceDiscountNoVat * (config.value?.vat || 0.07);
+  const price = precisionRound(
+    c.pricePerUnit * (1 + vatFactor) - c.discount / (1 + vatFactor),
+  );
 
-  return precisionRound(priceNoVat * amount + rawVatTotal);
+  const vat = (price / (1 + vatFactor)) * vatFactor;
+  return vat;
+}
+
+function calcPrice(c: RequestWork[]) {
+  const price = creditNote.getfinalPriceCredit(c);
+  return price.finalPrice;
 }
 </script>
 <template>
@@ -162,12 +172,7 @@ function calcPrice(c: RequestWork['productService'], amount: number) {
 
             <!-- total -->
             <q-td class="text-right">
-              {{
-                formatNumberDecimal(
-                  calcPrice(props.row.product, props.row.list.length),
-                  2,
-                )
-              }}
+              {{ formatNumberDecimal(calcPrice(props.row.list), 2) }}
             </q-td>
             <q-td>
               <q-btn
diff --git a/src/pages/12_debit-note/FormPage.vue b/src/pages/12_debit-note/FormPage.vue
index df375d65..ef420f8e 100644
--- a/src/pages/12_debit-note/FormPage.vue
+++ b/src/pages/12_debit-note/FormPage.vue
@@ -46,7 +46,13 @@ import {
 import { RequestWork } from 'src/stores/request-list/types';
 import { storeToRefs } from 'pinia';
 import useOptionStore from 'src/stores/options';
-import { deleteItem, dialog, dialogWarningClose } from 'src/stores/utils';
+import {
+  canAccess,
+  deleteItem,
+  dialog,
+  dialogWarningClose,
+  isRoleInclude,
+} from 'src/stores/utils';
 import { useI18n } from 'vue-i18n';
 import { Employee } from 'src/stores/employee/types';
 import QuotationFormWorkerSelect from '../05_quotation/QuotationFormWorkerSelect.vue';
@@ -203,47 +209,7 @@ const selectedWorker = ref<
     }[];
   })[]
 >([]);
-const selectedWorkerItem = computed(() => {
-  return [
-    ...selectedWorker.value.map((e) => ({
-      foreignRefNo: e.employeePassport
-        ? e.employeePassport[0]?.number || '-'
-        : '-',
-      employeeName:
-        locale.value === Lang.English
-          ? `${e.firstNameEN} ${e.lastNameEN}`
-          : `${e.firstName} ${e.lastName}`,
-      birthDate: dateFormatJS({ date: e.dateOfBirth }),
-      gender: e.gender,
-      age: calculateAge(e.dateOfBirth),
-      nationality: optionStore.mapOption(e.nationality),
-      documentExpireDate:
-        e.employeePassport !== undefined &&
-        e.employeePassport[0]?.expireDate !== undefined
-          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
-          : '-',
-      imgUrl: e.selectedImage
-        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
-        : '',
-      status: e.status,
-    })),
-
-    ...newWorkerList.value.map((v: any) => ({
-      foreignRefNo: v.passportNo,
-      employeeName:
-        locale.value === Lang.English
-          ? `${v.firstNameEN} ${v.lastNameEN}`
-          : `${v.firstName} ${v.lastName}`,
-      birthDate: dateFormatJS({ date: v.dateOfBirth }),
-      gender: v.gender,
-      age: calculateAge(v.dateOfBirth),
-      nationality: optionStore.mapOption(v.nationality),
-      documentExpireDate: '-',
-      imgUrl: '',
-      status: 'CREATED',
-    })),
-  ];
-});
+const selectedWorkerItem = ref([]);
 
 const selectedInstallmentNo = ref<number[]>([]);
 const installmentAmount = ref<number>(0);
@@ -368,7 +334,39 @@ function assignProductServiceList() {
 
 function assignSelectedWorker() {
   if (debitNoteData.value)
-    selectedWorker.value = debitNoteData.value.worker.map((v) => v.employee);
+    selectedWorkerItem.value = debitNoteData.value.worker.map((e) => {
+      return {
+        id: e.employee.id,
+        foreignRefNo: e.employee.employeePassport
+          ? e.employee.employeePassport[0]?.number || '-'
+          : '-',
+        employeeName:
+          locale.value === Lang.English
+            ? `${e.employee.firstNameEN} ${e.employee.lastNameEN}`
+            : `${e.employee.firstName || e.employee.firstNameEN} ${e.employee.lastName || e.employee.lastNameEN}`,
+        birthDate: dateFormatJS({ date: e.employee.dateOfBirth }),
+        gender: e.employee.gender,
+        age: calculateAge(e.employee.dateOfBirth),
+        nationality: optionStore.mapOption(e.employee.nationality),
+        documentExpireDate:
+          e.employee.employeePassport !== undefined &&
+          e.employee.employeePassport[0]?.expireDate !== undefined
+            ? dateFormatJS({ date: e.employee.employeePassport[0]?.expireDate })
+            : '-',
+        imgUrl: e.employee.selectedImage
+          ? `${API_BASE_URL}/employee/${e.id}/image/${e.employee.selectedImage}`
+          : '',
+        status: e.employee.status,
+        workerNew: false,
+        lastNameEN: e.employee.lastNameEN,
+        lastName: e.employee.lastName,
+        middleNameEN: e.employee.middleNameEN,
+        middleName: e.employee.middleName,
+        firstNameEN: e.employee.firstNameEN,
+        firstName: e.employee.firstName,
+        namePrefix: e.employee.namePrefix,
+      };
+    });
 }
 
 async function assignFormData(id: string) {
@@ -428,6 +426,7 @@ async function getQuotation(id?: string) {
     const data = await quotationStore.getQuotation(quotationId);
     if (!!data) {
       quotationData.value = data;
+      agentPrice.value = quotationData.value.agentPrice;
     }
   }
 }
@@ -543,25 +542,28 @@ function getPrice(
         return a;
       }
 
-      const price = precisionRound(c.pricePerUnit * c.amount);
-      const vat =
-        precisionRound(
-          (c.pricePerUnit * (c.discount ? c.amount : 1) - c.discount) *
-            (config.value?.vat || 0.07),
-        ) * (!c.discount ? c.amount : 1);
+      const calcVat =
+        c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
 
-      a.totalPrice = precisionRound(a.totalPrice + price);
-      a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
-      a.vat = c.product.calcVat ? precisionRound(a.vat + vat) : a.vat;
+      const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
+
+      const pricePerUnit = precisionRound(
+        (c.pricePerUnit * (1 + vatFactor)) / (1 + vatFactor),
+      );
+
+      const price = precisionRound(
+        (pricePerUnit * c.amount * (1 + vatFactor) - c.discount) /
+          (1 + vatFactor),
+      );
+      const vat = price * vatFactor;
+
+      a.totalPrice = precisionRound(a.totalPrice + price + c.discount);
+      a.totalDiscount = precisionRound(a.totalDiscount + c.discount);
+      a.vat = precisionRound(a.vat + vat);
       a.vatExcluded = c.product.calcVat
         ? a.vatExcluded
-        : precisionRound(a.vat + vat);
-      a.finalPrice = precisionRound(
-        a.totalPrice -
-          a.totalDiscount +
-          a.vat -
-          Number(currentFormData.value.discount || 0),
-      );
+        : precisionRound(a.vatExcluded + price);
+      a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
 
       return a;
     },
@@ -569,6 +571,7 @@ function getPrice(
       totalPrice: 0,
       totalDiscount: 0,
       vat: 0,
+      vatIncluded: 0,
       vatExcluded: 0,
       finalPrice: 0,
     },
@@ -802,15 +805,11 @@ async function submit() {
 
     worker: JSON.parse(
       JSON.stringify([
-        ...selectedWorker.value.map((v) => {
+        ...selectedWorkerItem.value.map((v) => {
           {
             return v.id;
           }
         }),
-        ...newWorkerList.value.map((v) => {
-          const { attachment, ...payload } = v;
-          return payload;
-        }),
       ]),
     ),
     dueDate: currentFormData.value.dueDate,
@@ -863,6 +862,7 @@ async function exampleReceipt(id: string) {
 
 function storeDataLocal() {
   //  quotationFormData.value.productServiceList = productServiceList.value;
+  //
 
   localStorage.setItem(
     'debit-note-preview',
@@ -871,6 +871,7 @@ function storeDataLocal() {
         ...currentFormData.value,
         customerBranchId: quotationData.value?.customerBranchId,
         registeredBranchId: quotationData.value?.registeredBranchId,
+        agentPrice: quotationData.value.agentPrice,
       },
       meta: {
         source: {
@@ -887,7 +888,7 @@ function storeDataLocal() {
           dueDate: currentFormData.value.dueDate,
         },
         productServicelist: productService.value,
-        selectedWorker: selectedWorker.value,
+        selectedWorker: selectedWorkerItem.value,
         createdBy: getName(),
       },
     }),
@@ -912,6 +913,69 @@ function closeAble() {
   return window.opener !== null;
 }
 
+function combineWorker(newWorker: any, oldWorker: any) {
+  selectedWorkerItem.value = [
+    ...oldWorker.map((e) => ({
+      id: e.id,
+      foreignRefNo: e.employeePassport
+        ? e.employeePassport[0]?.number || '-'
+        : '-',
+      employeeName:
+        locale.value === Lang.English
+          ? `${e.firstNameEN} ${e.lastNameEN}`
+          : `${e.firstName || e.firstNameEN} ${e.lastName || e.lastNameEN}`,
+      birthDate: dateFormatJS({ date: e.dateOfBirth }),
+      gender: e.gender,
+      age: calculateAge(e.dateOfBirth),
+      nationality: optionStore.mapOption(e.nationality),
+      documentExpireDate:
+        e.employeePassport !== undefined &&
+        e.employeePassport[0]?.expireDate !== undefined
+          ? dateFormatJS({ date: e.employeePassport[0]?.expireDate })
+          : '-',
+      imgUrl: e.selectedImage
+        ? `${API_BASE_URL}/employee/${e.id}/image/${e.selectedImage}`
+        : '',
+      status: e.status,
+      workerNew: false,
+      lastNameEN: e.lastNameEN,
+      lastName: e.lastName,
+      middleNameEN: e.middleNameEN,
+      middleName: e.middleName,
+      firstNameEN: e.firstNameEN,
+      firstName: e.firstName,
+      namePrefix: e.namePrefix,
+    })),
+
+    ...newWorker.map((v: any) => ({
+      id: v.id,
+      foreignRefNo: v.passportNo || '-',
+      employeeName:
+        locale.value === Lang.English
+          ? `${v.firstNameEN} ${v.lastNameEN}`
+          : `${v.firstName || v.firstNameEN} ${v.lastName || v.lastNameEN}`,
+      birthDate: dateFormatJS({ date: v.dateOfBirth }),
+      gender: v.gender,
+      age: calculateAge(v.dateOfBirth),
+      nationality: optionStore.mapOption(v.nationality),
+      documentExpireDate: '-',
+      imgUrl: '',
+      status: 'CREATED',
+
+      lastNameEN: v.lastNameEN,
+      lastName: v.lastName,
+      middleNameEN: v.middleNameEN,
+      middleName: v.middleName,
+      firstNameEN: v.firstNameEN,
+      firstName: v.firstName,
+      namePrefix: v.namePrefix,
+
+      dateOfBirth: v.dateOfBirth,
+      workerNew: true,
+    })),
+  ];
+}
+
 watch(
   () => pageState.mode,
   () => toggleMode(pageState.mode),
@@ -1040,7 +1104,11 @@ async function submitAccepted() {
               :status-active="i.active?.()"
               :status-done="i.status === 'done'"
               :status-waiting="i.status === 'waiting'"
-              @click="i.handler()"
+              @click="
+                () => {
+                  if (pageState.mode !== 'create') i.handler();
+                }
+              "
             />
           </nav>
           <!-- #TODO  add goToQuotation as @goto-quotation-->
@@ -1071,6 +1139,8 @@ async function submitAccepted() {
           <PaymentForm
             v-if="view === QuotationStatus.PaymentPending"
             is-debit-note
+            :branch-id="quotationData?.registeredBranchId"
+            :readonly="isRoleInclude(['sale', 'head_of_sale'])"
             :data="debitNoteData"
             @fetch-status="
               () => {
@@ -1091,7 +1161,7 @@ async function submitAccepted() {
             "
             :row-worker="selectedWorkerItem"
             @add-worker="() => (pageState.employeeModal = true)"
-            @delete="(i) => deleteItem(selectedWorker, i)"
+            @delete="(i) => deleteItem(selectedWorkerItem, i)"
           />
 
           <!-- #TODO add  openProductDialog at @add-product-->
@@ -1126,12 +1196,11 @@ async function submitAccepted() {
               view === QuotationStatus.Issued ||
               view === QuotationStatus.Accepted
             "
-            readonly
             :total-price="summaryPrice.finalPrice"
+            :pay-split="[]"
             class="q-mb-md"
             v-model:pay-type="currentFormData.payCondition"
             v-model:pay-split-count="currentFormData.paySplitCount"
-            v-model:pay-split="currentFormData.paySplit"
             v-model:final-discount="currentFormData.discount"
             v-model:pay-bill-date="currentFormData.payBillDate"
             v-model:summary-price="summaryPrice"
@@ -1144,7 +1213,7 @@ async function submitAccepted() {
               view === QuotationStatus.Accepted ||
               view === QuotationStatus.PaymentPending
             "
-            :readonly
+            :readonly="isRoleInclude(['sale', 'head_of_sale'])"
             v-model:file-data="attachmentData"
             :transform-url="
               async (url: string) => {
@@ -1186,7 +1255,6 @@ async function submitAccepted() {
             "
           />
 
-          <!-- TODO: bind remark -->
           <RemarkExpansion
             v-if="
               view === QuotationStatus.Issued ||
@@ -1194,6 +1262,8 @@ async function submitAccepted() {
               view === QuotationStatus.PaymentPending
             "
             :readonly="readonly"
+            :final-price="summaryPrice.finalPrice"
+            :selected-worker
             v-model:remark="currentFormData.remark"
           />
 
@@ -1311,7 +1381,7 @@ async function submitAccepted() {
           <SaveButton
             v-if="pageState.mode !== 'info'"
             :disabled="
-              selectedWorkerItem.length === 0 && productService.length === 0
+              selectedWorkerItem.length === 0 || productService.length === 0
             "
             @click="submit"
             solid
@@ -1356,13 +1426,12 @@ async function submitAccepted() {
   <!-- add employee quotation -->
 
   <QuotationFormWorkerSelect
-    :preselect-worker="selectedWorker"
+    :preselect-worker="selectedWorkerItem"
     :customerBranchId="quotationData?.customerBranchId"
     v-model:open="pageState.employeeModal"
-    v-model:new-worker-list="newWorkerList"
     @success="
       (v) => {
-        selectedWorker = v.worker;
+        combineWorker(v.newWorker, v.worker);
       }
     "
   />
diff --git a/src/pages/12_debit-note/MainPage.vue b/src/pages/12_debit-note/MainPage.vue
index 15e2fc32..ac012374 100644
--- a/src/pages/12_debit-note/MainPage.vue
+++ b/src/pages/12_debit-note/MainPage.vue
@@ -22,7 +22,7 @@ import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'src/stores/flow';
 import { pageTabs, columns, hslaColors } from './constants';
 import { DebitNoteStatus, useDebitNote } from 'src/stores/debit-note';
-import { dialogWarningClose } from 'src/stores/utils';
+import { canAccess, dialogWarningClose } from 'src/stores/utils';
 import { useQuasar } from 'quasar';
 import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
@@ -66,9 +66,7 @@ async function getList(opts?: { page?: number; pageSize?: number }) {
     page: opts?.page || page.value,
     pageSize: opts?.pageSize || pageSize.value,
     query: pageState.inputSearch === '' ? undefined : pageState.inputSearch,
-    status: (pageState.currentTab === DebitNoteStatus.Issued
-      ? undefined
-      : pageState.currentTab) as DebitNoteStatus,
+    status: pageState.currentTab,
     includeRegisteredBranch: true,
     startDate: pageState.searchDate[0],
     endDate: pageState.searchDate[1],
@@ -137,14 +135,23 @@ onMounted(async () => {
     if (res) {
       stats.value = res;
 
-      stats.value['issued'] = Object.values(res).reduce(
-        (sum, value) => sum + value,
-        0,
-      );
+      // stats.value['issued'] = Object.values(res).reduce(
+      //   (sum, value) => sum + value,
+      //   0,
+      // );
     }
   });
 
   getList();
+
+  window.addEventListener('focus', () => {
+    debitNote.getDebitNoteStats().then((res) => {
+      if (res) {
+        stats.value = res;
+      }
+    });
+    getList();
+  });
 });
 
 watch(
@@ -163,6 +170,7 @@ watch(
   <FloatingActionButton
     style="z-index: 999"
     hide-icon
+    v-if="canAccess('related', 'edit')"
     @click.stop="() => triggerCreateDebitNote()"
   ></FloatingActionButton>
 
@@ -412,7 +420,7 @@ watch(
                   @delete="() => triggerDelete(item.row.id)"
                   :title="item.row.debitNoteQuotation?.workName"
                   :code="item.row.code"
-                  :status="$t(`quotation.status.${item.row.quotationStatus}`)"
+                  :status="$t(`debitNote.stats.${item.row.quotationStatus}`)"
                   :badge-color="hslaColors[item.row.quotationStatus] || ''"
                   :custom-data="[
                     {
@@ -426,10 +434,12 @@ watch(
                       label: $t('quotation.customer'),
                       value:
                         item.row.customerBranch.customer.customerType === 'CORP'
-                          ? item.row.customerBranch.customerName
+                          ? $i18n.locale === 'tha'
+                            ? item.row.customerBranch.registerName
+                            : item.row.customerBranch.registerNameEN
                           : $i18n.locale === 'tha'
-                            ? `${item.row.customerBranch.firstName} ${item.row.customerBranch.lastName}`
-                            : `${item.row.customerBranch.firstNameEN} ${item.row.customerBranch.lastNameEN}`,
+                            ? `${item.row.customerBranch.firstName || ''} ${item.row.customerBranch.lastName || ''}`
+                            : `${item.row.customerBranch.firstNameEN || ''} ${item.row.customerBranch.lastNameEN || ''}`,
                     },
                     {
                       label: $t('requestList.quotationCode'),
diff --git a/src/pages/12_debit-note/TableDebitNote.vue b/src/pages/12_debit-note/TableDebitNote.vue
index 4df008ca..72741833 100644
--- a/src/pages/12_debit-note/TableDebitNote.vue
+++ b/src/pages/12_debit-note/TableDebitNote.vue
@@ -6,6 +6,7 @@ import { DebitNote, useDebitNote } from 'src/stores/debit-note';
 
 import { columns } from './constants';
 import KebabAction from 'src/components/shared/KebabAction.vue';
+import { canAccess } from 'src/stores/utils';
 
 const debitNote = useDebitNote();
 const { data, page, pageSize } = storeToRefs(debitNote);
@@ -80,6 +81,7 @@ const visible = computed(() =>
               :id-name="`btn-kebab-${props.row.workName}`"
               hide-toggle
               hide-edit
+              :hide-delete="!canAccess('related', 'edit')"
               @edit="$emit('edit', props.row)"
               @delete="$emit('delete', props.row)"
               @view="$emit('view', props.row)"
diff --git a/src/pages/12_debit-note/document-view/MainPage.vue b/src/pages/12_debit-note/document-view/MainPage.vue
index 563b4d02..54947a44 100644
--- a/src/pages/12_debit-note/document-view/MainPage.vue
+++ b/src/pages/12_debit-note/document-view/MainPage.vue
@@ -82,6 +82,8 @@ const data = ref<
 >();
 
 const productServiceList = ref<ProductServiceList[]>([]);
+const selectedInstallmentNo = ref<number[]>([]);
+const agentPrice = ref<boolean>(false);
 
 const summaryPrice = ref<SummaryPrice>({
   totalPrice: 0,
@@ -217,6 +219,8 @@ onMounted(async () => {
     }
 
     productServiceList.value = parsed.meta.productServicelist;
+    selectedInstallmentNo.value = parsed.meta.selectedInstallmentNo;
+    agentPrice.value = parsed.meta.agentPrice;
 
     productList.value =
       productServiceList.value?.map((v) => ({
@@ -224,40 +228,56 @@ onMounted(async () => {
         code: v.product.code,
         detail: v.product.name,
         amount: v.amount || 0,
-        priceUnit: v.pricePerUnit || 0,
+        priceUnit:
+          v.pricePerUnit +
+          (v.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat']
+            ? v.pricePerUnit * (config.value?.vat || 0.07)
+            : 0),
         discount: v.discount || 0,
         vat: v.vat || 0,
         value: precisionRound(
-          (v.pricePerUnit || 0) * v.amount -
-            (v.discount || 0) +
-            (v.product.calcVat
-              ? ((v.pricePerUnit || 0) * v.amount - (v.discount || 0)) *
-                (config.value?.vat || 0.07)
-              : 0),
+          (v.pricePerUnit +
+            (v.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat']
+              ? v.pricePerUnit * (config.value?.vat || 0.07)
+              : 0)) *
+            v.amount -
+            v.discount,
         ),
       })) || [];
   }
 
   summaryPrice.value = (productServiceList.value || []).reduce(
     (a, c) => {
-      const price = precisionRound((c.pricePerUnit || 0) * c.amount);
-      const vat = precisionRound(
-        ((c.pricePerUnit || 0) * c.amount - (c.discount || 0)) *
-          (config.value?.vat || 0.07),
+      if (
+        selectedInstallmentNo.value?.length > 0 &&
+        c.installmentNo &&
+        !selectedInstallmentNo.value?.includes(c.installmentNo)
+      ) {
+        return a;
+      }
+
+      const calcVat =
+        c.product[agentPrice.value ? 'agentPriceCalcVat' : 'calcVat'];
+
+      const vatFactor = calcVat ? (config.value?.vat ?? 0.07) : 0;
+
+      const pricePerUnit = precisionRound(
+        (c.pricePerUnit * (1 + vatFactor)) / (1 + vatFactor),
       );
 
-      a.totalPrice = precisionRound(a.totalPrice + price);
-      a.totalDiscount = precisionRound(a.totalDiscount + Number(c.discount));
-      a.vat = c.product.calcVat ? precisionRound(a.vat + vat) : a.vat;
+      const price = precisionRound(
+        (pricePerUnit * c.amount * (1 + vatFactor) - c.discount) /
+          (1 + vatFactor),
+      );
+      const vat = price * vatFactor;
+
+      a.totalPrice = precisionRound(a.totalPrice + price + c.discount);
+      a.totalDiscount = precisionRound(a.totalDiscount + c.discount);
+      a.vat = precisionRound(a.vat + vat);
       a.vatExcluded = c.product.calcVat
         ? a.vatExcluded
-        : precisionRound(a.vat + vat);
-      a.finalPrice = precisionRound(
-        a.totalPrice -
-          a.totalDiscount +
-          a.vat -
-          Number(data.value?.discount || 0),
-      );
+        : precisionRound(a.vatExcluded + price);
+      a.finalPrice = precisionRound(a.totalPrice - a.totalDiscount + a.vat);
 
       return a;
     },
@@ -349,7 +369,9 @@ function print() {
               {{ formatNumberDecimal(v.priceUnit, 2) }}
             </td>
             <td style="text-align: right">
-              {{ formatNumberDecimal(v.discount, 2) }}
+              <template v-if="v.discount !== 0">
+                {{ formatNumberDecimal(v.discount, 2) }} ฿
+              </template>
             </td>
             <td style="text-align: right">
               {{ formatNumberDecimal(v.vat, 2) }}
@@ -413,8 +435,8 @@ function print() {
               {{
                 formatNumberDecimal(
                   summaryPrice.totalPrice -
-                    summaryPrice.totalDiscount +
-                    summaryPrice.vat,
+                    summaryPrice.totalDiscount -
+                    summaryPrice.vatExcluded,
                   2,
                 )
               }}
@@ -492,9 +514,8 @@ function print() {
           v-html="
             convertTemplate(data?.remark || '', {
               'quotation-payment': {
-                paymentType: data?.payCondition || 'Full',
+                paymentType: 'Full',
                 amount: summaryPrice.finalPrice,
-                installments: data?.paySplit,
               },
               'quotation-labor': {
                 name:
diff --git a/src/pages/12_debit-note/document-view/ViewHeader.vue b/src/pages/12_debit-note/document-view/ViewHeader.vue
index e9c4624d..cf2c055c 100644
--- a/src/pages/12_debit-note/document-view/ViewHeader.vue
+++ b/src/pages/12_debit-note/document-view/ViewHeader.vue
@@ -3,6 +3,7 @@ import { dateFormat } from 'src/utils/datetime';
 
 // NOTE: Import stores
 import { formatAddress } from 'src/utils/address';
+import { getCustomerName } from 'src/stores/utils';
 
 // NOTE  Import Types
 import { Branch } from 'src/stores/branch/types';
@@ -78,13 +79,16 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>เลขประจำตัวผู้เสียภาษี {{ branch.taxNo }}</span>
-        <span>เบอร์โทร {{ branch.telephoneNo }}</span>
+        <span>{{ $t('branch.form.taxNo') }} {{ branch.taxNo }}</span>
+        <span>{{ $t('taskOrder.telephone') }} {{ branch.telephoneNo }}</span>
         <span>{{ branch.webUrl }}</span>
       </article>
       <article>
         <b>ลูกค้า</b>
         <span>
+          <div>
+            {{ getCustomerName(customer, { noCode: true, locale: 'tha' }) }}
+          </div>
           {{
             formatAddress({
               address: customer.address,
@@ -101,8 +105,18 @@ function titleMode(mode: View): string {
             })
           }}
         </span>
-        <span>เลขประจำตัวผู้เสียภาษี {{ customer.citizenId }}</span>
-        <span>เบอร์โทร {{ customer.telephoneNo }}</span>
+        <span>
+          {{
+            customer.customer.customerType === 'CORP'
+              ? `${$t('customer.form.legalPersonNo')} `
+              : `${$t('customer.form.taxpayyerNo')} `
+          }}{{
+            customer.customer.customerType === 'CORP'
+              ? customer.codeCustomer
+              : customer.citizenId
+          }}
+        </span>
+        <span>{{ $t('taskOrder.telephone') }} {{ customer.telephoneNo }}</span>
       </article>
     </section>
     <section class="detail-quotation-info">
diff --git a/src/pages/12_debit-note/expansion/RemarkExpansion.vue b/src/pages/12_debit-note/expansion/RemarkExpansion.vue
index d33fcf73..0ed7d568 100644
--- a/src/pages/12_debit-note/expansion/RemarkExpansion.vue
+++ b/src/pages/12_debit-note/expansion/RemarkExpansion.vue
@@ -1,9 +1,21 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+import { convertTemplate } from 'src/utils/string-template';
+import { RequestWork } from 'src/stores/request-list';
+import { Employee } from 'src/stores/employee/types';
+
 defineProps<{
   readonly?: boolean;
+  items?: {
+    product: RequestWork['productService']['product'];
+    list: RequestWork[];
+  }[];
+  finalPrice?: number;
+  selectedWorker?: Employee[];
 }>();
 
 const remark = defineModel<string>('remark', { default: '' });
+const remarkWrite = ref<boolean>(false);
 </script>
 <template>
   <q-expansion-item
@@ -24,7 +36,23 @@ const remark = defineModel<string>('remark', { default: '' });
       <q-editor
         dense
         :readonly="readonly"
-        :model-value="remark"
+        :model-value="
+          !remarkWrite || readonly
+            ? convertTemplate(remark || '', {
+                'quotation-payment': {
+                  paymentType: 'Full',
+                  amount: finalPrice,
+                },
+                'quotation-labor': {
+                  name: selectedWorker.map(
+                    (v, i) =>
+                      `${i + 1}. ` +
+                      `${v.employeePassport.length !== 0 ? v.employeePassport[0].number + '_' : ''}  ${v.namePrefix}.${v.firstNameEN ? `${v.firstNameEN} ${v.lastNameEN}` : `${v.firstName} ${v.lastName}`}  `.toUpperCase(),
+                  ),
+                },
+              })
+            : remark || ''
+        "
         min-height="5rem"
         class="full-width"
         toolbar-bg="input-border"
@@ -48,7 +76,36 @@ const remark = defineModel<string>('remark', { default: '' });
             remark = v;
           }
         "
-      />
+      >
+        <template v-if="!readonly" v-slot:toggle>
+          <div class="text-caption row no-wrap q-px-sm">
+            <MainButton
+              :solid="!remarkWrite"
+              icon="mdi-eye-outline"
+              color="0 0% 40%"
+              @click="remarkWrite = false"
+              style="padding: 0 var(--size-2); cursor: pointer"
+              :style="{
+                color: remarkWrite ? 'hsl(0 0% 40%)' : undefined,
+              }"
+            >
+              {{ $t('general.view', { msg: $t('general.example') }) }}
+            </MainButton>
+            <MainButton
+              :solid="remarkWrite"
+              icon="mdi-pencil-outline"
+              color="0 0% 40%"
+              @click="remarkWrite = true"
+              style="padding: 0 var(--size-2); cursor: pointer"
+              :style="{
+                color: !remarkWrite ? 'hsl(0 0% 40%)' : undefined,
+              }"
+            >
+              {{ $t('general.edit') }}
+            </MainButton>
+          </div>
+        </template>
+      </q-editor>
     </main>
   </q-expansion-item>
 </template>
diff --git a/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue b/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue
index 51751014..d0ad1200 100644
--- a/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue
+++ b/src/pages/12_debit-note/expansion/WorkerItemExpansion.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { AddButton } from 'components/button';
+import ToggleButton from 'src/components/button/ToggleButton.vue';
 import WorkerItem from 'src/components/05_quotation/WorkerItem.vue';
 
 defineProps<{
@@ -48,8 +49,8 @@ const toggleWorker = defineModel<boolean>('toggleWorker');
             {{ $t('quotation.employeeList') }}
           </span>
           <template v-if="!readonly">
-            <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
-            {{ toggleWorker ? $t('general.specify') : $t('general.noSpecify') }}
+            <!-- <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
+            {{ toggleWorker ? $t('general.specify') : $t('general.noSpecify') }} -->
           </template>
         </div>
         <nav class="q-ml-auto">
diff --git a/src/pages/13_receipt/MainPage.vue b/src/pages/13_receipt/MainPage.vue
index 3e6083ce..1f934720 100644
--- a/src/pages/13_receipt/MainPage.vue
+++ b/src/pages/13_receipt/MainPage.vue
@@ -343,9 +343,16 @@ watch(
                       {
                         label: $t('general.customer'),
                         value:
-                          item.row.invoice.quotation.customerBranch
-                            .registerName ||
-                          `${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`,
+                          item.row.invoice.quotation.customerBranch.customer
+                            .customerType === 'CORP'
+                            ? $i18n.locale === 'tha'
+                              ? item.row.invoice.quotation.customerBranch
+                                  .registerName
+                              : item.row.invoice.quotation.customerBranch
+                                  .registerNameEN
+                            : $i18n.locale === 'tha'
+                              ? `${item.row.invoice.quotation.customerBranch?.firstName || '-'} ${item.row.invoice.quotation.customerBranch?.lastName || ''}`
+                              : `${item.row.invoice.quotation.customerBranch?.firstNameEN || '-'} ${item.row.invoice.quotation.customerBranch?.lastNameEN || ''}`,
                       },
                       {
                         label: $t('taskOrder.issueDate'),
diff --git a/src/pages/16_business-type-management/BusinessTypeDialog.vue b/src/pages/16_business-type-management/BusinessTypeDialog.vue
new file mode 100644
index 00000000..f0a6f0ff
--- /dev/null
+++ b/src/pages/16_business-type-management/BusinessTypeDialog.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { BusinessTypePayLoad } from 'src/stores/business-type/types';
+
+import { useInstitution } from 'src/stores/institution';
+
+import DialogForm from 'src/components/DialogForm.vue';
+
+const model = defineModel<boolean>({ required: true, default: false });
+
+const props = withDefaults(
+  defineProps<{
+    readonly?: boolean;
+    isEdit?: boolean;
+    hideAction?: boolean;
+    hideDelete?: boolean;
+
+    dataId?: string;
+  }>(),
+  { readonly: false, isEdit: false, dataId: '' },
+);
+
+const emit = defineEmits<{
+  (e: 'submit'): void;
+  (e: 'close'): void;
+}>();
+
+const data = defineModel<BusinessTypePayLoad>('data', {
+  required: true,
+  default: {
+    name: '',
+    nameEN: '',
+  },
+});
+</script>
+<template>
+  <DialogForm
+    :title="
+      $t(`general.${data.id ? 'edit' : 'add'}`, {
+        text: $t('businessType.title'),
+      })
+    "
+    :height="'50'"
+    :maxWidth="'60'"
+    v-model:modal="model"
+    :submit="() => $emit('submit')"
+    :close="
+      () => {
+        $emit('close');
+      }
+    "
+  >
+    <div class="scroll q-pa-md q-gutter-sm">
+      <q-input
+        for="input-agencies-name"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col"
+        :label="$t('businessType.name')"
+        v-model="data.name"
+        :rules="[
+          (val) => !!val || $t('form.error.required'),
+          (val) =>
+            /^[A-Za-z0-9ก-๙\s&.,'-]+$/.test(val) ||
+            $t('form.error.branchNameField'),
+        ]"
+      />
+
+      <q-input
+        for="input-agencies-name"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col"
+        :label="$t('businessType.nameEn')"
+        v-model="data.nameEN"
+        :rules="[(val) => !!val || $t('form.error.required')]"
+      />
+    </div>
+  </DialogForm>
+</template>
+<style scoped></style>
diff --git a/src/pages/16_business-type-management/MainPage.vue b/src/pages/16_business-type-management/MainPage.vue
new file mode 100644
index 00000000..64326907
--- /dev/null
+++ b/src/pages/16_business-type-management/MainPage.vue
@@ -0,0 +1,696 @@
+<script lang="ts" setup>
+import { QTableProps } from 'quasar';
+import { dialog } from 'src/stores/utils';
+import { onMounted, reactive, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+
+import { baseUrl, canAccess } from 'src/stores/utils';
+
+import useBusinessTypeStore from 'src/stores/business-type';
+import { useNavigator } from 'src/stores/navigator';
+import { useInstitution } from 'src/stores/institution';
+import {
+  BusinessType,
+  BusinessTypePayLoad,
+} from 'src/stores/business-type/types';
+
+import { formatAddress } from 'src/utils/address';
+
+import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+import PaginationComponent from 'src/components/PaginationComponent.vue';
+import KebabAction from 'src/components/shared/KebabAction.vue';
+import StatCardComponent from 'src/components/StatCardComponent.vue';
+import FloatingActionButton from 'src/components/FloatingActionButton.vue';
+import CreateButton from 'src/components/AddButton.vue';
+import NoData from 'src/components/NoData.vue';
+import BusinessTypeDialog from './BusinessTypeDialog.vue';
+import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
+
+const { t } = useI18n();
+const $q = useQuasar();
+
+const useBusinessType = useBusinessTypeStore();
+const navigatorStore = useNavigator();
+
+const { data, page, pageMax, pageSize } = storeToRefs(useBusinessType);
+
+const fieldSelected = ref<('no' | 'name' | 'nameEN')[]>([
+  'no',
+  'name',
+  'nameEN',
+]);
+const fieldSelectedOption = ref<{ label: string; value: string }[]>([
+  {
+    label: 'general.order',
+    value: 'no',
+  },
+
+  {
+    label: 'general.name',
+    value: 'name',
+  },
+
+  {
+    label: 'general.nameEN',
+    value: 'nameEN',
+  },
+]);
+const columns = [
+  {
+    name: 'no',
+    align: 'center',
+    label: 'general.order',
+    field: 'no',
+  },
+  ,
+  {
+    name: 'name',
+    align: 'left',
+    label: 'general.name',
+    field: 'name',
+  },
+  {
+    name: 'nameEN',
+    align: 'left',
+    label: 'general.nameEN',
+    field: 'nameEN',
+  },
+] satisfies QTableProps['columns'];
+const pageState = reactive({
+  hideStat: false,
+  inputSearch: '',
+  gridView: false,
+  total: 0,
+
+  businessTypeDialog: false,
+  viewDrawer: false,
+  isDrawerEdit: true,
+  searchDate: [],
+});
+
+const blankFormData: BusinessTypePayLoad = {
+  name: '',
+  nameEN: '',
+};
+
+const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
+const formData = ref<BusinessTypePayLoad | undefined>(
+  structuredClone(blankFormData),
+);
+const currBusinessType = ref<BusinessType>();
+
+function triggerDialog(type: 'add' | 'edit') {
+  if (type === 'add') {
+    formData.value = structuredClone(blankFormData);
+    pageState.businessTypeDialog = true;
+  }
+
+  if (type === 'edit') {
+    pageState.businessTypeDialog = true;
+  }
+}
+
+function resetForm() {
+  pageState.businessTypeDialog = false;
+  currBusinessType.value = undefined;
+  formData.value = structuredClone(blankFormData);
+}
+
+function assignFormData(data: BusinessType) {
+  currBusinessType.value = data;
+  formData.value = { id: data.id, name: data.name, nameEN: data.nameEN };
+}
+
+async function submit() {
+  const payload = {
+    id: formData.value.id,
+    name: formData.value.name,
+    nameEN: formData.value.nameEN,
+  };
+  if (currBusinessType.value?.id) {
+    const ret = await useBusinessType.editById(payload);
+
+    if (ret) {
+      await fetchData($q.screen.xs);
+      pageState.businessTypeDialog = false;
+      return;
+    }
+  } else {
+    await useBusinessType.create(payload);
+    await fetchData($q.screen.xs);
+    pageState.businessTypeDialog = false;
+    return;
+  }
+}
+
+async function triggerDelete(id?: string) {
+  if (!id) return;
+  dialog({
+    color: 'negative',
+    icon: 'mdi-trash-can-outline',
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
+    persistent: true,
+    message: t('dialog.message.confirmDelete'),
+    action: async () => {
+      await useBusinessType.deleteById(id);
+      resetForm();
+      await fetchData($q.screen.xs);
+    },
+    cancel: () => {},
+  });
+}
+
+async function fetchData(mobileFetch?: boolean) {
+  const ret = await useBusinessType.fetchList({
+    page: mobileFetch ? 1 : page.value,
+    pageSize: mobileFetch
+      ? data.value.length + (pageState.total === data.value.length ? 1 : 0)
+      : pageSize.value,
+    query: pageState.inputSearch,
+  });
+
+  if (ret) {
+    data.value =
+      $q.screen.xs && !mobileFetch
+        ? [...data.value, ...ret.result]
+        : ret.result;
+    pageMax.value = Math.ceil(ret.total / pageSize.value);
+    pageState.total = ret.total;
+  }
+}
+
+onMounted(async () => {
+  navigatorStore.current.title = 'businessType.title';
+  navigatorStore.current.path = [{ text: 'businessType.caption', i18n: true }];
+  pageState.gridView = $q.screen.lt.md ? true : false;
+
+  await fetchData();
+});
+
+watch(
+  () => [pageState.inputSearch, statusFilter.value, pageState.searchDate],
+  () => {
+    page.value = 1;
+    data.value = [];
+    fetchData();
+  },
+);
+</script>
+<template>
+  <FloatingActionButton
+    v-if="canAccess('agencies', 'edit')"
+    style="z-index: 999"
+    hide-icon
+    @click="triggerDialog('add')"
+  ></FloatingActionButton>
+
+  <div class="column full-height no-wrap">
+    <!-- SEC: stat -->
+    <section class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('general.dataSum') }}
+      <q-badge
+        rounded
+        class="q-ml-sm"
+        style="
+          background-color: hsla(var(--info-bg) / 0.15);
+          color: hsl(var(--info-bg));
+        "
+      >
+        {{ pageState.total }}
+      </q-badge>
+      <q-btn
+        class="q-ml-sm"
+        icon="mdi-pin-outline"
+        color="primary"
+        size="sm"
+        flat
+        dense
+        rounded
+        @click="pageState.hideStat = !pageState.hideStat"
+        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
+        style="transition: 0.1s ease-in-out"
+      />
+    </section>
+
+    <transition name="slide">
+      <div v-if="!pageState.hideStat" class="scroll q-mb-md">
+        <div style="display: inline-block">
+          <StatCardComponent
+            labelI18n
+            :branch="[
+              {
+                icon: 'lucide:briefcase-business',
+                count: pageState.total,
+                label: 'businessType.title',
+                color: 'purple',
+              },
+            ]"
+            :dark="$q.dark.isActive"
+          />
+        </div>
+      </div>
+    </transition>
+
+    <!-- SEC: header content -->
+    <section class="col surface-1 rounded bordered overflow-hidden">
+      <div class="column full-height no-wrap">
+        <header
+          class="row surface-3 justify-between full-width items-center bordered-b"
+          style="z-index: 1"
+        >
+          <div class="row q-py-sm q-px-md justify-between full-width">
+            <q-input
+              for="input-search"
+              outlined
+              dense
+              :label="$t('general.search')"
+              class="col col-md-3"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="pageState.inputSearch"
+              debounce="200"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+              <template v-slot:append>
+                <q-separator vertical inset class="q-mr-xs" />
+                <AdvanceSearch
+                  v-model="pageState.searchDate"
+                  :active="$q.screen.lt.md && statusFilter !== 'all'"
+                >
+                  <div
+                    v-if="$q.screen.lt.md"
+                    class="q-mt-sm text-weight-medium"
+                  >
+                    {{ $t('general.status') }}
+                  </div>
+                  <q-select
+                    v-if="$q.screen.lt.md"
+                    v-model="statusFilter"
+                    outlined
+                    dense
+                    option-value="value"
+                    option-label="label"
+                    map-options
+                    emit-value
+                    :for="'field-select-status'"
+                    :options="[
+                      { label: $t('general.all'), value: 'all' },
+                      { label: $t('general.active'), value: 'statusACTIVE' },
+                      {
+                        label: $t('general.inactive'),
+                        value: 'statusINACTIVE',
+                      },
+                    ]"
+                  />
+                </AdvanceSearch>
+              </template>
+            </q-input>
+
+            <div class="row col-md-5 justify-end" style="white-space: nowrap">
+              <q-select
+                v-if="!pageState.gridView"
+                id="select-field"
+                for="select-field"
+                class="col-md-5 q-ml-sm"
+                :options="
+                  fieldSelectedOption.map((v) => ({
+                    ...v,
+                    label: $t(v.label),
+                  }))
+                "
+                :display-value="$t('general.displayField')"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                v-model="fieldSelected"
+                option-label="label"
+                option-value="value"
+                autocomplete="off"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
+
+              <q-btn-toggle
+                id="btn-mode"
+                v-model="pageState.gridView"
+                dense
+                class="no-shadow bordered rounded surface-1 q-ml-sm"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                size="xs"
+                :options="[
+                  { value: true, slot: 'folder' },
+                  { value: false, slot: 'list' },
+                ]"
+              >
+                <template v-slot:folder>
+                  <q-icon
+                    name="mdi-view-grid-outline"
+                    size="16px"
+                    class="q-px-sm q-py-xs rounded"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : pageState.gridView
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+                <template v-slot:list>
+                  <q-icon
+                    name="mdi-format-list-bulleted"
+                    class="q-px-sm q-py-xs rounded"
+                    size="16px"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : pageState.gridView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
+            </div>
+          </div>
+        </header>
+
+        <!-- SEC: body content -->
+        <article
+          v-if="data.length === 0"
+          class="col surface-2 flex items-center justify-center"
+        >
+          <NoData
+            v-if="pageState.inputSearch"
+            :not-found="!!pageState.inputSearch"
+          />
+
+          <CreateButton
+            v-if="!pageState.inputSearch && pageState.total === 0"
+            @click="triggerDialog('add')"
+            label="general.add"
+            :i18n-args="{ text: $t('agencies.title') }"
+          />
+        </article>
+
+        <article v-else class="col q-pa-md surface-2 scroll full-width">
+          <q-infinite-scroll
+            :offset="100"
+            @load="
+              (_, done) => {
+                if ($q.screen.gt.xs || page === pageMax) return;
+                page = page + 1;
+                fetchData().then(() => done(page >= pageMax));
+              }
+            "
+          >
+            <q-table
+              flat
+              bordered
+              :grid="pageState.gridView"
+              :rows="data"
+              :columns="columns"
+              class="full-width"
+              card-container-class="q-col-gutter-md"
+              row-key="name"
+              :rows-per-page-options="[0]"
+              hide-pagination
+              :visible-columns="fieldSelected"
+            >
+              <template v-slot:header="props">
+                <q-tr
+                  style="background-color: hsla(var(--info-bg) / 0.07)"
+                  :props="props"
+                >
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    {{ $t(col.label) }}
+                  </q-th>
+                  <q-th auto-width />
+                </q-tr>
+              </template>
+
+              <template v-slot:body="props">
+                <q-tr
+                  :class="{
+                    'app-text-muted': props.row.status === 'INACTIVE',
+                    'status-active': props.row.status !== 'INACTIVE',
+                    'status-inactive': props.row.status === 'INACTIVE',
+                  }"
+                  :props="props"
+                  :style="
+                    props.rowIndex % 2 !== 0
+                      ? $q.dark.isActive
+                        ? 'background: hsl(var(--gray-11-hsl)/0.2)'
+                        : `background: #f9fafc`
+                      : ''
+                  "
+                >
+                  <q-td class="text-center" v-if="fieldSelected.includes('no')">
+                    {{
+                      $q.screen.xs
+                        ? props.rowIndex + 1
+                        : (page - 1) * pageSize + props.rowIndex + 1
+                    }}
+                  </q-td>
+                  <q-td v-if="fieldSelected.includes('name')">
+                    <section class="row items-center no-wrap">
+                      <q-avatar size="md">
+                        <q-img
+                          class="text-center"
+                          :ratio="1"
+                          :src="`${baseUrl}/institution/${props.row.id}/image/${props.row.selectedImage}?ts=${Date.now()}`"
+                        >
+                          <template #error>
+                            <div
+                              class="no-padding full-width full-height flex items-center justify-center"
+                              style="
+                                background: hsla(var(--violet-10-hsl) / 0.1);
+                                color: hsla(var(--violet-10-hsl) / 1);
+                              "
+                            >
+                              <Icon icon="lucide:briefcase-business" />
+                            </div>
+                          </template>
+                        </q-img>
+
+                        <q-badge
+                          class="absolute-bottom-right no-padding"
+                          style="
+                            border-radius: 50%;
+                            min-width: 8px;
+                            min-height: 8px;
+                          "
+                          :style="{
+                            background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                          }"
+                        ></q-badge>
+                      </q-avatar>
+                      <span class="col q-pl-md">
+                        <div>
+                          {{
+                            $i18n.locale === 'eng'
+                              ? props.row.nameEN
+                              : props.row.name
+                          }}
+                        </div>
+                        <div class="app-text-muted">
+                          {{ props.row.code }}
+                        </div>
+                      </span>
+                    </section>
+                  </q-td>
+
+                  <q-td v-if="fieldSelected.includes('nameEN')">
+                    <span class="col row items-center no-wrap">
+                      <div>
+                        {{ props.row.nameEN }}
+                      </div>
+                    </span>
+                  </q-td>
+
+                  <q-td>
+                    <KebabAction
+                      hide-toggle
+                      hide-view
+                      :id-name="props.row.name"
+                      :status="props.row.status"
+                      @edit="
+                        () => {
+                          assignFormData(props.row);
+                          triggerDialog('edit');
+                        }
+                      "
+                      @delete="() => triggerDelete(props.row.id)"
+                    />
+                  </q-td>
+                </q-tr>
+              </template>
+
+              <template v-slot:item="props">
+                <section class="column col-12 col-md-6">
+                  <div class="bordered col surface-1 rounded q-pa-md">
+                    <header class="row items-center">
+                      <q-avatar size="xl">
+                        <q-img
+                          class="text-center"
+                          :ratio="1"
+                          :src="`${baseUrl}/institution/${props.row.id}/image/${props.row.selectedImage}?ts=${Date.now()}`"
+                        >
+                          <template #error>
+                            <div
+                              class="no-padding full-width full-height flex items-center justify-center"
+                              style="
+                                background: hsla(var(--violet-10-hsl) / 0.1);
+                                color: hsla(var(--violet-10-hsl) / 1);
+                              "
+                            >
+                              <Icon icon="lucide:briefcase-business" />
+                            </div>
+                          </template>
+                        </q-img>
+
+                        <q-badge
+                          class="absolute-bottom-right no-padding"
+                          style="
+                            border-radius: 50%;
+                            min-width: 10px;
+                            min-height: 10px;
+                          "
+                          :style="{
+                            background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
+                          }"
+                        ></q-badge>
+                      </q-avatar>
+                      <span class="text-weight-bold column q-pl-md">
+                        {{
+                          $i18n.locale === 'tha'
+                            ? props.row.name
+                            : props.row.nameEN
+                        }}
+
+                        <span class="text-caption app-text-muted-2">
+                          {{
+                            $i18n.locale === 'tha'
+                              ? props.row.nameEN
+                              : props.row.name
+                          }}
+                        </span>
+                      </span>
+                      <nav
+                        class="row q-ml-auto items-center justify-end no-wrap"
+                      >
+                        <KebabAction
+                          hide-toggle
+                          hide-view
+                          :id-name="props.row.id"
+                          :status="props.row.status"
+                          @edit="
+                            () => {
+                              assignFormData(props.row);
+                              triggerDialog('edit');
+                            }
+                          "
+                          @delete="() => triggerDelete(props.row.id)"
+                        />
+                      </nav>
+                    </header>
+                  </div>
+                </section>
+              </template>
+            </q-table>
+            <template v-slot:loading>
+              <div
+                v-if="$q.screen.lt.sm && page !== pageMax"
+                class="row justify-center"
+              >
+                <q-spinner-dots color="primary" size="40px" />
+              </div>
+            </template>
+          </q-infinite-scroll>
+        </article>
+
+        <!-- SEC: footer content -->
+        <footer
+          class="row justify-between items-center q-px-md q-py-sm surface-2"
+          v-if="pageMax > 0 && $q.screen.gt.xs"
+        >
+          <div class="col-4">
+            <div class="row items-center no-wrap">
+              <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
+                {{ $t('general.recordPerPage') }}
+              </div>
+              <div>
+                <PaginationPageSize
+                  v-model="pageSize"
+                  :fetch-data="() => fetchData()"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="col-4 row justify-center app-text-muted">
+            {{
+              $q.screen.gt.sm
+                ? $t('general.recordsPage', {
+                    resultcurrentPage: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
+                : $t('general.ofPage', {
+                    current: data.length,
+                    total: pageState.inputSearch
+                      ? data.length
+                      : pageState.total,
+                  })
+            }}
+          </div>
+          <nav class="col-4 row justify-end">
+            <PaginationComponent
+              v-model:current-page="page"
+              v-model:max-page="pageMax"
+              :fetch-data="() => fetchData()"
+            />
+          </nav>
+        </footer>
+      </div>
+    </section>
+  </div>
+
+  <BusinessTypeDialog
+    ref="refBusinessTypeDialog"
+    :data-id="currBusinessType && currBusinessType.id"
+    @close="resetForm"
+    @submit="submit"
+    v-model="pageState.businessTypeDialog"
+    v-model:data="formData"
+  />
+</template>
+<style scoped>
+.slide-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+</style>
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 24d2f8fb..de8d1f7d 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -2,17 +2,15 @@
 import MenuItem from 'components/00_home/MenuItem.vue';
 import { useNavigator } from 'src/stores/navigator';
 import { onMounted, ref } from 'vue';
-import { getRole } from 'src/services/keycloak';
+import { canAccess } from 'src/stores/utils';
 
 const navigatorStore = useNavigator();
 const menu = ref<InstanceType<typeof MenuItem>['$props']['list']>([]);
-const role = ref();
 
 onMounted(() => {
   navigatorStore.current.title = '';
   navigatorStore.current.path = [{ text: '' }];
 
-  role.value = getRole();
   menu.value = [
     {
       value: 'branch-management',
@@ -20,14 +18,7 @@ onMounted(() => {
       color: 'green',
       title: 'menu.branch',
       caption: 'menu.branchCaption',
-      hidden:
-        role.value.includes('admin') ||
-        role.value.includes('branch_admin') ||
-        role.value.includes('head_of_admin') ||
-        role.value.includes('system') ||
-        role.value.includes('owner')
-          ? false
-          : true,
+      hidden: !canAccess('branch'),
     },
     {
       value: 'personnel-management',
@@ -35,15 +26,7 @@ onMounted(() => {
       color: 'cyan',
       title: 'menu.user',
       caption: 'menu.userCaption',
-      hidden:
-        role.value.includes('admin') ||
-        role.value.includes('branch_admin') ||
-        role.value.includes('head_of_admin') ||
-        role.value.includes('system') ||
-        role.value.includes('owner') ||
-        role.value.includes('branch_manager')
-          ? false
-          : true,
+      hidden: !canAccess('personnel'),
     },
     {
       value: 'customer-management',
@@ -52,6 +35,7 @@ onMounted(() => {
       title: 'menu.customer',
       caption: 'menu.customerCaption',
       isax: true,
+      hidden: !canAccess('customer'),
     },
     {
       value: 'product-service',
@@ -115,6 +99,7 @@ onMounted(() => {
       title: 'menu.dashboard',
       caption: 'menu.dashboardCaption',
       isax: true,
+      hidden: !canAccess('dashBoard'),
     },
   ];
 });
diff --git a/src/router/routes.ts b/src/router/routes.ts
index e05049fd..8684e873 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,5 +1,5 @@
 import { RouteRecordRaw } from 'vue-router';
-import { isRoleInclude } from 'stores/utils';
+import { isRoleInclude, canAccess } from 'stores/utils';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -16,21 +16,8 @@ const routes: RouteRecordRaw[] = [
         path: '/branch-management',
         name: 'BranchManagement',
         beforeEnter: (to, from, next) => {
-          if (
-            isRoleInclude([
-              'admin',
-              'branch_admin',
-              'head_of_admin',
-              'head_of_account',
-              'system',
-              'owner',
-              'branch_manager',
-            ])
-          ) {
-            next();
-          } else {
-            next('/');
-          }
+          if (canAccess('branch')) next();
+          else next('/');
         },
         component: () => import('pages/01_branch-management/MainPage.vue'),
       },
@@ -38,36 +25,36 @@ const routes: RouteRecordRaw[] = [
         path: '/personnel-management',
         name: 'PersonnelManagement',
         beforeEnter: (to, from, next) => {
-          if (
-            isRoleInclude([
-              'admin',
-              'branch_admin',
-              'head_of_admin',
-              'system',
-              'owner',
-              'branch_manager',
-            ])
-          ) {
-            next();
-          } else {
-            next('/');
-          }
+          if (canAccess('personnel')) next();
+          else next('/');
         },
         component: () => import('pages/02_personnel-management/MainPage.vue'),
       },
       {
         path: '/customer-management',
         name: 'CustomerManagement',
+        beforeEnter: (to, from, next) => {
+          if (canAccess('customer')) next();
+          else next('/');
+        },
         component: () => import('pages/03_customer-management/MainPage.vue'),
       },
       {
         path: '/customer-management/:customerId',
         name: 'CustomerSpecificManagement',
+        beforeEnter: (to, from, next) => {
+          if (canAccess('customer')) next();
+          else next('/');
+        },
         component: () => import('pages/03_customer-management/MainPage.vue'),
       },
       {
         path: '/customer-management/:customerId/branch',
         name: 'CustomerBranchManagement',
+        beforeEnter: (to, from, next) => {
+          if (canAccess('customer')) next();
+          else next('/');
+        },
         component: () => import('pages/03_customer-management/MainPage.vue'),
       },
       {
@@ -78,11 +65,19 @@ const routes: RouteRecordRaw[] = [
       {
         path: '/workflow',
         name: 'Workflow',
+        beforeEnter: (to, from, next) => {
+          if (canAccess('workflow')) next();
+          else next('/');
+        },
         component: () => import('pages/04_flow-managment/MainPage.vue'),
       },
       {
         path: '/property',
         name: 'Property',
+        beforeEnter: (to, from, next) => {
+          if (canAccess('workflow')) next();
+          else next('/');
+        },
         component: () => import('pages/04_property-managment/MainPage.vue'),
       },
       {
@@ -95,9 +90,22 @@ const routes: RouteRecordRaw[] = [
         name: 'document-management',
         component: () => import('pages/06_edm/MainPage.vue'),
       },
+      {
+        path: '/group-management',
+        name: '/group-management',
+        beforeEnter: (to, from, next) => {
+          if (canAccess('personnel')) next();
+          else next('/');
+        },
+        component: () => import('pages/02_group-management/MainPage.vue'),
+      },
       {
         path: '/agencies-management',
         name: 'agencies-management',
+        beforeEnter: (to, from, next) => {
+          if (canAccess('agencies')) next();
+          else next('/');
+        },
         component: () => import('pages/07_agencies-management/MainPage.vue'),
       },
       {
@@ -138,6 +146,10 @@ const routes: RouteRecordRaw[] = [
       {
         path: '/dash-board',
         name: 'dashBoard',
+        beforeEnter: (to, from, next) => {
+          if (canAccess('dashBoard')) next();
+          else next('/');
+        },
         component: () => import('pages/15_dash-board/MainPage.vue'),
       },
       {
@@ -145,6 +157,12 @@ const routes: RouteRecordRaw[] = [
         name: 'Notification',
         component: () => import('pages/00_notification/MainPage.vue'),
       },
+      {
+        path: '/business-type',
+        name: 'businessType',
+        component: () =>
+          import('pages/16_business-type-management/MainPage.vue'),
+      },
       {
         path: '/manual',
         name: 'Manual',
@@ -155,6 +173,16 @@ const routes: RouteRecordRaw[] = [
         name: 'ManualView',
         component: () => import('pages/00_manual/ViewPage.vue'),
       },
+      {
+        path: '/troubleshooting',
+        name: 'Troubleshooting',
+        component: () => import('pages/00_manual/MainPage.vue'),
+      },
+      {
+        path: '/troubleshooting/:category/:page',
+        name: 'TroubleshootingView',
+        component: () => import('pages/00_manual/ViewPage.vue'),
+      },
     ],
   },
 
@@ -215,7 +243,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: '/receipt/:id',
-    name: 'receiptform',
+    name: 'receiptForm',
     component: () => import('pages/13_receipt/MainPage.vue'),
   },
   {
diff --git a/src/stores/branch/index.ts b/src/stores/branch/index.ts
index 7225fb7d..6bcae077 100644
--- a/src/stores/branch/index.ts
+++ b/src/stores/branch/index.ts
@@ -447,6 +447,17 @@ const useBranchStore = defineStore('api-branch', () => {
     return false;
   }
 
+  async function fetchListBankByBranch(branchId: string) {
+    const res = await api.get(`/branch/${branchId}/bank`, {
+      headers: { 'X-Rtid': flowStore.rtid },
+    });
+
+    if (!res) return false;
+    if (res.status === 200) return res.data;
+
+    return false;
+  }
+
   return {
     data,
     map,
@@ -475,6 +486,8 @@ const useBranchStore = defineStore('api-branch', () => {
     fetchByIdAttachment,
     putAttachment,
     deleteByIdAttachment,
+
+    fetchListBankByBranch,
   };
 });
 
diff --git a/src/stores/business-type/index.ts b/src/stores/business-type/index.ts
new file mode 100644
index 00000000..d9ef83f2
--- /dev/null
+++ b/src/stores/business-type/index.ts
@@ -0,0 +1,94 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { Pagination, Status } from '../types';
+import { api } from 'src/boot/axios';
+
+import { BusinessType, BusinessTypePayLoad } from './types';
+import axios from 'axios';
+
+const useBusinessTypeStore = defineStore('business-type-store', () => {
+  const data = ref<BusinessType[]>([]);
+  const page = ref<number>(1);
+  const pageMax = ref<number>(1);
+  const pageSize = ref<number>(30);
+
+  async function fetchList(opts?: {
+    page?: number;
+    pageSize?: number;
+    query?: string;
+  }) {
+    const res = await api.get<Pagination<BusinessType[]>>('/business-type', {
+      params: opts,
+    });
+
+    if (res && res.status === 200) {
+      return res.data;
+    }
+    return false;
+  }
+
+  async function fetchById(id: string) {
+    const res = await api.get<BusinessType>(`/business-type/${id}`);
+
+    if (!res) return false;
+    if (res.status === 200) return res.data;
+    if (res.status === 204) return null;
+
+    return false;
+  }
+
+  async function create(
+    data: BusinessTypePayLoad,
+  ): Promise<BusinessType | null> {
+    const res = await api.post<BusinessType>('/business-type', {
+      ...data,
+    });
+
+    if (res.status < 400) {
+      return res.data;
+    }
+    return null;
+  }
+
+  async function editById(data: BusinessTypePayLoad) {
+    const { id, ...payload } = data;
+
+    const res = await api.put<BusinessTypePayLoad>(
+      `/business-type/${id}`,
+      payload,
+    );
+
+    if (!res) return false;
+
+    return res.data;
+  }
+
+  async function deleteById(id: string) {
+    const res = await api.delete<BusinessType>(`/business-type/${id}`);
+
+    if (!res) return false;
+    if (res.status === 200) return res.data;
+
+    return false;
+  }
+
+  return {
+    data,
+    page,
+    pageMax,
+    pageSize,
+
+    fetchList,
+    fetchById,
+
+    create,
+
+    editById,
+
+    deleteById,
+  };
+});
+
+export * from './types';
+
+export default useBusinessTypeStore;
diff --git a/src/stores/business-type/types.ts b/src/stores/business-type/types.ts
new file mode 100644
index 00000000..d8bf9471
--- /dev/null
+++ b/src/stores/business-type/types.ts
@@ -0,0 +1,15 @@
+export type BusinessType = {
+  updatedByUserId: string;
+  updatedAt: Date;
+  createdByUserId: string;
+  createdAt: Date;
+  nameEN: string;
+  name: string;
+  id: string;
+};
+
+export type BusinessTypePayLoad = {
+  nameEN: string;
+  name: string;
+  id?: string;
+};
diff --git a/src/stores/credit-note/index.ts b/src/stores/credit-note/index.ts
index 24da139e..a1507481 100644
--- a/src/stores/credit-note/index.ts
+++ b/src/stores/credit-note/index.ts
@@ -9,6 +9,10 @@ import { defineStore } from 'pinia';
 
 import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
+import { RequestWork, RequestWorkStatus } from 'src/stores/request-list/types';
+import { precisionRound } from 'src/utils/arithmetic';
+import { useConfigStore } from 'src/stores/config';
+
 import { manageAttachment, manageFile } from '../utils';
 
 const ENDPOINT = 'credit-note';
@@ -80,6 +84,7 @@ export async function acceptCreditNote(id: string) {
 }
 
 export const useCreditNote = defineStore('credit-note-store', () => {
+  const configStore = useConfigStore();
   const data = ref<Data[]>([]);
   const page = ref<number>(1);
   const pageMax = ref<number>(1);
@@ -90,6 +95,75 @@ export const useCreditNote = defineStore('credit-note-store', () => {
     [Status.Success]: 0,
   });
 
+  function getfinalPriceCredit(c: RequestWork[]): {
+    totalPrice: number;
+    totalDiscount: number;
+    vat: number;
+    vatIncluded: number;
+    vatExcluded: number;
+    finalPrice: number;
+  } {
+    const price = c.reduce(
+      (acc, crr) => {
+        const servicesChargeStepCount =
+          crr.productService.work?.productOnWork?.find(
+            (item) => item.productId === crr.productService.productId,
+          ).stepCount;
+
+        const successCount = crr.stepStatus.filter(
+          (item) => item.workStatus === RequestWorkStatus.Completed,
+        ).length;
+
+        const vatFactor =
+          crr.productService.vat > 0 ? (configStore.data?.vat ?? 0.07) : 0;
+
+        const price = precisionRound(
+          crr.productService.pricePerUnit * (1 + vatFactor) -
+            crr.productService.discount,
+        );
+
+        const vat = crr.productService.product.calcVat
+          ? (price / (1 + vatFactor)) * vatFactor
+          : 0;
+
+        acc.totalPrice = precisionRound(
+          acc.totalPrice + price + crr.productService.discount,
+        );
+        acc.totalDiscount = precisionRound(
+          acc.totalDiscount + crr.productService.discount,
+        );
+        acc.vat = precisionRound(acc.vat + vat);
+        acc.vatExcluded = crr.productService.product.agentPriceCalcVat
+          ? acc.vatExcluded
+          : precisionRound(acc.vatExcluded + price / (1 + vatFactor));
+
+        if (servicesChargeStepCount && successCount) {
+          acc.finalPrice = precisionRound(
+            acc.finalPrice +
+              price -
+              crr.productService.product.serviceCharge * successCount,
+          );
+
+          return acc;
+        }
+
+        acc.finalPrice = precisionRound(acc.finalPrice + price);
+
+        return acc;
+      },
+      {
+        totalPrice: 0,
+        totalDiscount: 0,
+        vat: 0,
+        vatIncluded: 0,
+        vatExcluded: 0,
+        finalPrice: 0,
+      },
+    );
+
+    return price;
+  }
+
   return {
     data,
     page,
@@ -97,6 +171,8 @@ export const useCreditNote = defineStore('credit-note-store', () => {
     pageSize,
     stats,
 
+    getfinalPriceCredit,
+
     getCreditNoteStats,
     getCreditNote,
     getCreditNoteList,
diff --git a/src/stores/customer/index.ts b/src/stores/customer/index.ts
index fe08b0ca..91d07553 100644
--- a/src/stores/customer/index.ts
+++ b/src/stores/customer/index.ts
@@ -13,6 +13,7 @@ import {
   CitizenPayload,
 } from './types';
 import { Employee } from '../employee/types';
+import { getToken } from 'src/services/keycloak';
 import { baseUrl, manageAttachment, manageFile, manageMeta } from '../utils';
 
 const useCustomerStore = defineStore('api-customer', () => {
@@ -79,7 +80,6 @@ const useCustomerStore = defineStore('api-customer', () => {
       customerId?: string;
       company?: boolean;
       includeCustomer?: boolean;
-      activeRegisBranchOnly?: boolean;
       registeredBranchId?: string;
       status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
       query?: string;
@@ -115,6 +115,10 @@ const useCustomerStore = defineStore('api-customer', () => {
       customerType?: CustomerType;
       startDate?: string;
       endDate?: string;
+      businessTypeId?: string;
+      provinceId?: string;
+      districtId?: string;
+      subDistrictId?: string;
     },
     Data extends Pagination<
       (Customer &
@@ -281,18 +285,21 @@ const useCustomerStore = defineStore('api-customer', () => {
 
         if (tempValue) {
           tempValue.file?.forEach(async ({ group, _meta, file }) => {
-            if (file !== undefined) {
+            if (!file) return;
+
+            if (group === 'citizen') {
               await metaManager.postMeta({
                 parentId: v.id,
-                group: group as
-                  | 'citizen'
-                  | 'house-registration'
-                  | 'commercial-registration'
-                  | 'vat-registration'
-                  | 'power-of-attorney',
+                group: 'citizen',
                 meta: _meta,
                 file,
               });
+            } else {
+              await attachmentManager.putAttachment({
+                parentId: v.id || '',
+                name: file.name,
+                file: file,
+              });
             }
           });
         }
@@ -470,6 +477,56 @@ const useCustomerStore = defineStore('api-customer', () => {
     return false;
   }
 
+  async function customerExport(params: {
+    customerType?: CustomerType;
+    query?: string;
+    status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
+    page?: number;
+    pageSize?: number;
+    includeBranch?: boolean;
+    company?: boolean;
+    activeBranchOnly?: boolean;
+    startDate?: string | Date;
+    endDate?: string | Date;
+    businessTypeId?: string;
+    provinceId?: string;
+    districtId?: string;
+    subDistrictId?: string;
+  }) {
+    let url = baseUrl + '/' + 'customer-export';
+
+    const queryParams = new URLSearchParams(
+      Object.keys(params).reduce((acc: Record<string, string>, key) => {
+        const value = params[key as keyof typeof params];
+        if (value !== undefined && value !== null && value !== '') {
+          const stringValue =
+            typeof value === 'boolean' || typeof value === 'number'
+              ? String(value)
+              : value instanceof Date
+                ? value.toISOString()
+                : String(value);
+          acc[key] = stringValue;
+        }
+        return acc;
+      }, {}),
+    );
+
+    url += '?' + queryParams.toString();
+
+    const res = await fetch(url, {
+      headers: { ['Authorization']: 'Bearer ' + (await getToken()) },
+    });
+    const text = await res.json();
+    const blob = new Blob([text], { type: 'text/csv' });
+    if (res.ok && blob) {
+      const a = document.createElement('a');
+      a.download = 'customer-report' + '.csv';
+      a.href = window.URL.createObjectURL(blob);
+      a.click();
+      a.remove();
+    }
+  }
+
   return {
     data,
 
@@ -496,6 +553,8 @@ const useCustomerStore = defineStore('api-customer', () => {
     fetchBranchEmployee,
 
     deleteAttachment,
+
+    customerExport,
     ...attachmentManager,
     ...fileManager,
     ...metaManager,
diff --git a/src/stores/customer/types.ts b/src/stores/customer/types.ts
index 52be5c6e..1cc52f28 100644
--- a/src/stores/customer/types.ts
+++ b/src/stores/customer/types.ts
@@ -34,7 +34,12 @@ export type CustomerBranch = {
   payDate: string;
   jobDescription: string;
   jobPosition: string;
-  businessType: string;
+  businessTypeId: string;
+  businessType?: {
+    id: string;
+    name: string;
+    nameEN: string;
+  };
   agentUserId: string;
 
   contactName: string;
@@ -72,7 +77,6 @@ export type CustomerBranch = {
   namePrefix: string;
   telephoneNo: string;
   codeCustomer: string;
-  customerName: string;
   updatedByUserId: string;
   createdByUserId: string;
   code: string;
@@ -108,7 +112,7 @@ export type CustomerBranchCreate = {
   telephoneNo?: string;
   gender?: string;
   birthDate?: string;
-  businessType: string;
+  businessTypeId: string;
   jobPosition: string;
   jobDescription: string;
   payDate?: string;
@@ -135,7 +139,6 @@ export type CustomerBranchCreate = {
   officeTel?: string;
   agentUserId?: string;
   status: Status;
-  customerName?: string;
   registerName?: string;
   registerNameEN?: string;
   registerDate?: string | Date | null;
diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 73722d51..f7128eb6 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -15,6 +15,7 @@ import {
   EmployeeVisaPayload,
 } from './types';
 import { CustomerBranch } from '../customer/types';
+import { getToken } from 'src/services/keycloak';
 import { baseUrl, manageAttachment, manageFile, manageMeta } from '../utils';
 
 const useEmployeeStore = defineStore('api-employee', () => {
@@ -132,7 +133,10 @@ const useEmployeeStore = defineStore('api-employee', () => {
 
               if (group === undefined) return;
 
-              if (group !== 'attachment' && _meta !== undefined) {
+              if (
+                (group === 'passport' || group === 'visa') &&
+                _meta !== undefined
+              ) {
                 metaManager.postMeta({
                   parentId: res.data.id,
                   group: group as 'passport' | 'visa',
@@ -466,6 +470,55 @@ const useEmployeeStore = defineStore('api-employee', () => {
     return false;
   }
 
+  async function employeeExport(params: {
+    zipCode?: string;
+    gender?: string;
+    status?: Status;
+    visa?: boolean;
+    passport?: boolean;
+    customerId?: string;
+    customerBranchId?: string;
+    query?: string;
+    page?: number;
+    pageSize?: number;
+    activeOnly?: boolean;
+    startDate?: string | Date;
+    endDate?: string | Date;
+  }) {
+    let url = baseUrl + '/' + 'employee-export';
+
+    const queryParams = new URLSearchParams(
+      Object.keys(params).reduce((acc: Record<string, string>, key) => {
+        const value = params[key as keyof typeof params];
+        if (value !== undefined && value !== null && value !== '') {
+          const stringValue =
+            typeof value === 'boolean' || typeof value === 'number'
+              ? String(value)
+              : value instanceof Date
+                ? value.toISOString()
+                : String(value);
+          acc[key] = stringValue;
+        }
+        return acc;
+      }, {}),
+    );
+
+    url += '?' + queryParams.toString();
+
+    const res = await fetch(url, {
+      headers: { ['Authorization']: 'Bearer ' + (await getToken()) },
+    });
+    const text = await res.json();
+    const blob = new Blob([text], { type: 'text/csv' });
+    if (res.ok && blob) {
+      const a = document.createElement('a');
+      a.download = 'employee-report' + '.csv';
+      a.href = window.URL.createObjectURL(blob);
+      a.click();
+      a.remove();
+    }
+  }
+
   return {
     data,
     globalOption,
@@ -509,6 +562,8 @@ const useEmployeeStore = defineStore('api-employee', () => {
     ...attachmentManager,
     ...fileManager,
     ...metaManager,
+
+    employeeExport,
   };
 });
 
diff --git a/src/stores/employee/types.ts b/src/stores/employee/types.ts
index b2983d61..55050a69 100644
--- a/src/stores/employee/types.ts
+++ b/src/stores/employee/types.ts
@@ -108,7 +108,7 @@ export type EmployeeCreate = {
   employeeWork?: EmployeeWorkCreate[];
   employeeInCountryNotice?: EmployeeInCountryNoticePayload[];
   employeeVisa?: EmployeeVisaPayload[];
-  employeePassport?: EmployeePassportPayload[];
+  employeePassport?: (EmployeePassportPayload & { file?: File })[];
 
   employeeOtherInfo?: EmployeeOtherCreate;
 
@@ -304,6 +304,7 @@ export type EmployeeVisaPayload = {
   remark?: string;
   workerType: string;
   number: string;
+  reportDate: Date | null;
   id?: string;
 };
 
diff --git a/src/stores/institution/index.ts b/src/stores/institution/index.ts
index fedb8328..17305e62 100644
--- a/src/stores/institution/index.ts
+++ b/src/stores/institution/index.ts
@@ -5,9 +5,11 @@ import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
 import useFlowStore from '../flow';
 import { Status } from '../types';
+import { baseUrl, manageAttachment, manageFile, manageMeta } from '../utils';
 
 export const useInstitution = defineStore('institution-store', () => {
   const flowStore = useFlowStore();
+  const attachmentManager = manageAttachment(api, 'institution');
 
   const data = ref<Institution[]>([]);
   const page = ref<number>(1);
@@ -31,11 +33,10 @@ export const useInstitution = defineStore('institution-store', () => {
     payload?: { group?: string[] };
     startDate?: string;
     endDate?: string;
+    activeOnly?: boolean;
   }) {
     const { payload, ...params } = opts || {};
 
-    console.log(params.query);
-
     const res = payload
       ? await api.post<PaginationResult<Institution>>(
           '/institution/list',
@@ -74,18 +75,64 @@ export const useInstitution = defineStore('institution-store', () => {
       }
     }
 
+    if (res.data.bank && data.bank.length > 0) {
+      for (let i = 0; i < data.bank?.length; i++) {
+        if (data.bank[i].bankQr) {
+          await api
+            .put(
+              `/institution/${res.data.id}/bank-qr/${res.data.bank[i].id}`,
+              data.bank[i].bankQr,
+              {
+                headers: { 'Content-Type': data.bank[i].bankQr?.type },
+                onUploadProgress: (e) => console.log(e),
+              },
+            )
+            .catch((e) => console.error(e));
+        }
+      }
+    }
+
     if (res.status < 400) {
       return res.data;
     }
     return null;
   }
 
-  async function editInstitution(data: InstitutionPayload & { id: string }) {
+  async function editInstitution(
+    data: InstitutionPayload & { id: string },
+    opts?: { indexDeleteQrCodeBank?: number[] },
+  ) {
     const res = await api.put(`/institution/${data.id}`, {
       ...data,
       id: undefined,
       group: undefined,
     });
+
+    if (!!res.data.bank && !!data.bank.length) {
+      for (let i = 0; i < data.bank?.length; i++) {
+        if (data.bank[i].bankQr) {
+          await api
+            .put(
+              `/institution/${res.data.id}/bank-qr/${res.data.bank[i].id}`,
+              data.bank[i].bankQr,
+              {
+                headers: { 'Content-Type': data.bank[i].bankQr?.type },
+                onUploadProgress: (e) => console.log(e),
+              },
+            )
+            .catch((e) => console.error(e));
+        }
+      }
+    }
+
+    if (opts?.indexDeleteQrCodeBank && opts?.indexDeleteQrCodeBank.length > 0) {
+      opts.indexDeleteQrCodeBank.forEach(async (i) => {
+        await api
+          .delete(`/institution/${res.data.id}/bank-qr/${res.data.bank[i].id}`)
+          .catch((e) => console.error(e));
+      });
+    }
+
     if (res.status < 400) {
       return res.data;
     }
@@ -155,6 +202,7 @@ export const useInstitution = defineStore('institution-store', () => {
   }
 
   return {
+    ...attachmentManager,
     data,
     page,
     pageMax,
diff --git a/src/stores/manual/index.ts b/src/stores/manual/index.ts
index fef42284..e2842bd3 100644
--- a/src/stores/manual/index.ts
+++ b/src/stores/manual/index.ts
@@ -5,10 +5,11 @@ import { getToken } from 'src/services/keycloak';
 import { Manual } from './types';
 import { baseUrl } from '../utils';
 
-const ENDPOINT = 'manual';
+const MANUAL_ENDPOINT = 'manual';
+const TROUBLESHOOTING_ENDPOINT = 'troubleshooting';
 
 export async function getManual() {
-  const res = await api.get<Manual[]>(`/${ENDPOINT}`);
+  const res = await api.get<Manual[]>(`/${MANUAL_ENDPOINT}`);
   if (res.status < 400) {
     return res.data;
   }
@@ -20,7 +21,28 @@ export async function getManualByPage(opt: {
   pageName: string;
 }) {
   const res = await fetch(
-    `${baseUrl}/${ENDPOINT}/${opt.category}/page/${opt.pageName}`,
+    `${baseUrl}/${MANUAL_ENDPOINT}/${opt.category}/page/${opt.pageName}`,
+  );
+  if (res.status < 400) {
+    return res;
+  }
+  return null;
+}
+
+export async function getTroubleshooting() {
+  const res = await api.get<Manual[]>(`/${TROUBLESHOOTING_ENDPOINT}`);
+  if (res.status < 400) {
+    return res.data;
+  }
+  return null;
+}
+
+export async function getTroubleshootingByPage(opt: {
+  category: string;
+  pageName: string;
+}) {
+  const res = await fetch(
+    `${baseUrl}/${TROUBLESHOOTING_ENDPOINT}/${opt.category}/page/${opt.pageName}`,
   );
   if (res.status < 400) {
     return res;
@@ -30,11 +52,15 @@ export async function getManualByPage(opt: {
 
 export const useManualStore = defineStore('manual-store', () => {
   const dataManual = ref<Manual[]>([]);
+  const dataTroubleshooting = ref<Manual[]>([]);
 
   return {
     getManual,
     getManualByPage,
+    getTroubleshooting,
+    getTroubleshootingByPage,
 
     dataManual,
+    dataTroubleshooting,
   };
 });
diff --git a/src/stores/product-service/index.ts b/src/stores/product-service/index.ts
index 0405bf16..db178b43 100644
--- a/src/stores/product-service/index.ts
+++ b/src/stores/product-service/index.ts
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
 
 import { Pagination } from 'stores/types';
+import { getToken } from 'src/services/keycloak';
 
 import {
   ProductGroup,
@@ -19,6 +20,7 @@ import {
 import { ref } from 'vue';
 
 const useProductServiceStore = defineStore('api-product-service', () => {
+  const baseUrl = import.meta.env.VITE_API_BASE_URL;
   const splitPay = ref<number>(0);
   const workNameItems = ref<
     {
@@ -441,7 +443,7 @@ const useProductServiceStore = defineStore('api-product-service', () => {
       ...payload,
     });
 
-    if (res && res.status < 200) {
+    if (res && res.status < 400) {
       await fetchListOfWork();
       return res.data;
     }
@@ -528,6 +530,53 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     if (!res) return false;
   }
 
+  async function productExport(params: {
+    status?: 'CREATED' | 'ACTIVE' | 'INACTIVE';
+    shared?: boolean;
+    productGroupId?: string;
+    query?: string;
+    page?: number;
+    pageSize?: number;
+    orderField?: string;
+    orderBy?: string;
+    activeOnly?: boolean;
+    startDate?: Date;
+    endDate?: Date;
+  }) {
+    let url = baseUrl + '/' + 'product-export';
+
+    const queryParams = new URLSearchParams(
+      Object.keys(params).reduce((acc: Record<string, string>, key) => {
+        const value = params[key as keyof typeof params];
+        if (value !== undefined && value !== null && value !== '') {
+          const stringValue =
+            typeof value === 'boolean' || typeof value === 'number'
+              ? String(value)
+              : value instanceof Date
+                ? value.toISOString()
+                : String(value);
+          acc[key] = stringValue;
+        }
+        return acc;
+      }, {}),
+    );
+
+    url += '?' + queryParams.toString();
+
+    const res = await fetch(url, {
+      headers: { ['Authorization']: 'Bearer ' + (await getToken()) },
+    });
+    const text = await res.json();
+    const blob = new Blob([text], { type: 'text/csv' });
+    if (res.ok && blob) {
+      const a = document.createElement('a');
+      a.download = 'customer-report' + '.csv';
+      a.href = window.URL.createObjectURL(blob);
+      a.click();
+      a.remove();
+    }
+  }
+
   return {
     workNameItems,
     splitPay,
@@ -568,6 +617,8 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     deleteImageByName,
 
     importProduct,
+
+    productExport,
   };
 });
 
diff --git a/src/stores/quotations/index.ts b/src/stores/quotations/index.ts
index e7faca39..92257f2e 100644
--- a/src/stores/quotations/index.ts
+++ b/src/stores/quotations/index.ts
@@ -78,6 +78,7 @@ export const useQuotationStore = defineStore('quotation-store', () => {
     cancelIncludeDebitNote?: boolean;
     startDate?: string;
     endDate?: string;
+    sellerId?: string;
   }) {
     const res = await api.get<PaginationResult<Quotation>>('/quotation', {
       params,
diff --git a/src/stores/quotations/types.ts b/src/stores/quotations/types.ts
index ce969936..80291a3d 100644
--- a/src/stores/quotations/types.ts
+++ b/src/stores/quotations/types.ts
@@ -44,7 +44,12 @@ export type CustomerBranchRelation = {
   payDate: string;
   jobDescription: string;
   jobPosition: string;
-  businessType: string;
+  businessTypeId: string;
+  businessType?: {
+    id: string;
+    name: string;
+    nameEN: string;
+  };
   contactName: string;
   officeTel: string;
   contactTel: string;
@@ -80,7 +85,6 @@ export type CustomerBranchRelation = {
   namePrefix: string;
   telephoneNo: string;
   codeCustomer: string;
-  customerName: string;
   updatedByUserId: string;
   createdByUserId: string;
   code: string;
@@ -174,6 +178,7 @@ type WorkRelation = {
   createdByUserId?: string;
   updatedAt: string;
   updatedByUserId?: string;
+  productOnWork?: { productId: string; stepCount: number }[];
 };
 
 type ServiceRelation = {
@@ -268,6 +273,7 @@ export type Quotation = {
   updatedByUserId: string;
   updatedBy: UpdatedBy;
   updatedAt: string | Date;
+  isDebitNote?: boolean;
 };
 
 export type QuotationFull = {
@@ -356,6 +362,7 @@ export type QuotationPayload = {
   _count: { worker: number };
   discount?: number;
   payBillDate?: Date | null;
+  sellerId?: string;
   paySplit: {
     no: number;
     amount: number;
@@ -415,6 +422,9 @@ export type QuotationPaymentData = {
   date: string;
   id: string;
   code: string;
+  account?: string;
+  channel?: string;
+  reference?: string;
 };
 
 export type Details = {
@@ -433,6 +443,9 @@ export type PaymentPayload = {
   paymentStatus: string;
   date: Date;
   amount: number;
+  account?: string;
+  channel?: string;
+  reference?: string;
 };
 
 export type ProductServiceList = {
diff --git a/src/stores/user/index.ts b/src/stores/user/index.ts
index a1a625ff..ac0b4b00 100644
--- a/src/stores/user/index.ts
+++ b/src/stores/user/index.ts
@@ -16,6 +16,7 @@ import axios from 'axios';
 import useBranchStore from '../branch';
 import { Branch } from '../branch/types';
 import { getSignature, setSignature } from './signature';
+import { getUserId } from 'src/services/keycloak';
 
 const branchStore = useBranchStore();
 
@@ -38,6 +39,14 @@ const useUserStore = defineStore('api-user', () => {
 
   const data = ref<Pagination<User[]>>();
 
+  async function fetchUserGroup(id?: string) {
+    return await api
+      .get<
+        { id: string; name: string; path: string }[]
+      >(`/user/${id || getUserId()}/group`)
+      .then((res) => res.data);
+  }
+
   async function fetchHqOption() {
     if (userOption.value.hqOpts.length === 0) {
       const res = await branchStore.fetchList({
@@ -334,6 +343,8 @@ const useUserStore = defineStore('api-user', () => {
     setSignature,
 
     typeStats,
+
+    fetchUserGroup,
   };
 });
 
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index 28dcfc8b..4fa53b50 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -13,7 +13,7 @@ export type User = {
   createdBy: string;
   status: Status;
   trainingPlace: string | null;
-  importNationality: string | null;
+  importNationality: [] | null;
   sourceNationality: string | null;
   licenseExpireDate: Date | null;
   licenseIssueDate: Date | null;
@@ -61,6 +61,14 @@ export type User = {
   contactTel?: string;
   remark?: string;
   agencyStatus?: AgencyStatus;
+  addressForeign?: boolean;
+  provinceText?: string | null;
+  districtText?: string | null;
+  subDistrictText?: string | null;
+  provinceTextEN?: string | null;
+  districtTextEN?: string | null;
+  subDistrictTextEN?: string | null;
+  zipCodeText?: string | null;
 };
 
 export type UserCreate = {
@@ -82,7 +90,7 @@ export type UserCreate = {
   streetEN: string;
   street: string;
   trainingPlace?: string | null;
-  importNationality?: string | null;
+  importNationality?: string[] | null;
   sourceNationality?: string | null;
   licenseExpireDate?: Date | null;
   licenseIssueDate?: Date | null;
@@ -113,6 +121,14 @@ export type UserCreate = {
   contactTel?: string;
   remark?: string;
   agencyStatus?: AgencyStatus | string;
+  addressForeign?: boolean;
+  provinceText?: string | null;
+  districtText?: string | null;
+  subDistrictText?: string | null;
+  provinceTextEN?: string | null;
+  districtTextEN?: string | null;
+  subDistrictTextEN?: string | null;
+  zipCodeText?: string | null;
 };
 
 export enum AgencyStatus {
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 39beb6d6..c4601c92 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -221,11 +221,102 @@ export function checkTabBeforeAdd(data: unknown[], except?: string[]) {
 
 export function isRoleInclude(role2check: string[]): boolean {
   const roles = getRole() ?? [];
-  const isIncluded = role2check.some((r) => roles.includes(r));
+  const filterRole = roles.filter(
+    (role: string) =>
+      role !== 'offline_access' &&
+      role !== 'uma_authorization' &&
+      !role.startsWith('default-roles'),
+  );
+  const isIncluded = role2check.some((r) => filterRole.includes(r));
 
   return isIncluded;
 }
 
+const allRoles = [
+  'head_of_admin',
+  'admin',
+  'executive',
+  'accountant',
+  'branch_admin',
+  'branch_manager',
+  'branch_accountant',
+  'head_of_sale',
+  'sale',
+  'data_entry',
+  'document_checker',
+  'messenger',
+  'corporate_customer',
+  'agency',
+];
+
+const permissions = {
+  branch: {
+    create: allRoles.slice(0, 4),
+    edit: allRoles.slice(0, 7),
+    view: allRoles.slice(0, 7),
+  },
+  personnel: {
+    edit: allRoles.slice(0, 6).filter((r) => r !== 'accountant'),
+    view: allRoles.slice(0, 6).filter((r) => r !== 'accountant'),
+  },
+  product: {
+    edit: allRoles.slice(0, 7),
+    view: allRoles,
+  },
+  workflow: {
+    edit: allRoles.slice(0, 6),
+    view: allRoles.filter((r) => r !== 'branch_accountant'),
+  },
+  customer: {
+    edit: allRoles.slice(0, 9).filter((r) => r !== 'branch_accountant'),
+    view: allRoles.slice(0, 9),
+  },
+  agencies: {
+    edit: allRoles.slice(0, 7),
+    view: allRoles,
+  },
+  quotation: {
+    create: allRoles.slice(0, 9).filter((r) => r !== 'branch_accountant'),
+    edit: allRoles.slice(0, 9),
+    delete: allRoles.slice(0, 6),
+    view: allRoles,
+  },
+  taskOrder: {
+    create: [...allRoles.slice(0, 6), 'data_entry'],
+    edit: [...allRoles.slice(0, 7), 'data_entry'],
+    view: allRoles,
+  },
+  requestList: {
+    edit: allRoles.slice(0, 7),
+  },
+  related: {
+    // ใช้กับหลายเมนู
+    edit: allRoles.slice(0, 6),
+    view: allRoles,
+  },
+  uploadSlip: {
+    edit: allRoles.slice(0, 6),
+    view: allRoles.filter((r) => r !== 'head_of_sale' && r !== 'sale'),
+  },
+  dashBoard: {
+    edit: allRoles.slice(0, 6).filter((r) => r !== 'admin'),
+    view: allRoles.filter((r) => r !== 'admin'),
+  },
+};
+
+export function canAccess(
+  menu: keyof typeof permissions,
+  action: 'edit' | 'create' | 'delete' | 'view' = 'view',
+): boolean {
+  // uma_authorization = all roles
+  const roles = getRole() ?? [];
+  if (roles.includes('system')) return true;
+
+  const allowedRoles = permissions[menu]?.[action] || [];
+
+  return allowedRoles.some((role: string) => roles.includes(role));
+}
+
 export function resetScrollBar(elementId: string) {
   const element = document.getElementById(elementId);
 
@@ -606,7 +697,7 @@ export function getEmployeeName(
 
   return {
     ['eng']: `${typeof employee.namePrefix === 'string' ? useOptionStore().mapOption(employee.namePrefix) : ''} ${employee.firstNameEN} ${employee.lastNameEN}`,
-    ['tha']: `${typeof employee.namePrefix === 'string' ? useOptionStore().mapOption(employee.namePrefix) : ''} ${employee.firstName} ${employee.lastName}`,
+    ['tha']: `${typeof employee.namePrefix === 'string' ? useOptionStore().mapOption(employee.namePrefix) : ''} ${employee.firstName || employee.firstNameEN} ${employee.lastName}`,
   }[opts?.locale || 'eng'];
 }
 
diff --git a/src/stores/workflow-template/index.ts b/src/stores/workflow-template/index.ts
index 95a6c2c4..ef1e83d5 100644
--- a/src/stores/workflow-template/index.ts
+++ b/src/stores/workflow-template/index.ts
@@ -2,7 +2,7 @@ import { ref } from 'vue';
 import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
 import { PaginationResult } from 'src/types';
-import { WorkflowTemplate, WorkflowTemplatePayload } from './types';
+import { Group, WorkflowTemplate, WorkflowTemplatePayload } from './types';
 import { Status } from '../types';
 
 export const useWorkflowTemplate = defineStore('workflow-store', () => {
@@ -38,7 +38,7 @@ export const useWorkflowTemplate = defineStore('workflow-store', () => {
     return res.data;
   }
 
-  async function creatWorkflowTemplate(data: WorkflowTemplatePayload) {
+  async function createWorkflowTemplate(data: WorkflowTemplatePayload) {
     const res = await api.post<WorkflowTemplate>('/workflow-template', data);
     if (res.status >= 400) return null;
     return res;
@@ -64,6 +64,12 @@ export const useWorkflowTemplate = defineStore('workflow-store', () => {
     return res;
   }
 
+  async function getGroupList() {
+    const res = await api.get<Group[]>('/keycloak/group');
+    if (res.status >= 400) return null;
+    return res.data;
+  }
+
   return {
     data,
     page,
@@ -72,8 +78,9 @@ export const useWorkflowTemplate = defineStore('workflow-store', () => {
 
     getWorkflowTemplate,
     getWorkflowTemplateList,
-    creatWorkflowTemplate,
+    createWorkflowTemplate,
     editWorkflowTemplate,
     deleteWorkflowTemplate,
+    getGroupList,
   };
 });
diff --git a/src/stores/workflow-template/types.ts b/src/stores/workflow-template/types.ts
index e3750660..c2c64036 100644
--- a/src/stores/workflow-template/types.ts
+++ b/src/stores/workflow-template/types.ts
@@ -23,6 +23,7 @@ export type WorkflowStep = {
     user: CreatedBy;
   }[];
   responsibleInstitution: (string | { group: string })[];
+  responsibleGroup: string[];
   attributes: WorkFlowAttributes;
 };
 
@@ -49,6 +50,7 @@ export type WorkflowTemplatePayload = {
 
 export type WorkflowUserInTable = {
   name: string;
+  responsibleGroup: string[];
   responsiblePerson: {
     id: string;
     selectedImage?: string;
@@ -73,6 +75,15 @@ export type WorkFlowPayloadStep = {
   value?: string[];
   responsiblePersonId?: string[];
   responsibleInstitution?: string[];
+  responsibleGroup?: string[];
   attributes: WorkFlowAttributes;
   messengerByArea?: boolean;
 };
+
+export type Group = {
+  id: string;
+  name: string;
+  path: string;
+  subGroupCount: number;
+  subGroups: Group[];
+};
diff --git a/src/utils/address.ts b/src/utils/address.ts
index 2ee2da4b..1dd50990 100644
--- a/src/utils/address.ts
+++ b/src/utils/address.ts
@@ -14,6 +14,7 @@ export function formatAddress(opt: {
   district?: District | null;
   subDistrict?: SubDistrict | null;
   en?: boolean;
+  zipCode?: string;
 }) {
   const { t } = useI18n();
   let addressParts: string[];
@@ -58,7 +59,9 @@ export function formatAddress(opt: {
     // );
   }
 
-  if (opt.subDistrict) addressParts.push(`${opt.subDistrict.zipCode}`);
+  if (opt.subDistrict && !opt.zipCode)
+    addressParts.push(`${opt.subDistrict.zipCode}`);
+  if (opt.zipCode) addressParts.push(`${opt.zipCode}`);
 
   return addressParts.join(' ');
 }
diff --git a/src/utils/arithmetic.ts b/src/utils/arithmetic.ts
index 0864fd3b..912b3d0b 100644
--- a/src/utils/arithmetic.ts
+++ b/src/utils/arithmetic.ts
@@ -55,9 +55,12 @@ export function calculatePrice(
   // Calculate before VAT
   const beforeVat = vatIncluded ? precisionRound(price / (1 + vat)) : price;
 
-  // Return based on output selection
-  if (output === 'vat') return calculatedVat;
-  if (output === 'total') return total;
-  if (output === 'beforeVat') return beforeVat;
-  return 0;
+  switch (output) {
+    case 'vat':
+      return calculatedVat;
+    case 'total':
+      return total;
+    case 'beforeVat':
+      return beforeVat;
+  }
 }
diff --git a/src/utils/string-template.ts b/src/utils/string-template.ts
index b62164f2..ac3c0337 100644
--- a/src/utils/string-template.ts
+++ b/src/utils/string-template.ts
@@ -23,22 +23,23 @@ const templates = {
       installments?: {
         no: number;
         amount: number;
+        name?: string;
       }[];
     }) => {
       if (context?.paymentType === 'Full') {
         return [
-          '**** เงื่อนไขเพิ่มเติม',
-          '- เงื่อนไขการชำระเงิน แบบเต็มจำนวน',
-          `&nbsp; จำนวน ${formatNumberDecimal(context?.amount || 0, 2)}`,
+          `**** ${i18n.global.t('general.additional')}`,
+          `- ${i18n.global.t('quotation.paymentCondition')} ${i18n.global.t('quotation.type.Full')}`,
+          `&nbsp; ${i18n.global.t('general.amount')} ${formatNumberDecimal(context?.amount || 0, 2)}`,
         ].join('<br/>');
       } else {
         return [
-          '**** เงื่อนไขเพิ่มเติม',
-          `- เงื่อนไขการชำระเงิน แบบแบ่งจ่าย${context?.paymentType === 'SplitCustom' ? ' กำหนดเอง ' : ' '}${context?.installments?.length} งวด`,
-          ...(context?.installments?.map(
-            (v) =>
-              `&nbsp; งวดที่ ${v.no} จำนวน ${formatNumberDecimal(v.amount, 2)}`,
-          ) || []),
+          `**** ${i18n.global.t('general.additional')}`,
+          `- ${i18n.global.t('quotation.paymentCondition')} ${i18n.global.t('quotation.type.Split')}${context?.paymentType === 'SplitCustom' ? ` (${i18n.global.t('general.specify')}) ` : ' '}${context?.installments?.length} ${i18n.global.t('quotation.receiptDialog.installments')}`,
+          ...(context?.installments?.map((v) => {
+            const installmentName = v.name ? ` (${v.name})` : '';
+            return `&nbsp; ${i18n.global.t('quotation.periodNo')} ${v.no}${installmentName} ${i18n.global.t('general.amount')} ${formatNumberDecimal(v.amount, 2)}`;
+          }) || []),
         ].join('<br />');
       }
     },
@@ -73,14 +74,14 @@ const templates = {
             const employee = v.request.employee;
             const branch = v.request.quotation.customerBranch;
             return (
-              `${i + 1}. ` +
-              ` ${v.request.code}_${branch.customer.customerType === 'PERS' ? `นายจ้าง ${branch.namePrefix}. ${branch.firstNameEN} ${branch.lastNameEN} `.toUpperCase() : branch.registerName}_` +
+              ` ${i + 1}. ` +
+              ` ${v.request.code}_${branch.customer.customerType === 'PERS' ? `${branch.namePrefix}. ${branch.firstNameEN} ${branch.lastNameEN} `.toUpperCase() : i18n.global.locale.value == 'tha' ? branch.registerName : branch.registerNameEN}_` +
               `${employee.namePrefix}. ${employee.firstNameEN} ${employee.lastNameEN} `.toUpperCase() +
               `${!!v.failedType && v.failedType !== 'other' ? `${i18n.global.t(`taskOrder.${v.failedType}`)}` : !!v.failedComment ? v.failedComment : ''}`
             );
           });
           return [
-            `- ${item.product.name} ราคา ${price} บาท`,
+            `- ${item.product.name} ${i18n.global.t('price', { price: price })} `,
             '',
             ...list,
             '',