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>