From cb01378114746dc7efe2eca42cd5e5ee0fe800b4 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 11 Jun 2024 12:27:58 +0000
Subject: [PATCH] feat: option from json

---
 public/option/option.json                     | 537 +++++++++++++++
 .../BasicInformation.vue                      |  23 +-
 .../FormEmployeeHealthCheck.vue               | 530 +++++++--------
 .../FormEmployeeOther.vue                     |   4 +-
 .../FormEmployeePassport.vue                  |  47 +-
 .../FormEmployeeVisa.vue                      |   9 +-
 .../FormEmployeeWorkHistory.vue               | 613 +++++++++---------
 src/pages/03_customer-management/MainPage.vue | 129 +++-
 src/stores/employee/index.ts                  |   5 +
 9 files changed, 1271 insertions(+), 626 deletions(-)
 create mode 100644 public/option/option.json

diff --git a/public/option/option.json b/public/option/option.json
new file mode 100644
index 00000000..0336b8f7
--- /dev/null
+++ b/public/option/option.json
@@ -0,0 +1,537 @@
+{
+  "eng": {
+    "gender": [
+      {
+        "label": "male",
+        "value": "male"
+      },
+      {
+        "label": "female",
+        "value": "female"
+      }
+    ],
+
+    "training": [
+      {
+        "label": "",
+        "value": ""
+      },
+      {
+        "label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
+        "value": ""
+      },
+      {
+        "label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
+        "value": ""
+      },
+      {
+        "label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
+        "value": ""
+      },
+      {
+        "label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
+        "value": ""
+      }
+    ]
+  },
+
+  "tha": {
+    "gender": [
+      {
+        "label": "ชาย",
+        "value": "male"
+      },
+      {
+        "label": "หญิง",
+        "value": "female"
+      }
+    ],
+
+    "training": [
+      {
+        "label": "สถานที่อบรมแรงงานเมียนมา-แม่สอด จ.ตาก",
+        "value": "trainingTak"
+      },
+      {
+        "label": "สถานที่อบรมแรงงานเมียนมา-เกาะสอง จ.ระนอง",
+        "value": "trainingRanong"
+      },
+      {
+        "label": " สถานที่อบรมแรงงานลาว-หนองคาย จ.หนองคาย",
+        "value": "trainingNongKhai"
+      },
+      {
+        "label": "สถานที่อบรมแรงงานกัมพูชา-อรัญประเทศ จ.สระแก้ว",
+        "value": "trainingSaKaeo"
+      },
+      {
+        "label": "สถานที่อบรมแรงงานกัมพูชา-บ้านแหลม จ.จันทบุรี",
+        "value": "trainingChanthaburi"
+      }
+    ],
+
+    "nationality": [
+      {
+        "label": "ไทย",
+        "value": "th"
+      },
+      {
+        "label": "เมียนมา",
+        "value": "mm"
+      },
+      {
+        "label": "ลาว",
+        "value": "lo"
+      },
+      {
+        "label": "กัมพูชา",
+        "value": "kh"
+      },
+      {
+        "label": "เวียดนาม",
+        "value": "vn"
+      }
+    ],
+
+    "businessType": [
+      {
+        "label": "ประมง",
+        "value": "fisheries"
+      },
+      {
+        "label": "ต่อเนื่องประมงทะเล",
+        "value": "continuous-fisheries"
+      },
+      {
+        "label": "เกษตรและปศุสัตว์",
+        "value": "agriculture "
+      },
+      {
+        "label": "กิจการก่อสร้าง",
+        "value": "construction "
+      },
+      {
+        "label": "ผู้รับใช้ในบ้าน",
+        "value": "maid"
+      },
+      {
+        "label": "กิจการต่อเนื่องการเกษตร",
+        "value": "continuousAgriculture"
+      },
+      {
+        "label": "ต่อเนื่องปศุสัตว์โรงฆ่าสัตว์ ชำแหละ",
+        "value": "continuousButchery"
+      },
+      {
+        "label": "กิจการรีไซเคิล",
+        "value": "recycling"
+      },
+      {
+        "label": "เหมืองแร่/เหมืองหิน",
+        "value": "mining"
+      },
+      {
+        "label": "จำหน่ายผลิตภัณฑ์โลหะ",
+        "value": "metal"
+      },
+      {
+        "label": "จำหน่ายอาหารและเครื่องดื่ม",
+        "value": "food"
+      },
+      {
+        "label": "ผลิตหรือจำหน่ายผลิตภัณฑ์จากดิน",
+        "value": "soilBasedProducts"
+      },
+      {
+        "label": "ผลิตหรือจำหน่ายวัสดุก่อสร้าง",
+        "value": "constructionMaterials"
+      },
+      {
+        "label": "แปรรูปหิน",
+        "value": "stone"
+      },
+      {
+        "label": "ผลิตหรือจำหน่ายเสื้อผ้าสำเร็จรูป",
+        "value": "cloth"
+      },
+      {
+        "label": "ผลิตหรือจำหน่ายผลิตภัณฑ์พลาสติก",
+        "value": "plastic"
+      },
+      {
+        "label": "ผลิตหรือจำหน่ายผลิตภัณฑ์กระดาษ",
+        "value": "paper"
+      },
+      {
+        "label": "ผลิตหรือจำหน่ายผลิตภัณฑ์อิเล็กทรอนิกส์",
+        "value": "electronics"
+      },
+      {
+        "label": "ขนถ่ายสินค้าทางบก น้ำ คลังสินค้า",
+        "value": "transport"
+      },
+      {
+        "label": "ค้าส่ง ค้าปลีก แผงลอย",
+        "value": "market"
+      },
+      {
+        "label": "อู่ซ่อมรถ ล้าง อัดฉีด",
+        "value": "car"
+      },
+      {
+        "label": "สถานีบริการน้ำมัน แก้ส เชื้อเพลิง",
+        "value": "fuel"
+      },
+      {
+        "label": "สถานศึกษา มูลนิธิ สมาคม สถานพยาบาล",
+        "value": "institution"
+      },
+      {
+        "label": "การให้บริการต่างๆ",
+        "value": "service"
+      },
+      {
+        "label": "งานผู้ประสานงานด้านภาษากัมพูชา ลาว หรือเมียนมา",
+        "value": "coordinator"
+      },
+      {
+        "label": "แปรรูปสัตว์น้ำ",
+        "value": "seafood"
+      }
+    ],
+
+    "position": [
+      {
+        "label": "กรรมกร",
+        "value": "worker"
+      },
+      {
+        "label": "ช่างเครื่องยนต์ในเรือประมงทะเล",
+        "value": "boatsMechanic"
+      },
+      {
+        "label": "ผู้รับใช้ในบ้าน",
+        "value": "maid"
+      },
+      {
+        "label": "งานผู้ประสานงานด้านภาษากัมพูชา ลาว หรือเมียนมา",
+        "value": "coordinator"
+      }
+    ],
+
+    "area": [
+      {
+        "label": "เขตพื้นที่ 1 บางรัก ปทุมวัน ยานนาวสาทร และบางคอแหลม",
+        "value": "area1"
+      },
+      {
+        "label": "เขตพื้นที่ 2 จอมทอง ทุ่งครุ บางขุนเทียน บางบอน และราษฎร์บูรณะ",
+        "value": "area2"
+      },
+      {
+        "label": "เขตพื้นที่ 3 คลองเตย บางนา ประเวศ พระโขนง วัฒนา และสวนหลวง",
+        "value": "area3"
+      },
+      {
+        "label": "เขตพื้นที่ 4 คันนายาว บางกะปิ ลาดพร้าว บึงกุ่ม และวังทางหลาง",
+        "value": "area4"
+      },
+      {
+        "label": "เขตพื้นที่ 5 คลองสามวา มีนบุรี ลาดกระบัง สะพานสูง หนองจอก และสายไหม",
+        "value": "area5"
+      },
+      {
+        "label": "เขตพื้นที่ 6 คลองสาน ธนบุรี บางกอกน้อย บางกอกใหญ่ และบางพลัด",
+        "value": "area6"
+      },
+      {
+        "label": "เขตพื้นที่ 7 ตลิ่งชัน ทวีวัฒนา บางแค ภาษีเจริญ และหนองแขม",
+        "value": "area7"
+      },
+      {
+        "label": "เขตพื้นที่ 8 ดุสิต พระนครป้อมปราบศัตรูพ่าย และสัมพันธวงศ์",
+        "value": "area8"
+      },
+      {
+        "label": "เขตพื้นที่ 9 จตุจักร ดอนเมือง บางชื่อ บางเขน และหลักสี่",
+        "value": "area9"
+      },
+      {
+        "label": "เขตพื้นที่ 10 ดินแดง พญาไท ราชเทวี และห้วยขวาง",
+        "value": "area10"
+      }
+    ],
+
+    "typeImport": [
+      {
+        "label": "ยื่นขอบัญชีรายชื่อ (Name list) สัญชาติ เมียนมา",
+        "value": "nameListMM"
+      },
+      {
+        "label": "ยื่นขอบัญชีรายชื่อ (Name list) สัญชาติ ลาว",
+        "value": "nameListLO"
+      },
+      {
+        "label": "ยื่นขอบัญชีรายชื่อ (Name list) สัญชาติ กัมพูชา",
+        "value": "nameListKH"
+      }
+    ],
+
+    "status": [
+      {
+        "label": "ไม่พบข้อมูลเสนอขาย",
+        "value": "notFound"
+      },
+      {
+        "label": "อยู่ระหว่างดำเนินการ",
+        "value": "inProgress"
+      },
+      {
+        "label": "ติดตาม / เอกสารเพิ่มเติม",
+        "value": "follow"
+      },
+      {
+        "label": "รอพิจารณา / นัดรับเอกสาร",
+        "value": "consider"
+      },
+      {
+        "label": "ดำเนินการเรียบร้อย",
+        "value": "complete"
+      },
+      {
+        "label": "ยกเลิกบริการ",
+        "value": "cancel"
+      }
+    ],
+
+    "delivery": [
+      {
+        "label": "ช่องทาง E-Mail",
+        "value": "email"
+      },
+      {
+        "label": "ช่องทาง Line",
+        "value": "line"
+      },
+      {
+        "label": "ช่องทาง DHL",
+        "value": "dhl"
+      },
+      {
+        "label": "ช่องทาง รถตู้/รถโดยสาร",
+        "value": "bus"
+      },
+      {
+        "label": "พร้อมคนเซ็นสัญญา",
+        "value": "person"
+      }
+    ],
+
+    "typeInsurance": [
+      {
+        "label": "ประกันสุขภาพภาพเอกชน 6 เดือน",
+        "value": "6m"
+      },
+      {
+        "label": "ประกันสุขภาพ รพ.รัฐ 3 เดือน",
+        "value": "3m"
+      },
+      {
+        "label": "ประกันสุขภาพ รพ.รัฐ 1 ปี",
+        "value": "1y"
+      },
+      {
+        "label": "ประกันสุขภาพ รพ.รัฐ 2 ปี",
+        "value": "2y"
+      }
+    ],
+
+    "insurancePlace": [
+      {
+        "label": "แปซิฟิคครอส",
+        "value": "pacificcross"
+      },
+      {
+        "label": "ทิพยประกันภัย",
+        "value": "dhipaya"
+      },
+      {
+        "label": "รพ.เลิดสิน 4.รพ.ตากสิน",
+        "value": "lerdsin"
+      },
+      {
+        "label": "รพ.ราชพิพัฒน์",
+        "value": "ratchapipat"
+      },
+      {
+        "label": "รพ.เจริญกรุงประชารักษ์",
+        "value": "krungPracharak"
+      }
+    ],
+
+    "typeReplace": [
+      {
+        "label": "ใบอนุญาตทำงาน 3 เดือน (325)",
+        "value": "3m"
+      },
+      {
+        "label": "ใบอนุญาตทำงาน 6 เดือน (550)",
+        "value": "6m"
+      },
+      {
+        "label": "ใบอนุญาตทำงาน 1 ปี (1000)",
+        "value": "1y"
+      },
+      {
+        "label": "ใบอนุญาตทำงาน 1 ปี 3 เดือน (1225)",
+        "value": "1y3m"
+      },
+      {
+        "label": "ใบอนุญาตทำงาน 1 ปี 6 เดือน (1450)",
+        "value": "1y6m"
+      },
+      {
+        "label": "ใบอนุญาตทำงาน 2 ปี (1900)",
+        "value": "2y"
+      }
+    ],
+
+    "checkPoint": [
+      {
+        "label": "เมียนมา-แม่สอด จ.ตาก",
+        "value": "tak"
+      },
+      {
+        "label": "เมียนมา- เกาะสอง จ.ระนอง",
+        "value": "ranong"
+      },
+      {
+        "label": "ลาว-หนองคาย จ.หนองคาย",
+        "value": "nongKhai"
+      },
+      {
+        "label": "กัมพูชา-อรัญประเทศ จ.สระแก้ว",
+        "value": "saKaeo"
+      },
+      {
+        "label": "กัมพูชา-บ้านแหลม จ.จันทบุรี",
+        "value": "chanthaburi"
+      }
+    ],
+
+    "residence": [
+      {
+        "label": "ตม.แจ้งวัฒนะ",
+        "value": "chaengwattana"
+      },
+      {
+        "label": "ตม.สมุทรปราการ",
+        "value": "samutPrakan"
+      },
+      {
+        "label": "ตม.สมุทรสาคร",
+        "value": "samutSakhon"
+      },
+      {
+        "label": "ตม.นนทบุรี",
+        "value": "nonthaburi"
+      },
+      {
+        "label": "ตม.ปทุมธานี",
+        "value": "pathumThani"
+      },
+      {
+        "label": "ตม.นครปฐม",
+        "value": "nakhonPathom"
+      }
+    ],
+
+    "customerStep": [
+      {
+        "label": "ช่องทางในการจัดส่งเอกสาร",
+        "value": "channel"
+      },
+      {
+        "label": "ลูกค้ามารับด้วยตัวเอง",
+        "value": "pickup"
+      },
+      {
+        "label": "ส่งทางไปรษณีย์",
+        "value": "post"
+      },
+      {
+        "label": "ส่งทางไลน์แมน",
+        "value": "lineMan"
+      },
+      {
+        "label": "JOB ส่งเอกสาร",
+        "value": "job"
+      },
+      {
+        "label": "ตม.นครปฐม",
+        "value": "nakhonPathom"
+      }
+    ],
+
+    "statusDeliver": [
+      {
+        "label": "โทรแจ้งลูกค้าเรียบร้อย",
+        "value": "reached"
+      },
+      {
+        "label": "ติดต่อไม่ได้/ไม่รับสาย",
+        "value": "cantReached"
+      },
+      {
+        "label": "ลูกค้ารับเอกสารคืนเรียบร้อย",
+        "value": "received"
+      },
+      {
+        "label": "ติดตาม/แก้ไขเอกสาร",
+        "value": "follow"
+      }
+    ],
+
+    "type90days": [
+      {
+        "label": "รายงานตัว 90 วัน_กทม.(ปกติ)",
+        "value": "normalBkk"
+      },
+      {
+        "label": "รายงานตัว 90 วัน_กทม.(เกินกำหนด)",
+        "value": "overdueBkk"
+      },
+      {
+        "label": "รายงานตัว 90 วัน_ตจว.(ปกติ)",
+        "value": "nomal"
+      },
+      {
+        "label": "รายงานตัว 90 วัน_ตจว.(เกินกำหนด)",
+        "value": "overdue"
+      }
+    ],
+
+    "typeInsurance2": [
+      {
+        "label": "ประกันสุขภาพภาพเอกชน 6 เดือน (990)",
+        "value": "6m"
+      },
+      {
+        "label": "ประกันสุขภาพ รพ.รัฐ 3 เดือน (500)",
+        "value": "3m"
+      },
+      {
+        "label": "ประกันสุขภาพ รพ.รัฐ 1 ปี (2100)",
+        "value": "1y"
+      },
+      {
+        "label": "ประกันสุขภาพ รพ.รัฐ 2 ปี (4200)",
+        "value": "2y"
+      },
+      {
+        "label": "สิทธิ์ประกันสังคม",
+        "value": "socialSecurity"
+      }
+    ]
+  }
+}
diff --git a/src/components/03_customer-management/BasicInformation.vue b/src/components/03_customer-management/BasicInformation.vue
index 848e3a5d..32b3b286 100644
--- a/src/components/03_customer-management/BasicInformation.vue
+++ b/src/components/03_customer-management/BasicInformation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 const customerName = defineModel<string>('customerName');
 const customerNameEn = defineModel<string>('customerNameEn');
