From 36793f4741ec918d4a71fbfdf5d5e8d96f7bc642 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 6 Aug 2024 04:51:17 +0000
Subject: [PATCH] fix(03): employee form

---
 .../FormEmployeeHealthCheck.vue               | 126 +--
 .../FormEmployeeOther.vue                     |  74 +-
 .../FormEmployeeWorkHistory.vue               | 803 ++++++++----------
 src/pages/03_customer-management/MainPage.vue | 108 ++-
 4 files changed, 499 insertions(+), 612 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index e631ba1d..f497ea29 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -46,7 +46,6 @@ withDefaults(
     dense?: boolean;
     outlined?: boolean;
     readonly?: boolean;
-    separator?: boolean;
     typeCustomer?: string;
     prefixId: string;
     showBtnSave?: boolean;
@@ -57,7 +56,7 @@ withDefaults(
 );
 
 defineEmits<{
-  (e: 'save', id: string): void;
+  (e: 'save', index: number): void;
 }>();
 
 async function fetchProvince() {
@@ -73,7 +72,8 @@ async function fetchProvince() {
 }
 
 function addCheckup() {
-  const canAdd = checkTabBeforeAdd(employeeCheckup.value || []);
+  // const canAdd = checkTabBeforeAdd(employeeCheckup.value || []);
+  const canAdd = true;
   if (canAdd) {
     employeeCheckup.value?.push({
       coverageExpireDate: null,
@@ -136,72 +136,6 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
 </script>
 
 <template>
-  <!-- <div class="full-height full-width column">
-    <div class="bordered-b full-width row no-wrap">
-      <q-btn
-        @click="addData"
-        flat
-        class="app-text-muted"
-        style="background-color: var(--_body-bg); min-width: 40px"
-        icon="mdi-plus"
-        padding="8px 8px"
-        :disable="readonly || !checkTabBeforeAdd(employeeCheckup || [])"
-        :color="$q.dark.isActive ? 'primary' : ''"
-        :class="tab !== 'tab0' ? 'bordered-r' : ''"
-      />
-      <q-tabs
-        inline-label
-        mobile-arrows
-        v-model="tab"
-        dense
-        class="text-grey col"
-        active-class="active-tab"
-        indicator-color="transparent"
-        align="left"
-        :breakpoint="0"
-      >
-        <q-tab
-          v-for="(tab, index) in employeeCheckup"
-          v-bind:key="index"
-          :name="`tab${index}`"
-          class="content-tab text-capitalize"
-        >
-          <div class="text-weight-medium row items-center no-wrap">
-            {{ $t('formDialogTabCheckup') + (index + 1) }}
-            <q-btn
-              v-if="!readonly && employeeCheckup?.length !== 1"
-              round
-              flat
-              :id="`${prefixId}-closeDialog`"
-              size="sm"
-              icon="mdi-close"
-              padding="xs"
-              color="red"
-              :class="{ dark: $q.dark.isActive }"
-              @click.stop="
-                async () => {
-                  if (employeeCheckup?.[index].statusSave) {
-                    $emit('remove', index);
-                  } else {
-                    removeData(index);
-                  }
-                }
-              "
-            />
-          </div>
-        </q-tab>
-      </q-tabs>
-    </div> -->
-
-  <!-- <q-tab-panels v-model="tab" style="padding-top: 0px" class="col">
-      <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"
-      > -->
-
   <div class="row col-12">
     <div class="col-12 q-pb-sm text-weight-bold text-body1">
       <q-icon
@@ -213,24 +147,40 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         style="background-color: var(--surface-3)"
       />
       {{ $t(`formDialogTitleHealthCheck`) }}
-      <q-btn icon="mdi-plus" flat dense @click="addCheckup" v-if="!readonly" />
+      <q-btn
+        rounded
+        color="primary"
+        class="q-ml-md"
+        icon="mdi-plus"
+        flat
+        dense
+        @click="addCheckup"
+        v-if="!readonly"
+      />
     </div>
 
     <div
       v-for="(checkup, index) in employeeCheckup"
       v-bind:key="index"
       class="col-12 row q-col-gutter-sm"
+      :class="{ 'q-pt-lg': index !== 0 }"
     >
-      <span class="col-12 app-text-muted-2 flex justify-between items-center">
+      <q-separator
+        v-if="index > 0"
+        class="full-width"
+        style="padding-block: 0.1px"
+        spaced="lg"
+      />
+      <span class="col-12 flex justify-between items-center">
         {{ `ครั้งที่ ${index + 1}` }}
         <q-btn
           v-if="!readonly"
           dense
           unelevated
           id="save-basic-info"
+          :label="$t('save')"
           color="primary"
           class="q-px-md rounded"
-          :label="$t('save')"
           @click="$emit('save', index)"
         />
       </span>
@@ -519,38 +469,8 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
           </q-item>
         </template>
       </q-select>
-
-      <!-- <div class="col-12 row justify-end" style="min-height: 50px">
-        <q-btn
-          v-if="!readonly && showBtnSave"
-          dense
-          unelevated
-          id="save-basic-info"
-          color="primary"
-          class="q-px-md"
-          :label="$t('save')"
-          @click="$emit('save', index)"
-        />
-      </div> -->
     </div>
   </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> -->
 </template>
 
-<style scoped>
-.active-tab {
-  color: var(--brand-1);
-  border-left: 1px solid var(--border-color);
-  border-right: 1px solid var(--border-color);
-  margin-bottom: -1.5px;
-  border-bottom: 3px solid var(--surface-1);
-}
-</style>
+<style scoped></style>
diff --git a/src/components/03_customer-management/FormEmployeeOther.vue b/src/components/03_customer-management/FormEmployeeOther.vue
index 3e132d2d..52579a1b 100644
--- a/src/components/03_customer-management/FormEmployeeOther.vue
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@@ -1,31 +1,33 @@
 <script setup lang="ts">
 import { EmployeeOtherCreate } from 'stores/employee/types';
 
-withDefaults(
-  defineProps<{
-    dense?: boolean;
-    outlined?: boolean;
-    readonly?: boolean;
-    separator?: boolean;
-    employee?: boolean;
-    prefixId: string;
-    showBtnSave: boolean;
-  }>(),
-  {
-    showBtnSave: false,
-  },
-);
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+  employee?: boolean;
+  prefixId: string;
+}>();
+
 const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
 </script>
 <template>
   <div class="col-12" v-if="employeeOther">
-    <div class="col-12 app-text-muted row items-center q-mb-md">
-      • {{ $t('formDialogTitleFamilyHistory') }}
+    <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-human-male-female-child"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t('formDialogTitleFamilyHistory') }}
     </div>
 
     <div class="col-12 row q-col-gutter-y-md">
-      <div v-if="$q.screen.gt.sm" class="col-3 q-pl-xl"></div>
-      <div class="col-md-9 col-12 row q-col-gutter-md">
+      <div class="col-12 row q-col-gutter-md">
         <q-input
           lazy-rules="ondemand"
           :for="`${prefixId}-input-citizen-id`"
@@ -38,13 +40,11 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.citizenId"
         />
       </div>
-      <div
-        class="col-md-3 col-12 app-text-muted"
-        :class="{ 'q-pl-xl': $q.screen.gt.sm }"
-      >
+      <div class="col-12 app-text-muted-2">
+        <q-icon size="xs" class="q-mr-xs" name="mdi-human-male" />
         {{ $t('formDialogTitleFamilyHistoryDad') }}
       </div>
-      <div class="col-md-9 col-12 row q-col-gutter-md">
+      <div class="col-12 row q-col-gutter-md">
         <q-input
           lazy-rules="ondemand"
           :for="`${prefixId}-input-father-first-name`"
@@ -101,14 +101,12 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.fatherBirthPlace"
         />
       </div>
-      <div class="col-12" />
-      <div
-        class="col-md-3 col-12 app-text-muted"
-        :class="{ 'q-pl-xl': $q.screen.gt.sm }"
-      >
+
+      <div class="col-12 app-text-muted-2">
+        <q-icon size="xs" class="q-mr-xs" name="mdi-human-female" />
         {{ $t('formDialogTitleFamilyHistoryMom') }}
       </div>
-      <div class="col-md-9 col-12 row q-col-gutter-md">
+      <div class="col-12 row q-col-gutter-md">
         <q-input
           lazy-rules="ondemand"
           :for="`${prefixId}-input-mother-first-name`"
@@ -165,24 +163,6 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           v-model="employeeOther.motherBirthPlace"
         />
       </div>
-
-      <div class="col-12 row justify-end" style="min-height: 50px">
-        <q-btn
-          v-if="!readonly && showBtnSave"
-          dense
-          unelevated
-          id="save-basic-info"
-          color="primary"
-          class="q-px-md"
-          :label="$t('save')"
-          @click="$emit('save')"
-        />
-      </div>
     </div>
   </div>
-  <q-separator
-    v-if="separator"
-    class="col-12 q-mb-md"
-    style="padding-block: 0.5px; margin-top: 32px"
-  />
 </template>
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index aacea442..4e2141af 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -23,23 +23,21 @@ const workplaceOption = defineModel<{ label: string; value: string }[]>(
 
 const tab = ref();
 
-withDefaults(
-  defineProps<{
-    title?: string;
-    dense?: boolean;
-    outlined?: boolean;
-    readonly?: boolean;
-    separator?: boolean;
-    prefixId: string;
-    showBtnSave: boolean;
-  }>(),
-  {
-    showBtnSave: false,
-  },
-);
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  prefixId: string;
+}>();
+
+defineEmits<{
+  (e: 'save', index: number): void;
+}>();
 
 function addData() {
-  const canAdd = checkTabBeforeAdd(employeeWork.value || []);
+  // const canAdd = checkTabBeforeAdd(employeeWork.value || []);
+  const canAdd = true;
   if (canAdd) {
     employeeWork.value?.push({
       workEndDate: null,
@@ -94,427 +92,372 @@ const workplaceFilter = selectFilterOptionRefMod(
 </script>
 
 <template>
-  <div class="full-height full-width column">
-    <div class="bordered-b full-width row no-wrap">
-      <q-btn
-        @click="addData"
+  <div class="row col-12">
+    <div class="col-12 q-pb-sm text-weight-bold text-body1">
+      <q-icon
         flat
-        class="app-text-muted"
-        style="background-color: var(--_body-bg); min-width: 40px"
-        icon="mdi-plus"
-        padding="8px 8px"
-        :disable="readonly || !checkTabBeforeAdd(employeeWork || [])"
-        :color="$q.dark.isActive ? 'primary' : ''"
-        :class="tab !== 'tab0' ? 'bordered-r' : ''"
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-briefcase"
+        style="background-color: var(--surface-3)"
       />
-      <q-tabs
-        inline-label
-        mobile-arrows
-        v-model="tab"
+      {{ $t(`workHistory`) }}
+      <q-btn
+        rounded
+        color="primary"
+        class="q-ml-md"
+        icon="mdi-plus"
+        flat
         dense
-        class="text-grey col"
-        active-class="active-tab"
-        indicator-color="transparent"
-        align="left"
-        :breakpoint="0"
-      >
-        <q-tab
-          v-for="(tab, index) in employeeWork"
-          v-bind:key="index"
-          :name="`tab${index}`"
-          class="content-tab text-capitalize"
-        >
-          <div class="text-weight-medium row items-center no-wrap">
-            {{ $t('formDialogTabWork') + (index + 1) }}
-            <q-btn
-              v-if="!readonly && employeeWork?.length !== 1"
-              round
-              flat
-              :id="`${prefixId}-close-dialog`"
-              size="sm"
-              icon="mdi-close"
-              padding="xs"
-              color="red"
-              :class="{ dark: $q.dark.isActive }"
-              @click.stop="
-                () => {
-                  if (employeeWork?.[index].statusSave) {
-                    $emit('remove', index);
-                  } else {
-                    removeData(index);
-                  }
-                }
-              "
-            />
-          </div>
-        </q-tab>
-      </q-tabs>
+        @click="addData"
+        v-if="!readonly"
+      />
     </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"
-      >
-        <div class="col-md-3 col-12 app-text-muted">
-          • {{ $t(`workHistory`) }}
-        </div>
-        <div class="col-md-9 col-12 row q-col-gutter-md">
-          <q-input
-            lazy-rules="ondemand"
-            :for="`${prefixId}-input-owner-name`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-6"
-            :label="$t('formDialogInputOwnerName')"
-            v-model="work.ownerName"
-          />
-          <q-select
-            outlined
-            clearable
-            use-input
-            fill-input
-            emit-value
-            map-options
-            hide-selected
-            hide-bottom-space
-            class="col-6"
-            input-debounce="0"
-            option-value="value"
-            option-label="label"
-            lazy-rules="ondemand"
-            v-model="work.positionName"
-            :dense="dense"
-            :readonly="readonly"
-            :options="positionNameOptions"
-            :hide-dropdown-icon="readonly"
-            :for="`${prefixId}-select-position-name`"
-            :label="$t('formDialogInputJobPosition')"
-            @filter="positionNameFilter"
-          >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  {{ $t('noResults') }}
-                </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
-            class="col-6"
-            input-debounce="0"
-            option-label="label"
-            option-value="value"
-            lazy-rules="ondemand"
-            v-model="work.jobType"
-            :dense="dense"
-            :readonly="readonly"
-            :options="jobTypeOptions"
-            :hide-dropdown-icon="readonly"
-            :for="`${prefixId}-select-job-type`"
-            :label="$t('formDialogInputJobType')"
-            @filter="jobTypeFilter"
-          >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  {{ $t('noResults') }}
-                </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
-            class="col-6"
-            input-debounce="0"
-            lazy-rules="ondemand"
-            option-label="label"
-            option-value="value"
-            v-model="work.workplace"
-            :dense="dense"
-            :readonly="readonly"
-            :options="workplaceOptions"
-            :hide-dropdown-icon="readonly"
-            :for="`${prefixId}-select-province`"
-            :label="$t('formDialogInputWorkPlace')"
-            @filter="workplaceFilter"
-          >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey">
-                  {{ $t('noResults') }}
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-          <q-input
-            lazy-rules="ondemand"
-            :for="`${prefixId}-input-work-end-date`"
-            :label="$t('formDialogInputRemark')"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-12"
-            v-model="work.remark"
-            type="textarea"
-          />
-          <VueDatePicker
-            :id="`${prefixId}-date-picker-work-end-date`"
-            utc
-            autoApply
-            v-model="work.workEndDate"
-            :teleport="true"
-            :dark="$q.dark.isActive"
-            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-            :enableTimePicker="false"
-            :disabled="readonly"
-            class="col-6"
-          >
-            <template #year="{ value }">
-              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-            </template>
-            <template #trigger>
-              <q-input
-                lazy-rules="ondemand"
-                :id="`${prefixId}-input-birth-date`"
-                :label="$t('formDialogInputWorkUntil')"
-                :dense="dense"
-                outlined
-                :readonly="readonly"
-                placeholder="DD/MM/YYYY"
-                :mask="readonly ? '' : '##/##/####'"
-                :model-value="
-                  work.workEndDate
-                    ? readonly
-                      ? dateFormat(work.workEndDate)
-                      : dateFormat(work.workEndDate, false, false, true)
-                    : undefined
-                "
-                @update:model-value="
-                  (v) => {
-                    if (v && v.toString().length === 10) {
-                      work.workEndDate = parseAndFormatDate(v, locale);
-                    }
-                  }
-                "
-              >
-                <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-circle"
-                    class="cursor-pointer app-text-muted"
-                    size="sm"
-                    @click.stop="work.workEndDate = undefined"
-                  />
-                </template>
-              </q-input>
-            </template>
-          </VueDatePicker>
-          <q-input
-            lazy-rules="ondemand"
-            :for="`${prefixId}-input-work-permit-no`"
-            :dense="dense"
-            outlined
-            :readonly="readonly"
-            hide-bottom-space
-            class="col-6"
-            :label="$t('formDialogInputWorkPermitNo')"
-            v-model="work.workPermitNo"
-          />
-          <VueDatePicker
-            :id="`${prefixId}-date-picker-work-permit-issu-date`"
-            utc
-            autoApply
-            v-model="work.workPermitIssuDate"
-            :teleport="true"
-            :dark="$q.dark.isActive"
-            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-            :enableTimePicker="false"
-            :disabled="readonly"
-            class="col-6"
-          >
-            <template #year="{ value }">
-              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-            </template>
-            <template #trigger>
-              <q-input
-                lazy-rules="ondemand"
-                :id="`${prefixId}-input-birth-date`"
-                :label="$t('formDialogInputWorkPermitIssueDate')"
-                :dense="dense"
-                outlined
-                :readonly="readonly"
-                placeholder="DD/MM/YYYY"
-                :mask="readonly ? '' : '##/##/####'"
-                :model-value="
-                  work.workPermitIssuDate
-                    ? readonly
-                      ? dateFormat(work.workPermitIssuDate)
-                      : dateFormat(work.workPermitIssuDate, false, false, true)
-                    : undefined
-                "
-                @update:model-value="
-                  (v) => {
-                    if (v && v.toString().length === 10) {
-                      work.workPermitIssuDate = parseAndFormatDate(v, locale);
-                    }
-                  }
-                "
-              >
-                <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-circle"
-                    class="cursor-pointer app-text-muted"
-                    size="sm"
-                    @click.stop="work.workPermitIssuDate = undefined"
-                  />
-                </template>
-              </q-input>
-            </template>
-          </VueDatePicker>
-          <VueDatePicker
-            :id="`${prefixId}-date-picker-work-permit-expire-date`"
-            utc
-            autoApply
-            v-model="work.workPermitExpireDate"
-            :teleport="true"
-            :dark="$q.dark.isActive"
-            :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-            :enableTimePicker="false"
-            :disabled="readonly"
-            class="col-6"
-          >
-            <template #year="{ value }">
-              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-            </template>
-            <template #trigger>
-              <q-input
-                lazy-rules="ondemand"
-                :id="`${prefixId}-input-birth-date`"
-                :label="$t('formDialogInputWorkPermitExpireDate')"
-                :dense="dense"
-                outlined
-                :readonly="readonly"
-                placeholder="DD/MM/YYYY"
-                :mask="readonly ? '' : '##/##/####'"
-                :model-value="
-                  work.workPermitExpireDate
-                    ? readonly
-                      ? dateFormat(work.workPermitExpireDate)
-                      : dateFormat(
-                          work.workPermitExpireDate,
-                          false,
-                          false,
-                          true,
-                        )
-                    : undefined
-                "
-                @update:model-value="
-                  (v) => {
-                    if (v && v.toString().length === 10) {
-                      work.workPermitExpireDate = parseAndFormatDate(v, locale);
-                    }
-                  }
-                "
-              >
-                <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-circle"
-                    class="cursor-pointer app-text-muted"
-                    size="sm"
-                    @click.stop="work.workPermitExpireDate = undefined"
-                  />
-                </template>
-              </q-input>
-            </template>
-          </VueDatePicker>
-
-          <div class="col-12 row justify-end" style="min-height: 50px">
-            <q-btn
-              v-if="!readonly && showBtnSave"
-              dense
-              unelevated
-              id="save-basic-info"
-              color="primary"
-              class="q-px-md"
-              :label="$t('save')"
-              @click="$emit('save', index)"
-            />
-          </div>
-        </div>
-
-        <q-separator
-          v-if="separator"
-          class="col-12 q-mt-xl q-mb-md"
-          style="padding-block: 0.5px"
+    <div
+      v-for="(work, index) in employeeWork"
+      v-bind:key="index"
+      class="col-12 row q-col-gutter-sm"
+      :class="{ 'q-pt-lg': index !== 0 }"
+    >
+      <q-separator
+        v-if="index > 0"
+        class="full-width"
+        style="padding-block: 0.1px"
+        spaced="lg"
+      />
+      <span class="col-12 flex justify-between items-center">
+        {{ `ครั้งที่ ${index + 1}` }}
+        <q-btn
+          v-if="!readonly"
+          dense
+          unelevated
+          id="save-basic-info"
+          :label="$t('save')"
+          color="primary"
+          class="q-px-md rounded"
+          @click="$emit('save', index)"
         />
-      </q-tab-panel>
-    </q-tab-panels>
+      </span>
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        class="col-5"
+        input-debounce="0"
+        option-label="label"
+        option-value="value"
+        lazy-rules="ondemand"
+        v-model="work.jobType"
+        :dense="dense"
+        :readonly="readonly"
+        :options="jobTypeOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-job-type`"
+        :label="$t('formDialogInputJobType')"
+        @filter="jobTypeFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </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
+        class="col-6"
+        input-debounce="0"
+        lazy-rules="ondemand"
+        option-label="label"
+        option-value="value"
+        v-model="work.workplace"
+        :dense="dense"
+        :readonly="readonly"
+        :options="workplaceOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-province`"
+        :label="$t('formDialogInputWorkPlace')"
+        @filter="workplaceFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-work-end-date`"
+        :label="$t('formDialogInputRemark')"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12"
+        v-model="work.remark"
+        type="textarea"
+      />
+      <VueDatePicker
+        :id="`${prefixId}-date-picker-work-end-date`"
+        utc
+        autoApply
+        v-model="work.workEndDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-3"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
+          <q-input
+            lazy-rules="ondemand"
+            :id="`${prefixId}-input-birth-date`"
+            :label="$t('formDialogInputWorkUntil')"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              work.workEndDate
+                ? readonly
+                  ? dateFormat(work.workEndDate)
+                  : dateFormat(work.workEndDate, false, false, true)
+                : undefined
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  work.workEndDate = parseAndFormatDate(v, locale);
+                }
+              }
+            "
+          >
+            <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-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
+                @click.stop="work.workEndDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-work-permit-no`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('formDialogInputWorkPermitNo')"
+        v-model="work.workPermitNo"
+      />
+      <VueDatePicker
+        :id="`${prefixId}-date-picker-work-permit-issu-date`"
+        utc
+        autoApply
+        v-model="work.workPermitIssuDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-3"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
+          <q-input
+            lazy-rules="ondemand"
+            :id="`${prefixId}-input-birth-date`"
+            :label="$t('formDialogInputWorkPermitIssueDate')"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              work.workPermitIssuDate
+                ? readonly
+                  ? dateFormat(work.workPermitIssuDate)
+                  : dateFormat(work.workPermitIssuDate, false, false, true)
+                : undefined
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  work.workPermitIssuDate = parseAndFormatDate(v, locale);
+                }
+              }
+            "
+          >
+            <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-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
+                @click.stop="work.workPermitIssuDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+      <VueDatePicker
+        :id="`${prefixId}-date-picker-work-permit-expire-date`"
+        utc
+        autoApply
+        v-model="work.workPermitExpireDate"
+        :teleport="true"
+        :dark="$q.dark.isActive"
+        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-3"
+      >
+        <template #year="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #year-overlay-value="{ value }">
+          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+        </template>
+        <template #trigger>
+          <q-input
+            lazy-rules="ondemand"
+            :id="`${prefixId}-input-birth-date`"
+            :label="$t('formDialogInputWorkPermitExpireDate')"
+            :dense="dense"
+            outlined
+            :readonly="readonly"
+            placeholder="DD/MM/YYYY"
+            :mask="readonly ? '' : '##/##/####'"
+            :model-value="
+              work.workPermitExpireDate
+                ? readonly
+                  ? dateFormat(work.workPermitExpireDate)
+                  : dateFormat(work.workPermitExpireDate, false, false, true)
+                : undefined
+            "
+            @update:model-value="
+              (v) => {
+                if (v && v.toString().length === 10) {
+                  work.workPermitExpireDate = parseAndFormatDate(v, locale);
+                }
+              }
+            "
+          >
+            <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-circle"
+                class="cursor-pointer app-text-muted"
+                size="sm"
+                @click.stop="work.workPermitExpireDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+      <q-input
+        lazy-rules="ondemand"
+        :for="`${prefixId}-input-owner-name`"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-4"
+        :label="$t('formDialogInputOwnerName')"
+        v-model="work.ownerName"
+      />
+      <q-select
+        outlined
+        clearable
+        use-input
+        fill-input
+        emit-value
+        map-options
+        hide-selected
+        hide-bottom-space
+        class="col-5"
+        input-debounce="0"
+        option-value="value"
+        option-label="label"
+        lazy-rules="ondemand"
+        v-model="work.positionName"
+        :dense="dense"
+        :readonly="readonly"
+        :options="positionNameOptions"
+        :hide-dropdown-icon="readonly"
+        :for="`${prefixId}-select-position-name`"
+        :label="$t('formDialogInputJobPosition')"
+        @filter="positionNameFilter"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey">
+              {{ $t('noResults') }}
+            </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+    </div>
   </div>
 </template>
 
-<style scoped>
-.active-tab {
-  color: var(--brand-1);
-  border-left: 1px solid var(--border-color);
-  border-right: 1px solid var(--border-color);
-  margin-bottom: -1.5px;
-  border-bottom: 3px solid var(--surface-1);
-}
-</style>
+<style scoped></style>
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 1b286d67..278b91c0 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -43,6 +43,8 @@ import { storeToRefs } from 'pinia';
 import ProfileBanner from 'src/components/ProfileBanner.vue';
 import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
 import FormEmployeeHealthCheck from 'src/components/03_customer-management/FormEmployeeHealthCheck.vue';
+import FormEmployeeWorkHistory from 'src/components/03_customer-management/FormEmployeeWorkHistory.vue';
+import FormEmployeeOther from 'src/components/03_customer-management/FormEmployeeOther.vue';
 import useOptionStore from 'src/stores/options';
 
 const { t, locale } = useI18n();
@@ -1861,28 +1863,53 @@ function createEmployeeForm() {
       <div class="col">
         <div style="position: sticky; top: 0" class="q-pa-sm">
           <SideMenu
-            :menu="[
-              {
-                name: $t('formDialogTitleInformation'),
-                anchor: 'form-information',
-              },
-              {
-                name: $t('formDialogTitlePersonal'),
-                anchor: 'form-personal',
-              },
-              {
-                name: $t('formDialogTitlePersonnelAddress'),
-                anchor: 'form-personal-address',
-              },
-              {
-                name: $t('formDialogTitlePassport'),
-                anchor: 'form-passport',
-              },
-              {
-                name: $t('formDialogTitleVisa'),
-                anchor: 'form-visa',
-              },
-            ]"
+            :menu="
+              employeeFormState.currentTab === 'personalInfo'
+                ? [
+                    {
+                      name: $t('formDialogTitleInformation'),
+                      anchor: 'form-information',
+                    },
+                    {
+                      name: $t('formDialogTitlePersonal'),
+                      anchor: 'form-personal',
+                    },
+                    {
+                      name: $t('formDialogTitlePersonnelAddress'),
+                      anchor: 'form-personal-address',
+                    },
+                    {
+                      name: $t('formDialogTitlePassport'),
+                      anchor: 'form-passport',
+                    },
+                    {
+                      name: $t('formDialogTitleVisa'),
+                      anchor: 'form-visa',
+                    },
+                  ]
+                : employeeFormState.currentTab === 'healthCheck'
+                  ? [
+                      {
+                        name: $t('formDialogInputCheckupRes'),
+                        anchor: 'form-checkup',
+                      },
+                    ]
+                  : employeeFormState.currentTab === 'workHistory'
+                    ? [
+                        {
+                          name: $t('workHistory'),
+                          anchor: 'form-workHistory',
+                        },
+                      ]
+                    : employeeFormState.currentTab === 'other'
+                      ? [
+                          {
+                            name: $t('other'),
+                            anchor: 'form-other',
+                          },
+                        ]
+                      : []
+            "
             background="transparent"
             :active="{
               background: 'hsla(var(--blue-6-hsl) / .2)',
@@ -1899,7 +1926,7 @@ function createEmployeeForm() {
       >
         <BasicInformation
           id="form-information"
-          prefix-id="drawer-info-employee"
+          prefix-id="form-employee"
           employee
           dense
           outlined
@@ -1914,7 +1941,7 @@ function createEmployeeForm() {
         />
         <FormPerson
           id="form-personal"
-          prefix-id="drawer-info-employee"
+          prefix-id="form-employee"
           dense
           outlined
           employee
@@ -1930,33 +1957,50 @@ function createEmployeeForm() {
         />
         <FormAddress
           id="form-personal-address"
+          prefix-id="form-employee"
           v-model:address="currentFromDataEmployee.address"
           v-model:addressEN="currentFromDataEmployee.addressEN"
           v-model:provinceId="currentFromDataEmployee.provinceId"
           v-model:districtId="currentFromDataEmployee.districtId"
           v-model:subDistrictId="currentFromDataEmployee.subDistrictId"
           v-model:zipCode="currentFromDataEmployee.zipCode"
-          prefix-id="drawer-info-personnel"
           dense
         />
       </div>
 
-      <div
-        v-if="employeeFormState.currentTab === 'healthCheck'"
-        class="col-10 q-pa-md q-gutter-y-xl"
-      >
+      <div class="col-10 q-pa-md q-gutter-y-xl" v-else>
         <FormEmployeeHealthCheck
-          id="form-information"
-          prefix-id="drawer-info-employee"
+          v-if="employeeFormState.currentTab === 'healthCheck'"
+          id="form-checkup"
+          prefix-id="form-employee"
           dense
           outlined
           v-model:employeeCheckup="currentFromDataEmployee.employeeCheckup"
           v-model:checkupTypeOption="optionStore.globalOption.insurancePlace"
-          v-model:medicalBenefitOption="optionStore.globalOption.insurancePlace"
+          v-model:medicalBenefitOption="optionStore.globalOption.typeInsurance"
           v-model:insuranceCompanyOption="
             optionStore.globalOption.insurancePlace
           "
         />
+        <FormEmployeeWorkHistory
+          v-if="employeeFormState.currentTab === 'workHistory'"
+          id="form-work-history"
+          prefix-id="form-employee"
+          dense
+          outlined
+          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"
+        />
+        <FormEmployeeOther
+          v-if="employeeFormState.currentTab === 'other'"
+          id="form-other"
+          prefix-id="form-employee"
+          dense
+          outlined
+          v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
+        />
       </div>
     </div>
   </DialogForm>