diff --git a/public/option/option.json b/public/option/option.json
index bce4fc0a..c5ea33cd 100644
--- a/public/option/option.json
+++ b/public/option/option.json
@@ -1,5 +1,28 @@
 {
   "eng": {
+    "visaType": [
+      {
+        "label": "Non-LA",
+        "value": "nla"
+      },
+      {
+        "label": "Non-B",
+        "value": "nb"
+      },
+      {
+        "label": "TV.60",
+        "value": "tv60"
+      },
+      {
+        "label": "Non-TR",
+        "value": "ntr"
+      },
+      {
+        "label": "TV.30",
+        "value": "tv30"
+      }
+    ],
+
     "workerStatus": [
       {
         "label": "Normal",
@@ -154,7 +177,8 @@
       { "label": "VS2", "value": "VS2" },
       { "label": "WO", "value": "WO" },
       { "label": "WP390", "value": "WP390" },
-      { "label": "WP44", "value": "WP44" }
+      { "label": "WP44", "value": "WP44" },
+      { "label": "CUST", "value": "CUST" }
     ],
 
     "prefix": [
@@ -183,29 +207,44 @@
       }
     ],
 
-    "training": [
+    "border": [
       {
-        "label": "Myanmar Labor Training Center - Mae Sot, Tak Province",
+        "label": "Mae Sot, Tak Province",
         "value": "trainingTak"
       },
       {
-        "label": "Myanmar Labor Training Center - Kawthoung, Ranong Province",
+        "label": "Koh Song, Ranong province",
         "value": "trainingRanong"
       },
       {
-        "label": "Laos Labor Training Center - Nong Khai, Nong Khai Province",
+        "label": "Nong Khai, Nong Khai Province",
         "value": "trainingNongKhai"
       },
       {
-        "label": "Cambodian Labor Training Center - Aranyaprathet, Sa Kaeo Province",
+        "label": "Aranyaprathet, Sa Kaeo Province",
         "value": "trainingSaKaeo"
       },
       {
-        "label": "Cambodian Labor Training Center - Ban Laem, Chanthaburi Province",
+        "label": "Ban Laem, Chanthaburi Province",
         "value": "trainingChanthaburi"
       }
     ],
 
+    "training": [
+      {
+        "label": "The first center accepts work. and end of employment Tak Province",
+        "value": "trainingTak"
+      },
+      {
+        "label": "The first center accepts work. and end of employment Nong Khai Province",
+        "value": "trainingNongKhai"
+      },
+      {
+        "label": "The first center accepts work. and end of employment Sa Kaeo Province",
+        "value": "trainingSaKaeo"
+      }
+    ],
+
     "nationality": [
       {
         "label": "Thai",
@@ -1050,6 +1089,29 @@
   },
 
   "tha": {
+    "visaType": [
+      {
+        "label": "Non-LA",
+        "value": "nla"
+      },
+      {
+        "label": "Non-B",
+        "value": "nb"
+      },
+      {
+        "label": "ผผ.60",
+        "value": "tv60"
+      },
+      {
+        "label": "Non-TR",
+        "value": "ntr"
+      },
+      {
+        "label": "ผผ.30",
+        "value": "tv30"
+      }
+    ],
+
     "workerStatus": [
       {
         "label": "ปกติ",
@@ -1204,7 +1266,8 @@
       { "label": "VS2", "value": "VS2" },
       { "label": "WO", "value": "WO" },
       { "label": "WP390", "value": "WP390" },
-      { "label": "WP44", "value": "WP44" }
+      { "label": "WP44", "value": "WP44" },
+      { "label": "CUST", "value": "CUST" }
     ],
 
     "prefix": [
@@ -1233,29 +1296,44 @@
       }
     ],
 
-    "training": [
+    "border": [
       {
-        "label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
+        "label": "แม่สอด จ.ตาก",
         "value": "trainingTak"
       },
       {
-        "label": "สถานที่อบรมแรงงานเมียนมา-เกาะสอง จ.ระนอง",
+        "label": "เกาะสอง จ.ระนอง",
         "value": "trainingRanong"
       },
       {
-        "label": "สถานที่อบรมแรงงานลาว-หนองคาย จ.หนองคาย",
+        "label": "หนองคาย จ.หนองคาย",
         "value": "trainingNongKhai"
       },
       {
-        "label": "สถานที่อบรมแรงงานกัมพูชา-อรัญประเทศ จ.สระแก้ว",
+        "label": "อรัญประเทศ จ.สระแก้ว",
         "value": "trainingSaKaeo"
       },
       {
-        "label": "สถานที่อบรมแรงงานกัมพูชา-บ้านแหลม จ.จันทบุรี",
+        "label": "บ้านแหลม จ.จันทบุรี",
         "value": "trainingChanthaburi"
       }
     ],
 
+    "training": [
+      {
+        "label": "ศูนย์แรกรับเข้าทำงาน และสิ้นสุดการจ้าง จังหวัดตาก",
+        "value": "trainingTak"
+      },
+      {
+        "label": "ศูนย์แรกรับเข้าทำงาน และสิ้นสุดการจ้าง จังหวัดหนองคาย",
+        "value": "trainingNongKhai"
+      },
+      {
+        "label": "ศูนย์แรกรับเข้าทำงาน และสิ้นสุดการจ้าง จังหวัดสระแก้ว",
+        "value": "trainingSaKaeo"
+      }
+    ],
+
     "nationality": [
       {
         "label": "ไทย",
diff --git a/src/boot/i18n.ts b/src/boot/i18n.ts
index d786804d..9430c38a 100644
--- a/src/boot/i18n.ts
+++ b/src/boot/i18n.ts
@@ -2,6 +2,7 @@ import { defineBoot } from '#q-app/wrappers';
 import { createI18n } from 'vue-i18n';
 
 import messages from 'src/i18n';
+import { Lang } from 'src/utils/ui';
 
 export type MessageLanguages = keyof typeof messages;
 // Type-define 'eng' as the master schema for the resource
@@ -26,7 +27,7 @@ export const i18n = createI18n<
   MessageLanguages,
   false
 >({
-  locale: 'eng',
+  locale: 'tha',
   legacy: false,
   messages,
 });
diff --git a/src/components/01_branch-management/FormBank.vue b/src/components/01_branch-management/FormBank.vue
index e9cc4483..66f4241b 100644
--- a/src/components/01_branch-management/FormBank.vue
+++ b/src/components/01_branch-management/FormBank.vue
@@ -36,6 +36,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   view?: boolean;
+  single?: boolean;
 }>();
 
 defineEmits<{
@@ -121,7 +122,7 @@ watch(
       />
       {{ $t(`${title}`) }}
       <AddButton
-        v-if="!readonly"
+        v-if="!readonly && !single"
         id="btn-add-bank"
         icon-only
         class="q-ml-sm"
@@ -141,7 +142,10 @@ watch(
         style="padding-block: 0.01px"
         spaced="lg"
       />
-      <span class="col-12 app-text-muted-2 flex justify-between items-center">
+      <span
+        v-if="!single"
+        class="col-12 app-text-muted-2 flex justify-between items-center"
+      >
         {{ `${$t('branch.form.bankAccountNo')} ${i + 1}` }}
         <div class="row items-center">
           <div style="height: 30.8px" />
@@ -172,6 +176,7 @@ watch(
       </span>
 
       <div
+        v-if="!single"
         class="bordered q-mr-sm rounded col text-center overflow-hidden"
         :class="{ 'pointer-none': readonly, 'q-my-sm': $q.screen.lt.md }"
       >
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 526afa95..1537dc07 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import useUserStore from 'stores/user';
 import useOptionStore from 'stores/options';
-import { UserAttachmentDelete } from 'stores/user/types';
-import { dialog, selectFilterOptionRefMod } from 'stores/utils';
-import { onMounted, ref, watch } from 'vue';
+import { UserAttachmentDelete, AgencyStatus } from 'stores/user/types';
+import { dialog } from 'stores/utils';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Icon } from '@iconify/vue';
-import { QSelect } from 'quasar';
 import DatePicker from '../shared/DatePicker.vue';
+import SelectInput from 'src/components/shared/SelectInput.vue';
 
 import SelectOffice from 'components/shared/select-muliple/SelectOffice.vue';
 
@@ -33,13 +33,15 @@ const importNationality = defineModel<string | null | undefined>(
   'importNationality',
 );
 const trainingPlace = defineModel<string | null | undefined>('trainingPlace');
-const checkpoint = defineModel<string | null | undefined>('checkPoint');
-const checkpointEN = defineModel<string | null | undefined>('checkPointEn');
+const checkpoint = defineModel<string | null | undefined>('checkpoint');
 const agencyFile = defineModel<File[]>('agencyFile');
 const agencyFileList =
   defineModel<{ name: string; url: string }[]>('agencyFileList');
+const remark = defineModel<string | null | undefined>('remark');
+const agencyStatus = defineModel<string | null | undefined>('agencyStatus');
 
 const attachmentRef = ref();
+const checkpointENOption = ref([]);
 
 defineProps<{
   dense?: boolean;
@@ -76,59 +78,11 @@ function deleteFile(name: string) {
   });
 }
 
-const nationalityOptions = ref<Record<string, unknown>[]>([]);
-let nationalityFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-const trainingPlaceOptions = ref<Record<string, unknown>[]>([]);
-let trainingPlaceFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-const responsibleAreaOptions = ref<Record<string, unknown>[]>([]);
-let responsibleAreaFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-onMounted(() => {
-  if (optionStore.globalOption?.nationality) {
-    nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
-      nationalityOptions,
-      'label',
-    );
-    trainingPlaceFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.training),
-      trainingPlaceOptions,
-      'label',
-    );
-    responsibleAreaFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.area),
-      responsibleAreaOptions,
-      'label',
-    );
-  }
+onMounted(async () => {
+  const resultOption = await fetch('/option/option.json');
+  const rawOption = await resultOption.json();
+  checkpointENOption.value = rawOption.eng.border;
 });
-
-watch(
-  () => optionStore.globalOption,
-  () => {
-    nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
-      nationalityOptions,
-      'label',
-    );
-    trainingPlaceFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.training),
-      trainingPlaceOptions,
-      'label',
-    );
-  },
-);
 </script>
 <template>
   <div class="row col-12">
@@ -218,136 +172,108 @@ watch(
         class="row col-12 q-col-gutter-sm"
         style="margin-left: 0px; padding-left: 0px"
       >
-        <q-select
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-value="value"
-          option-label="label"
-          class="col-md-3 col-6"
+        <SelectInput
+          :model-value="readonly ? sourceNationality || '-' : sourceNationality"
           id="input-source-nationality"
           for="input-source-nationality"
-          :dense="dense"
-          :readonly="readonly"
-          :hide-dropdown-icon="readonly"
+          :option="optionStore.globalOption.nationality"
+          class="col-md-3 col-6"
+          :readonly
+          clearable
           :label="$t('personnel.form.sourceNationality')"
-          :options="nationalityOptions"
-          @filter="nationalityFilter"
-          :model-value="readonly ? sourceNationality || '-' : sourceNationality"
           @update:model-value="
             (v) => (typeof v === 'string' ? (sourceNationality = v) : '')
           "
-          @clear="sourceNationality = ''"
-        >
-          <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
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-value="value"
-          option-label="label"
-          class="col-md-3 col-6"
+        />
+        <SelectInput
+          :model-value="readonly ? importNationality || '-' : importNationality"
           id="input-import-nationality"
           for="input-import-nationality"
-          :dense="dense"
-          :readonly="readonly"
-          :hide-dropdown-icon="readonly"
+          :option="optionStore.globalOption.nationality"
+          class="col-md-3 col-6"
+          :readonly
+          clearable
           :label="$t('personnel.form.importNationality')"
-          :options="nationalityOptions"
-          @filter="nationalityFilter"
-          :model-value="readonly ? importNationality || '-' : importNationality"
           @update:model-value="
             (v) => (typeof v === 'string' ? (importNationality = v) : '')
           "
-          @clear="importNationality = ''"
-        >
-          <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
-          outlined
-          clearable
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-label="label"
-          option-value="label"
-          class="col-md-6 col-12"
+        />
+        <SelectInput
+          :model-value="readonly ? trainingPlace || '-' : trainingPlace"
           id="select-trainig-place"
           for="select-trainig-place"
-          :dense="dense"
-          :readonly="readonly"
-          :hide-dropdown-icon="readonly"
+          :option="optionStore.globalOption.training"
+          class="col-md-6 col-12"
+          :readonly
           :label="$t('personnel.form.trainingPlace')"
-          :options="trainingPlaceOptions"
-          @filter="trainingPlaceFilter"
-          :model-value="readonly ? trainingPlace || '-' : trainingPlace"
+          clearable
           @update:model-value="
             (v) => (typeof v === 'string' ? (trainingPlace = v) : '')
           "
-          @clear="trainingPlace = ''"
-        >
-          <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-input
-          for="input-checkpoint"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          :label="$t('personnel.form.checkpoint')"
-          class="col-6"
+        />
+        <SelectInput
           :model-value="readonly ? checkpoint || '-' : checkpoint"
+          id="select-checkpoint"
+          for="select-checkpoint"
+          :option="optionStore.globalOption.border"
+          class="col-6"
+          :readonly
+          :label="$t('personnel.form.checkpoint')"
+          clearable
           @update:model-value="
             (v) => (typeof v === 'string' ? (checkpoint = v) : '')
           "
-          @clear="checkpoint = ''"
+        />
+        <SelectInput
+          :model-value="readonly ? checkpoint || '-' : checkpoint"
+          id="select-checkpoint-en"
+          for="select-checkpoint-en"
+          :option="checkpointENOption"
+          class="col-6"
+          :readonly
+          :label="$t('personnel.form.checkpointEN')"
+          clearable
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (checkpoint = v) : '')
+          "
+        />
+
+        <SelectInput
+          :model-value="readonly ? agencyStatus || '-' : agencyStatus"
+          id="select-checkpoint-en"
+          for="select-checkpoint-en"
+          :option="[
+            { label: $t('personnel.form.normal'), value: AgencyStatus.Normal },
+            {
+              label: $t('personnel.form.canceled'),
+              value: AgencyStatus.Canceled,
+            },
+            {
+              label: $t('personnel.form.blacklist'),
+              value: AgencyStatus.Blacklist,
+            },
+          ]"
+          class="col-md-6 col-12"
+          :readonly
+          :label="$t('personnel.form.agencyStatus')"
+          clearable
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (agencyStatus = v) : '')
+          "
         />
         <q-input
-          for="input-checkpoint-en"
+          for="input-discount-condition"
           :dense="dense"
           outlined
-          :readonly="readonly"
-          :label="$t('personnel.form.checkpointEN')"
-          class="col-6"
-          :model-value="readonly ? checkpointEN || '-' : checkpointEN"
+          :readonly
+          :label="$t('general.remark')"
+          class="col-12"
+          type="textarea"
+          :model-value="readonly ? remark || '-' : remark"
           @update:model-value="
-            (v) => (typeof v === 'string' ? (checkpointEN = v) : '')
+            (v) => (typeof v === 'string' ? (remark = v) : '')
           "
-          @clear="checkpointEN = ''"
+          @clear="remark = ''"
         />
         <q-file
           ref="attachmentRef"
@@ -358,7 +284,7 @@ watch(
           multiple
           append
           :label="$t('personnel.form.attachment')"
-          class="col-12"
+          class="col"
           v-model="agencyFile"
         >
           <template v-slot:prepend>
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index cfc6dff8..0204bb47 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -41,6 +41,12 @@ let prefixNameFilter: (
   update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
 ) => void;
 
+const prefixNameOptionsEn = ref<Record<string, unknown>[]>([]);
+let prefixNameFilterEn: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
 const genderOptions = ref<Record<string, unknown>[]>([]);
 let genderFilter: (
   value: string,
@@ -55,7 +61,9 @@ let nationalityFilter: (
 
 function matPreFixName() {
   if (gender.value === 'male') prefixName.value = 'mr';
-  if (gender.value === 'female') prefixName.value = 'mrs';
+  if (gender.value === 'female' && prefixName.value === 'mr') {
+    prefixName.value = 'mrs';
+  }
 }
 
 onMounted(() => {
@@ -64,6 +72,13 @@ onMounted(() => {
     prefixNameOptions,
     'label',
   );
+
+  prefixNameFilterEn = selectFilterOptionRefMod(
+    ref(optionStore.rawOption?.eng.prefix),
+    prefixNameOptionsEn,
+    'label',
+  );
+
   genderFilter = selectFilterOptionRefMod(
     ref(optionStore.globalOption?.gender),
     genderOptions,
@@ -94,6 +109,12 @@ watch(
       nationalityOptions,
       'label',
     );
+
+    prefixNameFilterEn = selectFilterOptionRefMod(
+      ref(optionStore.rawOption?.eng.prefix),
+      prefixNameOptionsEn,
+      'label',
+    );
   },
 );
 
@@ -175,6 +196,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>
@@ -194,7 +216,11 @@ watch(
           class="col"
           :label="$t('personnel.form.firstName')"
           v-model="firstName"
-          :rules="[(val: string) => !!val || $t('form.error.required')]"
+          :rules="
+            employee
+              ? []
+              : [(val: string) => !!val || $t('form.error.required')]
+          "
         />
 
         <q-input
@@ -229,25 +255,41 @@ watch(
         class="col-12 row"
         style="display: flex; gap: var(--size-2)"
       >
-        <q-input
-          :for="`${prefixId}-input-first-name`"
-          :dense="dense"
+        <q-select
           outlined
+          use-input
+          fill-input
+          emit-value
+          map-options
+          hide-selected
           hide-bottom-space
-          :readonly="readonly"
-          :disable="!readonly"
+          input-debounce="0"
+          option-label="label"
+          option-value="value"
+          hide-dropdown-icon
+          autocomplete="off"
           class="col-md-1 col-6"
-          label="Title"
-          :model-value="
-            readonly
-              ? capitalize(prefixName || '') || '-'
-              : capitalize(prefixName || '')
-          "
+          :dense="dense"
+          :readonly="readonly"
+          :options="prefixNameOptionsEn"
+          :for="`${prefixId}-select-prefix-name-en`"
+          label="Prefix"
+          @filter="prefixNameFilter"
+          :model-value="readonly ? prefixName || '-' : prefixName"
           @update:model-value="
             (v) => (typeof v === 'string' ? (prefixName = v) : '')
           "
           @clear="prefixName = ''"
-        />
+          :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-input
           :for="`${prefixId}-input-first-name-en`"
@@ -287,10 +329,22 @@ watch(
           class="col"
           label="Surname"
           v-model="lastNameEN"
-          :rules="[
-            (val: string) =>
-              !val || /^[A-Za-z\s]+$/.test(val) || $t('form.error.letterOnly'),
-          ]"
+          :rules="
+            employee
+              ? [
+                  (val: string) => !!val || $t('form.error.required'),
+                  (val: string) =>
+                    !val ||
+                    /^[A-Za-z\s]+$/.test(val) ||
+                    $t('form.error.letterOnly'),
+                ]
+              : [
+                  (val: string) =>
+                    !val ||
+                    /^[A-Za-z\s]+$/.test(val) ||
+                    $t('form.error.letterOnly'),
+                ]
+          "
         />
       </div>
 
@@ -392,11 +446,15 @@ watch(
         :readonly="readonly"
         :label="$t('form.birthDate')"
         :disabled-dates="disabledAfterToday"
-        :rules="[
-          (val: string) =>
-            !!val ||
-            $t('form.error.selectField', { field: $t('form.birthDate') }),
-        ]"
+        :rules="
+          employee
+            ? []
+            : [
+                (val: string) =>
+                  !!val ||
+                  $t('form.error.selectField', { field: $t('form.birthDate') }),
+              ]
+        "
       />
 
       <q-input
@@ -478,7 +536,6 @@ watch(
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-gender`"
         :label="$t('form.gender')"
-        :rules="[(val: string) => !!val || $t('form.error.required')]"
         @filter="genderFilter"
       >
         <template v-slot:no-option>
@@ -511,7 +568,6 @@ watch(
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-nationality`"
         :label="$t('general.nationality')"
-        :rules="[(val: string) => !!val || $t('form.error.required')]"
         @filter="nationalityFilter"
       >
         <template v-slot:no-option>
diff --git a/src/components/03_customer-management/FormEmployeeOther.vue b/src/components/03_customer-management/FormEmployeeOther.vue
index 3e9a4a89..f2c32c63 100644
--- a/src/components/03_customer-management/FormEmployeeOther.vue
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@@ -106,7 +106,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('form.firstName')"
+          :label="$t('general.nativeLanguage', { msg: $t('form.firstName') })"
           :model-value="employeeOther.fatherFirstName"
           @update:model-value="
             (v) =>
@@ -122,7 +122,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('form.lastName')"
+          :label="$t('general.nativeLanguage', { msg: $t('form.lastName') })"
           :model-value="employeeOther.fatherLastName"
           @update:model-value="
             (v) =>
@@ -177,7 +177,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('form.firstName')"
+          :label="$t('general.nativeLanguage', { msg: $t('form.firstName') })"
           :model-value="employeeOther.motherFirstName"
           @update:model-value="
             (v) =>
@@ -193,7 +193,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('form.lastName')"
+          :label="$t('general.nativeLanguage', { msg: $t('form.lastName') })"
           :model-value="employeeOther.motherLastName"
           @update:model-value="
             (v) =>
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 1eb9096d..5fe21b52 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -103,7 +103,7 @@ onMounted(() => {
       'label',
     );
     passportIssuingCountryFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
+      ref(optionStore.rawOption?.eng.nationality),
       passportIssuingCountryOptions,
       'label',
     );
@@ -121,13 +121,13 @@ onMounted(() => {
     );
 
     genderFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption?.gender),
+      ref(optionStore.rawOption?.eng.gender),
       genderOptions,
       'label',
     );
 
     nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption?.nationality),
+      ref(optionStore.rawOption?.eng.nationality),
       nationalityOptions,
       'label',
     );
@@ -152,7 +152,7 @@ watch(
     );
 
     passportIssuingCountryFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
+      ref(optionStore.rawOption?.eng.nationality),
       passportIssuingCountryOptions,
       'label',
     );
@@ -164,13 +164,13 @@ watch(
     );
 
     genderFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption?.gender),
+      ref(optionStore.rawOption?.eng.gender),
       genderOptions,
       'label',
     );
 
     nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption?.nationality),
+      ref(optionStore.rawOption?.eng.nationality),
       nationalityOptions,
       'label',
     );
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index a441ae65..876c7a52 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -92,7 +92,7 @@ let workerTypeFilter: (
 
 onMounted(() => {
   visaTypeFilter = selectFilterOptionRefMod(
-    ref(optionStore.globalOption?.nationality),
+    ref(optionStore.globalOption?.visaType),
     visaTypeOptions,
     'label',
   );
diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index 98b42a12..da9a0c58 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -3,6 +3,7 @@ import { QSelect } from 'quasar';
 import { CustomerBranch } from 'stores/customer/types';
 import { selectFilterOptionRefMod } from 'stores/utils';
 import { onMounted, ref, watch } from 'vue';
+import SelectCustomer from 'components/shared/select/SelectCustomer.vue';
 import {
   EditButton,
   DeleteButton,
@@ -11,6 +12,7 @@ import {
 } from 'components/button';
 import { useI18n } from 'vue-i18n';
 import useOptionStore from 'stores/options';
+import { formatAddress } from 'src/utils/address';
 
 const { locale } = useI18n();
 
@@ -21,6 +23,13 @@ const optionsBranch = defineModel<{ id: string; name: string }[]>(
 );
 
 // employee
+
+const customerBranchId = defineModel<string>('customerBranchId');
+
+const currentCustomerBranch = defineModel<CustomerBranch>(
+  'currentCustomerBranch',
+);
+
 const customerBranch = defineModel<{
   id: string;
   address: string;
@@ -107,180 +116,14 @@ defineEmits<{
     </div>
 
     <div class="col-12 row" style="gap: var(--size-2)">
-      <q-select
-        :id="`${prefixId}-select-employer-branch`"
-        :for="`${prefixId}-select-employer-branch`"
-        :use-input="!customerBranch"
-        autocomplete="off"
-        input-debounce="0"
-        :hide-dropdown-icon="readonly"
-        :dense="dense"
-        outlined
-        :readonly="readonly"
-        hide-bottom-space
-        class="col-12"
+      <SelectCustomer
+        v-model:value="customerBranchId"
+        v-model:value-option="currentCustomerBranch"
         :label="$t('customer.form.branchCode')"
-        v-model="customerBranch"
-        :option-value="
-          (v) => ({
-            id: v.id,
-            address: v.address,
-            addressEN: v.addressEN,
-            provinceId: v.provinceId,
-            districtId: v.districtId,
-            subDistrictId: v.subDistrictId,
-            zipCode: v.zipCode,
-          })
-        "
-        emit-value
-        map-options
-        :options="employeeOwnerOption"
-        @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
-        :rules="[
-          (val: string) =>
-            !!val ||
-            $t('form.error.selectField', {
-              field: $t('customerEmployee.branch'),
-            }),
-        ]"
-      >
-        <template v-slot:option="scope">
-          <q-item
-            v-if="scope.opt"
-            v-bind="scope.itemProps"
-            class="row items-start col-12 no-padding"
-          >
-            <div class="q-ma-sm">
-              <i class="isax isax-frame5" style="color: var(--brand-1)" />
-            </div>
-            <div class="q-mt-sm">
-              <div>
-                <span v-if="scope.opt.customer.customerType">
-                  <span style="font-weight: 600">
-                    {{
-                      scope.opt.customer.customerType === 'CORP'
-                        ? $t('customer.form.registerName')
-                        : $t('customer.form.ownerName')
-                    }}:
-                  </span>
-                  {{
-                    scope.opt.customer.customerType === 'CORP'
-                      ? $i18n.locale === 'eng'
-                        ? scope.opt.registerNameEN
-                        : scope.opt.registerName
-                      : $i18n.locale === 'eng'
-                        ? `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
-                          '-'
-                        : `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstName} ${scope.opt.lastName}` ||
-                          '-'
-                  }}
-                  ({{ scope.opt.code }})
-                </span>
-              </div>
-
-              <div class="text-caption app-text-muted-2 q-mb-xs">
-                <span v-if="scope.opt.customer" class="col column">
-                  {{
-                    $t(
-                      `branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
-                    )
-                  }}
-
-                  {{
-                    !scope.opt.code.endsWith('-00')
-                      ? +scope.opt.code.split('-')[1]
-                      : ''
-                  }}
-                </span>
-                <span v-if="scope.opt.province" class="col">
-                  {{ $t('general.address') }}
-                  {{
-                    $i18n.locale === 'eng'
-                      ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                      : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
-                  }}
-                  {{ scope.opt.subDistrict?.zipCode || '' }}
-                </span>
-              </div>
-            </div>
-          </q-item>
-          <q-separator class="q-mx-sm" />
-        </template>
-
-        <template v-slot:selected-item="scope">
-          <div
-            v-if="scope.opt"
-            class="row items-center no-wrap"
-            style="width: 1px"
-          >
-            <div class="q-mr-sm">
-              <span style="font-weight: 600">
-                {{
-                  scope.opt.customer.customerType === 'CORP'
-                    ? $t('customer.form.registerName')
-                    : $t('customer.form.ownerName')
-                }}:
-              </span>
-              {{
-                scope.opt.customer.customerType === 'CORP'
-                  ? $i18n.locale === 'eng'
-                    ? scope.opt.registerNameEN
-                    : scope.opt.registerName
-                  : $i18n.locale === 'eng'
-                    ? `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstNameEN} ${scope.opt.lastNameEN}` ||
-                      '-'
-                    : `${optionStore.mapOption(scope.opt.namePrefix)} ${scope.opt.firstName} ${scope.opt.lastName}` ||
-                      '-'
-              }}
-              ({{ scope.opt.code }})
-            </div>
-            <div
-              class="text-caption app-text-muted-2"
-              v-if="scope.opt.customer && scope.opt.province"
-            >
-              {{
-                $t(
-                  `branch.form.title.${scope.opt.code.endsWith('-00') ? 'branchHQLabel' : 'branchLabel'}`,
-                )
-              }}
-
-              {{
-                !scope.opt.code.endsWith('-00')
-                  ? +scope.opt.code.split('-')[1]
-                  : ''
-              }}
-
-              {{ $t('general.address') }}
-              {{
-                $i18n.locale === 'eng'
-                  ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                  : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
-              }}
-              {{ scope.opt.subDistrict?.zipCode || '' }}
-              <q-tooltip v-if="scope.opt.customer && scope.opt.province">
-                {{ $t('customerBranch.form.title') }}:
-
-                {{ $t('general.address') }}
-                {{
-                  $i18n.locale === 'eng'
-                    ? `${scope.opt.addressEN || ''}, ${scope.opt.mooEN && `${$t('form.moo')} ${scope.opt.mooEN},`} ${scope.opt.soiEN && `${$t('form.soi')} ${scope.opt.soiEN},`} ${scope.opt.streetEN && `${scope.opt.streetEN} Rd,`} ${scope.opt.subDistrict.nameEN || ''}, ${scope.opt.district.nameEN || ''}, ${scope.opt.province.nameEN || ''}`
-                    : `${scope.opt.address || ''}, ${scope.opt.moo && `${$t('form.moo')} ${scope.opt.moo},`} ${scope.opt.soi && `${$t('form.soi')} ${scope.opt.soi},`} ${scope.opt.street && `${$t('form.road')} ${scope.opt.street},`} ${scope.opt.subDistrict.name || ''}, ${scope.opt.district.name || ''}, ${scope.opt.province.name || ''}`
-                }}
-                {{ scope.opt.subDistrict?.zipCode || '' }}
-              </q-tooltip>
-            </div>
-          </div>
-        </template>
-
-        <template v-slot:append>
-          <q-icon
-            v-if="!readonly && customerBranch"
-            name="mdi-close-circle"
-            @click.stop="customerBranch = undefined"
-            class="cursor-pointer clear-btn"
-          />
-        </template>
-      </q-select>
+        class="col-12 field-two"
+        required
+        :readonly
+      />
 
       <q-input
         :for="`${prefixId}-input-code`"
diff --git a/src/components/07_agencies-management/FormBasicInfoAgencies.vue b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
index dbf9d568..f01bed38 100644
--- a/src/components/07_agencies-management/FormBasicInfoAgencies.vue
+++ b/src/components/07_agencies-management/FormBasicInfoAgencies.vue
@@ -14,6 +14,9 @@ defineProps<{
 const group = defineModel('group', { default: '' });
 const name = defineModel('name', { default: '' });
 const nameEn = defineModel('nameEn', { default: '' });
+const contactName = defineModel('contactName', { default: '' });
+const email = defineModel('email', { default: '' });
+const contactTel = defineModel('contactTel', { default: '' });
 
 type Options = { label: string; value: string };
 </script>
@@ -35,7 +38,7 @@ type Options = { label: string; value: string };
 
     <div class="col-12 row q-col-gutter-sm">
       <SelectInput
-        :class="{ col: $q.screen.lt.md }"
+        class="col"
         :disable="!readonly && onDrawer"
         :readonly="readonly"
         for="input-agencies-code"
@@ -62,7 +65,7 @@ type Options = { label: string; value: string };
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md col-12"
+        class="col-md-4 col-12"
         :label="$t('agencies.name')"
         v-model="name"
         :rules="[(val: string) => !!val || $t('form.error.required')]"
@@ -73,10 +76,78 @@ type Options = { label: string; value: string };
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-md col-12"
+        class="col-md-4 col-12"
         :label="'Agencies Name'"
         v-model="nameEn"
       />
+
+      <q-input
+        for="input-agencies-contact-name"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-4 col-12"
+        :label="$t('agencies.contactName')"
+        :model-value="readonly ? contactName || '-' : contactName"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactName = v) : '')
+        "
+      />
+      <q-input
+        for="input-agencies-email"
+        dense
+        outlined
+        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'),
+              ]
+        "
+        class="col-md-4 col-12"
+        :model-value="readonly ? email || '-' : email"
+        @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
+        @clear="email = ''"
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-email-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
+      <q-input
+        for="input-agencies-contact-tel"
+        id="input-agencies-contact-tel"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-4 col-12"
+        :label="$t('form.telephone')"
+        :model-value="readonly ? contactTel || '-' : contactTel"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactTel = v) : '')
+        "
+      >
+        <template #prepend>
+          <q-icon
+            size="xs"
+            name="mdi-phone-outline"
+            class="cursor-pointer"
+            color="primary"
+          />
+        </template>
+      </q-input>
     </div>
   </div>
 </template>
