From ba3c9b1a119239a0509a3f133dde585007551511 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 10 Apr 2024 13:57:17 +0700
Subject: [PATCH 1/6] refactor: form space

---
 src/components/FormDialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index ee1cea71..928934c6 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -123,7 +123,7 @@ watch(provinceId, (v) => {
         <div class="row" style="overflow-y: auto; max-height: 50vh">
           <!-- prepend -->
           <q-card-section
-            class="column col-4"
+            class="column col-2"
             v-if="$slots.prepend && !$slots.append"
           >
             <slot name="prepend"></slot>
@@ -131,7 +131,7 @@ watch(provinceId, (v) => {
           <!-- center -->
           <q-card-section
             class="column"
-            :class="`${$slots.prepend ? 'col-8' : $slots.append ? 'col-6' : 'col-12'}`"
+            :class="`${$slots.prepend ? 'col-10' : $slots.append ? 'col-6' : 'col-12'}`"
           >
             <div
               class="row inline col-12 q-col-gutter-x-md"

From 075d9cfe1a80bcd2f385c35c90a4e2c3cbd65d7b Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 10 Apr 2024 13:57:39 +0700
Subject: [PATCH 2/6] fix: selector count

---
 src/components/SelectorList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectorList.vue b/src/components/SelectorList.vue
index fcc26258..c5cc97a7 100644
--- a/src/components/SelectorList.vue
+++ b/src/components/SelectorList.vue
@@ -28,7 +28,7 @@ defineProps<{
         @click="selector = v.label"
       >
         <q-item-section>{{ $t(v.label) }}</q-item-section>
-        <div class="dot text-weight-bold">1</div>
+        <div class="dot text-weight-bold">{{ v.count }}</div>
       </q-item>
     </q-list>
   </AppBox>

From 44b3fa97aaddf8fbcfed130bd120fa4ae72bfcdf Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 10 Apr 2024 13:58:14 +0700
Subject: [PATCH 3/6] refactor: personCard emit

---
 src/components/home/PersonCard.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index ce416225..ab17ebcd 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -7,6 +7,7 @@ import { Icon } from '@iconify/vue';
 
 defineProps<{
   list: {
+    id: string;
     name: string;
     detail: { label: string; value: string }[];
     male?: boolean;
@@ -18,6 +19,11 @@ defineProps<{
   detailColumnCount?: number;
 }>();
 
+defineEmits<{
+  (e: 'deleteCard', id: string): void;
+  (e: 'updateCard', id: string): void;
+}>();
+
 const status = ref(false);
 </script>
 
@@ -55,7 +61,11 @@ const status = ref(false);
                     {{ $t('edit') }}
                   </q-item-section>
                 </q-item>
-                <q-item clickable v-close-popup>
+                <q-item
+                  clickable
+                  @click="$emit('deleteCard', v.id)"
+                  v-close-popup
+                >
                   <q-item-section class="col-4">
                     <q-icon
                       class="full-width"

From e2b954965e593aefd9468b59ef34f80e8e780b82 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 10 Apr 2024 13:59:13 +0700
Subject: [PATCH 4/6] feat: branch userStats (store, type)

---
 src/stores/branch/index.ts | 25 +++++++++++++++++++++++++
 src/stores/branch/types.ts |  7 +++++++
 2 files changed, 32 insertions(+)

diff --git a/src/stores/branch/index.ts b/src/stores/branch/index.ts
index 6c13dd48..0c00ed0d 100644
--- a/src/stores/branch/index.ts
+++ b/src/stores/branch/index.ts
@@ -225,6 +225,29 @@ const useBranchStore = defineStore('api-branch', () => {
     return false;
   }
 
+  async function userStats(
+    userType: string,
+    flow?: {
+      sessionId: string;
+      refTransactionId: string;
+      transactionId: string;
+    },
+  ) {
+    const res = await api.get(`/branch/user-stats`, {
+      headers: {
+        'X-Session-Id': flow?.sessionId,
+        'X-Rtid': flow?.refTransactionId,
+        'X-Tid': flow?.transactionId,
+      },
+      data: userType
+    });
+
+    if (!res) return false;
+    if (res.status === 200) return res.data;
+
+    return false;
+  }
+
   return {
     data,
     fetchList,
@@ -237,6 +260,8 @@ const useBranchStore = defineStore('api-branch', () => {
     getUser,
     addUser,
     removeUser,
+
+    userStats,
   };
 });
 
diff --git a/src/stores/branch/types.ts b/src/stores/branch/types.ts
index b914933d..e2c90d44 100644
--- a/src/stores/branch/types.ts
+++ b/src/stores/branch/types.ts
@@ -47,3 +47,10 @@ export type BranchCreate = {
   provinceId?: string | null;
   headOfficeId?: string | null;
 };
+
+export type BranchUserStats = {
+  id: string,
+  nameEN: string,
+  name: string;
+  count: 0
+}

From 8e806c7c425495e44a90c95382e457aeb58b7ee1 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 10 Apr 2024 14:00:19 +0700
Subject: [PATCH 5/6] feat: userTypeStats (type, store)

---
 src/stores/user/index.ts | 22 ++++++++++++++++++++++
 src/stores/user/types.ts |  9 +++++++++
 2 files changed, 31 insertions(+)

diff --git a/src/stores/user/index.ts b/src/stores/user/index.ts
index 97171cc5..cbb68d6e 100644
--- a/src/stores/user/index.ts
+++ b/src/stores/user/index.ts
@@ -12,6 +12,7 @@ import {
 import axios from 'axios';
 
 const useUserStore = defineStore('api-user', () => {
+  const userStats = ref()
   const data = ref<Pagination<User[]>>();
 
   async function fetchAttachment(
@@ -344,6 +345,25 @@ const useUserStore = defineStore('api-user', () => {
     return res.data || true;
   }
 
+  async function typeStats(
+    flow?: {
+      sessionId: string;
+      refTransactionId: string;
+      transactionId: string;
+    },) {
+    const res = await api.get(`/user/type-stats`, {
+      headers: {
+        'X-Session-Id': flow?.sessionId,
+        'X-Rtid': flow?.refTransactionId,
+        'X-Tid': flow?.transactionId,
+      },
+    })
+    if (!res) return false;
+    if (res.status === 200) return res.data;
+
+    return false;
+  }
+
   return {
     data,
     fetchList,
@@ -360,6 +380,8 @@ const useUserStore = defineStore('api-user', () => {
     fetchAttachment,
     addAttachment,
     deleteAttachment,
+
+    typeStats,
   };
 });
 
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index 4a55fd2c..3e3a895e 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -69,6 +69,8 @@ export type UserCreate = {
   userType: string;
   keycloakId: string;
   profileImage: File;
+  birthDate?: Date | null;
+  responsibleArea: string,
 };
 
 export type UserAttachment = {
@@ -83,3 +85,10 @@ export type UserAttachmentCreate = {
 export type UserAttachmentDelete = {
   file: string[];
 };
+
+export type UserTypeStats = {
+  USER: number;
+  MESSENGER: number;
+  DELEGATE: number;
+  AGENCY: number;
+}

From fa3d67cd2f1b59c5d0266f61ae1b1c08501faec8 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 10 Apr 2024 14:00:55 +0700
Subject: [PATCH 6/6] refactor: Personnel => main

---
 .../02_personnel-management/MainPage.vue      | 636 +++++++++++++++---
 1 file changed, 557 insertions(+), 79 deletions(-)

diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 73ed558b..b2ddaa53 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import useUserStore from 'stores/user';
+import { ref, onMounted, watch } from 'vue';
+import { api } from 'src/boot/axios';
 import { storeToRefs } from 'pinia';
+import useUserStore from 'stores/user';
+import useBranchStore from 'src/stores/branch';
+
+import { UserCreate, UserTypeStats } from 'src/stores/user/types';
+import { BranchUserStats } from 'src/stores/branch/types';
+// import { dateFormat } from 'src/utils/datetime';
 
 import PersonCard from 'components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
@@ -10,72 +16,170 @@ import SelectorList from 'components/SelectorList.vue';
 import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import FormDialog from 'src/components/FormDialog.vue';
+import GlobalDialog from 'components/GlobalDialog.vue';
 
+const branchStore = useBranchStore();
 const userStore = useUserStore();
 const { data: userData } = storeToRefs(userStore);
 
-onMounted(async () => {
-  await userStore.fetchList();
+const defaultFormData = {
+  provinceId: null,
+  districtId: null,
+  subDistrictId: null,
+  telephoneNo: '',
+  email: '',
+  zipCode: '',
+  gender: '',
+  addressEN: '',
+  address: '',
+  trainingPlace: null,
+  importNationality: null,
+  sourceNationality: null,
+  licenseExpireDate: null,
+  licenseIssueDate: null,
+  licenseNo: null,
+  discountCondition: '',
+  retireDate: null,
+  startDate: null,
+  registrationNo: null,
+  lastNameEN: '',
+  lastName: '',
+  firstNameEN: '',
+  firstName: '',
+  userRole: '',
+  userType: '',
+  keycloakId: '',
+  profileImage: null,
+  birthDate: null,
+  responsibleArea: '',
+};
+const userId = ref('');
+const modal = ref(false);
+const status = ref(false);
+const selectorLabel = ref('');
+const hqId = ref('');
+const brId = ref('');
+const username = ref('');
+const formData = ref<UserCreate>(structuredClone(defaultFormData));
+const userStats = ref<BranchUserStats[]>();
+const typeStats = ref<UserTypeStats>();
+const age = ref<number>();
+
+const confirmData = ref({
+  modal: false,
+  title: '',
+  message: '',
+  icon: '',
+  action: () => {},
 });
 
-const branchStat = ref([
-  { label: 'Branch A', amount: 1 },
-  { label: 'Branch B', amount: 5 },
-  { label: 'Branch C', amount: 3 },
-]);
-
-const selectorLabel = ref('');
-const modal = ref(false);
-
-const hqId = ref('');
-const branchId = ref('');
-
-const genderOptions = ref([
-  { label: 'ชาย', value: '1' },
-  { label: 'หญิง', value: '2' },
-]);
-
-const hqOptions = ref([
+const userTypeOpts = [
+  { label: 'พนักงาน', value: 'USER' },
+  { label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' },
+  { label: 'ตัวแทน', value: 'DELEGATE' },
+  { label: 'เอเจนซี่', value: 'AGENCY' },
+];
+const genderOpts = [
+  { label: 'ชาย', value: 'male' },
+  { label: 'หญิง', value: 'female' },
+];
+const hqOpts = ref([
   { label: '0000000001', value: '1' },
   { label: '0000000002', value: '2' },
 ]);
-const branchOptions = ref([
+const brOpts = ref([
   { label: '0000000001-1', value: '1' },
   { label: '0000000001-2', value: '2' },
 ]);
 
-const formData = ref({
-  hqId: '',
-  branchId: '',
-  tel: '',
-  gender: '',
-  email: '',
-  addressL: {
-    address: '',
-    province: '',
-    district: '',
-    subDistrict: '',
-    zip: '',
-  },
-  addressEng: {
-    address: '',
-    province: '',
-    district: '',
-    subDistrict: '',
-    zip: '',
-  },
-});
-
 const selectorList = [
   { label: 'personnelSelector1', count: 0 },
   { label: 'personnelSelector2', count: 0 },
   { label: 'personnelSelector3', count: 0 },
   { label: 'personnelSelector4', count: 0 },
-] satisfies InstanceType<typeof SelectorList>['$props']['list'];
+];
+
+async function createKeycloak() {
+  const res = await api.post('/keycloak/user', {
+    lastName: formData.value.lastNameEN,
+    firstName: formData.value.firstNameEN,
+    password: username.value,
+    username: username.value,
+  });
+  return res.data;
+}
+
+// function selectFile() {
+//   const fileInput = this.$refs.file;
+//   fileInput.pickFiles();
+// }
 
 function openDialog() {
   modal.value = true;
 }
+
+function onClose() {
+  modal.value = false;
+  Object.assign(formData.value, defaultFormData);
+  hqId.value = '';
+  brId.value = '';
+  username.value = '';
+  userId.value = '';
+  mapUserType(selectorLabel.value);
+}
+
+function submitConfirm() {
+  confirmData.value.modal = true;
+}
+
+async function onSubmit(id?: string) {
+  try {
+    if (id) {
+      await userStore.editById(id, formData.value);
+    } else {
+      formData.value.keycloakId = await createKeycloak();
+      await userStore.create(formData.value);
+    }
+  } finally {
+    modal.value = false;
+    await userStore.fetchList();
+  }
+}
+
+async function onDelete(id: string) {
+  await userStore.deleteById(id);
+  await userStore.fetchList();
+}
+
+function mapUserType(label: string) {
+  if (label === 'personnelSelector1') {
+    formData.value.userType = 'USER';
+  } else if (label === 'personnelSelector2') {
+    formData.value.userType = 'MESSENGER';
+  } else if (label === 'personnelSelector3') {
+    formData.value.userType = 'DELEGATE';
+  } else if (label === 'personnelSelector4') {
+    formData.value.userType = 'AGENCY';
+  }
+}
+
+onMounted(async () => {
+  await userStore.fetchList();
+  typeStats.value = await userStore.typeStats();
+  if ((await branchStore.userStats(formData.value.userType)) !== false) {
+    userStats.value = await branchStore.userStats(formData.value.userType);
+  }
+});
+
+watch(
+  () => selectorLabel.value,
+  async (label) => {
+    mapUserType(label);
+    if ((await branchStore.userStats(label)) !== false) {
+      userStats.value = await branchStore.userStats(label);
+    }
+  },
+);
 </script>
 
 <template>
@@ -108,7 +212,16 @@ function openDialog() {
           />
         </div>
         <div class="row col full-width" style="overflow-x: auto">
-          <StatCardComponent :branch="branchStat" class="no-wrap" />
+          <StatCardComponent
+            v-if="userStats"
+            :branch="
+              userStats.map((v) => ({
+                amount: v.count,
+                label: $i18n.locale === 'en-US' ? v.nameEN : v.name,
+              }))
+            "
+            class="no-wrap"
+          />
         </div>
       </AppBox>
     </div>
@@ -118,18 +231,21 @@ function openDialog() {
       <PersonCard
         :list="
           userData?.result.map((v) => ({
+            id: v.id,
             img: `${v.profileImageUrl}`,
             name: `${v.firstName} ${v.lastName}`,
             male: v.gender === 'male',
             female: v.gender === 'female',
             detail: [
-              { label: 'Email', value: v.email },
-              { label: 'Telephone No', value: v.telephoneNo },
+              { label: 'ตำแหน่ง', value: v.userType },
+              { label: 'โทรศัพท์', value: v.telephoneNo },
+              { label: 'อีเมล', value: v.email },
             ],
-            badge: v.code.slice(0, 10),
+            badge: v.code,
             disabled: v.status === 'INACTIVE',
           })) || []
         "
+        @deleteCard="onDelete"
       />
       <div
         class="column"
@@ -156,13 +272,20 @@ function openDialog() {
     </AppBox>
   </div>
 
+  <!-- form -->
   <FormDialog
     v-model:modal="modal"
-    v-model:addressL="formData.addressL"
-    v-model:addressEng="formData.addressEng"
+    v-model:address="formData.address"
+    v-model:addressEN="formData.addressEN"
+    v-model:provinceId="formData.provinceId as string"
+    v-model:districtId="formData.districtId as string"
+    v-model:subDistrictId="formData.subDistrictId as string"
+    v-model:zipCode="formData.zipCode"
     title="เพิ่มบุคลากร"
-    addressLocaleTitle="ที่อยู่พนักงาน"
-    addressEngTitle="ที่อยู่พนักงาน ENG"
+    addressTitle="ที่อยู่พนักงาน"
+    addressENTitle="ที่อยู่พนักงาน ENG"
+    :submit="() => submitConfirm()"
+    :close="() => onClose()"
   >
     <template #top>
       <q-select
@@ -170,60 +293,174 @@ function openDialog() {
         outlined
         emit-value
         map-options
-        v-model="hqId"
         class="col-6"
-        option-value="value"
-        option-label="label"
-        label="รหัสสำนักงานใหญ่"
-        :options="hqOptions"
         bg-color="white"
+        option-label="label"
+        option-value="value"
+        label="รหัสสำนักงานใหญ่"
+        v-model="hqId"
+        :options="hqOpts"
+        :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
       />
       <q-select
         dense
         outlined
         emit-value
         map-options
-        v-model="branchId"
         class="col-6"
+        label="รหัสสาขา"
+        bg-color="white"
+        option-label="label"
+        option-value="value"
+        v-model="brId"
+        :options="brOpts"
+        :rules="[(val: string) => !!val || 'กรุณาเลือกสาขา']"
+      />
+      <q-select
+        dense
+        outlined
+        emit-value
+        map-options
+        class="col-3"
+        bg-color="white"
         option-value="value"
         option-label="label"
-        label="รหัสสาขา"
-        :options="branchOptions"
-        bg-color="white"
+        label="ประเภทผู้ใช้งาน"
+        v-model="formData.userType"
+        :options="userTypeOpts"
+        :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
       />
+      <q-select
+        dense
+        outlined
+        emit-value
+        map-options
+        class="col-3"
+        bg-color="white"
+        label="สิทธิ์ผู้ใช้งาน"
+        option-label="label"
+        option-value="value"
+        v-model="formData.userRole"
+        :options="brOpts"
+        :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
+      />
+      <q-input
+        dense
+        outlined
+        class="col-3"
+        bg-color="white"
+        label="ชื่อผู้ใช้งาน (Username)"
+        v-model="username"
+        :rules="[(val: string) => val.length > 2 || 'กรุณากรอกชื่อผู้ใช้งาน']"
+      />
+      <q-input
+        dense
+        outlined
+        readonly
+        class="col-3"
+        bg-color="white"
+        label="รหัสพนักงาน"
+        v-model="userId"
+      />
+      <!--         :rules="[(val: string) => !!val || 'กรุณากรอกรหัสพนักงาน']"
+ -->
     </template>
 
     <template #prepend>
-      <div>asd</div>
+      <div class="q-pl-md text-center">
+        <div class="upload-img-preview">
+          <q-icon
+            name="mdi-account full-height"
+            size="3vw"
+            style="color: var(--border-color)"
+          />
+        </div>
+        <q-btn
+          dense
+          unelevated
+          outlined
+          padding="8px"
+          class="upload-img-btn q-my-md full-width"
+          label="อัปโหลดรูปภาพ"
+          :class="{ dark: $q.dark.isActive }"
+          @click="selectFile()"
+        />
+        <div class="text-left">
+          <q-toggle
+            dense
+            size="md"
+            color="primary"
+            v-model="status"
+            padding="none"
+            class="q-pr-md"
+          />
+          <span>สถานะผู้ใช้งาน</span>
+        </div>
+        <q-file
+          dense
+          outlined
+          ref="file"
+          style="visibility: hidden"
+          v-model="formData.profileImage"
+        />
+      </div>
     </template>
 
     <template #midTop>
-      <!-- <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
-      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
-      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" />
-      <q-input dense outlined label="รหัสไปรษณีย์" class="col-3" /> -->
+      <q-input
+        dense
+        outlined
+        class="col-3"
+        label="ชื่อ ภาษาไทย"
+        v-model="formData.firstName"
+        :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
+      />
+      <q-input
+        dense
+        outlined
+        class="col-3"
+        label="นามสกุล ภาษาไทย"
+        v-model="formData.lastName"
+        :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
+      />
+      <q-input
+        dense
+        outlined
+        class="col-3"
+        label="ชื่อ ภาษาอังกฤษ"
+        v-model="formData.firstNameEN"
+        :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
+      />
+      <q-input
+        dense
+        outlined
+        class="col-3"
+        label="นามสกุล ภาษาอังกฤษ"
+        v-model="formData.lastNameEN"
+        :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
+      />
     </template>
 
     <template #midBottom>
       <q-input
         dense
         outlined
-        label="เบอร์โทร"
         class="col-3"
-        v-model="formData.tel"
+        label="เบอร์โทร"
+        v-model="formData.telephoneNo"
       />
       <q-select
         dense
         outlined
         emit-value
         map-options
-        v-model="formData.gender"
-        class="col-3"
-        option-value="value"
-        option-label="label"
         label="เพศ"
-        :options="genderOptions"
+        class="col-3"
         bg-color="white"
+        option-label="label"
+        option-value="value"
+        v-model="formData.gender"
+        :options="genderOpts"
       />
       <q-input
         dense
@@ -232,15 +469,256 @@ function openDialog() {
         class="col-6"
         v-model="formData.email"
       />
-    </template>
+      <div
+        v-if="formData.userType === 'USER' || formData.userType === 'MESSENGER'"
+        class="row col-12 q-col-gutter-md"
+        style="margin-left: 0px; padding-left: 0px"
+      >
+        <q-input
+          dense
+          outlined
+          label="เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)"
+          class="col-12"
+          v-model="formData.registrationNo"
+        />
+        <VueDatePicker
+          utc
+          autoApply
+          v-model="formData.startDate"
+          :locale="'th'"
+          :enableTimePicker="false"
+          class="col-6"
+        >
+          <template #year="{ value }">
+            {{ value + 543 }}
+          </template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              label="วันที่เริ่มงาน"
+              v-model="formData.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="formData.startDate"
+                  name="mdi-close"
+                  class="cursor-pointer"
+                  size="xs"
+                  @click="formData.startDate = undefined"
+                />
+              </template>
+            </q-input>
+          </template>
+        </VueDatePicker>
 
-    <!-- <template #append>
-      <div style="background-color: blue">asd</div>
-    </template> -->
+        <VueDatePicker
+          utc
+          autoApply
+          v-model="formData.retireDate"
+          :locale="'th'"
+          :enableTimePicker="false"
+          class="col-6"
+        >
+          <template #year="{ value }">
+            {{ value + 543 }}
+          </template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              label="วันที่พ้นสภาพพนักงาน"
+              v-model="formData.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="formData.retireDate"
+                  name="mdi-close"
+                  class="cursor-pointer"
+                  size="xs"
+                  @click="formData.retireDate = undefined"
+                />
+              </template>
+            </q-input>
+          </template>
+        </VueDatePicker>
+
+        <VueDatePicker
+          utc
+          autoApply
+          v-model="formData.retireDate"
+          :locale="'th'"
+          :enableTimePicker="false"
+          class="col-3"
+        >
+          <template #year="{ value }">
+            {{ value + 543 }}
+          </template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              label="วันที่พ้นสภาพพนักงาน"
+              v-model="formData.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="formData.retireDate"
+                  name="mdi-close"
+                  class="cursor-pointer"
+                  size="xs"
+                  @click="formData.retireDate = undefined"
+                />
+              </template>
+            </q-input>
+          </template>
+        </VueDatePicker>
+        <q-input dense outlined label="อายุ" class="col-3" v-model="age" />
+        <q-select
+          v-if="formData.userType === 'MESSENGER'"
+          dense
+          outlined
+          emit-value
+          map-options
+          label="พื้นที่ ที่รับผิดชอบในการส่งเอกสาร"
+          class="col-12"
+          bg-color="white"
+          option-label="label"
+          option-value="value"
+          v-model="formData.responsibleArea"
+          :options="genderOpts"
+        />
+      </div>
+      <div
+        v-if="formData.userType === 'DELEGATE'"
+        class="row col-12"
+        style="row-gap: 16px"
+      >
+        <q-input
+          dense
+          outlined
+          label="เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน"
+          class="col-12"
+          v-model="formData.discountCondition"
+          type="textarea"
+        />
+      </div>
+      <div
+        v-if="formData.userType === 'AGENCY'"
+        class="row col-12 q-col-gutter-md"
+        style="margin-left: 0px; padding-left: 0px"
+      >
+        <q-select
+          dense
+          outlined
+          emit-value
+          map-options
+          label="สัญชาติต้นทาง"
+          class="col-3"
+          bg-color="white"
+          option-label="label"
+          option-value="value"
+          v-model="formData.sourceNationality"
+          :options="genderOpts"
+        />
+        <q-select
+          dense
+          outlined
+          emit-value
+          map-options
+          label="นำเข้าสัญชาติ"
+          class="col-3"
+          bg-color="white"
+          option-label="label"
+          option-value="value"
+          v-model="formData.importNationality"
+          :options="genderOpts"
+        />
+        <q-input
+          dense
+          outlined
+          label="สถานที่อบรม"
+          class="col-6"
+          v-model="formData.trainingPlace"
+        />
+        <q-input
+          dense
+          outlined
+          label="ด่าน"
+          class="col-6"
+          v-model="formData.trainingPlace"
+        />
+        <q-input
+          dense
+          outlined
+          label="ด่าน ENG"
+          class="col-6"
+          v-model="formData.trainingPlace"
+        />
+        <q-input
+          dense
+          outlined
+          label="แบบเอกสารประจำตัว"
+          class="col-12"
+          v-model="formData.discountCondition"
+          type="textarea"
+        />
+      </div>
+    </template>
   </FormDialog>
+
+  <GlobalDialog
+    :v-model="confirmData.modal"
+    :title="confirmData.title"
+    :message="confirmData.message"
+    :icon="confirmData.icon"
+    :persistent="true"
+    :action="() => onSubmit()"
+  />
 </template>
 <style>
 .bg-white {
   background-color: var(--surface-1) !important;
 }
+
+.upload-img-preview {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-2);
+  height: 12vw;
+}
+
+.upload-img-btn {
+  color: hsl(var(--info-bg));
+  border: 1px solid hsl(var(--info-bg));
+  background-color: hsla(var(--info-bg) / 0.1);
+  border-radius: var(--radius-2);
+
+  &.dark {
+    background-color: transparent;
+  }
+}
 </style>