fix: form component

src/components/01_branch-management/FormLocation.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const location = defineModel<string>('qr');
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">• ข้อมูลที่อยู่สำนักงานใหญ่</div>
+  <div class="col-9 row">Location</div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>

src/components/01_branch-management/FormQr.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const qr = defineModel<string>('qr');
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">• ข้อมูลที่อยู่สำนักงานใหญ่</div>
+  <div class="col-9 row">QRCode</div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>

src/components/02_personnel-management/FormAddress.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import useAddressStore, {
+  District,
+  Province,
+  SubDistrict,
+} from 'src/stores/address';
+
+defineProps<{
+  title?: string;
+  addressTitle?: string;
+  addressTitleEN?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+
+const adrressStore = useAddressStore();
+const address = defineModel('address', { default: '' });
+const addressEN = defineModel('addressEN', { default: '' });
+const provinceId = defineModel<string | null | undefined>('provinceId');
+const districtId = defineModel<string | null | undefined>('districtId');
+const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
+const zipCode = defineModel<string>('zipCode', { default: '' });
+
+const addrOptions = ref<{
+  provinceOps?: Province[];
+  districtOps?: District[];
+  subDistrictOps?: SubDistrict[];
+}>({});
+
+async function fetchProvince() {
+  const result = await adrressStore.fetchProvince();
+  if (result) {
+    addrOptions.value.provinceOps = result;
+  }
+}
+
+async function fetchDistrict(id: string | undefined) {
+  if (id) {
+    const result = await adrressStore.fetchDistrictByProvinceId(id);
+    if (result) {
+      addrOptions.value.districtOps = result;
+    }
+  }
+}
+
+async function fetchSubDistrict(id: string | undefined) {
+  if (id) {
+    const result = await adrressStore.fetchSubDistrictByProvinceId(id);
+    if (result) {
+      addrOptions.value.subDistrictOps = result;
+    }
+  }
+}
+
+async function selectProvince(id: string) {
+  if (!id) return;
+  districtId.value = undefined;
+  subDistrictId.value = undefined;
+  addrOptions.value.districtOps = [];
+  addrOptions.value.subDistrictOps = [];
+  zipCode.value = '';
+  await fetchDistrict(id);
+}
+
+async function selectDistrict(id: string) {
+  if (!id) return;
+  subDistrictId.value = undefined;
+  zipCode.value = '';
+  await fetchSubDistrict(id);
+}
+
+async function selectSubDistrict(id: string) {
+  if (!id) return;
+  zipCode.value =
+    addrOptions.value.subDistrictOps
+      ?.filter((x) => x.id === id)
+      .map((x) => x.zipCode)[0] ?? '';
+}
+
+onMounted(async () => {
+  await fetchProvince();
+});
+</script>
+<template>
+  <div class="col-12 app-text-muted">
+    • {{ title || 'ข้อมูลที่อยู่พนักงาน' }}
+  </div>
+  <div class="col-12 row q-col-gutter-y-md">
+    <div class="col-3 q-pl-xl app-text-muted">
+      {{ addressTitle || 'ที่อยู่' }}
+    </div>
+    <div class="col-9 row q-col-gutter-md">
+      <q-input
+        :dense="dense"
+        :outlined="outlined"
+        :readonly="readonly"
+        hide-bottom-space
+        id="addr-input"
+        :label="$t('address')"
+        class="col-12"
+        v-model="address"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputAddressValidate'),
+        ]"
+      />
+      <q-select
+        :dense="dense"
+        :readonly="readonly"
+        :outlined="outlined"
+        :hide-dropdown-icon="readonly"
+        hide-bottom-space
+        emit-value
+        map-options
+        id="select-province"
+        v-model="provinceId"
+        option-value="id"
+        option-label="name"
+        :label="$t('province')"
+        class="col-3"
+        :options="addrOptions.provinceOps"
+        @update:model-value="(v: string) => selectProvince(v)"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputProvinceValidate'),
+        ]"
+      />
+      <q-select
+        :dense="dense"
+        :readonly="readonly"
+        :outlined="outlined"
+        :hide-dropdown-icon="readonly"
+        hide-bottom-space
+        emit-value
+        map-options
+        id="select-district"
+        v-model="districtId"
+        option-value="id"
+        option-label="name"
+        :label="$t('district')"
+        class="col-3"
+        :options="addrOptions.districtOps"
+        @update:model-value="(v: string) => selectDistrict(v)"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputDistrictValidate'),
+        ]"
+      />
+      <q-select
+        :dense="dense"
+        :readonly="readonly"
+        :outlined="outlined"
+        :hide-dropdown-icon="readonly"
+        hide-bottom-space
+        emit-value
+        map-options
+        id="select-sub-district"
+        v-model="subDistrictId"
+        option-value="id"
+        option-label="name"
+        :label="$t('subDistrict')"
+        class="col-3"
+        :options="addrOptions.subDistrictOps"
+        @update:model-value="(v: string) => selectSubDistrict(v)"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputSubDistrictValidate'),
+        ]"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="outlined"
+        readonly
+        id="zip"
+        :label="$t('zipCode')"
+        class="col-3"
+        v-model="zipCode"
+      />
+    </div>
+    <div class="col-3 q-pl-xl app-text-muted">
+      {{ addressTitleEN || 'ที่อยู่ ภาษาอังกฤษ' }}
+    </div>
+    <div class="col-9 row q-col-gutter-md">
+      <q-input
+        :dense="dense"
+        :readonly="readonly"
+        :outlined="outlined"
+        hide-bottom-space
+        id="addr-en-input"
+        :label="$t('address')"
+        class="col-12"
+        v-model="addressEN"
+        lazy-rules
+        :rules="[
+          (val) =>
+            (val && val.length > 0) || $t('formDialogInputAddressValidate'),
+        ]"
+      />
+      <q-select
+        :dense="dense"
+        :readonly="readonly"
+        :outlined="outlined"
+        :hide-dropdown-icon="readonly"
+        emit-value
+        map-options
+        id="select-province-en"
+        v-model="provinceId"
+        option-value="id"
+        option-label="nameEN"
+        :label="$t('province')"
+        class="col-3"
+        :options="addrOptions.provinceOps"
+        @update:model-value="(v: string) => selectProvince(v)"
+      />
+      <q-select
+        :dense="dense"
+        :readonly="readonly"
+        :outlined="outlined"
+        :hide-dropdown-icon="readonly"
+        emit-value
+        map-options
+        id="select-district-en"
+        v-model="districtId"
+        option-value="id"
+        option-label="nameEN"
+        :label="$t('district')"
+        class="col-3"
+        :options="addrOptions.districtOps"
+        @update:model-value="(v: string) => selectDistrict(v)"
+      />
+      <q-select
+        :dense="dense"
+        :readonly="readonly"
+        :outlined="outlined"
+        :hide-dropdown-icon="readonly"
+        emit-value
+        map-options
+        id="select-sub-district-en"
+        v-model="subDistrictId"
+        option-value="id"
+        option-label="nameEN"
+        :label="$t('subDistrict')"
+        class="col-3"
+        :options="addrOptions.subDistrictOps"
+        @update:model-value="(v: string) => selectSubDistrict(v)"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="outlined"
+        readonly
+        zip="zip-en"
+        :label="$t('zipCode')"
+        class="col-3"
+        v-model="zipCode"
+      />
+    </div>
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mb-md"
+    style="padding-block: 0.5px; margin-top: 32px"
+  />
+</template>