diff --git a/src/components/CanvasComponent.vue b/src/components/CanvasComponent.vue
index 72e63c4d..66996697 100644
--- a/src/components/CanvasComponent.vue
+++ b/src/components/CanvasComponent.vue
@@ -93,13 +93,6 @@ function clearUpload() {
   imgUrl.value = '';
 }
 
-watch(
-  () => tab.value,
-  async () => {
-    await initializeSignaturePad();
-  },
-);
-
 onMounted(async () => {
   await initializeSignaturePad();
 });
diff --git a/src/components/shared/select/SelectCustomer.vue b/src/components/shared/select/SelectCustomer.vue
index 8adecb3c..f6fbf9cd 100644
--- a/src/components/shared/select/SelectCustomer.vue
+++ b/src/components/shared/select/SelectCustomer.vue
@@ -158,7 +158,7 @@ onMounted(async () => {
     </template>
 
     <template #option="{ opt, scope }">
-      <q-item v-bind="scope.itemProps">
+      <q-item @click="valueOption = opt" v-bind="scope.itemProps">
         <SelectCustomerItem :data="opt" :simple :simple-branch-no />
       </q-item>
 
diff --git a/src/components/shared/table/TableWorker.vue b/src/components/shared/table/TableWorker.vue
index 4ec870bc..8594b0e7 100644
--- a/src/components/shared/table/TableWorker.vue
+++ b/src/components/shared/table/TableWorker.vue
@@ -54,7 +54,9 @@ const columns = [
     field: (v: Employee) =>
       locale.value === Lang.English
         ? `${v.firstNameEN} ${v.lastNameEN}`
-        : `${v.firstName} ${v.lastName}`,
+        : v.firstName
+          ? `${v.firstName} ${v.lastName}`
+          : `${v.firstNameEN} ${v.lastNameEN}`,
   },
   {
     name: 'birthDate',
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 858e9489..241621bb 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -153,6 +153,7 @@ export default {
     tableOfContent: 'Table of Contents',
     draw: 'Draw',
     newUpload: 'New Upload',
+    nativeLanguage: '{msg} Native Language',
   },
 
   menu: {
@@ -451,7 +452,7 @@ export default {
       responsibleArea: 'Responsibel Area',
       discount: 'Discount Condition',
       sourceNationality: 'Source Nationality',
-      importNationality: 'import Nationality',
+      importNationality: 'Import Nationality',
       trainingPlace: 'Training Place',
       checkpoint: 'Checkpoint',
       checkpointEN: 'Checkpoint (EN)',
@@ -459,6 +460,10 @@ export default {
       citizenId: 'Citizen ID',
       citizenIssue: 'Citizen Issue',
       citizenExpire: 'Citizen Expire',
+      agencyStatus: 'Agency Status',
+      normal: 'Normal',
+      canceled: 'Canceled',
+      blacklist: 'Black list',
     },
   },
   customer: {
@@ -912,6 +917,9 @@ export default {
     code: 'Agencies Code',
     group: 'Agencies Group',
     name: 'Agencies Name',
+    contactName: 'Contact Name',
+    contactTel: 'Contact Telephone',
+    bankInfo: 'Bank Information',
   },
 
   requestList: {
@@ -1183,6 +1191,7 @@ export default {
         'Product with the same name already exists. If you want to create with this name please select another code.',
       userExists: 'User already exits.',
       sameNameExists: 'Same name exists.',
+      samePropertyNameExists: 'Same property name exists.',
 
       validateError: 'Validate Error',
       codeMisMatch: 'Code Mismatch',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 5ce04f74..19915334 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -153,6 +153,7 @@ export default {
     tableOfContent: 'สารบัญ',
     draw: 'วาด',
     newUpload: 'อัปโหลดใหม่',
+    nativeLanguage: '{msg} ภาษาต้นทาง',
   },
 
   menu: {
@@ -455,6 +456,10 @@ export default {
       citizenId: 'เลขที่บัตรประชาชน',
       citizenIssue: 'วันที่ออกบัตร',
       citizenExpire: 'วันที่หมดอายุ',
+      agencyStatus: 'สถานะการเป็นเอเจนซี่',
+      normal: 'ปกติ',
+      canceled: 'ยกเลิก',
+      blacklist: 'แบล็คลิสต์',
     },
   },
   customer: {
@@ -780,7 +785,7 @@ export default {
     branch: 'สาขาที่ออกใบเสนอราคา',
     branchVirtual: 'จุดรับบริการที่ออกใบเสนอราคา',
     customer: 'ลูกค้า',
-    newCustomer: 'แรงงานใหม่',
+    newCustomer: 'ลูกค้าใหม่',
     employeeList: 'รายชื่อแรงงาน',
     employee: 'แรงงาน',
     employeeName: 'ชื่อ-นามสกุล แรงงาน',
@@ -903,6 +908,9 @@ export default {
     code: 'รหัสหน่วยงาน',
     group: 'กลุ่มหน่วยงาน',
     name: 'ชื่อหน่วยงาน',
+    contactName: 'ชื่อผู้ติดต่อ',
+    contactTel: 'เบอร์โทรผู้ติดต่อ',
+    bankInfo: 'ข้อมูลธนาคาร',
   },
 
   requestList: {
@@ -1163,6 +1171,7 @@ export default {
         'สินค้าที่มีชื่อเดียวกันมีในระบบแล้ว หากคุณต้องการสร้างด้วยชื่อนี้โปรดเลือกรหัสอื่น',
       userExists: 'ชื่อผู้ใช้นี้มีอยู่ในระบบอยู่แล้ว',
       sameNameExists: 'ชื่อนี้ถูกใช้ไปแล้ว',
+      samePropertyNameExists: 'คุณสมบัตินี้มีอยู่ในระบบอยู่แล้ว',
 
       validateError: 'เกิดข้อผิดพลาดจากการตรวจสอบ',
       codeMisMatch: 'รหัสไม่ตรงกัน',
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index b4e8c863..f144fa66 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -151,6 +151,8 @@ const defaultFormData = {
   citizenExpire: null,
   citizenIssue: null,
   citizenId: '',
+  remark: '',
+  agencyStatus: null,
 };
 
 const formData = ref<UserCreate>({
@@ -199,6 +201,8 @@ const formData = ref<UserCreate>({
   citizenExpire: null,
   citizenIssue: null,
   citizenId: '',
+  remark: '',
+  agencyStatus: null,
 });
 
 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
@@ -419,6 +423,7 @@ async function onSubmit(excludeDialog?: boolean) {
         : '';
     const formDataEdit = {
       ...formData.value,
+      checkpointEN: formData.value.checkpoint,
       status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
     } as const;
 
@@ -450,6 +455,7 @@ async function onSubmit(excludeDialog?: boolean) {
       : hqId.value
         ? hqId.value
         : '';
+    formData.value.checkpointEN = formData.value.checkpoint;
     const result = await userStore.create(
       formData.value,
       onCreateImageList.value,
@@ -603,6 +609,8 @@ async function assignFormData(idEdit: string) {
         (foundUser.citizenIssue && new Date(foundUser.citizenIssue)) || null,
       citizenExpire:
         (foundUser.citizenExpire && new Date(foundUser.citizenExpire)) || null,
+      remark: foundUser.remark || '',
+      agencyStatus: foundUser.agencyStatus || '',
     };
 
     formData.value.status === 'ACTIVE' || 'CREATED'
@@ -1781,10 +1789,11 @@ watch(
               v-model:import-nationality="formData.importNationality"
               v-model:training-place="formData.trainingPlace"
               v-model:checkpoint="formData.checkpoint"
-              v-model:checkpoint-en="formData.checkpointEN"
               v-model:agency-file="agencyFile"
               v-model:agency-file-list="agencyFileList"
               v-model:user-id="currentUser.id"
+              v-model:remark="formData.remark"
+              v-model:agency-status="formData.agencyStatus"
             />
           </div>
         </div>
@@ -1854,7 +1863,6 @@ watch(
 
     <div
       class="col"
-      id="personnel-form"
       :class="{
         'q-px-lg q-pb-lg': $q.screen.gt.sm,
         'q-px-md q-pb-sm': !$q.screen.gt.sm,
@@ -1898,7 +1906,7 @@ watch(
                     ? [
                         {
                           name: $t('personnel.form.workInformation'),
-                          anchor: 'dialog-info-work',
+                          anchor: 'dialog-form-work',
                         },
                       ]
                     : [],
@@ -1914,6 +1922,7 @@ watch(
           </div>
         </div>
         <div
+          id="personnel-form"
           class="col-md-10 col-12 full-height scroll"
           :class="{
             'q-py-md q-pr-md ': $q.screen.gt.sm,
@@ -1992,7 +2001,8 @@ watch(
             v-model:import-nationality="formData.importNationality"
             v-model:training-place="formData.trainingPlace"
             v-model:checkpoint="formData.checkpoint"
-            v-model:checkpoint-en="formData.checkpointEN"
+            v-model:agency-status="formData.agencyStatus"
+            v-model:remark="formData.remark"
             v-model:agency-file="agencyFile"
           />
         </div>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index e0b5a4c9..e859078e 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -102,27 +102,33 @@ const optionStore = useOptionStore();
 const ocrStore = useOcrStore();
 
 const refFilter = ref<InstanceType<typeof QSelect>>();
-const statusEmployeeCreate = ref<boolean>(false);
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
-const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
-  {
-    main: [],
-    business: ['businessType', 'jobPosition'],
-    address: [
-      'address',
-      'addressEN',
-      'provinceId',
-      'districtId',
-      'subDistrictId',
-    ],
-    contact: [],
-  },
-);
 
-const { state: customerFormState, currentFormData: customerFormData } =
-  storeToRefs(customerFormStore);
-const { state: employeeFormState, currentFromDataEmployee } =
-  storeToRefs(employeeFormStore);
+const {
+  fetchListOfOptionBranch,
+  customerFormUndo,
+  customerConfirmUnsave,
+  deleteCustomerById,
+  validateTabField,
+  deleteCustomerBranchById,
+} = customerFormStore;
+
+const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
+  employeeFormStore;
+
+const {
+  state: customerFormState,
+  currentFormData: customerFormData,
+  registerAbleBranchOption,
+  tabFieldRequired,
+} = storeToRefs(customerFormStore);
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  onCreateImageList,
+  statusEmployeeCreate,
+  refreshImageState,
+} = storeToRefs(employeeFormStore);
 
 async function init() {
   navigatorStore.current.title = 'menu.customer';
@@ -209,13 +215,7 @@ const dialogCustomerImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
 const dialogEmployeeImageUpload = ref<InstanceType<typeof ImageUploadDialog>>();
 
 // image
-const refreshImageState = ref(false);
 const imageList = ref<{ selectedImage: string; list: string[] }>();
-const onCreateImageList = ref<{
-  selectedImage: string;
-  list: { url: string; imgFile: File | null; name: string }[];
-}>({ selectedImage: '', list: [] });
-
 watch(() => route.name, init);
 watch(
   [currentTab, currentStatus, inputSearch, customerTypeSelected, pageSize],
@@ -276,8 +276,6 @@ const fieldSelected = ref<string[]>(
   ].filter((v, index, self) => self.indexOf(v) === index),
 );
 
-const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
-
 const branch = ref<CustomerBranch[]>();
 
 const customerStats = [
@@ -294,81 +292,6 @@ const fieldCustomer = [
 const employeeHistoryDialog = ref(false);
 const employeeHistory = ref<EmployeeHistory[]>();
 
-function validateTabField<T = CustomerBranchCreate>(
-  value: T,
-  fieldRequired: { [key: string]: (keyof T)[] },
-) {
-  const list: string[] = [];
-
-  for (const tab in fieldRequired) {
-    for (const field of fieldRequired[tab]) {
-      if (!value[field] && !list.includes(tab)) list.push(tab);
-    }
-  }
-
-  return list;
-}
-
-function deleteCustomerById(id: string) {
-  dialog({
-    color: 'negative',
-    icon: 'mdi-alert',
-    title: t('dialog.title.confirmDelete'),
-    actionText: t('general.delete'),
-    persistent: true,
-    message: t('dialog.message.confirmDelete'),
-    action: async () => {
-      await customerStore.deleteById(id);
-
-      await fetchListCustomer(true, $q.screen.xs);
-      customerFormState.value.dialogModal = false;
-      flowStore.rotate();
-    },
-    cancel: () => {},
-  });
-}
-
-async function deleteCustomerBranchById(id: string) {
-  return await new Promise((resolve) => {
-    dialog({
-      color: 'negative',
-      icon: 'mdi-alert',
-      title: t('dialog.title.confirmDelete'),
-      actionText: t('general.delete'),
-      persistent: true,
-      message: t('dialog.message.confirmDelete'),
-      action: async () => {
-        await customerStore.deleteBranchById(id);
-        flowStore.rotate();
-        resolve(true);
-      },
-      cancel: () => {
-        resolve(false);
-      },
-    });
-  });
-}
-async function fetchListOfOptionBranch() {
-  if (registerAbleBranchOption.value) return;
-
-  const uid = getUserId();
-  const role = getRole();
-
-  if (!uid) return; // should not possible as the system require login to be able to access resource.
-
-  if (role?.includes('system')) {
-    const result = await userBranchStore.fetchListOptionBranch();
-    if (result && result.total > 0)
-      registerAbleBranchOption.value = result.result;
-  } else {
-    const result = await userBranchStore.fetchListMyBranch(uid);
-    if (result && result.total > 0)
-      registerAbleBranchOption.value = result.result;
-  }
-
-  // TODO: Assign (first) branch of the user as register branch of the data
-}
-
 async function fetchListCustomer(fetchStats = false, mobileFetch?: boolean) {
   const total = statsCustomerType.value.PERS + statsCustomerType.value.CORP;
 
@@ -503,64 +426,6 @@ async function toggleStatusCustomer(id: string, status: boolean) {
   await fetchListCustomer(false, $q.screen.xs);
   flowStore.rotate();
 }
-
-async function deleteEmployeeById(opts: {
-  id?: string;
-  type?: 'passport' | 'visa' | 'healthCheck' | 'work';
-  index?: number;
-}) {
-  dialog({
-    color: 'negative',
-    icon: 'mdi-alert',
-    title: t('dialog.title.confirmDelete'),
-    actionText: t('general.delete'),
-    persistent: true,
-    message: t('dialog.message.confirmDelete'),
-    action: async () => {
-      if (opts.type === 'passport' && opts.index !== undefined) {
-        await employeeFormStore.deletePassport(opts.index);
-      }
-
-      if (opts.type === 'visa' && opts.index !== undefined) {
-        await employeeFormStore.deleteVisa(opts.index);
-      }
-
-      if (opts.type === 'healthCheck' && opts.index !== undefined) {
-        await employeeFormStore.deleteHealthCheck(opts.index);
-      }
-
-      if (opts.type === 'work' && opts.index !== undefined) {
-        await employeeFormStore.deleteWorkHistory(opts.index);
-      } else {
-        if (!!opts.id) {
-          const result = await employeeStore.deleteById(opts.id);
-
-          if (result) {
-            employeeFormState.value.drawerModal = false;
-            employeeFormState.value.dialogModal = false;
-          }
-        }
-      }
-
-      if (route.name !== 'CustomerBranchManagement') {
-        await fetchListEmployee(
-          currentTab.value === 'employer'
-            ? {
-                page: 1,
-                pageSize: 999,
-                customerId: customerFormState.value.currentCustomerId,
-              }
-            : { fetchStats: true, mobileFetch: $q.screen.xs },
-        );
-
-        flowStore.rotate();
-      }
-    },
-
-    cancel: () => {},
-  });
-}
-
 async function openHistory(id: string) {
   const res = await employeeStore.getEditHistory(id);
   employeeHistory.value = res.reverse();
@@ -594,64 +459,6 @@ async function editEmployeeFormPersonal(id: string) {
   employeeFormState.value.drawerModal = true;
 }
 
-function employeeConfirmUnsave(close = true) {
-  dialog({
-    color: 'warning',
-    icon: 'mdi-alert',
-    title: t('form.warning.title'),
-    actionText: t('general.ok'),
-    persistent: true,
-    message: t('form.warning.unsave'),
-    action: () => {
-      employeeFormStore.resetFormDataEmployee();
-      onCreateImageList.value = { selectedImage: '', list: [] };
-      employeeFormState.value.editReadonly = true;
-      employeeFormState.value.dialogModal = !close;
-      employeeFormState.value.drawerModal = !close;
-    },
-    cancel: () => {},
-  });
-}
-
-function employeeFormUndo(close = true) {
-  if (employeeFormStore.isFormDataDifferent()) {
-    return employeeConfirmUnsave(close);
-  }
-  employeeFormStore.resetFormDataEmployee();
-  employeeFormState.value.editReadonly = true;
-}
-
-function customerConfirmUnsave(close = true) {
-  dialog({
-    color: 'warning',
-    icon: 'mdi-alert',
-    title: t('form.warning.title'),
-    actionText: t('general.ok'),
-    persistent: true,
-    message: t('form.warning.unsave'),
-
-    action: () => {
-      customerFormStore.resetForm();
-      customerFormState.value.readonly = true;
-
-      if (!customerFormState.value.drawerModal) {
-        customerFormState.value.dialogModal = !close;
-      } else {
-        customerFormState.value.drawerModal = !close;
-      }
-    },
-    cancel: () => {},
-  });
-}
-
-function customerFormUndo(close = true) {
-  if (customerFormStore.isFormDataDifferent()) {
-    return customerConfirmUnsave(close);
-  }
-  customerFormStore.resetForm();
-  customerFormState.value.readonly = true;
-}
-
 async function createCustomerForm(customerType: 'CORP' | 'PERS') {
   customerFormState.value.dialogModal = true;
   customerFormState.value.dialogType = 'create';
@@ -686,7 +493,7 @@ async function fetchImageList(
 // TODO: When in employee form, if select address same as customer then auto fill
 
 watch(
-  () => employeeFormState.value.formDataEmployeeOwner,
+  () => employeeFormState.value.currentCustomerBranch,
   (e) => {
     if (!e) return;
     if (employeeFormState.value.formDataEmployeeSameAddr) {
@@ -703,21 +510,21 @@ watch(
 watch(
   () => employeeFormState.value.formDataEmployeeSameAddr,
   (isSame) => {
-    if (!employeeFormState.value.formDataEmployeeOwner) return;
+    if (!employeeFormState.value.currentCustomerBranch) return;
     if (isSame) {
       currentFromDataEmployee.value.address =
-        employeeFormState.value.formDataEmployeeOwner.address;
+        employeeFormState.value.currentCustomerBranch.address;
       currentFromDataEmployee.value.addressEN =
-        employeeFormState.value.formDataEmployeeOwner.addressEN;
+        employeeFormState.value.currentCustomerBranch.addressEN;
       currentFromDataEmployee.value.provinceId =
-        employeeFormState.value.formDataEmployeeOwner.provinceId;
+        employeeFormState.value.currentCustomerBranch.provinceId;
       currentFromDataEmployee.value.districtId =
-        employeeFormState.value.formDataEmployeeOwner.districtId;
+        employeeFormState.value.currentCustomerBranch.districtId;
       currentFromDataEmployee.value.subDistrictId =
-        employeeFormState.value.formDataEmployeeOwner.subDistrictId;
+        employeeFormState.value.currentCustomerBranch.subDistrictId;
     }
     currentFromDataEmployee.value.customerBranchId =
-      employeeFormState.value.formDataEmployeeOwner.id;
+      employeeFormState.value.currentCustomerBranch.id;
   },
 );
 
@@ -1540,7 +1347,13 @@ const emptyCreateDialog = ref(false);
                                   customerFormState.branchIndex = 0;
                                 }
                               "
-                              @delete="deleteCustomerById(props.row.id)"
+                              @delete="
+                                deleteCustomerById(
+                                  props.row.id,
+                                  async () =>
+                                    await fetchListCustomer(true, $q.screen.xs),
+                                )
+                              "
                               @change-status="
                                 async () => {
                                   triggerChangeStatus(
@@ -1588,7 +1401,23 @@ const emptyCreateDialog = ref(false);
                                 "
                                 @delete="
                                   (item: any) => {
-                                    deleteEmployeeById({ id: item.id });
+                                    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="
@@ -1763,7 +1592,16 @@ const emptyCreateDialog = ref(false);
                                     customerFormState.branchIndex = 0;
                                   }
                                 "
-                                @delete="deleteCustomerById(props.row.id)"
+                                @delete="
+                                  deleteCustomerById(
+                                    props.row.id,
+                                    async () =>
+                                      await fetchListCustomer(
+                                        true,
+                                        $q.screen.xs,
+                                      ),
+                                  )
+                                "
                                 @change-status="
                                   triggerChangeStatus(
                                     props.row.id,
@@ -1898,7 +1736,23 @@ const emptyCreateDialog = ref(false);
                       @edit="(item: any) => editEmployeeFormPersonal(item.id)"
                       @delete="
                         (item: any) => {
-                          deleteEmployeeById({ id: item.id });
+                          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="
@@ -2036,7 +1890,7 @@ const emptyCreateDialog = ref(false);
           async (currentBranch) => {
             createEmployeeForm();
             await nextTick();
-            employeeFormState.formDataEmployeeOwner = { ...currentBranch };
+            employeeFormState.currentBranchId = currentBranch.id;
           }
         "
         v-model:branch="branch"
@@ -2265,7 +2119,10 @@ const emptyCreateDialog = ref(false);
             @cancel="() => customerFormUndo(false)"
             @delete="
               customerFormState.editCustomerId &&
-                deleteCustomerById(customerFormState.editCustomerId)
+                deleteCustomerById(
+                  customerFormState.editCustomerId,
+                  async () => await fetchListCustomer(true, $q.screen.xs),
+                )
             "
             :customer-type="customerFormData.customerType"
             v-model:registered-branch-id="customerFormData.registeredBranchId"
@@ -2435,7 +2292,11 @@ const emptyCreateDialog = ref(false);
                       if (!customerFormState.editCustomerId) return;
 
                       if (idx === 0) {
-                        deleteCustomerById(customerFormState.editCustomerId);
+                        deleteCustomerById(
+                          customerFormState.editCustomerId,
+                          async () =>
+                            await fetchListCustomer(true, $q.screen.xs),
+                        );
                         return;
                       }
                       if (!!customerFormData.customerBranch?.[idx].id) {
@@ -2870,12 +2731,30 @@ const emptyCreateDialog = ref(false);
                   id="btn-info-basic-delete"
                   icon-only
                   @click="
-                    () => deleteEmployeeById({ id: currentFromDataEmployee.id })
+                    () =>
+                      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"
@@ -2888,11 +2767,13 @@ const emptyCreateDialog = ref(false);
               title="form.field.basicInformation"
               :readonly="!employeeFormState.isEmployeeEdit"
               :employee-owner-option="employeeStore.ownerOption || []"
-              v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
+              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"
-              @filter-owner-branch="employeeFormStore.employeeFilterOwnerBranch"
               class="q-mb-xl"
             />
             <FormPerson
@@ -2918,6 +2799,7 @@ const emptyCreateDialog = ref(false);
               class="q-mb-xl"
             />
             <AddressForm
+              disabledRule
               id="form-personal-address"
               prefix-id="form-employee"
               :readonly="!employeeFormState.isEmployeeEdit"
@@ -2940,7 +2822,7 @@ const emptyCreateDialog = ref(false);
               class="q-mb-xl"
             />
 
-            <div class="row q-mb-md" id="drawer-info-file-upload">
+            <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
@@ -3448,7 +3330,24 @@ const emptyCreateDialog = ref(false);
                       @click.stop="
                         () => {
                           employeeFormState.currentIndexPassport = index;
-                          deleteEmployeeById({ type: 'passport', 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"
@@ -3599,7 +3498,24 @@ const emptyCreateDialog = ref(false);
                       @click.stop="
                         () => {
                           employeeFormState.currentIndexVisa = index;
-                          deleteEmployeeById({ type: 'visa', 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"
@@ -3671,7 +3587,23 @@ const emptyCreateDialog = ref(false);
                 @delete="
                   (index) => {
                     employeeFormState.currentIndexCheckup = index;
-                    deleteEmployeeById({ type: 'healthCheck', 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="
@@ -3757,7 +3689,23 @@ const emptyCreateDialog = ref(false);
                 @delete="
                   (index) => {
                     employeeFormState.currentIndexWorkHistory = index;
-                    deleteEmployeeById({ type: 'work', 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="
@@ -4224,7 +4172,10 @@ const emptyCreateDialog = ref(false);
               @cancel="() => customerFormUndo(false)"
               @delete="
                 customerFormState.editCustomerId &&
-                  deleteCustomerById(customerFormState.editCustomerId)
+                  deleteCustomerById(
+                    customerFormState.editCustomerId,
+                    async () => await fetchListCustomer(true, $q.screen.xs),
+                  )
               "
               :customer-type="customerFormData.customerType"
               v-model:registered-branch-id="customerFormData.registeredBranchId"
@@ -4821,7 +4772,23 @@ const emptyCreateDialog = ref(false);
                     icon-only
                     @click="
                       () =>
-                        deleteEmployeeById({ id: currentFromDataEmployee.id })
+                        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"
                   />
@@ -4835,16 +4802,13 @@ const emptyCreateDialog = ref(false);
                 outlined
                 title="form.field.basicInformation"
                 :readonly="!employeeFormState.isEmployeeEdit"
-                :employee-owner-option="employeeStore.ownerOption"
-                v-model:customer-branch="
-                  employeeFormState.formDataEmployeeOwner
+                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"
-                @filter-owner-branch="
-                  employeeFormStore.employeeFilterOwnerBranch
-                "
                 class="q-mb-xl"
               />
               <FormPerson
@@ -4871,6 +4835,7 @@ const emptyCreateDialog = ref(false);
               <AddressForm
                 id="drawer-form-personal-address"
                 employee
+                disabledRule
                 v-model:address="currentFromDataEmployee.address"
                 v-model:address-en="currentFromDataEmployee.addressEN"
                 v-model:moo="currentFromDataEmployee.moo"
@@ -5450,6 +5415,20 @@ const emptyCreateDialog = ref(false);
                                   deleteEmployeeById({
                                     type: 'passport',
                                     index,
+                                    fetch: async () =>
+                                      await fetchListEmployee(
+                                        currentTab === 'employer'
+                                          ? {
+                                              page: 1,
+                                              pageSize: 999,
+                                              customerId:
+                                                customerFormState.currentCustomerId,
+                                            }
+                                          : {
+                                              fetchStats: true,
+                                              mobileFetch: $q.screen.xs,
+                                            },
+                                      ),
                                   });
                                 }
                               "
@@ -5621,7 +5600,24 @@ const emptyCreateDialog = ref(false);
                           icon-only
                           @click.stop="
                             () => {
-                              deleteEmployeeById({ type: 'visa', 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"
@@ -5742,7 +5738,24 @@ const emptyCreateDialog = ref(false);
                     @delete="
                       (index) => {
                         employeeFormState.currentIndexCheckup = index;
-                        deleteEmployeeById({ type: 'healthCheck', index });
+                        deleteEmployeeById({
+                          type: 'healthCheck',
+                          index,
+                          fetch: async () =>
+                            await fetchListEmployee(
+                              currentTab === 'employer'
+                                ? {
+                                    page: 1,
+                                    pageSize: 999,
+                                    customerId:
+                                      customerFormState.currentCustomerId,
+                                  }
+                                : {
+                                    fetchStats: true,
+                                    mobileFetch: $q.screen.xs,
+                                  },
+                            ),
+                        });
                       }
                     "
                   />
@@ -5812,7 +5825,24 @@ const emptyCreateDialog = ref(false);
                     @delete="
                       (index) => {
                         employeeFormState.currentIndexWorkHistory = index;
-                        deleteEmployeeById({ type: 'work', 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="
diff --git a/src/pages/03_customer-management/form.ts b/src/pages/03_customer-management/form.ts
index 20ad37c0..2d529a5c 100644
--- a/src/pages/03_customer-management/form.ts
+++ b/src/pages/03_customer-management/form.ts
@@ -1,22 +1,50 @@
 import { ref, watch } from 'vue';
 import { defineStore } from 'pinia';
+import { useI18n } from 'vue-i18n';
 import {
+  CustomerBranch,
   CustomerBranchCreate,
   CustomerCreate,
   CustomerType,
 } from 'stores/customer/types';
 import { Employee, EmployeeCreate } from 'stores/employee/types';
 
+import { dialog } from 'stores/utils';
 import useMyBranch from 'stores/my-branch';
 import useCustomerStore from 'stores/customer';
 import useEmployeeStore from 'stores/employee';
 import useFlowStore from 'stores/flow';
+import useMyBranchStore from 'stores/my-branch';
 
 import { baseUrl } from 'src/stores/utils';
+import { getRole, getUserId } from 'src/services/keycloak';
+import { useRoute } from 'vue-router';
 
 export const useCustomerForm = defineStore('form-customer', () => {
   const customerStore = useCustomerStore();
 
+  const { t } = useI18n();
+  const flowStore = useFlowStore();
+
+  const userBranchStore = useMyBranchStore();
+
+  const registerAbleBranchOption = ref<{ id: string; name: string }[]>();
+
+  const tabFieldRequired = ref<{
+    [key: string]: (keyof CustomerBranchCreate)[];
+  }>({
+    main: [],
+    business: ['businessType', 'jobPosition'],
+    address: [
+      'address',
+      'addressEN',
+      'provinceId',
+      'districtId',
+      'subDistrictId',
+    ],
+    contact: [],
+  });
+
   const defaultFormData: CustomerCreate = {
     // code: '',
     // namePrefix: '',
@@ -360,7 +388,118 @@ export const useCustomerForm = defineStore('form-customer', () => {
     }
   }
 
+  async function fetchListOfOptionBranch() {
+    if (registerAbleBranchOption.value) return;
+
+    const uid = getUserId();
+    const role = getRole();
+
+    if (!uid) return; // should not possible as the system require login to be able to access resource.
+
+    if (role?.includes('system')) {
+      const result = await userBranchStore.fetchListOptionBranch();
+      if (result && result.total > 0)
+        registerAbleBranchOption.value = result.result;
+    } else {
+      const result = await userBranchStore.fetchListMyBranch(uid);
+      if (result && result.total > 0)
+        registerAbleBranchOption.value = result.result;
+    }
+
+    // TODO: Assign (first) branch of the user as register branch of the data
+  }
+
+  function customerFormUndo(close = true) {
+    if (isFormDataDifferent()) {
+      return customerConfirmUnsave(close);
+    }
+    resetForm();
+    state.value.readonly = true;
+  }
+
+  function customerConfirmUnsave(close = true) {
+    dialog({
+      color: 'warning',
+      icon: 'mdi-alert',
+      title: t('form.warning.title'),
+      actionText: t('general.ok'),
+      persistent: true,
+      message: t('form.warning.unsave'),
+
+      action: () => {
+        resetForm();
+        state.value.readonly = true;
+
+        if (!state.value.drawerModal) {
+          state.value.dialogModal = !close;
+        } else {
+          state.value.drawerModal = !close;
+        }
+      },
+      cancel: () => {},
+    });
+  }
+
+  function deleteCustomerById(
+    id: string,
+    fetch?: (...args: unknown[]) => unknown,
+  ) {
+    dialog({
+      color: 'negative',
+      icon: 'mdi-alert',
+      title: t('dialog.title.confirmDelete'),
+      actionText: t('general.delete'),
+      persistent: true,
+      message: t('dialog.message.confirmDelete'),
+      action: async () => {
+        await customerStore.deleteById(id);
+        await fetch();
+        state.value.dialogModal = false;
+        flowStore.rotate();
+      },
+      cancel: () => {},
+    });
+  }
+
+  function validateTabField<T = CustomerBranchCreate>(
+    value: T,
+    fieldRequired: { [key: string]: (keyof T)[] },
+  ) {
+    const list: string[] = [];
+
+    for (const tab in fieldRequired) {
+      for (const field of fieldRequired[tab]) {
+        if (!value[field] && !list.includes(tab)) list.push(tab);
+      }
+    }
+
+    return list;
+  }
+
+  async function deleteCustomerBranchById(id: string) {
+    return await new Promise((resolve) => {
+      dialog({
+        color: 'negative',
+        icon: 'mdi-alert',
+        title: t('dialog.title.confirmDelete'),
+        actionText: t('general.delete'),
+        persistent: true,
+        message: t('dialog.message.confirmDelete'),
+        action: async () => {
+          await customerStore.deleteBranchById(id);
+          flowStore.rotate();
+          resolve(true);
+        },
+        cancel: () => {
+          resolve(false);
+        },
+      });
+    });
+  }
+
   return {
+    tabFieldRequired,
+    registerAbleBranchOption,
     state,
     resetFormData,
     currentFormData,
@@ -370,13 +509,18 @@ export const useCustomerForm = defineStore('form-customer', () => {
     submitFormCustomer,
     addCurrentCustomerBranch,
     deleteAttachment,
+    fetchListOfOptionBranch,
+    customerFormUndo,
+    customerConfirmUnsave,
+    deleteCustomerById,
+    validateTabField,
+    deleteCustomerBranchById,
   };
 });
 
 export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
   const customerStore = useCustomerStore();
   const customerFormStore = useCustomerForm();
-
   const defaultFormData: CustomerBranchCreate & {
     id?: string;
     codeCustomer?: string;
@@ -581,11 +725,23 @@ export const useCustomerBranchForm = defineStore('form-customer-branch', () => {
 });
 
 export const useEmployeeForm = defineStore('form-employee', () => {
+  const { t } = useI18n();
   const customerStore = useCustomerStore();
   const employeeStore = useEmployeeStore();
   const flowStore = useFlowStore();
   const branchStore = useMyBranch();
 
+  const route = useRoute();
+
+  const refreshImageState = ref(false);
+
+  const onCreateImageList = ref<{
+    selectedImage: string;
+    list: { url: string; imgFile: File | null; name: string }[];
+  }>({ selectedImage: '', list: [] });
+
+  const statusEmployeeCreate = ref<boolean>(false);
+
   const state = ref<{
     dialogType: 'info' | 'create' | 'edit';
     imageDialog: boolean;
@@ -594,6 +750,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     drawerModal: boolean;
     isImageEdit: boolean;
 
+    currentBranchId: string;
+    currentCustomerBranch?: CustomerBranch;
     currentEmployeeCode: string;
     currentEmployee: Employee | null;
     currentIndexPassport: number;
@@ -627,6 +785,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       | undefined;
     ocr: boolean;
   }>({
+    currentBranchId: '',
     isImageEdit: false,
     currentIndexPassport: -1,
     currentIndexVisa: -1,
@@ -1089,6 +1248,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     selectedImage: string;
     list: { url: string; imgFile: File | null; name: string }[];
   }) {
+    let employeeId: string | undefined = undefined;
+
     currentFromDataEmployee.value.firstName =
       currentFromDataEmployee.value.firstName.trim();
     currentFromDataEmployee.value.middleName =
@@ -1107,7 +1268,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       const res = await employeeStore.create(
         {
           ...currentFromDataEmployee.value,
-          customerBranchId: state.value.formDataEmployeeOwner?.id || '',
+          customerBranchId: state.value.currentBranchId || '',
 
           employeeWork: [],
           employeeCheckup: [],
@@ -1117,6 +1278,7 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       );
 
       if (res) {
+        employeeId = res.id;
         await assignFormDataEmployee(res.id);
         currentFromDataEmployee.value.id = res.id;
         state.value.statusSavePersonal = true;
@@ -1138,10 +1300,12 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         },
       );
       if (res) {
+        employeeId = res.id;
         await assignFormDataEmployee(res.id);
         state.value.statusSavePersonal = true;
       }
     }
+    return employeeId;
   }
 
   async function assignFormDataEmployee(id?: string) {
@@ -1183,7 +1347,19 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         employeePassport: structuredClone(
           payload.employeePassport?.length === 0
             ? state.value.dialogModal
-              ? defaultFormData.employeePassport
+              ? defaultFormData.employeePassport.map((v) => ({
+                  ...v,
+                  namePrefix: payload.namePrefix,
+                  firstName: payload.firstName,
+                  firstNameEN: payload.firstNameEN,
+                  middleName: payload.middleName,
+                  middleNameEN: payload.middleNameEN,
+                  lastName: payload.lastName,
+                  lastNameEN: payload.lastNameEN,
+                  gender: payload.gender,
+                  nationality: payload.nationality,
+                  birthDate: payload.dateOfBirth,
+                }))
               : []
             : payload.employeePassport,
         ),
@@ -1270,6 +1446,8 @@ export const useEmployeeForm = defineStore('form-employee', () => {
         state.value.currentIndexVisa = -1;
       }
 
+      state.value.currentBranchId = payload.customerBranchId;
+
       const foundBranch = await customerStore.fetchListCustomerBranchById(
         payload.customerBranchId,
       );
@@ -1325,17 +1503,17 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       issueDate: new Date(),
       type: '',
       expireDate: new Date(),
-      birthDate: new Date(),
+      birthDate: currentFromDataEmployee.value.dateOfBirth,
       workerStatus: '',
-      nationality: '',
-      gender: '',
-      lastNameEN: '',
-      lastName: '',
-      middleNameEN: '',
-      middleName: '',
-      firstNameEN: '',
-      firstName: '',
-      namePrefix: '',
+      nationality: currentFromDataEmployee.value.nationality,
+      gender: currentFromDataEmployee.value.gender,
+      lastNameEN: currentFromDataEmployee.value.lastNameEN,
+      lastName: currentFromDataEmployee.value.lastName,
+      middleNameEN: currentFromDataEmployee.value.middleNameEN,
+      middleName: currentFromDataEmployee.value.middleName,
+      firstNameEN: currentFromDataEmployee.value.firstNameEN,
+      firstName: currentFromDataEmployee.value.firstName,
+      namePrefix: currentFromDataEmployee.value.namePrefix,
       number: '',
     });
 
@@ -1396,7 +1574,88 @@ export const useEmployeeForm = defineStore('form-employee', () => {
       (currentFromDataEmployee.value.employeeWork?.length || 0) - 1;
   }
 
+  function employeeFormUndo(close = true) {
+    if (isFormDataDifferent()) {
+      return employeeConfirmUnsave(close);
+    }
+    resetFormDataEmployee();
+    state.value.editReadonly = true;
+  }
+
+  function employeeConfirmUnsave(close = true) {
+    dialog({
+      color: 'warning',
+      icon: 'mdi-alert',
+      title: t('form.warning.title'),
+      actionText: t('general.ok'),
+      persistent: true,
+      message: t('form.warning.unsave'),
+      action: () => {
+        resetFormDataEmployee();
+        onCreateImageList.value = { selectedImage: '', list: [] };
+        state.value.editReadonly = true;
+        state.value.dialogModal = !close;
+        state.value.drawerModal = !close;
+      },
+      cancel: () => {},
+    });
+  }
+
+  async function deleteEmployeeById(opts: {
+    id?: string;
+    type?: 'passport' | 'visa' | 'healthCheck' | 'work';
+    index?: number;
+    fetch?: (...args: unknown[]) => unknown;
+    removeArray?: (...args: unknown[]) => unknown;
+  }) {
+    dialog({
+      color: 'negative',
+      icon: 'mdi-alert',
+      title: t('dialog.title.confirmDelete'),
+      actionText: t('general.delete'),
+      persistent: true,
+      message: t('dialog.message.confirmDelete'),
+      action: async () => {
+        if (opts.type === 'passport' && opts.index !== undefined) {
+          await deletePassport(opts.index);
+        }
+
+        if (opts.type === 'visa' && opts.index !== undefined) {
+          await deleteVisa(opts.index);
+        }
+
+        if (opts.type === 'healthCheck' && opts.index !== undefined) {
+          await deleteHealthCheck(opts.index);
+        }
+
+        if (opts.type === 'work' && opts.index !== undefined) {
+          await deleteWorkHistory(opts.index);
+        } else {
+          if (!!opts.id) {
+            const result = await employeeStore.deleteById(opts.id);
+
+            if (result) {
+              state.value.drawerModal = false;
+              state.value.dialogModal = false;
+            }
+          }
+        }
+
+        if (route.name !== 'CustomerBranchManagement') {
+          await opts.fetch?.();
+          flowStore.rotate();
+        }
+        opts.removeArray?.();
+      },
+
+      cancel: () => {},
+    });
+  }
+
   return {
+    refreshImageState,
+    statusEmployeeCreate,
+    onCreateImageList,
     state,
     currentFromDataEmployee,
     resetEmployeeData,
@@ -1423,5 +1682,9 @@ export const useEmployeeForm = defineStore('form-employee', () => {
     employeeFilterOwnerBranch,
 
     isFormDataDifferent,
+
+    employeeFormUndo,
+    employeeConfirmUnsave,
+    deleteEmployeeById,
   };
 });
diff --git a/src/pages/04_property-managment/MainPage.vue b/src/pages/04_property-managment/MainPage.vue
index 7bb547cf..aa913f85 100644
--- a/src/pages/04_property-managment/MainPage.vue
+++ b/src/pages/04_property-managment/MainPage.vue
@@ -14,19 +14,22 @@ 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 } from 'src/stores/utils';
+import { dialog, toCamelCase } from 'src/stores/utils';
 import CreateButton from 'src/components/AddButton.vue';
+import useOptionStore from 'stores/options';
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 const $q = useQuasar();
 const navigatorStore = useNavigator();
 const propertyStore = useProperty();
+const optionStore = useOptionStore();
 const {
   data: propertyData,
   page: propertyPage,
   pageSize: propertyPageSize,
   pageMax: propertyPageMax,
 } = storeToRefs(propertyStore);
+const { globalOption } = storeToRefs(optionStore);
 
 const currPropertyData = ref<Property>();
 const formProperty = ref<Property>({
@@ -146,6 +149,7 @@ async function fetchPropertyList(mobileFetch?: boolean) {
 
 function triggerDialog(type: 'add' | 'edit' | 'view') {
   if (type === 'add') {
+    resetForm();
     pageState.addModal = true;
     pageState.isDrawerEdit = true;
   }
@@ -271,6 +275,31 @@ async function submit() {
     });
   }
   await fetchPropertyList($q.screen.xs);
+
+  // assign new property to global option
+  const propList = propertyData.value.map((v) => {
+    return {
+      label: locale.value === 'eng' ? v.nameEN : v.name,
+      value: toCamelCase(v.nameEN),
+      type: v.type.type,
+    };
+  });
+
+  const existingValues = new Set(
+    globalOption.value.propertiesField.map(
+      (item: { value: string }) => item.value,
+    ),
+  );
+  const newProps = propList.filter((prop) => !existingValues.has(prop.value));
+  if (newProps) {
+    globalOption.value.propertiesField.splice(
+      globalOption.value.propertiesField.length - 4,
+      0,
+      ...newProps,
+    );
+  }
+
+  currPropertyData.value;
   resetForm();
 }
 
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 13a58c60..c525f856 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -2,10 +2,12 @@
 import { onMounted, reactive, ref, watch, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
 
 // NOTE: Import stores
+import useCustomerStore from 'stores/customer';
 import { useQuotationStore } from 'src/stores/quotations';
-import { isRoleInclude } from 'stores/utils';
+import { dialog, isRoleInclude, notify } from 'stores/utils';
 import { useNavigator } from 'src/stores/navigator';
 import useFlowStore from 'src/stores/flow';
 import useMyBranch from 'stores/my-branch';
@@ -38,26 +40,43 @@ import { AddressForm } from 'components/form';
 import {
   EmployerFormBusiness,
   EmployerFormAbout,
+  EmployerFormBasicInfo,
+  EmployerFormBranch,
 } from 'src/pages/03_customer-management/components';
 
 import { useCustomerForm } from 'src/pages/03_customer-management/form';
 import { Quotation } from 'src/stores/quotations/types';
 import TableQuotation from 'src/components/05_quotation/TableQuotation.vue';
 import PaginationPageSize from 'src/components/PaginationPageSize.vue';
+import { DialogContainer, DialogHeader } from 'src/components/dialog';
 
+const { t, locale } = useI18n();
 const $q = useQuasar();
 const quotationFormStore = useQuotationForm();
 const customerFormStore = useCustomerForm();
 const flowStore = useFlowStore();
 const userBranch = useMyBranch();
 const navigatorStore = useNavigator();
+const customerStore = useCustomerStore();
+
+const {
+  fetchListOfOptionBranch,
+  customerFormUndo,
+  deleteCustomerById,
+  validateTabField,
+  deleteCustomerBranchById,
+} = customerFormStore;
 
 const {
   currentFormData: quotationFormData,
   currentFormState: quotationFormState,
 } = storeToRefs(quotationFormStore);
-const { state: customerFormState, currentFormData: customerFormData } =
-  storeToRefs(customerFormStore);
+const {
+  state: customerFormState,
+  currentFormData: customerFormData,
+  registerAbleBranchOption,
+  tabFieldRequired,
+} = storeToRefs(customerFormStore);
 const { currentMyBranch } = storeToRefs(userBranch);
 
 const fieldSelectedOption = computed(() => {
@@ -170,8 +189,7 @@ async function submitCustomer() {
   customerFormData.value.registeredBranchId = isRoleInclude(['system'])
     ? branchId.value
     : currentMyBranch.value.id;
-  await customerFormStore.submitFormCustomer();
-
+  await customerFormStore.addCurrentCustomerBranch();
   customerFormState.value.dialogModal = false;
   // customerFormState.value.dialogType = 'info';
 }
@@ -241,6 +259,16 @@ const {
   stats: quotationStats,
 } = storeToRefs(quotationStore);
 
+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 || '-';
+});
+
 onMounted(async () => {
   pageState.gridView = $q.screen.lt.md ? true : false;
   navigatorStore.current.title = 'quotation.title';
@@ -911,30 +939,49 @@ async function storeDataLocal(id: string) {
 
   <!-- NOTE: START - Customer / Employer Form -->
 
-  <DialogForm
-    hide-footer
-    ref="formDialogRef"
-    v-model:modal="customerFormState.dialogModal"
-    :title="
-      customerFormState.dialogType === 'create'
-        ? $t(`general.add`, {
-            text: `${$t('customer.employer')} `,
-          })
-        : `${$t('customer.employer')} `
-    "
-    :submit="
-      () => {
-        submitCustomer();
+  <DialogContainer
+    :model-value="customerFormState.dialogModal"
+    :on-open="
+      async () => {
+        customerFormStore.resetForm(customerFormState.dialogType === 'create');
+        onCreateImageList = { selectedImage: '', list: [] };
+        customerFormState.customerImageUrl = '';
+        await fetchListOfOptionBranch();
+        await customerFormStore.addCurrentCustomerBranch();
       }
     "
-    :close="
+    :on-close="
       () => {
         customerFormState.dialogModal = false;
-        customerFormStore.resetForm(true);
-        setDefaultCustomer();
+        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,
@@ -942,10 +989,10 @@ async function storeDataLocal(id: string) {
       }"
     >
       <ProfileBanner
-        prefix="dialog"
         v-if="customerFormData.customerBranch !== undefined"
         active
         hide-fade
+        prefix="dialog"
         :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
         :img="
           customerFormState.customerImageUrl ||
@@ -961,13 +1008,13 @@ async function storeDataLocal(id: string) {
         "
         :title="
           customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstName || ''} ${customerFormData.customerBranch[0]?.lastName || ''}`
-            : customerFormData.customerBranch[0]?.registerName || ''
+            ? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
+            : customerFormData.customerBranch[0]?.registerName
         "
         :caption="
           customerFormData.customerType === 'PERS'
-            ? `${customerFormData.customerBranch[0]?.firstNameEN || ''} ${customerFormData.customerBranch[0]?.lastNameEN || ''}`
-            : customerFormData.customerBranch[0]?.registerNameEN || ''
+            ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
+            : customerFormData.customerBranch[0]?.registerNameEN
         "
         @view="
           () => {
@@ -981,143 +1028,295 @@ async function storeDataLocal(id: string) {
       />
     </div>
     <div
-      class="col"
+      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
-        style="overflow-y: auto"
-        class="row full-width full-height surface-1 rounded bordered relative-position"
-      >
+      <div class="col surface-1 full-height rounded bordered scroll row">
         <div
-          :class="{
-            'q-py-md q-px-lg': $q.screen.gt.sm,
-            'q-py-sm q-px-lg': !$q.screen.gt.sm,
-          }"
-          style="position: absolute; z-index: 99999; top: 0; right: 0"
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
         >
-          <div
-            v-if="customerFormData.status !== 'INACTIVE'"
-            class="surface-1 row rounded"
-          >
-            <SaveButton
-              v-if="
-                customerFormState.dialogType === 'edit' ||
-                customerFormState.dialogType === 'create'
-              "
-              id="btn-info-basic-save"
-              icon-only
-              type="submit"
-            />
+          <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="submitCustomer()"
+                  v-if="
+                    customerFormState.branchIndex === -1 &&
+                    !!customerFormState.editCustomerId &&
+                    customerFormState.dialogType !== 'create'
+                  "
+                  :disabled="!customerFormState.readonly"
+                />
+              </template>
+            </SideMenu>
           </div>
         </div>
         <div
-          class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
-          v-if="$q.screen.gt.sm"
-        >
-          <SideMenu
-            :menu="[
-              {
-                name: $t('form.customerInformation'),
-                anchor: 'form-information',
-              },
-              {
-                name: $t('customerBranch.tab.business'),
-                anchor: 'form-business',
-              },
-              {
-                name: $t('form.address'),
-                anchor: 'form-address',
-              },
-            ]"
-            background="transparent"
-            :active="{
-              background: 'hsla(var(--blue-6-hsl) / .2)',
-              foreground: 'var(--blue-6)',
-            }"
-            scroll-element="#branch-form"
-          />
-        </div>
-
-        <div
-          class="col-12 col-md-10 full-height q-col-gutter-sm"
+          class="col-12 col-md-10"
           :class="{
             'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-py-md q-px-lg': !$q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
           }"
-          id="branch-form"
-          style="overflow-y: auto"
+          id="customer-form-content"
+          style="height: 100%; max-height: 100%; overflow-y: auto"
         >
-          <EmployerFormAbout
-            id="form-information"
-            show-title
-            :index="'0'"
-            :customerType="customerFormData.customerType"
-            :readonly="customerFormState.dialogType === 'info'"
-            v-model:citizen-id="formDataCustomerBranch.citizenId"
-            v-model:prefix-name="formDataCustomerBranch.namePrefix"
-            v-model:first-name="formDataCustomerBranch.firstName"
-            v-model:last-name="formDataCustomerBranch.lastName"
-            v-model:first-name-en="formDataCustomerBranch.firstNameEN"
-            v-model:last-name-en="formDataCustomerBranch.lastNameEN"
-            v-model:gender="formDataCustomerBranch.gender"
-            v-model:birth-date="formDataCustomerBranch.birthDate"
-            v-model:customer-name="formDataCustomerBranch.customerName"
-            v-model:legal-person-no="formDataCustomerBranch.legalPersonNo"
-            v-model:register-name="formDataCustomerBranch.registerName"
-            v-model:register-name-en="formDataCustomerBranch.registerNameEN"
-            v-model:register-date="formDataCustomerBranch.registerDate"
-            v-model:authorized-capital="
-              formDataCustomerBranch.authorizedCapital
+          <EmployerFormBasicInfo
+            prefixId="form"
+            v-if="
+              customerFormData.customerBranch !== undefined &&
+              customerFormData.customerBranch.length > 0
             "
-            v-model:telephone-no="formDataCustomerBranch.telephoneNo"
+            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)
+            "
+            :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>
 
-          <EmployerFormBusiness
-            id="form-business"
-            show-title
-            prefix-id="dialog"
-            dense
-            outlined
-            :readonly="customerFormState.dialogType === 'info'"
-            v-model:bussiness-type="formDataCustomerBranch.businessType"
-            v-model:job-position="formDataCustomerBranch.jobPosition"
-            v-model:job-description="formDataCustomerBranch.jobDescription"
-            v-model:pay-date="formDataCustomerBranch.payDate"
-            v-model:pay-date-en="formDataCustomerBranch.payDateEN"
-            v-model:wage-rate="formDataCustomerBranch.wageRate"
-            v-model:wage-rate-text="formDataCustomerBranch.wageRateText"
-          />
-          <AddressForm
-            id="form-address"
-            prefix-id="employer"
-            dense
-            outlined
-            use-employment
-            :title="$t('form.address')"
-            :addressTitle="$t('form.address')"
-            :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
-            :readonly="customerFormState.dialogType === 'info'"
-            v-model:bussiness-type="formDataCustomerBranch.businessType"
-            v-model:address="formDataCustomerBranch.address"
-            v-model:address-en="formDataCustomerBranch.addressEN"
-            v-model:street="formDataCustomerBranch.street"
-            v-model:street-en="formDataCustomerBranch.streetEN"
-            v-model:moo="formDataCustomerBranch.moo"
-            v-model:moo-en="formDataCustomerBranch.mooEN"
-            v-model:soi="formDataCustomerBranch.soi"
-            v-model:soi-en="formDataCustomerBranch.soiEN"
-            v-model:province-id="formDataCustomerBranch.provinceId"
-            v-model:district-id="formDataCustomerBranch.districtId"
-            v-model:sub-district-id="formDataCustomerBranch.subDistrictId"
-            v-model:home-code="formDataCustomerBranch.homeCode"
-          />
+            <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: any;
+                      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,
+                    );
+
+                    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);
+                        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>
-  </DialogForm>
+  </DialogContainer>
 </template>
 
 <style scoped></style>
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 916a4d41..3322cf0d 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -164,7 +164,9 @@ const selectedWorkerItem = computed(() => {
       employeeName:
         locale.value === Lang.English
           ? `${e.firstNameEN} ${e.lastNameEN}`
-          : `${e.firstName} ${e.lastName}`,
+          : e.firstName
+            ? `${e.firstName} ${e.lastName}`
+            : `${e.firstNameEN} ${e.lastNameEN}`,
       birthDate: dateFormatJS({ date: e.dateOfBirth }),
       gender: e.gender,
       age: calculateAge(e.dateOfBirth),
@@ -590,8 +592,9 @@ async function convertDataToFormSubmit() {
         }
       }),
       ...newWorkerList.value.map((v) => {
-        const { attachment, ...payload } = v;
-        return payload;
+        {
+          return v.id;
+        }
       }),
     ]),
   );
diff --git a/src/pages/05_quotation/QuotationFormWorkerSelect.vue b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
index a3010e53..155c0b30 100644
--- a/src/pages/05_quotation/QuotationFormWorkerSelect.vue
+++ b/src/pages/05_quotation/QuotationFormWorkerSelect.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import { reactive, ref, watch } from 'vue';
+import { reactive, ref, watch, onMounted } from 'vue';
+import { baseUrl, notify } from 'src/stores/utils';
 
 // NOTE: Import stores
 import { dialog } from 'stores/utils';
@@ -8,7 +9,7 @@ import useOptionStore from 'src/stores/options';
 import useEmployeeStore from 'src/stores/employee';
 import { useEmployeeForm } from 'src/pages/03_customer-management/form';
 import { waitAll } from 'src/stores/utils';
-import { calculateAge, dateFormatJS } from 'src/utils/datetime';
+import { calculateAge, dateFormat, dateFormatJS } from 'src/utils/datetime';
 import { dialogCheckData } from 'stores/utils';
 import { useQuotationForm } from 'pages/05_quotation/form';
 
@@ -48,6 +49,10 @@ import {
 import { storeToRefs } from 'pinia';
 import ToggleView from 'src/components/shared/ToggleView.vue';
 import TableWorker from 'src/components/shared/table/TableWorker.vue';
+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';
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
@@ -57,10 +62,20 @@ const quotationForm = useQuotationForm();
 const { locale } = useI18n();
 const ocrStore = useOcrStore();
 
+const test = false;
+
 const viewMode = ref<boolean>(false);
 
-const { state: employeeFormState, currentFromDataEmployee } =
-  storeToRefs(employeeFormStore);
+const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
+  employeeFormStore;
+
+const {
+  state: employeeFormState,
+  currentFromDataEmployee,
+  onCreateImageList,
+  statusEmployeeCreate,
+  refreshImageState,
+} = storeToRefs(employeeFormStore);
 
 const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
 
@@ -141,49 +156,22 @@ const state = reactive({
   search: '',
 });
 
-function removeNewWorker(index: number) {
-  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 () => {
-      newWorkerList.value.splice(index, 1);
-    },
-    cancel: () => {},
+async function removeNewWorker(index: number) {
+  deleteEmployeeById({
+    id: newWorkerList.value[index].id,
+    removeArray: () => newWorkerList.value.splice(index, 1),
   });
 }
 
 function triggerCreateEmployee() {
   employeeFormStore.resetFormDataEmployee(true);
-  setDefaultFormEmployee();
+  setCurrentBranchId();
+  //setDefaultFormEmployee();
   employeeFormState.value.dialogType = 'create';
   employeeFormState.value.dialogModal = true;
   employeeFormState.value.isEmployeeEdit = true;
 }
 
-function setDefaultFormEmployee() {
-  formDataEmployee.value = {
-    passportNo: '',
-    documentExpireDate: new Date(),
-    lastNameEN: '',
-    lastName: '',
-    middleNameEN: '',
-    middleName: '',
-    firstNameEN: '',
-    firstName: '',
-    namePrefix: '',
-    nationality: '',
-    gender: '',
-    dateOfBirth: null,
-    attachment: [],
-  };
-
-  employeeFormState.value.dialogModal = false;
-}
-
 function clean() {
   workerList.value = [];
   workerSelected.value = [];
@@ -304,6 +292,10 @@ watch(
     }
   },
 );
+
+function setCurrentBranchId() {
+  employeeFormState.value.currentBranchId = props.customerBranchId;
+}
 </script>
 
 <template>
@@ -444,10 +436,7 @@ watch(
                     class="full-width"
                     :prefix-id="'employee-' + index"
                     :data="{
-                      name:
-                        locale === Lang.English
-                          ? `${emp.firstNameEN} ${emp.lastNameEN}`
-                          : `${emp.firstName} ${emp.lastName}`,
+                      name: `  ${emp.firstName ? `${emp.firstName} ${emp.lastName}` : `${emp.firstNameEN} ${emp.lastNameEN}`}`,
                       female: emp.gender === 'female',
                       male: emp.gender === 'male',
                       img: `/images/employee-avatar-${emp.gender}.png`,
@@ -508,7 +497,13 @@ watch(
               <TableWorker
                 v-if="workerList.length !== 0"
                 v-model:selected="workerSelected"
-                :rows="workerList"
+                :rows="
+                  !!newWorkerList.length
+                    ? workerList.filter((v) =>
+                        newWorkerList.some((x) => x.id !== v.id),
+                      )
+                    : workerList
+                "
                 :disabledWorkerId
                 :grid="viewMode"
               >
@@ -589,20 +584,59 @@ watch(
   <!-- NOTE: START - Employee Add Form -->
 
   <DialogForm
-    hide-footer
+    hideFooter
     ref="formDialogRef"
-    v-model:modal="employeeFormState.dialogModal"
     :title="$t('form.title.create', { name: $t('customer.employee') })"
+    v-model:modal="employeeFormState.dialogModal"
+    :undo="() => employeeFormUndo(false)"
     :submit="
-      () => {
-        quotationForm.injectNewEmployee({ data: formDataEmployee }, () =>
-          setDefaultFormEmployee(),
-        );
+      async () => {
+        if (employeeFormState.currentTab === 'personalInfo') {
+          const currentEmployeeId =
+            await employeeFormStore.submitPersonal(onCreateImageList);
+          quotationForm.injectNewEmployee({
+            data: { ...currentFromDataEmployee, id: currentEmployeeId },
+          });
+          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;
       }
     "
-    :close="
+    :show="
       () => {
-        employeeFormState.dialogModal = false;
+        employeeFormStore.resetFormDataEmployee(true);
+      }
+    "
+    :before-close="
+      () => {
+        if (employeeFormStore.isFormDataDifferent()) {
+          employeeConfirmUnsave();
+          return true;
+        }
+        employeeFormState.currentTab = 'personalInfo';
+        return false;
       }
     "
   >
@@ -613,9 +647,9 @@ watch(
       }"
     >
       <ProfileBanner
-        prefix="dialog"
         active
         useToggle
+        prefix="dialog"
         color="white"
         icon="mdi-account-plus-outline"
         :bg-color="
@@ -627,8 +661,42 @@ watch(
         v-model:toggle-status="currentFromDataEmployee.status"
         fallbackCover="/images/employee-banner.png"
         :img="
-          employeeFormState.profileUrl ||
-          `/images/employee-avatar-${currentFromDataEmployee.gender}.png`
+          `${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
@@ -651,369 +719,1211 @@ watch(
         "
       />
     </div>
+
     <div
-      class="col"
+      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
-        style="overflow-y: auto"
-        class="row full-width full-height surface-1 rounded bordered relative-position"
+        class="col surface-1 full-height rounded bordered scroll row relative-position"
+        :key="String(!employeeFormState.isEmployeeEdit)"
       >
         <div
-          :class="{
-            'q-py-md q-px-lg': $q.screen.gt.sm,
-            'q-py-sm q-px-lg': !$q.screen.gt.sm,
-          }"
-          style="position: absolute; z-index: 99999; top: 0; right: 0"
+          class="col"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+          v-if="$q.screen.gt.sm"
         >
-          <div
-            v-if="currentFromDataEmployee.status !== 'INACTIVE'"
-            class="surface-1 row rounded"
-          >
-            <UndoButton
-              v-if="
-                employeeFormState.isEmployeeEdit &&
-                employeeFormState.dialogType !== 'create'
+          <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)
               "
-              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
-            />
+              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 full-height q-col-gutter-sm q-py-md q-pl-md q-pr-sm"
+          class="col-12 col-md-10"
           :class="{
             'q-py-md q-pr-md ': $q.screen.gt.sm,
-            'q-py-md q-px-lg': !$q.screen.gt.sm,
+            'q-pa-sm': !$q.screen.gt.sm,
           }"
-          id="branch-form"
-          style="overflow-y: auto"
+          id="employee-form-content"
+          style="height: 100%; max-height: 100; overflow-y: auto"
         >
-          <FormReferDocument
-            title="form.field.basicInformation"
-            prefixId="dialog"
-            dense
-            v-model:passport-no="formDataEmployee.passportNo"
-            v-model:document-expire-date="formDataEmployee.documentExpireDate"
-            class="q-mb-md"
-          />
+          <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="() => removeNewWorker(newWorkerList.length - 1)"
+                  type="button"
+                />
+              </div>
+            </div>
 
-          <FormPerson
-            id="form-personal"
-            prefix-id="form-employee"
-            dense
-            outlined
-            employee
-            separator
-            hideNameEn
-            title="personnel.form.personalInformation"
-            class="q-mb-md"
-            v-model:prefix-name="formDataEmployee.namePrefix"
-            v-model:first-name="formDataEmployee.firstName"
-            v-model:mid-name="formDataEmployee.middleName"
-            v-model:last-name="formDataEmployee.lastName"
-            v-model:birth-date="formDataEmployee.dateOfBirth"
-            v-model:gender="formDataEmployee.gender"
-            v-model:nationality="formDataEmployee.nationality"
-          />
+            <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"
+              v-model:customer-branch-id="employeeFormState.currentBranchId"
+              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"
+            />
 
-          <UploadFileGroup
-            show-title
-            v-model="formDataEmployee.attachment"
-            hide-action
-            @submit="
-              async (group, allMeta) => {
-                if (allMeta === undefined) return;
+            <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 (group === 'passport') {
+                      const fullName = allMeta['full_name'].split(' ');
+                      let tempValue: {
+                        oldData: { nameField: string; value: string }[];
+                        newData: { nameField: string; value: string }[];
+                      } = { oldData: [], newData: [] };
 
-                  if (
-                    formDataEmployee.gender !== '' &&
-                    formDataEmployee.gender !== allMeta['sex']
-                  ) {
-                    tempValue.oldData.push({
-                      nameField: $t('form.gender'),
-                      value: $t(`general.${formDataEmployee.gender}`),
-                    });
-                    tempValue.newData.push({
-                      nameField: $t('form.gender'),
-                      value: $t(`general.${allMeta['sex']}`),
-                    });
+                      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 (formDataEmployee.firstName !== '') {
-                    tempValue.oldData.push({
-                      nameField: $t('personnel.form.firstName'),
-                      value: formDataEmployee.firstName,
-                    });
-                    tempValue.newData.push({
-                      nameField: $t('personnel.form.firstName'),
-                      value: fullName[0],
-                    });
+                      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: [] };
                   }
-
-                  if (formDataEmployee.lastName !== '') {
-                    tempValue.oldData.push({
-                      nameField: $t('personnel.form.lastName'),
-                      value: formDataEmployee.lastName,
-                    });
-                    tempValue.newData.push({
-                      nameField: $t('personnel.form.lastName'),
-                      value: fullName[1],
-                    });
+                "
+                :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,
+                      });
+                    }
                   }
-
-                  if (formDataEmployee.passportNo !== '') {
-                    tempValue.oldData.push({
-                      nameField: $t('customerEmployee.form.passportNo'),
-                      value: formDataEmployee.passportNo || '',
+                "
+                :delete-item="
+                  async (obj) => {
+                    let status: boolean = false;
+                    const res = await employeeStore.delMeta({
+                      parentId: currentFromDataEmployee.id || '',
+                      group: obj.group,
+                      metaId: obj._meta.id,
                     });
-                    tempValue.newData.push({
-                      nameField: $t('customerEmployee.form.passportNo'),
-                      value: allMeta['doc_number'],
-                    });
-                  }
 
-                  if (formDataEmployee.nationality !== '') {
-                    tempValue.oldData.push({
-                      nameField: $t('general.nationality'),
-                      value: formDataEmployee.nationality || '',
-                    });
-                    tempValue.newData.push({
-                      nameField: $t('general.nationality'),
-                      value: allMeta['nationality'],
-                    });
-                  }
+                    if (res) {
+                      status = true;
+                    }
 
-                  dialogCheckData({
-                    action: async () => {
-                      formDataEmployee.gender = allMeta['sex'];
-                      formDataEmployee.firstName = fullName[0];
-                      formDataEmployee.lastName = fullName[1];
-                      formDataEmployee.passportNo = allMeta['doc_number'];
-                      formDataEmployee.nationality = allMeta['nationality'];
-                    },
-                    checkData: () => {
-                      return tempValue;
-                    },
-                    cancel: () => {
-                      if (!formDataEmployee.gender) {
-                        formDataEmployee.gender = allMeta['gender'];
-                      }
-                      if (!formDataEmployee.firstName) {
-                        formDataEmployee.firstName = fullName[0];
-                      }
-                      if (!formDataEmployee.firstName) {
-                        formDataEmployee.firstName = fullName[0];
-                      }
-                      if (!formDataEmployee.lastName) {
-                        formDataEmployee.lastName = fullName[1];
-                      }
-                      if (!formDataEmployee.passportNo) {
-                        formDataEmployee.passportNo = allMeta['doc_number'];
-                      }
-                      if (!formDataEmployee.nationality) {
-                        formDataEmployee.nationality = allMeta['nationality'];
-                      }
-                    },
-                  });
-                }
-              }
-            "
-            :menu="uploadFileListEmployee"
-            :columns="columnsAttachment"
-            :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,
-                      }),
+                    await employeeFormStore.assignFormDataEmployee(
+                      currentFromDataEmployee.id,
                     );
-                    const tempValue = {
-                      status: true,
-                      group,
-                      meta: mapMrz,
-                    };
 
-                    return tempValue;
+                    return status;
                   }
-                }
-                if (group === 'visa') {
-                  const res = await ocrStore.sendOcr({
-                    file: file,
-                    category: group,
-                  });
+                "
+                :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) {
-                    const tempValue = {
-                      status: true,
-                      group,
-                      meta: res.fields,
-                    };
+                        if (res) {
+                          status = true;
+                        }
+                      } else {
+                        const {
+                          id,
+                          employeeId,
+                          createdAt,
+                          updatedAt,
+                          ...payload
+                        } = _meta;
 
-                    return tempValue;
+                        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;
                   }
-                }
-
-                return { status: true, group, meta: [] };
-              }
-            "
-            :delete-item="
-              async () => {
-                return true;
-              }
-            "
-            :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}-${dateFormatJS(i.expireDate)}` || '',
-                      group: group,
-                      url: await employeeStore.getFile({
-                        parentId: currentFromDataEmployee.id || '',
+                "
+                :get-file-list="
+                  async (group: 'passport' | 'visa' | 'attachment') => {
+                    if (
+                      !!currentFromDataEmployee.id &&
+                      group !== 'attachment'
+                    ) {
+                      const resMeta = await employeeStore.getMetaList({
+                        parentId: currentFromDataEmployee.id,
                         group,
-                        fileId: i.id,
-                      }),
-                      file: undefined,
-                    };
-                  });
+                      });
 
-                  return await waitAll(tempValue);
-                } else {
-                  const res = await employeeStore.listAttachment({
-                    parentId: currentFromDataEmployee.id || '',
-                  });
+                      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,
+                        };
+                      });
 
-                  const tempValue = (res as string[]).map(async (i: any) => {
-                    return {
-                      _meta: { id: i, name: i },
-                      name: i || '',
-                      group: group,
-                      url: await employeeStore.getAttachment({
+                      return await waitAll(tempValue);
+                    } else {
+                      const res = await employeeStore.listAttachment({
                         parentId: currentFromDataEmployee.id || '',
-                        name: i,
-                      }),
-                      file: undefined,
-                    };
-                  });
+                      });
+
+                      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>
 
-                  return await waitAll(tempValue);
-                }
-              }
-            "
-          >
-            <template #form="{ mode, meta, isEdit }">
               <FormEmployeePassport
-                v-if="mode === 'passport' && meta"
+                v-for="(
+                  value, index
+                ) in currentFromDataEmployee.employeePassport"
                 prefix-id="drawer-info-employee"
+                :key="index"
                 id="form-passport"
+                hide-title
                 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"
-              />
+                :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 });
+                        }
+                      "
+                      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-if="mode === 'visa' && meta"
+                v-for="(value, index) in currentFromDataEmployee.employeeVisa"
+                :key="index"
                 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"
-              />
+                :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>
 
-              <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
-            </template>
-          </UploadFileGroup>
+                <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 });
+                        }
+                      "
+                      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 });
+                  }
+                "
+                @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 });
+                  }
+                "
+                @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>
diff --git a/src/pages/05_quotation/form.ts b/src/pages/05_quotation/form.ts
index 969144ad..45801a5a 100644
--- a/src/pages/05_quotation/form.ts
+++ b/src/pages/05_quotation/form.ts
@@ -221,6 +221,7 @@ export const useQuotationForm = defineStore('form-quotation', () => {
     newWorkerList.value.push({
       //passportNo: obj.data.passportNo,
       //documentExpireDate: obj.data.documentExpireDate,
+      id: obj.data.id,
       lastNameEN: obj.data.lastNameEN,
       lastName: obj.data.lastName,
       middleNameEN: obj.data.middleNameEN,
diff --git a/src/pages/07_agencies-management/AgenciesDialog.vue b/src/pages/07_agencies-management/AgenciesDialog.vue
index 3e2d4c77..91b93c31 100644
--- a/src/pages/07_agencies-management/AgenciesDialog.vue
+++ b/src/pages/07_agencies-management/AgenciesDialog.vue
@@ -10,6 +10,7 @@ import DrawerInfo from 'src/components/DrawerInfo.vue';
 import DialogForm from 'src/components/DialogForm.vue';
 import ProfileBanner from 'src/components/ProfileBanner.vue';
 import SideMenu from 'src/components/SideMenu.vue';
+import FormBank from 'src/components/01_branch-management/FormBank.vue';
 import FormBasicInfoAgencies from 'src/components/07_agencies-management/FormBasicInfoAgencies.vue';
 import {
   UndoButton,
@@ -19,6 +20,7 @@ import {
 } from 'src/components/button';
 import AddressForm from 'src/components/form/AddressForm.vue';
 import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
+import { BankBook } from 'src/stores/branch/types';
 
 const institutionStore = useInstitution();
 
@@ -73,6 +75,9 @@ const data = defineModel<InstitutionPayload>('data', {
     group: '',
     name: '',
     nameEN: '',
+    contactName: '',
+    contactEmail: '',
+    contactTel: '',
     code: '',
     addressEN: '',
     address: '',
@@ -88,6 +93,19 @@ const data = defineModel<InstitutionPayload>('data', {
     selectedImage: '',
   },
 });
+const formBankBook = defineModel<BankBook[]>('formBankBook', {
+  default: [
+    {
+      bankName: '',
+      accountNumber: '',
+      bankBranch: '',
+      accountName: '',
+      accountType: '',
+      currentlyUse: true,
+      bankUrl: '',
+    },
+  ],
+});
 
 function viewImage() {
   imageState.imageDialog = true;
@@ -237,11 +255,15 @@ watch(
             :menu="[
               {
                 name: $t('form.field.basicInformation'),
-                anchor: 'agencies-basic-info',
+                anchor: 'agencies-form-basic-info',
               },
               {
                 name: $t('general.address'),
-                anchor: 'agencies-address-info',
+                anchor: 'agencies-form-address-info',
+              },
+              {
+                name: $t('agencies.bankInfo'),
+                anchor: 'agencies-form-bank-info',
               },
             ]"
             background="transparent"
@@ -275,14 +297,17 @@ watch(
           </div>
         </div>
         <FormBasicInfoAgencies
-          id="agencies-basic-info"
+          id="agencies-form-basic-info"
           class="q-mb-xl"
           v-model:group="data.group"
           v-model:name="data.name"
           v-model:name-en="data.nameEN"
+          v-model:contact-name="data.contactName"
+          v-model:email="data.contactEmail"
+          v-model:contact-tel="data.contactTel"
         />
         <AddressForm
-          id="agencies-address-info"
+          id="agencies-form-address-info"
           dense
           :prefix-id="''"
           v-model:address="data.address"
@@ -297,6 +322,14 @@ watch(
           v-model:district-id="data.districtId"
           v-model:sub-district-id="data.subDistrictId"
         />
+        <FormBank
+          id="agencies-form-bank-info"
+          title="agencies.bankInfo"
+          class="q-pt-xl"
+          dense
+          single
+          v-model:bank-book-list="formBankBook"
+        />
       </div>
     </div>
   </DialogForm>
@@ -427,13 +460,17 @@ watch(
                     name: $t('general.address'),
                     anchor: 'agencies-address-info',
                   },
+                  {
+                    name: $t('agencies.bankInfo'),
+                    anchor: 'agencies-bank-info',
+                  },
                 ]"
                 background="transparent"
                 :active="{
                   background: 'hsla(var(--blue-6-hsl) / .2)',
                   foreground: 'var(--blue-6)',
                 }"
-                scroll-element="#agencies-form-content"
+                scroll-element="#agencies-view-content"
               />
             </div>
           </div>
@@ -444,7 +481,7 @@ watch(
               'q-py-md q-pr-md ': $q.screen.gt.sm,
               'q-pa-sm': !$q.screen.gt.sm,
             }"
-            id="user-form-content"
+            id="agencies-view-content"
             style="height: 100%; max-height: 100; overflow-y: auto"
           >
             <FormBasicInfoAgencies
@@ -455,6 +492,9 @@ watch(
               v-model:group="data.group"
               v-model:name="data.name"
               v-model:name-en="data.nameEN"
+              v-model:contact-name="data.contactName"
+              v-model:email="data.contactEmail"
+              v-model:contact-tel="data.contactTel"
             />
             <AddressForm
               id="agencies-address-info"
@@ -473,6 +513,15 @@ watch(
               v-model:district-id="data.districtId"
               v-model:sub-district-id="data.subDistrictId"
             />
+            <FormBank
+              id="agencies-bank-info"
+              title="agencies.bankInfo"
+              class="q-pt-xl"
+              dense
+              single
+              :readonly
+              v-model:bank-book-list="formBankBook"
+            />
           </div>
         </div>
       </div>
diff --git a/src/pages/07_agencies-management/MainPage.vue b/src/pages/07_agencies-management/MainPage.vue
index 8025ea58..e828fe39 100644
--- a/src/pages/07_agencies-management/MainPage.vue
+++ b/src/pages/07_agencies-management/MainPage.vue
@@ -85,6 +85,9 @@ const blankFormData: InstitutionPayload = {
   code: '',
   name: '',
   nameEN: '',
+  contactName: '',
+  contactEmail: '',
+  contactTel: '',
   addressEN: '',
   address: '',
   soi: '',
@@ -98,6 +101,16 @@ const blankFormData: InstitutionPayload = {
   provinceId: '',
   selectedImage: '',
   status: 'CREATED',
+  bank: [
+    {
+      bankName: '',
+      accountNumber: '',
+      bankBranch: '',
+      accountName: '',
+      accountType: '',
+      currentlyUse: true,
+    },
+  ],
 };
 
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
@@ -160,6 +173,19 @@ 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,
+      },
+    ],
   };
 }
 
@@ -169,6 +195,9 @@ async function submit(opt?: { selectedImage: string }) {
     code: formData.value.code,
     name: formData.value.name,
     nameEN: formData.value.nameEN,
+    contactName: formData.value.contactName,
+    contactEmail: formData.value.contactEmail,
+    contactTel: formData.value.contactTel,
     addressEN: formData.value.addressEN,
     address: formData.value.address,
     soi: formData.value.soi,
@@ -181,6 +210,14 @@ async function submit(opt?: { selectedImage: string }) {
     districtId: formData.value.districtId,
     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,
+    })),
   };
   if (
     (pageState.isDrawerEdit && currAgenciesData.value?.id) ||
@@ -922,6 +959,7 @@ watch(
     v-model="pageState.addModal"
     v-model:drawer-model="pageState.viewDrawer"
     v-model:data="formData"
+    v-model:form-bank-book="formData.bank"
     v-model:on-create-image-list="onCreateImageList"
   />
 </template>
diff --git a/src/stores/institution/types.ts b/src/stores/institution/types.ts
index 7bd6287f..9a3877a5 100644
--- a/src/stores/institution/types.ts
+++ b/src/stores/institution/types.ts
@@ -1,4 +1,5 @@
 import { District, Province, SubDistrict } from '../address';
+import { BankBook } from '../branch/types';
 import { Status } from '../types';
 
 export type Institution = {
@@ -25,6 +26,11 @@ export type Institution = {
   districtId: string;
   provinceId: string;
   status: Status;
+
+  contactName?: string | null;
+  contactEmail?: string | null;
+  contactTel?: string | null;
+  bank: BankBook[];
 };
 
 export type InstitutionPayload = {
@@ -34,6 +40,11 @@ export type InstitutionPayload = {
   group?: string;
   selectedImage?: string | null;
 
+  contactName?: string | null;
+  contactEmail?: string | null;
+  contactTel?: string | null;
+  bank: BankBook[];
+
   addressEN: string;
   address: string;
   soi?: string | null;
diff --git a/src/stores/options/index.ts b/src/stores/options/index.ts
index d425389b..469d991f 100644
--- a/src/stores/options/index.ts
+++ b/src/stores/options/index.ts
@@ -75,6 +75,7 @@ const useOptionStore = defineStore('optionStore', () => {
   }
 
   return {
+    rawOption,
     globalOption,
     mapOption,
   };
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index 7ce8ee7e..bb0395a9 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -57,6 +57,9 @@ export type User = {
   citizenIssue?: Date | null;
   citizenId: string;
   branch: Branch[];
+
+  remark?: string;
+  agencyStatus?: AgencyStatus;
 };
 
 export type UserCreate = {
@@ -105,8 +108,17 @@ export type UserCreate = {
   citizenExpire?: Date | null;
   citizenIssue?: Date | null;
   citizenId: string;
+
+  remark?: string;
+  agencyStatus?: AgencyStatus | string;
 };
 
+export enum AgencyStatus {
+  Normal = 'Normal',
+  Canceled = 'Canceled',
+  Blacklist = 'Blacklist',
+}
+
 export type UserAttachment = {
   name: string;
   url: string;
diff --git a/src/utils/address.ts b/src/utils/address.ts
index a66ac185..2ee2da4b 100644
--- a/src/utils/address.ts
+++ b/src/utils/address.ts
@@ -19,34 +19,34 @@ export function formatAddress(opt: {
   let addressParts: string[];
   if (opt.en) {
     // en
-    addressParts = [`${opt.addressEN},`];
-    if (opt.mooEN) addressParts.push(`Moo ${opt.mooEN},`);
-    if (opt.soiEN) addressParts.push(`Soi ${opt.soiEN},`);
+    addressParts = [`${opt.addressEN}`];
+    if (opt.mooEN) addressParts.push(`Moo ${opt.mooEN}`);
+    if (opt.soiEN) addressParts.push(`Soi ${opt.soiEN}`);
     if (opt.streetEN) addressParts.push(`${opt.streetEN} Rd.`);
 
     if (opt.subDistrict) {
-      addressParts.push(`${opt.subDistrict.nameEN} sub-district,`);
+      addressParts.push(`${opt.subDistrict.nameEN} sub-district`);
     }
-    if (opt.district) addressParts.push(`${opt.district.nameEN} district,`);
-    if (opt.province) addressParts.push(`${opt.province.nameEN},`);
+    if (opt.district) addressParts.push(`${opt.district.nameEN} distric`);
+    if (opt.province) addressParts.push(`${opt.province.nameEN}`);
   } else {
     // th
-    addressParts = [`${opt.address},`];
-    if (opt.moo) addressParts.push(`หมู่ ${opt.moo},`);
-    if (opt.soi) addressParts.push(`ซอย ${opt.soi},`);
-    if (opt.street) addressParts.push(`ถนน${opt.street},`);
+    addressParts = [`${opt.address}`];
+    if (opt.moo) addressParts.push(`หมู่ ${opt.moo}`);
+    if (opt.soi) addressParts.push(`ซอย ${opt.soi}`);
+    if (opt.street) addressParts.push(`ถนน${opt.street}`);
 
     if (opt.subDistrict) {
       addressParts.push(
-        `${opt.province?.id === '10' ? 'แขวง' : 'ตำบล'}${opt.subDistrict.name},`,
+        `${opt.province?.id === '10' ? 'แขวง' : 'ตำบล'}${opt.subDistrict.name}`,
       );
     }
     if (opt.district) {
       addressParts.push(
-        `${opt.province?.id === '10' ? 'เขต' : 'อำเภอ'}${opt.district.name},`,
+        `${opt.province?.id === '10' ? 'เขต' : 'อำเภอ'}${opt.district.name}`,
       );
     }
-    if (opt.province) addressParts.push(`จังหวัด${opt.province.name},`);
+    if (opt.province) addressParts.push(`จังหวัด${opt.province.name}`);
     // addressParts.push(
     //   `${opt.province.id === '10' ? t('address.subArea') : t('address.subDistrict')}${opt.subDistrict.name},`,
     // );