From b6e8078c3c2da0efc8237d72e53d20570535b9ed Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 19 Apr 2024 09:06:38 +0700
Subject: [PATCH] feat: Personnel drawer info edit, delete, undo

---
 .../02_personnel-management/FormAddress.vue   |  30 +-
 .../02_personnel-management/FormByType.vue    |  33 +-
 .../FormInformation.vue                       |  20 +-
 .../02_personnel-management/FormPerson.vue    |  27 +-
 .../02_personnel-management/infoForm.vue      |   2 +
 src/components/DrawerInfo.vue                 | 193 ++++---
 .../02_personnel-management/MainPage.vue      |  28 +-
 .../person-info/MainPage.vue                  | 512 ------------------
 8 files changed, 220 insertions(+), 625 deletions(-)
 delete mode 100644 src/pages/02_personnel-management/person-info/MainPage.vue

diff --git a/src/components/02_personnel-management/FormAddress.vue b/src/components/02_personnel-management/FormAddress.vue
index 04521b92..5a07e4e1 100644
--- a/src/components/02_personnel-management/FormAddress.vue
+++ b/src/components/02_personnel-management/FormAddress.vue
@@ -83,8 +83,9 @@ watch(districtId, fetchSubDistrict);
     <div class="col-9 row q-col-gutter-md">
       <q-input
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :readonly="readonly"
+        :borderless="readonly"
         hide-bottom-space
         id="addr-input"
         :label="$t('address')"
@@ -99,8 +100,9 @@ watch(districtId, fetchSubDistrict);
       <q-select
         :dense="dense"
         :readonly="readonly"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :hide-dropdown-icon="readonly"
+        :borderless="readonly"
         hide-bottom-space
         emit-value
         map-options
@@ -121,8 +123,9 @@ watch(districtId, fetchSubDistrict);
       <q-select
         :dense="dense"
         :readonly="readonly"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :hide-dropdown-icon="readonly"
+        :borderless="readonly"
         hide-bottom-space
         emit-value
         map-options
@@ -143,8 +146,9 @@ watch(districtId, fetchSubDistrict);
       <q-select
         :dense="dense"
         :readonly="readonly"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :hide-dropdown-icon="readonly"
+        :borderless="readonly"
         hide-bottom-space
         emit-value
         map-options
@@ -164,7 +168,8 @@ watch(districtId, fetchSubDistrict);
       />
       <q-input
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
+        :borderless="readonly"
         readonly
         id="zip"
         :label="$t('zipCode')"
@@ -179,7 +184,8 @@ watch(districtId, fetchSubDistrict);
       <q-input
         :dense="dense"
         :readonly="readonly"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
+        :borderless="readonly"
         hide-bottom-space
         id="addr-en-input"
         :label="$t('address')"
@@ -194,7 +200,8 @@ watch(districtId, fetchSubDistrict);
       <q-select
         :dense="dense"
         :readonly="readonly"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
+        :borderless="readonly"
         :hide-dropdown-icon="readonly"
         emit-value
         map-options
@@ -209,7 +216,8 @@ watch(districtId, fetchSubDistrict);
       <q-select
         :dense="dense"
         :readonly="readonly"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
+        :borderless="readonly"
         :hide-dropdown-icon="readonly"
         emit-value
         map-options
@@ -224,7 +232,8 @@ watch(districtId, fetchSubDistrict);
       <q-select
         :dense="dense"
         :readonly="readonly"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
+        :borderless="readonly"
         :hide-dropdown-icon="readonly"
         emit-value
         map-options