src/components/02_personnel-management/FormByType.vue

@@ -5,13 +5,9 @@ import { dateFormat } from 'src/utils/datetime';
 const userStore = useUserStore();
 
 const userType = defineModel<string>('userType');
-const telephoneNo = defineModel<string>('telephoneNo');
-const gender = defineModel<string>('gender');
-const email = defineModel<string>('email');
 const registrationNo = defineModel<string | null>('registrationNo');
 const startDate = defineModel<Date | null>('startDate');
 const retireDate = defineModel<Date | null>('retireDate');
-const birthDate = defineModel<Date | null>('birthDate');
 const responsibleArea = defineModel<string>('responsibleArea');
 const discountCondition = defineModel<string | null | undefined>(
   'discountCondition',
@@ -34,285 +30,211 @@ defineProps<{
 }>();
 </script>
 <template>
-  <q-input
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    class="col-3"
-    label="เบอร์โทร"
-    v-model="telephoneNo"
-    mask="##########"
-  />
-  <q-select
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    :hide-dropdown-icon="readonly"
-    emit-value
-    map-options
-    label="เพศ"
-    class="col-3"
-    bg-color="white"
-    option-label="label"
-    option-value="value"
-    v-model="gender"
-    :options="userStore.userOption.genderOpts"
-  />
-  <q-input
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    label="อีเมล"
-    class="col-6"
-    v-model="email"
-  />
-  <div
-    v-if="userType === 'USER' || userType === 'MESSENGER'"
-    class="row col-12 q-col-gutter-md"
-    style="margin-left: 0px; padding-left: 0px"
-  >
-    <q-input
-      :dense="dense"
-      :outlined="outlined"
-      :readonly="readonly"
-      label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
-      class="col-12"
-      v-model="registrationNo"
-    />
-    <VueDatePicker
-      utc
-      autoApply
-      v-model="startDate"
-      :locale="'th'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-6"
+  <div v-if="userType" class="col-3 app-text-muted">• ข้อมูลการทำงาน</div>
+  <div class="col-9 row q-col-gutter-md">
+    <div
+      v-if="userType === 'USER' || userType === 'MESSENGER'"
+      class="row col-12 q-col-gutter-md"
+      style="margin-left: 0px; padding-left: 0px"
     >
-      <template #year="{ value }">
-        {{ value + 543 }}
-      </template>
-      <template #trigger>
-        <q-input
-          label="วันที่เริ่มงาน"
-          :dense="dense"
-          :outlined="outlined"
-          :readonly="readonly"
-          :model-value="startDate ? dateFormat(startDate) : ''"
-        >
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="primary"
-            />
-          </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="startDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="startDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
+      <q-input
+        :dense="dense"
+        :outlined="outlined"
+        :readonly="readonly"
+        label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
+        class="col-12"
+        v-model="registrationNo"
+      />
+      <VueDatePicker
+        utc
+        autoApply
+        v-model="startDate"
+        :locale="'th'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-6"
+      >
+        <template #year="{ value }">
+          {{ value + 543 }}
+        </template>
+        <template #trigger>
+          <q-input
+            label="วันที่เริ่มงาน"
+            :dense="dense"
+            :outlined="outlined"
+            :readonly="readonly"
+            :model-value="startDate ? dateFormat(startDate) : ''"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+            <template v-slot:append>
+              <q-icon
+                v-if="startDate && !readonly"
+                name="mdi-close"
+                class="cursor-pointer"
+                size="xs"
+                @click="startDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
 
-    <VueDatePicker
-      utc
-      autoApply
-      v-model="retireDate"
-      :locale="'th'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-6"
+      <VueDatePicker
+        utc
+        autoApply
+        v-model="retireDate"
+        :locale="'th'"
+        :enableTimePicker="false"
+        :disabled="readonly"
+        class="col-6"
+      >
+        <template #year="{ value }">
+          {{ value + 543 }}
+        </template>
+        <template #trigger>
+          <q-input
+            label="วันที่พ้นสภาพพนักงาน"
+            :dense="dense"
+            :outlined="outlined"
+            :readonly="readonly"
+            :model-value="retireDate ? dateFormat(retireDate) : ''"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                size="xs"
+                name="mdi-calendar-blank-outline"
+                class="cursor-pointer"
+                color="primary"
+              />
+            </template>
+            <template v-slot:append>
+              <q-icon
+                v-if="retireDate && !readonly"
+                name="mdi-close"
+                class="cursor-pointer"
+                size="xs"
+                @click="retireDate = undefined"
+              />
+            </template>
+          </q-input>
+        </template>
+      </VueDatePicker>
+      <q-select
+        v-if="userType === 'MESSENGER'"
+        :dense="dense"
+        :outlined="outlined"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        emit-value
+        map-options
+        options-dense
+        label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
+        class="col-12"
+        bg-color="white"
+        option-label="label"
+        option-value="value"
+        v-model="responsibleArea"
+        :options="userStore.userOption.responsibleAreaOpts"
+      />
+    </div>
+    <div
+      v-if="userType === 'DELEGATE'"
+      class="row col-12"
+      style="row-gap: 16px"
     >
-      <template #year="{ value }">
-        {{ value + 543 }}
-      </template>
-      <template #trigger>
-        <q-input
-          label="วันที่พ้นสภาพพนักงาน"
-          :dense="dense"
-          :outlined="outlined"
-          :readonly="readonly"
-          :model-value="retireDate ? dateFormat(retireDate) : ''"
-        >
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="primary"
-            />
-          </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="retireDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="retireDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
-
-    <VueDatePicker
-      utc
-      autoApply
-      v-model="birthDate"
-      :locale="'th'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-3"
+      <q-input
+        :dense="dense"
+        :outlined="outlined"
+        :readonly="readonly"
+        label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
+        class="col-12"
+        v-model="discountCondition"
+        type="textarea"
+      />
+    </div>
+    <div
+      v-if="userType === 'AGENCY'"
+      class="row col-12 q-col-gutter-md"
+      style="margin-left: 0px; padding-left: 0px"
     >
-      <template #year="{ value }">
-        {{ value + 543 }}
-      </template>
-      <template #trigger>
-        <q-input
-          label="วันเดือนปีเกิด"
-          :dense="dense"
-          :outlined="outlined"
-          :readonly="readonly"
-          :model-value="birthDate ? dateFormat(birthDate) : ''"
-        >
-          <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="birthDate && !readonly"
-              name="mdi-close"
-              class="cursor-pointer"
-              size="xs"
-              @click="birthDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
-    <q-input
-      :dense="dense"
-      :outlined="outlined"
-      readonly
-      label="อายุ"
-      class="col-3"
-      :model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
-    />
-    <q-select
-      v-if="userType === 'MESSENGER'"
-      :dense="dense"
-      :outlined="outlined"
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      emit-value
-      map-options
-      options-dense
-      label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
-      class="col-12"
-      bg-color="white"
-      option-label="label"
-      option-value="value"
-      v-model="responsibleArea"
-      :options="userStore.userOption.responsibleAreaOpts"
-    />
-  </div>
-  <div v-if="userType === 'DELEGATE'" class="row col-12" style="row-gap: 16px">
-    <q-input
-      :dense="dense"
-      :outlined="outlined"
-      :readonly="readonly"
-      label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
-      class="col-12"
-      v-model="discountCondition"
-      type="textarea"
-    />
-  </div>
-  <div
-    v-if="userType === 'AGENCY'"
-    class="row col-12 q-col-gutter-md"
-    style="margin-left: 0px; padding-left: 0px"
-  >
-    <q-select
-      :dense="dense"
-      :outlined="outlined"
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      emit-value
-      map-options
-      options-dense
-      label="สัญชาติต้นทาง"
-      class="col-3"
-      bg-color="white"
-      option-label="label"
-      option-value="label"
-      v-model="sourceNationality"
-      :options="userStore.userOption.nationalityOpts"
-    />
-    <q-select
-      :dense="dense"
-      :outlined="outlined"
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      emit-value
-      map-options
-      options-dense
-      label="นำเข้าสัญชาติ"
-      class="col-3"
-      option-label="label"
-      option-value="label"
-      v-model="importNationality"
-      :options="userStore.userOption.nationalityOpts"
-    />
-    <q-select
-      :dense="dense"
-      :outlined="outlined"
-      :readonly="readonly"
-      :hide-dropdown-icon="readonly"
-      emit-value
-      map-options
-      options-dense
-      label="สถานที่อบรม"
-      class="col-6"
-      option-label="label"
-      option-value="label"
-      v-model="trainingPlace"
-      :options="userStore.userOption.trainingPlaceOpts"
-    />
-    <q-input
-      :dense="dense"
-      :outlined="outlined"
-      :readonly="readonly"
-      label="ด่าน"
-      class="col-6"
-      v-model="checkPoint"
-    />
-    <q-input
-      :dense="dense"
-      :outlined="outlined"
-      :readonly="readonly"
-      label="ด่าน ENG"
-      class="col-6"
-      v-model="checkPointEN"
-    />
-    <q-file
-      :dense="dense"
-      :outlined="outlined"
-      :readonly="readonly"
-      label="แบบเอกสารประจำตัว"
-      class="col-12"
-      v-model="idenDoc"
-      type="textarea"
-    />
+      <q-select
+        :dense="dense"
+        :outlined="outlined"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        emit-value
+        map-options
+        options-dense
+        label="สัญชาติต้นทาง"
+        class="col-3"
+        bg-color="white"
+        option-label="label"
+        option-value="label"
+        v-model="sourceNationality"
+        :options="userStore.userOption.nationalityOpts"
+      />
+      <q-select
+        :dense="dense"
+        :outlined="outlined"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        emit-value
+        map-options
+        options-dense
+        label="นำเข้าสัญชาติ"
+        class="col-3"
+        option-label="label"
+        option-value="label"
+        v-model="importNationality"
+        :options="userStore.userOption.nationalityOpts"
+      />
+      <q-select
+        :dense="dense"
+        :outlined="outlined"
+        :readonly="readonly"
+        :hide-dropdown-icon="readonly"
+        emit-value
+        map-options
+        options-dense
+        label="สถานที่อบรม"
+        class="col-6"
+        option-label="label"
+        option-value="label"
+        v-model="trainingPlace"
+        :options="userStore.userOption.trainingPlaceOpts"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="outlined"
+        :readonly="readonly"
+        label="ด่าน"
+        class="col-6"
+        v-model="checkPoint"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="outlined"
+        :readonly="readonly"
+        label="ด่าน ENG"
+        class="col-6"
+        v-model="checkPointEN"
+      />
+      <q-file
+        :dense="dense"
+        :outlined="outlined"
+        :readonly="readonly"
+        label="แบบเอกสารประจำตัว"
+        class="col-12"
+        v-model="idenDoc"
+        type="textarea"
+      />
+    </div>
   </div>
 </template>

src/components/02_personnel-management/FormInformation.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import useUserStore from 'src/stores/user';
+
+const userStore = useUserStore();
+
+const hqId = defineModel<string | null | undefined>('hqId');
+const brId = defineModel<string | null | undefined>('brId');
+const userType = defineModel<string>('userType');
+const userRole = defineModel<string>('userRole');
+const userName = defineModel<string | null | undefined>('userName');
+const userCode = defineModel<string>('userCode');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+
+async function selectHq(id: string) {
+  if (!id) return;
+  brId.value = '';
+  userStore.userOption.brOpts = [];
+  await userStore.fetchBrOption(id);
+}
+</script>
+<template>
+  <div class="col-3 app-text-muted">• ข้อมูลพื้นฐาน</div>
+  <div class="col-9 row q-col-gutter-md">
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-6"
+      bg-color="white"
+      option-label="label"
+      option-value="value"
+      label="รหัสสำนักงานใหญ่"
+      v-model="hqId"
+      :options="userStore.userOption.hqOpts"
+      :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
+      @update:model-value="(val: string) => selectHq(val)"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-6"
+      label="รหัสสาขา"
+      bg-color="white"
+      option-label="label"
+      option-value="value"
+      v-model="brId"
+      :options="userStore.userOption.brOpts"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-3"
+      bg-color="white"
+      option-value="value"
+      option-label="label"
+      label="ประเภทผู้ใช้งาน"
+      v-model="userType"
+      :options="userStore.userOption.userTypeOpts"
+      :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-3"
+      bg-color="white"
+      label="สิทธิ์ผู้ใช้งาน"
+      option-label="label"
+      option-value="value"
+      v-model="userRole"
+      :options="userStore.userOption.roleOpts"
+      :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      emit-value
+      map-options
+      options-dense
+      hide-bottom-space
+      class="col-3"
+      bg-color="white"
+      label="ชื่อผู้ใช้งาน (Username)"
+      v-model="userName"
+      :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      readonly
+      hide-bottom-space
+      class="col-3"
+      bg-color="white"
+      label="รหัสพนักงาน"
+      v-model="userCode"
+    />
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mb-md"
+    style="padding-block: 0.5px; margin-top: 32px"
+  />
+</template>

src/components/02_personnel-management/FormName.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-const firstName = defineModel<string>('firstName');
-const lastName = defineModel<string>('lastName');
-const firstNameEN = defineModel<string>('firstNameEN');
-const lastNameEN = defineModel<string>('lastNameEN');
-
-defineProps<{
-  dense?: boolean;
-  outlined?: boolean;
-  readonly?: boolean;
-}>();
-</script>
-<template>
-  <q-input
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    hide-bottom-space
-    class="col-3"
-    label="ชื่อ ภาษาไทย"
-    v-model="firstName"
-    :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
-  />
-  <q-input
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    hide-bottom-space
-    class="col-3"
-    label="นามสกุล ภาษาไทย"
-    v-model="lastName"
-    :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
-  />
-  <q-input
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    hide-bottom-space
-    class="col-3"
-    label="ชื่อ ภาษาอังกฤษ"
-    v-model="firstNameEN"
-    :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
-  />
-  <q-input
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    hide-bottom-space
-    class="col-3"
-    label="นามสกุล ภาษาอังกฤษ"
-    v-model="lastNameEN"
-    :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
-  />
-</template>

src/components/02_personnel-management/FormPerson.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import useUserStore from 'src/stores/user';
+import { dateFormat } from 'src/utils/datetime';
+
+const userStore = useUserStore();
+
+const firstName = defineModel<string>('firstName');
+const lastName = defineModel<string>('lastName');
+const firstNameEN = defineModel<string>('firstNameEN');
+const lastNameEN = defineModel<string>('lastNameEN');
+const telephoneNo = defineModel<string>('telephoneNo');
+const email = defineModel<string>('email');
+const gender = defineModel<string>('gender');
+const birthDate = defineModel<Date | null>('birthDate');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">• ข้อมูลบุคลากร</div>
+  <div class="col-9 row q-col-gutter-md">
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-3"
+      label="ชื่อ ภาษาไทย"
+      v-model="firstName"
+      :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-3"
+      label="นามสกุล ภาษาไทย"
+      v-model="lastName"
+      :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-3"
+      label="ชื่อ ภาษาอังกฤษ"
+      v-model="firstNameEN"
+      :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-3"
+      label="นามสกุล ภาษาอังกฤษ"
+      v-model="lastNameEN"
+      :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      class="col-6"
+      label="เบอร์โทร"
+      v-model="telephoneNo"
+      mask="##########"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="อีเมล"
+      class="col-6"
+      v-model="email"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      label="เพศ"
+      class="col-3"
+      bg-color="white"
+      option-label="label"
+      option-value="value"
+      v-model="gender"
+      :options="userStore.userOption.genderOpts"
+    />
+    <VueDatePicker
+      utc
+      autoApply
+      v-model="birthDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-3"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          label="วันเดือนปีเกิด"
+          :dense="dense"
+          :outlined="outlined"
+          :readonly="readonly"
+          :model-value="birthDate ? dateFormat(birthDate) : ''"
+        >
+          <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="birthDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="birthDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      readonly
+      label="อายุ"
+      class="col-3"
+      :model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
+    />
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mb-md"
+    style="padding-block: 0.5px; margin-top: 32px"
+  />
+</template>

src/components/02_personnel-management/FormTop.vue

@@ -1,124 +0,0 @@
-<script setup lang="ts">
-import useUserStore from 'src/stores/user';
-
-const userStore = useUserStore();
-
-const hqId = defineModel<string | null | undefined>('hqId');
-const brId = defineModel<string | null | undefined>('brId');
-const userType = defineModel<string>('userType');
-const userRole = defineModel<string>('userRole');
-const userName = defineModel<string | null | undefined>('userName');
-const userCode = defineModel<string>('userCode');
-
-defineProps<{
-  dense?: boolean;
-  outlined?: boolean;
-  readonly?: boolean;
-}>();
-
-async function selectHq(id: string) {
-  if (!id) return;
-  brId.value = '';
-  userStore.userOption.brOpts = [];
-  await userStore.fetchBrOption(id);
-}
-</script>
-<template>
-  <q-select
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    :hide-dropdown-icon="readonly"
-    emit-value
-    map-options
-    options-dense
-    hide-bottom-space
-    class="col-6"
-    bg-color="white"
-    option-label="label"
-    option-value="value"
-    label="รหัสสำนักงานใหญ่"
-    v-model="hqId"
-    :options="userStore.userOption.hqOpts"
-    :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
-    @update:model-value="(val: string) => selectHq(val)"
-  />
-  <q-select
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    :hide-dropdown-icon="readonly"
-    emit-value
-    map-options
-    options-dense
-    hide-bottom-space
-    class="col-6"
-    label="รหัสสาขา"
-    bg-color="white"
-    option-label="label"
-    option-value="value"
-    v-model="brId"
-    :options="userStore.userOption.brOpts"
-  />
-  <q-select
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    :hide-dropdown-icon="readonly"
-    emit-value
-    map-options
-    options-dense
-    hide-bottom-space
-    class="col-3"
-    bg-color="white"
-    option-value="value"
-    option-label="label"
-    label="ประเภทผู้ใช้งาน"
-    v-model="userType"
-    :options="userStore.userOption.userTypeOpts"
-    :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
-  />
-  <q-select
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    :hide-dropdown-icon="readonly"
-    emit-value
-    map-options
-    options-dense
-    hide-bottom-space
-    class="col-3"
-    bg-color="white"
-    label="สิทธิ์ผู้ใช้งาน"
-    option-label="label"
-    option-value="value"
-    v-model="userRole"
-    :options="userStore.userOption.roleOpts"
-    :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
-  />
-  <q-input
-    v-if="userName"
-    :dense="dense"
-    :outlined="outlined"
-    :readonly="readonly"
-    emit-value
-    map-options
-    options-dense
-    hide-bottom-space
-    class="col-3"
-    bg-color="white"
-    label="ชื่อผู้ใช้งาน (Username)"
-    v-model="userName"
-    :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
-  />
-  <q-input
-    :dense="dense"
-    :outlined="outlined"
-    readonly
-    hide-bottom-space
-    :class="userName ? 'col-3' : 'col-6'"
-    bg-color="white"
-    label="รหัสพนักงาน"
-    v-model="userCode"
-  />
-</template>

src/components/FormDialog.vue

@@ -1,24 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
-
-import { Province, District, SubDistrict } from 'stores/address';
-import useAddressStore from 'stores/address';
+import FormAddress from './02_personnel-management/FormAddress.vue';
 
 defineProps<{
   title: string;
   addressTitle?: string;
-  addressENTitle?: string;
+  addressTitleEN?: string;
+  addressSeparator?: boolean;
   submit?: (...args: unknown[]) => void;
   close?: (...args: unknown[]) => void;
 }>();
 
-defineExpose({
-  fetchDistrict,
-  fetchSubDistrict,
-});
-
-const adrressStore = useAddressStore();
 const modal = defineModel('modal', { default: false });
 const address = defineModel('address', { default: '' });
 const addressEN = defineModel('addressEN', { default: '' });
@@ -26,78 +18,22 @@ const provinceId = defineModel<string | null | undefined>('provinceId');
 const districtId = defineModel<string | null | undefined>('districtId');
 const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string>('zipCode', { default: '' });
-
-const addrOptions = ref<{
-  provinceOps?: Province[];
-  districtOps?: District[];
-  subDistrictOps?: SubDistrict[];
-}>({});
-
-async function fetchProvince() {
-  const result = await adrressStore.fetchProvince();
-  if (result) {
-    addrOptions.value.provinceOps = result;
-  }
-}
-
-async function fetchDistrict(id: string | undefined) {
-  if (id) {
-    const result = await adrressStore.fetchDistrictByProvinceId(id);
-    if (result) {
-      addrOptions.value.districtOps = result;
-    }
-  }
-}
-
-async function fetchSubDistrict(id: string | undefined) {
-  if (id) {
-    const result = await adrressStore.fetchSubDistrictByProvinceId(id);
-    if (result) {
-      addrOptions.value.subDistrictOps = result;
-    }
-  }
-}
-
-async function selectProvince(id: string) {
-  if (!id) return;
-  districtId.value = undefined;
-  subDistrictId.value = undefined;
-  addrOptions.value.districtOps = [];
-  addrOptions.value.subDistrictOps = [];
-  zipCode.value = '';
-  await fetchDistrict(id);
-}
-
-async function selectDistrict(id: string) {
-  if (!id) return;
-  subDistrictId.value = undefined;
-  zipCode.value = '';
-  await fetchSubDistrict(id);
-}
-
-async function selectSubDistrict(id: string) {
-  if (!id) return;
-  zipCode.value =
-    addrOptions.value.subDistrictOps
-      ?.filter((x) => x.id === id)
-      .map((x) => x.zipCode)[0] ?? '';
-}
-
-onMounted(async () => {
-  await fetchProvince();
-});
 </script>
 <template>
   <q-dialog full-width v-model="modal" @hide="close">
-    <AppBox style="padding: 0; border-radius: var(--radius-2); max-width: 80%">
+    <AppBox
+      style="
+        padding: 0;
+        border-radius: var(--radius-2);
+        max-width: 80%;
+        max-height: 100%;
+      "
+    >
       <q-form greedy @submit.prevent @validation-success="submit">
         <!-- header -->
-        <q-card-section class="form-header">
-          <div class="row items-center justity-between">
-            <div
-              class="col text-subtitle1 text-weight-bold"
-              style="color: hsl(var(--info-bg))"
-            >
+        <div class="form-header q-py-sm q-pr-lg">
+          <div class="row items-center">
+            <div class="col text-subtitle1 text-weight-bold text-center">
               {{ title }}
             </div>
             <q-btn
@@ -112,222 +48,89 @@ onMounted(async () => {
               @click="close"
             />
           </div>
-        </q-card-section>
-
-        <!-- form-top -->
-        <div class="form-body-top" :class="{ dark: $q.dark.isActive }">
-          <q-card-section class="column col-12">
-            <div class="row q-col-gutter-x-md" style="row-gap: 16px">
-              <slot name="top"></slot>
-            </div>
-          </q-card-section>
         </div>
 
-        <!-- form-mid -->
-        <div class="row" style="overflow-y: auto; max-height: 50vh">
+        <!-- body -->
+        <div
+          class="row form-body q-pa-lg"
+          :class="{ dark: $q.dark.isActive }"
+          :style="$q.screen.gt.sm ? '' : 'overflow-y: auto; max-height: 75vh'"
+        >
           <!-- prepend -->
-          <q-card-section
-            class="column col-2"
+          <div
+            class="column"
+            :class="$q.screen.gt.sm ? 'col-2  q-pr-lg' : 'col-12'"
             v-if="$slots.prepend && !$slots.append"
           >
             <slot name="prepend"></slot>
-          </q-card-section>
+          </div>
+
           <!-- center -->
-          <q-card-section
-            class="column"
-            :class="`${$slots.prepend ? 'col-10' : $slots.append ? 'col-6' : 'col-12'}`"
+          <AppBox
+            bordered
+            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"
           >
             <div
-              class="row inline col-12 q-col-gutter-x-md"
-              style="row-gap: 16px"
+              class="row col-12 q-col-gutter-y-md q-pr-md"
+              :style="$q.screen.gt.sm ? 'overflow-y: auto; height: 60vh' : ''"
             >
-              <slot name="midTop"></slot>
-              <div class="col-12">
-                {{ $t(addressTitle || 'address') }}
-              </div>
-              <q-input
-                hide-bottom-space
-                dense
-                outlined
-                id="Addr"
-                :label="$t('address')"
-                class="col-12"
-                v-model="address"
-                lazy-rules
-                :rules="[
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputAddressValidate'),
-                ]"
-              />
-              <q-select
-                hide-bottom-space
-                dense
-                outlined
-                emit-value
-                map-options
-                id="selectProvince"
-                v-model="provinceId"
-                option-value="id"
-                option-label="name"
-                :label="$t('province')"
-                class="col-3"
-                :options="addrOptions.provinceOps"
-                @update:model-value="(v: string) => selectProvince(v)"
-                lazy-rules
-                :rules="[
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputProvinceValidate'),
-                ]"
-              />
-              <q-select
-                hide-bottom-space
-                dense
-                outlined
-                emit-value
-                map-options
-                id="selectDistrict"
-                v-model="districtId"
-                option-value="id"
-                option-label="name"
-                :label="$t('district')"
-                class="col-3"
-                :options="addrOptions.districtOps"
-                @update:model-value="(v: string) => selectDistrict(v)"
-                lazy-rules
-                :rules="[
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputDistrictValidate'),
-                ]"
-              />
-              <q-select
-                hide-bottom-space
-                dense
-                outlined
-                emit-value
-                map-options
-                id="SelectSubDistrict"
-                v-model="subDistrictId"
-                option-value="id"
-                option-label="name"
-                :label="$t('subDistrict')"
-                class="col-3"
-                :options="addrOptions.subDistrictOps"
-                @update:model-value="(v: string) => selectSubDistrict(v)"
-                lazy-rules
-                :rules="[
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputSubDistrictValidate'),
-                ]"
-              />
-              <q-input
-                dense
-                readonly
-                outlined
-                id="zip"
-                :label="$t('zipCode')"
-                class="col-3"
-                v-model="zipCode"
-              />
-              <span class="col-12">{{ $t(addressTitle || 'address') }} EN</span>
-              <q-input
-                hide-bottom-space
-                dense
-                outlined
-                id="addressEN"
-                :label="$t('address')"
-                class="col-12"
-                v-model="addressEN"
-                lazy-rules
-                :rules="[
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputAddressValidate'),
-                ]"
-              />
-              <q-select
-                dense
-                outlined
-                emit-value
-                map-options
-                id="selectProvinceEN"
-                v-model="provinceId"
-                option-value="id"
-                option-label="nameEN"
-                :label="$t('province')"
-                class="col-3"
-                :options="addrOptions.provinceOps"
-                @update:model-value="(v: string) => selectProvince(v)"
-              />
-              <q-select
-                dense
-                outlined
-                emit-value
-                map-options
-                id="selectDistrictEN"
-                v-model="districtId"
-                option-value="id"
-                option-label="nameEN"
-                :label="$t('district')"
-                class="col-3"
-                :options="addrOptions.districtOps"
-                @update:model-value="(v: string) => selectDistrict(v)"
-              />
-              <q-select
-                dense
-                outlined
-                emit-value
-                map-options
-                id="SelectSubDistrictEN"
-                v-model="subDistrictId"
-                option-value="id"
-                option-label="nameEN"
-                :label="$t('subDistrict')"
-                class="col-3"
-                :options="addrOptions.subDistrictOps"
-                @update:model-value="(v: string) => selectSubDistrict(v)"
-              />
-              <q-input
-                dense
-                readonly
-                outlined
-                zip="zipEN"
-                :label="$t('zipCode')"
-                class="col-3"
-                v-model="zipCode"
-              />
-              <div class="col-12" v-if="$slots.midBottom">
-                <q-separator size="1px" />
-              </div>
-              <slot name="midBottom"></slot>
+              <slot name="information"></slot>
+              <slot name="person"></slot>
+              <slot name="address">
+                <FormAddress
+                  dense
+                  outlined
+                  :separator="addressSeparator"
+                  v-model:address="address"
+                  v-model:addressEN="addressEN"
+                  v-model:provinceId="provinceId"
+                  v-model:districtId="districtId"
+                  v-model:subDistrictId="subDistrictId"
+                  v-model:zipCode="zipCode"
+                  :addressTitle="addressTitle || ''"
+                  :addressTitleEN="addressTitleEN || ''"
+                  v-if="!$slots.address"
+                />
+              </slot>
+              <slot name="qr-code"></slot>
+              <slot name="location"></slot>
+              <slot name="by-type"></slot>
             </div>
