From 16fcec3a543d1a8514822be31560a0ceec47140a Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 11 Jun 2024 07:34:10 +0000
Subject: [PATCH] feat: can + employee checkup and work history (include i18n)

---
 .../FormEmployeeHealthCheck.vue               | 514 +++++++++-------
 .../FormEmployeeWorkHistory.vue               | 575 ++++++++++--------
 src/components/FormDialog.vue                 |  14 +-
 src/i18n/en-US/form-dialog.ts                 |   3 +
 src/i18n/th-th/form-dialog.ts                 |   3 +
 src/pages/03_customer-management/MainPage.vue |  58 +-
 6 files changed, 689 insertions(+), 478 deletions(-)

diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index 1f5d7bb8..ac1275a5 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { dateFormat } from 'src/utils/datetime';
 import useAddressStore, {
   District,
   Province,
   SubDistrict,
 } from 'src/stores/address';
+import { EmployeeCheckupCreate } from 'src/stores/employee/types';
 
 const adrressStore = useAddressStore();
 
@@ -19,15 +20,9 @@ const addrOptions = reactive<{
   subDistrictOps: [],
 });
 
-const checkupResult = defineModel<string>('checkupResult');
-const checkupType = defineModel<string>('checkupType');
-const provinceId = defineModel<string>('provinceId');
-const hospitalName = defineModel<string>('hospitalName');
-const remark = defineModel<string>('remark');
-const medicalBenefitScheme = defineModel<string>('medicalBenefitScheme');
-const insuranceCompany = defineModel<string>('insuranceCompany');
-const coverageStartDate = defineModel<Date | null>('coverageStartDate');
-const coverageExpireDate = defineModel<Date | null>('coverageExpireDate');
+const employeeCheckup = defineModel<EmployeeCheckupCreate[]>('employeeCheckup');
+
+const tab = ref();
 
 defineProps<{
   title?: string;
@@ -44,214 +39,313 @@ async function fetchProvince() {
   if (result) addrOptions.provinceOps = result;
 }
 
+function addData() {
+  employeeCheckup.value?.push({
+    coverageExpireDate: null,
+    coverageStartDate: null,
+    insuranceCompany: '',
+    medicalBenefitScheme: '',
+    remark: '',
+    hospitalName: '',
+    provinceId: '',
+    checkupResult: '',
+    checkupType: '',
+  });
+  if (employeeCheckup.value)
+    tab.value = `tab${employeeCheckup.value.length - 1}`;
+}
+
+function removeData(index: number) {
+  if (!employeeCheckup.value) return;
+  if (employeeCheckup.value.length === 1) return;
+
+  employeeCheckup.value.splice(index, 1);
+
+  if (index) if (tab.value === `tab${index}`) tab.value = `tab${index - 1}`;
+  if (tab.value === `tab${employeeCheckup.value.length}`)
+    tab.value = `tab${employeeCheckup.value.length - 1}`;
+}
+
 onMounted(async () => {
   await fetchProvince();
+  tab.value = 'tab0';
 });
 </script>
 
 <template>
-  <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="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="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="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="hospitalName"
-    />
-    <q-input
-      :label="$t('formDialogInputRemark')"
-      :dense="dense"
-      :outlined="!readonly"
-      :readonly="readonly"
-      :borderless="readonly"
-      hide-bottom-space
-      class="col-12"
-      v-model="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="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="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="coverageStartDate"
-      :locale="'th'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-3"
+  <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"
     >
-      <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="coverageStartDate ? dateFormat(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="coverageStartDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="coverageStartDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
-    <VueDatePicker
-      utc
-      autoApply
-      :teleport="true"
-      v-model="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="
-            coverageExpireDate ? dateFormat(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="coverageExpireDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="coverageExpireDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
+      <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-separator
-    v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
-    style="padding-block: 0.5px"
-  />
+  <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></style>
+<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>
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index 4921691a..5c742d91 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+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();
 
@@ -19,15 +20,9 @@ const addrOptions = reactive<{
   subDistrictOps: [],
 });
 
-const ownerName = defineModel<string>('ownerName');
-const positionName = defineModel<string>('positionName');
-const jobType = defineModel<string>('jobType');
-const workPlace = defineModel<string>('workPlace');
-const remark = defineModel<string>('remark');
-const workEndDate = defineModel<Date | null>('workEndDate');
-const workPermitNo = defineModel<string>('workPermitNo');
-const workPermitIssuDate = defineModel<Date | null>('workPermitIssuDate');
-const workPermitExpireDate = defineModel<Date | null>('workPermitExpireDate');
+const employeeWork = defineModel<EmployeeWorkCreate[]>('employeeWork');
+
+const tab = ref();
 
 defineProps<{
   title?: string;
@@ -44,245 +39,343 @@ async function fetchProvince() {
   if (result) addrOptions.provinceOps = result;
 }
 
+function addData() {
+  employeeWork.value?.push({
+    workEndDate: null,
+    workPermitExpireDate: null,
+    workPermitIssuDate: null,
+    workPermitNo: '',
+    workplace: '',
+    jobType: '',
+    positionName: '',
+    ownerName: '',
+    remark: '',
+  });
+  if (employeeWork.value) tab.value = `tab${employeeWork.value.length - 1}`;
+}
+
+function removeData(index: number) {
+  if (!employeeWork.value) return;
+  if (employeeWork.value.length === 1) return;
+
+  employeeWork.value.splice(index, 1);
+
+  if (index) if (tab.value === `tab${index}`) tab.value = `tab${index - 1}`;
+  if (tab.value === `tab${employeeWork.value.length}`)
+    tab.value = `tab${employeeWork.value.length - 1}`;
+}
+
 onMounted(async () => {
   await fetchProvince();
+  tab.value = 'tab0';
 });
 </script>
 
 <template>
-  <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="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="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="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="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="remark"
-      type="textarea"
-    />
-    <VueDatePicker
-      id="date-picker-workEndDate"
-      utc
-      autoApply
-      :teleport="true"
-      v-model="workEndDate"
-      :locale="'th'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-6"
+  <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"
     >
-      <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="workEndDate ? dateFormat(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="workEndDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="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="workPermitNo"
-    />
-    <VueDatePicker
-      id="date-picker-workPermitIssuDate"
-      utc
-      autoApply
-      :teleport="true"
-      v-model="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="
-            workPermitIssuDate ? dateFormat(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="workPermitIssuDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="workPermitIssuDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
-    <VueDatePicker
-      id="date-picker-workPermitExpireDate"
-      utc
-      autoApply
-      :teleport="true"
-      v-model="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="
-            workPermitExpireDate ? dateFormat(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="workPermitExpireDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="workPermitExpireDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
+      <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-separator
-    v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
-    style="padding-block: 0.5px"
-  />
+  <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></style>
+<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>
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 69b9762b..dd3f0304 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -14,6 +14,7 @@ defineProps<{
   badgeClass?: string;
   noFooter?: boolean;
   noAppBox?: boolean;
+  noPaddingTab?: boolean;
   maxWidth?: number;
   employee?: boolean;
   noAddress?: boolean;
@@ -92,7 +93,6 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
             dense
             class="app-text-muted cancel-overflow"
             v-model="employeeTab"
-            content-class="content-tab"
             active-class="active-tab"
             indicator-color="transparent"
           >
@@ -134,13 +134,21 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
           <AppBox
             v-if="!noAppBox"
             bordered
+            :noPadding="noPaddingTab"
             class="column full-height"
             :class="`${$slots.prepend ? ($q.screen.gt.sm ? 'col-10' : 'col-12') : $slots.append ? 'col-6' : 'col-12'}`"
             style="padding-right: 0; padding-bottom: 0"
           >
             <div
-              class="row col-12 q-col-gutter-y-md q-pr-md q-mb-md items-start"
-              :style="$q.screen.gt.sm ? 'overflow-y: auto; height: 60vh' : ''"
+              class="row col-12 q-col-gutter-y-md q-mb-md items-start"
+              :class="noPaddingTab ? '' : 'q-pr-md'"
+              :style="
+                $q.screen.gt.sm
+                  ? noPaddingTab
+                    ? 'height: 60vh'
+                    : 'overflow-y: auto; height: 60vh'
+                  : ''
+              "
             >
               <slot name="information"></slot>
               <slot name="person"></slot>
diff --git a/src/i18n/en-US/form-dialog.ts b/src/i18n/en-US/form-dialog.ts
index 3ddd8b39..5ec32fe2 100644
--- a/src/i18n/en-US/form-dialog.ts
+++ b/src/i18n/en-US/form-dialog.ts
@@ -167,4 +167,7 @@ export default {
   formDialogInputVisaStayUntil: 'Permitted to Stay Until',
   formDialogInputVisaTM6: 'TM.6 Number (Arrival)',
   formDialogInputVisaEnter: 'Date of Entry into the Country',
+
+  formDialogTabCheckup: 'Checkup ',
+  formDialogTabWork: 'Work  ',
 };
diff --git a/src/i18n/th-th/form-dialog.ts b/src/i18n/th-th/form-dialog.ts
index d9eee8e6..c02cc2d7 100644
--- a/src/i18n/th-th/form-dialog.ts
+++ b/src/i18n/th-th/form-dialog.ts
@@ -166,4 +166,7 @@ export default {
   formDialogInputVisaStayUntil: 'ให้อยู่ในราชอาณาจักรถึงวันที่',
   formDialogInputVisaTM6: 'เลขที่ใบ ตม.6 (ใบขาเข้า)',
   formDialogInputVisaEnter: 'วันที่เดินทางเข้ามาในประเทศ',
+
+  formDialogTabCheckup: 'ครั้งที่ ',
+  formDialogTabWork: 'ครั้งที่ ',
 };
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index d0baceec..f095f971 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -147,30 +147,30 @@ const formDataEmployee = ref<EmployeeCreate>({
   provinceId: '',
 
   employeeWork: [
-    // {
-    //   workEndDate: undefined,
-    //   workPermitExpireDate: undefined,
-    //   workPermitIssuDate: undefined,
-    //   workPermitNo: '',
-    //   workplace: '',
-    //   jobType: '',
-    //   positionName: '',
-    //   ownerName: '',
-    //   remark: '',
-    // },
+    {
+      workEndDate: null,
+      workPermitExpireDate: null,
+      workPermitIssuDate: null,
+      workPermitNo: '',
+      workplace: '',
+      jobType: '',
+      positionName: '',
+      ownerName: '',
+      remark: '',
+    },
   ],
   employeeCheckup: [
-    // {
-    //   coverageExpireDate: undefined,
-    //   coverageStartDate: undefined,
-    //   insuranceCompany: '',
-    //   medicalBenefitScheme: '',
-    //   remark: '',
-    //   hospitalName: '',
-    //   provinceId: '',
-    //   checkupResult: '',
-    //   checkupType: '',
-    // },
+    {
+      coverageExpireDate: null,
+      coverageStartDate: null,
+      insuranceCompany: '',
+      medicalBenefitScheme: '',
+      remark: '',
+      hospitalName: '',
+      provinceId: '',
+      checkupResult: '',
+      checkupType: '',
+    },
   ],
   employeeOtherInfo: {
     birthPlace: '',
@@ -1170,10 +1170,14 @@ watch(fieldSelectedCustomer, async () => {
   </FormDialog>
 
   <FormDialog
+    v-model:modal="dialogEmployee"
     employee
     addressSeparator
     :noAddress="formDataEmployeeTab !== 'personalInfo'"
-    v-model:modal="dialogEmployee"
+    :noPaddingTab="
+      formDataEmployeeTab === 'healthCheck' ||
+      formDataEmployeeTab === 'workHistory'
+    "
     v-model:tabs-list="employeeTab"
     v-model:employee-tab="formDataEmployeeTab"
     v-model:same-with-employer="formDataEmployeeSameAddr"
@@ -1227,15 +1231,21 @@ watch(fieldSelectedCustomer, async () => {
         v-model:birthDate="formDataEmployee.dateOfBirth"
         v-model:nationality="formDataEmployee.nationality"
       />
+
       <FormEmployeeHealthCheck
-        v-if="formDataEmployeeTab === 'healthCheck'"
+        v-if="
+          formDataEmployeeTab === 'healthCheck' &&
+          formDataEmployee.employeeCheckup
+        "
         dense
         outlined
+        v-model:employee-checkup="formDataEmployee.employeeCheckup"
       />
       <FormEmployeeWorkHistory
         v-if="formDataEmployeeTab === 'workHistory'"
         dense
         outlined
+        v-model:employee-work="formDataEmployee.employeeWork"
       />
       <FormEmployeeOther
         v-if="