diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index cc66adb93..ca4eb0155 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -1,11 +1,25 @@
 import env from "../index";
 
 const registryNew = `${env.API_URI}/org/profile/`;
+const metadata = `${env.API_URI}/org/metadata/`;
 
 export default {
   registryNew,
   registryNewByProfileId: (profileId: string) => `${registryNew}${profileId}`,
 
+  // metadata
+  profileNewGender: `${metadata}gender`,
+  profileNewReligion: `${metadata}religion`,
+  profileNewRelationship: `${metadata}relationship`,
+  profileNewBloodGroup: `${metadata}bloodGroup`,
+
+  // ประวัติส่วนตัว
+  profileNewProfileByProfileId: (profileId: string) =>
+    `${registryNew}${profileId}`,
+  profileNewProfileById: (dataId: string) => `${registryNew}${dataId}`,
+  profileNewProfileHisById: (dataId: string) =>
+    `${registryNew}history/${dataId}`,
+
   // บันทึกวันที่ไม่ได้รับเงินเดือนฯ
   profileNewNoPaid: `${registryNew}nopaid`,
   profileNewNoPaidByProfileId: (profileId: string) =>
@@ -83,23 +97,23 @@ export default {
   profileNewOtherHisById: (dataId: string) =>
     `${registryNew}other/history/${dataId}`,
 
-    // ข้อมูลครอบครัว
-profileNewFamily: `${registryNew}family`,
-profileNewFamilyByProfileId: (profileId: string) =>
-`${registryNew}family/${profileId}`,
-profileNewFamilyByFamilyId: (familyId: string) =>
-`${registryNew}family/${familyId}`,
-profileNewFamilyeHisByFamilyId: (familyId: string) =>
-`${registryNew}family/history/${familyId}`,
+  // ข้อมูลครอบครัว
+  profileNewFamily: `${registryNew}family`,
+  profileNewFamilyByProfileId: (profileId: string) =>
+    `${registryNew}family/${profileId}`,
+  profileNewFamilyByFamilyId: (familyId: string) =>
+    `${registryNew}family/${familyId}`,
+  profileNewFamilyeHisByFamilyId: (familyId: string) =>
+    `${registryNew}family/history/${familyId}`,
 
-    // วินัย
-profileNewDiscipline: `${registryNew}discipline`,
-profileNewDisciplineByProfileId: (profileId: string) =>
-`${registryNew}discipline/${profileId}`,
-profileNewDisciplineByDisciplineId: (disciplineId: string) =>
-`${registryNew}discipline/${disciplineId}`,
-profileNewDisciplineHisByDisciplineId: (disciplineId: string) =>
-`${registryNew}discipline/history/${disciplineId}`,
+  // วินัย
+  profileNewDiscipline: `${registryNew}discipline`,
+  profileNewDisciplineByProfileId: (profileId: string) =>
+    `${registryNew}discipline/${profileId}`,
+  profileNewDisciplineByDisciplineId: (disciplineId: string) =>
+    `${registryNew}discipline/${disciplineId}`,
+  profileNewDisciplineHisByDisciplineId: (disciplineId: string) =>
+    `${registryNew}discipline/history/${disciplineId}`,
 
     // ปฏิบัติราชการพิเศษ
 profileNewDuty: `${registryNew}duty`,
@@ -122,4 +136,9 @@ profileNewLeaveById:(id:string)=>`${registryNew}leave/${id}`,
 profileNewLeaveHistory:(id:string)=>`${registryNew}leave/history/${id}`,
 profileCheckDate:()=>`${env.API_URI}/leave/user/check`,
 profileNewLeaveType:()=>`${env.API_URI}/leave/type`,
+
+  /** ตำแหน่งเงินเดือน*/
+  profileSalaryNew: `${env.API_URI}/org/profileSalary`,
+  profileSalaryNewById: (id: string) =>
+    `${env.API_URI}/org/profileSalary/${id}`,
 };
diff --git a/src/modules/04_registry/components/Insignia.vue b/src/modules/04_registry/components/Insignia.vue
index 9c9af62f4..f20faedc4 100644
--- a/src/modules/04_registry/components/Insignia.vue
+++ b/src/modules/04_registry/components/Insignia.vue
@@ -588,7 +588,7 @@ const OpsFilter = ref<InsigniaOps>({
   insigniaOptions: [],
 });
 
-const note = ref<string>();
+const note = ref<string | null>();
 const insigniaType = ref<string>();
 const year = ref<number | null>(0);
 const no = ref<string>();
@@ -1356,7 +1356,7 @@ const selectData = async (props: DataProps) => {
   refCommandDateInput.value = props.row.refCommandDate
     ? convertDateDisplay(props.row.refCommandDate as Date)
     : "";
-  note.value = props.row.note;
+  note.value = props?.row?.note;
   await checkRowPage();
 };
 
@@ -1451,6 +1451,7 @@ const clickHistory = async (row: RequestItemsObject) => {
             e.refCommandDate == null ? null : new Date(e.refCommandDate),
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
+          note: e.note,
         });
       });
     })
diff --git a/src/modules/04_registry/interface/request/Insignia.ts b/src/modules/04_registry/interface/request/Insignia.ts
index 1a6266697..456adc6e4 100644
--- a/src/modules/04_registry/interface/request/Insignia.ts
+++ b/src/modules/04_registry/interface/request/Insignia.ts
@@ -17,11 +17,12 @@ interface RequestItemsObject {
   section: string;
   page: string;
   receiveDate: Date;
-  dateAnnounce: Date|string|null;
+  dateAnnounce: Date | string | null;
   refCommandNo: string;
-  refCommandDate: Date | null|string;
+  refCommandDate: Date | null | string;
   createdFullName: string;
   createdAt: Date;
+  note: string | null;
 }
 
 //columns
diff --git a/src/modules/04_registry/interface/response/Insignia.ts b/src/modules/04_registry/interface/response/Insignia.ts
index 4d26152a0..a68ed690f 100644
--- a/src/modules/04_registry/interface/response/Insignia.ts
+++ b/src/modules/04_registry/interface/response/Insignia.ts
@@ -17,6 +17,7 @@ interface ResponseObject {
   refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
+  note: string;
 }
 
 export type { ResponseObject };
diff --git a/src/modules/04_registryNew/components/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
index 72eae6878..902a31381 100644
--- a/src/modules/04_registryNew/components/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@@ -74,7 +74,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "สายงาน",
     sortable: true,