-          </q-card-section>
+          </AppBox>
+
           <!-- append -->
-          <q-card-section
+          <q-item-section
             class="column col-6"
             v-if="$slots.append && !$slots.prepend"
           >
             <slot name="append"></slot>
-          </q-card-section>
+          </q-item-section>
         </div>
 
         <!-- footer -->
-        <q-card-section class="form-footer">
-          <div class="text-right">
-            <q-btn
-              dense
-              unelevated
-              id="submitBtn"
-              type="submit"
-              color="primary"
-              class="q-px-sm"
-              :label="$t('save')"
-            />
-          </div>
-        </q-card-section>
+        <div class="form-footer q-py-sm q-pr-lg text-right q-gutter-x-lg">
+          <q-btn
+            dense
+            outline
+            unelevated
+            id="cancelBtn"
+            class="q-px-md app-text-negative"
+            :label="$t('cancel')"
+            @click="close"
+            v-close-popup
+          />
+          <q-btn
+            dense
+            unelevated
+            id="submitBtn"
+            type="submit"
+            color="primary"
+            class="q-px-md"
+            :label="$t('save')"
+          />
+        </div>
       </q-form>
     </AppBox>
   </q-dialog>
@@ -348,7 +151,7 @@ onMounted(async () => {
   border-bottom: 1px solid var(--border-color);
 }
 
-.form-body-top {
+.form-body {
   --_body-bg: var(--sand-0);
   background-color: var(--_body-bg);
 

src/pages/02_personnel-management/MainPage.vue

@@ -17,8 +17,8 @@ import SelectorList from 'components/SelectorList.vue';
 import AddButton from 'components/AddButton.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import FormDialog from 'src/components/FormDialog.vue';
-import FormTop from 'src/components/02_personnel-management/FormTop.vue';
-import FormName from 'src/components/02_personnel-management/FormName.vue';
+import FormInformation from 'src/components/02_personnel-management/FormInformation.vue';
+import FormPerson from 'src/components/02_personnel-management/FormPerson.vue';
 import FormByType from 'src/components/02_personnel-management/FormByType.vue';
 
 const router = useRouter();
@@ -62,11 +62,11 @@ const isEdit = ref(false);
 const modal = ref(false);
 const status = ref(false);
 const userId = ref('');
-const code = ref('');
 const selectorLabel = ref('');
 const hqId = ref('');
 const brId = ref('');
 const username = ref('');
+const code = ref('');
 const formDialogRef = ref();
 const userStats = ref<BranchUserStats[]>();
 const typeStats = ref<UserTypeStats>();
@@ -416,34 +416,20 @@ watch(
   <!-- form -->
   <FormDialog
     ref="formDialogRef"
+    v-model:formData="formData"
     v-model:modal="modal"
-    v-model:address="formData.address"
-    v-model:addressEN="formData.addressEN"
-    v-model:provinceId="formData.provinceId"
-    v-model:districtId="formData.districtId"
-    v-model:subDistrictId="formData.subDistrictId"
-    v-model:zipCode="formData.zipCode"
+    v-model:hqId="hqId"
+    v-model:brId="brId"
+    v-model:username="username"
+    v-model:code="code"
     title="เพิ่มบุคลากร"
     addressTitle="ที่อยู่พนักงาน"
     addressENTitle="ที่อยู่พนักงาน ENG"
     :submit="() => onSubmit()"
     :close="() => onClose()"
   >
-    <template #top>
-      <FormTop
-        dense
-        outlined
-        v-model:hqId="hqId"
-        v-model:brId="brId"
-        v-model:userType="formData.userType"
-        v-model:userRole="formData.userRole"
-        v-model:userName="username"
-        v-model:userCode="code"
-      />
-    </template>
-
     <template #prepend>
-      <div class="q-pl-md text-center">
+      <div class="text-center">
         <div class="upload-img-preview">
           <q-img
             v-if="urlProfile"
@@ -493,29 +479,44 @@ watch(
       </div>
     </template>
 
-    <template #midTop>
-      <FormName
+    <template #information>
+      <FormInformation
         dense
         outlined
+        separator
+        :addressSeparator="formData.userType"
+        v-model:hqId="hqId"
+        v-model:brId="brId"
+        v-model:userType="formData.userType"
+        v-model:userRole="formData.userRole"
+        v-model:userName="username"
+        v-model:userCode="code"
+      />
+    </template>
+    <template #person>
+      <FormPerson
+        dense
+        outlined
+        separator
         v-model:firstName="formData.firstName"
         v-model:lastName="formData.lastName"
         v-model:firstNameEN="formData.firstNameEN"
         v-model:lastNameEN="formData.lastNameEN"
+        v-model:telephoneNo="formData.telephoneNo"
+        v-model:email="formData.email"
+        v-model:gender="formData.gender"
+        v-model:birthDate="formData.birthDate"
       />
     </template>
-
-    <template #midBottom v-if="formData.userType">
+    <template #by-type>
       <FormByType
         dense
         outlined
+        separator
         v-model:userType="formData.userType"
-        v-model:telephoneNo="formData.telephoneNo"
-        v-model:gender="formData.gender"
-        v-model:email="formData.email"
         v-model:registrationNo="formData.registrationNo"
         v-model:startDate="formData.startDate"
         v-model:retireDate="formData.retireDate"
-        v-model:birthDate="formData.birthDate"
         v-model:responsibleArea="formData.responsibleArea"
         v-model:discountCondition="formData.discountCondition"
         v-model:sourceNationality="formData.sourceNationality"

src/pages/02_personnel-management/person-info/MainPage.vue

@@ -12,8 +12,8 @@ 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/FormTop.vue';
-import FormName from 'src/components/02_personnel-management/FormName.vue';
+import FormTop from 'src/components/02_personnel-management/FormInfomation.vue';
+import FormName from 'src/components/02_personnel-management/FormPerson.vue';
 import FormByType from 'src/components/02_personnel-management/FormByType.vue';
 import useAddressStore, {
   District,