diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index 49a69dc12..659f9cf76 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -4,11 +4,27 @@ const registryNew = `${env.API_URI}/org/profile/`;
 
 export default {
   registryNew,
+  // เครื่องราชฯ
   profileNewInsign: `${registryNew}insignia`,
   profileNewInsignByProfileId: (profileId: string) =>
     `${registryNew}insignia/${profileId}`,
-  profileNewInsignByInsignId: (insignId: string) =>
-    `${registryNew}insignia/${insignId}`,
-  profileNewInsignHisByInsignId: (insignId: string) =>
-    `${registryNew}insignia/history/${insignId}`,
+  profileNewInsignById: (dataId: string) => `${registryNew}insignia/${dataId}`,
+  profileNewInsignHisById: (dataId: string) =>
+    `${registryNew}insignia/history/${dataId}`,
+
+  // ประกาศเกียรติคุณ
+  profileNewHonor: `${registryNew}honor`,
+  profileNewHonorByProfileId: (profileId: string) =>
+    `${registryNew}honor/${profileId}`,
+  profileNewHonorById: (dataId: string) => `${registryNew}honor/${dataId}`,
+  profileNewHonorHisById: (dataId: string) => `${registryNew}honor/${dataId}`,
+
+  // การฝึกอบรม
+  profileNewTraining: `${registryNew}training`,
+  profileNewTrainingByProfileId: (profileId: string) =>
+    `${registryNew}training/${profileId}`,
+  profileNewTrainingByTrainingId: (trainingId: string) =>
+    `${registryNew}training/${trainingId}`,
+  profileNewTrainingHisByTrainingId: (trainingId: string) =>
+    `${registryNew}training/history/${trainingId}`,
 };
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index 50635562c..8274f9163 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -251,6 +251,7 @@ async function deleteData(idData: string) {
     .delete(config.API.insigniaNewIdOrg(idData))
     .then(() => {
       fetchData(id.value);
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
index 216586c40..22e786f1e 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
@@ -163,6 +163,7 @@ async function deleteData(id: string) {
     .delete(config.API.insigniaTypeNewIdOrg(id))
     .then(() => {
       fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
index 2e982f834..422dbdce0 100644
--- a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
+++ b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
@@ -126,6 +126,7 @@ async function deleteData(id: string) {
     .delete(config.API.orgPrefixId(id))
     .then(() => {
       fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/01_metadataNew/components/personal/02ListRank.vue b/src/modules/01_metadataNew/components/personal/02ListRank.vue
index b2b1a0b7b..7c0d9c93b 100644
--- a/src/modules/01_metadataNew/components/personal/02ListRank.vue
+++ b/src/modules/01_metadataNew/components/personal/02ListRank.vue
@@ -130,6 +130,7 @@ async function deleteData(id: string) {
     .delete(config.API.orgRankId(id))
     .then(() => {
       fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue b/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
index a8a9eb0fc..132e27b7b 100644
--- a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
+++ b/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
@@ -130,6 +130,7 @@ async function deleteData(id: string) {
     .delete(config.API.orgBloodGroupId(id))
     .then(() => {
       fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/01_metadataNew/components/personal/04ListGender.vue b/src/modules/01_metadataNew/components/personal/04ListGender.vue
index c0c185118..0a7338575 100644
--- a/src/modules/01_metadataNew/components/personal/04ListGender.vue
+++ b/src/modules/01_metadataNew/components/personal/04ListGender.vue
@@ -130,6 +130,7 @@ async function deleteData(id: string) {
     .delete(config.API.orgGenderId(id))
     .then(() => {
       fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/01_metadataNew/components/personal/05ListReligion.vue b/src/modules/01_metadataNew/components/personal/05ListReligion.vue
index 483cde13f..fb9fda0cd 100644
--- a/src/modules/01_metadataNew/components/personal/05ListReligion.vue
+++ b/src/modules/01_metadataNew/components/personal/05ListReligion.vue
@@ -130,6 +130,7 @@ async function deleteData(id: string) {
     .delete(config.API.orgReligionId(id))
     .then(() => {
       fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
index 60c0f2cd2..694099997 100644
--- a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
+++ b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
@@ -158,6 +158,7 @@ async function deleteData(id: string) {
     .delete(config.API.orgRelationshipId(id))
     .then(() => {
       fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue b/src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue
index c2d2c382c..8016e7c20 100644
--- a/src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue
+++ b/src/modules/01_metadataNew/components/personal/07ListEducationLevel.vue
@@ -142,6 +142,7 @@ async function deleteData(id: string) {
     .delete(config.API.orgEducationLevelId(id))
     .then(() => {
       fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/01_metadataNew/components/position/02ListType.vue b/src/modules/01_metadataNew/components/position/02ListType.vue
index d9d6b6284..b0c0a9ab6 100644
--- a/src/modules/01_metadataNew/components/position/02ListType.vue
+++ b/src/modules/01_metadataNew/components/position/02ListType.vue
@@ -146,6 +146,7 @@ async function deleteData(id: string) {
     .delete(config.API.orgPosTypeId(id))
     .then(() => {
       fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/01_metadataNew/components/position/05ListLevelDetail.vue b/src/modules/01_metadataNew/components/position/05ListLevelDetail.vue
index 4980d5974..318976a30 100644
--- a/src/modules/01_metadataNew/components/position/05ListLevelDetail.vue
+++ b/src/modules/01_metadataNew/components/position/05ListLevelDetail.vue
@@ -203,6 +203,7 @@ async function deleteData(id: string) {
     .delete(config.API.orgPosLevelId(id))
     .then(() => {
       fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
index b0c09720d..2d71d5130 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -225,6 +225,7 @@ function closeHistoryDialog() {
     bordered
     :paging="true"
     dense
+    v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     class="custom-header-table"
     :visible-columns="visibleColumns"
diff --git a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
index 205f3339c..6e4bf1a93 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -1,16 +1,29 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onMounted } from "vue";
 import moment from "moment";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
 import { QForm, useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const mixin = useCounterMixin();
 const $q = useQuasar();
-const { dialogConfirm, date2Thai } = mixin;
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
 
-const addDataDialog = ref<boolean>(false);
+const route = useRoute();
+const id = ref<string>(route.params.id.toString());
+const dialog = ref<boolean>(false);
 const mode = ref<string>("table");
 const columns = ref<QTableProps["columns"]>([
   {
@@ -125,27 +138,10 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const isDate = ref<string>("false");
-const educationOption = ["ใช่", "ไม่ใช่"];
+const dialogStatus = ref<string>("create");
 const historyDialog = ref<boolean>(false);
-const educationData = reactive({
-  level: "",
-  institute: "",
-  startYear: new Date().getFullYear(),
-  finishYear: new Date().getFullYear(),
-  graduateDate: new Date(),
-  startDate: new Date(),
-  endDate: new Date(),
-  isEducation: "",
-  degree: "",
-  field: "",
-  fundName: "",
-  gpa: null,
-  country: "",
-  other: "",
-  duration: "",
-  durationYear: "",
-  note: "",
-});
+const editId = ref<string>("");
+
 const trainData = reactive({
   name: "",
   topic: "",
@@ -178,7 +174,7 @@ const row = [
     topic: "ชื่อหัวข้อ",
     yearly: "2567",
     place: "สถานที่",
-    duration: "2567",
+    duration: "3 ปี",
     department: "แผนกสาขา",
     numberOrder: "1244",
     dateOrder: new Date(),
@@ -247,17 +243,19 @@ const row = [
   },
 ];
 
+const rows = ref<any>([]);
+
 const visibleColumns = ref<string[]>([
-  "name",
-  "topic",
-  "yearly",
-  "place",
-  "duration",
-  "department",
-  "numberOrder",
-  "dateOrder",
-  "startDate",
-  "endDate",
+  "name", // ชื่อโครงงาน
+  "topic", // หัวข้อ
+  "yearly", // ปีที่อบรม
+  "place", // สถานที่
+  "duration", // รวมระยะวเลา
+  "department", // หน่วยงานที่รับผิดชอบ
+  "numberOrder", // เลขที่คำสั่ง
+  "dateOrder", // คำสั่งลงวันที่
+  "startDate", // วันเริ่มต้น
+  "endDate", // วันสิ้นสุด
 ]);
 
 function validateForm() {
@@ -268,6 +266,7 @@ async function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
+      dialogStatus.value === "create" ? addData() : editData(editId.value);
       closeDialog();
     },
     "ยืนยันการบันทึกข้อมูล",
@@ -275,8 +274,94 @@ async function onSubmit() {
   );
 }
 
+function clearForm() {
+  isDate.value = "false";
+  trainData.name = "";
+  trainData.topic = "";
+  trainData.yearly = new Date().getFullYear();
+  trainData.place = "";
+  trainData.duration = "";
+  trainData.department = "";
+  trainData.numberOrder = "";
+  trainData.dateOrder = new Date();
+  trainData.startDate = new Date();
+  trainData.endDate = new Date();
+}
+
+async function addData() {
+  await http
+    .post(config.API.profileNewTraining, {
+      profileId: id.value,
+      name: trainData.name,
+      topic: trainData.topic ? trainData.topic : "",
+      yearly: trainData.yearly,
+      place: trainData.place ? trainData.place : "",
+      duration: trainData.duration ? trainData.duration : "",
+      department: trainData.department ? trainData.department : "",
+      numberOrder: trainData.numberOrder ? trainData.numberOrder : "",
+      dateOrder: trainData.dateOrder,
+      startDate: trainData.startDate,
+      endDate: trainData.endDate,
+      isDate: isDate.value === "true" ? true : false,
+      isActive: true,
+    })
+    .then(() => {
+      fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(idData: string) {
+  await http
+    .patch(config.API.profileNewTrainingByTrainingId(idData), {
+      profileId: id.value,
+      name: trainData.name,
+      topic: trainData.topic ? trainData.topic : "",
+      yearly: trainData.yearly,
+      place: trainData.place ? trainData.place : "",
+      duration: trainData.duration ? trainData.duration : "",
+      department: trainData.department ? trainData.department : "",
+      numberOrder: trainData.numberOrder ? trainData.numberOrder : "",
+      dateOrder: trainData.dateOrder,
+      startDate: trainData.startDate,
+      endDate: trainData.endDate,
+      isDate: isDate.value === "true" ? true : false,
+      isActive: true,
+    })
+    .then(() => {
+      fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function deleteData(idData: string) {
+  await http
+    .delete(config.API.profileNewTrainingByTrainingId(idData))
+    .then(() => {
+      fetchData(id.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 function closeDialog() {
-  addDataDialog.value = false;
+  clearForm();
+  dialog.value = false;
 }
 function closeHistoryDialog() {
   historyDialog.value = false;
@@ -285,17 +370,83 @@ function closeHistoryDialog() {
 watch(
   () => isDate.value,
   () => {
-    if (isDate.value === "true") {
-      trainData.startDate = new Date(`${trainData.startYear}`);
-      trainData.endDate = new Date(`${trainData.finishYear}`);
+    if (isDate.value === "false") {
+      console.log(trainData.startDate);
+      trainData.startYear = +trainData.startDate.toString().slice(11, 15);
+      trainData.finishYear = +trainData.endDate.toString().slice(11, 15);
+      trainData.startDate = new Date(trainData.startYear + "-01-01");
+      trainData.endDate = new Date(trainData.finishYear + "-01-01");
     } else {
-      trainData.startYear = parseInt(
-        moment(trainData.startDate).format("YYYY")
-      );
-      trainData.finishYear = parseInt(moment(trainData.endDate).format("YYYY"));
+      trainData.startDate = new Date(trainData.startYear + "-01-01");
+      trainData.endDate = new Date(trainData.finishYear + "-01-01");
     }
   }
 );
+
+watch(
+  () => trainData.startYear,
+  () => {
+    if (isDate.value === "false") {
+      trainData.startDate = new Date(trainData.startYear + "-01-01");
+    }
+  }
+);
+watch(
+  () => trainData.finishYear,
+  () => {
+    if (isDate.value === "false") {
+      trainData.endDate = new Date(trainData.finishYear + "-01-01");
+    }
+  }
+);
+
+watch(
+  () => trainData.startDate,
+  () => {
+    if (isDate.value === "true") {
+      trainData.startYear = +trainData.startDate.toString().slice(11, 15);
+    }
+  }
+);
+watch(
+  () => trainData.endDate,
+  () => {
+    if (isDate.value === "true") {
+      trainData.finishYear = +trainData.endDate.toString().slice(11, 15);
+    }
+  }
+);
+// async function isDateCheck() {
+//   if (isDate.value === "false") {
+//     trainData.startYear = +trainData.startDate.toString().slice(11, 15);
+//     trainData.finishYear = +trainData.endDate.toString().slice(11, 15);
+//     trainData.startDate = new Date(trainData.startYear + "-01-01");
+//     trainData.endDate = new Date(trainData.finishYear + "-01-01");
+//   } else {
+//     trainData.startDate = new Date(trainData.startYear + "-01-01");
+//     trainData.endDate = new Date(trainData.finishYear + "-01-01");
+//   }
+// }
+
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewTrainingByProfileId(id))
+    .then(async (res) => {
+      rows.value = res.data.result;
+      console.log(rows.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchData(id.value);
+});
 </script>
 
 <template>
@@ -306,7 +457,13 @@ watch(
       color="primary"
       icon="add"
       size="16px"
-      @click="addDataDialog = true"
+      @click="
+        () => {
+          dialogStatus = 'create';
+          clearForm;
+          dialog = true;
+        }
+      "
     >
       <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
@@ -376,13 +533,14 @@ watch(
     :grid="mode === 'card'"
     ref="table"
     :columns="columns"
-    :rows="row"
+    :rows="rows"
     row-key="name"
     flat
     bordered
     :paging="true"
     dense
     :rows-per-page-options="[20, 50, 100]"
+    v-model:pagination="pagination"
     class="custom-header-table"
     :visible-columns="visibleColumns"
   >
@@ -399,19 +557,39 @@ watch(
         <q-td
           v-for="col in props.cols"
           :key="col.id"
-          @click="addDataDialog = true"
+          @click="
+            () => {
+              dialogStatus = 'edit';
+              editId = props.row.id;
+              isDate = props.row.isDate ? 'true' : 'false';
+              trainData.name = props.row.name;
+              trainData.topic = props.row.topic;
+              trainData.yearly = props.row.yearly;
+              trainData.place = props.row.place;
+              trainData.duration = props.row.duration;
+              trainData.department = props.row.department;
+              trainData.numberOrder = props.row.numberOrder;
+              trainData.dateOrder = props.row.dateOrder;
+              trainData.startDate = props.row.startDate;
+              trainData.endDate = props.row.endDate;
+              trainData.startYear = +props.row.startDate.slice(0, 4);
+              trainData.finishYear = +props.row.endDate.slice(0, 4);
+              dialog = true;
+            }
+          "
         >
-          <div
-            v-if="
-              col.name === 'startDate' ||
-              col.name === 'endDate' ||
-              col.name === 'dateOrder'
-            "
-          >
-            {{ col.value ? date2Thai(col.value) : "-" }}
+          <div v-if="col.name === 'startDate' || col.name === 'endDate'">
+            <div v-if="props.row.isDate">{{ date2Thai(col.value) }}</div>
+            <div v-else>
+              {{ +col.value.slice(0, 4) + 543 }}
+            </div>
           </div>
+          <div v-else-if="col.name === 'dateOrder'">
+            {{ date2Thai(col.value) }}
+          </div>
+          <div v-else-if="col.name === 'yearly'">{{ col.value + 543 }}</div>
           <div v-else>
-            {{ col.value }}
+            {{ col.value ? col.value : "-" }}
           </div>
         </q-td>
         <q-td auto-width>
@@ -426,6 +604,21 @@ watch(
           >
             <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
           </q-btn>
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="12px"
+            icon="mdi-delete"
+            clickable
+            @click.stop="
+              dialogRemove($q, async () => await deleteData(props.row.id))
+            "
+            v-close-popup
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
       </q-tr>
     </template>
@@ -440,7 +633,7 @@ watch(
               round
               color="primary"
               icon="edit"
-              @click="addDataDialog = true"
+              @click="dialog = true"
             >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
@@ -466,16 +659,7 @@ watch(
                   <div>{{ col.label }}</div>
                 </div>
                 <div class="col">
-                  <div
-                    v-if="
-                      col.name === 'startDate' ||
-                      col.name === 'endDate' ||
-                      col.name === 'dateOrder'
-                    "
-                  >
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </div>
-                  <div v-else>{{ col.value }}</div>
+                  <div>{{ col.value }}</div>
                 </div>
               </div>
             </div>
@@ -485,11 +669,14 @@ watch(
     </template>
   </d-table>
 
-  <q-dialog v-model="addDataDialog" class="dialog" persistent>
+  <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="min-width: 40%" class="bg-white">
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
         </q-card-section>
         <q-separator color="grey-4" />
         <div class="col">
@@ -568,7 +755,7 @@ watch(
                           !!val ||
                           `${'กรุณาเลือกปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`,
                       ]"
-                      :label="`${'ปี ที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
+                      :label="`${'ปีที่เริ่มต้นการฝึกอบรม/ดูงาน'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -607,7 +794,7 @@ watch(
                         (val) =>
                           !!val || `${'กรุณาเลือกปีที่จบการฝึกอบรม/ดูงาน'}`,
                       ]"
-                      :label="`${'ปี ที่จบการฝึกอบรม/ดูงาน'}`"
+                      :label="`${'ปีที่จบการฝึกอบรม/ดูงาน'}`"
                     >
                       <template v-slot:prepend>
                         <q-icon
@@ -769,7 +956,6 @@ watch(
                 label="หน่วยงานที่รับผิดชอบจัดการฝึกอบรม/ดูงาน"
                 bg-color="white"
                 dense
-                mask="#.##"
               />
             </div>
           </q-card-section>
@@ -902,16 +1088,7 @@ watch(
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.id">
-                  <div
-                    v-if="
-                      col.name === 'startDate' ||
-                      col.name === 'endDate' ||
-                      col.name === 'dateOrder'
-                    "
-                  >
-                    {{ col.value ? date2Thai(col.value) : "-" }}
-                  </div>
-                  <div v-else>
+                  <div>
                     {{ col.value }}
                   </div>
                 </q-td>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
index 0f47b3505..26e68abab 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -1,28 +1,28 @@
 <script setup lang="ts">
-import { onMounted, ref, watch, useAttrs } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
+import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-import type { QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import type { QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import HistoryTable from "@/components/TableHistory.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
-import type {
-  RequestItemsObject,
-  Columns,
-  DataProps,
-} from "@/modules/04_registryNew/interface/request/Insignia";
-
 import type {
   DataOption,
   DataOptionInsignia,
   InsigniaOps,
   Pagination,
 } from "@/modules/04_registryNew/interface/index/Main";
+import type {
+  RequestItemsObject,
+  Columns,
+  DataProps,
+} from "@/modules/04_registryNew/interface/request/Insignia";
 
 const $q = useQuasar();
-const attrs = ref<any>(useAttrs());
+const route = useRoute();
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -34,27 +34,51 @@ const {
   showLoader,
   hideLoader,
 } = mixin;
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 
-const year = ref<number | null>(0);
-const receiveDate = ref<Date | string | null>();
-const insigniaId = ref<string>("");
-const insigniaType = ref<string>();
-const no = ref<string>();
-const issue = ref<string>();
-const volumeNo = ref<string>();
-const volume = ref<string>();
-const section = ref<string>();
-const page = ref<string>();
-const dateAnnounce = ref<Date | null | string>(null);
-const refCommandNo = ref<string>();
-const refCommandDate = ref<Date | null | string>();
-const note = ref<string>();
+const insigniaData = reactive<{
+  id: string;
+  isActive: boolean;
+  year: number | null;
+  receiveDate: Date | string | null;
+  insigniaId: string;
+  insigniaType: string;
+  no: string;
+  issue: string;
+  volumeNo: string;
+  volume: string;
+  section: string;
+  page: string;
+  dateAnnounce: Date | null | string;
+  refCommandNo: string;
+  refCommandDate: Date | null | string;
+  note: string;
+}>({
+  id: "",
+  isActive: true,
+  year: 0,
+  receiveDate: null,
+  insigniaId: "",
+  insigniaType: "",
+  no: "",
+  issue: "",
+  volumeNo: "",
+  volume: "",
+  section: "",
+  page: "",
+  dateAnnounce: null,
+  refCommandNo: "",
+  refCommandDate: null,
+  note: "",
+});
 
 const editRow = ref<boolean>(false);
 const myForm = ref<any>();
-const edit = ref<boolean>(false);
+const isEdit = ref<boolean>(false);
 const modal = ref<boolean>(false);
-const modelView = ref<string>("table");
+const modeView = ref<string>("table");
 const filterSearch = ref("");
 const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
@@ -68,90 +92,7 @@ const OpsFilter = ref<InsigniaOps>({
   insigniaOptions: [],
 });
 
-// mock data
-const rows = ref<any>([
-  {
-    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
-    insignia: "จัตุรถาภรณ์ช้างเผือก",
-    insigniaId: "08db721b-c7f9-40c5-85f7-7c2c6d0eceb9",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    year: 2025,
-    no: "1",
-    issue: "1",
-    volumeNo: "1",
-    volume: null,
-    section: "1",
-    page: "1",
-    receiveDate: new Date("2023-10-10T00:00:00"),
-    dateAnnounce: new Date("2023-10-10T00:00:00"),
-    refCommandNo: "1",
-    refCommandDate: null,
-    createdFullName: "System Administrator",
-    createdAt: new Date("2023-10-10T13:38:18.177967"),
-    note: "1234dd",
-  },
-  {
-    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
-    insignia: "จัตุรถาภรณ์ช้างเผือก",
-    insigniaId: "91a7322d-29f7-4d14-8aab-d98db9251ddc",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    year: 2024,
-    no: "",
-    issue: "",
-    volumeNo: "",
-    volume: "",
-    section: "",
-    page: "",
-    receiveDate: new Date("2024-02-07T00:00:00"),
-    dateAnnounce: null,
-    refCommandNo: null,
-    refCommandDate: null,
-    createdFullName: "User Key1",
-    createdAt: new Date("2024-02-07T18:14:50.918701"),
-    note: null,
-  },
-  {
-    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
-    insignia: "จัตุรถาภรณ์มงกุฎไทย",
-    insigniaId: "91a7322d-29f7-4d14-8aab-d98db9251ddc",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    year: 2016,
-    no: "",
-    issue: "",
-    volumeNo: "",
-    volume: "",
-    section: "",
-    page: "",
-    receiveDate: new Date("2016-05-02T00:00:00"),
-    dateAnnounce: null,
-    refCommandNo: null,
-    refCommandDate: null,
-    createdFullName: "สาวิตรี ศรีสมัย",
-    createdAt: new Date("2024-02-13T18:06:44.941056"),
-    note: null,
-  },
-  {
-    id: "08dbc95b-7d2d-4a33-8c2c-426845b1d14e",
-    insignia: "ตริตาภรณ์ช้างเผือก",
-    insigniaId: "08db721b-c7fd-4ec7-886a-f883ae333a8d",
-    insigniaType: "ชั้นต่ำกว่าสายสะพาย",
-    year: 2018,
-    no: "",
-    issue: "",
-    volumeNo: "",
-    volume: "",
-    section: "",
-    page: "",
-    receiveDate: new Date("2024-02-13T00:00:00"),
-    dateAnnounce: null,
-    refCommandNo: "",
-    refCommandDate: null,
-    createdFullName: "สาวิตรี ศรีสมัย",
-    createdAt: new Date("2024-02-13T18:08:49.301201"),
-    note: "a",
-  },
-]);
-
+const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -161,8 +102,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "receiveDate",
@@ -180,7 +119,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ชื่อเครื่องราชฯ",
     sortable: true,
-    field: "insignia",
+    field: "insigniaId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -308,7 +247,6 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "year",
@@ -476,7 +414,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const visibleColumns = ref<String[]>([
   "insignia",
   "insigniaType",
@@ -494,7 +431,6 @@ const visibleColumns = ref<String[]>([
   "note",
   "createdAt",
 ]);
-
 const visibleColumnsHistory = ref<String[]>([
   "insignia",
   "insigniaType",
@@ -513,19 +449,236 @@ const visibleColumnsHistory = ref<String[]>([
   "createdAt",
 ]);
 
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
 });
 
-const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
+const pagination = ref({
+  page: formFilter.page,
+  rowsPerPage: formFilter.pageSize,
+});
 
-function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
-  modal.value = true;
+async function fetchData() {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .get(config.API.profileNewInsignByProfileId(profileId.value))
+      .then((res) => {
+        let data = res.data.result;
+        rows.value = [];
+        data.map((e: any) => {
+          rows.value.push({
+            id: e.id,
+            insigniaId: e.insigniaId,
+            insigniaType: e.insigniaType,
+            year: e.year,
+            no: e.no,
+            issue: e.issue,
+            volumeNo: e.volumeNo,
+            volume: e.volume,
+            section: e.section,
+            page: e.page,
+            receiveDate: e.receiveDate,
+            dateAnnounce: e.dateAnnounce,
+            refCommandNo: e.refCommandNo,
+            refCommandDate: e.refCommandDate,
+            createdFullName: e.createdFullName,
+            createdAt: e.createdAt,
+            note: e.note,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+        // store.isLoad++;
+      });
+  }
 }
 
-const clickClose = async () => {
+async function fetchInsignia() {
+  showLoader();
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOptionInsignia[] = [];
+      data.map((r: any) => {
+        option.push({
+          id: r.id.toString(),
+          name: r.name.toString() + ` (${r.shortName})`,
+          typeName:
+            r.insigniaType == null ? null : r.insigniaType.name.toString(),
+        });
+      });
+      Ops.value.insigniaOptions = option;
+      OpsFilter.value.insigniaOptions = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      // store.isLoad++;
+    });
+}
+
+async function saveData() {
+  if (profileId.value) {
+    showLoader();
+    await http
+      .post(config.API.profileNewInsign, {
+        profileId: profileId.value,
+        isActive: insigniaData.isActive,
+        year: insigniaData.year,
+        no: insigniaData.no,
+        volume: insigniaData.volume,
+        section: insigniaData.section,
+        page: insigniaData.page,
+        receiveDate: dateToISO(insigniaData.receiveDate as Date),
+        insigniaId: insigniaData.insigniaId,
+        insigniaType: insigniaData.insigniaType,
+        dateAnnounce: insigniaData.dateAnnounce
+          ? dateToISO(insigniaData.dateAnnounce as Date)
+          : null,
+        issue: insigniaData.issue,
+        volumeNo: insigniaData.volumeNo,
+        refCommandDate:
+          insigniaData.refCommandDate == null
+            ? null
+            : dateToISO(insigniaData.refCommandDate as Date),
+        refCommandNo: insigniaData.refCommandNo,
+        // note: note.value,
+      })
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+      });
+  }
+}
+
+async function editData() {
+  showLoader();
+  await http
+    .patch(config.API.profileNewInsignById(insigniaData.id), {
+      profileId: profileId.value,
+      isActive: insigniaData.isActive,
+      year: insigniaData.year,
+      no: insigniaData.no,
+      volume: insigniaData.volume,
+      section: insigniaData.section,
+      page: insigniaData.page,
+      receiveDate: dateToISO(insigniaData.receiveDate as Date),
+      insigniaId: insigniaData.insigniaId,
+      insigniaType: insigniaData.insigniaType,
+      dateAnnounce: insigniaData.dateAnnounce
+        ? dateToISO(insigniaData.dateAnnounce as Date)
+        : null,
+      issue: insigniaData.issue,
+      volumeNo: insigniaData.volumeNo,
+      refCommandDate:
+        insigniaData.refCommandDate == null
+          ? null
+          : dateToISO(insigniaData.refCommandDate as Date),
+      refCommandNo: insigniaData.refCommandNo,
+      // note: note.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+}
+
+async function clickDelete(dataId: string) {
+  $q.dialog({
+    title: `ลบข้อมูล`,
+    message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`,
+    cancel: "ยกเลิก",
+    ok: "ยืนยัน",
+    persistent: true,
+  })
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.profileNewInsignById(dataId))
+        .then((res) => {
+          success($q, "ลบข้อมูลสำเร็จ");
+          modal.value = false;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    })
+    .onCancel(async () => {
+      await fetchData();
+    });
+}
+
+function onClickOpenDialog(editStatus: boolean = false, props?: any) {
+  modal.value = true;
+  editRow.value = false;
+
+  if (editStatus && props) {
+    isEdit.value = editStatus;
+
+    insigniaData.id = props.row.id;
+    insigniaData.year = props.row.year == 0 ? 0 : props.row.year;
+    insigniaData.receiveDate = props.row.receiveDate;
+    insigniaData.insigniaId = props.row.insigniaId;
+    insigniaData.insigniaType = props.row.insigniaType;
+    insigniaData.no = props.row.no;
+    insigniaData.issue = props.row.issue;
+    insigniaData.volumeNo = props.row.volumeNo;
+    insigniaData.volume = props.row.volume;
+    insigniaData.section = props.row.section;
+    insigniaData.page = props.row.page;
+    insigniaData.dateAnnounce =
+      props.row.dateAnnounce == "-" ? "" : props.row.dateAnnounce;
+    insigniaData.refCommandNo = props.row.refCommandNo;
+    insigniaData.refCommandDate =
+      props.row.refCommandDate == "-" ? null : props.row.refCommandDate;
+    insigniaData.note = props.note;
+  } else {
+    isEdit.value = editStatus;
+
+    insigniaData.id = "";
+    insigniaData.year = 0;
+    insigniaData.receiveDate = "";
+    insigniaData.insigniaId = "";
+    insigniaData.insigniaType = "";
+    insigniaData.no = "";
+    insigniaData.issue = "";
+    insigniaData.volumeNo = "";
+    insigniaData.volume = "";
+    insigniaData.section = "";
+    insigniaData.page = "";
+    insigniaData.dateAnnounce = null;
+    insigniaData.refCommandNo = "";
+    insigniaData.refCommandDate = null;
+    insigniaData.note = "";
+  }
+}
+
+async function clickClose() {
   if (editRow.value == true) {
     $q.dialog({
       title: `ข้อมูลมีการแก้ไข`,
@@ -535,6 +688,7 @@ const clickClose = async () => {
       persistent: true,
     }).onOk(async () => {
       modal.value = false;
+      editRow.value = false;
       // next.value = false;
       // previous.value = false;
     });
@@ -543,33 +697,6 @@ const clickClose = async () => {
     // next.value = false;
     // previous.value = false;
   }
-};
-
-function onSubmit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // await saveData();
-      modal.value = false;
-    }
-  });
-}
-
-function selectData(props: any) {
-  modal.value = true;
-}
-
-function filterSelector(val: any, update: Function, refData: string) {
-  switch (refData) {
-    case "insigniaOptions":
-      update(() => {
-        Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
-          (v: DataOption) => v.name.indexOf(val) > -1
-        );
-      });
-      break;
-    default:
-      break;
-  }
 }
 
 async function clickHistory(row: RequestItemsObject) {
@@ -611,45 +738,44 @@ async function clickHistory(row: RequestItemsObject) {
   //   });
 }
 
-async function fetchInsignia() {
-  showLoader();
-  await http
-    .get(config.API.insignia)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOptionInsignia[] = [];
-      data.map((r: any) => {
-        option.push({
-          id: r.id.toString(),
-          name: r.name.toString() + ` (${r.shortName})`,
-          typeName:
-            r.insigniaType == null ? null : r.insigniaType.name.toString(),
-        });
-      });
-      Ops.value.insigniaOptions = option;
-      OpsFilter.value.insigniaOptions = option;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-      // store.isLoad++;
-    });
+function onSubmit() {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      isEdit.value ? await editData() : await saveData();
+      modal.value = false;
+    }
+  });
 }
 
-watch(insigniaId, (count: string, prevCount: string) => {
-  const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
-    (r: DataOptionInsignia) => r.id == insigniaId.value
-  );
-  if (insigniaTypeFilter[0] != null) {
-    insigniaType.value = insigniaTypeFilter[0].typeName;
+function filterSelector(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "insigniaOptions":
+      update(() => {
+        Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
   }
-});
+}
+
+watch(
+  () => insigniaData.insigniaId,
+  (count: string, prevCount: string) => {
+    const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
+      (r: DataOptionInsignia) => r.id === insigniaData.insigniaId
+    );
+    if (insigniaTypeFilter.length > 0) {
+      insigniaData.insigniaType = insigniaTypeFilter[0].typeName;
+    }
+  }
+);
 
 onMounted(async () => {
   await fetchInsignia();
-  // await fetchData();
+  await fetchData();
 });
 </script>
 
@@ -672,7 +798,7 @@ onMounted(async () => {
     </q-input>
 
     <q-select
-      v-if="modelView === 'table'"
+      v-if="modeView === 'table'"
       dense
       multiple
       outlined
@@ -690,7 +816,7 @@ onMounted(async () => {
 
     <q-btn-toggle
       dense
-      v-model="modelView"
+      v-model="modeView"
       toggle-color="grey-4"
       class="no-shadow toggle-borderd"
       :options="[
@@ -703,7 +829,7 @@ onMounted(async () => {
           name="format_list_bulleted"
           size="24px"
           :style="{
-            color: modelView === 'table' ? '#787B7C' : '#C9D3DB',
+            color: modeView === 'table' ? '#787B7C' : '#C9D3DB',
           }"
         />
       </template>
@@ -712,7 +838,7 @@ onMounted(async () => {
           name="mdi-view-grid-outline"
           size="24px"
           :style="{
-            color: modelView === 'card' ? '#787B7C' : '#C9D3DB',
+            color: modeView === 'card' ? '#787B7C' : '#C9D3DB',
           }"
         />
       </template>
@@ -723,16 +849,14 @@ onMounted(async () => {
     flat
     dense
     bordered
-    virtual-scroll
     ref="table"
-    v-bind="attrs"
+    class="custom-header-table"
     :rows="rows"
+    :paging="true"
     :columns="columns"
     :filter="filterSearch"
-    :grid="modelView === 'card'"
-    :pagination="initialPagination"
+    :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
-    :pagination-label="paginationLabel"
     :rows-per-page-options="[20, 50, 100]"
   >
     <template v-slot:header="props">
@@ -744,14 +868,14 @@ onMounted(async () => {
       </q-tr>
     </template>
 
-    <template v-slot:body="props" v-if="modelView === 'table'">
+    <template v-slot:body="props" v-if="modeView === 'table'">
       <q-tr :props="props" class="cursor-pointer">
         <q-td
           v-for="col in props.cols"
           class="cursor-pointer"
           :key="col.name"
           :props="props"
-          @click="selectData(props)"
+          @click="onClickOpenDialog(true, props)"
         >
           <div
             v-if="
@@ -766,6 +890,14 @@ onMounted(async () => {
           <div v-else-if="col.name == 'year'" class="table_ellipsis">
             {{ col.value + 543 }}
           </div>
+          <div v-else-if="col.name == 'insignia'" class="table_ellipsis">
+            {{
+              col.value
+                ? (Ops.insigniaOptions.find((r) => r.id === col.value) || {})
+                    .name
+                : "-"
+            }}
+          </div>
           <div v-else class="table_ellipsis">
             {{ col.value ? col.value : "-" }}
           </div>
@@ -782,6 +914,17 @@ onMounted(async () => {
           >
             <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
           </q-btn>
+          <q-btn
+            flat
+            dense
+            round
+            size="14px"
+            color="red"
+            icon="mdi-delete"
+            @click="clickDelete(props.row.id)"
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
       </q-tr>
     </template>
@@ -797,7 +940,7 @@ onMounted(async () => {
               round
               color="primary"
               icon="mdi-pencil-outline"
-              @click.stop.prevent="onClickOpenDialog()"
+              @click="onClickOpenDialog(true, props)"
             >
               <q-tooltip>แก่ไขข้อมุล</q-tooltip>
             </q-btn>
@@ -806,7 +949,7 @@ onMounted(async () => {
               round
               color="info"
               icon="mdi-history"
-              @click.stop.prevent="clickHistory(props.row)"
+              @click="clickHistory(props.row)"
             >
               <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
             </q-btn>
@@ -837,6 +980,19 @@ onMounted(async () => {
                 <q-item-label v-else-if="col.name == 'year'">
                   {{ col.value + 543 }}
                 </q-item-label>
+                <q-item-label
+                  v-else-if="col.name == 'insignia'"
+                  class="table_ellipsis"
+                >
+                  {{
+                    col.value
+                      ? (
+                          Ops.insigniaOptions.find((r) => r.id === col.value) ||
+                          {}
+                        ).name
+                      : "-"
+                  }}
+                </q-item-label>
                 <q-item-label v-else>
                   {{ col.value ? col.value : "-" }}
                 </q-item-label>
@@ -859,7 +1015,7 @@ onMounted(async () => {
               <datepicker
                 autoApply
                 year-picker
-                v-model="year"
+                v-model="insigniaData.year"
                 week-start="0"
                 menu-class-name="modalfix"
                 :locale="'th'"
@@ -875,7 +1031,8 @@ onMounted(async () => {
                     outlined
                     lazy-rules
                     hide-bottom-space
-                    :model-value="year !== 0 ? (year as number) + 543:null"
+                    class="inputgreen"
+                    :model-value="insigniaData.year !== 0 ? (insigniaData.year as number) + 543 : null"
                     :rules="[
                       (val:string) =>
                         !!val ||
@@ -901,7 +1058,7 @@ onMounted(async () => {
                 borderless
                 week-start="0"
                 menu-class-name="modalfix"
-                v-model="receiveDate"
+                v-model="insigniaData.receiveDate"
                 :locale="'th'"
                 :enableTimePicker="false"
               >
@@ -915,18 +1072,17 @@ onMounted(async () => {
                   <q-input
                     dense
                     outlined
+                    hide-bottom-space
+                    class="inputgreen"
                     for="inputDatereceive"
                     ref="dateReceivedRef"
-                    hide-bottom-space
                     :model-value="
-                      receiveDate != null
-                        ? date2Thai(receiveDate as Date)
+                      insigniaData.receiveDate != null
+                        ? date2Thai(insigniaData.receiveDate as Date)
                         : null
                     "
                     :label="`${'วันที่ได้รับ'}`"
-                    :rules="[
-                      (val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`,
-                    ]"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
                     @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
@@ -952,7 +1108,8 @@ onMounted(async () => {
                 option-value="id"
                 input-debounce="0"
                 option-label="name"
-                v-model="insigniaId"
+                v-model="insigniaData.insigniaId"
+                class="inputgreen"
                 :label="`${'ชื่อเครื่องราชฯ'}`"
                 :options="Ops.insigniaOptions"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
@@ -969,7 +1126,7 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="insigniaType"
+                v-model="insigniaData.insigniaType"
                 :label="`${'ลำดับชั้น'}`"
                 @update:modelValue="() => (editRow = true)"
               />
@@ -980,7 +1137,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="no"
+                v-model="insigniaData.no"
+                class="inputgreen"
                 :label="`${'ลำดับที่'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -992,7 +1150,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="issue"
+                v-model="insigniaData.issue"
+                class="inputgreen"
                 :label="`${'ราชกิจจาฯ ฉบับที่'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -1004,7 +1163,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="volumeNo"
+                v-model="insigniaData.volumeNo"
+                class="inputgreen"
                 :label="`${'เล่มที่'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -1016,7 +1176,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="volume"
+                v-model="insigniaData.volume"
+                class="inputgreen"
                 :label="`${'เล่ม'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -1027,8 +1188,9 @@ onMounted(async () => {
                 dense
                 outlined
                 lazy-rules
-                v-model="section"
                 hide-bottom-space
+                v-model="insigniaData.section"
+                class="inputgreen"
                 :label="`${'ตอน'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -1039,8 +1201,9 @@ onMounted(async () => {
                 dense
                 lazy-rules
                 outlined
-                v-model="page"
                 hide-bottom-space
+                v-model="insigniaData.page"
+                class="inputgreen"
                 :label="`${'หน้า'}`"
                 :rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
                 @update:modelValue="() => (editRow = true)"
@@ -1050,7 +1213,7 @@ onMounted(async () => {
               <datepicker
                 autoApply
                 week-start="0"
-                v-model="dateAnnounce"
+                v-model="insigniaData.dateAnnounce"
                 menu-class-name="modalfix"
                 :locale="'th'"
                 :enableTimePicker="false"
@@ -1065,7 +1228,8 @@ onMounted(async () => {
                     outlined
                     lazy-rules
                     hide-bottom-space
-                    :model-value="date2Thai(dateAnnounce as Date)"
+                    class="inputgreen"
+                    :model-value="date2Thai(insigniaData.dateAnnounce as Date)"
                     :label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
                     :rules="[
                       (val:string) =>
@@ -1080,13 +1244,6 @@ onMounted(async () => {
                         color="primary"
                       />
                     </template>
-                    <template v-if="dateAnnounce && edit" v-slot:append>
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="dateAnnounce = null"
-                        class="cursor-pointer"
-                      />
-                    </template>
                   </q-input>
                 </template>
               </datepicker>
@@ -1097,7 +1254,8 @@ onMounted(async () => {
                 outlined
                 lazy-rules
                 hide-bottom-space
-                v-model="refCommandNo"
+                v-model="insigniaData.refCommandNo"
+                class="inputgreen"
                 :label="`${'เลขที่คำสั่ง'}`"
                 @update:modelValue="() => (editRow = true)"
               >
@@ -1110,7 +1268,7 @@ onMounted(async () => {
               <datepicker
                 autoApply
                 week-start="0"
-                v-model="refCommandDate"
+                v-model="insigniaData.refCommandDate"
                 menu-class-name="modalfix"
                 :locale="'th'"
                 :enableTimePicker="false"
@@ -1126,12 +1284,12 @@ onMounted(async () => {
                     clearable
                     lazy-rules
                     hide-bottom-space
-                    :borderless="!edit"
+                    class="inputgreen"
                     :label="`${'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'}`"
                     :model-value="
-                      date2Thai(refCommandDate as Date)
+                      date2Thai(insigniaData.refCommandDate as Date)
                     "
-                    @clear="refCommandDate = ''"
+                    @clear="insigniaData.refCommandDate = ''"
                     @update:modelValue="() => (editRow = true)"
                   >
                     <template v-slot:prepend>
@@ -1150,7 +1308,8 @@ onMounted(async () => {
                 dense
                 outlined
                 hide-bottom-space
-                v-model="note"
+                v-model="insigniaData.note"
+                class="inputgreen"
                 label="หมายเหตุ"
                 @update:modelValue="() => (editRow = true)"
               />
diff --git a/src/modules/13_salary/components/SalaryLists/TabMain.vue b/src/modules/13_salary/components/SalaryLists/TabMain.vue
index 0f75e475e..83cf99173 100644
--- a/src/modules/13_salary/components/SalaryLists/TabMain.vue
+++ b/src/modules/13_salary/components/SalaryLists/TabMain.vue
@@ -6,7 +6,6 @@ import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
 import DialogInfoCriteria from "@/modules/13_salary/components/SalaryLists/DialogInfoCriteria.vue";
 
-
 /** importType*/
 import type { DataOption } from "@/modules/13_salary/interface/index/Main";
 import type { DataFilter } from "@/modules/13_salary/interface/index/SalaryList";
@@ -209,7 +208,7 @@ function fetchDataQuota(id: string) {
       itemsCard.value[0].total = data.total;
       itemsCard.value[1].total = data.fifteenPercent;
       itemsCard.value[2].total = data.chosen;
-      itemsCard.value[3].total = data.remaining;      
+      itemsCard.value[3].total = data.remaining;
       itemsCard.value[4].total = data.totalBackup;
 
       itemsCard.value[5].total = data.currentAmount;
@@ -218,7 +217,7 @@ function fetchDataQuota(id: string) {
       itemsCard.value[8].total = data.sixPercentSpentAmount;
       itemsCard.value[9].total = data.useAmount;
       itemsCard.value[10].total = data.remainingAmount;
-      
+
       itemsCard.value[11].total = data.totalBackup;
     })
     .catch((err) => {
@@ -323,7 +322,72 @@ onMounted(async () => {
       :key="index"
       @click="changeTabGroup"
     >
-      <q-tab :name="item.name" :label="item.lable" />
+      <q-tab :name="item.name" :label="item.lable">
+        <q-tooltip>
+          <q-list dense v-if="item.name === 'group1'">
+            <q-item>
+              <q-item-section>
+                <q-item-label lines="1">
+                  <span class="text-bold">ทั่วไป: </span>
+                  <span> ปฏิบัติงาน,ชำนาญงาน,อาวุโส</span></q-item-label
+                >
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item-label lines="1">
+                  <span class="text-bold">วิชาการ: </span>
+                  <span> ปฏิบัติการ,ชำนาญการ,ชำนาญการพิเศษ</span></q-item-label
+                >
+              </q-item-section>
+            </q-item>
+
+            <q-item>
+              <q-item-section>
+                <q-item-label lines="1">
+                  <span class="text-bold">อำนวยการ: </span>
+                  <span> ต้น</span></q-item-label
+                >
+              </q-item-section>
+            </q-item>
+          </q-list>
+          <q-list dense v-if="item.name === 'group2'">
+            <q-item>
+              <q-item-section>
+                <q-item-label lines="1">
+                  <span class="text-bold">ทั่วไป: </span>
+                  <span> ทักษะพิเศษ</span></q-item-label
+                >
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item-label lines="1">
+                  <span class="text-bold">วิชาการ: </span>
+                  <span> เชี่ยวชาญ,ทรงคุณวุฒิ</span></q-item-label
+                >
+              </q-item-section>
+            </q-item>
+
+            <q-item>
+              <q-item-section>
+                <q-item-label lines="1">
+                  <span class="text-bold">อำนวยการ: </span>
+                  <span> สูง</span></q-item-label
+                >
+              </q-item-section>
+            </q-item>
+            <q-item>
+              <q-item-section>
+                <q-item-label lines="1">
+                  <span class="text-bold">บริหาร: </span>
+                  <span> ต้น,สูง</span></q-item-label
+                >
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-tooltip>
+      </q-tab>
     </div>
 
     <q-space />
@@ -346,7 +410,11 @@ onMounted(async () => {
     >
       <!-- Card โควต้า -->
       <div class="row col-12 q-pa-md">
-        <div :class="`row col-12 ${store.roundMainCode === 'APR' ? `q-col-gutter-md`:`q-gutter-md`} items-start`">
+        <div
+          :class="`row col-12 ${
+            store.roundMainCode === 'APR' ? `q-col-gutter-md` : `q-gutter-md`
+          } items-start`"
+        >
           <div
             v-for="(item, index) in store.roundMainCode === 'APR'
               ? itemsCard.slice(0, 5)
@@ -354,7 +422,11 @@ onMounted(async () => {
               ? itemsCard.slice(5, 12)
               : itemsCard"
             :key="index"
-            :class="store.roundMainCode === 'APR' ? 'col-6 col-sm-4 col-md-3 col-lg-2' : 'col-3'"
+            :class="
+              store.roundMainCode === 'APR'
+                ? 'col-6 col-sm-4 col-md-3 col-lg-2'
+                : 'col-3'
+            "
           >
             <q-card>
               <q-card-section>
diff --git a/src/modules/16_positionEmployee/components/DialogMovePos.vue b/src/modules/16_positionEmployee/components/DialogMovePos.vue
index 2dfc1cade..7d731b50d 100644
--- a/src/modules/16_positionEmployee/components/DialogMovePos.vue
+++ b/src/modules/16_positionEmployee/components/DialogMovePos.vue
@@ -211,6 +211,7 @@ watch(
                   active-color="primary"
                   color="dark"
                   :max="totalPage"
+                  :max-pages="5"
                   size="sm"
                   boundary-links
                   direction-links
diff --git a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
index b0c88fc0b..7c9187904 100644
--- a/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
+++ b/src/modules/16_positionEmployee/components/DialogSelectPerson.vue
@@ -653,6 +653,7 @@ watch([() => page.value, () => pageSize.value], () => {
                           active-color="primary"
                           color="dark"
                           :max="totalPage"
+                          :max-pages="5"
                           size="sm"
                           boundary-links
                           direction-links
diff --git a/src/modules/16_positionEmployee/components/TreeTable.vue b/src/modules/16_positionEmployee/components/TreeTable.vue
index 322ab9c3f..bc41b5f21 100644
--- a/src/modules/16_positionEmployee/components/TreeTable.vue
+++ b/src/modules/16_positionEmployee/components/TreeTable.vue
@@ -594,6 +594,7 @@ async function onClickDownloadReport(val: string, name: string) {
           active-color="primary"
           color="dark"
           :max="totalPage"
+          :max-pages="5"
           size="sm"
           boundary-links
           direction-links