@@ -239,7 +248,8 @@ watch(districtId, fetchSubDistrict);
       />
       <q-input
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
+        :borderless="readonly"
         readonly
         zip="zip-en"
         :label="$t('zipCode')"
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index 7c2bc5a1..ab94adde 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -41,8 +41,9 @@ defineProps<{
     >
       <q-input
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :readonly="readonly"
+        :borderless="readonly"
         label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
         class="col-12"
         v-model="registrationNo"
@@ -63,8 +64,9 @@ defineProps<{
           <q-input
             label="วันที่เริ่มงาน"
             :dense="dense"
-            :outlined="outlined"
+            :outlined="readonly ? false : outlined"
             :readonly="readonly"
+            :borderless="readonly"
             :model-value="startDate ? dateFormat(startDate) : ''"
           >
             <template v-slot:prepend>
@@ -104,8 +106,9 @@ defineProps<{
           <q-input
             label="วันที่พ้นสภาพพนักงาน"
             :dense="dense"
-            :outlined="outlined"
+            :outlined="readonly ? false : outlined"
             :readonly="readonly"
+            :borderless="readonly"
             :model-value="retireDate ? dateFormat(retireDate) : ''"
           >
             <template v-slot:prepend>
@@ -131,9 +134,10 @@ defineProps<{
       <q-select
         v-if="userType === 'MESSENGER'"
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
+        :borderless="readonly"
         emit-value
         map-options
         options-dense
@@ -152,8 +156,9 @@ defineProps<{
     >
       <q-input
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :readonly="readonly"
+        :borderless="readonly"
         label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
         class="col-12"
         v-model="discountCondition"
@@ -167,9 +172,10 @@ defineProps<{
     >
       <q-select
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
+        :borderless="readonly"
         emit-value
         map-options
         options-dense
@@ -182,8 +188,9 @@ defineProps<{
       />
       <q-select
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :readonly="readonly"
+        :borderless="readonly"
         :hide-dropdown-icon="readonly"
         emit-value
         map-options
@@ -197,8 +204,9 @@ defineProps<{
       />
       <q-select
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :readonly="readonly"
+        :borderless="readonly"
         :hide-dropdown-icon="readonly"
         emit-value
         map-options
@@ -212,24 +220,27 @@ defineProps<{
       />
       <q-input
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :readonly="readonly"
+        :borderless="readonly"
         label="ด่าน"
         class="col-6"
         v-model="checkPoint"
       />
       <q-input
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :readonly="readonly"
+        :borderless="readonly"
         label="ด่าน ENG"
         class="col-6"
         v-model="checkPointEN"
       />
       <q-file
         :dense="dense"
-        :outlined="outlined"
+        :outlined="readonly ? false : outlined"
         :readonly="readonly"
+        :borderless="readonly"
         label="แบบเอกสารประจำตัว"
         class="col-12"
         v-model="idenDoc"
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index 8517b04c..5985437a 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import useUserStore from 'src/stores/user';
-import { watch } from 'vue';
 
 const userStore = useUserStore();
-const { userOption } = storeToRefs(userStore);
 
 const hqId = defineModel<string | null | undefined>('hqId');
 const brId = defineModel<string | null | undefined>('brId');
@@ -36,8 +34,9 @@ async function selectHq(id: string) {
   <div class="col-9 row q-col-gutter-md">
     <q-select
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       :hide-dropdown-icon="readonly"
       emit-value
       map-options
@@ -54,8 +53,9 @@ async function selectHq(id: string) {
     />
     <q-select
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       :hide-dropdown-icon="readonly"
       emit-value
       map-options
@@ -71,8 +71,9 @@ async function selectHq(id: string) {
     />
     <q-select
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       :hide-dropdown-icon="readonly"
       emit-value
       map-options
@@ -88,8 +89,9 @@ async function selectHq(id: string) {
     />
     <q-select
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       :hide-dropdown-icon="readonly"
       emit-value
       map-options
@@ -105,7 +107,8 @@ async function selectHq(id: string) {
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
+      :borderless="readonly"
       :readonly="usernameReadonly"
       emit-value
       map-options
@@ -118,7 +121,8 @@ async function selectHq(id: string) {
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
+      :borderless="readonly"
       readonly
       hide-bottom-space
       class="col-3"
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index a7f10164..796ab227 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -25,8 +25,9 @@ defineProps<{
   <div class="col-9 row q-col-gutter-md">
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       label="ชื่อ ภาษาไทย"
@@ -35,8 +36,9 @@ defineProps<{
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       label="นามสกุล ภาษาไทย"
@@ -45,8 +47,9 @@ defineProps<{
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       label="ชื่อ ภาษาอังกฤษ"
@@ -55,8 +58,9 @@ defineProps<{
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       hide-bottom-space
       class="col-3"
       label="นามสกุล ภาษาอังกฤษ"
@@ -65,8 +69,9 @@ defineProps<{
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       class="col-6"
       label="เบอร์โทร"
       v-model="telephoneNo"
@@ -74,17 +79,19 @@ defineProps<{
     />
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
+      :borderless="readonly"
       label="อีเมล"
       class="col-6"
       v-model="email"
     />
     <q-select
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
       :readonly="readonly"
       :hide-dropdown-icon="readonly"
+      :borderless="readonly"
       emit-value
       map-options
       label="เพศ"
@@ -110,8 +117,9 @@ defineProps<{
         <q-input
           label="วันเดือนปีเกิด"
           :dense="dense"
-          :outlined="outlined"
+          :outlined="readonly ? false : outlined"
           :readonly="readonly"
+          :borderless="readonly"
           :model-value="birthDate ? dateFormat(birthDate) : ''"
         >
           <template v-slot:prepend>
@@ -136,7 +144,8 @@ defineProps<{
     </VueDatePicker>
     <q-input
       :dense="dense"
-      :outlined="outlined"
+      :outlined="readonly ? false : outlined"
+      :borderless="readonly"
       readonly
       label="อายุ"
       class="col-3"
diff --git a/src/components/02_personnel-management/infoForm.vue b/src/components/02_personnel-management/infoForm.vue
index 117dfc92..3f096e4c 100644
--- a/src/components/02_personnel-management/infoForm.vue
+++ b/src/components/02_personnel-management/infoForm.vue
@@ -3,6 +3,7 @@ import AppBox from '../app/AppBox.vue';
 import FormAddress from './FormAddress.vue';
 
 defineProps<{
+  readonly?: boolean;
   addressTitle?: string;
   addressTitleEN?: string;
 }>();
@@ -33,6 +34,7 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
               dense
               outlined
               separator
+              :readonly="readonly"
               v-model:address="address"
               v-model:addressEN="addressEN"
               v-model:provinceId="provinceId"
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 6f8f3729..bb3904a7 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -1,102 +1,153 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+
 defineProps<{
   title: string;
+  isEdit?: boolean;
   editData?: (...args: unknown[]) => void;
   deleteData?: (...args: unknown[]) => void;
   submit?: (...args: unknown[]) => void;
   close?: (...args: unknown[]) => void;
+  undo?: (...args: unknown[]) => void;
 }>();
 
 const drawerOpen = defineModel<boolean>('drawerOpen', {
   default: false,
 });
+
+const myForm = ref();
+
+function reset() {
+  if (myForm.value) {
+    myForm.value.resetValidation();
+  }
+}
 </script>
 <template>
   <q-drawer
+    @before-hide="reset"
     @hide="close"
-    :width="1100"
+    :width="1300"
     :breakpoint="500"
     v-model="drawerOpen"
     behavior="mobile"
     side="right"
     show-if-above
   >
-    <AppBox
-      class="column justify-between full-height"
-      style="padding: 0; border-radius: var(--radius-2)"
+    <q-form
+      ref="myForm"
+      class="full-height"
+      greedy
+      @submit.prevent
+      @validation-success="submit"
     >
-      <div class="form-header col q-px-lg row items-center">
-        <q-btn
-          round
-          flat
-          id="closeDialog"
-          icon="mdi-pencil-outline"
-          padding="xs"
-          class="q-mr-md"
-          :class="{ dark: $q.dark.isActive }"
-          style="color: var(--brand-1)"
-          @click="editData"
-        />
-        <q-btn
-          round
-          flat
-          id="closeDialog"
-          icon="mdi-trash-can-outline"
-          padding="xs"
-          :class="{ dark: $q.dark.isActive }"
-          style="color: hsl(var(--negative-bg))"
-          @click="deleteData"
-        />
+      <AppBox
+        class="column justify-between full-height"
+        style="padding: 0; border-radius: var(--radius-2)"
+      >
+        <div class="form-header col q-px-lg row items-center">
+          <div v-if="isEdit" class="row">
+            <q-btn
+              round
+              flat
+              id="closeDialog"
+              icon="mdi-undo"
+              padding="xs"
+              class="q-mr-md"
+              :class="{ dark: $q.dark.isActive }"
+              style="color: var(--brand-1)"
+              @click="undo"
+            />
+            <div style="width: 31.98px"></div>
+          </div>
+          <div v-else>
+            <q-btn
+              round
+              flat
+              id="editDialog"
+              icon="mdi-pencil-outline"
+              padding="xs"
+              class="q-mr-md"
+              :class="{ dark: $q.dark.isActive }"
+              style="color: var(--brand-1)"
+              @click="editData"
+            />
+            <q-btn
+              round
+              flat
+              id="deleteDialog"
+              icon="mdi-trash-can-outline"
+              padding="xs"
+              :class="{ dark: $q.dark.isActive }"
+              style="color: hsl(var(--negative-bg))"
+              @click="deleteData"
+            />
+          </div>
 
-        <div class="col text-subtitle1 text-weight-bold text-center">
-          {{ title }}
+          <div class="col text-subtitle1 text-weight-bold text-center">
+            {{ title }}
+          </div>
+
+          <div style="width: 31.98px"></div>
+          <q-btn
+            round
+            flat
+            id="closeDialog"
+            icon="mdi-close"
+            padding="xs"
+            class="close-btn"
+            :class="{ dark: $q.dark.isActive }"
+            type="reset"
+            @click="close"
+            resetValidation
+          />
         </div>
 
-        <div style="width: 31.98px"></div>
-        <q-btn
-          round
-          flat
-          id="closeDialog"
-          icon="mdi-close"
-          padding="xs"
-          class="close-btn"
+        <div
+          class="col-10 form-body"
+          style="position: relative"
           :class="{ dark: $q.dark.isActive }"
-          @click="close"
-        />
-      </div>
+          :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
+        >
+          <slot name="info"></slot>
+        </div>
 
-      <div
-        class="col-10 form-body"
-        style="position: relative"
-        :class="{ dark: $q.dark.isActive }"
-        :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
-      >
-        <slot name="info"></slot>
-      </div>
-
-      <div
-        class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
-      >
-        <q-btn
-          dense
-          outline
-          unelevated
-          id="cancelBtn"
-          class="q-px-md app-text-negative"
-          :label="$t('cancel')"
-          @click="close"
-        />
-        <q-btn
-          dense
-          unelevated
-          id="submitBtn"
-          type="submit"
-          color="primary"
-          class="q-px-md"
-          :label="$t('save')"
-        />
-      </div>
-    </AppBox>
+        <div
+          class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
+        >
+          <q-btn
+            dense
+            outline
+            unelevated
+            id="cancelBtn"
+            class="q-px-md app-text-negative"
+            :label="$t('cancel')"
+            type="reset"
+            @click="close"
+          />
+          <q-btn
+            v-if="isEdit"
+            dense
+            unelevated
+            id="submitBtn"
+            type="submit"
+            color="primary"
+            class="q-px-md"
+            :label="$t('save')"
+          />
+          <q-btn
+            v-else
+            dense
+            unelevated
+            id="okBtn"
+            color="primary"
+            class="q-px-md"
+            label="ตกลง"
+            @click="close"
+          />
+        </div>
+      </AppBox>
+    </q-form>
   </q-drawer>
 </template>
 
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 8f7ab65f..4a21f9ef 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
-import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import useUserStore from 'stores/user';
 import useBranchStore from 'src/stores/branch';
@@ -26,7 +25,6 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { locale } = useI18n();
-const router = useRouter();
 const userStore = useUserStore();
 const branchStore = useBranchStore();
 const adrressStore = useAddressStore();
@@ -66,6 +64,8 @@ const defaultFormData = {
 };
 
 const currentUser = ref<User>();
+const infoPersonCardEdit = ref(false);
+const infoPersonId = ref<string>('');
 const infoPersonCard = ref();
 const infoDrawer = ref(false);
 const profileSubmit = ref(false);
@@ -151,6 +151,7 @@ async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
     modal.value = true;
   } else if (action === 'INFO') {
     infoDrawer.value = true;
+    infoPersonCardEdit.value = false;
     if (!userData.value) return;
     const user = userData.value.result.find((x) => x.id === idEdit);
     infoPersonCard.value = user
@@ -192,6 +193,12 @@ async function openDialog(action?: 'FORM' | 'INFO', idEdit?: string) {
   }
 }
 
+function undo() {
+  if (!infoPersonId) return;
+  infoPersonCardEdit.value = false;
+  assignFormData(infoPersonId.value);
+}
+
 function onClose() {
   code.value = '';
   hqId.value = '';
@@ -208,6 +215,8 @@ function onClose() {
 }
 
 async function onSubmit() {
+  console.log('hello');
+
   formData.value.profileImage = profileFile.value as File;
   if (isEdit.value === true && userId.value) {
     dialog({
@@ -326,6 +335,7 @@ async function assignFormData(idEdit: string) {
   const foundUser = userData.value.result.find((user) => user.id === idEdit);
   if (foundUser) {
     currentUser.value = foundUser;
+    infoPersonId.value = currentUser.value.id;
 
     formData.value = {
       provinceId: foundUser.provinceId,
@@ -589,16 +599,23 @@ watch(
   </div>
 
   <DrawerInfo
+    v-if="currentUser"
+    :isEdit="infoPersonCardEdit"
     :title="
       $i18n.locale === 'en-US'
-        ? `${formData.firstNameEN} ${formData.lastNameEN}`
-        : `${formData.firstName} ${formData.lastName}`
+        ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
+        : `${currentUser.firstName} ${currentUser.lastName}`
     "
     v-model:drawerOpen="infoDrawer"
+    :deleteData="() => onDelete(infoPersonId)"
+    :submit="() => onSubmit()"
     :close="() => onClose()"
+    :undo="() => undo()"
+    :editData="() => (infoPersonCardEdit = true)"
   >
     <template #info>
       <infoForm
+        :readonly="!infoPersonCardEdit"
         v-model:address="formData.address"
         v-model:addressEN="formData.addressEN"
         v-model:provinceId="formData.provinceId"
@@ -625,6 +642,7 @@ watch(
             dense
             outlined
             separator
+            :readonly="!infoPersonCardEdit"
             :usernameReadonly="isEdit"
             v-model:hqId="hqId"
             v-model:brId="brId"
@@ -639,6 +657,7 @@ watch(
             dense
             outlined
             separator
+            :readonly="!infoPersonCardEdit"
             v-model:firstName="formData.firstName"
             v-model:lastName="formData.lastName"
             v-model:firstNameEN="formData.firstNameEN"
@@ -654,6 +673,7 @@ watch(
             dense
             outlined
             separator
+            :readonly="!infoPersonCardEdit"
             v-model:userType="formData.userType"
             v-model:registrationNo="formData.registrationNo"
             v-model:startDate="formData.startDate"
diff --git a/src/pages/02_personnel-management/person-info/MainPage.vue b/src/pages/02_personnel-management/person-info/MainPage.vue
deleted file mode 100644
index 1a5cfec6..00000000
--- a/src/pages/02_personnel-management/person-info/MainPage.vue
+++ /dev/null
@@ -1,512 +0,0 @@
-<script lang="ts" setup>
-import { useRoute } from 'vue-router';
-import { onMounted, ref, watch } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useRouter } from 'vue-router';
-
-import useUserStore from 'stores/user';
-
-import { User } from 'stores/user/types';
-import { Branch } from 'stores/branch/types';
-import { dialog } from 'src/stores/utils';
-
-import PersonCard from 'components/home/PersonCard.vue';
-import AppBox from 'components/app/AppBox.vue';
-import FormTop from 'src/components/02_personnel-management/FormInformation.vue';
-import FormName from 'src/components/02_personnel-management/FormPerson.vue';
-import FormByType from 'src/components/02_personnel-management/FormByType.vue';
-import useAddressStore, {
-  District,
-  Province,
-  SubDistrict,
-} from 'src/stores/address';
-import { reactive } from 'vue';
-
-const route = useRoute();
-
-const router = useRouter();
-const userStore = useUserStore();
-const addrStore = useAddressStore();
-
-const { data: userData } = storeToRefs(userStore);
-
-const currentUser = ref<User>();
-const currentUserBranch = ref<Branch[]>([]);
-const currentHQ = ref<string | null>();
-const currentBR = ref<string | null>();
-const isEdit = ref(false);
-const formRef = ref();
-
-async function getCurrentUser() {
-  if (typeof route.params.id !== 'string') return;
-
-  const record = userData.value?.result.find((v) => v.id === route.params.id);
-
-  if (record) return (currentUser.value = record);
-
-  const res = await userStore.fetchById(route.params.id);
-
-  if (res) currentUser.value = res;
-}
-
-async function getUserBranch() {
-  if (!currentUser.value) return;
-
-  const res = await userStore.getBranch(currentUser.value.id);
-
-  if (!res) return;
-
-  currentUserBranch.value = res.result;
-
-  const mainBranch = currentUserBranch.value[0];
-
-  if (mainBranch && mainBranch.headOfficeId) {
-    currentHQ.value = mainBranch.headOfficeId;
-    currentBR.value = mainBranch.id;
-  } else {
-    currentHQ.value = mainBranch.id;
-  }
-}
-
-const opts = reactive<{
-  province: Province[];
-  district: District[];
-  subDistrict: SubDistrict[];
-}>({
-  province: [],
-  district: [],
-  subDistrict: [],
-});
-
-async function getProvince() {
-  const result = await addrStore.fetchProvince();
-  if (result) opts.province = result;
-}
-async function getDistrict() {
-  if (!currentUser.value?.provinceId) return;
-  const result = await addrStore.fetchDistrictByProvinceId(
-    currentUser.value?.provinceId,
-  );
-  if (result) opts.district = result;
-}
-async function getSubDistrict() {
-  if (!currentUser.value?.districtId) return;
-  const result = await addrStore.fetchSubDistrictByProvinceId(
-    currentUser.value?.districtId,
-  );
-  if (result) opts.subDistrict = result;
-}
-
-function triggerEdit(id?: string) {
-  if (!id) return;
-  isEdit.value = true;
-  console.log('Edit!');
-}
-
-function onSubmit() {
-  dialog({
-    color: 'primary',
-    icon: 'mdi-pencil-outline',
-    title: 'ยืนยันการแก้ไขข้อมูล',
-    actionText: 'ตกลง',
-    persistent: true,
-    message: 'คุณต้องการแก้ไขข้อมูล ใช่หรือไม่',
-    action: async () => {
-      console.log('Submit!');
-    },
-  });
-}
-
-function onDelete(id?: string) {
-  if (!id) return;
-  dialog({
-    color: 'negative',
-    icon: 'mdi-trash-can-outline',
-    title: 'ยืนยันการลบข้อมูล',
-    actionText: 'ตกลง',
-    persistent: true,
-    message: 'คุณต้องการลบข้อมูล ใช่หรือไม่',
-    action: async () => {
-      console.log('Delete!');
-    },
-  });
-}
-
-onMounted(async () => {
-  await getCurrentUser();
-  await getUserBranch();
-  await userStore.fetchHqOption();
-  if (!currentHQ.value) return;
-  await userStore.fetchBrOption(currentHQ.value);
-  await getProvince();
-
-  if (userStore.userOption.roleOpts.length === 0) {
-    userStore.fetchRoleOption();
-  }
-});
-
-watch(() => route.params.id, getCurrentUser);
-watch(() => currentUser.value?.provinceId, getDistrict);
-watch(() => currentUser.value?.districtId, getSubDistrict);
-</script>
-
-<template>
-  <div class="text-h6 text-weight-bold q-mb-md" v-if="currentUser">
-    <q-btn
-      flat
-      round
-      padding="xs"
-      icon="mdi-arrow-left"
-      style="color: hsl(var(--info-bg))"
-      @click="router.go(-1)"
-    />
-    {{
-      $i18n.locale === 'en-US'
-        ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
-        : `${currentUser.firstName} ${currentUser.lastName}`
-    }}
-  </div>
-  <div
-    class="q-pa-md info-bg"
-    :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
-  >
-    <q-form
-      greedy
-      ref="formRef"
-      id="formId"
-      @submit.prevent
-      @validation-success="onSubmit"
-    >
-      <div
-        class="info-container"
-        :class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
-      >
-        <div>
-          <PersonCard
-            :list="[
-              {
-                id: currentUser.id,
-                img: `${currentUser.profileImageUrl}`,
-                name:
-                  $i18n.locale === 'en-US'
-                    ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
-                    : `${currentUser.firstName} ${currentUser.lastName}`,
-                male: currentUser.gender === 'male',
-                female: currentUser.gender === 'female',
-                detail: [
-                  { label: 'ประเภท', value: $t(currentUser.userType) },
-                  {
-                    label: 'ตำแหน่ง',
-                    value: currentUser.userRole
-                      ? userStore.userOption.roleOpts.find(
-                          (r) => r.value === currentUser?.userRole,
-                        )?.label || ''
-                      : '',
-                  },
-                  { label: 'โทรศัพท์', value: currentUser.telephoneNo },
-                  {
-                    label: 'อายุ',
-                    value: userStore.calculateAge(
-                      currentUser.birthDate as Date,
-                    ),
-                  },
-                ],
-                badge: currentUser.code,
-                disabled: currentUser.status === 'INACTIVE',
-              },
-            ]"
-            v-if="currentUser"
-            :grid-columns="1"
-            no-hover
-            no-action
-            style="box-shadow: var(--shadow-2)"
-          />
-          <div class="col-12 row items-center q-pt-md q-col-gutter-x-md">
-            <div class="col-6">
-              <q-btn
-                v-if="!isEdit"
-                dense
-                class="btn-edit full-width"
-                @click="triggerEdit(currentUser?.id)"
-              >
-                <q-icon size="16px" name="mdi-pencil-outline" class="q-pr-xs" />
-                <span>แก้ไขข้อมูล</span>
-              </q-btn>
-              <q-btn
-                v-else
-                dense
-                class="btn-edit full-width"
-                label="บันทึกข้อมูล"
-                type="submit"
-              />
-            </div>
-
-            <div class="col-6">
-              <q-btn
-                v-if="!isEdit"
-                dense
-                class="btn-delete full-width"
-                @click="onDelete(currentUser?.id)"
-              >
-                <q-icon
-                  size="16px"
-                  name="mdi-trash-can-outline"
-                  class="q-pr-xs"
-                />
-                <span>ลบข้อมูล</span>
-              </q-btn>
-              <q-btn
-                v-else
-                dense
-                class="btn-delete full-width"
-                label="ยกเลิก"
-                type="reset"
-                @click="isEdit = false"
-              />
-            </div>
-          </div>
-        </div>
-
-        <AppBox
-          class="surface-1"
-          rounded
-          bordered
-          v-if="currentUser"
-          style="
-            box-shadow: var(--shadow-2);
-            overflow-y: auto;
-            max-height: 50vw;
-          "
-        >
-          <div class="row q-col-gutter-md">
-            <FormTop
-              dense
-              outlined
-              :readonly="!isEdit"
-              v-model:hqId="currentHQ"
-              v-model:brId="currentBR"
-              v-model:userType="currentUser.userType"
-              v-model:userRole="currentUser.userRole"
-              v-model:userCode="currentUser.code"
-            />
-            <FormName
-              dense
-              outlined
-              :readonly="!isEdit"
-              v-model:firstName="currentUser.firstName"
-              v-model:lastName="currentUser.lastName"
-              v-model:firstNameEN="currentUser.firstNameEN"
-              v-model:lastNameEN="currentUser.lastNameEN"
-            />
-            <div class="col-12 group-label">{{ $t('address') }}</div>
-
-            <q-input
-              dense
-              outlined
-              :readonly="!isEdit"
-              id="address"
-              label="ที่อยู่"
-              class="col-12"
-              v-model="currentUser.address"
-            />
-            <q-select
-              dense
-              outlined
-              :readonly="!isEdit"
-              emit-value
-              map-options
-              hide-dropdown-icon
-              id="selectProvince"
-              v-model="currentUser.provinceId"
-              option-value="id"
-              option-label="name"
-              :label="$t('province')"
-              class="col-3"
-              @update:model-value="
-                currentUser
-                  ? { ...currentUser, districtId: null, subDistrictId: null }
-                  : ''
-              "
-              :options="opts.province"
-            />
-            <q-select
-              dense
-              outlined
-              :readonly="!isEdit"
-              emit-value
-              map-options
-              hide-dropdown-icon
-              id="selectDistrict"
-              v-model="currentUser.districtId"
-              option-value="id"
-              option-label="name"
-              :label="$t('district')"
-              class="col-3"
-              @update:model-value="
-                currentUser ? (currentUser.subDistrictId = null) : ''
-              "
-              :options="opts.district"
-            />
-            <q-select
-              dense
-              outlined
-              :readonly="!isEdit"
-              emit-value
-              map-options
-              hide-dropdown-icon
-              id="SelectSubDistrict"
-              v-model="currentUser.subDistrictId"
-              option-value="id"
-              option-label="name"
-              :label="$t('subDistrict')"
-              class="col-3"
-              :options="opts.subDistrict"
-            />
-            <q-input
-              dense
-              outlined
-              :readonly="!isEdit"
-              :label="$t('zipCode')"
-              class="col-3"
-              v-model="currentUser.zipCode"
-            />
-
-            <div class="col-12 group-label">{{ $t('address') }} EN</div>
-
-            <q-input
-              dense
-              outlined
-              :readonly="!isEdit"
-              hide-dropdown-icon
-              id="addressEN"
-              label="ที่อยู่"
-              class="col-12"
-              v-model="currentUser.addressEN"
-            />
-            <q-select
-              dense
-              outlined
-              :readonly="!isEdit"
-              emit-value
-              map-options
-              hide-dropdown-icon
-              id="selectProvinceEN"
-              v-model="currentUser.provinceId"
-              option-value="id"
-              option-label="nameEN"
-              :label="$t('province')"
-              class="col-3"
-              @update:model-value="
-                currentUser
-                  ? { ...currentUser, districtId: null, subDistrictId: null }
-                  : ''
-              "
-              :options="opts.province"
-            />
-            <q-select
-              dense
-              outlined
-              :readonly="!isEdit"
-              emit-value
-              map-options
-              hide-dropdown-icon
-              id="selectDistrictEN"
-              v-model="currentUser.districtId"
-              option-value="id"
-              option-label="nameEN"
-              :label="$t('district')"
-              class="col-3"
-              @update:model-value="
-                currentUser ? (currentUser.subDistrictId = null) : ''
-              "
-              :options="opts.district"
-            />
-            <q-select
-              dense
-              outlined
-              :readonly="!isEdit"
-              hide-dropdown-icon
-              emit-value
-              map-options
-              id="SelectSubDistrictEN"
-              v-model="currentUser.subDistrictId"
-              option-value="id"
-              option-label="nameEN"
-              :label="$t('subDistrict')"
-              class="col-3"
-              :options="opts.subDistrict"
-            />
-            <q-input
-              dense
-              outlined
-              :readonly="!isEdit"
-              zip="zipEN"
-              :label="$t('zipCode')"
-              class="col-3"
-              v-model="currentUser.zipCode"
-            />
-            <FormByType
-              dense
-              outlined
-              :readonly="!isEdit"
-              v-model:userType="currentUser.userType"
-              v-model:telephoneNo="currentUser.telephoneNo"
-              v-model:gender="currentUser.gender"
-              v-model:email="currentUser.email"
-              v-model:registrationNo="currentUser.registrationNo"
-              v-model:startDate="currentUser.startDate"
-              v-model:retireDate="currentUser.retireDate"
-              v-model:birthDate="currentUser.birthDate"
-              v-model:responsibleArea="currentUser.responsibleArea"
-              v-model:discountCondition="currentUser.discountCondition"
-              v-model:sourceNationality="currentUser.sourceNationality"
-              v-model:importNationality="currentUser.importNationality"
-              v-model:trainingPlace="currentUser.trainingPlace"
-            />
-          </div>
-        </AppBox>
-      </div>
-    </q-form>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.info-container {
-  --_group-label-color: currentColor;
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  gap: var(--size-4);
-
-  .group-label {
-    color: var(--_group-label-color);
-  }
-
-  &.dark {
-    --_group-label-color: hsl(var(--info-bg));
-  }
-
-  &.desktop {
-    grid-template-columns: 1fr 4fr;
-  }
-}
-
-.info-bg {
-  background-color: var(--surface-1);
-  height: 100%;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.btn-edit {
-  color: white;
-  background-color: hsl(var(--info-bg));
-  border-radius: var(--radius-2);
-}
-
-.btn-delete {
-  color: hsl(var(--negative-bg));
-  background-color: var(--surface-1);
-  border-radius: var(--radius-2);
-  border: 1px solid hsl(var(--negative-bg));
-}
-</style>