diff --git a/src/modules/04_registryPerson/components/DialogAddData.vue b/src/modules/04_registryPerson/components/DialogAddData.vue
deleted file mode 100644
index 841476f61..000000000
--- a/src/modules/04_registryPerson/components/DialogAddData.vue
+++ /dev/null
@@ -1,389 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch, reactive } from "vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
-import type { DataType } from "@/modules/04_registryPerson/interface/response/Main";
-import type {
-  FormAddPerson,
-  MyObjectRef,
-} from "@/modules/04_registryPerson/interface/request/Main";
-import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
-import DialogHeader from "@/components/DialogHeader.vue";
-
-/** importStore*/
-import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
-import { useCounterMixin } from "@/stores/mixin";
-
-const profileStore = useProfileDataStore();
-const $q = useQuasar();
-const store = useRegistryNewDataStore();
-const {
-  dialogConfirm,
-  success,
-  messageError,
-  hideLoader,
-  dialogMessageNotify,
-  date2Thai,
-} = useCounterMixin();
-const { calculateAge } = profileStore;
-const modal = defineModel<boolean>("modal", { required: true });
-const empType = defineModel<string>("empType", { required: true });
-
-const props = defineProps({
-  fetchData: { type: Function },
-  fetchType: { type: Function },
-});
-
-const prefixOps = ref<DataOption[]>([]);
-const rankOps = ref<DataOption[]>([]);
-const levelOps = ref<DataType[]>([]);
-const age = ref<string | null>("");
-const formData = reactive<FormAddPerson>({
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  citizenId: "",
-  position: "",
-  posTypeId: "",
-  posLevelId: "",
-  rank: "",
-  birthDate: null,
-});
-
-function fetchPrefix() {
-  http
-    .get(config.API.orgPrefix)
-    .then((res) => {
-      prefixOps.value = res.data.result.map((v: any) => ({
-        id: v.name,
-        name: v.name,
-      }));
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-function fetchRank() {
-  http
-    .get(config.API.orgRank)
-    .then((res) => {
-      rankOps.value = res.data.result.map((v: any) => ({
-        id: v.name,
-        name: v.name,
-      }));
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
-/**
- * function ตรวจสอบเลขประจำตัวประชาชน
- * @param citizenId เลขประจำตัวประชาชน
- */
-function changeCardID(citizenId: string | number | null) {
-  if (citizenId != null && typeof citizenId == "string") {
-    if (citizenId.length == 13 && citizenId) {
-      http
-        .put(config.API.profileNewCitizenId(citizenId), {
-          citizenId: citizenId,
-        })
-        .then(() => {})
-        .catch((err) => {
-          if (err.response.data.status === 500) {
-            dialogMessageNotify($q, err.response.data.message);
-          } else {
-            messageError($q, err);
-          }
-        });
-    }
-  }
-}
-
-function fetchLevel(id: string) {
-  const listLevel = store.posTypeMain.find((e: DataType) => e.id === id);
-  levelOps.value = listLevel?.posLevels;
-
-  const checkLevel = levelOps.value.filter(
-    (e: DataType) => e.id === formData.posLevelId
-  );
-  if (checkLevel.length === 0) {
-    formData.posLevelId = "";
-  }
-}
-
-function closeDialog() {
-  modal.value = false;
-  clearFormData();
-}
-
-const calculateMaxDate = () => {
-  const today = new Date();
-  today.setFullYear(today.getFullYear() - 18);
-  return today;
-};
-
-function clearFormData() {
-  formData.prefix = "";
-  formData.firstName = "";
-  formData.lastName = "";
-  formData.citizenId = "";
-  formData.position = "";
-  formData.posTypeId = "";
-  formData.posLevelId = "";
-  formData.rank = "";
-  age.value = "";
-  formData.birthDate = null;
-}
-
-async function onSubmit() {
-  dialogConfirm($q, async () => {
-    const type = empType.value !== "officer" ? "-employee" : "";
-    await http
-      .post(config.API.registryNew(type), formData)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        props.fetchData?.();
-        closeDialog();
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-watch(
-  () => modal.value,
-  () => {
-    if (modal.value) {
-      fetchPrefix();
-      fetchRank();
-      props.fetchType?.();
-    }
-  }
-);
-
-watch(
-  () => formData.birthDate,
-  (v) => {
-    if (v) {
-      age.value = calculateAge(v);
-    }
-  }
-);
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 350px">
-      <q-form @submit.prevent @validation-success="onSubmit()" greedy>
-        <DialogHeader tittle="เพิ่มข้อมูล" :close="closeDialog" />
-
-        <q-separator />
-        <q-card-section class="q-pa-md q-col-gutter-md">
-          <div class="row q-gutter-sm">
-            <div class="col">
-              <q-select
-                bg-color="white"
-                v-model="formData.prefix"
-                label="คำนำหน้าชื่อ"
-                outlined
-                dense
-                lazy-rules
-                :options="prefixOps"
-                option-label="name"
-                option-value="id"
-                map-options
-                hide-bottom-space
-                :rules="[
-                  (val) => {
-                    return val.length > 0 || 'กรุณาเลือกคำนำหน้าชื่อ';
-                  },
-                ]"
-                emit-value
-              />
-            </div>
-            <div class="col">
-              <q-select
-                bg-color="white"
-                v-model="formData.rank"
-                label="ยศ"
-                outlined
-                dense
-                :options="rankOps"
-                option-label="name"
-                option-value="id"
-                map-options
-                hide-bottom-space
-                emit-value
-              />
-            </div>
-          </div>
-          <q-input
-            bg-color="white"
-            outlined
-            v-model="formData.firstName"
-            label="ชื่อ"
-            dense
-            lazy-rules
-            borderless
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกชื่อ']"
-            hide-bottom-space
-          />
-          <q-input
-            bg-color="white"
-            outlined
-            v-model="formData.lastName"
-            label="นามสกุล"
-            dense
-            lazy-rules
-            borderless
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกนามสกุล']"
-            hide-bottom-space
-          />
-          <q-input
-            bg-color="white"
-            outlined
-            v-model="formData.citizenId"
-            label="เลขประจำตัวประชาชน"
-            dense
-            lazy-rules
-            borderless
-            :rules="[
-                        (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
-                        (val: string) =>
-                          val.length >= 13 ||
-                          `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-                      ]"
-            maxlength="13"
-            hide-bottom-space
-            mask="#############"
-            @update:model-value="changeCardID"
-          />
-          <div class="row q-col-gutter-sm">
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                autoApply
-                borderless
-                week-start="0"
-                :max-date="calculateMaxDate()"
-                :enableTimePicker="false"
-                menu-class-name="modalfix"
-                v-model="formData.birthDate"
-                :locale="'th'"
-              >
-                <template #year="{ year }">
-                  {{ year + 543 }}
-                </template>
-                <template #year-overlay-value="{ value }">
-                  {{ parseInt(value + 543) }}
-                </template>
-                <template #trigger>
-                  <q-input
-                    for="inputDatereceive"
-                    outlined
-                    dense
-                    hide-bottom-space
-                    class="inputgreen"
-                    :model-value="
-                      formData.birthDate != null
-                        ? date2Thai(formData.birthDate)
-                        : null
-                    "
-                    label="วัน/เดือน/ปี เกิด"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
-                    ]"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        color="primary"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <q-input
-                dense
-                outlined
-                lazy-rules
-                hide-bottom-space
-                readonly
-                class="inputgreen"
-                v-model="age"
-                label="อายุ"
-              />
-            </div>
-          </div>
-          <q-input
-            bg-color="white"
-            outlined
-            v-model="formData.position"
-            label="ตำแหน่งในสายงาน"
-            dense
-            lazy-rules
-            borderless
-            :rules="[(val) => val.length > 0 || 'กรุณากรอกตำแหน่ง']"
-            hide-bottom-space
-          />
-          <q-select
-            bg-color="white"
-            v-model="formData.posTypeId"
-            label="ตำแหน่งประเภท"
-            outlined
-            :options="store.posTypeOps"
-            dense
-            options-cover
-            map-options
-            emit-value
-            option-label="name"
-            option-value="id"
-            hide-bottom-space
-            :rules="[(val) => !!val || 'กรุณาเลือกตำแหน่งประเภท']"
-            @update:model-value="fetchLevel"
-          />
-          <q-select
-            bg-color="white"
-            v-model="formData.posLevelId"
-            label="ระดับ"
-            :options="levelOps"
-            outlined
-            dense
-            map-options
-            emit-value
-            option-label="posLevelName"
-            option-value="id"
-            options-cover
-            hide-bottom-space
-            :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
-          />
-        </q-card-section>
-
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/04_registryPerson/components/DialogHistory.vue b/src/modules/04_registryPerson/components/DialogHistory.vue
index b55ac7e15..61634b160 100644
--- a/src/modules/04_registryPerson/components/DialogHistory.vue
+++ b/src/modules/04_registryPerson/components/DialogHistory.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useQuasar } from "quasar";
+
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType*
@@ -21,11 +23,6 @@ import type {
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  *  use
  */
@@ -37,12 +34,12 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 /**
  * props
  */
-const modal = defineModel<boolean>("modal", { required: true });
+const modal = defineModel<boolean>("modal", { required: true }); //แสดง popup ประวัติถือครองตำแหน่ง
 
 /**
  * ตัวแปร
  */
-const employeeClass = ref<string>("");
+const employeeClass = ref<string>(""); //ประเภทข้า่รายการ
 const typeKeyword = ref<string>("");
 const Keyword = ref<string>("");
 const positionKeyword = ref<string>("");
diff --git a/src/modules/04_registryPerson/components/TableView.vue b/src/modules/04_registryPerson/components/TableView.vue
index d672f6bf6..d7b70d95a 100644
--- a/src/modules/04_registryPerson/components/TableView.vue
+++ b/src/modules/04_registryPerson/components/TableView.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+
 import { checkPermission } from "@/utils/permissions";
 import { useRouter } from "vue-router";
+import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 
 /**
  *importType
@@ -14,10 +16,6 @@ import type { FormFilter } from "@/modules/04_registryPerson/interface/request/M
  */
 import DialogHistory from "@/modules/04_registryPerson/components/DialogHistory.vue";
 
-/**
- * importStore
- */
-import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 /**
  * use
  */
@@ -27,10 +25,10 @@ const router = useRouter();
 /**
  * props
  */
-const formFilter = defineModel<FormFilter>("formFilter", { required: true });
-const maxPage = defineModel<Number>("maxPage", { required: true });
-const empType = defineModel<string>("empType", { required: true });
-const isFilter = defineModel<boolean>("isFilter", { required: true });
+const formFilter = defineModel<FormFilter>("formFilter", { required: true }); //ข้อมูลการค้นหา
+const maxPage = defineModel<Number>("maxPage", { required: true }); //จำนวนหน้าทั้งหมด
+const empType = defineModel<string>("empType", { required: true }); //ประเภท ข้ารายการ,ลูกจ้าง
+const isFilter = defineModel<boolean>("isFilter", { required: true }); //แสดงการค้นหา
 const props = defineProps({
   rows: { type: Array },
   fetchData: { type: Function },
@@ -207,6 +205,11 @@ function redirectToPagePetition() {
   router.push(`/registry-officer/request-edit`);
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ formFilter.value.pageSize
+ *
+ * เมื่อมีการเปลี่ยนแปลงจำทำการดึงข้อมูลรายการทะเบียนประวัติใหม่ตามจำนวน  formFilter.value.pageSize
+ */
 watch(
   () => formFilter.value.pageSize,
   () => {
@@ -294,6 +297,7 @@ watch(
       </q-btn-toggle>
     </div>
   </div>
+
   <d-table
     ref="table"
     row-key="id"
@@ -478,15 +482,6 @@ watch(
               </q-card-section>
             </q-card>
           </q-card-section>
-          <!-- <q-separator inset v-if="checkPermission($route)?.attrIsGet" />
-          <q-btn
-            v-if="checkPermission($route)?.attrIsGet"
-            flat
-            color="black"
-            label="ดูเพิ่มเติม"
-            class="hover-button full-width q-pa-md"
-            @click="onClickViewDetail(props.row.id)"
-          /> -->
         </q-card>
       </div>
     </template>
@@ -526,13 +521,7 @@ watch(
     </template>
   </d-table>
 
-  <!-- <DialogAddData
-    v-model:modal="modalDialogAdd"
-    :fetchData="props.fetchData"
-    :fetchType="props.fetchType"
-    :empType="empType"
-  /> -->
-
+  <!-- ประวัติถือครองตำแหน่ง -->
   <DialogHistory v-model:modal="modalHistory" />
 </template>
 
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
index 3deba9a3d..0f7dd22ea 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import dialogHeader from "@/components/DialogHeader.vue";
-import type { QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
 import { QForm, useQuasar } from "quasar";
+
 import { useRoute } from "vue-router";
-import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ProfesLicense";
-import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ProfesLicense";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ProfesLicense";
+import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ProfesLicense";
+
+import dialogHeader from "@/components/DialogHeader.vue";
+
+const route = useRoute();
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const {
@@ -22,17 +27,18 @@ const {
   pathRegistryEmp,
 } = mixin;
 
-const historyDialog = ref<boolean>(false);
-const mode = ref<string>("table");
-const dialog = ref<boolean>(false);
-const route = useRoute();
 const id = ref<string>(route.params.id.toString());
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-const dialogStatus = ref<string>("create");
-const editId = ref<string>("");
-const keyword = ref<string>("");
-const historyKeyword = ref<string>("");
 
+const mode = ref<string>("table"); //การแสดงผล Table,Card
+const dialog = ref<boolean>(false); //แสดง popup ข้อมูลใบอนุญาตประกอบวิชาชีพ
+const historyDialog = ref<boolean>(false); //แสดง popup ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
+const dialogStatus = ref<string>("create"); //สถานะการแก้ไขข้อมูล
+const editId = ref<string>(""); //id ที่ต้องการแก้ไข
+
+//Table Main
+const rows = ref<ResponseObject[]>([]); //รายการใบอนุญาตประกอบวิชาชีพ
+const keyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "certificateType",
@@ -92,7 +98,21 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "certificateType",
+  "issuer",
+  "certificateNo",
+  "issueDate",
+  "expireDate",
+]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
+//Table ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
+const historyRows = ref<ResponseObject[]>([]); //รายการประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ
+const historyKeyword = ref<string>(""); //คำค้นหาประวัติแก้ไข
 const historyColumns = ref<QTableProps["columns"]>([
   {
     name: "certificateType",
@@ -175,37 +195,6 @@ const historyColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
-const profesLicenseData = reactive<RequestItemsObject>({
-  certificateType: "",
-  issuer: "",
-  certificateNo: "",
-  issueDate: new Date(),
-  expireDate: null,
-  profileId: id.value,
-});
-
-const rows = ref<ResponseObject[]>([]);
-const historyRows = ref<ResponseObject[]>([]);
-
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const visibleColumns = ref<string[]>([
-  "certificateType",
-  "issuer",
-  "certificateNo",
-  "issueDate",
-  "expireDate",
-]);
-
 const historyVisibleColumns = ref<string[]>([
   "certificateType",
   "issuer",
@@ -215,6 +204,19 @@ const historyVisibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const profesLicenseData = reactive<RequestItemsObject>({
+  certificateType: "", //ชื่อใบอนุญาต
+  issuer: "", //หน่วยงานผู้ออกใบอนุญาต
+  certificateNo: "", //เลขที่ใบอนุญาต
+  issueDate: new Date(), //วันที่ออกใบอนุญาต
+  expireDate: null, //วันที่หมดอายุ
+  profileId: id.value,
+});
 
 /**
  * ยืนยันการบันทึกข้อมูล
@@ -242,17 +244,18 @@ function closeDialog() {
  */
 function closeHistoryDialog() {
   historyDialog.value = false;
+  historyRows.value = [];
 }
 
 /**
  * fetch ข้อมูลรายการใบอนุญาตประกอบวิชาชีพ
  */
-function fetchData(id: string) {
+async function fetchData(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewCertificateByProfileId(id, empType.value))
     .then(async (res) => {
-      rows.value = res.data.result;
+      rows.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -357,6 +360,9 @@ function fetchHistoryData(id: string) {
     });
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   fetchData(id.value);
 });
@@ -433,6 +439,7 @@ onMounted(() => {
       </template>
     </q-btn-toggle>
   </div>
+
   <d-table
     :grid="mode === 'card'"
     ref="table"
@@ -569,7 +576,7 @@ onMounted(() => {
                 bg-color="white"
                 dense
                 class="inputgreen"
-                :rules="[(val) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อใบอนุญาต'}`]"
                 hide-bottom-space
               />
             </div>
@@ -582,7 +589,7 @@ onMounted(() => {
                 dense
                 class="inputgreen"
                 :rules="[
-                  (val) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
+                  (val:string) => !!val || `${'กรุณากรอกหน่วยงานผู้ออกใบอนุญาต'}`,
                 ]"
                 hide-bottom-space
               />
@@ -597,7 +604,7 @@ onMounted(() => {
                 bg-color="white"
                 class="inputgreen"
                 dense
-                :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่ใบอนุญาต'}`]"
                 hide-bottom-space
               />
             </div>
@@ -628,7 +635,7 @@ onMounted(() => {
                         : ''
                     "
                     :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
+                      (val:string) => !!val || `${'กรุณาเลือกวันที่ออกใบอนุญาต'}`,
                     ]"
                     :label="`${'วันที่ออกใบอนุญาต'}`"
                   >
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
index 2bec48419..84afe9c05 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
@@ -1,20 +1,23 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { QForm, useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
-import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Training";
-import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Training";
-import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const mixin = useCounterMixin();
+import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Training";
+import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Training";
+
+import dialogHeader from "@/components/DialogHeader.vue";
+
+const route = useRoute();
 const $q = useQuasar();
+const mixin = useCounterMixin();
 const {
-  dialogRemove,
   dialogConfirm,
   showLoader,
   hideLoader,
@@ -24,12 +27,36 @@ const {
   pathRegistryEmp,
 } = mixin;
 
-const route = useRoute();
 const id = ref<string>(route.params.id.toString());
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const dialog = ref<boolean>(false);
-const mode = ref<string>("table");
+const mode = ref<string>("table"); //การแสดงผล Table,Card
+const dialog = ref<boolean>(false); //แสดง popup การฝึกอบรม/ดูงาน
+const dialogStatus = ref<string>("create"); //สถานะการแก้ไขข้อมูล
+const editId = ref<string>(""); //id ที่ต้องการแก้ไข
+const historyDialog = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
+const isDate = ref<string>("false"); //ปี ,วัน/เดือน/ปี
+
+const trainData = reactive<RequestItemsObject>({
+  profileId: id.value,
+  name: "", //ชื่อโครงการ/หลักสูตรการฝึกอบรม
+  topic: "", //หัวข้อการฝึกอบรม/ดูงาน
+  startYear: new Date().getFullYear(), //ปีที่เริ่มต้นการฝึกอบรม/ดูงาน
+  finishYear: new Date().getFullYear(), //ปีที่จบการฝึกอบรม/ดูงาน
+  startDate: new Date(), //วันที่เริ่มต้นการฝึกอบรม/ดูงาน
+  endDate: new Date(), //วันที่จบการฝึกอบรม/ดูงาน
+  yearly: null, //ปีงบประมาณ
+  place: "", //สถานที่ฝึกอบรม/ดูงาน
+  duration: "", //รวมระยะเวลาในการฝึกอบรม/ดูงาน
+  department: "", //หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน
+  numberOrder: "", //เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ
+  dateOrder: null, //คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่
+  isDate: isDate.value === "false" ? false : true,
+});
+
+//Table Main
+const rows = ref<ResponseObject[]>([]);
+const keyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -148,6 +175,26 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "name", // ชื่อโครงงาน
+  "topic", // หัวข้อ
+  "yearly", // ปีที่อบรม
+  "place", // สถานที่
+  "duration", // รวมระยะเวลา
+  "department", // หน่วยงานที่รับผิดชอบ
+  "numberOrder", // เลขที่คำสั่ง
+  "dateOrder", // คำสั่งลงวันที่
+  "startDate", // วันเริ่มต้น
+  "endDate", // วันสิ้นสุด
+]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+//Table ประวัติแก้ไข
+const historyRows = ref<ResponseObject[]>([]);
+const historyKeyword = ref<string>("");
 const historyColumns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -289,55 +336,6 @@ const historyColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const isDate = ref<string>("false");
-const dialogStatus = ref<string>("create");
-const historyDialog = ref<boolean>(false);
-const editId = ref<string>("");
-const keyword = ref<string>("");
-const historyKeyword = ref<string>("");
-const trainData = reactive<RequestItemsObject>({
-  profileId: id.value,
-  name: "",
-  topic: "",
-  yearly: null,
-  place: "",
-  duration: "",
-  department: "",
-  numberOrder: "",
-  dateOrder: null,
-  startDate: new Date(),
-  endDate: new Date(),
-  startYear: new Date().getFullYear(),
-  finishYear: new Date().getFullYear(),
-  isDate: isDate.value === "false" ? false : true,
-});
-
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const rows = ref<ResponseObject[]>([]);
-const historyRows = ref<ResponseObject[]>([]);
-
-const visibleColumns = ref<string[]>([
-  "name", // ชื่อโครงงาน
-  "topic", // หัวข้อ
-  "yearly", // ปีที่อบรม
-  "place", // สถานที่
-  "duration", // รวมระยะเวลา
-  "department", // หน่วยงานที่รับผิดชอบ
-  "numberOrder", // เลขที่คำสั่ง
-  "dateOrder", // คำสั่งลงวันที่
-  "startDate", // วันเริ่มต้น
-  "endDate", // วันสิ้นสุด
-]);
-
 const historyVisibleColumns = ref<string[]>([
   "name", // ชื่อโครงงาน
   "topic", // หัวข้อ
@@ -352,6 +350,10 @@ const historyVisibleColumns = ref<string[]>([
   "lastUpdateFullName", // แก้ไขโดย
   "lastUpdatedAt", // แก้ไขเมื่อวันที่
 ]);
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /**
  * ยืนยันการบันทึกข้อมูล
@@ -422,8 +424,8 @@ function addData() {
     })
     .then(async () => {
       await fetchData(id.value);
-      closeDialog();
       await success($q, "บันทึกข้อมูลสำเร็จ");
+      closeDialog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -449,8 +451,8 @@ function editData(idData: string) {
     })
     .then(async () => {
       await fetchData(id.value);
-      closeDialog();
       await success($q, "บันทึกข้อมูลสำเร็จ");
+      closeDialog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -473,17 +475,18 @@ function closeDialog() {
  */
 function closeHistoryDialog() {
   historyDialog.value = false;
+  historyRows.value = [];
 }
 
 /**
  * fetch รายการการฝึกอบรม/ดูงาน
  */
-function fetchData(id: string) {
+async function fetchData(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewTrainingByProfileId(id, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
+    .then(async (res) => {
+      rows.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -511,6 +514,9 @@ function fetchHistoryData(id: string) {
     });
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   fetchData(id.value);
 });
@@ -725,7 +731,7 @@ onMounted(() => {
                 dense
                 class="inputgreen"
                 :rules="[
-                  (val) =>
+                  (val:string) =>
                     !!val || `${'กรุณากรอกชื่อโครงการ/หลักสูตรการฝึกอบรม'}`,
                 ]"
                 hide-bottom-space
@@ -740,7 +746,7 @@ onMounted(() => {
                 bg-color="white"
                 dense
                 :rules="[
-                  (val) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
+                  (val:string) => !!val || `${'กรุณากรอกหัวข้อการฝึกอบรม/ดูงาน'}`,
                 ]"
                 hide-bottom-space
               />
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
index d5baa51ea..1b91c9b92 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, reactive } from "vue";
+import { onMounted, ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
 import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QTableProps, QForm } from "quasar";
-
 import { useCounterMixin } from "@/stores/mixin";
 import { useInsigniaDataStore } from "@/modules/04_registryPerson/stores/insignia";
-import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
 import type {
   DataOption,
   DataOptionInsignia,
@@ -18,6 +18,8 @@ import type {
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Insignia";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Insignia";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const store = useInsigniaDataStore();
@@ -32,54 +34,46 @@ const {
   dialogConfirm,
   pathRegistryEmp,
 } = mixin;
+
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const id = ref<string>("");
-const insigniaType = ref<string>("");
+const id = ref<string>(""); //id ที่ต้องการแก้ไข
+const insigniaType = ref<string>(""); //ลำดับชั้น
 const insigniaForm = reactive<RequestItemsObject>({
-  year: 0,
-  no: "",
-  volume: "",
-  section: "",
-  page: "",
-  receiveDate: null,
-  insigniaId: "",
-  dateAnnounce: null,
-  issue: "",
-  volumeNo: "",
-  refCommandDate: null,
-  refCommandNo: "",
-  note: "",
+  year: 0, //ปีที่ยื่นขอพระราชทานเครื่องราชฯ
+  receiveDate: null, //วันที่ได้รับ
+  insigniaId: "", //ชื่อเครื่องราชฯ
+  no: "", //ลำดับที่
+  issue: "", //ราชกิจจาฯ ฉบับที่
+  volumeNo: "", //เล่มที่
+  volume: "", //เล่ม
+  section: "", //ตอน
+  page: "", //หน้า
+  dateAnnounce: null, //วันที่ประกาศในราชกิจจาฯ
+  refCommandNo: "", //เลขที่คำสั่ง
+  refCommandDate: null, //'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'
+  note: "", //หมายเหตุ
 });
 
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-const isEdit = ref<boolean>(false);
-const modal = ref<boolean>(false);
-const modeView = ref<string>("table");
-const filterSearch = ref("");
-const filterHistory = ref<string>("");
-const modalHistory = ref<boolean>(false);
-const rowsHistory = ref<RequestItemsObject[]>([]);
-
-const Ops = ref<InsigniaOps>({
-  insigniaOptions: [],
-});
+const isEdit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
+const modal = ref<boolean>(false); //แสดง popup ข้อมูลเครื่องราชอิสริยาภรณ์
+const modeView = ref<string>("table"); //การแสดงผล Table,Card
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
+//ข้อมูลเครื่องราช
 const OpsFilter = ref<InsigniaOps>({
   insigniaOptions: [],
 });
+//ต้วลือกรายการครื่องราช
+const Ops = ref<InsigniaOps>({
+  insigniaOptions: [],
+});
 
+//Table Main
 const rows = ref<ResponseObject[]>([]);
+const filterSearch = ref("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -239,6 +233,30 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "insignia",
+  "insigniaType",
+  "year",
+  "no",
+  "issue",
+  "volumeNo",
+  "volume",
+  "section",
+  "page",
+  "receiveDate",
+  "dateAnnounce",
+  "refCommandNo",
+  "refCommandDate",
+  "note",
+]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+//Table ประวัติแก้ไข
+const rowsHistory = ref<RequestItemsObject[]>([]);
+const filterHistory = ref<string>("");
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -410,22 +428,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns = ref<String[]>([
-  "insignia",
-  "insigniaType",
-  "year",
-  "no",
-  "issue",
-  "volumeNo",
-  "volume",
-  "section",
-  "page",
-  "receiveDate",
-  "dateAnnounce",
-  "refCommandNo",
-  "refCommandDate",
-  "note",
-]);
 const visibleColumnsHistory = ref<String[]>([
   "insignia",
   "insigniaType",
@@ -443,6 +445,10 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /**
  * fetch ข้อมูลรายการเครื่องราชอิสริยาภรณ์
@@ -629,6 +635,9 @@ function clearData() {
   insigniaForm.note = "";
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(async () => {
   await fetchData();
   store.insigniaOption.length === 0 ? await fetchInsignia() : "";
@@ -1145,7 +1154,7 @@ onMounted(async () => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
-        :close="() => (modalHistory = false)"
+        :close="() => ((modalHistory = false), (rowsHistory = []))"
       />
       <q-separator />
 
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
index fb6924a17..e223ca971 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+
 import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { QTableProps, QForm } from "quasar";
 
-import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/components/DialogHeader.vue";
+import type { QTableProps } from "quasar";
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/DeclarationHonor";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/DeclarationHonor";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
@@ -24,32 +26,31 @@ const {
   dialogConfirm,
   pathRegistryEmp,
 } = mixin;
+
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const id = ref<string>("");
-const issueDateYear = ref<number>(0);
+const id = ref<string>(""); //id ที่ต้องการแก้ไข
+const issueDateYear = ref<number>(0); //ปีที่ได้รับ
 const declHonorForm = reactive<RequestItemsObject>({
-  isDate: "false",
-  issuer: "",
-  detail: "",
-  issueDate: null,
-  refCommandNo: "",
-  refCommandDate: null,
+  isDate: "false", //ปี
+  issuer: "", //ผู้มีอำนาจลงนาม
+  detail: "", //รายละเอียด
+  issueDate: null, //ปีที่ได้รับ
+  refCommandNo: "", //เลขที่คำสั่ง
+  refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
 });
 
-const isEdit = ref<boolean>(false);
-const modal = ref<boolean>(false);
-const modeView = ref<string>("table");
-const filterSearch = ref("");
-const filterHistory = ref<string>("");
-const modalHistory = ref<boolean>(false);
-const rowsHistory = ref<ResponseObject[]>([]);
+const isEdit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
+const modal = ref<boolean>(false); //แสดง popup ข้อมูลประกาศเกียรติคุณ
+const modeView = ref<string>("table"); //การแสดงผล Table,Card
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
 
+//Table Main
 const rows = ref<ResponseObject[]>([]);
-
+const filterSearch = ref("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "issueDate",
@@ -109,6 +110,21 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "issuer",
+  "detail",
+  "issueDate",
+  "refCommandNo",
+  "refCommandDate",
+]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+//Table ประวัติแก้ไข
+const rowsHistory = ref<ResponseObject[]>([]);
+const filterHistory = ref<string>("");
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "issueDate",
@@ -191,15 +207,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
-const visibleColumns = ref<String[]>([
-  "issuer",
-  "detail",
-  "issueDate",
-  "refCommandNo",
-  "refCommandDate",
-]);
-
 const visibleColumnsHistory = ref<String[]>([
   "issuer",
   "detail",
@@ -209,12 +216,6 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const historyPagination = ref({
   page: 1,
   rowsPerPage: 10,
@@ -354,6 +355,9 @@ function clearData() {
   declHonorForm.isDate = "false";
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   fetchData();
 });
@@ -767,7 +771,7 @@ onMounted(() => {
       <q-card-section class="flex justify-between" style="padding: 0">
         <DialogHeader
           tittle="ประวัติแก้ไขประกาศเกียรติคุณ"
-          :close="() => (modalHistory = false)"
+          :close="() => ((modalHistory = false), (rowsHistory = []))"
         />
       </q-card-section>
 
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index 4c640af07..a1454a9d1 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, reactive } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import { useRoute } from "vue-router";
+import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import type { QTableProps, QForm } from "quasar";
 
+import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
-import DialogHeader from "@/components/DialogHeader.vue";
-import DialogDevelop from "@/modules/04_registryPerson/components/DialogDevelopmant.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+import type { QTableProps } from "quasar";
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/ResultsPerformance";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/ResultsPerformance";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogDevelop from "@/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const store = useResultsPerformDataStore();
@@ -29,38 +30,36 @@ const {
   dialogConfirm,
   pathRegistryEmp,
 } = mixin;
+
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const id = ref<string>("");
+const id = ref<string>(""); //id ที่ต้องการแก้ไข
+
+const isEdit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
+const modal = ref<boolean>(false); //แสดง popup ผลการประเมินการปฏิบัติราชการ
+const modalDevelop = ref<boolean>(false); //แสดง popup การพัฒนารายบุคคล
+const modeView = ref<string>("table"); //การแสดงผล Table,Card ผลการประเมินการปฏิบัติราชการ
+const modeViewPlan = ref<string>("table"); //การแสดงผล Table,Card การพัฒนารายบุคคล
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
+const kpiDevelopmentId = ref<string>(""); // id การพัฒนารายบุคคล
+
 const resPerformForm = reactive<RequestItemsObject>({
   name: "",
-  point1Total: 0,
-  point1: 0,
-  point2Total: 0,
-  point2: 0,
-  pointSumTotal: 0,
-  pointSum: 0,
-  date: null,
+  point1Total: 0, //ส่วนที่1 (น้ำหนัก)
+  point1: 0, //ผลประเมินส่วนที่1 (คะแนน)
+  point2Total: 0, // ส่วนที่2 (น้ำหนัก)
+  point2: 0, //ส่วนที่2 (น้ำหนัก)
+  pointSumTotal: 0, //ผลรวม (น้ำหนัก)
+  pointSum: 0, //ผลประเมินรวม (คะแนน)
+  date: null, //วันที่ได้รับ
 });
-const isEdit = ref<boolean>(false);
-const modal = ref<boolean>(false);
-const modalDevelop = ref<boolean>(false);
-const modeView = ref<string>("table");
-const modeViewPlan = ref<string>("table");
-const filterSearch = ref("");
-const kpiDevelopmentId = ref<string>("");
-
-const filterHistory = ref<string>("");
-const modalHistory = ref<boolean>(false);
-const rowsHistory = ref<ResponseObject[]>([]);
-const filterSearchPlan = ref("");
 
+//Table ผลการประเมินการปฏิบัติราชการ
 const rows = ref<ResponseObject[]>([]);
-const rowsPlan = ref<any[]>([]);
-
+const filterSearch = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -150,6 +149,107 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "point1Total",
+  "point1",
+  "point2Total",
+  "point2",
+  "pointSumTotal",
+  "pointSum",
+  "name",
+  "date",
+]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+//Table การพัฒนารายบุคคล (Individual Development Plan)
+const rowsPlan = ref<any[]>([]);
+const filterSearchPlan = ref<string>("");
+const columnsPlan = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentProjects",
+    align: "left",
+    label: "วิธีการพัฒนา",
+    sortable: true,
+    field: "developmentProjects",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "เป้าหมายการพัฒนา",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "developmentResults",
+    align: "left",
+    label: "วิธีการวัดผลการพัฒนา",
+    sortable: true,
+    field: "developmentResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point",
+    align: "left",
+    label: "รายงานผลการพัฒนา",
+    sortable: true,
+    field: "point",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsPlan = ref<String[]>([
+  "no",
+  "name",
+  "developmentProjects",
+  "target",
+  "developmentResults",
+  "point",
+]);
+const paginationPlan = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
+
+//Table ประวัติแก้ไข
+const rowsHistory = ref<ResponseObject[]>([]);
+const filterHistory = ref<string>("");
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -272,103 +372,6 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
-const visibleColumns = ref<String[]>([
-  "point1Total",
-  "point1",
-  "point2Total",
-  "point2",
-  "pointSumTotal",
-  "pointSum",
-  "name",
-  "date",
-]);
-
-const visibleColumnsPlan = ref<String[]>([
-  "no",
-  "name",
-  "developmentProjects",
-  "target",
-  "developmentResults",
-  "point",
-]);
-const columnsPlan = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ความรู้ / ทักษะ / สมรรถนะที่ต้องได้รับการพัฒนา",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "developmentProjects",
-    align: "left",
-    label: "วิธีการพัฒนา",
-    sortable: true,
-    field: "developmentProjects",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "target",
-    align: "left",
-    label: "เป้าหมายการพัฒนา",
-    sortable: true,
-    field: "target",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "developmentResults",
-    align: "left",
-    label: "วิธีการวัดผลการพัฒนา",
-    sortable: true,
-    field: "developmentResults",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "point",
-    align: "left",
-    label: "รายงานผลการพัฒนา",
-    sortable: true,
-    field: "point",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-const paginationPlan = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const historyPagination = ref({
   page: 1,
   rowsPerPage: 10,
@@ -379,7 +382,6 @@ const historyPagination = ref({
  */
 async function fetchData() {
   if (!profileId.value) return;
-
   showLoader();
   try {
     const res = await http.get(
@@ -396,12 +398,14 @@ async function fetchData() {
   }
 }
 
+/**
+ * fetch รายการการพัฒนารายบุคคล (Individual Development Plan)
+ */
 async function getDevelop() {
   if (!profileId.value) return;
   await http
     .get(config.API.developMentPlan + `/${profileId.value}`)
     .then((res) => {
-      console.log(res.data.result);
       const data = res.data.result;
       rowsPlan.value = data;
     })
@@ -450,7 +454,6 @@ async function addEditData(editStatus: boolean = false) {
 function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
   modal.value = true;
   isEdit.value = editStatus;
-
   if (editStatus && row) {
     id.value = row.id;
     resPerformForm.name = row.name;
@@ -480,7 +483,6 @@ async function clickClose() {
 async function clickHistory(row: ResponseObject) {
   modalHistory.value = true;
   filterSearch.value = "";
-
   showLoader();
   try {
     const res = await http.get(
@@ -1177,7 +1179,7 @@ onMounted(async () => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
-        :close="() => (modalHistory = false)"
+        :close="() => ((modalHistory = false), (rowsHistory = []))"
       />
       <q-separator />
       <q-card-section style="max-height: 60vh" class="scroll">
diff --git a/src/modules/04_registryPerson/components/DialogDevelopmant.vue b/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue
similarity index 97%
rename from src/modules/04_registryPerson/components/DialogDevelopmant.vue
rename to src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue
index 5963e8dd3..3442d5fca 100644
--- a/src/modules/04_registryPerson/components/DialogDevelopmant.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue
@@ -1,21 +1,33 @@
 <script setup lang="ts">
-import DialogHeader from "@/components/DialogHeader.vue";
 import { ref, reactive, watch, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type {
   DataOptionTechnique,
   ProjectYearOp,
 } from "@/modules/14_KPI/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const id = defineModel<string>("id", { required: true });
 const props = defineProps({
   getAll: Function,
 });
-const route = useRoute();
-const idKpi = ref<string>(route.params.id.toLocaleString());
+
 const development = ref<any[]>([]);
 const reasonDevelopment70 = ref<string>("");
 const reasonDevelopment20 = ref<string>("");
@@ -30,22 +42,6 @@ const checkOtherBox13 = computed<boolean>(() => {
   return development.value.includes("other3");
 });
 
-const isDevelopment70 = computed(() => {
-  return projectTechniquesOp1.value.some((txt) =>
-    development.value.includes(txt.value)
-  );
-});
-const isDevelopment20 = computed(() => {
-  return projectTechniquesOp2.value.some((txt) =>
-    development.value.includes(txt.value)
-  );
-});
-const isDevelopment10 = computed(() => {
-  return projectTechniquesOp3.value.some((txt) =>
-    development.value.includes(txt.value)
-  );
-});
-
 const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
   {
     value: "on_the_job_training",
@@ -86,7 +82,6 @@ const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
   { value: "feedback", label: "การให้ข้อคิดเห็น/เสนอแนะ (Feedback)" },
   { value: "other2", label: "อื่น ๆ (ระบุ)" },
 ]);
-
 const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
   {
     value: "self_learning",
@@ -118,19 +113,7 @@ const choiceOp = ref<DataOptionTechnique[]>([
   { value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" },
   { value: "MANUAL", label: "กรอกเอง" },
 ]);
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  messageError,
-  success,
-  dialogMessageNotify,
-} = mixin;
 
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
 const emType = computed(() => {
   return route.name
     ? route.name === "registryNewByid"
@@ -140,6 +123,7 @@ const emType = computed(() => {
       : "employee"
     : "";
 });
+
 const formData = reactive<{
   year: number | null;
   point: number | null;
@@ -194,62 +178,6 @@ function close() {
   id.value = "";
 }
 
-watch(
-  () => id.value,
-  (i) => {
-    if (i) {
-      showLoader();
-      http
-        .get(
-          config.API.kpiAchievementDevelop +
-            `/registry/${emType.value}/${id.value}`
-        )
-        .then(async (res) => {
-          const data = res.data.result;
-          formData.year = data.selectTypeYear;
-          await getDataByYear();
-          setTimeout(() => {
-            choice.value = data.selectType;
-            projectName.value = projectOpMain.value.find(
-              (i: any) => i.id == data.selectTypeId
-            );
-            formData.name = data.name;
-            formData.group = data.group;
-            formData.target = data.target;
-            formData.isDevelopment70 = data.isDevelopment70;
-            formData.isDevelopment20 = data.isDevelopment20;
-            formData.isDevelopment10 = data.isDevelopment10;
-            formData.achievement10 = data.achievement10;
-            formData.achievement5 = data.achievement5;
-            formData.achievement0 = data.achievement0;
-            development.value = data.developmentProjects;
-            reasonDevelopment70.value = data.developmentProjects.includes(
-              "other1"
-            )
-              ? data.reasonDevelopment70
-              : "";
-            reasonDevelopment20.value = data.developmentProjects.includes(
-              "other2"
-            )
-              ? data.reasonDevelopment20
-              : "";
-            reasonDevelopment10.value = data.developmentProjects.includes(
-              "other3"
-            )
-              ? data.reasonDevelopment10
-              : "";
-          }, 500);
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    }
-  }
-);
-
 const customPosition = () => ({ top: "385px", left: "410px" });
 async function getDataByYear() {
   if (formData.year) {
@@ -316,6 +244,62 @@ function filterOptionFn(val: string, update: Function) {
     );
   });
 }
+
+watch(
+  () => id.value,
+  (i) => {
+    if (i) {
+      showLoader();
+      http
+        .get(
+          config.API.kpiAchievementDevelop +
+            `/registry/${emType.value}/${id.value}`
+        )
+        .then(async (res) => {
+          const data = res.data.result;
+          formData.year = data.selectTypeYear;
+          await getDataByYear();
+          setTimeout(() => {
+            choice.value = data.selectType;
+            projectName.value = projectOpMain.value.find(
+              (i: any) => i.id == data.selectTypeId
+            );
+            formData.name = data.name;
+            formData.group = data.group;
+            formData.target = data.target;
+            formData.isDevelopment70 = data.isDevelopment70;
+            formData.isDevelopment20 = data.isDevelopment20;
+            formData.isDevelopment10 = data.isDevelopment10;
+            formData.achievement10 = data.achievement10;
+            formData.achievement5 = data.achievement5;
+            formData.achievement0 = data.achievement0;
+            development.value = data.developmentProjects;
+            reasonDevelopment70.value = data.developmentProjects.includes(
+              "other1"
+            )
+              ? data.reasonDevelopment70
+              : "";
+            reasonDevelopment20.value = data.developmentProjects.includes(
+              "other2"
+            )
+              ? data.reasonDevelopment20
+              : "";
+            reasonDevelopment10.value = data.developmentProjects.includes(
+              "other3"
+            )
+              ? data.reasonDevelopment10
+              : "";
+          }, 500);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  }
+);
 </script>
 <template>
   <q-dialog persistent v-model="modal">
@@ -389,7 +373,6 @@ function filterOptionFn(val: string, update: Function) {
             <q-select
               outlined
               dense
-              readonly
               :rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
               class="inputgreen"
               label="โครงการ/หลักสูตรการฝึกอบรม"
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
index 133aa0607..b83ef1dd9 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
+import { useQuasar } from "quasar";
 
+import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
 import type {
   RequestItemsHistoryObject,
   FormMain,
 } from "@/modules/04_registryPerson/interface/index/government";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
-import { useRoute } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-/** ฟังชั่นกลาง */
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -42,7 +43,6 @@ const formMain = reactive<FormMain>({
   positionExecutiveSide: "", //ด้านตำแหน่งทางการบริหาร
   positionType: "", //ประเภท
   positionPathSide: "", //ด้าน/สาขา
-
   containDate: null, //วันที่สั่งบรรจุ
   workDate: null, //วันที่เริ่มปฏิบัติราชการ
   reasonSameDate: "",
@@ -56,13 +56,7 @@ const formMain = reactive<FormMain>({
   age: 0, //อายุราชการเกื้อกูล
 });
 
-/** dialog */
-const modalEdit = ref<boolean>(false);
-const modalHistory = ref<boolean>(false);
-const rowsHistory = ref<RequestItemsHistoryObject[]>([]);
-
-const filterKeyword = ref<string>("");
-
+const modalEdit = ref<boolean>(false); //แสดง popup แก้ไขข้อมูลราชการ
 const containDate = ref<Date | null>(null);
 const workDate = ref<Date | null>(null);
 const reasonSameDate = ref<string | null>(null);
@@ -70,6 +64,10 @@ const containDateRef = ref<object | null>(null);
 const workDateRef = ref<object | null>(null);
 const reasonSameDateRef = ref<object | null>(null);
 
+//ประวัติแก้ไขข้อมูลราชการ
+const filterKeyword = ref<string>(""); //คำค้นหา
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไขข้อมูลราชการ;
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลราชการ
 const visibleColumnsHistory = ref<String[]>([
   "dateAppoint",
   "dateStart",
@@ -77,7 +75,6 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "dateAppoint",
@@ -206,12 +203,12 @@ function onSubmit() {
 /**
  * ดึงข้อมูลราชการ
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewGovernmentById(profileId.value, empType.value))
-    .then((res) => {
-      const data = res.data.result;
+    .then(async (res) => {
+      const data = await res.data.result;
       formMain.ocId = data.org ?? "-"; //สังกัด
       formMain.positionId = data.position ?? "-"; //ตำแหน่ง
       formMain.positionLine = data.positionField ?? "-"; //สายงาน
@@ -242,12 +239,12 @@ function getData() {
 /**
  * ดึงข้อมูลประวัติ
  */
-function getDataHistory() {
+async function getDataHistory() {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewGovernmentHistory(profileId.value, empType.value))
-    .then((res) => {
-      let data = res.data.result;
+    .then(async (res) => {
+      let data = await res.data.result;
       rowsHistory.value = [];
       data.map((e: RequestItemsHistoryObject) => {
         rowsHistory.value.push({
@@ -277,13 +274,15 @@ function getDataHistory() {
     })
     .catch((e) => {
       messageError($q, e);
-      modalHistory.value = false;
     })
     .finally(() => {
       hideLoader();
     });
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   getData();
 });
@@ -547,7 +546,7 @@ onMounted(() => {
           : null
         "
                     :rules="[
-                      (val) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
+                      (val:string) => !!val || 'กรุณาเลือก วัน/เดือน/ปี ที่บรรจุ',
                     ]"
                     label="วัน/เดือน/ปี ที่บรรจุ"
                   >
@@ -588,7 +587,7 @@ onMounted(() => {
                       ? date2Thai(workDate as Date)
                       : null
                     "
-                    :rules="[(val) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']"
+                    :rules="[(val:string) => !!val || 'กรุณาเลือกเริ่มปฎิบัติราชการ']"
                     label="วัน/เดือน/ปี เริ่มปฎิบัติราชการ"
                   >
                     <template v-slot:prepend>
@@ -615,7 +614,7 @@ onMounted(() => {
                 outlined
                 dense
                 hide-bottom-space
-                :rules="[(val) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
+                :rules="[(val:string) => !!val || 'กรุณากรอก เหตุผลกรณีไม่ตรงกัน']"
                 v-model="reasonSameDate"
               />
             </div>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
index 5b149dba1..87fc34f4e 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
@@ -1,23 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
 import type {
   RequestItemsObject,
-  FormFilter,
+  DisciplineOps,
   DataOption,
 } from "@/modules/04_registryPerson/interface/index/discipline";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+
 import DialogHeader from "@/components/DialogHeader.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue";
-import { useRoute } from "vue-router";
 
 const route = useRoute();
-
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -35,42 +36,20 @@ const profileId = ref<string>(
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
+//ฟอร์มข้อมูลวินัย
 const disciplineData = reactive<RequestItemsObject>({
-  date: null,
-  level: "",
-  detail: "",
-  unStigma: "",
-  refCommandNo: "",
+  date: null, //วัน/เดือน/ปี
+  level: "", //ระดับการลงโทษทางวินัย
+  detail: "", //รายละเอียด
+  unStigma: "", //ประเภทคำสั่ง
+  refCommandNo: "", //เลขที่คำสั่ง
   profileId: profileId.value,
-  refCommandDate: null,
+  refCommandDate: null, //เอกสารอ้างอิง (ลงวันที่)
 });
-const rows = ref<RequestItemsObject[]>([]);
-const mode = ref<string>("table");
-const filterKeyword = ref<string>("");
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 12,
-  keyword: "",
-  type: "",
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: false,
-  isProbation: false,
-});
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-const visibleColumns = ref<String[]>([
-  "level",
-  "detail",
-  "unStigma",
-  "refCommandNo",
-  "refCommandDate",
-  "date",
-]);
+
+const rows = ref<RequestItemsObject[]>([]); //รายการวินัย
+const mode = ref<string>("table"); //การแสดงผล Table card
+const filterKeyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -141,19 +120,25 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "level",
+  "detail",
+  "unStigma",
+  "refCommandNo",
+  "refCommandDate",
+  "date",
+]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
-const dateRef = ref<object | null>(null);
-const detailRef = ref<object | null>(null);
-const refCommandNoRef = ref<object | null>(null);
+const edit = ref<boolean>(false); //สถานะการแก้ไข
+const modal = ref<boolean>(false); //แสดงข้อมูลวินัย
+const modalHistory = ref<boolean>(false); //แสดงประวัติแก้ไขวินัย
+const id = ref<string>(""); //id ที่ต้แงการแก้ไข
 
-/** dialog */
-const edit = ref<boolean>(false);
-const modal = ref<boolean>(false);
-const modalHistory = ref<boolean>(false);
-
-const id = ref<string>("");
-
-const Ops = ref<any>({
+const Ops = ref<DisciplineOps>({
   levelOptions: [
     { id: "0", name: "ไม่ร้ายแรง", disable: true },
     { id: "ภาคทัณฑ์", name: "ภาคทัณฑ์", disable: false },
@@ -173,7 +158,7 @@ const Ops = ref<any>({
     { id: "อื่นๆ", name: "อื่นๆ", disable: false },
   ],
 });
-const OpsFilter = ref<any>({
+const OpsFilter = ref<DisciplineOps>({
   levelOptions: [
     { id: "0", name: "ไม่ร้ายแรง", disable: true },
     { id: "ภาคทัณฑ์", name: "ภาคทัณฑ์", disable: false },
@@ -349,6 +334,9 @@ function onSubmit() {
   );
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   fetchData(profileId.value);
 });
@@ -490,12 +478,7 @@ onMounted(() => {
           </q-btn>
         </q-td>
         <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>
+          <div>
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
index 21fe9fa0c..28bc05579 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import { ref, watch, reactive } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import { useRoute } from "vue-router";
 
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/index/discipline";
 
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
+import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -19,26 +17,16 @@ const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
   mixin;
 
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-const filterKeyword = ref<string>("");
-const rows = ref<RequestItemsObject[]>([]); //select data history
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true }); //แสดงประวัติแก้ไขวินัย
+const id = defineModel<string>("id", { required: true }); //id วินัยที่ต้องการดูประวัติแก้ไขวินัย
 
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-const visibleColumns = ref<String[]>([
-  "level",
-  "detail",
-  "unStigma",
-  "refCommandNo",
-  "refCommandDate",
-  "date",
-  "createdFullName",
-  "createdAt",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+
+const filterKeyword = ref<string>(""); //คำค้นหา
+const rows = ref<RequestItemsObject[]>([]); //รายการประวัติแก้ไขวินัย
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -132,18 +120,34 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "level",
+  "detail",
+  "unStigma",
+  "refCommandNo",
+  "refCommandDate",
+  "date",
+  "createdFullName",
+  "createdAt",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /**
  * fetch ข้อมูลประวัติการแก่ไขข้อมูลวินัย
  */
-function getHistory() {
+async function getHistory() {
   showLoader();
-  http
+  await http
     .get(
       config.API.profileNewDisciplineHisByDisciplineId(id.value, empType.value)
     )
-    .then((res) => {
-      let data = res.data.result;
+    .then(async (res) => {
+      let data = await res.data.result;
       rows.value = [];
       data.map((e: RequestItemsObject) => {
         rows.value.push({
@@ -166,6 +170,11 @@ function getHistory() {
     });
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไขวินัย
+ */
 watch(modal, (status) => {
   if (status == true) {
     getHistory();
@@ -179,7 +188,10 @@ watch(modal, (status) => {
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 80%">
-      <DialogHeader tittle="ประวัติแก้ไขวินัย" :close="() => (modal = false)" />
+      <DialogHeader
+        tittle="ประวัติแก้ไขวินัย"
+        :close="() => ((modal = false), (rows = []))"
+      />
       <q-separator color="grey-4" />
 
       <q-card-section style="max-height: 60vh" class="scroll">
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
index 955097751..507af025c 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
@@ -1,25 +1,27 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
-
-import { useRoute } from "vue-router";
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
+import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type {
   DetailData,
   DataOptionLeave,
   DataOption,
   ResponseTotalObject,
 } from "@/modules/04_registryPerson/interface/index/leave";
+import type {
+  DataLeave,
+  DataLeaveType,
+} from "@/modules/04_registryPerson/interface/response/Main";
 
+import DialogHeader from "@/components/DialogHeader.vue";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-const rowsTotal = ref<ResponseTotalObject[]>([]);
-const id = ref<string>("");
 const route = useRoute();
 
 const $q = useQuasar();
@@ -39,7 +41,8 @@ const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
+const rowsTotal = ref<ResponseTotalObject[]>([]);
+const id = ref<string>("");
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
@@ -47,21 +50,18 @@ const pagination = ref({
 const mode = ref<string>("table");
 const filterKeyword = ref<string>("");
 
-const rows = ref<DetailData[]>([]);
-
 const modal = ref<boolean>(false);
 const edit = ref<boolean>(false);
 const modalHistory = ref<boolean>(false);
 
+const typeLeave = ref<DataOptionLeave | undefined | null>(); //ประเภทการลา
+const dateRange = ref<[Date, Date]>([new Date(), new Date()]); //วัน เดือน ปีที่ล
+const numLeave = ref<number>(1); //จำนวนวันที่ลา
+const statLeave = ref<string>(""); //สถานะการลา
 const reason = ref<string>(""); //เหตุผล
-const numLeave = ref<number>(1);
-const dateRange = ref<[Date, Date]>([new Date(), new Date()]);
-const numUsedLeave = ref<number>(0);
-const typeLeave = ref<any>();
+const numUsedLeave = ref<number | undefined>(0);
 const typeLeaveOption = ref<DataOptionLeave[]>([]);
 const typeLeaveOptionFilter = ref<DataOptionLeave[]>([]);
-
-const statLeave = ref<string>("");
 const statLeaveOption = ref<DataOption[]>([
   { id: "approve", name: "ผ่านการอนุมัติ" },
   { id: "reject", name: "ไม่ผ่านการอนุมัติ" },
@@ -75,39 +75,8 @@ const statLeaveOptionFilter = ref<DataOption[]>([
   { id: "waitting", name: "รออนุมัติ" },
 ]);
 
-const statusLeave = (val: string) => {
-  switch (val) {
-    case "waitting":
-      return "รออนุมัติ";
-    case "reject":
-      return "ไม่ผ่านการอนุมัติ";
-    case "approve":
-      return "ผ่านการอนุมัติ";
-    case "cancel":
-      return "ยกเลิก";
-    default:
-      return "-";
-  }
-};
-
-const clickEditRowType = () => {
-  const filter = typeLeaveOptionFilter.value.filter(
-    (v: DataOptionLeave) => v.id == typeLeave.value
-  );
-  if (filter.length > 0) {
-    numUsedLeave.value = filter[0].totalLeave;
-  }
-};
-
-const visibleColumns = ref<String[]>([
-  "no",
-  "typeLeave",
-  "dateLeave",
-  "numLeave",
-  "status",
-  "reason",
-]);
-
+//Table
+const rows = ref<DetailData[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -176,6 +145,38 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "no",
+  "typeLeave",
+  "dateLeave",
+  "numLeave",
+  "status",
+  "reason",
+]);
+
+const statusLeave = (val: string) => {
+  switch (val) {
+    case "waitting":
+      return "รออนุมัติ";
+    case "reject":
+      return "ไม่ผ่านการอนุมัติ";
+    case "approve":
+      return "ผ่านการอนุมัติ";
+    case "cancel":
+      return "ยกเลิก";
+    default:
+      return "-";
+  }
+};
+
+const clickEditRowType = () => {
+  const filter = typeLeaveOptionFilter.value.filter(
+    (v: DataOptionLeave) => v.id == typeLeave.value?.id
+  );
+  if (filter.length > 0) {
+    numUsedLeave.value = filter[0].totalLeave;
+  }
+};
 
 /**
  * function เปิด dialog ข้อมูลการลา
@@ -187,7 +188,7 @@ function openDialogAdd() {
   http
     .get(config.API.profileNewLeaveType())
     .then((res) => {
-      const dataOp = res.data.result.map((item: any) => ({
+      const dataOp = res.data.result.map((item: DataLeaveType) => ({
         id: item.id,
         name: item.name,
         code: item.code,
@@ -271,7 +272,7 @@ function closeDialog() {
   modal.value = false;
   edit.value = false;
   id.value = "";
-  typeLeave.value = "";
+  typeLeave.value = null;
   statLeave.value = "";
   reason.value = "";
   dateRange.value = [new Date(), new Date()];
@@ -285,7 +286,7 @@ function closeDialog() {
  * @param update function
  * @param filtername type select
  */
-function filterSelector(val: any, update: Function, filtername: string) {
+function filterSelector(val: string, update: Function, filtername: string) {
   switch (filtername) {
     case "typeLeaveOption":
       update(() => {
@@ -350,7 +351,7 @@ function saveData() {
   showLoader();
   http
     .post(config.API.profileNewLeave(empType.value), {
-      leaveTypeId: typeLeave.value.id,
+      leaveTypeId: typeLeave.value?.id,
       dateLeaveStart: dateToISO(dateRange.value[0]),
       dateLeaveEnd: dateToISO(dateRange.value[1]),
       leaveDays: numLeave.value,
@@ -377,11 +378,11 @@ function saveData() {
 /**
  * บันทึกแก้ไขข้อมูล
  */
-const editData = async () => {
+async function editData() {
   showLoader();
   http
     .patch(config.API.profileNewLeaveById(id.value, empType.value), {
-      leaveTypeId: typeLeave.value.id,
+      leaveTypeId: typeLeave.value?.id,
       dateLeaveStart: dateToISO(dateRange.value[0]),
       dateLeaveEnd: dateToISO(dateRange.value[1]),
       leaveDays: numLeave.value,
@@ -401,19 +402,18 @@ const editData = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
 
 /**
- * function fetch ข้อมูลรายการวินัย
+ * function fetch ข้อมูลรายการลา
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewLeaveById(profileId.value, empType.value))
-    .then((res) => {
-      console.log(res.data.result);
-      const data = res.data.result;
-      rows.value = data.map((item: any) => ({
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data.map((item: DataLeave) => ({
         id: item.id,
         typeLeave: item.leaveType.name,
         code: item.leaveType.refCommandDate,
@@ -433,6 +433,9 @@ function getData() {
     });
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   getData();
 });
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
index 8ab320af4..6b45574fd 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { ref, watch, reactive } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import { useRoute } from "vue-router";
 
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -12,6 +11,9 @@ import type {
   DetailData,
   FormFilter,
 } from "@/modules/04_registryPerson/interface/index/leave";
+import type { DataLeave } from "@/modules/04_registryPerson/interface/response/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
 
 const modal = defineModel<boolean>("modal", { required: true });
 const id = defineModel<string>("id", { required: true });
@@ -25,7 +27,7 @@ const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 const filterKeyword = ref<string>("");
-const rows = ref<DetailData[]>([]); //select data history
+const rows = ref<DetailData[]>([]); //data history
 const formFilter = reactive<FormFilter>({
   page: 1,
   pageSize: 12,
@@ -39,22 +41,6 @@ const formFilter = reactive<FormFilter>({
   isProbation: false,
 });
 
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-const visibleColumns = ref<String[]>([
-  "no",
-  "typeLeave",
-  "dateLeave",
-  "numLeave",
-  "sumLeave",
-  "totalLeave",
-  "status",
-  "reason",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -146,18 +132,34 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "no",
+  "typeLeave",
+  "dateLeave",
+  "numLeave",
+  "sumLeave",
+  "totalLeave",
+  "status",
+  "reason",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /**
  * function fetch ข้อมูลประวัติการแก้ไขการลา
  */
-function getHistory() {
+async function getHistory() {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewLeaveHistory(id.value, empType.value))
-    .then((res) => {
-      let data = res.data.result;
+    .then(async (res) => {
+      let data = await res.data.result;
       rows.value = [];
-      data.map((e: any) => {
+      data.map((e: DataLeave) => {
         rows.value.push({
           ...e,
           id: e.id,
@@ -215,6 +217,11 @@ function statusLeave(val: string) {
   }
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
+ */
 watch(modal, (status) => {
   if (status == true) {
     getHistory();
@@ -228,7 +235,10 @@ watch(modal, (status) => {
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 80%">
-      <DialogHeader tittle="ประวัติแก้ไขการลา" :close="() => (modal = false)" />
+      <DialogHeader
+        tittle="ประวัติแก้ไขการลา"
+        :close="() => ((modal = false), (rows = []))"
+      />
       <q-separator color="grey-4" />
       <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
index 89daae3ff..890841454 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -1,26 +1,19 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
-
 import { useQuasar, type QTableProps } from "quasar";
-import type {
-  FormFilter,
-  RequestItemsObject,
-} from "@/modules/04_registryPerson/interface/index/performSpecialWork";
 
+import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import { useCounterMixin } from "@/stores/mixin";
+import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/index/performSpecialWork";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue";
-import { useRoute } from "vue-router";
 
 const route = useRoute();
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -34,53 +27,29 @@ const {
   pathRegistryEmp,
 } = mixin;
 
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const modal = ref<boolean>(false);
-const edit = ref<boolean>(false);
-const modalHistory = ref<boolean>(false);
-
-const id = ref<string>("");
-
+const id = ref<string>(""); //id ที่ต้องการแก้ไข
+const modal = ref<boolean>(false); //แสดง popup ข้อมูลปฏิบัติราชการพิเศษ
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติการแก้ไขข้อมูลปฏิบัติราชการพิเศษ
+const edit = ref<boolean>(false); //สถานะการแก่ไข
+//ฟอร์มข้อมูลปฏิบัติราชการพิเศษ
 const dutyData = reactive<RequestItemsObject>({
   profileId: profileId.value,
-  dateStart: new Date(),
-  dateEnd: null,
-  detail: "",
-  reference: "",
-  refCommandNo: "",
-  refCommandDate: null,
+  dateStart: new Date(), //วันที่เริ่มต้น
+  dateEnd: null, //วันที่สิ้นสุด
+  detail: "", //รายละเอียด
+  reference: "", //เอกสารอ้างอิง
+  refCommandNo: "", //เลขที่คำสั่ง
+  refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
 });
 
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-const rows = ref<RequestItemsObject[]>([]);
-const filterKeyword = ref<string>("");
-const mode = ref<string>("table");
-
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 12,
-  keyword: "",
-  type: "",
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: false,
-  isProbation: false,
-});
-
-const visibleColumns = ref<String[]>([
-  "dateStart",
-  "dateEnd",
-  "detail",
-  "reference",
-  "refCommandNo",
-  "refCommandDate",
-]);
+const mode = ref<string>("table"); //การแสดงผล Table card
+const filterKeyword = ref<string>(""); //คำค้นหา
+const rows = ref<RequestItemsObject[]>([]); //รายการปฏิบัติราชการพิเศษ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "dateStart",
@@ -152,6 +121,18 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "dateStart",
+  "dateEnd",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /** เปิด dialog */
 function openDialogAdd() {
@@ -184,7 +165,6 @@ function openDialogHistory(idOrder: string) {
 function closeDialog() {
   modal.value = false;
   edit.value = false;
-
   dutyData.dateStart = new Date();
   dutyData.dateEnd = null;
   dutyData.detail = "";
@@ -196,12 +176,12 @@ function closeDialog() {
 /**
  * fetch ข้อมูลรายการพิเศษ
  */
-function fetchData(id: string) {
+async function fetchData(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewDutyByProfileId(id, empType.value))
     .then(async (res) => {
-      rows.value = res.data.result;
+      rows.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -278,6 +258,9 @@ function onSubmit() {
   );
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   fetchData(profileId.value);
 });
@@ -418,13 +401,7 @@ onMounted(() => {
           </q-btn>
         </q-td>
         <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>
+          <div>
             {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
@@ -541,7 +518,7 @@ onMounted(() => {
                     outlined
                     dense
                     :model-value="date2Thai(dutyData.dateStart)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
                     hide-bottom-space
                     :label="`${'วันที่เริ่มต้น'}`"
                   >
@@ -580,7 +557,7 @@ onMounted(() => {
                     dense
                     outlined
                     :model-value="date2Thai(dutyData.dateEnd)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
+                    :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
                     hide-bottom-space
                     :label="`${'วันที่สิ้นสุด'}`"
                   >
@@ -605,7 +582,7 @@ onMounted(() => {
                 lazy-rules
                 autogrow
                 v-model="dutyData.reference"
-                :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
                 hide-bottom-space
                 :label="`${'เอกสารอ้างอิง'}`"
               />
@@ -619,7 +596,7 @@ onMounted(() => {
                 lazy-rules
                 autogrow
                 v-model="dutyData.detail"
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
                 hide-bottom-space
                 :label="`${'รายละเอียด'}`"
               />
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
index 476ef5dad..262064e2c 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, reactive } from "vue";
+import { ref, watch } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
@@ -7,10 +7,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type {
-  FormFilter,
-  ResponseObject,
-} from "@/modules/04_registryPerson/interface/index/performSpecialWork";
+import type { ResponseObject } from "@/modules/04_registryPerson/interface/index/performSpecialWork";
 import { useRoute } from "vue-router";
 
 const modal = defineModel<boolean>("modal", { required: true });
@@ -24,23 +21,8 @@ const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const filterKeyword = ref<string>("");
-const rows = ref<ResponseObject[]>([]); //select data history
-
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-const visibleColumns = ref<String[]>([
-  "dateStart",
-  "dateEnd",
-  "detail",
-  "reference",
-  "refCommandNo",
-  "refCommandDate",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
+const filterKeyword = ref<string>(""); //คำค้นหา
+const rows = ref<ResponseObject[]>([]); //data history
 const columns = ref<QTableProps["columns"]>([
   {
     name: "dateStart",
@@ -135,6 +117,20 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "dateStart",
+  "dateEnd",
+  "detail",
+  "reference",
+  "refCommandNo",
+  "refCommandDate",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+const historyPagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /**
  * function fetch ข้อมูลประวติการแก้ไขข้อมูล
@@ -171,6 +167,11 @@ function getHistory() {
     });
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
+ */
 watch(modal, (status) => {
   if (status == true) {
     getHistory();
@@ -186,7 +187,7 @@ watch(modal, (status) => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขปฏิบัติราชการพิเศษ"
-        :close="() => (modal = false)"
+        :close="() => ((modal = false), (rows = []))"
       />
       <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
index ec32afe50..d302a5c6a 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
@@ -2,10 +2,10 @@
 import { ref } from "vue";
 
 /** importComponents*/
-import Info from "@/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue";
-import Discipline from "@/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue";
-import Leave from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue";
-import PerformSpecialWork from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue";
+import Info from "@/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue"; //ข้อมูลราชการ
+import Discipline from "@/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue"; //วินัย
+import Leave from "@/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue"; //การลา
+import PerformSpecialWork from "@/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue"; //ปฏิบัติราชการพิเศษ
 
 const tab = ref<string>("1");
 </script>
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
index eb43b2aa0..d2c7f444b 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { checkPermission } from "@/utils/permissions";
-import { ref, onMounted, reactive } from "vue";
-import type {
-  RowList,
-  FormFilter,
-  MyObjectRef,
-} from "@/modules/04_registryPerson/interface/index/other";
 
+import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin";
+
+import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
+
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useRoute } from "vue-router";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue";
+
 const route = useRoute();
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -29,28 +28,22 @@ const {
 
 const id = ref<string>("");
 
-const pagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const mode = ref<string>("table");
-const filterKeyword = ref<string>("");
+const mode = ref<string>("table"); //การแสดงผล Table,Card
+const modal = ref<boolean>(false); //แสดง popup  ข้อมูลอื่นๆ
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไข
+const edit = ref<boolean>(false); //สถานะการแก้ไขข้อมูล
+
+const date = ref<Date | null>(null); //วันที่
+const detail = ref<string>(""); //รายละเอียด
+
+//Table
 const rows = ref<RowList[]>([]);
-
-/** modal */
-const modal = ref<boolean>(false);
-const edit = ref<boolean>(false);
-const modalHistory = ref<boolean>(false);
-
-const date = ref<Date | null>(null);
-const detail = ref<string>();
-
-const visibleColumns = ref<String[]>(["date", "detail"]);
+const filterKeyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -74,8 +67,33 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>(["date", "detail"]);
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 10,
+});
 
-/** เปิด dialog */
+/**
+ * fetch รายการข้อมูลอื่นๆ
+ */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.profileNewOtherByProfileId(profileId.value, empType.value))
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * เปิด dialog ข้อมูลอื่นๆ
+ */
 function openDialogAdd() {
   modal.value = true;
 }
@@ -91,7 +109,9 @@ function openDialogEdit(props: RowList) {
   date.value = props.date;
   detail.value = props.detail;
 }
-/** dialog ประติ
+
+/**
+ * dialog ประติ
  * @param id id รายการ
  */
 function openDialogHistory(idOrder: string) {
@@ -99,7 +119,9 @@ function openDialogHistory(idOrder: string) {
   modalHistory.value = true;
 }
 
-/** ปิด dialog */
+/**
+ * ปิด dialog
+ */
 function closeDialog() {
   modal.value = false;
   edit.value = false;
@@ -107,7 +129,9 @@ function closeDialog() {
   detail.value = "";
 }
 
-/** validate check*/
+/**
+ * validate check
+ */
 function validateForm() {
   dialogConfirm(
     $q,
@@ -171,24 +195,6 @@ function editData() {
     });
 }
 
-/**
- * fetch รายการข้อมูลอื่นๆ
- */
-function getData() {
-  showLoader();
-  http
-    .get(config.API.profileNewOtherByProfileId(profileId.value, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 onMounted(() => {
   getData();
 });
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
index 3c39ec9b1..956ea857a 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
@@ -1,56 +1,32 @@
 <script setup lang="ts">
-import { ref, watch, reactive } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
+
 import { useRoute } from "vue-router";
-
-import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
-
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type {
-  RequestItemsObject,
-  FormFilter,
-} from "@/modules/04_registryPerson/interface/index/discipline";
+import type { RowList } from "@/modules/04_registryPerson/interface/index/other";
 
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
+import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
   mixin;
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-const currentPage = ref<number>(1);
-const maxPage = ref<number>(1);
-const filterKeyword = ref<string>("");
-const rows = ref<RowList[]>([]); //select data history
-const formFilter = reactive<FormFilter>({
-  page: 1,
-  pageSize: 12,
-  keyword: "",
-  type: "",
-  posType: "",
-  posLevel: "",
-  retireYear: "",
-  rangeYear: { min: 0, max: 60 },
-  isShowRetire: false,
-  isProbation: false,
-});
+
+/** 
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const id = defineModel<string>("id", { required: true });
+
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const visibleColumns = ref<String[]>([
-  "date",
-  "detail",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
+const rows = ref<RowList[]>([]); // data history
+const filterKeyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -97,6 +73,16 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "date",
+  "detail",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
+
+/**
+ * ฟังก์ชันดึงข้อมูลประวัติการแก่ไขข้อมูล
+ */
 function getHistory() {
   showLoader();
   http
@@ -122,12 +108,18 @@ function getHistory() {
     });
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
+ */
 watch(modal, (status) => {
   if (status == true) {
     getHistory();
     filterKeyword.value = "";
   } else {
     filterKeyword.value = "";
+    rows.value = [];
   }
 });
 </script>
diff --git a/src/modules/04_registryPerson/components/detail/Other/02_Document.vue b/src/modules/04_registryPerson/components/detail/Other/02_Document.vue
index c1e512a3e..0e8fb1e63 100644
--- a/src/modules/04_registryPerson/components/detail/Other/02_Document.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/02_Document.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
+import { useQuasar } from "quasar";
+import axios from "axios";
 
+import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import axios from "axios";
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
+
 import type { ArrayFileList } from "@/modules/04_registryPerson/interface/index/document";
+
 const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
@@ -21,12 +23,15 @@ const {
   dialogRemove,
 } = mixin;
 
-const documentFile = ref<any>(null);
-const fileList = ref<ArrayFileList[]>([]);
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
+const documentFile = ref<any>(null);
+const fileList = ref<ArrayFileList[]>([]); //รายการเอกสารหลักฐาน
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายการเอกสารหลักฐาน
+ */
 async function getData() {
   showLoader();
   await http
@@ -45,31 +50,8 @@ async function getData() {
 }
 
 /**
- * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ * ฟังก์ชั่นสร้าง Path สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
  */
-async function uploadFileDoc(uploadUrl: string, file: any) {
-  const Data = new FormData();
-  Data.append("file", documentFile.value);
-  showLoader();
-  await axios
-    .put(uploadUrl, file, {
-      headers: {
-        "Content-Type": file.type,
-      },
-    })
-    .then(async () => {
-      await getData();
-      success($q, "อัปโหลดไฟล์สำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-      documentFile.value = null;
-    });
-}
-
 function clickUpload(file: any) {
   const fileName = { fileName: file.name };
   dialogConfirm(
@@ -109,6 +91,32 @@ function clickUpload(file: any) {
   );
 }
 
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async () => {
+      await getData();
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+
 /**
  * ดาวน์โหลดลิงก์ไฟล์
  * @param fileName file name
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
index 960a21bff..006b9e807 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import { onMounted, watch, ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+
 import { checkPermission } from "@/utils/permissions";
 import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /**
  * importType
  */
-import type { QTableColumn, QForm } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";
 
@@ -18,12 +21,6 @@ import type { ResponseObject } from "@/modules/04_registryPerson/interface/respo
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
-
 /**
  * use
  */
@@ -59,14 +56,14 @@ const empType = ref<string>(
     : "-employee"
 );
 
-const modal = ref<boolean>(false);
-const informaData = ref<ResponseObject>();
-const rowsHistory = ref<ResponseObject[]>([]);
-const filterHistory = ref<string>("");
-const modalHistory = ref<boolean>(false);
 const id = ref<string>("");
-const age = ref<string | null>("");
-const formData = reactive<RequestObject>(store.defaultProfile);
+const modal = ref<boolean>(false); // แสดงฟอร์มแก้ไขประวัติส่วนตัว
+const informaData = ref<ResponseObject>(); // ข้อมูลส่วนคัว
+const rowsHistory = ref<ResponseObject[]>([]); // ช้อมูลรายการประวัติการแก้ไข
+const filterHistory = ref<string>(""); //คำค้นหาช้อมูลรายการประวัติการแก้ไข
+const modalHistory = ref<boolean>(false); // แสดงช้อมูลรายการประวัติการแก้ไข
+const age = ref<string | null>(""); //อายุ
+const formData = reactive<RequestObject>(store.defaultProfile); //ฟอร์มข้อมูลการแก่้ไข
 
 /** ข้อมูล Label*/
 const dataLabel = {
@@ -81,7 +78,6 @@ const dataLabel = {
   religion: "ศาสนา",
   bloodGroup: "หมู่เลือด",
   phone: "เบอร์โทร",
-
   prefix: "คำนำหน้าชื่อ",
   rank: "ยศ",
   firstName: "ชื่อ",
@@ -286,16 +282,18 @@ const pagination = ref({
 
 /**
  * function เรียกข้อมูลข้อมูลส่วนตัว
+ *
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .get(config.API.registryNewByProfileId(profileId.value, empType.value))
     .then((res) => {
       informaData.value = res.data.result;
       id.value = res.data.result.id;
 
       if (res.data.result.birthDate) {
+        // กำหนดอายุ ส่งวันเกิดไปคำนวน
         age.value = calculateAge(res.data.result.birthDate);
       }
     })
@@ -347,8 +345,8 @@ function onSubmit() {
         .then(async () => {
           await props.fetchDataPersonal?.();
           await getData();
-          modal.value = false;
           await success($q, "บันทึกข้อมูลสำเร็จ");
+          modal.value = false;
         })
         .catch((e) => {
           messageError($q, e);
@@ -365,13 +363,13 @@ function onSubmit() {
 /**
  * function ดูข้อมูลประวัติแก้ไขข้อมูลส่วนตัว
  */
-function clickHistory() {
+async function clickHistory() {
   modalHistory.value = true;
   filterHistory.value = "";
-  http
+  await http
     .get(config.API.profileNewProfileHisById(id.value, empType.value))
-    .then((res) => {
-      rowsHistory.value = res.data.result;
+    .then(async (res) => {
+      rowsHistory.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -413,6 +411,9 @@ function calculateMaxDate() {
   return today;
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของวันเกิดเมื่อมีการเปลี่ยนแปลงจะคำนวนอายูใหม่
+ */
 watch(
   () => formData.birthDate,
   (v) => {
@@ -422,6 +423,9 @@ watch(
   }
 );
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   const promises = [];
 
@@ -837,7 +841,7 @@ onMounted(() => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
-        :close="() => (modalHistory = false)"
+        :close="() => ((modalHistory = false), (rowsHistory = []))"
       />
       <q-separator />
 
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 0f6c1da2f..6a13b62fc 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref, useAttrs, reactive, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import axios from "axios";
+
+import { checkPermission } from "@/utils/permissions";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -12,18 +15,14 @@ import config from "@/app.config";
  */
 import type { QTableProps } from "quasar";
 import type { ResponseObject } from "@/components/information/interface/response/OldName";
+import type { DataProfile } from "@/modules/04_registryPerson/interface/response/Main";
+import type { FormChangeName } from "@/modules/04_registryPerson/interface/request/Main";
 
 /**
  * importComponents
  */
 import dialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -49,36 +48,35 @@ const props = defineProps({
   fetchDataPersonal: { type: Function, require: true },
 });
 
-const submitDisable = ref<boolean>(true);
-const profileId = ref<string>(route.params.id.toString());
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+const profileId = ref<string>(route.params.id.toString()); //id Profile
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); // ประเภทข้าราชการ
 
+const submitDisable = ref<boolean>(true); //แเสดงปุ่มบันทึก
 const editId = ref<string>("");
-const dialog = ref<boolean>(false);
-const dialogStatus = ref<string>("create");
-const filterSearch = ref("");
-
-const historyDialog = ref<boolean>(false);
-const historyKeyword = ref<string>("");
-
-const changeNameData = reactive({
+const dialog = ref<boolean>(false); // แสดง popup เปลี่ยนชื่อ-นามสกุล
+const dialogStatus = ref<string>("create"); // สถานะแก้ไข สร้าง
+const filterSearch = ref<string>(""); // คำค้นหา
+const historyDialog = ref<boolean>(false); // แสดงประวัติการแก่้ไข
+const historyKeyword = ref<string>(""); // คำค้นหาประวัติ
+// ฟอร์มการเปลี่ยนชื่อ
+const changeNameData = reactive<FormChangeName>({
   profileId: profileId.value,
-  prefixId: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  status: "",
-  documentId: "",
+  prefixId: "", // id คำนำหน้า
+  prefix: "", // คำนำหน้า
+  firstName: "", // ชื่อ
+  lastName: "", // นามสกุล
+  status: "", // สถานะ
+  documentId: "", // ไฟล์หลักฐาน
 });
 
-const selection = ref<string[]>([]);
-const prefixChange = ref<string>("");
-const firstNameChange = ref<string>("");
-const lastNameChange = ref<string>("");
+const selection = ref<string[]>([]); // ตัวเลือก
+const prefixChange = ref<string | null | undefined>(""); // เปลี่ยนคำนำหน้า
+const firstNameChange = ref<string | null | undefined>(""); // เปลียนชื่อ
+const lastNameChange = ref<string | null | undefined>(""); // เปลี่ยนนามสกุล
 
-const profileInfo = ref<any>([]);
+const profileInfo = ref<DataProfile>(); // ข้อมูล Profile
 
-const statusOption = ref([
+const statusOption = ref<string[]>([
   "เปลี่ยนคำนำหน้าชื่อ",
   "เปลี่ยนชื่อ",
   "เปลี่ยนนามสกุล",
@@ -87,7 +85,7 @@ const statusOption = ref([
   "เปลี่ยนคำนำหน้าชื่อ และนามสกุล",
   "เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล",
 ]);
-const statusOptionFilter = ref([
+const statusOptionFilter = ref<string[]>([
   "เปลี่ยนคำนำหน้าชื่อ",
   "เปลี่ยนชื่อ",
   "เปลี่ยนนามสกุล",
@@ -97,25 +95,9 @@ const statusOptionFilter = ref([
   "เปลี่ยนคำนำหน้าชื่อ และชื่อ-นามสกุล",
 ]);
 const alertUpload = ref<boolean>(false);
-const visibleColumns = ref<string[]>([
-  "prefix",
-  "firstName",
-  "lastName",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-  // "status",
-]);
-const historyVisibleColumns = ref<String[]>([
-  "prefix",
-  "firstName",
-  "lastName",
-  "status",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const rows = ref<ResponseObject[]>([]);
-const historyRows = ref<ResponseObject[]>([]);
 
+// Table
+const rows = ref<ResponseObject[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "prefix",
@@ -150,17 +132,7 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  // {
-  //   name: "status",
-  //   align: "left",
-  //   label: "สถานะการเปลี่ยนชื่อ",
-  //   sortable: true,
-  //   field: "status",
-  //   headerStyle: "font-size: 14px",
-  //   style: "font-size: 14px",
-  //   sort: (a: string, b: string) =>
-  //     a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  // },
+
   {
     name: "lastUpdateFullName",
     align: "left",
@@ -185,77 +157,14 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const historyColumns = ref<QTableProps["columns"]>([
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้าชื่อ",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "firstName",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "firstName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastName",
-    align: "left",
-    label: "นามสกุล",
-    sortable: true,
-    field: "lastName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะการเปลี่ยนชื่อ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v, false, true),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "firstName",
+  "lastName",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
 ]);
 const uploadUrl = ref<string>("");
-
 const subId = ref<string>("");
 const fileUpload = ref<File>();
 const pagination = ref({
@@ -263,42 +172,54 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-const historyPagination = ref({
-  page: 1,
-  rowsPerPage: 10,
-});
-
-// function editForm(row: any) {
-//   submitDisable.value = true;
-//   dialogStatus.value = "edit";
-//   editId.value = row.id;
-//   subId.value = row.id;
-//   changeNameData.prefix = row.prefix;
-//   changeNameData.firstName = row.firstName;
-//   changeNameData.lastName = row.lastName;
-//   changeNameData.status = row.status;
-//   prefixChange.value = changeNameData.prefix;
-//   firstNameChange.value = changeNameData.firstName;
-//   lastNameChange.value = changeNameData.lastName;
-//   dialog.value = true;
-// }
-
-function closeDialog() {
-  selection.value = [];
-  alertUpload.value = false;
-  dialog.value = false;
+/**
+ * ฟังก์ชันดึงข้อมูลส่วนตัว
+ */
+async function fetchDataPersonal() {
+  showLoader();
+  await http
+    .get(config.API.registryNewByProfileId(profileId.value, empType.value))
+    .then(async (res) => {
+      const data = await res.data.result;
+      profileInfo.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายการประวัติการเปลี่ยนชื่อ-นามสกุล
+ *
+ * @param id id profile
+ */
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewChangeNameByProfileId(id, empType.value))
+    .then(async (res) => {
+      rows.value = await res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชันยืนยันการบันทึกข้อมูล
+ */
 function onSubmit() {
   if (!!fileUpload.value || dialogStatus.value === "edit") {
     dialogConfirm(
       $q,
       () => {
-        showLoader();
         dialogStatus.value === "create" ? addData() : editData(editId.value);
-        // if (!!fileUpload.value) {
-
-        closeDialog();
       },
       "ยืนยันการบันทึกข้อมูล",
       "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -306,7 +227,12 @@ function onSubmit() {
   }
 }
 
+/**
+ * ฟังก์ชันส้ราง Path อัปโหลดไฟล์
+ * @param id
+ */
 async function uploadProfile(id: string) {
+  showLoader();
   await http
     .post(
       config.API.subFile(
@@ -334,6 +260,11 @@ async function uploadProfile(id: string) {
     });
 }
 
+/**
+ * ฟังก์ชันอัปโหลดำไฟล์
+ * @param uploadUrl Path อัปโหลดไฟล์
+ * @param file ไฟล์เอกสาร
+ */
 async function uploadFileURL(uploadUrl: string, file: any) {
   showLoader();
   await axios
@@ -353,22 +284,11 @@ async function uploadFileURL(uploadUrl: string, file: any) {
     });
 }
 
-async function fetchDataPersonal() {
-  showLoader();
-  await http
-    .get(config.API.registryNewByProfileId(profileId.value, empType.value))
-    .then((res) => {
-      profileInfo.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function fetchProfile(id: string) {
+/**
+ * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+ * @param id รายการที่ต้องการโหลด
+ */
+async function onDownloadFile(id: string) {
   showLoader();
   await http
     .get(
@@ -392,7 +312,11 @@ async function fetchProfile(id: string) {
     });
 }
 
+/**
+ * ฟังกชันเพิ่มการเปลี่ยนชื่อ - นามสกุล
+ */
 async function addData() {
+  showLoader();
   await http
     .post(config.API.profileNewChangeName(empType.value), {
       profileId: empType.value === "" ? profileId.value : undefined,
@@ -407,11 +331,11 @@ async function addData() {
     .then(async (res) => {
       subId.value = await res.data.result;
       await uploadProfile(res.data.result);
-
-      fetchData(profileId.value);
-      props?.fetchDataPersonal?.();
-      fetchDataPersonal();
+      await fetchData(profileId.value);
+      await props?.fetchDataPersonal?.();
+      await fetchDataPersonal();
       success($q, "บันทึกข้อมูลสำเร็จ");
+      closeDialog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -421,7 +345,12 @@ async function addData() {
     });
 }
 
+/**
+ * ฟังกชันแก้ไขการเปลี่ยนชื่อ - นามสกุล
+ * @param idData  id ที่ต้องการแก้ไช
+ */
 function editData(idData: string) {
+  showLoader();
   http
     .patch(
       config.API.profileNewChangeNameByChangeNameId(idData, empType.value),
@@ -430,13 +359,13 @@ function editData(idData: string) {
         profileId: undefined,
       }
     )
-    .then(() => {
-      uploadProfile(subId.value);
-
-      fetchData(profileId.value);
-      props.fetchDataPersonal?.();
-      fetchDataPersonal();
+    .then(async () => {
+      await uploadProfile(subId.value);
+      await fetchData(profileId.value);
+      await props.fetchDataPersonal?.();
+      await fetchDataPersonal();
       success($q, "บันทึกข้อมูลสำเร็จ");
+      closeDialog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -446,40 +375,12 @@ function editData(idData: string) {
     });
 }
 
-async function fetchHistoryData(id: string) {
-  showLoader();
-  await http
-    .get(config.API.profileNewChangeNameHisByChangeNameId(id, empType.value))
-    .then(async (res) => {
-      historyRows.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function closeHistoryDialog() {
-  historyDialog.value = false;
-}
-
-async function fetchData(id: string) {
-  showLoader();
-  await http
-    .get(config.API.profileNewChangeNameByProfileId(id, empType.value))
-    .then(async (res) => {
-      rows.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
+/**
+ * ฟังกชันค้นหาข้อมูลใน select
+ * @param val  คำที่ต้องการค้นหา
+ * @param update function
+ * @param refData ประเภทตัวเลือก
+ */
 function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "statusOptions":
@@ -501,7 +402,37 @@ function filterSelector(val: string, update: Function, refData: string) {
   }
 }
 
+/**
+ * ฟังก์ชันปิด popup เปลี่ยนชื่อ-นามสกุล
+ */
+function closeDialog() {
+  selection.value = [];
+  alertUpload.value = false;
+  dialog.value = false;
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของข้อมูลฟอร์ท เปลี่ยนชื่อ-นามสกุล
+ */
+watch(
+  () => [
+    changeNameData.prefix,
+    changeNameData.firstName,
+    changeNameData.lastName,
+  ],
+  () => {
+    submitDisable.value =
+      changeNameData.prefix === prefixChange.value &&
+      changeNameData.firstName === firstNameChange.value &&
+      changeNameData.lastName === lastNameChange.value;
+  }
+);
+
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(async () => {
+  // เช็ค ตัวเลือก ถ้าไม่มีให้ ดึงข้อมูลใหท่
   if (
     store.Ops.prefixOps.length === 0 ||
     store.Ops.genderOps.length === 0 ||
@@ -512,42 +443,8 @@ onMounted(async () => {
     await fetchPerson();
   }
 
-  fetchData(profileId.value);
-  fetchDataPersonal();
+  await Promise.all([fetchData(profileId.value), fetchDataPersonal()]);
 });
-
-watch(
-  () => changeNameData.prefix,
-  () => {
-    if (changeNameData.prefix !== prefixChange.value) {
-      submitDisable.value = false;
-    } else {
-      submitDisable.value = true;
-    }
-  }
-);
-
-watch(
-  () => changeNameData.firstName,
-  () => {
-    if (changeNameData.firstName !== firstNameChange.value) {
-      submitDisable.value = false;
-    } else {
-      submitDisable.value = true;
-    }
-  }
-);
-
-watch(
-  () => changeNameData.lastName,
-  () => {
-    if (changeNameData.lastName !== lastNameChange.value) {
-      submitDisable.value = false;
-    } else {
-      submitDisable.value = true;
-    }
-  }
-);
 </script>
 
 <template>
@@ -561,9 +458,9 @@ watch(
       icon="add"
       @click="
         () => {
-          changeNameData.prefix = profileInfo.prefix;
-          changeNameData.firstName = profileInfo.firstName;
-          changeNameData.lastName = profileInfo.lastName;
+          changeNameData.prefix = profileInfo?.prefix;
+          changeNameData.firstName = profileInfo?.firstName;
+          changeNameData.lastName = profileInfo?.lastName;
           prefixChange = changeNameData.prefix;
           firstNameChange = changeNameData.firstName;
           lastNameChange = changeNameData.lastName;
@@ -645,7 +542,7 @@ watch(
             dense
             round
             icon="mdi-file-document-outline"
-            @click="fetchProfile(props.row.id)"
+            @click="onDownloadFile(props.row.id)"
           >
             <q-tooltip>ดาวน์โหลด</q-tooltip>
           </q-btn>
@@ -843,84 +740,6 @@ watch(
       </q-form>
     </q-card>
   </q-dialog>
-
-  <q-dialog v-model="historyDialog" class="dialog" persistent>
-    <q-card style="min-width: 70%">
-      <dialog-header
-        tittle="ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล"
-        :close="closeHistoryDialog"
-      />
-      <q-separator />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            bg-color="white"
-            v-model="historyKeyword"
-            label="ค้นหา"
-            class="q-mr-sm"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="historyVisibleColumns"
-            multiple
-            outlined
-            dense
-            bg-color="white"
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="historyColumns"
-            option-value="name"
-            options-cover
-            style="min-width: 150px"
-          />
-        </q-toolbar>
-        <d-table
-          ref="table"
-          :columns="historyColumns"
-          :rows="historyRows"
-          row-key="name"
-          flat
-          bordered
-          :paging="true"
-          dense
-          :filter="historyKeyword"
-          v-model:pagination="historyPagination"
-          :rows-per-page-options="[20, 50, 100]"
-          class="custom-header-table"
-          :visible-columns="historyVisibleColumns"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value === "" ? "-" : col.value }}
-                </div>
-              </q-td>
-              <q-td auto-width> </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
index f6b0aebcf..48e45663e 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
@@ -1,20 +1,21 @@
 <script setup lang="ts">
 import { onMounted, ref, reactive, watch } from "vue";
-import { checkPermission } from "@/utils/permissions";
+import { useQuasar } from "quasar";
 
 import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
+import { useAddressDataStore } from "@/modules/04_registryPerson/stores/Address";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useAddressDataStore } from "@/modules/04_registryPerson/stores/Address";
-
+import type { QTableProps } from "quasar";
+import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Address";
 import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Address";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const store = useAddressDataStore();
 const mixin = useCounterMixin();
@@ -35,17 +36,13 @@ const {
   dialogConfirm,
   pathRegistryEmp,
 } = mixin;
+
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const modal = ref<boolean>(false);
-const modalHistory = ref<boolean>(false);
-const rowsHistory = ref<ResponseObject[]>([]);
-const filterHistory = ref<string>("");
-
-const id = ref<string>("");
+const modal = ref<boolean>(false); //แสดง Popup แก้ไขข้อมูลที่อยู่
 const rawSameAddress = ref<string>("0");
 const sameAddress = ref<string>("0");
 const addressData = reactive<ResponseObject>(store.defaultAddress);
@@ -55,7 +52,6 @@ const adsName = reactive({
   regisP: "",
   regisD: "",
   regisSD: "",
-
   currentP: "",
   currentD: "",
   currentSD: "",
@@ -67,16 +63,17 @@ const dataLabel = {
   registrationDistrict: "เขต/อำเภอ",
   registrationSubDistrict: "แขวง / ตำบล",
   registrationZipCode: "รหัสไปรษณีย์",
-
   currentAddress: "ที่อยู่ปัจจุบัน",
   currentProvince: "จังหวัด",
   currentDistrict: "เขต/อำเภอ",
   currentSubDistrict: "แขวง / ตำบล",
   currentZipCode: "รหัสไปรษณีย์",
-
   registrationSame: "ที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน",
 };
 
+const modalHistory = ref<boolean>(false); //แสดง Popup ประวัติแก้ไขข้อมูลที่อยู่
+const rowsHistory = ref<ResponseObject[]>([]); //ข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
+const filterHistory = ref<string>(""); //คำค้นหา
 const visibleColumnsHistory = ref<String[]>([
   "currentAddress",
   "currentDistrict",
@@ -91,7 +88,6 @@ const visibleColumnsHistory = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "registrationAddress",
@@ -123,7 +119,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "registrationDistrict",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // format: (v) => (v ? v.name : "-"),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -135,7 +130,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "registrationSubDistrict",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // format: (v) => (v ? v.name : "-"),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -184,7 +178,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "currentProvince",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // format: (v) => (v ? v.name : "-"),
+
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -196,7 +190,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "currentDistrict",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // format: (v) => (v ? v.name : "-"),
+
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -208,7 +202,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
     field: "currentSubDistrict",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // format: (v) => (v ? v.name : "-"),
+
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -248,17 +242,20 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
+/**
+ * ฟังก์ชันดึงข้อมูลที่อยู่
+ *
+ * ดึงข้อมูลที่อยู่ ข้อมูลจังหวัด ข้อมูล เขต / อำเภอ และข้อมูล แขวง / ตำบล
+ */
 async function getData() {
   showLoader();
   await http
     .get(
       config.API.profileNewAddressByProfileId(profileId.value, empType.value)
     )
-    .then((res) => {
+    .then(async (res) => {
       Object.assign(addressData, res.data.result);
-
       if (addressData) {
-        id.value = addressData.id;
         addressData.currentAddress === addressData.registrationAddress &&
         addressData.currentZipCode === addressData.registrationZipCode &&
         addressData.currentAddress &&
@@ -269,6 +266,24 @@ async function getData() {
           : (rawSameAddress.value = "0");
       }
       sameAddress.value = rawSameAddress.value;
+
+      if (
+        store.Ops.provinceOps.length === 0 ||
+        store.Ops.districtOps.length === 0 ||
+        store.Ops.districtCOps.length === 0 ||
+        store.Ops.subdistrictOps.length === 0 ||
+        store.Ops.subdistrictCOps.length === 0 ||
+        store.profileIdBefore !== profileId.value
+      ) {
+        await Promise.all([
+          fetchProvince(),
+          fetchDistrict(addressData.registrationProvinceId, "1"),
+          fetchDistrict(addressData.currentProvinceId, "2"),
+          fetchSubDistrict(addressData.registrationDistrictId, "1"),
+          fetchSubDistrict(addressData.currentDistrictId, "2"),
+        ]);
+        store.profileIdBefore = profileId.value;
+      }
     })
     .catch((e) => {
       messageError($q, e);
@@ -278,6 +293,11 @@ async function getData() {
     });
 }
 
+/**
+ * ฟังก์ชันเลือกจังหวัด
+ * @param e  จังหวัดที่เลือก
+ * @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
+ */
 async function selectProvince(e: string | null, name: string) {
   if (!e) return;
   if (name == "1") {
@@ -292,6 +312,11 @@ async function selectProvince(e: string | null, name: string) {
   await fetchDistrict(e, name);
 }
 
+/**
+ * ฟังก์ชันเลือก เขต / อำเภอ
+ * @param e แขวง/ตำบลที่เลือก
+ * @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
+ */
 async function selectDistrict(e: string | null, name: string) {
   if (!e) return;
   if (name == "1") {
@@ -304,6 +329,11 @@ async function selectDistrict(e: string | null, name: string) {
   await fetchSubDistrict(e, name);
 }
 
+/**
+ * ฟังก์ชันเลือก  แขวง / ตำบล
+ * @param e  แขวง / ตำบล ที่เลือก
+ * @param name 1 คือ ที่อยู่ตามทะเบียนบ้าน 2 คือ ที่อยู่ปัจจุบัน
+ */
 function selectSubDistrict(e: string | null, name: string) {
   if (!e) return;
   if (name == "1") {
@@ -317,26 +347,16 @@ function selectSubDistrict(e: string | null, name: string) {
   }
 }
 
+/**
+ * ฟังก์ชันดึงข่้อมูลทั่งหมด
+ *
+ *
+ */
 async function fetchAll() {
   await getData();
   if (!store.profileIdBefore) {
     store.profileIdBefore = profileId.value;
   }
-  if (
-    store.Ops.provinceOps.length === 0 ||
-    store.Ops.districtOps.length === 0 ||
-    store.Ops.districtCOps.length === 0 ||
-    store.Ops.subdistrictOps.length === 0 ||
-    store.Ops.subdistrictCOps.length === 0 ||
-    store.profileIdBefore !== profileId.value
-  ) {
-    await fetchProvince();
-    await fetchDistrict(addressData.registrationProvinceId, "1");
-    await fetchDistrict(addressData.currentProvinceId, "2");
-    await fetchSubDistrict(addressData.registrationDistrictId, "1");
-    await fetchSubDistrict(addressData.currentDistrictId, "2");
-    store.profileIdBefore = profileId.value;
-  }
 
   adsName.regisP = findData(
     store.Ops.provinceOps,
@@ -365,45 +385,65 @@ async function fetchAll() {
   ).name;
 }
 
-async function editData() {
-  showLoader();
-  await http
-    .patch(config.API.profileNewAddressById(id.value, empType.value), {
-      ...formData,
-      id: undefined,
-    })
-    .then(async (res) => {
-      await fetchAll();
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function clickClose() {
-  Object.assign(formData, store.defaultAddressForm);
-  modal.value = false;
+/**
+ * ฟังก์ชันบันทึกข้อมูลข้อมูลที่อยู่
+ */
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      if (sameAddress.value === "1") {
+        formData.currentAddress = formData.registrationAddress;
+        formData.currentProvinceId = formData.registrationProvinceId;
+        formData.currentDistrictId = formData.registrationDistrictId;
+        formData.currentSubDistrictId = formData.registrationSubDistrictId;
+        formData.currentZipCode = formData.registrationZipCode;
+        store.Ops.districtCOps = store.Ops.districtOps;
+        store.Ops.subdistrictCOps = store.Ops.subdistrictOps;
+      }
+      showLoader();
+      await http
+        .patch(
+          config.API.profileNewAddressById(profileId.value, empType.value),
+          {
+            ...formData,
+            id: undefined,
+          }
+        )
+        .then(async () => {
+          await fetchAll();
+          await success($q, "บันทึกข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
 }
 
+/**
+ * ฟังก์ชันเปิด popup การแก้ไขข้อมูลข้อมูลที่อยู่
+ */
 async function onClickOpenDialog() {
   if (!addressData) return;
-  await Object.assign(formData, addressData);
-  const checkDistrict = await store.Ops.districtOps.some(
-    (e: any) => e.id === addressData.registrationDistrictId
+  Object.assign(formData, addressData);
+  const checkDistrict = store.Ops.districtOps.some(
+    (e: DataOption) => e.id === addressData.registrationDistrictId
   );
-  const checkSubDistrict = await store.Ops.subdistrictOps.some(
-    (e: any) => e.id === addressData.registrationSubDistrictId
+  const checkSubDistrict = store.Ops.subdistrictOps.some(
+    (e: DataOption) => e.id === addressData.registrationSubDistrictId
   );
-  const checkDistrictC = await store.Ops.districtCOps.some(
-    (e: any) => e.id === addressData.currentDistrictId
+  const checkDistrictC = store.Ops.districtCOps.some(
+    (e: DataOption) => e.id === addressData.currentDistrictId
   );
-  const checkSubDistrictC = await store.Ops.subdistrictCOps.some(
-    (e: any) => e.id === addressData.currentSubDistrictId
+  const checkSubDistrictC = store.Ops.subdistrictCOps.some(
+    (e: DataOption) => e.id === addressData.currentSubDistrictId
   );
 
   modal.value = true;
@@ -419,12 +459,26 @@ async function onClickOpenDialog() {
   }
 }
 
+/**
+ * ฟังก์ชันปิด Popup การแก้ไขข้อมูลที่อยู่
+ */
+function clickClose() {
+  Object.assign(formData, store.defaultAddressForm);
+  modal.value = false;
+}
+
+/**
+ * ฟังก์ชันเปิด popup ประวัติแก้ไขข้อมูลที่อยู่
+ *
+ * และดึงข้อมูลรายการประวัติแก้ไขข้อมูลที่อยู่
+ */
 async function clickHistory() {
+  showLoader();
   modalHistory.value = true;
   await http
-    .get(config.API.profileNewAddressHisById(id.value, empType.value))
-    .then((res) => {
-      rowsHistory.value = res.data.result;
+    .get(config.API.profileNewAddressHisById(profileId.value, empType.value))
+    .then(async (res) => {
+      rowsHistory.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -434,27 +488,10 @@ async function clickHistory() {
     });
 }
 
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      if (sameAddress.value === "1") {
-        formData.currentAddress = formData.registrationAddress;
-        formData.currentProvinceId = formData.registrationProvinceId;
-        formData.currentDistrictId = formData.registrationDistrictId;
-        formData.currentSubDistrictId = formData.registrationSubDistrictId;
-        formData.currentZipCode = formData.registrationZipCode;
-        store.Ops.districtCOps = store.Ops.districtOps;
-        store.Ops.subdistrictCOps = store.Ops.subdistrictOps;
-      }
-      editData();
-      modal.value = false;
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
-
+/**
+ * ฟังก์ชันกำหนดที่อยู่ปัจจุบัน
+ * @param v
+ */
 function sameAddressToggle(v: string) {
   if (v === "0") {
     formData.currentAddress = "";
@@ -467,6 +504,9 @@ function sameAddressToggle(v: string) {
   }
 }
 
+/**
+ * ดูการเปลี่ยนแปลงที่อยู่ปัจจุบันตรงกับที่อยู่ตามทะเบียนบ้าน
+ */
 watch(
   () => sameAddress.value,
   (v) => {
@@ -474,6 +514,9 @@ watch(
   }
 );
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(async () => {
   await fetchAll();
 });
@@ -849,7 +892,7 @@ onMounted(async () => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขข้อมูลที่อยู่"
-        :close="() => (modalHistory = false)"
+        :close="() => ((modalHistory = false), (rowsHistory = []))"
       />
       <q-separator color="grey-4" />
 
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
index df1ac2ba4..599e2109b 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
-
 import { useQuasar } from "quasar";
+
 import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -16,12 +18,8 @@ import type {
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useProfileDataStore } from "@/modules/04_registryPerson/stores/profile";
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const route = useRoute();
-
 const store = useProfileDataStore();
 const { filterSelector } = store;
 const {
@@ -171,7 +169,6 @@ const childData = ref<FormChildren[]>([]);
 const modal = ref<boolean>(false);
 const modalHistory = ref<boolean>(false);
 const filterHistory = ref<string>("");
-
 const titleForm = ref<string>("");
 const typeForm = ref<string>("");
 const isEdit = ref<boolean>(false);
@@ -477,6 +474,9 @@ async function fetchHistory(id: string, type: string) {
     });
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(async () => {
   showLoader();
   await Promise.all([
@@ -872,7 +872,7 @@ onMounted(async () => {
                 hidden-space
                 dense
                 class="inputgreen"
-                :rules="[(val) => !!val || 'กรุณาเลือกสถานภาพการสมรส']"
+                :rules="[(val:string) => !!val || 'กรุณาเลือกสถานภาพการสมรส']"
                 label="สถานภาพการสมรส"
                 v-model="fromData.statusMarital"
                 use-input
@@ -900,8 +900,8 @@ onMounted(async () => {
                   :rules="
                     typeForm !== 'couple'
                       ? [
-                          (val) => !!val || 'กรุณากรอกเลขบัตรประชาชน',
-                          (val) =>
+                          (val:string) => !!val || 'กรุณากรอกเลขบัตรประชาชน',
+                          (val:string) =>
                             val.length === 13 ||
                             'กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก',
                         ]
@@ -921,7 +921,7 @@ onMounted(async () => {
                   class="inputgreen"
                   :rules="
                     typeForm !== 'couple'
-                      ? [(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']
+                      ? [(val:string) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']
                       : []
                   "
                   label="คำนำหน้าชื่อ"
@@ -948,7 +948,7 @@ onMounted(async () => {
                   v-model="fromData.firstName"
                   :rules="
                     typeForm !== 'couple'
-                      ? [(val) => !!val || 'กรุณากรอกชื่อ']
+                      ? [(val:string) => !!val || 'กรุณากรอกชื่อ']
                       : []
                   "
                   label="ชื่อ"
@@ -965,7 +965,7 @@ onMounted(async () => {
                   v-model="fromData.lastName"
                   :rules="
                     typeForm !== 'couple'
-                      ? [(val) => !!val || 'กรุณากรอกนามสกุล']
+                      ? [(val:string) => !!val || 'กรุณากรอกนามสกุล']
                       : []
                   "
                   label="นามสกุล"
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
index 62ed821ed..2ee37687e 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
@@ -1,21 +1,30 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
+import { ref, reactive, onMounted } from "vue";
+import { QForm, useQuasar } from "quasar";
 
-import dialogHeader from "@/components/DialogHeader.vue";
-import type { QTableProps } from "quasar";
+import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
-import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Education";
-import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Education";
-import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const mixin = useCounterMixin();
+import type { QTableProps } from "quasar";
+import type {
+  DataOptionEducation,
+  DataOptionEducationLevel,
+} from "@/modules/04_registryPerson/interface/index/Main";
+import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/Education";
+import type {
+  ResponseObject,
+  DataEducationLevel,
+} from "@/modules/04_registryPerson/interface/response/Education";
+
+import dialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
 const {
-  dialogRemove,
   dialogConfirm,
   showLoader,
   hideLoader,
@@ -25,9 +34,14 @@ const {
   pathRegistryEmp,
 } = mixin;
 
-const dialog = ref<boolean>(false);
-const dialogStatus = ref<string>("create");
-const mode = ref<string>("table");
+const id = ref<string>(route.params.id.toString()); //id profile
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+const dialog = ref<boolean>(false); //แสดง popup ข้อมูลประวัติการศึกษา
+const dialogStatus = ref<string>("create"); //สถานะข้อมูลประวัติการศึกษา
+const mode = ref<string>("table"); //การแสดงของ Table card
+
+//Table
+const rows = ref<ResponseObject[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "educationLevel",
@@ -201,6 +215,9 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+
+//Table ประวัติแก้ไขประวัติการศึกษา
+const historyRows = ref<ResponseObject[]>([]);
 const historyColumns = ref<QTableProps["columns"]>([
   {
     name: "educationLevel",
@@ -398,26 +415,20 @@ const historyColumns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows = ref<ResponseObject[]>([]);
-const historyRows = ref<ResponseObject[]>([]);
-const editId = ref<string>("");
-const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
+const editId = ref<string>(""); //id ที่ต้องการแก้ไข
 const isDate = ref<string>("false");
-const educationOption = ref([
+
+const educationOption = ref<DataOptionEducation[]>([
+  { label: "ใช่", value: true },
+  { label: "ไม่ใช่", value: false },
+]);
+const educationOptionFilter = ref<DataOptionEducation[]>([
   { label: "ใช่", value: true },
   { label: "ไม่ใช่", value: false },
 ]);
 
-const educationOptionFilter = ref([
-  { label: "ใช่", value: true },
-  { label: "ไม่ใช่", value: false },
-]);
-
-const educationLevelOption = ref<any>([]);
-const educationLevelOptionFilter = ref([]);
+const educationLevelOption = ref<DataOptionEducationLevel[]>([]);
+const educationLevelOptionFilter = ref<DataOptionEducationLevel[]>([]);
 
 const historyDialog = ref<boolean>(false);
 const educationData = reactive<RequestItemsObject>({
@@ -520,14 +531,14 @@ function filterSelector(val: string, update: Function, refData: string) {
     case "educationOption":
       update(() => {
         educationOption.value = educationOptionFilter.value.filter(
-          (v: any) => v.label.indexOf(val) > -1
+          (v: DataOptionEducation) => v.label.indexOf(val) > -1
         );
       });
       break;
     case "educationLevelOption":
       update(() => {
         educationLevelOption.value = educationLevelOptionFilter.value.filter(
-          (v: any) => v.label.indexOf(val) > -1
+          (v: DataOptionEducationLevel) => v.label.indexOf(val) > -1
         );
       });
       break;
@@ -566,7 +577,7 @@ function clearForm() {
  */
 function editForm(row: any) {
   dialogStatus.value = "edit";
-  editId.value = row.id;
+  editId.value = row?.id;
   isDate.value = row.isDate ? "true" : "false";
   educationData.educationLevel = row.educationLevel;
   educationData.institute = row.institute;
@@ -607,18 +618,19 @@ function closeDialog() {
  */
 function closeHistoryDialog() {
   historyDialog.value = false;
+  historyRows.value = []
 }
 
 /**
  * function fetch ข้อมูลประวัตืการศึกษา
  * @param id บุคคล
  */
-function fetchData(id: string) {
+async function fetchData(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewEducationByProfileId(id, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
+    .then(async (res) => {
+      rows.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -635,7 +647,7 @@ function fetchEducationLevel() {
   http
     .get(config.API.orgEducationLevel)
     .then(async (res) => {
-      res.data.result.map((r: any) => {
+      res.data.result.map((r: DataEducationLevel) => {
         educationLevelOption.value.push({
           value: r.id,
           label: r.name,
@@ -657,7 +669,7 @@ function fetchHistoryData(id: string) {
   http
     .get(config.API.profileNewEducationHisByEducationId(id, empType.value))
     .then(async (res) => {
-      historyRows.value = res.data.result;
+      historyRows.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -723,6 +735,9 @@ function editData(idData: string) {
     });
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(async () => {
   await fetchData(id.value);
   fetchEducationLevel();
@@ -1007,7 +1022,7 @@ onMounted(async () => {
                 @filter="(inputValue:string,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'educationLevelOption'
                     ) "
-                :rules="[(val) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการศึกษา'}`]"
                 label="ระดับการศึกษา"
                 class="inputgreen"
                 hide-bottom-space
@@ -1021,7 +1036,7 @@ onMounted(async () => {
                 bg-color="white"
                 dense
                 class="inputgreen"
-                :rules="[(val) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกสถานศึกษา'}`]"
                 hide-bottom-space
               />
             </div>
@@ -1075,7 +1090,7 @@ onMounted(async () => {
                       hide-bottom-space
                       :model-value="educationData.startYear + 543"
                       :rules="[
-                        (val) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                        (val:string) => !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
                       ]"
                       :label="`${'ปีที่เริ่มต้นศึกษา'}`"
                     >
@@ -1118,7 +1133,7 @@ onMounted(async () => {
                       hide-bottom-space
                       :model-value="educationData.endYear + 543"
                       :rules="[
-                        (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
+                        (val:string) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
                       ]"
                       :label="`${'ปีที่จบการศึกษา'}`"
                     >
@@ -1162,7 +1177,7 @@ onMounted(async () => {
                       dense
                       :model-value="date2Thai(educationData.startDate)"
                       :rules="[
-                        (val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
+                        (val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้นศึกษา'}`,
                       ]"
                       hide-bottom-space
                       :label="`${'วันที่เริ่มต้นศึกษา'}`"
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
index aa7b12d1e..ab22a4fe6 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
-import { QForm, useQuasar } from "quasar";
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/SpecialSkill";
-import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/SpecialSkill";
-import type { QTableProps } from "quasar";
+
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const mixin = useCounterMixin();
+import { checkPermission } from "@/utils/permissions";
+import { QForm, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { QTableProps } from "quasar";
+import type { RequestItemsObject } from "@/modules/04_registryPerson/interface/request/SpecialSkill";
+import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/SpecialSkill";
+
+import dialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
-const mode = ref<string>("table");
+const route = useRoute();
+const mixin = useCounterMixin();
 const {
   dialogConfirm,
   showLoader,
@@ -23,6 +27,15 @@ const {
   date2Thai,
   pathRegistryEmp,
 } = mixin;
+
+const id = ref<string>(route.params.id.toString()); //id profile
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+
+const mode = ref<string>("table"); //การแสดงของ Table card
+
+//Table
+const keyword = ref<string>(""); //คำต้นหา
+const rows = ref<ResponseObject[]>([]); //รายการความสามารถ
 const columns = ref<QTableProps["columns"]>([
   {
     name: "field",
@@ -69,7 +82,20 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "field",
+  "detail",
+  "remark",
+  "reference",
+]);
 
+const dialog = ref<boolean>(false); //แสดง popup ข้อมูลความสามารถพิเศษ
+const dialogStatus = ref<string>("create"); ////สถานะข้อมูลความสามารถพิเศษ
+const editId = ref<string>(""); //idที่ต้องการแก้ไข
+
+const historyDialog = ref<boolean>(false); //แสดง popup รายการประวัติ
+const historyRows = ref<ResponseObject[]>([]); //รายการประวัติ
+const historyKeyword = ref<string>(""); //คำต้นหาประวัติ
 const historyColumns = ref<QTableProps["columns"]>([
   {
     name: "field",
@@ -139,25 +165,21 @@ const historyColumns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const historyVisibleColumns = ref<string[]>([
+  "field",
+  "detail",
+  "remark",
+  "reference",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
 
-const historyDialog = ref<boolean>(false);
-const dialog = ref<boolean>(false);
-const dialogStatus = ref<string>("create");
-const rows = ref<ResponseObject[]>([]);
-const historyRows = ref<ResponseObject[]>([]);
-const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const editId = ref<string>("");
-const keyword = ref<string>("");
-const historyKeyword = ref<string>("");
-
+//ฟอร์มข้อมูลความสามารถพิเศษ
 const specialSkill = reactive<RequestItemsObject>({
-  field: "",
-  detail: "",
-  remark: "",
-  reference: "",
+  field: "", //ด้าน
+  detail: "", //รายละเอียด
+  remark: "", //หมายเหตุ
+  reference: "", //เอกสารอ้างอิง
   profileId: id.value,
   dateStart: null,
   dateEnd: null,
@@ -173,30 +195,6 @@ const historyPagination = ref({
   rowsPerPage: 10,
 });
 
-const visibleColumns = ref<string[]>([
-  "field",
-  "detail",
-  "remark",
-  "reference",
-]);
-
-const historyVisibleColumns = ref<string[]>([
-  "field",
-  "detail",
-  "remark",
-  "reference",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-
-function closeDialog() {
-  dialog.value = false;
-}
-
-function closeHistoryDialog() {
-  historyDialog.value = false;
-}
-
 /**
  * function ยืนยันการบันทึกข้อมูล
  */
@@ -238,12 +236,12 @@ function editForm(row: any) {
 /**
  * function fetch ข้อมูลความสามรรถพิเศษ
  */
-function fetchData(id: string) {
+async function fetchData(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewAbilityByProfileId(id, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
+    .then(async (res) => {
+      rows.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -257,12 +255,12 @@ function fetchData(id: string) {
  * function fetch ประวัติการแก้ไขความสามรรถพิเศษ
  * @param id  ความสามรรถพิเศษ
  */
-function fetchHistoryData(id: string) {
+async function fetchHistoryData(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewAbilityHisByAbilityId(id, empType.value))
-    .then((res) => {
-      historyRows.value = res.data.result;
+    .then(async (res) => {
+      historyRows.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -275,9 +273,9 @@ function fetchHistoryData(id: string) {
 /**
  * function เพิ่มข้อมูลความสามรรถพิเศษ
  */
-function addData() {
+async function addData() {
   showLoader();
-  http
+  await http
     .post(config.API.profileNewAbility(empType.value), {
       ...specialSkill,
       dateStart: null,
@@ -302,9 +300,9 @@ function addData() {
  * function บันทึกการแก้ไขข้อมูล
  * @param idData ความสามรรถพิเศษ
  */
-function editData(idData: string) {
+async function editData(idData: string) {
   showLoader();
-  http
+  await http
     .patch(config.API.profileNewAbilityByAbilityId(idData, empType.value), {
       ...specialSkill,
       dateStart: null,
@@ -324,6 +322,24 @@ function editData(idData: string) {
     });
 }
 
+/**
+ * function ปิด popup  ข้อมูลความสามารถพิเศษ
+ */
+function closeDialog() {
+  dialog.value = false;
+}
+
+/**
+ * function ปิด popup  รายการประวัติ
+ */
+function closeHistoryDialog() {
+  historyDialog.value = false;
+  historyRows.value = [];
+}
+
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   fetchData(id.value);
 });
@@ -531,7 +547,7 @@ onMounted(() => {
                 v-model="specialSkill.field"
                 label="ด้าน"
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกด้านความสามารถพิเศษ'}`]"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -543,7 +559,7 @@ onMounted(() => {
                 v-model="specialSkill.detail"
                 label="รายละเอียด"
                 hide-bottom-space
-                :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
               />
             </div>
             <div class="col-xs-12 col-sm-12 col-md-12">
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue
index b45461384..e2a86d13d 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue
@@ -2,13 +2,12 @@
 import { ref } from "vue";
 
 /** importComponents*/
-import Profile from "@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue";
-import NameChangeHistory from "@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue";
-import Address from "@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue";
-import Education from "@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue";
-import SpecialSkill from "@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue";
-
-import FamilyNew from "@/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue";
+import Profile from "@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue"; //ประวัติส่วนตัว
+import NameChangeHistory from "@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue"; //ประวัติการเปลี่ยนชื่อ
+import Address from "@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue"; //ข้อมูลที่อยู่
+import FamilyNew from "@/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue"; //ข้อมูลครอบครัว
+import Education from "@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue"; //ประวัติการศึกษา
+import SpecialSkill from "@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue"; //ความสามารถพิเศษ
 
 const tab = ref<string>("1");
 const props = defineProps({
@@ -63,9 +62,6 @@ const props = defineProps({
       <q-tab-panel name="6">
         <SpecialSkill />
       </q-tab-panel>
-      <!-- <q-tab-panel name="7">
-        <FamilyNew />
-      </q-tab-panel> -->
     </q-tab-panels>
   </q-card>
 </template>
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
index 1622b0702..bacbb6a70 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
@@ -44,6 +44,9 @@ const {
 
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
+//Table
+const rows = ref<ResListSalary[]>([]); //รายการตำแหน่งเงินเดือน
+const keyword = ref<string>(""); //คำค้นหา
 const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -161,31 +164,29 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-const rows = ref<ResListSalary[]>([]);
-const keyword = ref<string>("");
 
 const formDataSalary = reactive<FormSalaryNew>({
-  date: null,
-  posNo: "",
-  templatePos: "",
-  position: "",
-  positionLine: "",
-  positionPathSide: "",
-  positionType: "",
-  positionLevel: "",
-  positionExecutive: "",
-  salaryCompensation: null,
-  salary: null,
-  salaryPos: null,
-  refCommandNo: "",
-  templateDoc: "",
-  doc: "",
+  date: null, //วัน/เดือน/ปี
+  posNo: "", //ตำแหน่งเลขที่
+  templatePos: "", //ต้นแบบ (template) ตำแหน่ง
+  position: "", //ตำแหน่ง
+  positionType: "", //ประเภทตำแหน่ง, กลุ่มงาน
+  positionLevel: "", //ระดับตำแหน่ง, ระดับชั้นงาน
+  positionLine: "", // สายงาน
+  positionPathSide: "", //ด้าน/สาขา
+  positionExecutive: "", //ตำแหน่งทางการบริหาร
+  salary: null, //เงินเดือน
+  salaryPos: null, //เงินประจำตำแหน่ง
+  salaryCompensation: null, //เงินค่าตอบแทนรายเดือน
+  refCommandNo: "", //เลขที่คำสั่ง
+  templateDoc: "", //ต้นแบบ (template) เอกสารอ้างอิง
+  doc: "", //เอกสารอ้างอิง
 });
 
-const modalDialogSalary = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const salaryId = ref<string>("");
-const dataLevel = ref<ResType[]>([]);
+const modalDialogSalary = ref<boolean>(false); //แสดง popup ตำแหน่งเงินเดือน
+const isStatusEdit = ref<boolean>(false); //สถานะแก้ไขข้อมูลตำแหน่งเงินเดือน
+const salaryId = ref<string>(""); //id ที่ต้องการแก้ไข
+const dataLevel = ref<ResType[]>([]); //รายการ ตำแหน่งเงินเดือน
 
 const posNoOptions = ref<DataOption2[]>(store.optionTemplatePos);
 
@@ -314,7 +315,7 @@ function onClickCloseDialog() {
  * @param update function จาก quasar
  * @param filtername type ที่กำหนด ของ input นั้นๆ
  */
-function filterSelector(val: any, update: Function, filtername: string) {
+function filterSelector(val: string, update: Function, filtername: string) {
   switch (filtername) {
     case "pos":
       update(() => {
@@ -593,16 +594,19 @@ function fetchOptionGroup() {
     });
 }
 
-onMounted(() => {
-  fetchListSalary();
-});
-
 const classInput = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
 };
+
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
+onMounted(() => {
+  fetchListSalary();
+});
 </script>
 <template>
   <div class="row items-center q-gutter-x-sm q-pb-sm">
@@ -815,7 +819,7 @@ const classInput = (val: boolean) => {
                 use-input
                 input-debounce="0"
                 @update:modelValue="updatePos"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
                       )"
               />
@@ -857,7 +861,7 @@ const classInput = (val: boolean) => {
                 input-debounce="0"
                 @update:model-value="updateSelectType"
                 :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                       )"
               />
@@ -882,7 +886,7 @@ const classInput = (val: boolean) => {
                 hide-bottom-space
                 use-input
                 input-debounce="0"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
                         )"
               />
@@ -907,7 +911,7 @@ const classInput = (val: boolean) => {
                 use-input
                 clearable
                 input-debounce="0"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
                       )"
               />
@@ -931,7 +935,7 @@ const classInput = (val: boolean) => {
                 use-input
                 clearable
                 input-debounce="0"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'positionPathSide'
                       )"
               />
@@ -955,7 +959,7 @@ const classInput = (val: boolean) => {
                 use-input
                 input-debounce="0"
                 clearable
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                     doneFn: Function) => filterSelector(inputValue, doneFn, 'positionExecutive'
                     )"
               />
@@ -1043,7 +1047,7 @@ const classInput = (val: boolean) => {
                 use-input
                 input-debounce="0"
                 @update:modelValue="updateDoc"
-                @filter="(inputValue: any,
+                @filter="(inputValue: string,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
                         )"
               />
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
index 82ea899d1..9128d5df9 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
@@ -1,26 +1,32 @@
 <script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
+
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";
 
 import type { QTableProps } from "quasar";
+import type { ResListSalary } from "@/modules/04_registryPerson/interface/response/Salary";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const route = useRoute();
 const { date2Thai, showLoader, hideLoader, messageError, pathRegistryEmp } =
   useCounterMixin();
 
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
+/**
+ * props
+ */
 const modal = defineModel<boolean>("modal", { required: true });
 const salaryId = defineModel<string>("salaryId", { required: true });
 
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
+
+const rows = ref<ResListSalary[]>([]); //รายการข้อมูลประวัติการแก้ไข
+const keyword = ref<string>(""); //คำค้นหา
 const baseColumns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -210,7 +216,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = computed(() => {
   if (empType.value === "-employee") {
     if (baseColumns.value) {
@@ -223,18 +228,11 @@ const columns = computed(() => {
   }
   return baseColumns.value;
 });
-const rows = ref<any[]>([]);
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
 
-const keyword = ref<string>("");
-
-function closeDialog() {
-  modal.value = false;
-}
-
 /**
  * function fetch ข้อมูลประวัติการแก้ไข
  */
@@ -253,6 +251,19 @@ function fetchListHistory() {
     });
 }
 
+/**
+ * ฟังก์ชันปิด Popup
+ */
+function closeDialog() {
+  modal.value = false;
+  rows.value = [];
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
+ */
 watch(
   () => modal.value,
   () => {
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
index b78775483..3ef382987 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
-import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
+
 import { useRoute } from "vue-router";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import { useCounterMixin } from "@/stores/mixin";
-import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHisotory from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
-
 import type { QTableProps } from "quasar";
 import type { RowList } from "@/modules/04_registryPerson/interface/index/salary";
 import type { RequestNoPaidObject } from "@/modules/04_registryPerson/interface/request/Salary";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+import DialogHisotory from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const {
@@ -25,17 +26,29 @@ const {
   success,
   pathRegistryEmp,
 } = useCounterMixin();
+
 const id = ref<string>("");
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
 const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
-const modelView = ref<string>("table");
-const modalDialog = ref<boolean>(false);
-const modalHistory = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-const rows = ref<RowList[]>([]);
+const modelView = ref<string>("table"); //การแสดงผล Table,Card
+const modalDialog = ref<boolean>(false); //แสดง popup บันทึกวันที่ไม่ได้รับเงินเดือนฯ
+const modalHistory = ref<boolean>(false); //แสดง popup ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ
+const isStatusEdit = ref<boolean>(false); //สถานะการแก้ไจข้อมูล
+
+const formData = reactive<RequestNoPaidObject>({
+  date: null, //วัน/เดือน/ปี
+  reference: "", //เอกสารอ้างอิง
+  detail: "", //รายละเอียด
+  refCommandNo: "", //เลขที่คำสั่ง
+  refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
+});
+
+//Table
+const rows = ref<RowList[]>([]); //รายการ
+const keyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -103,15 +116,6 @@ const visibleColumns = ref<string[]>([
   "refCommandNo",
   "refCommandDate",
 ]);
-const formData = reactive<RequestNoPaidObject>({
-  date: null,
-  reference: "",
-  detail: "",
-  refCommandNo: "",
-  refCommandDate: null,
-});
-
-const keyword = ref<string>("");
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
@@ -153,12 +157,12 @@ function onClickCloseDialog() {
 /**
  * function fetch รายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ
  */
-function getData() {
+async function getData() {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewNoPaidByProfileId(profileId.value, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
+    .then(async (res) => {
+      rows.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -181,8 +185,8 @@ function saveData() {
     })
     .then(async () => {
       await getData();
-      onClickCloseDialog();
       await success($q, "บันทึกข้อมูลสำเร็จ");
+      onClickCloseDialog();
     })
     .catch((e) => {
       messageError($q, e);
@@ -204,8 +208,8 @@ function editData() {
     })
     .then(async () => {
       await getData();
-      onClickCloseDialog();
       await success($q, "บันทึกข้อมูลสำเร็จ");
+      onClickCloseDialog();
     })
     .catch((e) => {
       messageError($q, e);
@@ -223,6 +227,9 @@ function onClickHistory(rowId: string) {
   modalHistory.value = true;
 }
 
+/**
+ * ทำงานเมื่อ Components ถูกเรียกใช้งาน
+ */
 onMounted(() => {
   getData();
 });
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
index d79d746d6..889984f91 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
@@ -21,8 +21,10 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 
 const modal = defineModel<boolean>("modal", { required: true });
 const id = defineModel<string>("id", { required: true });
-const filter = ref<string>("");
-const rows = ref<RowList[]>([]);
+
+//Table
+const filter = ref<string>(""); //คำค้นหา
+const rows = ref<RowList[]>([]); //รายการข้อมูลประวัติการแก้ไข
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -122,12 +124,12 @@ const pagination = ref({
 /**
  * fetch รายการข้อมูลประวัติการแก้ไช
  */
-function getHistory() {
+async function getHistory() {
   showLoader();
-  http
+  await http
     .get(config.API.profileNewNoPaidHisById(id.value, empType.value))
-    .then((res) => {
-      rows.value = res.data.result;
+    .then(async (res) => {
+      rows.value = await res.data.result;
     })
     .catch((e) => {
       messageError($q, e);
@@ -137,10 +139,19 @@ function getHistory() {
     });
 }
 
+/**
+ * ฟังก์ชันปิด Popup
+ */
 function closeDialog() {
   modal.value = false;
+  rows.value = [];
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
+ */
 watch(modal, (status) => {
   if (status == true) {
     getHistory();
diff --git a/src/modules/04_registryPerson/components/detail/Salary/Main.vue b/src/modules/04_registryPerson/components/detail/Salary/Main.vue
index 41294cc2c..dfdbf8ceb 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/Main.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/Main.vue
@@ -2,8 +2,8 @@
 import { ref } from "vue";
 
 /** importComponents*/
-import PositionSalary from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue";
-import NotReceiveSalary from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue";
+import PositionSalary from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue"; //ตำแหน่งเงินเดือน
+import NotReceiveSalary from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue"; //วันที่ไม่ได้รับเงินเดิอน
 
 const tab = ref<string>("1");
 </script>
diff --git a/src/modules/04_registryPerson/components/detail/TabMain.vue b/src/modules/04_registryPerson/components/detail/TabMain.vue
index 83f75c08a..5c3475b2a 100644
--- a/src/modules/04_registryPerson/components/detail/TabMain.vue
+++ b/src/modules/04_registryPerson/components/detail/TabMain.vue
@@ -4,12 +4,14 @@ import { useRoute } from "vue-router";
 
 import { useRegistryDetailNewDataStore } from "@/modules/04_registryPerson/stores/DetailMain";
 
-import PersonalInformationMain from "@/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue";
-import GovernmentInformationMain from "@/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue";
-import salaryMain from "@/modules/04_registryPerson/components/detail/Salary/Main.vue";
-import AchievementMain from "@/modules/04_registryPerson/components/detail/Achievement/Main.vue";
-import OtherMaim from "@/modules/04_registryPerson/components/detail/Other/Main.vue";
-import EmployeeMain from "@/modules/04_registryPerson/components/detail/Employee/Main.vue";
+import type { ItemTab } from "@/modules/04_registryPerson/interface/index/Main";
+
+import PersonalInformationMain from "@/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue"; //ข้อมูลส่วนตัว
+import GovernmentInformationMain from "@/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue"; //ข้อมูลราชการ
+import salaryMain from "@/modules/04_registryPerson/components/detail/Salary/Main.vue"; //ข้อมูลเงินเดือน/ค่าจ้าง
+import AchievementMain from "@/modules/04_registryPerson/components/detail/Achievement/Main.vue"; //ข้อมูลผลงานและเครื่องราชฯ
+import OtherMaim from "@/modules/04_registryPerson/components/detail/Other/Main.vue"; //เอกสารหลักฐานและอื่นๆ
+import EmployeeMain from "@/modules/04_registryPerson/components/detail/Employee/Main.vue"; //ข้อมูลลูกจ้าง
 
 const route = useRoute();
 
@@ -18,7 +20,7 @@ const props = defineProps({
   fetchDataPersonal: { type: Function, require: true },
 });
 
-const itemsTab = ref<any>([
+const itemsTab = ref<ItemTab[]>([
   {
     name: "1",
     icon: "mdi-account",
diff --git a/src/modules/04_registryPerson/components/requestEdit/DialogStatus.vue b/src/modules/04_registryPerson/components/requestEdit/DialogStatus.vue
index 345da1b7e..3bc1ddbcd 100644
--- a/src/modules/04_registryPerson/components/requestEdit/DialogStatus.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/DialogStatus.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
 
@@ -11,12 +14,6 @@ import type { DataOption } from "@/modules/04_registryPerson/interface/index/Mai
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -28,40 +25,43 @@ const { dialogConfirm, showLoader, hideLoader, messageError, success } =
 /**
  *  props
  */
-const modal = defineModel<boolean>("modal", { required: true });
-const requestId = defineModel<string>("requestId", { required: true });
+const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด popup แก้ไขสถานะคำร้อง
+const requestId = defineModel<string>("requestId", { required: true }); // id ที่ต้องการแก้ไข
 const props = defineProps({
-  fetchData: { type: Function, requied: true },
+  fetchData: { type: Function, requied: true }, // ดึงข้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติ
 });
-
-const isReadOnly = ref<boolean>(false);
+const isReadOnly = ref<boolean>(false); //อ่ายได้อย่างเดียว
+//ฟอร์มสถานะคำร้อง
 const formData = reactive({
-  status: "",
-  remark: "",
+  status: "", //สถานะ
+  remark: "", //หมายเหตุ
 });
+//ข้อมูลรายการสถานะ
 const statusOptionMain = ref<DataOption[]>(
   store.optionStatus.filter((e) => e.id !== "")
 );
-const statusOption = ref<DataOption[]>(statusOptionMain.value);
+const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
 
 /**
  * function บันทึกรายการคำร้อง
  */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
-    http
+    await http
       .patch(config.API.requestEdit + `${requestId.value}`, {
         status: formData.status,
         remark: formData.remark,
       })
       .then(async () => {
         await props.fetchData?.();
-        closeDialog();
         await success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
   });
@@ -76,13 +76,6 @@ function closeDialog() {
   formData.remark = "";
 }
 
-function classInput(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
 /**
  * function ค้นหาคำใน select  สถานะคำร้อง
  * @param val คำค้น
@@ -121,6 +114,22 @@ function fetchDataRequest() {
     });
 }
 
+/**
+ * class inpui
+ * @param val ค่าสถานะ
+ */
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+/**
+ * ดูการเปลี่ยนแปลงของ modal
+ *
+ * เมื่อ modal เป็น true ทำการดึงข้อมูลคำร้องแก้ไข
+ */
 watch(
   () => modal.value,
   () => {
diff --git a/src/modules/04_registryPerson/interface/index/Main.ts b/src/modules/04_registryPerson/interface/index/Main.ts
index 9c10f996a..970c2b1f7 100644
--- a/src/modules/04_registryPerson/interface/index/Main.ts
+++ b/src/modules/04_registryPerson/interface/index/Main.ts
@@ -10,6 +10,7 @@ interface DataOption2 {
   id: number;
   name: string;
 }
+
 interface DataOptionSys {
   id: string;
   name: string;
@@ -21,6 +22,16 @@ interface DataOptionInsignia {
   typeName: string;
 }
 
+interface DataOptionEducation {
+  label: string;
+  value: boolean;
+}
+
+interface DataOptionEducationLevel {
+  label: string;
+  value: string;
+}
+
 interface zipCodeOption {
   id: string;
   name: string;
@@ -50,6 +61,12 @@ interface InsigniaOps {
   insigniaOptions: DataOptionInsignia[];
 }
 
+interface ItemTab {
+  name: string;
+  icon: string;
+  label: string;
+}
+
 export type {
   Pagination,
   DataOption,
@@ -60,4 +77,7 @@ export type {
   AddressOps,
   InsigniaOps,
   DataOptionSys,
+  ItemTab,
+  DataOptionEducation,
+  DataOptionEducationLevel,
 };
diff --git a/src/modules/04_registryPerson/interface/index/discipline.ts b/src/modules/04_registryPerson/interface/index/discipline.ts
index 1f2443f9a..411acce15 100644
--- a/src/modules/04_registryPerson/interface/index/discipline.ts
+++ b/src/modules/04_registryPerson/interface/index/discipline.ts
@@ -25,6 +25,7 @@ interface FormFilter {
 interface DataOption {
   id: string;
   name: string;
+  disable?: boolean;
 }
 
 interface DisciplineOps {
diff --git a/src/modules/04_registryPerson/interface/index/leave.ts b/src/modules/04_registryPerson/interface/index/leave.ts
index 84c4809cb..d229f271c 100644
--- a/src/modules/04_registryPerson/interface/index/leave.ts
+++ b/src/modules/04_registryPerson/interface/index/leave.ts
@@ -1,8 +1,8 @@
 interface DetailData {
   id: string;
   typeLeave: string;
-  dateStartLeave: Date | null;
-  dateEndLeave: Date | null;
+  dateStartLeave: Date | null | string;
+  dateEndLeave: Date | null | string;
   numLeave: number;
   status: string;
   reason: string;
@@ -26,7 +26,8 @@ interface FormFilter {
 interface DataOptionLeave {
   id: string;
   name: string;
-  totalLeave: number;
+  totalLeave?: number;
+  code?: string;
 }
 
 interface DataOption {
diff --git a/src/modules/04_registryPerson/interface/request/Main.ts b/src/modules/04_registryPerson/interface/request/Main.ts
index 0d25eb0b2..cbde0472b 100644
--- a/src/modules/04_registryPerson/interface/request/Main.ts
+++ b/src/modules/04_registryPerson/interface/request/Main.ts
@@ -12,7 +12,7 @@ interface FormFilter {
   isProbation: boolean | null;
   isAll?: boolean;
   nodeId?: string | null;
-  node?: string | null;
+  node?: string | null | number;
 }
 
 interface FormAddPerson {
@@ -39,4 +39,38 @@ interface MyObjectRef {
   [key: string]: any;
 }
 
-export type { FormFilter, FormAddPerson, MyObjectRef };
+interface DataNodeData {
+  name: string;
+  nodeId: string | null | undefined;
+  node: string | null | undefined | number;
+}
+
+interface QueryParams {
+  page: number;
+  pageSize: number;
+  isProbation?: boolean;
+  isRetire?: boolean;
+  type?: string;
+  node?: number | string | null | undefined;
+  nodeId?: string;
+  isAll?: boolean;
+}
+
+interface FormChangeName {
+  profileId: string;
+  prefixId: string | null | undefined;
+  prefix: string | null | undefined;
+  firstName: string | null | undefined;
+  lastName: string | null | undefined;
+  status: string | null | undefined;
+  documentId: string | null | undefined;
+}
+
+export type {
+  FormFilter,
+  FormAddPerson,
+  MyObjectRef,
+  DataNodeData,
+  QueryParams,
+  FormChangeName,
+};
diff --git a/src/modules/04_registryPerson/interface/response/Education.ts b/src/modules/04_registryPerson/interface/response/Education.ts
index 2f54086b0..1e5e9d3bb 100644
--- a/src/modules/04_registryPerson/interface/response/Education.ts
+++ b/src/modules/04_registryPerson/interface/response/Education.ts
@@ -29,5 +29,13 @@ interface ResponseObject {
   lastUpdateUserID: string;
   lastUpdatedAt: Date;
 }
+interface DataEducationLevel {
+  createdAt: string;
+  createdFullName: string;
+  id: string;
+  lastUpdatedAt: string;
+  name: string;
+  rank: number;
+}
 
-export type { ResponseObject };
+export type { ResponseObject, DataEducationLevel };
diff --git a/src/modules/04_registryPerson/interface/response/Main.ts b/src/modules/04_registryPerson/interface/response/Main.ts
index 2a290a06a..2e740320e 100644
--- a/src/modules/04_registryPerson/interface/response/Main.ts
+++ b/src/modules/04_registryPerson/interface/response/Main.ts
@@ -14,6 +14,7 @@ interface DataLevel {
 
 interface DataPerson {
   avatar?: string;
+  avatarName?: string;
   citizenId: string;
   firstName: string;
   id: string;
@@ -25,4 +26,138 @@ interface DataPerson {
   rank?: string;
 }
 
-export type { DataType, DataLevel, DataPerson };
+interface DateRequest {
+  createdAt: string;
+  createdFullName: string;
+  detail: string;
+  fullname: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdatedAt: string;
+  remark: string;
+  status: string;
+  topic: string;
+}
+
+interface DataProfile {
+  avatar: string;
+  avatarName: string;
+  birthDate: string;
+  bloodGroup: string;
+  citizenId: string;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  currentAddress: string;
+  currentDistrictId: string;
+  currentProvinceId: string;
+  currentSubDistrictId: string;
+  currentZipCode: string;
+  dateAppoint: string;
+  dateLeave: string;
+  dateRetire: string;
+  dateRetireLaw: string;
+  dateStart: string;
+  dutyTimeEffectiveDate: string;
+  dutyTimeId: string;
+  email: string;
+  ethnicity: string;
+  firstName: string;
+  gender: string;
+  govAgeAbsent: number;
+  govAgePlus: number;
+  id: string;
+  isLeave: boolean;
+  isProbation: boolean;
+  keycloak: string;
+  lastName: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  leaveReason: string;
+  nationality: string;
+  posLevelId: string;
+  phone: string;
+  posTypeId: string;
+  position: string;
+  prefix: string;
+  rank: string;
+  reasonSameDate: null;
+  registrationAddress: string;
+  registrationDistrictId: string;
+  registrationProvinceId: string;
+  registrationSubDistrictId: string;
+  registrationZipCode: string;
+  relationship: string;
+  religion: string;
+  telephoneNumber: string;
+  posLevel: {
+    createdAt: string;
+    createdFullName: string;
+    createdUserId: string;
+    id: string;
+    lastUpdateFullName: string;
+    lastUpdateUserId: string;
+    lastUpdatedAt: string;
+    posLevelAuthority: string;
+    posLevelName: string;
+    posLevelRank: number;
+    posTypeId: string;
+  };
+  posType: {
+    createdAt: string;
+    createdFullName: string;
+    createdUserId: string;
+    id: string;
+    lastUpdateFullName: string;
+    lastUpdateUserId: string;
+    lastUpdatedAt: string;
+    posTypeName: string;
+    posTypeRank: number;
+  };
+}
+
+interface DataLeave {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  dateLeaveEnd: string;
+  dateLeaveStart: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  leaveCount: number;
+  leaveDays: number;
+  leaveType: DataLeaveType;
+  leaveTypeId: string;
+  profileEmployeeId: string;
+  profileId: string;
+  reason: string;
+  status: string;
+  totalLeave: number;
+  typeLeaveId: string;
+}
+
+interface DataLeaveType {
+  code: string;
+  createdAt: string;
+  createdUserId: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  limit: number;
+  name: string;
+  refCommandDate: string;
+}
+
+export type {
+  DataType,
+  DataLevel,
+  DataPerson,
+  DateRequest,
+  DataProfile,
+  DataLeave,
+  DataLeaveType,
+};
diff --git a/src/modules/04_registryPerson/router.ts b/src/modules/04_registryPerson/router.ts
index 19878364a..a25ea4199 100644
--- a/src/modules/04_registryPerson/router.ts
+++ b/src/modules/04_registryPerson/router.ts
@@ -1,9 +1,13 @@
-const listPage = () => import("@/modules/04_registryPerson/views/list.vue");
+// ค้นหาข้อมูลทะเบียนประวัติ
+const listPage = () => import("@/modules/04_registryPerson/views/listView.vue");
+
+// ทะเบียนประวัติ
 const detailPage = () =>
   import("@/modules/04_registryPerson/views/detailView.vue");
 
+// รายการคำร้องขอแก้ไขทะเบียนประวัติ
 const requestEdit = () =>
-  import("@/modules/04_registryPerson/views/requestEdit.vue");
+  import("@/modules/04_registryPerson/views/requestEditView.vue");
 
 export default [
   {
diff --git a/src/modules/04_registryPerson/stores/Address.ts b/src/modules/04_registryPerson/stores/Address.ts
index dba7263ba..1ad7c7481 100644
--- a/src/modules/04_registryPerson/stores/Address.ts
+++ b/src/modules/04_registryPerson/stores/Address.ts
@@ -13,18 +13,17 @@ import type {
   zipCodeOption,
 } from "@/modules/04_registryPerson/interface/index/Main";
 
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+
+  messageError,
+} = mixin;
+
 export const useAddressDataStore = defineStore("addess", () => {
-  const $q = useQuasar();
   const profileIdBefore = ref<string>("");
-  const mixin = useCounterMixin();
-  const {
-    showLoader,
-    hideLoader,
-    date2Thai,
-    messageError,
-    convertDate,
-    dateToISO,
-  } = mixin;
 
   const Ops = ref<AddressOps>({
     provinceOps: [],
@@ -73,6 +72,9 @@ export const useAddressDataStore = defineStore("addess", () => {
     return ops.find((r: { id: string }) => r.id === id) || {};
   }
 
+  /**
+   * ฟังก์ชันดึงข้อมูลจังหวัด
+   */
   async function fetchProvince() {
     showLoader();
     await http
@@ -94,6 +96,11 @@ export const useAddressDataStore = defineStore("addess", () => {
       });
   }
 
+  /**
+   * ฟังก์ชันดึงข้อมูล เขต / อำเภอ
+   * @param id  จังหวัด
+   * @param position   ที่อยู่ตามทะเบียนบ้าน, ที่อยู่ปัจจุบัน
+   */
   async function fetchDistrict(id: string | null, position: string) {
     if (!id) return;
     showLoader();
@@ -122,6 +129,11 @@ export const useAddressDataStore = defineStore("addess", () => {
       });
   }
 
+  /**
+   * ฟังก์ชันดึงข้อมูล  แขวง / ตำบล
+   * @param id  เขต / อำเภอ
+   * @param position   ที่อยู่ตามทะเบียนบ้าน, ที่อยู่ปัจจุบัน
+   */
   async function fetchSubDistrict(id: string | null, position: string) {
     if (!id) return;
     showLoader();
@@ -153,6 +165,12 @@ export const useAddressDataStore = defineStore("addess", () => {
       });
   }
 
+  /**
+   * ฟังกชันค้นหาข้อมูลใน select
+   * @param val  คำที่ต้องการค้นหา
+   * @param update function
+   * @param refData ประเภทตัวเลือก
+   */
   function filterSelector(val: any, update: Function, refData: string) {
     switch (refData) {
       case "provinceOps":
diff --git a/src/modules/04_registryPerson/stores/profile.ts b/src/modules/04_registryPerson/stores/profile.ts
index 52a3f62db..e5d8578b8 100644
--- a/src/modules/04_registryPerson/stores/profile.ts
+++ b/src/modules/04_registryPerson/stores/profile.ts
@@ -1,9 +1,10 @@
 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 { useCounterMixin } from "@/stores/mixin";
 
 import type { RequestObject } from "@/modules/04_registryPerson/interface/request/Profile";
 import type {
@@ -11,39 +12,53 @@ import type {
   InformationOps,
 } from "@/modules/04_registryPerson/interface/index/Main";
 
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+
+  messageError,
+} = mixin;
+
 export const useProfileDataStore = defineStore("profile", () => {
-  const $q = useQuasar();
-  const mixin = useCounterMixin();
-  const {
-    showLoader,
-    hideLoader,
-    date2Thai,
-    messageError,
-    convertDate,
-    dateToISO,
-  } = mixin;
   const retireDate = ref<Date>();
 
+  //ข้อมูลส่วนตัว
   const defaultProfile: RequestObject = {
     bloodGroup: null,
     relationship: null,
     gender: null,
-    // posTypeId: "",
-    // posLevelId: "",
     religion: null,
     citizenId: "",
-    // telephoneNumber: null,
     nationality: null,
     ethnicity: null,
     birthDate: null,
     phone: null,
-    // email: null,
     lastName: "",
     firstName: "",
     prefix: "",
     rank: null,
   };
 
+  //ข้อมูลตัวเลือก
+  const OpsFilter = ref<InformationOps>({
+    prefixOps: [],
+    rankOps: [],
+    genderOps: [],
+    bloodOps: [],
+    statusOps: [],
+    religionOps: [],
+    employeeClassOps: [
+      { id: "perm", name: "ลูกจ้างประจำ" },
+      { id: "temp", name: "ลูกจ้างชั่วคราว" },
+    ],
+    employeeTypeOps: [
+      { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
+      { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
+    ],
+  });
+  //รายการตัวเลือก
   const Ops = ref<InformationOps>({
     prefixOps: [],
     rankOps: [],
@@ -61,31 +76,11 @@ export const useProfileDataStore = defineStore("profile", () => {
     ],
   });
 
-  const OpsFilter = ref<InformationOps>({
-    prefixOps: [],
-    rankOps: [],
-    genderOps: [],
-    bloodOps: [],
-    statusOps: [],
-    religionOps: [],
-    employeeClassOps: [
-      { id: "perm", name: "ลูกจ้างประจำ" },
-      { id: "temp", name: "ลูกจ้างชั่วคราว" },
-    ],
-    employeeTypeOps: [
-      { id: "gov", name: "งบประมาณเงินอุดหนุนรัฐบาล" },
-      { id: "bkk", name: "งบประมาณกรุงเทพมหานคร" },
-    ],
-  });
-
-  const prefixOp = ref<string[]>([
-    "นาย",
-    "นาง",
-    "นางสาว",
-    "เด็กชาย",
-    "เด็กหญิง",
-  ]);
-
+  /**
+   * ฟังก์ชันคำนวนอายุด้วยวันเดิอนปีเกิด
+   * @param birthDate วันเกิด
+   * @returns อายุ
+   */
   function calculateAge(birthDate: Date | null) {
     if (!birthDate) return null;
     const birthDateTimeStamp = new Date(birthDate).getTime();
@@ -107,7 +102,10 @@ export const useProfileDataStore = defineStore("profile", () => {
     return `${years} ปี ${months} เดือน ${days} วัน`;
   }
 
-  const fetchPerson = async () => {
+  /**
+   * ฟังก์ชันดึงข้อมูลตัวเลือกข้อมูลหลัก
+   */
+  async function fetchPerson() {
     showLoader();
     await http
       .get(config.API.profileNewMetaMain)
@@ -181,9 +179,15 @@ export const useProfileDataStore = defineStore("profile", () => {
           hideLoader();
         }, 2500);
       });
-  };
+  }
 
-  const filterSelector = (val: any, update: Function, refData: string) => {
+  /**
+   * ฟังกชันค้นหาข้อมูลใน select
+   * @param val  คำที่ต้องการค้นหา
+   * @param update function
+   * @param refData ประเภทตัวเลือก
+   */
+  const filterSelector = (val: string, update: Function, refData: string) => {
     switch (refData) {
       case "prefixOps":
         update(() => {
diff --git a/src/modules/04_registryPerson/views/detailView.vue b/src/modules/04_registryPerson/views/detailView.vue
index 97cccd13e..df218910c 100644
--- a/src/modules/04_registryPerson/views/detailView.vue
+++ b/src/modules/04_registryPerson/views/detailView.vue
@@ -1,15 +1,19 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRoute, useRouter } from "vue-router";
 import {
   checkPermission,
   checkPermissionCreate,
   checkPermissionList,
 } from "@/utils/permissions";
-import { useRoute, useRouter } from "vue-router";
-import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import axios from "axios";
+import avatar from "@/assets/avatar_user.jpg";
+
 /**
  * importType
  */
@@ -22,16 +26,10 @@ import type { ResponseObject } from "@/modules/04_registryPerson/interface/respo
 /**
  * importComponents
  */
+import CardNotPermission from "@/components/CardNotPermission.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import TabMain from "@/modules/04_registryPerson/components/detail/TabMain.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import avatar from "@/assets/avatar_user.jpg";
-import CardNotPermission from "@/components/CardNotPermission.vue";
-
 /**
  * use
  */
@@ -51,23 +49,22 @@ const {
   pathRegistryEmp,
 } = useCounterMixin();
 
-const isPermission = ref<boolean | null>(null);
-const notPermissionMsg = ref<string>("");
+const isPermission = ref<boolean | null>(null); //สิทธิการเช้าถึงข้อมูล
+const notPermissionMsg = ref<string>(""); //ข้อตวามไม่มีสิทธิ
+const profileId = ref<string>(route.params.id.toString()); //id profile
+const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? "")); //ประเภทข้าราชการ
 
 /** ถึงเเก่กรรม */
-const dialogPassaway = ref<boolean>(false);
-const placeDeathCertificate = ref("");
-const deathCertificateNo = ref("");
-const dateDeath = ref<Date>(new Date());
-const filePassaway = ref<any>(null);
-const reasonDeath = ref("");
+const dialogPassaway = ref<boolean>(false); //แสดงฟอร์มถึงเเก่กรรม
+const filePassaway = ref<any>(null); //แนบใบมรณบัตร
+const deathCertificateNo = ref(""); //เลขที่ใบมรณบัตร
+const dateDeath = ref<Date>(new Date()); //วันที่เสียชีวิต
+const placeDeathCertificate = ref(""); //สถานที่ออกใบมรณบัตร
+const reasonDeath = ref(""); //เหตุผลการเสียชีวิต
 
-const dialogImage = ref<boolean>(false);
-
-const profileId = ref<string>(route.params.id.toString());
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const formDetail = ref<ResponseObject>();
+const dialogImage = ref<boolean>(false); //แสดงเลือกรูปภาพ
+const formDetail = ref<ResponseObject>(); //ข้อมูลส่วนตัว
+//รายการเมนูออกคำสั่งข้าราชการ
 const itemsMenu = ref<DataOptionSys[]>([
   {
     id: "1",
@@ -100,7 +97,7 @@ const itemsMenu = ref<DataOptionSys[]>([
     system: "SYS_PLACEMENT_OTHER",
   },
 ]);
-
+//รายการเมนูออกคำสั่งลูกจ้าง
 const itemsMenuEmployee = ref<DataOptionSys[]>([
   {
     id: "1",
@@ -114,15 +111,14 @@ const itemsMenuEmployee = ref<DataOptionSys[]>([
   },
 ]);
 
-const uploadUrl = ref<string>("");
-const fileName = ref<string>("");
-const profilePicture = ref<string>("");
-const profileFile = ref();
+const uploadUrl = ref<string>(""); //URL อัปโหลดรูป
+const fileName = ref<string>(""); //ชื่อไฟล์รูป
+const profilePicture = ref<string>(""); //รูป
+const profileFile = ref(); //ไฟล์
 const input = document.createElement("input");
 const activeImage = ref<any | null>(null);
 const images = ref<any[]>([]);
 const imagesAlldata = ref<any[]>([]);
-
 input.type = "file";
 input.accept = ".jpg,.png,.tif,.pic";
 
@@ -140,6 +136,9 @@ function imageActive(n: any) {
   activeImage.value = n;
 }
 
+/**
+ * ฟังก์ชันอัปโหลด
+ */
 function uploadImg() {
   http
     .post(config.API.orgProfileAvatarbyType(empType.value), {
@@ -156,6 +155,10 @@ function uploadImg() {
     .finally(() => {});
 }
 
+/**
+ * ฟังก์ชันสร้าง path อัปโหลไฟล์
+ * @param path
+ */
 function uploadProfile(path: string) {
   http
     .post(config.API.fileByPath(path), {
@@ -179,6 +182,11 @@ function uploadProfile(path: string) {
     });
 }
 
+/**
+ * ฟังก์ชันอัปโหลด
+ * @param uploadUrl  path อัปโหลไฟล์
+ * @param file ไฟล์
+ */
 function uploadFileURL(uploadUrl: string, file: any) {
   showLoader();
   axios
@@ -199,8 +207,11 @@ function uploadFileURL(uploadUrl: string, file: any) {
     });
 }
 
+/**
+ * ฟังก์ชันดึงข้อมูลรูปโปรไฟล์
+ * @param id โปรไฟล์
+ */
 function fetchProfile(id: string) {
-  // showLoader();
   http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
     .then(async (res) => {
@@ -209,9 +220,6 @@ function fetchProfile(id: string) {
     .catch(() => {
       profilePicture.value = avatar;
     });
-  // .finally(() => {
-  //   hideLoader();
-  // });
 }
 
 const reasonStatus = ref<boolean>(false);
@@ -251,6 +259,9 @@ const reasonOptions = ref<DataOption[]>([
   },
 ]);
 
+/**
+ * ฟังก์ชันดึงข้อมูลส่วนต้ว
+ */
 async function fetchDataPersonal() {
   showLoader();
   await http
@@ -298,6 +309,9 @@ async function fetchDataPersonal() {
     });
 }
 
+/**
+ * ฟังก์ชันดาว์นโหลดไฟล์ "ก.พ.7/ก.ก.1 หรื่อ ประวัติแบบย่อ
+ */
 function onClickDownloadKp7(type: string) {
   showLoader();
   const url =
@@ -333,7 +347,7 @@ function onClickDownloadKp7(type: string) {
 }
 
 /**
- *  ช่วยราชการ
+ *  ฟังก์ชันออกคำสั่งช่วยราชการ
  */
 function helpPost() {
   const formData = new FormData();
@@ -356,7 +370,7 @@ function helpPost() {
 }
 
 /**
- * ส่งตัวกลับ
+ * ฟังก์ชันออกคำสั่งส่งตัวกลับ
  */
 function repatriationPost() {
   const formData = new FormData();
@@ -379,7 +393,7 @@ function repatriationPost() {
 }
 
 /**
- * แต่งตังเลื่อน
+ * ฟังก์ชันออกคำสั่งแต่งตังเลื่อน
  */
 function appointPost() {
   const formData = new FormData();
@@ -402,14 +416,14 @@ function appointPost() {
 }
 
 /**
- * ถึงเเก่กรรม
+ * ฟังก์ชันออกคำสั่งถึงเเก่กรรม
  */
 function clickPassaway() {
   dialogPassaway.value = true;
 }
 
 /**
- * ให้ออกจากราชการ
+ * ฟังก์ชันออกคำสั่งให้ออกจากราชการ
  */
 function outPost() {
   const formData = new FormData();
@@ -432,7 +446,7 @@ function outPost() {
 }
 
 /**
- * อื่นๆ
+ * ฟังก์ชันออกคำสั่งอื่นๆ
  */
 function otherPost() {
   const formData = new FormData();
@@ -454,6 +468,9 @@ function otherPost() {
   });
 }
 
+/**
+ * ฟังก์ชันออกคำสั่งปรับระดับชั้นงาน - ย้าย
+ */
 function appointEmployeePost() {
   const formData = new FormData();
   formData.append("id", profileId.value);
@@ -474,12 +491,8 @@ function appointEmployeePost() {
   });
 }
 
-function closePassaway() {
-  dialogPassaway.value = false;
-}
-
 /**
- * function ยืนยันบันทึกข้อมูลถึงแก่กรรม
+ * ฟังก์ชันยืนยันบันทึกข้อมูลถึงแก่กรรม
  */
 function clickSaveDeceased() {
   dialogConfirm($q, async () => {
@@ -507,7 +520,14 @@ function clickSaveDeceased() {
 }
 
 /**
- * function เปืด popup เลือกรูปภาพ
+ * ฟังก์ชันปืด popup ถึงแก่กรรม
+ */
+function closePassaway() {
+  dialogPassaway.value = false;
+}
+
+/**
+ * ฟังก์ชันเปืด popup เลือกรูปภาพ
  */
 function openDialogImg() {
   dialogImage.value = true;
@@ -515,7 +535,7 @@ function openDialogImg() {
 }
 
 /**
- * function เรียกข้อมูลรูป
+ * ฟังก์ชันเรียกข้อมูลรูป
  */
 function getImage() {
   showLoader();
@@ -538,7 +558,7 @@ function getImage() {
 }
 
 /**
- * function เรียกข้อมูลรูป
+ * ฟังก์ชันเรียกข้อมูลรูป
  * @param dataList
  */
 function getImg(dataList: any) {
@@ -559,7 +579,7 @@ function getImg(dataList: any) {
 }
 
 /**
- * funciton ปิด Popup เลือกรูปภาพ
+ * ฟังก์ชันปิด Popup เลือกรูปภาพ
  */
 function closeImage() {
   dialogImage.value = false;
@@ -568,7 +588,7 @@ function closeImage() {
 }
 
 /**
- * funciotn ยืนยันการลบรูป
+ * ฟังก์ชันยืนยันการลบรูป
  * @param id  รูปภาพ
  */
 function deletePhoto(id: string) {
@@ -595,7 +615,7 @@ function deletePhoto(id: string) {
 }
 
 /**
- * function ยืนยันการเลือกรูป
+ * ฟังก์ชันยืนยันการเลือกรูป
  */
 function selectAvatarHistory() {
   if (activeImage.value == null) {
diff --git a/src/modules/04_registryPerson/views/list.vue b/src/modules/04_registryPerson/views/listView.vue
similarity index 84%
rename from src/modules/04_registryPerson/views/list.vue
rename to src/modules/04_registryPerson/views/listView.vue
index 260cf9ae1..71c1bc327 100644
--- a/src/modules/04_registryPerson/views/list.vue
+++ b/src/modules/04_registryPerson/views/listView.vue
@@ -1,11 +1,22 @@
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, watch } from "vue";
+import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import avatar from "@/assets/avatar_user.jpg";
+import { useStructureTree } from "@/stores/structureTree";
 
 /** importType*/
+import type {
+  DataNodeData,
+  QueryParams,
+} from "@/modules/04_registryPerson/interface/request/Main";
 import type { DataOption } from "@/modules/04_registryPerson/interface/index/Main";
+import type { DataStructureTree } from "@/interface/main";
 import type {
   DataPerson,
   DataType,
@@ -13,56 +24,33 @@ import type {
 
 /** importComponents*/
 import TableView from "@/modules/04_registryPerson/components/TableView.vue";
-import avatar from "@/assets/avatar_user.jpg";
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-import { useStructureTree } from "@/stores/structureTree";
-
 const $q = useQuasar();
 const store = useRegistryNewDataStore();
 const { fetchStructureTree } = useStructureTree();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 const route = useRoute();
 
-const mode = ref<"table" | "card">("table");
-const filterMain = ref<string>("");
-const isShowFilter = ref<boolean>(true);
-const isShowBtnFilter = ref<boolean>(false);
+const mode = ref<"table" | "card">("table"); //การแสดงผล
 const empType = ref<string>("officer"); // officer / employee / perm
+const dataPersonMain = ref<DataPerson[]>([]); //ข้อมูลรายการที่ค้นหาข้อมูลทะเบียนประวัติ
+const maxPage = ref<number>(1); //จำนวนหน้า
+const total = ref<number>(0); //จำนวนข้อมูล
+const isShowBtnFilter = ref<boolean>(false);
 
-// const searchType = ref<string>("fullName");
-const node = ref<any>([]);
-const expanded = ref<any>([]);
-const maxPage = ref<number>(1);
-const total = ref<number>(0);
-const selectNode = ref<boolean>(false);
+const filterMain = ref<string>(""); //หน่วยงาน/ส่วนราชการ
+const node = ref<DataStructureTree[]>([]); //รายการโครางสร้าง
+const expanded = ref<string[]>([]); //แสดงข้อมูลในโครงสร้าง
 
-const dataPersonMain = ref<DataPerson[]>([]);
-const nodeData = reactive<any>({
-  page: 1,
-  pageSize: 10,
-  round: "",
+const selectNode = ref<boolean>(false); //แสดงโครงสร้าง
+
+const nodeData = reactive<DataNodeData>({
   name: "เลือกหน่วยงาน/ส่วนราชการ",
-  keyword: "",
   nodeId: null,
   node: null,
 });
 
-// const conditionTotal = computed(() => {
-//   let num: string = "";
-//   if (store.formFilter.isProbation && store.formFilter.isShowRetire) {
-//     num = "(2)";
-//   } else if (store.formFilter.isProbation || store.formFilter.isShowRetire) {
-//     num = "(1)";
-//   } else "";
-
-//   return num;
-// });
-
 /**
  * function เรียกข้อมูลตำแหน่งประเภท
  */
@@ -91,26 +79,12 @@ function fetchOptionGroup() {
     });
 }
 
-function fetchYearOption() {
-  if (store.yearOps.length === 0) {
-    const options = [];
-    const year = new Date().getFullYear();
-
-    for (let i = year - 40; i <= year + 60; i++) {
-      options.push({ id: i.toString(), name: (i + 543).toString() });
-    }
-    if (options) {
-      store.yearOps.push(...options);
-    }
-  }
-}
-
 /**
  * function fetch รายชื่อข้อมูลทะเบียนประวัติ
  */
 function fetchDataPerson() {
   showLoader();
-  let queryParams: any = {
+  let queryParams: QueryParams = {
     page: store.formFilter.page,
     pageSize: store.formFilter.pageSize,
   };
@@ -182,7 +156,7 @@ function fetchDataPerson() {
  * @param items ข้อมูลคน
  */
 function insertAvatar(items: DataPerson[]) {
-  items.map((x: any, index: number) => {
+  items.map((x: DataPerson, index: number) => {
     if (x.avatarName != null) {
       http
         .get(
@@ -209,30 +183,11 @@ function insertAvatar(items: DataPerson[]) {
   });
 }
 
-/**
- * funciotn แสดงตัวเลือกเพิ่มเติม
- */
-// function onClickShowFilter() {
-//   isShowFilter.value = !isShowFilter.value;
-//   isShowBtnFilter.value = false;
-//   if (isShowFilter.value) {
-//     // fetchLevel();
-//     fetchYearOption();
-//   }
-// }
-
 /**
  * funciotn ค้นหาข้อมูล
  */
 function onclickSearch() {
-  isShowFilter.value = true;
-  // isShowBtnFilter.value = false;
   store.formFilter.page = 1;
-  if (isShowFilter.value) {
-    fetchType();
-    // fetchLevel();
-    fetchYearOption();
-  }
   store.formFilter.keyword =
     store.formFilter.keyword === null ? "" : store.formFilter.keyword;
   fetchDataPerson();
@@ -242,8 +197,8 @@ function onclickSearch() {
  * function เลือกประเภทข้าราชการ
  * @param item ประเภทข้าราชการ
  */
-async function selectType() {
-  empType.value = await (route.name == "registryNew" ? "officer" : "perm");
+function selectType() {
+  empType.value = route.name == "registryNew" ? "officer" : "perm";
 
   if (empType.value !== "officer") {
     store.formFilter.isShowRetire = null;
@@ -333,7 +288,10 @@ function clearSelect(t: string) {
   fetchDataPerson();
 }
 
-const isLoad = ref<boolean>(false);
+const isLoad = ref<boolean>(false); //โหลดข้อมูลโครงสร้าง
+/**
+ * ฟังก์ชันดึงข้อโครงสร้าง
+ */
 async function fetchTree() {
   const data = await fetchStructureTree(route.meta.Key as string);
   if (data) {
@@ -344,6 +302,9 @@ async function fetchTree() {
   }
 }
 
+/**
+ * ค้นหาข้อมูลรายชื่อข้อมูลทะเบียนประวัติตามหน่วยงาน/ส่วนราชการ
+ */
 function sendNode() {
   nodeData.node = store.formFilter.node;
   nodeData.nodeId = store.formFilter.nodeId;
@@ -352,7 +313,13 @@ function sendNode() {
   fetchDataPerson();
 }
 
-function updateSelectedTreeMain(data: any) {
+/**
+ * ฟังก์ชันเลือกหน่วยงาน/ส่วนราชการ
+ * @param data  ข้อมูลหน่วยงาน/ส่วนราชการที่ต้องการค้นหาร
+ *
+ * เพื่อค้นหาข้อมูลตามหน่วยงาน/ส่วนราชการ
+ */
+function updateSelectedTreeMain(data: DataStructureTree) {
   if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
     store.formFilter.node = null;
     store.formFilter.nodeId = null;
@@ -372,9 +339,11 @@ watch(selectNode, () => {
   isLoad.value && hideLoader();
 });
 
+/**
+ * hook เมื่อมีการเรียกใช้ Components
+ */
 onMounted(async () => {
-  selectType();
-  fetchTree();
+  await Promise.all([selectType(), fetchTree()]);
 });
 </script>
 
@@ -438,21 +407,8 @@ onMounted(async () => {
               </div>
             </div>
           </q-form>
-          <!-- <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
-            <q-btn
-              flat
-              label="ตัวเลือกเพิ่มเติม"
-              icon-right="mdi-tune"
-              @click="onClickShowFilter"
-              dense
-              class="q-px-sm"
-            ></q-btn>
-          </div> -->
 
-          <div
-            v-if="isShowFilter"
-            class="row q-mt-sm q-gutter-sm justify-center"
-          >
+          <div class="row q-mt-sm q-gutter-sm justify-center">
             <q-btn-dropdown
               flat
               rounded
@@ -589,40 +545,6 @@ onMounted(async () => {
               label="แสดงตำแหน่งทั้งหมด"
               @update:model-value="fetchDataPerson"
             />
-
-            <!-- <q-btn-dropdown
-              v-if="empType === 'officer'"
-              flat
-              dense
-              rounded
-              label-color="white"
-              dropdown-icon="mdi-chevron-down"
-              :label="`เงื่อนไขอื่นๆ  ${conditionTotal}`"
-              class="q-px-sm"
-            >
-              <q-list>
-                <q-item clickable v-close-popup>
-                  <q-item-section>
-                    <q-toggle
-                      v-model="store.formFilter.isProbation"
-                      color="primary"
-                      label="ทดลองปฏิบัติหน้าที่ราชการ"
-                      @update:model-value="fetchDataPerson"
-                    />
-                  </q-item-section>
-                </q-item>
-                <q-item clickable v-close-popup>
-                  <q-item-section>
-                    <q-toggle
-                      v-model="store.formFilter.isShowRetire"
-                      color="primary"
-                      label="แสดงข้อมูลผู้พ้นจากราชการ"
-                      @update:model-value="fetchDataPerson"
-                    />
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown> -->
           </div>
 
           <div
@@ -655,16 +577,17 @@ onMounted(async () => {
     <q-separator />
 
     <q-card-section>
+      <!-- Components รายการข้อมูลทะเบียนประวัติ -->
       <TableView
         v-model:mode="mode"
+        v-model:form-filter="store.formFilter"
+        v-model:max-page="maxPage"
         :rows="dataPersonMain"
-        v-model:formFilter="store.formFilter"
-        v-model:maxPage="maxPage"
-        :fetchData="fetchDataPerson"
-        :fetchType="fetchType"
+        :fetch-data="fetchDataPerson"
+        :fetch-type="fetchType"
         :total="total"
-        :empType="empType"
         :is-filter="isShowBtnFilter"
+        :emp-type="empType"
       />
     </q-card-section>
   </q-card>
diff --git a/src/modules/04_registryPerson/views/requestEdit.vue b/src/modules/04_registryPerson/views/requestEditView.vue
similarity index 88%
rename from src/modules/04_registryPerson/views/requestEdit.vue
rename to src/modules/04_registryPerson/views/requestEditView.vue
index d08aa0e37..da8fba7e0 100644
--- a/src/modules/04_registryPerson/views/requestEdit.vue
+++ b/src/modules/04_registryPerson/views/requestEditView.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
-import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
 
 /**
  * importType
@@ -13,18 +16,13 @@ import type {
   DataOption,
   Pagination,
 } from "@/modules/04_registryPerson/interface/index/Main";
+import type { DateRequest } from "@/modules/04_registryPerson/interface/response/Main";
 
 /**
  * importComponents
  */
 import DialogStatus from "@/modules/04_registryPerson/components/requestEdit/DialogStatus.vue";
 
-/**
- * importStore
- */
-import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
-import { useCounterMixin } from "@/stores/mixin";
-
 /**
  * use
  */
@@ -36,12 +34,11 @@ const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 /**
  * Table
  */
-const rows = ref<any[]>([]);
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const rowsTotal = ref<number>(0);
-const maxPage = ref<number>(0);
-
+const rows = ref<DateRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
+const page = ref<number>(1); //หน้า
+const pageSize = ref<number>(10); //จำนวนต่อหน้า
+const rowsTotal = ref<number>(0); //จำนวนรายการ
+const maxPage = ref<number>(0); //จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "lastUpdatedAt",
@@ -114,7 +111,6 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
-
   "fullname",
   "topic",
   "detail",
@@ -126,11 +122,11 @@ const visibleColumns = ref<string[]>([
 /**
  * ตัวแปร
  */
-const status = ref<string>("PENDING");
-const keyword = ref<string>("");
-const statusOption = ref<DataOption[]>(store.optionStatus);
-const modalStatus = ref<boolean>(false);
-const requestId = ref<string>("");
+const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
+const keyword = ref<string>(""); //คำค้นหา
+const statusOption = ref<DataOption[]>(store.optionStatus); //รายการสถานะ
+const modalStatus = ref<boolean>(false); //แก้ไขสถานะคำร้อง
+const requestId = ref<string>(""); //id รายการแก้ไข
 
 /**
  * function fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
@@ -186,7 +182,7 @@ function filterOption(val: string, update: Function) {
   update(() => {
     status.value = val ? "" : status.value;
     statusOption.value = store.optionStatus.filter(
-      (v: any) => v.name.indexOf(val) > -1
+      (v: DataOption) => v.name.indexOf(val) > -1
     );
   });
 }
@@ -262,6 +258,11 @@ function downloadUrl(id: string, fileName: string) {
     });
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ pageSize
+ *
+ * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
+ */
 watch(
   () => pageSize.value,
   () => {
@@ -420,8 +421,8 @@ onMounted(() => {
 
   <DialogStatus
     v-model:modal="modalStatus"
-    :fetchData="fetchListRequset"
-    :requestId="requestId"
+    :fetch-data="fetchListRequset"
+    :request-id="requestId"
   />
 </template>