@@ -12,13 +12,6 @@ const customerBranchId = defineModel<string>('customerBranchId');
 const employeeID = defineModel<string>('employeeID');
 const nrcNo = defineModel<string>('nrcNo');
 
-const branchOption = ref([
-  {
-    label: 'uuu',
-    value: 'ad87961c-c44f-47ca-8c1e-0ef30c2b16ba',
-  },
-]);
-
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
@@ -26,7 +19,15 @@ defineProps<{
   separator?: boolean;
   typeCustomer?: string;
   employee?: boolean;
+
+  employeeOwnerOption?: { label: string; value: string }[];
 }>();
+
+defineEmits<{
+  (e: 'filterOwnerBranch', val: string, update: void): void;
+}>();
+
+onMounted(async () => {});
 </script>
 
 <template>
@@ -82,6 +83,8 @@ defineProps<{
   <div v-if="employee" class="col-9 row q-col-gutter-md">
     <q-select
       id="select-employer-branch"
+      use-input
+      input-debounce="0"
       :dense="dense"
       :outlined="!readonly"
       :readonly="readonly"
@@ -94,7 +97,8 @@ defineProps<{
       option-value="value"
       emit-value
       map-options
-      :options="branchOption"
+      :options="employeeOwnerOption"
+      @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
       :rules="[
         (val: string) =>
           !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
@@ -112,6 +116,7 @@ defineProps<{
       v-model="employeeID"
     />
     <q-input
+      mask="## #### ###### #"
       for="input-nrcNo"
       :dense="dense"
       :outlined="!readonly"
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index ac1275a5..80ab695b 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -21,6 +21,14 @@ const addrOptions = reactive<{
 });
 
 const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
+const checkupTypeOption =
+  defineModel<{ label: string; value: string }[]>('checkupTypeOption');
+const medicalBenefitOption = defineModel<{ label: string; value: string }[]>(
+  'medicalBenefitOption',
+);
+const insuranceCompanyOption = defineModel<{ label: string; value: string }[]>(
+  'insuranceCompanyOption',
+);
 
 const tab = ref();
 
@@ -73,271 +81,273 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="bordered-b full-width">
-    <q-tabs
-      v-model="tab"
-      dense
-      class="text-grey"
-      active-class="active-tab"
-      indicator-color="transparent"
-      align="left"
-      :breakpoint="0"
-    >
-      <q-btn
-        @click="addData"
-        flat
-        class="app-text-muted"
-        style="background-color: var(--_body-bg)"
-        icon="mdi-plus"
-        padding="8px 8px"
-        :disable="readonly"
-        :color="$q.dark.isActive ? 'primary' : ''"
-        :class="tab !== 'tab0' ? 'bordered-r' : ''"
-      />
-      <q-tab
-        v-for="(tab, index) in employeeCheckup"
+  <div>
+    <div class="bordered-b full-width">
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-class="active-tab"
+        indicator-color="transparent"
+        align="left"
+        :breakpoint="0"
+      >
+        <q-btn
+          @click="addData"
+          flat
+          class="app-text-muted"
+          style="background-color: var(--_body-bg)"
+          icon="mdi-plus"
+          padding="8px 8px"
+          :disable="readonly"
+          :color="$q.dark.isActive ? 'primary' : ''"
+          :class="tab !== 'tab0' ? 'bordered-r' : ''"
+        />
+        <q-tab
+          v-for="(tab, index) in employeeCheckup"
+          v-bind:key="index"
+          :name="`tab${index}`"
+          class="content-tab text-capitalize"
+          style="z-index: 999"
+        >
+          <div class="text-weight-medium row items-center">
+            {{ $t('formDialogTabCheckup') + (index + 1) }}
+            <q-btn
+              v-if="!readonly && employeeCheckup?.length !== 1"
+              round
+              flat
+              id="closeDialog"
+              size="sm"
+              icon="mdi-close"
+              padding="xs"
+              color="red"
+              :class="{ dark: $q.dark.isActive }"
+              @click.stop="removeData(index)"
+            />
+          </div>
+        </q-tab>
+      </q-tabs>
+    </div>
+
+    <q-tab-panels v-model="tab" style="padding-top: 0px">
+      <q-tab-panel
+        v-for="(checkup, index) in employeeCheckup"
         v-bind:key="index"
         :name="`tab${index}`"
-        class="content-tab text-capitalize"
-        style="z-index: 999"
+        class="row col-12 items-start"
+        style="overflow: auto; height: 50vh"
       >
-        <div class="text-weight-medium row items-center">
-          {{ $t('formDialogTabCheckup') + (index + 1) }}
-          <q-btn
-            v-if="!readonly && employeeCheckup?.length !== 1"
-            round
-            flat
-            id="closeDialog"
-            size="sm"
-            icon="mdi-close"
-            padding="xs"
-            color="red"
-            :class="{ dark: $q.dark.isActive }"
-            @click.stop="removeData(index)"
-          />
+        <div class="col-3 app-text-muted">
+          • {{ $t(`formDialogTitleHealthCheck`) }}
         </div>
-      </q-tab>
-    </q-tabs>
+        <div class="col-9 row q-col-gutter-md">
+          <q-input
+            :dense="dense"
+            :outlined="!readonly"
+            :readonly="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            class="col-6"
+            :label="$t('formDialogInputCheckupRes')"
+            v-model="checkup.checkupResult"
+          />
+          <q-select
+            id="select-province"
+            :dense="dense"
+            :readonly="readonly"
+            :outlined="readonly ? false : outlined"
+            :hide-dropdown-icon="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            emit-value
+            map-options
+            v-model="checkup.checkupType"
+            option-value="value"
+            option-label="label"
+            :label="$t('formDialogInputCheckupType')"
+            class="col-6"
+            :options="checkupTypeOption"
+            lazy-rules
+          />
+          <q-select
+            id="select-province"
+            :dense="dense"
+            :readonly="readonly"
+            :outlined="readonly ? false : outlined"
+            :hide-dropdown-icon="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            emit-value
+            map-options
+            v-model="checkup.provinceId"
+            option-value="id"
+            option-label="name"
+            :label="$t('province')"
+            class="col-3"
+            :options="addrOptions.provinceOps"
+            lazy-rules
+          />
+          <q-input
+            :dense="dense"
+            :outlined="!readonly"
+            :readonly="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            class="col-9"
+            :label="$t('formDialogInputHospital')"
+            v-model="checkup.hospitalName"
+          />
+          <q-input
+            :label="$t('formDialogInputRemark')"
+            :dense="dense"
+            :outlined="!readonly"
+            :readonly="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            class="col-12"
+            v-model="checkup.remark"
+            type="textarea"
+          />
+          <q-select
+            id="select-province"
+            :dense="dense"
+            :readonly="readonly"
+            :outlined="readonly ? false : outlined"
+            :hide-dropdown-icon="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            emit-value
+            map-options
+            v-model="checkup.medicalBenefitScheme"
+            option-value="value"
+            option-label="label"
+            :label="$t('formDialogInputMedicalBenefit')"
+            class="col-6"
+            :options="medicalBenefitOption"
+            lazy-rules
+          />
+          <q-select
+            id="select-province"
+            :dense="dense"
+            :readonly="readonly"
+            :outlined="readonly ? false : outlined"
+            :hide-dropdown-icon="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            emit-value
+            map-options
+            v-model="checkup.insuranceCompany"
+            option-value="value"
+            option-label="label"
+            :label="$t('formDialogInputInsuranceCompany')"
+            class="col-6"
+            :options="insuranceCompanyOption"
+            lazy-rules
+          />
+          <VueDatePicker
+            utc
+            autoApply
+            :teleport="true"
+            v-model="checkup.coverageStartDate"
+            :locale="'th'"
+            :enableTimePicker="false"
+            :disabled="readonly"
+            class="col-3"
+          >
+            <template #year="{ value }">
+              {{ value + 543 }}
+            </template>
+            <template #trigger>
+              <q-input
+                id="input-birth-date"
+                :label="$t('formDialogInputCoverageStartDate')"
+                :dense="dense"
+                :outlined="readonly ? false : outlined"
+                :readonly="readonly"
+                :borderless="readonly"
+                :model-value="
+                  checkup.coverageStartDate
+                    ? dateFormat(checkup.coverageStartDate)
+                    : ''
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    size="xs"
+                    name="mdi-calendar-blank-outline"
+                    class="cursor-pointer"
+                    color="positive"
+                  />
+                </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="checkup.coverageStartDate && !readonly"
+                    name="mdi-close"
+                    class="cursor-pointer"
+                    size="xs"
+                    @click="checkup.coverageStartDate = undefined"
+                  />
+                </template>
+              </q-input>
+            </template>
+          </VueDatePicker>
+          <VueDatePicker
+            utc
+            autoApply
+            :teleport="true"
+            v-model="checkup.coverageExpireDate"
+            :locale="'th'"
+            :enableTimePicker="false"
+            :disabled="readonly"
+            class="col-3"
+          >
+            <template #year="{ value }">
+              {{ value + 543 }}
+            </template>
+            <template #trigger>
+              <q-input
+                id="input-birth-date"
+                :label="$t('formDialogInputCoverageExpiretDate')"
+                :dense="dense"
+                :outlined="readonly ? false : outlined"
+                :readonly="readonly"
+                :borderless="readonly"
+                :model-value="
+                  checkup.coverageExpireDate
+                    ? dateFormat(checkup.coverageExpireDate)
+                    : ''
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    size="xs"
+                    name="mdi-calendar-blank-outline"
+                    class="cursor-pointer"
+                    color="positive"
+                  />
+                </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="checkup.coverageExpireDate && !readonly"
+                    name="mdi-close"
+                    class="cursor-pointer"
+                    size="xs"
+                    @click="checkup.coverageExpireDate = undefined"
+                  />
+                </template>
+              </q-input>
+            </template>
+          </VueDatePicker>
+        </div>
+
+        <q-separator
+          v-if="separator"
+          class="col-12 q-mt-xl q-mb-md"
+          style="padding-block: 0.5px"
+        />
+      </q-tab-panel>
+    </q-tab-panels>
   </div>
-
-  <q-tab-panels v-model="tab" style="padding-top: 0px">
-    <q-tab-panel
-      v-for="(checkup, index) in employeeCheckup"
-      v-bind:key="index"
-      :name="`tab${index}`"
-      class="row col-12 items-start"
-      style="overflow: auto; height: 50vh"
-    >
-      <div class="col-3 app-text-muted">
-        • {{ $t(`formDialogTitleHealthCheck`) }}
-      </div>
-      <div class="col-9 row q-col-gutter-md">
-        <q-input
-          :dense="dense"
-          :outlined="!readonly"
-          :readonly="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          class="col-6"
-          :label="$t('formDialogInputCheckupRes')"
-          v-model="checkup.checkupResult"
-        />
-        <q-select
-          id="select-province"
-          :dense="dense"
-          :readonly="readonly"
-          :outlined="readonly ? false : outlined"
-          :hide-dropdown-icon="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          emit-value
-          map-options
-          v-model="checkup.checkupType"
-          option-value="id"
-          option-label="name"
-          :label="$t('formDialogInputCheckupType')"
-          class="col-6"
-          :options="addrOptions.provinceOps"
-          lazy-rules
-        />
-        <q-select
-          id="select-province"
-          :dense="dense"
-          :readonly="readonly"
-          :outlined="readonly ? false : outlined"
-          :hide-dropdown-icon="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          emit-value
-          map-options
-          v-model="checkup.provinceId"
-          option-value="id"
-          option-label="nameEN"
-          :label="$t('province')"
-          class="col-3"
-          :options="addrOptions.provinceOps"
-          lazy-rules
-        />
-        <q-input
-          :dense="dense"
-          :outlined="!readonly"
-          :readonly="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          class="col-9"
-          :label="$t('formDialogInputHospital')"
-          v-model="checkup.hospitalName"
-        />
-        <q-input
-          :label="$t('formDialogInputRemark')"
-          :dense="dense"
-          :outlined="!readonly"
-          :readonly="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          class="col-12"
-          v-model="checkup.remark"
-          type="textarea"
-        />
-        <q-select
-          id="select-province"
-          :dense="dense"
-          :readonly="readonly"
-          :outlined="readonly ? false : outlined"
-          :hide-dropdown-icon="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          emit-value
-          map-options
-          v-model="checkup.medicalBenefitScheme"
-          option-value="id"
-          option-label="name"
-          :label="$t('formDialogInputMedicalBenefit')"
-          class="col-6"
-          :options="addrOptions.provinceOps"
-          lazy-rules
-        />
-        <q-select
-          id="select-province"
-          :dense="dense"
-          :readonly="readonly"
-          :outlined="readonly ? false : outlined"
-          :hide-dropdown-icon="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          emit-value
-          map-options
-          v-model="checkup.insuranceCompany"
-          option-value="id"
-          option-label="name"
-          :label="$t('formDialogInputInsuranceCompany')"
-          class="col-6"
-          :options="addrOptions.provinceOps"
-          lazy-rules
-        />
-        <VueDatePicker
-          utc
-          autoApply
-          :teleport="true"
-          v-model="checkup.coverageStartDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          :disabled="readonly"
-          class="col-3"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              id="input-birth-date"
-              :label="$t('formDialogInputCoverageStartDate')"
-              :dense="dense"
-              :outlined="readonly ? false : outlined"
-              :readonly="readonly"
-              :borderless="readonly"
-              :model-value="
-                checkup.coverageStartDate
-                  ? dateFormat(checkup.coverageStartDate)
-                  : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="positive"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="checkup.coverageStartDate && !readonly"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="checkup.coverageStartDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-        <VueDatePicker
-          utc
-          autoApply
-          :teleport="true"
-          v-model="checkup.coverageExpireDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          :disabled="readonly"
-          class="col-3"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              id="input-birth-date"
-              :label="$t('formDialogInputCoverageExpiretDate')"
-              :dense="dense"
-              :outlined="readonly ? false : outlined"
-              :readonly="readonly"
-              :borderless="readonly"
-              :model-value="
-                checkup.coverageExpireDate
-                  ? dateFormat(checkup.coverageExpireDate)
-                  : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="positive"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="checkup.coverageExpireDate && !readonly"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="checkup.coverageExpireDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-      </div>
-
-      <q-separator
-        v-if="separator"
-        class="col-12 q-mt-xl q-mb-md"
-        style="padding-block: 0.5px"
-      />
-    </q-tab-panel>
-  </q-tab-panels>
 </template>
 
 <style scoped>
diff --git a/src/components/03_customer-management/FormEmployeeOther.vue b/src/components/03_customer-management/FormEmployeeOther.vue
index b44f7582..23ba5454 100644
--- a/src/components/03_customer-management/FormEmployeeOther.vue
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@@ -89,7 +89,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           hide-bottom-space
           class="col-6"
           :label="$t('formDialogInputFamilyBirthPlace')"
-          v-model="employeeOther.birthPlace"
+          v-model="employeeOther.fatherBirthPlace"
         />
       </div>
       <div class="col-12" />
@@ -150,7 +150,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           hide-bottom-space
           class="col-6"
           :label="$t('formDialogInputFamilyBirthPlace')"
-          v-model="employeeOther.birthPlace"
+          v-model="employeeOther.motherBirthPlace"
         />
       </div>
     </div>
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index ded3f3d0..33ed96ac 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -1,23 +1,6 @@
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+import { onMounted } from 'vue';
 import { dateFormat } from 'src/utils/datetime';
-import useAddressStore, {
-  District,
-  Province,
-  SubDistrict,
-} from 'src/stores/address';
-
-const adrressStore = useAddressStore();
-
-const addrOptions = reactive<{
-  provinceOps: Province[];
-  districtOps: District[];
-  subDistrictOps: SubDistrict[];
-}>({
-  provinceOps: [],
-  districtOps: [],
-  subDistrictOps: [],
-});
 
 const passportType = defineModel<string>('passportType');
 const passportNumber = defineModel<string>('passportNumber');
@@ -28,6 +11,11 @@ const passportIssuingPlace = defineModel<string>('passportIssuingPlace');
 const previousPassportReference = defineModel<string>(
   'previousPassportReference',
 );
+const passportTypeOption =
+  defineModel<{ label: string; value: string }[]>('passportTypeOption');
+const passportIssuingCountryOption = defineModel<
+  { label: string; value: string }[]
+>('passportIssuingCountryOption');
 
 defineProps<{
   title?: string;
@@ -35,18 +23,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
-  typeCustomer?: string;
 }>();
-
-async function fetchProvince() {
-  const result = await adrressStore.fetchProvince();
-
-  if (result) addrOptions.provinceOps = result;
-}
-
-onMounted(async () => {
-  await fetchProvince();
-});
 </script>
 
 <template>
@@ -63,11 +40,11 @@ onMounted(async () => {
       emit-value
       map-options
       v-model="passportType"
-      option-value="id"
-      option-label="name"
+      option-value="value"
+      option-label="label"
       :label="$t('formDialogInputPassportType')"
       class="col-3"
-      :options="addrOptions.provinceOps"
+      :options="passportTypeOption"
       lazy-rules
       :rules="[
         (val: string) =>
@@ -130,11 +107,11 @@ onMounted(async () => {
       emit-value
       map-options
       v-model="passportIssuingCountry"
-      option-value="id"
-      option-label="nameEN"
+      option-value="value"
+      option-label="label"
       :label="$t('formDialogInputPassportCountry')"
       class="col-3"
-      :options="addrOptions.provinceOps"
+      :options="passportIssuingCountryOption"
       lazy-rules
       :rules="[
         (val: string) =>
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index 7e6418fd..70b7f1e6 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -28,6 +28,9 @@ const visaStayUntilDate = defineModel<Date | null>('visaStayUntilDate');
 const tm6Number = defineModel<string>('tm6Number');
 const entryDate = defineModel<Date | null>('entryDate');
 
+const visaTypeOption =
+  defineModel<{ label: string; value: string }[]>('visaTypeOption');
+
 defineProps<{
   title?: string;
   dense?: boolean;
@@ -62,11 +65,11 @@ onMounted(async () => {
       emit-value
       map-options
       v-model="visaType"
-      option-value="id"
-      option-label="name"
+      option-value="value"
+      option-label="label"
       :label="$t('formDialogInputVisaType')"
       class="col-3"
-      :options="addrOptions.provinceOps"
+      :options="visaTypeOption"
       lazy-rules
       :rules="[
         (val: string) =>
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index 5c742d91..0946d5fe 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -1,26 +1,15 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
 import { dateFormat } from 'src/utils/datetime';
-import useAddressStore, {
-  District,
-  Province,
-  SubDistrict,
-} from 'src/stores/address';
 import { EmployeeWorkCreate } from 'src/stores/employee/types';
 
-const adrressStore = useAddressStore();
-
-const addrOptions = reactive<{
-  provinceOps: Province[];
-  districtOps: District[];
-  subDistrictOps: SubDistrict[];
-}>({
-  provinceOps: [],
-  districtOps: [],
-  subDistrictOps: [],
-});
-
 const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
+const positionNameOption =
+  defineModel<{ label: string; value: string }[]>('positionNameOption');
+const jobTypeOption =
+  defineModel<{ label: string; value: string }[]>('jobTypeOption');
+const workplaceOption =
+  defineModel<{ label: string; value: string }[]>('workplaceOption');
 
 const tab = ref();
 
@@ -30,15 +19,8 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
-  typeCustomer?: string;
 }>();
 
-async function fetchProvince() {
-  const result = await adrressStore.fetchProvince();
-
-  if (result) addrOptions.provinceOps = result;
-}
-
 function addData() {
   employeeWork.value?.push({
     workEndDate: null,
@@ -66,308 +48,309 @@ function removeData(index: number) {
 }
 
 onMounted(async () => {
-  await fetchProvince();
   tab.value = 'tab0';
 });
 </script>
 
 <template>
-  <div class="bordered-b full-width">
-    <q-tabs
-      v-model="tab"
-      dense
-      class="text-grey"
-      active-class="active-tab"
-      indicator-color="transparent"
-      align="left"
-      :breakpoint="0"
-    >
-      <q-btn
-        @click="addData"
-        flat
-        class="app-text-muted"
-        style="background-color: var(--_body-bg)"
-        icon="mdi-plus"
-        padding="8px 8px"
-        :disable="readonly"
-        :color="$q.dark.isActive ? 'primary' : ''"
-        :class="tab !== 'tab0' ? 'bordered-r' : ''"
-      />
-      <q-tab
-        v-for="(tab, index) in employeeWork"
+  <div>
+    <div class="bordered-b full-width">
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-class="active-tab"
+        indicator-color="transparent"
+        align="left"
+        :breakpoint="0"
+      >
+        <q-btn
+          @click="addData"
+          flat
+          class="app-text-muted"
+          style="background-color: var(--_body-bg)"
+          icon="mdi-plus"
+          padding="8px 8px"
+          :disable="readonly"
+          :color="$q.dark.isActive ? 'primary' : ''"
+          :class="tab !== 'tab0' ? 'bordered-r' : ''"
+        />
+        <q-tab
+          v-for="(tab, index) in employeeWork"
+          v-bind:key="index"
+          :name="`tab${index}`"
+          class="content-tab text-capitalize"
+          style="z-index: 999"
+        >
+          <div class="text-weight-medium row items-center">
+            {{ $t('formDialogTabWork') + (index + 1) }}
+            <q-btn
+              v-if="!readonly && employeeWork?.length !== 1"
+              round
+              flat
+              id="closeDialog"
+              size="sm"
+              icon="mdi-close"
+              padding="xs"
+              color="red"
+              :class="{ dark: $q.dark.isActive }"
+              @click.stop="removeData(index)"
+            />
+          </div>
+        </q-tab>
+      </q-tabs>
+    </div>
+
+    <q-tab-panels v-model="tab" style="padding-top: 0px">
+      <q-tab-panel
+        v-for="(work, index) in employeeWork"
         v-bind:key="index"
         :name="`tab${index}`"
-        class="content-tab text-capitalize"
-        style="z-index: 999"
+        class="row col-12 items-start"
+        style="overflow: auto; height: 50vh"
       >
-        <div class="text-weight-medium row items-center">
-          {{ $t('formDialogTabWork') + (index + 1) }}
-          <q-btn
-            v-if="!readonly && employeeWork?.length !== 1"
-            round
-            flat
-            id="closeDialog"
-            size="sm"
-            icon="mdi-close"
-            padding="xs"
-            color="red"
-            :class="{ dark: $q.dark.isActive }"
-            @click.stop="removeData(index)"
+        <div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
+        <div class="col-9 row q-col-gutter-md">
+          <q-input
+            for="input-ownerName"
+            :dense="dense"
+            :outlined="!readonly"
+            :readonly="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            class="col-6"
+            :label="$t('formDialogInputOwnerName')"
+            v-model="work.ownerName"
           />
+          <q-select
+            id="select-positionName"
+            :dense="dense"
+            :readonly="readonly"
+            :outlined="readonly ? false : outlined"
+            :hide-dropdown-icon="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            emit-value
+            map-options
+            v-model="work.positionName"
+            option-value="value"
+            option-label="label"
+            :label="$t('formDialogInputJobPosition')"
+            class="col-6"
+            :options="positionNameOption"
+            lazy-rules
+          />
+          <q-select
+            id="select-jobType"
+            :dense="dense"
+            :readonly="readonly"
+            :outlined="readonly ? false : outlined"
+            :hide-dropdown-icon="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            emit-value
+            map-options
+            v-model="work.jobType"
+            option-value="value"
+            option-label="label"
+            :label="$t('formDialogInputJobType')"
+            class="col-6"
+            :options="jobTypeOption"
+            lazy-rules
+          />
+          <q-select
+            id="select-province"
+            :dense="dense"
+            :readonly="readonly"
+            :outlined="readonly ? false : outlined"
+            :hide-dropdown-icon="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            emit-value
+            map-options
+            v-model="work.workplace"
+            option-value="value"
+            option-label="label"
+            :label="$t('formDialogInputWorkPlace')"
+            class="col-6"
+            :options="workplaceOption"
+            lazy-rules
+          />
+          <q-input
+            for="input-workEndDate"
+            :label="$t('formDialogInputRemark')"
+            :dense="dense"
+            :outlined="!readonly"
+            :readonly="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            class="col-12"
+            v-model="work.remark"
+            type="textarea"
+          />
+          <VueDatePicker
+            id="date-picker-workEndDate"
+            utc
+            autoApply
+            :teleport="true"
+            v-model="work.workEndDate"
+            :locale="'th'"
+            :enableTimePicker="false"
+            :disabled="readonly"
+            class="col-6"
+          >
+            <template #year="{ value }">
+              {{ value + 543 }}
+            </template>
+            <template #trigger>
+              <q-input
+                id="input-birth-date"
+                :label="$t('formDialogInputWorkUntil')"
+                :dense="dense"
+                :outlined="readonly ? false : outlined"
+                :readonly="readonly"
+                :borderless="readonly"
+                :model-value="
+                  work.workEndDate ? dateFormat(work.workEndDate) : ''
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    size="xs"
+                    name="mdi-calendar-blank-outline"
+                    class="cursor-pointer"
+                    color="positive"
+                  />
+                </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="work.workEndDate && !readonly"
+                    name="mdi-close"
+                    class="cursor-pointer"
+                    size="xs"
+                    @click="work.workEndDate = undefined"
+                  />
+                </template>
+              </q-input>
+            </template>
+          </VueDatePicker>
+          <q-input
+            for="input-workPermitNo"
+            :dense="dense"
+            :outlined="!readonly"
+            :readonly="readonly"
+            :borderless="readonly"
+            hide-bottom-space
+            class="col-6"
+            :label="$t('formDialogInputWorkPermitNo')"
+            v-model="work.workPermitNo"
+          />
+          <VueDatePicker
+            id="date-picker-workPermitIssuDate"
+            utc
+            autoApply
+            :teleport="true"
+            v-model="work.workPermitIssuDate"
+            :locale="'th'"
+            :enableTimePicker="false"
+            :disabled="readonly"
+            class="col-6"
+          >
+            <template #year="{ value }">
+              {{ value + 543 }}
+            </template>
+            <template #trigger>
+              <q-input
+                id="input-birth-date"
+                :label="$t('formDialogInputWorkPermitIssueDate')"
+                :dense="dense"
+                :outlined="readonly ? false : outlined"
+                :readonly="readonly"
+                :borderless="readonly"
+                :model-value="
+                  work.workPermitIssuDate
+                    ? dateFormat(work.workPermitIssuDate)
+                    : ''
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    size="xs"
+                    name="mdi-calendar-blank-outline"
+                    class="cursor-pointer"
+                    color="positive"
+                  />
+                </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="work.workPermitIssuDate && !readonly"
+                    name="mdi-close"
+                    class="cursor-pointer"
+                    size="xs"
+                    @click="work.workPermitIssuDate = undefined"
+                  />
+                </template>
+              </q-input>
+            </template>
+          </VueDatePicker>
+          <VueDatePicker
+            id="date-picker-workPermitExpireDate"
+            utc
+            autoApply
+            :teleport="true"
+            v-model="work.workPermitExpireDate"
+            :locale="'th'"
+            :enableTimePicker="false"
+            :disabled="readonly"
+            class="col-6"
+          >
+            <template #year="{ value }">
+              {{ value + 543 }}
+            </template>
+            <template #trigger>
+              <q-input
+                id="input-birth-date"
+                :label="$t('formDialogInputWorkPermitExpireDate')"
+                :dense="dense"
+                :outlined="readonly ? false : outlined"
+                :readonly="readonly"
+                :borderless="readonly"
+                :model-value="
+                  work.workPermitExpireDate
+                    ? dateFormat(work.workPermitExpireDate)
+                    : ''
+                "
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    size="xs"
+                    name="mdi-calendar-blank-outline"
+                    class="cursor-pointer"
+                    color="positive"
+                  />
+                </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="work.workPermitExpireDate && !readonly"
+                    name="mdi-close"
+                    class="cursor-pointer"
+                    size="xs"
+                    @click="work.workPermitExpireDate = undefined"
+                  />
+                </template>
+              </q-input>
+            </template>
+          </VueDatePicker>
         </div>
-      </q-tab>
-    </q-tabs>
+
+        <q-separator
+          v-if="separator"
+          class="col-12 q-mt-xl q-mb-md"
+          style="padding-block: 0.5px"
+        />
+      </q-tab-panel>
+    </q-tab-panels>
   </div>
-
-  <q-tab-panels v-model="tab" style="padding-top: 0px">
-    <q-tab-panel
-      v-for="(work, index) in employeeWork"
-      v-bind:key="index"
-      :name="`tab${index}`"
-      class="row col-12 items-start"
-      style="overflow: auto; height: 50vh"
-    >
-      <div class="col-3 app-text-muted">• {{ $t(`workHistory`) }}</div>
-      <div class="col-9 row q-col-gutter-md">
-        <q-input
-          for="input-ownerName"
-          :dense="dense"
-          :outlined="!readonly"
-          :readonly="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          class="col-6"
-          :label="$t('formDialogInputOwnerName')"
-          v-model="work.ownerName"
-        />
-        <q-select
-          id="select-positionName"
-          :dense="dense"
-          :readonly="readonly"
-          :outlined="readonly ? false : outlined"
-          :hide-dropdown-icon="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          emit-value
-          map-options
-          v-model="work.positionName"
-          option-value="id"
-          option-label="name"
-          :label="$t('formDialogInputJobPosition')"
-          class="col-6"
-          :options="addrOptions.provinceOps"
-          lazy-rules
-        />
-        <q-select
-          id="select-jobType"
-          :dense="dense"
-          :readonly="readonly"
-          :outlined="readonly ? false : outlined"
-          :hide-dropdown-icon="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          emit-value
-          map-options
-          v-model="work.jobType"
-          option-value="id"
-          option-label="nameEN"
-          :label="$t('formDialogInputJobType')"
-          class="col-6"
-          :options="addrOptions.provinceOps"
-          lazy-rules
-        />
-        <q-select
-          id="select-province"
-          :dense="dense"
-          :readonly="readonly"
-          :outlined="readonly ? false : outlined"
-          :hide-dropdown-icon="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          emit-value
-          map-options
-          v-model="work.workplace"
-          option-value="id"
-          option-label="nameEN"
-          :label="$t('formDialogInputWorkPlace')"
-          class="col-6"
-          :options="addrOptions.provinceOps"
-          lazy-rules
-        />
-        <q-input
-          for="input-workEndDate"
-          :label="$t('formDialogInputRemark')"
-          :dense="dense"
-          :outlined="!readonly"
-          :readonly="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          class="col-12"
-          v-model="work.remark"
-          type="textarea"
-        />
-        <VueDatePicker
-          id="date-picker-workEndDate"
-          utc
-          autoApply
-          :teleport="true"
-          v-model="work.workEndDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          :disabled="readonly"
-          class="col-6"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              id="input-birth-date"
-              :label="$t('formDialogInputWorkUntil')"
-              :dense="dense"
-              :outlined="readonly ? false : outlined"
-              :readonly="readonly"
-              :borderless="readonly"
-              :model-value="
-                work.workEndDate ? dateFormat(work.workEndDate) : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="positive"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="work.workEndDate && !readonly"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="work.workEndDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-        <q-input
-          for="input-workPermitNo"
-          :dense="dense"
-          :outlined="!readonly"
-          :readonly="readonly"
-          :borderless="readonly"
-          hide-bottom-space
-          class="col-6"
-          :label="$t('formDialogInputWorkPermitNo')"
-          v-model="work.workPermitNo"
-        />
-        <VueDatePicker
-          id="date-picker-workPermitIssuDate"
-          utc
-          autoApply
-          :teleport="true"
-          v-model="work.workPermitIssuDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          :disabled="readonly"
-          class="col-6"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              id="input-birth-date"
-              :label="$t('formDialogInputWorkPermitIssueDate')"
-              :dense="dense"
-              :outlined="readonly ? false : outlined"
-              :readonly="readonly"
-              :borderless="readonly"
-              :model-value="
-                work.workPermitIssuDate
-                  ? dateFormat(work.workPermitIssuDate)
-                  : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="positive"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="work.workPermitIssuDate && !readonly"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="work.workPermitIssuDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-        <VueDatePicker
-          id="date-picker-workPermitExpireDate"
-          utc
-          autoApply
-          :teleport="true"
-          v-model="work.workPermitExpireDate"
-          :locale="'th'"
-          :enableTimePicker="false"
-          :disabled="readonly"
-          class="col-6"
-        >
-          <template #year="{ value }">
-            {{ value + 543 }}
-          </template>
-          <template #trigger>
-            <q-input
-              id="input-birth-date"
-              :label="$t('formDialogInputWorkPermitExpireDate')"
-              :dense="dense"
-              :outlined="readonly ? false : outlined"
-              :readonly="readonly"
-              :borderless="readonly"
-              :model-value="
-                work.workPermitExpireDate
-                  ? dateFormat(work.workPermitExpireDate)
-                  : ''
-              "
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  size="xs"
-                  name="mdi-calendar-blank-outline"
-                  class="cursor-pointer"
-                  color="positive"
-                />
-              </template>
-              <template v-slot:append>
-                <q-icon
-                  v-if="work.workPermitExpireDate && !readonly"
-                  name="mdi-close"
-                  class="cursor-pointer"
-                  size="xs"
-                  @click="work.workPermitExpireDate = undefined"
-                />
-              </template>
-            </q-input>
-          </template>
-        </VueDatePicker>
-      </div>
-
-      <q-separator
-        v-if="separator"
-        class="col-12 q-mt-xl q-mb-md"
-        style="padding-block: 0.5px"
-      />
-    </q-tab-panel>
-  </q-tab-panels>
 </template>
 
 <style scoped>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index f5936344..b0b95298 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -59,6 +59,7 @@ const {
   createBranch,
   deleteBranchById,
   editBranchById,
+  fetchListBranch,
 } = userCustomer;
 const employeeStore = useEmployeeStore();
 const formData = ref<CustomerCreate>({
@@ -107,6 +108,7 @@ const fieldSelectedCustomer = ref<{ label: string; value: string }>({
 
 const formDataEmployeeSameAddr = ref(false);
 const formDataEmployeeTab = ref('personalInfo');
+const employeeOwnerBranchOption = ref();
 const formDataEmployee = ref<EmployeeCreate>({
   image: null,
   customerBranchId: '',
@@ -173,17 +175,18 @@ const formDataEmployee = ref<EmployeeCreate>({
     },
   ],
   employeeOtherInfo: {
-    birthPlace: '',
     citizenId: '',
     fatherFirstName: '',
     fatherLastName: '',
     fatherFirstNameEN: '',
     fatherLastNameEN: '',
+    fatherBirthPlace: '',
 
     motherFirstName: '',
     motherLastName: '',
     motherFirstNameEN: '',
     motherLastNameEN: '',
+    motherBirthPlace: '',
   },
 });
 
@@ -386,6 +389,83 @@ function clearForm() {
   };
 }
 
+function clearFormEmployee() {
+  formDataEmployee.value = {
+    image: null,
+    customerBranchId: '',
+    nrcNo: '',
+    dateOfBirth: null,
+    gender: '',
+    nationality: '',
+    firstName: '',
+    firstNameEN: '',
+    lastName: '',
+    lastNameEN: '',
+    addressEN: '',
+    address: '',
+    zipCode: '',
+    passportType: '',
+    passportNumber: '',
+    passportIssueDate: null,
+    passportExpiryDate: null,
+    passportIssuingCountry: '',
+    passportIssuingPlace: '',
+    previousPassportReference: '',
+    visaType: '',
+    visaNumber: '',
+    visaIssueDate: null,
+    visaExpiryDate: null,
+    visaIssuingPlace: '',
+    visaStayUntilDate: null,
+    tm6Number: '',
+    entryDate: null,
+    workerStatus: '',
+    subDistrictId: '',
+    districtId: '',
+    provinceId: '',
+    employeeWork: [
+      {
+        workEndDate: null,
+        workPermitExpireDate: null,
+        workPermitIssuDate: null,
+        workPermitNo: '',
+        workplace: '',
+        jobType: '',
+        positionName: '',
+        ownerName: '',
+        remark: '',
+      },
+    ],
+    employeeCheckup: [
+      {
+        coverageExpireDate: null,
+        coverageStartDate: null,
+        insuranceCompany: '',
+        medicalBenefitScheme: '',
+        remark: '',
+        hospitalName: '',
+        provinceId: '',
+        checkupResult: '',
+        checkupType: '',
+      },
+    ],
+    employeeOtherInfo: {
+      citizenId: '',
+      fatherFirstName: '',
+      fatherLastName: '',
+      fatherFirstNameEN: '',
+      fatherLastNameEN: '',
+      fatherBirthPlace: '',
+
+      motherFirstName: '',
+      motherLastName: '',
+      motherFirstNameEN: '',
+      motherLastNameEN: '',
+      motherBirthPlace: '',
+    },
+  };
+}
+
 function deleteCustomerById(id: string) {
   dialog({
     color: 'negative',
@@ -447,6 +527,8 @@ async function onSubmit() {
     });
     const resultList = await employeeStore.fetchList();
     if (resultList) listEmployee.value = resultList.result;
+    clearFormEmployee();
+    dialogEmployee.value = false;
   }
 }
 
@@ -557,6 +639,25 @@ function undo() {
   infoDrawerEdit.value = false;
 }
 
+async function employeeFilterOwnerBranch(
+  val: string,
+  update: (...args: unknown[]) => void,
+) {
+  update(async () => {
+    const result = await fetchListBranch({
+      includeCustomer: true,
+      query: val,
+      pageSize: 30,
+    });
+    if (result) {
+      employeeStore.ownerOption = result.result.map((i) => ({
+        label: i.code,
+        value: i.id,
+      }));
+    }
+  });
+}
+
 async function assignFormData(data: Customer & { branch: CustomerBranch[] }) {
   formData.value = {
     status: 'CREATED',
@@ -630,6 +731,10 @@ onMounted(async () => {
   }
 
   if (resultListEmployee) listEmployee.value = resultListEmployee.result;
+
+  const resultOption = await fetch('/option/option.json');
+  employeeStore.globalOption = await resultOption.json();
+  console.log(employeeStore.globalOption);
 });
 
 watch(locale, () => {
@@ -742,6 +847,7 @@ watch(fieldSelectedCustomer, async () => {
         <div class="row q-py-md">
           <div class="col">
             <q-select
+              v-if="selectorLabel === 'EMPLOYER'"
               v-model="fieldSelectedCustomer"
               style="width: 150px"
               outlined
@@ -1202,8 +1308,10 @@ watch(fieldSelectedCustomer, async () => {
         dense
         outlined
         separator
+        :employee-owner-option="employeeStore.ownerOption"
         v-model:customer-branch-id="formDataEmployee.customerBranchId"
         v-model:nrc-no="formDataEmployee.nrcNo"
+        @filter-owner-branch="employeeFilterOwnerBranch"
       />
     </template>
 
@@ -1231,12 +1339,22 @@ watch(fieldSelectedCustomer, async () => {
         dense
         outlined
         v-model:employee-checkup="formDataEmployee.employeeCheckup"
+        v-model:checkup-type-option="employeeStore.globalOption.tha.nationality"
+        v-model:medical-benefit-option="
+          employeeStore.globalOption.tha.typeInsurance
+        "
+        v-model:insurance-company-option="
+          employeeStore.globalOption.tha.insurancePlace
+        "
       />
       <FormEmployeeWorkHistory
         v-if="formDataEmployeeTab === 'workHistory'"
         dense
         outlined
         v-model:employee-work="formDataEmployee.employeeWork"
+        v-model:position-name-option="employeeStore.globalOption.tha.position"
+        v-model:job-type-option="employeeStore.globalOption.tha.businessType"
+        v-model:workplace-option="employeeStore.globalOption.tha.area"
       />
       <FormEmployeeOther
         v-if="
@@ -1258,13 +1376,19 @@ watch(fieldSelectedCustomer, async () => {
         v-model:passport-number="formDataEmployee.passportNumber"
         v-model:passport-issue-date="formDataEmployee.passportIssueDate"
         v-model:passport-expiry-date="formDataEmployee.passportExpiryDate"
+        v-model:passport-issuing-place="formDataEmployee.passportIssuingPlace"
         v-model:passport-issuing-country="
           formDataEmployee.passportIssuingCountry
         "
-        v-model:passport-issuing-place="formDataEmployee.passportIssuingCountry"
         v-model:previous-passport-reference="
           formDataEmployee.previousPassportReference
         "
+        v-model:passport-type-option="
+          employeeStore.globalOption.tha.nationality
+        "
+        v-model:passport-issuing-country-option="
+          employeeStore.globalOption.tha.nationality
+        "
       />
       <FormEmployeeVisa
         v-if="formDataEmployeeTab === 'personalInfo'"
@@ -1279,6 +1403,7 @@ watch(fieldSelectedCustomer, async () => {
         v-model:visa-stay-until-date="formDataEmployee.visaStayUntilDate"
         v-model:tm6-number="formDataEmployee.tm6Number"
         v-model:entry-date="formDataEmployee.entryDate"
+        v-model:visa-type-option="employeeStore.globalOption.tha.nationality"
       />
     </template>
   </FormDialog>
diff --git a/src/stores/employee/index.ts b/src/stores/employee/index.ts
index 0eada4e7..4306f85f 100644
--- a/src/stores/employee/index.ts
+++ b/src/stores/employee/index.ts
@@ -7,6 +7,9 @@ import axios from 'axios';
 
 const useEmployeeStore = defineStore('api-employee', () => {
   const data = ref<Pagination<Employee[]>>();
+  const globalOption = ref();
+  const ownerOption = ref<{ label: string; value: string }[]>();
+
   async function fetchList(
     opts?: {
       page?: number;
@@ -136,6 +139,8 @@ const useEmployeeStore = defineStore('api-employee', () => {
 
   return {
     data,
+    globalOption,
+    ownerOption,
 
     fetchList,
     create,