-    field: (v) => v.posType.posTypeName,
+    field: (v) => (v.posType ? v.posType.posTypeName : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -85,7 +85,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ระดับชั้นงาน",
     sortable: true,
-    field: (v) => v.posLevel.posLevelName,
+    field: (v) => (v.posLevel ? v.posLevel.posLevelName : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
index 7e0796b33..93e6c99fa 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
@@ -10,7 +10,6 @@ import { useCounterMixin } from "@/stores/mixin";
 import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
-import type { FormData } from "@/modules/04_registryNew/interface/request/DeclarationHonor";
 import type { ResponseObject } from "@/modules/04_registryNew/interface/response/DeclarationHonor";
 
 const $q = useQuasar();
@@ -29,20 +28,18 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 
-const declHonorData = reactive<FormData>({
-  id: "",
-  isActive: true,
+const id = ref<string>("");
+const issueDateYear = ref<number>(0);
+const declHonorForm = reactive<RequestItemsObject>({
   isDate: "false",
   issuer: "",
   detail: "",
   issueDate: null,
-  issueDateYear: 0,
   refCommandNo: "",
   refCommandDate: null,
 });
 
 const isEdit = ref<boolean>(false);
-const editRow = ref<boolean>(false);
 const myForm = ref<QForm>();
 const modal = ref<boolean>(false);
 const modelView = ref<string>("table");
@@ -234,21 +231,17 @@ async function addEditData(editStatus: boolean = false) {
   if (!profileId.value) return;
 
   const url = editStatus
-    ? config.API.profileNewHonorById(declHonorData.id)
+    ? config.API.profileNewHonorById(id.value)
     : config.API.profileNewHonor;
   const method = editStatus ? "patch" : "post";
   const reqBody: RequestItemsObject = {
+    ...declHonorForm,
     profileId: editStatus ? undefined : profileId.value,
-    isActive: declHonorData.isActive,
-    detail: declHonorData.detail,
+    isDate: declHonorForm.isDate === "true" ? true : false,
     issueDate:
-      declHonorData.isDate === "true"
-        ? declHonorData.issueDate
-        : new Date(`${declHonorData.issueDateYear}-01-01`),
-    issuer: declHonorData.issuer,
-    refCommandDate: declHonorData.refCommandDate,
-    refCommandNo: declHonorData.refCommandNo,
-    isDate: declHonorData.isDate === "true" ? true : false,
+      declHonorForm.isDate === true
+        ? declHonorForm.issueDate
+        : new Date(`${issueDateYear.value}-01-01`),
   };
 
   try {
@@ -262,57 +255,41 @@ async function addEditData(editStatus: boolean = false) {
   }
 }
 
-async function clickDelete(dataId: string) {
-  try {
-    await http.delete(config.API.profileNewHonorById(dataId));
-    success($q, "ลบข้อมูลสำเร็จ");
-    await fetchData();
-    modal.value = false;
-  } catch (error) {
-    messageError($q, error);
-  } finally {
-    hideLoader();
-  }
-}
+// async function clickDelete(dataId: string) {
+//   try {
+//     await http.delete(config.API.profileNewHonorById(dataId));
+//     success($q, "ลบข้อมูลสำเร็จ");
+//     await fetchData();
+//     modal.value = false;
+//   } catch (error) {
+//     messageError($q, error);
+//   } finally {
+//     hideLoader();
+//   }
+// }
 
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
-  editRow.value = false;
   isEdit.value = editStatus;
 
   if (editStatus && row) {
-    Object.assign(declHonorData, row);
-    declHonorData.isDate = row.isDate.toString();
-    declHonorData.issueDate = row.issueDate;
-    declHonorData.issueDateYear = new Date(row.issueDate).getFullYear();
-    declHonorData.refCommandDate = row.refCommandDate;
+    id.value = row.id;
+
+    issueDateYear.value = new Date(row.issueDate).getFullYear();
+    declHonorForm.issuer = row.issuer;
+    declHonorForm.detail = row.detail;
+    declHonorForm.issueDate = row.issueDate;
+    declHonorForm.refCommandNo = row.refCommandNo;
+    declHonorForm.refCommandDate = row.refCommandDate;
+    declHonorForm.isDate = row.isDate ? "true" : "false";
   } else {
-    declHonorData.id = "";
-    declHonorData.isActive = true;
-    declHonorData.issuer = "";
-    declHonorData.detail = "";
-    declHonorData.issueDate = null;
-    declHonorData.issueDateYear = 0;
-    declHonorData.refCommandNo = "";
-    declHonorData.refCommandDate = null;
-    declHonorData.isDate = "false";
+    clearData();
   }
 }
 
 async function clickClose() {
-  if (editRow.value == true) {
-    dialogConfirm(
-      $q,
-      async () => {
-        modal.value = false;
-        editRow.value = false;
-      },
-      "ข้อมูลมีการแก้ไข",
-      "ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?"
-    );
-  } else {
-    modal.value = false;
-  }
+  clearData();
+  modal.value = false;
 }
 
 async function clickHistory(row: ResponseObject) {
@@ -334,30 +311,37 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      myForm.value?.validate().then(async (result: boolean) => {
-        if (result) {
-          addEditData(isEdit.value);
-          modal.value = false;
-        }
-      });
+      addEditData(isEdit.value);
+      modal.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
   );
 }
 
+function clearData() {
+  id.value = "";
+  issueDateYear.value = 0;
+  declHonorForm.issuer = "";
+  declHonorForm.detail = "";
+  declHonorForm.issueDate = null;
+  declHonorForm.refCommandNo = "";
+  declHonorForm.refCommandDate = null;
+  declHonorForm.isDate = "false";
+}
+
 onMounted(async () => {
   await fetchData();
 });
 
 watch(
-  () => declHonorData.isDate,
+  () => declHonorForm.isDate,
   () => {
-    if (declHonorData.isDate === "true") {
-      declHonorData.issueDateYear = 0;
+    if (declHonorForm.isDate === "true") {
+      issueDateYear.value = 0;
     }
-    if (declHonorData.isDate === "false") {
-      declHonorData.issueDate = null;
+    if (declHonorForm.isDate === "false") {
+      declHonorForm.issueDate = null;
     }
   }
 );
@@ -557,14 +541,14 @@ watch(
 
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form greedy ref="myForm" @submit="onSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader tittle="ประกาศเกียรติคุณ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
               <q-radio
-                v-model="declHonorData.isDate"
+                v-model="declHonorForm.isDate as string"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
                 val="false"
@@ -572,7 +556,7 @@ watch(
                 dense
               />
               <q-radio
-                v-model="declHonorData.isDate"
+                v-model="declHonorForm.isDate as string"
                 checked-icon="task_alt"
                 unchecked-icon="panorama_fish_eye"
                 val="true"
@@ -584,12 +568,12 @@ watch(
               <datepicker
                 autoApply
                 year-picker
-                v-model="declHonorData.issueDateYear"
+                v-model="issueDateYear"
                 week-start="0"
                 menu-class-name="modalfix"
                 :locale="'th'"
                 :enableTimePicker="false"
-                v-if="declHonorData.isDate === 'false'"
+                v-if="declHonorForm.isDate === 'false'"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -599,21 +583,15 @@ watch(
                   <q-input
                     dense
                     outlined
-                    lazy-rules
                     hide-bottom-space
                     class="inputgreen"
-                    :model-value="
-                      declHonorData.issueDateYear
-                        ? declHonorData.issueDateYear + 543
-                        : null
-                    "
+                    :model-value="issueDateYear ? issueDateYear + 543 : null"
                     :rules="[
                       (val:string) =>
                         !!val ||
                         `${'กรุณาเลือกปีที่ได้รับ'}`,
                     ]"
                     :label="`${'ปีที่ได้รับ'}`"
-                    @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -630,7 +608,7 @@ watch(
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="declHonorData.issueDate"
+                v-model="declHonorForm.issueDate"
                 :locale="'th'"
                 :enableTimePicker="false"
                 v-else
@@ -649,10 +627,9 @@ watch(
                     for="inputDatereceive"
                     ref="dateReceivedRef"
                     class="inputgreen"
-                    :model-value="date2Thai(declHonorData.issueDate as Date)"
+                    :model-value="date2Thai(declHonorForm.issueDate as Date)"
                     :label="`${'วันที่ได้รับ'}`"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
-                    @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -672,9 +649,8 @@ watch(
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="declHonorData.issuer"
+                v-model="declHonorForm.issuer"
                 :label="`${'ผู้มีอำนาจลงนาม'}`"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-12">
@@ -684,10 +660,9 @@ watch(
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="declHonorData.detail"
+                v-model="declHonorForm.detail"
                 :label="`${'รายละเอียด'}`"
                 :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
-                @update:modelValue="() => (editRow = true)"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -697,9 +672,8 @@ watch(
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="declHonorData.refCommandNo"
+                v-model="declHonorForm.refCommandNo"
                 :label="`${'เลขที่คำสั่ง'}`"
-                @update:modelValue="() => (editRow = true)"
               >
                 <template v-slot:append>
                   <q-icon name="mdi-file" class="cursor-pointer" />
@@ -712,7 +686,7 @@ watch(
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="declHonorData.refCommandDate"
+                v-model="declHonorForm.refCommandDate"
                 :locale="'th'"
                 :enableTimePicker="false"
               >
@@ -730,13 +704,12 @@ watch(
                     hide-bottom-space
                     class="inputgreen"
                     :model-value="
-                      declHonorData.refCommandDate == null
+                      declHonorForm.refCommandDate == null
                         ? null
-                        : date2Thai(declHonorData.refCommandDate)
+                        : date2Thai(declHonorForm.refCommandDate)
                     "
                     :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
-                    @clear="declHonorData.refCommandDate = null"
-                    @update:modelValue="() => (editRow = true)"
+                    @clear="declHonorForm.refCommandDate = null"
                   >
                     <template v-slot:prepend>
                       <q-icon
diff --git a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
index 6f92cced5..c653756f1 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
@@ -365,12 +365,8 @@ function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
-      myForm.value?.validate().then(async (result: boolean) => {
-        if (result) {
-          addEditData(isEdit.value);
-          modal.value = false;
-        }
-      });
+      addEditData(isEdit.value);
+      modal.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -587,7 +583,7 @@ onMounted(async () => {
 
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form greedy ref="myForm" @submit="onSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           tittle="ผลการประเมินการปฏิบัติราชการ"
           :close="clickClose"
diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
index 7012b3064..6c9c4751d 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
@@ -127,22 +127,10 @@ function validateForm() {
   dialogConfirm(
     $q,
     async () => {
-      const hasError = [];
-      for (const key in objectRef) {
-        if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-          const property = objectRef[key];
-          if (property.value && typeof property.value.validate === "function") {
-            const isValid = property.value.validate();
-            hasError.push(isValid);
-          }
-        }
-      }
-      if (hasError.every((result) => result === true)) {
-        if (edit.value) {
-          editData();
-        } else {
-          saveData();
-        }
+      if (edit.value) {
+        editData();
+      } else {
+        saveData();
       }
     },
     "ยืนยันการบันทึกข้อมูล",
@@ -228,12 +216,6 @@ async function getData() {
 //     });
 // }
 
-const infoRows = [
-  { title: "รายละเอียด", value: "" },
-  { title: "ล้างมลทิน", value: "" },
-  { title: "เลขที่คำสั่ง", value: "" },
-  { title: "เอกสารอ้างอิง (ลงวันที่)", value: "" },
-];
 onMounted(() => {
   getData();
 });
@@ -467,7 +449,7 @@ onMounted(() => {
   <!-- dialog add edit -->
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 600px">
-      <form @submit.prevent="validateForm">
+      <q-form greedy @submit.prevent @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
           <DialogHeader tittle="อื่นๆ" :close="closeDialog" />
         </q-card-section>
@@ -541,7 +523,7 @@ onMounted(() => {
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 
diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
index 0b2142c41..2ef2777a6 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
@@ -3,9 +3,7 @@ import { ref, watch, reactive } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import type {
-  RowList,
-} from "@/modules/04_registryNew/interface/index/other";
+import type { RowList } from "@/modules/04_registryNew/interface/index/other";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -93,7 +91,8 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 function getHistory() {
   showLoader();
-  http.get(config.API.profileNewOtherHisById(id.value))
+  http
+    .get(config.API.profileNewOtherHisById(id.value))
     .then((res) => {
       let data = res.data.result;
       rows.value = [];
@@ -201,23 +200,7 @@ watch(modal, (status) => {
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
               <q-td v-for="col in props.cols" :key="col.id">
-                <div v-if="col.name === 'no'">
-                  {{
-                    (formFilter.page - 1) * formFilter.pageSize +
-                    props.rowIndex +
-                    1
-                  }}
-                </div>
-                <div
-                  v-else-if="
-                    col.name == 'refCommandDate' ||
-                    col.name == 'date' ||
-                    col.name == 'createdAt'
-                  "
-                >
-                  {{ col.value == null ? null : date2Thai(col.value) }}
-                </div>
-                <div v-else>
+                <div>
                   {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index 18a575e3d..29e5c4558 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted, watch, ref } from "vue";
+import { onMounted, watch, ref, reactive } from "vue";
+import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import type { QTableColumn, QForm } from "quasar";
 import http from "@/plugins/http";
@@ -9,92 +10,59 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
 import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
-import type {
-  InformationOps,
-  Information,
-  DataOption,
-} from "@/modules/04_registryNew/interface/index/Main";
-import { defaultInformation } from "@/modules/04_registryNew/interface/index/Main";
-import type { RequestItemsHistoryObject } from "@/modules/04_registryNew/interface/request/Information";
+import type { RequestObject } from "@/modules/04_registryNew/interface/request/Profile";
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Profile";
 
 const $q = useQuasar();
+const route = useRoute();
 const mixin = useCounterMixin();
-const profileStore = useProfileDataStore();
+const store = useProfileDataStore();
 const {
+  success,
   showLoader,
   hideLoader,
   date2Thai,
   messageError,
-  convertDate,
-  dateToISO,
+  dialogConfirm,
 } = mixin;
-const { changeRetireText, changeBirth } = profileStore;
+const { calculateAge, getGender, getRelationship, getReligion, getBloodGroup } =
+  store;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 
-const informaData = ref<Information>(defaultInformation);
 const modal = ref<boolean>(false);
-const myForm = ref<any>();
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
+const informaData = ref<ResponseObject>();
+const rowsHistory = ref<ResponseObject[]>([]);
 const tittleHistory = ref<string>("ประวัติแก้ไขข้อมูลส่วนตัว");
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
 
-const Ops = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-
-const OpsFilter = ref<InformationOps>({
-  prefixOps: [],
-  prefixOldOps: [],
-  genderOps: [],
-  bloodOps: [],
-  statusOps: [],
-  religionOps: [],
-  employeeClassOps: [
-    { id: "perm", name: "ลูกจ้างประจำ" },
-    { id: "temp", name: "ลูกจ้างชั่วคราว" },
-  ],
-  employeeTypeOps: [
-    { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-    { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-  ],
-});
-
-// mock data
-const resultData = ref({
-  citizenId: "3101502080439",
-  prefixId: "71ed89df-8257-43e8-8fba-0b42fb2c55e0",
-  prefix: "นางสาว",
-  firstName: "อรัญญาสาร",
-  lastName: "พรไชยะสิทธฺ์",
-  birthDate: new Date("1968-11-24T00:00:00"),
-  age: "55 ปี 3 เดือน 16 วัน",
-  genderId: "e2693577-6633-499b-9f0a-fec0bff0be6b",
-  gender: "หญิง",
-  relationshipId: null,
-  bloodGroupId: null,
-  nationality: "ไทย",
-  race: "ไทย",
-  religionId: "ceaec498-71b4-4f82-b5a2-7d6ec988b753",
+const id = ref<string>("");
+const age = ref<string>("");
+// หลังบ้านไม่มีข้อมูล สัญชาติ
+const nationality = ref<string>("");
+const formData = reactive<RequestObject>({
+  citizenId: "",
+  prefix: "",
+  firstName: "",
+  lastName: "",
+  birthDate: null,
+  genderId: "",
+  relationshipId: "",
+  // nationality: "",
+  ethnicity: "",
+  religionId: "",
+  bloodGroupId: "",
+  phone: "",
+  posTypeId: "",
+  posLevelId: "",
   telephoneNumber: null,
-  profileType: "officer",
-  employeeType: null,
-  employeeClass: null,
-  changeName: true,
-  isVerified: true,
-  isSendVerified: false,
+  dateRetire: null,
+  isProbation: false,
+  keycloak: "",
+  email: null,
+  position: "",
 });
 
 const dataLabel = {
@@ -105,10 +73,10 @@ const dataLabel = {
   gender: "เพศ",
   relationship: "สถานภาพ",
   nationality: "สัญชาติ",
-  race: "เชื้อชาติ",
+  ethnicity: "เชื้อชาติ",
   religion: "ศาสนา",
   bloodGroup: "หมู่เลือด",
-  telephoneNumber: "เบอร์โทร",
+  phone: "เบอร์โทร",
 
   prefix: "คำนำหน้าชื่อ",
   firstName: "ชื่อ",
@@ -168,6 +136,7 @@ const columnsHistory = ref<QTableColumn[]>([
     field: "birthDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -176,7 +145,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "เพศ",
     sortable: true,
-    field: "gender",
+    field: (v) => (v.gender ? v.gender.name : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -187,7 +156,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "สถานภาพ",
     sortable: true,
-    field: "relationship",
+    field: (v) => (v.relationship ? v.relationship.name : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -198,7 +167,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "หมู่เลือด",
     sortable: true,
-    field: "bloodGroup",
+    field: (v) => (v.bloodGroup ? v.bloodGroup.name : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -216,11 +185,11 @@ const columnsHistory = ref<QTableColumn[]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "race",
+    name: "ethnicity",
     align: "left",
     label: "เชื้อชาติ",
     sortable: true,
-    field: "race",
+    field: "ethnicity",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -231,40 +200,18 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "ศาสนา",
     sortable: true,
-    field: "religion",
+    field: (v) => (v.religion ? v.religion.name : "-"),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "telephoneNumber",
+    name: "phone",
     align: "left",
     label: "เบอร์โทร",
     sortable: true,
-    field: "telephoneNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeType",
-    align: "left",
-    label: "ประเภทการจ้าง",
-    sortable: true,
-    field: "employeeType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "employeeClass",
-    align: "left",
-    label: "ประเภทลูกจ้าง",
-    sortable: true,
-    field: "employeeClass",
+    field: "phone",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -289,6 +236,7 @@ const columnsHistory = ref<QTableColumn[]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -304,255 +252,112 @@ const visibleColumnsHistory = ref<String[]>([
   "relationship",
   "bloodGroup",
   "nationality",
-  "race",
+  "ethnicity",
   "religion",
-  "telephoneNumber",
-  "employeeType",
-  "employeeClass",
+  "phone",
   "createdFullName",
   "createdAt",
 ]);
 
-async function fetchData() {
-  informaData.value.cardid = resultData.value.citizenId;
-  informaData.value.prefixId = resultData.value.prefixId;
-  informaData.value.prefix = resultData.value.prefix;
-  informaData.value.firstname = resultData.value.firstName;
-  informaData.value.lastname = resultData.value.lastName;
-  informaData.value.birthDate = resultData.value.birthDate;
-  informaData.value.age = resultData.value.age;
-  informaData.value.genderId = resultData.value.genderId;
-  informaData.value.bloodId = resultData.value.bloodGroupId;
-  informaData.value.nationality = resultData.value.nationality;
-  informaData.value.ethnicity = resultData.value.race;
-  informaData.value.statusId = resultData.value.relationshipId;
-  informaData.value.religionId = resultData.value.religionId;
-  informaData.value.tel = resultData.value.telephoneNumber;
-  informaData.value.employeeType = resultData.value.employeeType;
-  informaData.value.employeeClass = resultData.value.employeeClass;
-  informaData.value.profileType = resultData.value.profileType;
-}
-
-// get person detail list
-async function fetchPerson() {
-  // showLoader();
+async function getData() {
+  showLoader();
   await http
-    .get(config.API.person)
+    .get(config.API.profileNewProfileByProfileId(profileId.value))
     .then((res) => {
-      const data = res.data.result;
-      let optionbloodGroups: DataOption[] = [];
-      data.bloodGroups.map((r: any) => {
-        optionbloodGroups.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.bloodOps = optionbloodGroups;
-      OpsFilter.value.bloodOps = optionbloodGroups;
-
-      let optiongenders: DataOption[] = [];
-      data.genders.map((r: any) => {
-        optiongenders.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.genderOps = optiongenders;
-      OpsFilter.value.genderOps = optiongenders;
-
-      let optionprefixs: DataOption[] = [];
-      data.prefixs.map((r: any) => {
-        optionprefixs.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.prefixOps = optionprefixs;
-      OpsFilter.value.prefixOps = optionprefixs;
-
-      let optionrelationships: DataOption[] = [];
-      data.relationships.map((r: any) => {
-        optionrelationships.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.statusOps = optionrelationships;
-      OpsFilter.value.statusOps = optionrelationships;
-
-      let optionreligions: DataOption[] = [];
-      data.religions.map((r: any) => {
-        optionreligions.push({
-          id: r.id.toString(),
-          name: r.name.toString(),
-        });
-      });
-      Ops.value.religionOps = optionreligions;
-      OpsFilter.value.religionOps = optionreligions;
+      informaData.value = res.data.result;
+      if (informaData.value) {
+        id.value = informaData.value.id;
+        age.value = calculateAge(informaData.value.birthDate);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
     })
-    .catch((e: any) => {})
     .finally(() => {
-      // hideLoader();
+      hideLoader();
     });
 }
 
-function filterSelector(val: any, update: Function, refData: string) {
-  switch (refData) {
-    case "prefixOps":
-      update(() => {
-        Ops.value.prefixOps = OpsFilter.value.prefixOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "genderOps":
-      update(() => {
-        Ops.value.genderOps = OpsFilter.value.genderOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "bloodOps":
-      update(() => {
-        Ops.value.bloodOps = OpsFilter.value.bloodOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "statusOps":
-      update(() => {
-        Ops.value.statusOps = OpsFilter.value.statusOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "religionOps":
-      update(() => {
-        Ops.value.religionOps = OpsFilter.value.religionOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeClassOps":
-      update(() => {
-        Ops.value.employeeClassOps = OpsFilter.value.employeeClassOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    case "employeeTypeOps":
-      update(() => {
-        Ops.value.employeeTypeOps = OpsFilter.value.employeeTypeOps.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
+async function editData() {
+  showLoader();
+  await http
+    .put(config.API.profileNewProfileById(id.value), {
+      ...formData,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      getData(), (modal.value = false);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
-    default:
-      break;
-  }
+function onClickOpenDialog() {
+  if (!informaData.value) return;
+  modal.value = true;
+
+  id.value = informaData.value.id;
+  age.value = calculateAge(informaData.value.birthDate);
+  formData.citizenId = informaData.value.citizenId;
+  formData.prefix = informaData.value.prefix;
+  formData.firstName = informaData.value.firstName;
+  formData.lastName = informaData.value.lastName;
+  formData.birthDate = informaData.value.birthDate;
+  formData.genderId = informaData.value.genderId;
+  formData.relationshipId = informaData.value.relationshipId;
+  // formData.nationality = informaData.value.nationality;
+  formData.ethnicity = informaData.value.ethnicity;
+  formData.religionId = informaData.value.religionId;
+  formData.bloodGroupId = informaData.value.bloodGroupId;
+  formData.phone = informaData.value.phone;
+}
+
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      editData();
+      modal.value = false;
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
 }
 
 async function clickHistory() {
   modalHistory.value = true;
-  // showLoader();
-  // await http
-  //   .get(config.API.profileInforHisId(route.params.id.toString()))
-  //   .then((res) => {
-  //     let data = res.data.result;
-  //     rowsHistory.value = [];
-  //     data.map((e: RequestItemsHistoryObject) => {
-  //       rowsHistory.value.push({
-  //         citizenId: e.citizenId,
-  //         prefix: e.prefix,
-  //         firstName: e.firstName,
-  //         lastName: e.lastName,
-  //         birthDate: new Date(e.birthDate),
-  //         gender: e.gender,
-  //         relationship: e.relationship,
-  //         bloodGroup: e.bloodGroup,
-  //         nationality: e.nationality,
-  //         race: e.race,
-  //         religion: e.religion,
-  //         telephoneNumber: e.telephoneNumber,
-  //         employeeType:
-  //           e.employeeType == "gov"
-  //             ? "งบประมาณเงินอุดหนุนรัฐบาล"
-  //             : e.employeeType == "bkk"
-  //             ? "งบประมาณกรุงเทพมหานคร"
-  //             : "-",
-  //         employeeClass:
-  //           e.employeeClass == "perm"
-  //             ? "ลูกจ้างประจำ"
-  //             : e.employeeClass == "temp"
-  //             ? "ลูกจ้างชั่วคราว"
-  //             : "-",
-  //         createdFullName: e.createdFullName,
-  //         createdAt: new Date(e.createdAt),
-  //       });
-  //     });
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
-}
-
-async function calRetire(birth: Date) {
-  const body = {
-    birthDate: dateToISO(birth),
-  };
-  const dateBefore = ref<Date>(new Date());
-  if (dateToISO(dateBefore.value) != dateToISO(birth)) {
-    showLoader();
-    await http
-      .post(config.API.profileCalRetire, body)
-      .then((res: any) => {
-        const data = res.data.result;
-        informaData.value.age = data.age;
-        informaData.value.birthDate = birth;
-        changeRetireText(data.retireDate);
-        dateBefore.value = birth;
-      })
-      .catch((e: any) => {
-        messageError($q, e);
-        const retire = new Date(`${birth.getFullYear() + 60}-09-30`);
-        informaData.value.birthDate = dateBefore.value;
-        // inputBirthDate.value = dateBefore.value;
-        changeRetireText(date2Thai(retire));
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-}
-
-function onSubmit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // await saveData();
-      modal.value = false;
-    }
-  });
+  await http
+    .get(config.API.profileNewProfileHisById(id.value))
+    .then((res) => {
+      rowsHistory.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 watch(
-  () => informaData.value.birthDate,
-  (value) => {
-    // const dateVal = convertDate(value);
-    if (value) {
-      calRetire(value);
-    } else {
-      informaData.value.age = "";
+  () => formData.birthDate,
+  (v) => {
+    if (v) {
+      age.value = calculateAge(v);
     }
   }
 );
 
 onMounted(async () => {
-  await fetchPerson();
-  await fetchData();
+  await getData();
+  store.genderOp.length === 0 ? await getGender() : "";
+  store.relationshipOp.length === 0 ? await getRelationship() : "";
+  store.religionOp.length === 0 ? await getReligion() : "";
+  store.bloodGroupOp.length === 0 ? await getBloodGroup() : "";
 });
 </script>
 <template>
@@ -563,7 +368,7 @@ onMounted(async () => {
         round
         icon="mdi-pencil-outline"
         color="primary"
-        @click="modal = true"
+        @click="onClickOpenDialog"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
@@ -574,10 +379,10 @@ onMounted(async () => {
   </div>
 
   <q-card bordered class="my-card bg-grey-1 q-pa-md">
-    <div :class="$q.screen.gt.xs ? 'row' : 'column'">
+    <div v-if="informaData" :class="$q.screen.gt.xs ? 'row' : 'column'">
       <!-- column 1 -->
       <div class="col-md-7 col-12 row">
-        <div class="col-md-4 col-5 text-grey-6 text-weight-medium">
+        <div class="col-5 text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(0, 6)"
             class="q-py-xs"
@@ -586,47 +391,33 @@ onMounted(async () => {
           </div>
         </div>
         <!-- data -->
-        <div class="col-md-8 col-7">
+        <div class="col-7">
           <div class="q-py-xs">
-            {{ informaData.cardid }}
+            {{ informaData.citizenId }}
           </div>
           <div class="q-py-xs">
             {{
-              `${informaData.prefix} ${informaData.firstname} ${informaData.lastname}`
+              `${informaData.prefix} ${informaData.firstName} ${informaData.lastName}`
             }}
           </div>
           <div class="q-py-xs">
             {{ date2Thai(informaData.birthDate) }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.age ? informaData.age : "-" }}
+            {{ age ? age : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.genderId
-                ? (
-                    Ops.genderOps.find((r) => r.id === informaData.genderId) ||
-                    {}
-                  ).name
-                : "-"
-            }}
+            {{ informaData.gender ? informaData.gender.name : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.statusId
-                ? (
-                    Ops.statusOps.find((r) => r.id === informaData.statusId) ||
-                    {}
-                  ).name
-                : "-"
-            }}
+            {{ informaData.relationship ? informaData.relationship.name : "-" }}
           </div>
         </div>
       </div>
 
       <!-- column 2 -->
       <div class="col-md-5 col-12 row">
-        <div class="col-md-4 col-5 col text-grey-6 text-weight-medium">
+        <div class="col-5 col text-grey-6 text-weight-medium">
           <div
             v-for="label in Object.keys(dataLabel).slice(6, 11)"
             class="q-py-xs"
@@ -635,7 +426,7 @@ onMounted(async () => {
           </div>
         </div>
         <!-- data -->
-        <div class="col-md-8 col-7">
+        <div class="col-7">
           <div class="q-py-xs">
             {{ informaData.nationality ? informaData.nationality : "-" }}
           </div>
@@ -643,26 +434,13 @@ onMounted(async () => {
             {{ informaData.ethnicity ? informaData.ethnicity : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.religionId
-                ? (
-                    Ops.religionOps.find(
-                      (r) => r.id === informaData.religionId
-                    ) || {}
-                  ).name
-                : "-"
-            }}
+            {{ informaData.religion ? informaData.religion.name : "-" }}
           </div>
           <div class="q-py-xs">
-            {{
-              informaData.bloodId
-                ? (Ops.bloodOps.find((b) => b.id === informaData.bloodId) || {})
-                    .name
-                : "-"
-            }}
+            {{ informaData.bloodGroup ? informaData.bloodGroup.name : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.tel ? informaData.tel : "-" }}
+            {{ informaData.phone ? informaData.phone : "-" }}
           </div>
         </div>
       </div>
@@ -672,7 +450,7 @@ onMounted(async () => {
   <!-- Edit Dialog -->
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form ref="myForm" @submit="onSubmit">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           tittle="แก้ไขประวัติส่วนตัว"
           :close="() => (modal = false)"
@@ -688,7 +466,8 @@ onMounted(async () => {
                 hide-bottom-space
                 maxlength="13"
                 mask="#############"
-                v-model="informaData.cardid"
+                v-model="formData.citizenId"
+                class="inputgreen"
                 :label="dataLabel.citizenId"
                 :rules="[
                 (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
@@ -702,20 +481,18 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
+                use-input
                 lazy-rules
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
-                option-label="name"
                 input-debounce="0"
-                v-model="informaData.prefixId"
-                :options="Ops.prefixOps"
+                new-value-mode="add-unique"
+                v-model="formData.prefix"
+                class="inputgreen"
+                :options="store.prefixOp"
                 :label="dataLabel.prefix"
                 :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'prefixOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -724,7 +501,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.firstname"
+                v-model="formData.firstName"
+                class="inputgreen"
                 :label="dataLabel.firstName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
               />
@@ -735,7 +513,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.lastname"
+                v-model="formData.lastName"
+                class="inputgreen"
                 :label="dataLabel.lastName"
                 :rules="[(val: string) => !!val || `${'กรุณากรอก นามสกุล'}`]"
               />
@@ -746,7 +525,7 @@ onMounted(async () => {
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="informaData.birthDate"
+                v-model="formData.birthDate"
                 :locale="'th'"
               >
                 <template #year="{ year }">
@@ -762,9 +541,10 @@ onMounted(async () => {
                     outlined
                     dense
                     hide-bottom-space
+                    class="inputgreen"
                     :model-value="
-                      informaData.birthDate != null
-                        ? date2Thai(informaData.birthDate)
+                      formData.birthDate != null
+                        ? date2Thai(formData.birthDate)
                         : null
                     "
                     :label="dataLabel.birthDate"
@@ -791,7 +571,8 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 readonly
-                v-model="informaData.age"
+                class="inputgreen"
+                v-model="age"
                 :label="dataLabel.age"
               />
             </div>
@@ -804,15 +585,13 @@ onMounted(async () => {
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
-                option-label="name"
                 input-debounce="0"
-                v-model="informaData.genderId"
-                :options="Ops.genderOps"
+                option-label="name"
+                option-value="id"
+                v-model="formData.genderId"
+                class="inputgreen"
+                :options="store.genderOp"
                 :label="dataLabel.gender"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -827,12 +606,10 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="informaData.statusId"
-                :options="Ops.statusOps"
+                class="inputgreen"
+                v-model="formData.relationshipId"
+                :options="store.relationshipOp"
                 :label="dataLabel.relationship"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -841,7 +618,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.nationality"
+                class="inputgreen"
+                v-model="nationality"
                 :label="dataLabel.nationality"
               />
             </div>
@@ -851,8 +629,9 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="informaData.ethnicity"
-                :label="dataLabel.race"
+                class="inputgreen"
+                v-model="formData.ethnicity"
+                :label="dataLabel.ethnicity"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -867,12 +646,10 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="informaData.religionId"
-                :options="Ops.religionOps"
+                v-model="formData.religionId"
+                class="inputgreen"
+                :options="store.religionOp"
                 :label="dataLabel.religion"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -887,12 +664,10 @@ onMounted(async () => {
                 option-value="id"
                 option-label="name"
                 input-debounce="0"
-                v-model="informaData.bloodId"
-                :options="Ops.bloodOps"
+                v-model="formData.bloodGroupId"
+                class="inputgreen"
+                :options="store.bloodGroupOp"
                 :label="dataLabel.bloodGroup"
-                @filter="(inputValue: any,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
-              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -902,8 +677,9 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 mask="##########"
-                v-model="informaData.tel"
-                :label="dataLabel.telephoneNumber"
+                class="inputgreen"
+                v-model="formData.phone"
+                :label="dataLabel.phone"
               />
             </div>
           </div>
@@ -939,14 +715,8 @@ onMounted(async () => {
     <template #columns="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'birthDate' || col.name == 'createdAt'"
-            class="table_ellipsis"
-          >
-            {{ date2Thai(col.value) }}
-          </div>
-          <div v-else class="table_ellipsis">
-            {{ col.value }}
+          <div class="table_ellipsis">
+            {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
       </q-tr>
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
index 2f405bcf4..c456aa56a 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
 import type { DataOption2 } from "@/modules/04_registryNew/interface/index/Main";
@@ -14,9 +17,20 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useSalaryDataStore } from "@/modules/04_registryNew/stores/salary";
 
 const $q = useQuasar();
+const route = useRoute();
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const store = useSalaryDataStore();
-const { date2Thai, dialogConfirm, showLoader, hideLoader, messageError } =
-  useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -132,7 +146,6 @@ const visibleColumns = ref<string[]>([
   "salaryRef",
   "refCommandNo",
 ]);
-
 const formFilter = reactive({
   page: 1,
   pageSize: 10,
@@ -227,8 +240,28 @@ const posTypeOptions = ref<DataOption2[]>(store.optionTemplatePos);
 const posLevelOption = ref<DataOption2[]>(store.optionTemplatePos);
 const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
 
+function fetchListSalary() {
+  showLoader();
+  http
+    .get(
+      config.API.profileSalaryNewById("59134ef9-9e62-41d0-aac5-339be727f2b1")
+    )
+    .then((res) => {
+      // console.log(res);
+      rows.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
+  isStatusEdit.value = statusEdit;
   modalDialogSalary.value = true;
+
   formDataSalary.date = statusEdit ? data.date : null;
   formDataSalary.posNo = statusEdit ? data.posNo : "";
   // formDataSalary.templatePos = statusEdit ? data.templatePos : "";
@@ -249,11 +282,12 @@ function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
   // formDataSalary.templateDoc = statusEdit ? data.templateDoc : "";
   formDataSalary.doc = statusEdit ? data.salaryRef : "";
 }
+
 function onClickCloseDialog() {
   modalDialogSalary.value = false;
 }
 
-const filterSelector = (val: any, update: Function, filtername: string) => {
+function filterSelector(val: any, update: Function, filtername: string) {
   switch (filtername) {
     case "pos":
       update(() => {
@@ -294,7 +328,8 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
     default:
       break;
   }
-};
+}
+
 function updatePos(val: string) {
   formDataSalary.position = val;
 }
@@ -316,23 +351,38 @@ function onSubmit() {
   }
   if (hasError.every((result) => result === true)) {
     dialogConfirm($q, () => {
-      onClickCloseDialog();
+      submit();
     });
   }
 }
 
+async function submit() {
+  try {
+    const url = isStatusEdit.value
+      ? config.API.profileSalaryNewById("12312")
+      : config.API.profileSalaryNew;
+    const method = isStatusEdit.value ? "put" : "post";
+    await http[method](url, formDataSalary);
+    fetchListSalary();
+    onClickCloseDialog();
+    success($q, "บันทึกข้อมูลสำเร็จ");
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
+}
+
 const modalHistory = ref<boolean>(false);
 function ocClikcHistory() {
   modalHistory.value = true;
 }
+
+onMounted(() => {
+  fetchListSalary();
+});
 </script>
 <template>
-  <!-- <div class="row items-center q-gutter-sm">
-    <div class="toptitle text-dark row items-center q-py-xs">
-      ตำแหน่งเงินเดือน
-    </div>
-  </div> -->
-
   <q-toolbar style="padding: 0px" class="text-primary">
     <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
       <q-tooltip>เพิ่ม</q-tooltip>
diff --git a/src/modules/04_registryNew/interface/index/salary.ts b/src/modules/04_registryNew/interface/index/salary.ts
index f15c117e3..4c9c7bb09 100644
--- a/src/modules/04_registryNew/interface/index/salary.ts
+++ b/src/modules/04_registryNew/interface/index/salary.ts
@@ -6,4 +6,16 @@ interface RowList {
   refCommandNo: string;
   refCommandDate: Date | null;
 }
-export type { RowList };
+
+interface ObjectSalaryRef {
+  date: object | null;
+  posNo: object | null;
+  position: object | null;
+  typePosition: object | null;
+  levelPosition: object | null;
+  salary: object | null;
+  doc: object | null;
+
+  [key: string]: any;
+}
+export type { RowList, ObjectSalaryRef };
diff --git a/src/modules/04_registryNew/interface/request/DeclarationHonor.ts b/src/modules/04_registryNew/interface/request/DeclarationHonor.ts
index c0ad5799e..cae79aba1 100644
--- a/src/modules/04_registryNew/interface/request/DeclarationHonor.ts
+++ b/src/modules/04_registryNew/interface/request/DeclarationHonor.ts
@@ -1,37 +1,11 @@
 interface RequestItemsObject {
   profileId?: string;
-  isActive: boolean;
   detail: string;
   issueDate: Date | null;
   issuer: string;
   refCommandDate: Date | null;
   refCommandNo: string;
-  isDate: boolean;
+  isDate: boolean | string;
 }
 
-interface FormData {
-  id: string;
-  isActive: boolean;
-  isDate: string | null;
-  issuer: string;
-  detail: string;
-  issueDate: Date | null;
-  issueDateYear: number;
-  refCommandNo: string;
-  refCommandDate: Date | null;
-}
-
-//columns
-interface Columns {
-  [index: number]: {
-    name: String;
-    align: String;
-    label: String;
-    sortable: Boolean;
-    field: String;
-    headerStyle: String;
-    style: String;
-  };
-}
-
-export type { RequestItemsObject, FormData, Columns };
+export type { RequestItemsObject };
diff --git a/src/modules/04_registryNew/interface/request/Profile.ts b/src/modules/04_registryNew/interface/request/Profile.ts
new file mode 100644
index 000000000..fa15a0cdb
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/Profile.ts
@@ -0,0 +1,24 @@
+interface RequestObject {
+  bloodGroupId: string | null;
+  relationshipId: string | null;
+  genderId: string | null;
+  posTypeId: string;
+  posLevelId: string;
+  religionId: string | null;
+  citizenId: string;
+  telephoneNumber: string | null;
+  // nationality: string | null;
+  ethnicity: string | null;
+  birthDate: Date | null;
+  dateRetire: Date | null;
+  isProbation: boolean;
+  keycloak: string;
+  phone: string | null;
+  email: string | null;
+  position: string;
+  lastName: string;
+  firstName: string;
+  prefix: string;
+}
+
+export type { RequestObject };
diff --git a/src/modules/04_registryNew/interface/response/Profile.ts b/src/modules/04_registryNew/interface/response/Profile.ts
new file mode 100644
index 000000000..61efa58d8
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/Profile.ts
@@ -0,0 +1,108 @@
+interface ResponseObject {
+  id: string;
+  createdAt: Date;
+  createdUserId: string;
+  lastUpdatedAt: Date;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  position: string;
+  posLevelId: string | null;
+  posTypeId: string | null;
+  email: string | null;
+  phone: string | null;
+  keycloak: string | null;
+  isProbation: boolean;
+  dateRetire: Date | null;
+  birthDate: Date;
+  ethnicity: string | null;
+  religionId: string | null;
+  religion: Religion | null;
+  telephoneNumber: null | null;
+  genderId: string | null;
+  gender: Gender | null;
+  relationshipId: string | null;
+  relationship: Relationship | null;
+  bloodGroupId: string | null;
+  bloodGroup: BloodGroup | null;
+  posLevel: PosLevel | null;
+  posType: PosType | null;
+
+  nationality?: string;
+}
+
+interface Religion {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface Gender {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface Relationship {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface BloodGroup {
+  id: string;
+  createdAt: Date;
+  lastUpdatedAt: Date;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  name: string;
+}
+
+interface PosLevel {
+  id: string;
+  createdAt: Date;
+  createdUserId: string;
+  lastUpdatedAt: Date;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  posLevelName: string;
+  posLevelRank: number;
+  posLevelAuthority: null;
+  posTypeId: string;
+}
+
+interface PosType {
+  id: string;
+  createdAt: Date;
+  createdUserId: string;
+  lastUpdatedAt: Date;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  posTypeName: string;
+  posTypeRank: number;
+}
+
+export type {
+  ResponseObject,
+  Religion,
+  Gender,
+  Relationship,
+  BloodGroup,
+  PosLevel,
+  PosType,
+};
diff --git a/src/modules/04_registryNew/stores/profile.ts b/src/modules/04_registryNew/stores/profile.ts
index 4296aba60..00b7d21e7 100644
--- a/src/modules/04_registryNew/stores/profile.ts
+++ b/src/modules/04_registryNew/stores/profile.ts
@@ -1,92 +1,123 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import { defineStore } from "pinia";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  Gender,
+  Religion,
+  Relationship,
+  BloodGroup,
+} from "@/modules/04_registryNew/interface/response/Profile";
 
 export const useProfileDataStore = defineStore("profile", () => {
-  const isVerified = ref<boolean>(false);
-  const isEdit = ref<boolean>(false);
-  const emplployeeClass = ref<string | null>("");
-  interface profile {
-    main: { columns: String[] };
-    education: { columns: String[] };
-    oldName: { columns: String[] };
-    certicate: { columns: String[] };
-    train: { columns: String[] };
-    insignia: { columns: String[] };
-    coined: { columns: String[] };
-    assessment: { columns: String[] };
-    salary: { columns: String[] };
-    discipline: { columns: String[] };
-    leave: { columns: String[] };
-    talent: { columns: String[] };
-    work: { columns: String[] };
-    record: { columns: String[] };
-    other: { columns: String[] };
-    document: { columns: String[] };
+  const $q = useQuasar();
+  const mixin = useCounterMixin();
+  const {
+    showLoader,
+    hideLoader,
+    date2Thai,
+    messageError,
+    convertDate,
+    dateToISO,
+  } = mixin;
+
+  const genderOp = ref<Gender[]>([]);
+  const religionOp = ref<Religion[]>([]);
+  const relationshipOp = ref<Relationship[]>([]);
+  const bloodGroupOp = ref<BloodGroup[]>([]);
+  const prefixOp = ref<string[]>(["นาย", "นาง", "นางสาว"]);
+
+  function calculateAge(birthDate: Date): string {
+    const birthDateTimeStamp = new Date(birthDate).getTime();
+    const now = new Date();
+    const diff = now.getTime() - birthDateTimeStamp;
+
+    const ageDate = new Date(diff);
+    const years = ageDate.getUTCFullYear() - 1970;
+    const months = ageDate.getUTCMonth();
+    const days = ageDate.getUTCDate() - 1;
+
+    if (years > 60) {
+      return "อายุเกิน 60 ปี";
+    }
+
+    return `${years} ปี ${months} เดือน ${days} วัน`;
   }
 
-  const birthDate = ref<Date>(new Date());
-  const retireText = ref<string | null>(null);
-  const changeRetireText = (val: string | null) => {
-    retireText.value = val;
-  };
-  const changeBirth = (val: Date) => {
-    birthDate.value = val;
-  };
-  const profileData = ref<profile>({
-    main: { columns: [] },
-    education: { columns: [] },
-    oldName: { columns: [] },
-    certicate: { columns: [] },
-    train: { columns: [] },
-    insignia: { columns: [] },
-    coined: { columns: [] },
-    assessment: { columns: [] },
-    salary: { columns: [] },
-    discipline: { columns: [] },
-    leave: { columns: [] },
-    talent: { columns: [] },
-    work: { columns: [] },
-    record: { columns: [] },
-    other: { columns: [] },
-    document: { columns: [] },
-  });
-
-  const changeProfileColumns = (system: String, val: String[]) => {
-    if (system == "main") profileData.value.main.columns = val;
-    if (system == "education") profileData.value.education.columns = val;
-    if (system == "oldName") profileData.value.oldName.columns = val;
-    if (system == "certicate") profileData.value.certicate.columns = val;
-    if (system == "train") profileData.value.train.columns = val;
-    if (system == "insignia") profileData.value.insignia.columns = val;
-    if (system == "coined") profileData.value.coined.columns = val;
-    if (system == "assessment") profileData.value.assessment.columns = val;
-    if (system == "salary") profileData.value.salary.columns = val;
-    if (system == "discipline") profileData.value.discipline.columns = val;
-    if (system == "leave") profileData.value.leave.columns = val;
-    if (system == "talent") profileData.value.talent.columns = val;
-    if (system == "work") profileData.value.work.columns = val;
-    if (system == "record") profileData.value.record.columns = val;
-    if (system == "other") profileData.value.other.columns = val;
-    if (system == "document") profileData.value.document.columns = val;
-    localStorage.setItem("profile", JSON.stringify(profileData.value));
-  };
-
-  if (localStorage.getItem("profile") !== null) {
-    profileData.value = JSON.parse(localStorage.getItem("profile") || "{}");
+  async function getGender() {
+    showLoader();
+    await http
+      .get(config.API.profileNewGender)
+      .then((res) => {
+        genderOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   }
 
-  const isLoad = ref<number>(0);
+  async function getRelationship() {
+    showLoader();
+    await http
+      .get(config.API.profileNewRelationship)
+      .then((res) => {
+        relationshipOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+
+  async function getReligion() {
+    showLoader();
+    await http
+      .get(config.API.profileNewReligion)
+      .then((res) => {
+        religionOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+
+  async function getBloodGroup() {
+    showLoader();
+    await http
+      .get(config.API.profileNewBloodGroup)
+      .then((res) => {
+        bloodGroupOp.value = res.data.result;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 
   return {
-    isLoad,
-    isVerified,
-    isEdit,
-    profileData,
-    changeProfileColumns,
-    birthDate,
-    changeBirth,
-    retireText,
-    changeRetireText,
-    emplployeeClass,
+    prefixOp,
+    genderOp,
+    religionOp,
+    relationshipOp,
+    bloodGroupOp,
+
+    calculateAge,
+    getGender,
+    getRelationship,
+    getReligion,
+    getBloodGroup,
   };
 });
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index aa385d8d9..20d9f8f98 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -109,13 +109,23 @@ function fetchYearOption() {
   }
 }
 
-function fetchDataPerson() {
+async function fetchDataPerson(search: boolean = false) {
   showLoader();
+
+  let queryParams = {
+    page: formFilter.page,
+    pageSize: formFilter.pageSize,
+  };
+
+  if (search) {
+    queryParams = Object.assign({}, queryParams, {
+      searchField: searchType.value,
+      searchKeyword: formFilter.keyword,
+    });
+  }
+
   http
-    .get(
-      config.API.registryNew +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}`
-    )
+    .get(config.API.registryNew, { params: queryParams })
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       dataPersonMain.value = res.data.result.data;
@@ -149,7 +159,7 @@ function onclickSearch() {
     fetchYearOption();
   }
   formFilter.keyword = formFilter.keyword === null ? "" : formFilter.keyword;
-  fetchDataPerson();
+  fetchDataPerson(true);
 }
 
 function selectType(item: DataOption) {
@@ -194,9 +204,13 @@ onMounted(async () => {
 
   <q-card class="q-mt-md">
     <q-card-section class="card-img q-pb-lg">
-      <div class="text-h5 text-center q-py-md text-weight-medium">ค้นหาข้อมูลทะเบียนประวัติ</div>
+      <div class="text-h5 text-center q-py-md text-weight-medium">
+        ค้นหาข้อมูลทะเบียนประวัติ
+      </div>
       <div class="row justify-center">
-        <div class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders">
+        <div
+          class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders"
+        >
           <q-form @submit="onclickSearch">
             <div class="bg-white row col-12 q-pa-none rounded-borders">
               <div class="row col-11">
@@ -212,10 +226,9 @@ onMounted(async () => {
                     option-label="name"
                     option-value="id"
                     map-options
-                    class="selectS col-11 q-px-md "
+                    class="selectS col-11 q-px-md"
                     color="deep-orange"
                     dropdown-icon="mdi-chevron-down"
-                    
                   />
                   <q-separator vertical />
                 </div>
@@ -234,12 +247,18 @@ onMounted(async () => {
                 </q-input>
               </div>
               <div class="row col-1">
-                <q-btn class="fit btnSearch" unelevated color="deep-orange" label="ค้นหา" type="submit" />
+                <q-btn
+                  class="fit btnSearch"
+                  unelevated
+                  color="deep-orange"
+                  label="ค้นหา"
+                  type="submit"
+                />
               </div>
             </div>
           </q-form>
           <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
-            <q-space/>
+            <q-space />
             <q-btn
               flat
               label="ตัวเลือกเพิ่มเติม"
@@ -299,8 +318,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-              
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   labelOption.posType !== "ทั้งหมด"
@@ -341,7 +359,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   labelOption.posLevel !== "ทั้งหมด"
@@ -382,7 +400,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{ `ปีเกษียณ${labelOption.retireYear}` }}
                 <q-btn
@@ -464,7 +482,7 @@ onMounted(async () => {
               label-color="white"
               dropdown-icon="mdi-chevron-down"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   `อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)`
@@ -520,7 +538,7 @@ onMounted(async () => {
               dropdown-icon="mdi-chevron-down"
               :label="`เงื่อนไขอื่นๆ  ${conditionTotal}`"
               class="q-px-sm"
-            ><!-- class="custom-btn" -->
+              ><!-- class="custom-btn" -->
               <q-list>
                 <q-item clickable v-close-popup>
                   <q-item-section>
@@ -562,7 +580,7 @@ onMounted(async () => {
   </q-card>
 </template>
 
-<style >
+<style>
 .card-img {
   background: url("@/assets/registry-banner.png");
   background-size: cover;
@@ -581,19 +599,19 @@ onMounted(async () => {
   background-color: #36969f;
 }
 
-.btnSearch{
+.btnSearch {
   border-radius: 0px 4px 4px 0px;
 }
-.bg-Search{
+.bg-Search {
   background: #00000015;
 }
-.lineFil{
-  transform:rotate(30deg);
+.lineFil {
+  transform: rotate(30deg);
   height: 20px;
   margin-top: 15px;
   background: #ffffff7b !important;
 }
-.selectS .q-field__control .q-field__append .q-icon{
+.selectS .q-field__control .q-field__append .q-icon {
   color: #ff5722 !important;
 }
 </style>
diff --git a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
index dae239097..1eba9574e 100644
--- a/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue
@@ -300,15 +300,15 @@ function fetchDataPeriodNew() {
 
 function onClickDownload(data: DataOption) {
   showLoader();
-  if (data.id === "emp-08") {
+  if (data.id === "emp-08" || data.id === "emp2-08") {
     const formData = {
       type: "HAFT",
       startDate:
-        props?.roundFilter?.shortCode === "APR"
+        data.id === "emp-08"
           ? `${props?.roundFilter?.year - 1}-10-01`
           : `${props?.roundFilter?.year}-04-01`,
       endDate:
-        props?.roundFilter?.shortCode === "APR"
+        data.id === "emp-08"
           ? `${props?.roundFilter?.year}-03-31`
           : `${props?.roundFilter?.year}-09-30`,
     };
diff --git a/src/modules/13_salary/store/SalaryEmployeeListsStore.ts b/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
index d2acd30a9..cf095c0a4 100644
--- a/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
+++ b/src/modules/13_salary/store/SalaryEmployeeListsStore.ts
@@ -124,60 +124,84 @@ export const useSalaryEmployeeListSDataStore = defineStore(
     /** List Download รายงานของรอบตุลาคม*/
     const itemDownloadOct = ref<DataOption[]>([
       {
-        id: "emp-01",
-        name: "บัญชีคำนวณโควตา",
+        id: "emp2-01",
+        name: "บัญชีการคำนวณวงเงินเลื่อนขั้นค่าจางลูกจ้างประจำกรุงเทพมหานคร",
       },
       {
-        id: "emp-02",
-        name: "รายชื่อลูกจ้างประจำผู้ครองตำแหน่ง ณ วันที่ 1 กันยายน",
+        id: "emp2-02",
+        name: "รายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ครองตำแหน่ง ณ วันที่ ๑ กันยายน",
       },
       {
-        id: "emp-03",
-        name: "รายชื่อลูกจ้างประจำที่ได้รับการเสนอขอเลื่อนขั้นค่าจ้างหนึ่งขั้น",
+        id: "emp2-03",
+        name: "รายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ได้รับการเสนอขอเลื่อนขั้นค่าจ้างรวมทั้งปีสองขั้น",
       },
       {
-        id: "emp-04",
-        name: "แบบ ลจ.กทม.1-รายชื่อลูกจ้างผู้สมควรได้เลื่อนขั้นค่าจ้าง",
+        id: "emp2-04",
+        name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้สมควรได้เลื่อนขั้นค่าจ้าง (แบบ ลจ.กทม.๑)",
       },
       {
-        id: "emp-05",
-        name: "แบบ ลจ.กทม.1-1-รายชื่อลูกจ้างผู้สมควรได้รับค่าตอบแทนพิเศษ",
+        id: "emp2-05",
+        name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้สมควรได้รับค่าตอบแทนพิเศษ (แบบ ลจ.กทม.๑/๑)",
       },
       {
-        id: "emp-06",
-        name: "แบบ ลจ.กทม.2-รายชื่อลูกจ้างผู้ไม่สมควรเลื่อนขั้นค่าจ้าง",
+        id: "emp2-06",
+        name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ไม่สมควรเลื่อนขั้นค่าจ้าง (แบบ ลจ.กทม.๒)",
       },
       {
-        id: "emp-07",
-        name: "แบบ ลจ.กทม.2-1-รายชื่อลูกจ้างผู้ไม่สมควรได้รับค่าตอบแทนพิเศษ",
+        id: "emp2-07",
+        name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ไม่สมควรได้รับค่าตอบแทนพิเศษ (แบบ ลจ.กทม.๒/๑)",
       },
       {
-        id: "emp-08",
-        name: "แบบ ลจ.กทม.3-บัญชีแสดงวันลาในครึ่งปีของลูกจ้าง",
+        id: "emp2-08",
+        name: "บัญชีแสดงวันลาในครึ่งปีที่แล้วมาของลูกจ้างประจำกรุงเทพมหานคร (แบบ ลจ.กทม.๓)",
       },
       {
-        id: "emp-09",
-        name: "บัญชีรายชื่อลูกจ้างประจำผู้ไม่ได้รับเลื่อนขั้นค่าจ้างในวันที่ 1 ตุลาคม ย้อนหลัง 3 ครั้ง ",
+        id: "emp2-09",
+        name: "รายชื่อลูกจ้างประจำกรุงเทพมหานครที่ครบเกษียณอายุราชการสิ้นปีงบประมาณ",
       },
       {
-        id: "emp-10",
-        name: "รายชื่อลูกจ้างประจำผู้มีผลการประเมินดีเด่น",
+        id: "emp2-10",
+        name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ไม่ได้รับการเลื่อนขั้นค่าจ้าง/ค่าตอบแทนพิเศษ",
       },
       {
-        id: "emp-12",
-        name: "บัญชีรายละเอียดผู้ได้รับอัตราค่าจ้างสูงกว่าขั้นสูง (แนบท้ายคำสั่ง) ",
+        id: "emp2-11",
+        name: "รายชื่อลูกจ้างประจำผู้มีผลการประเมินประสิทธิภาพและประสิทธิผลการปฏิบัติงานอยู่ในระดับดีเด่น",
       },
       {
-        id: "emp-13",
-        name: "บัญชีรายชื่อลูกจ้างประจำผู้ไม่ได้รับการเลื่อนขั้นค่าจ้าง",
+        id: "emp2-13",
+        name: "บัญชีรายละเอียดแสดงการเลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้างสูงกว่า อัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ที่เกษียณอายุราชการ ในสิ้นปีงบประมาณ (แนบท้ายคำสั่ง)",
       },
       {
-        id: "emp-15",
-        name: "บัญชีรายละเอียดลูกจ้างประจำที่ได้รับค่าตอบแทนพิเศษ(แนบท้ายคำสั่ง)",
+        id: "emp2-14",
+        name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ไม่ได้รับการเลื่อนขั้นค่าจ้างที่เกษียณอายุราชการ ในสิ้นปีงบประมาณ",
       },
       {
-        id: "emp-14",
-        name: "บัญชีรายชื่อลูกจ้างประจำผู้ไม่ได้รับค่าตอบแทนพิเศษ",
+        id: "emp2-15",
+        name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ไม่ได้รับค่าตอบแทนพิเศษที่เกษียณอายุราชการ ในสิ้นปีงบประมาณ",
+      },
+      {
+        id: "emp2-17",
+        name: "บัญชีรายละเอียดแสดงการเลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้างสูงกว่า อัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ (แนบท้ายคำสั่ง)",
+      },
+      {
+        id: "emp2-18",
+        name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ไม่ได้รับการเลื่อนขั้นค่าจ้าง",
+      },
+      {
+        id: "emp2-20",
+        name: "บัญชีรายละเอียดให้ลูกจ้างประจำกรุงเทพมหานครได้รับค่าตอบแทนพิเศษ (แนบท้ายคำสั่ง)",
+      },
+      {
+        id: "emp2-21",
+        name: "บัญชีรายชื่อลูกจ้างประจำกรุงเทพมหานครผู้ไม่ได้รับค่าตอบแทนพิเศษ",
+      },
+      {
+        id: "emp2-23",
+        name: "บัญชีรายละเอียดแสดงการเลื่อนขั้นค่าจ้างและให้ลูกจ้างประจำกรุงเทพมหานครได้รับอัตราค่าจ้างสูงกว่า อัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ (แนบท้ายคำสั่ง)",
+      },
+      {
+        id: "emp2-25",
+        name: "แบบฟอร์มบัญชีถือจ่ายอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ประจำปีงบประมาณ",
       },
     ]);
 
diff --git a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
index 7c9187904..59095264d 100644
--- a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
+++ b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
@@ -542,7 +542,7 @@ watch([() => page.value, () => pageSize.value], () => {
                     <q-select
                       ref="positionLevelRef"
                       :class="inputEdit(isReadonly)"
-                      label="ระดับชั่นงาน"
+                      label="ระดับชั้นงาน"
                       v-model="formData.positionLevel"
                       :disable="formData.positionType == ''"
                       :options="levelOps"