diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index 49a69dc12..faf2c11f4 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -11,4 +11,12 @@ export default {
     `${registryNew}insignia/${insignId}`,
   profileNewInsignHisByInsignId: (insignId: string) =>
     `${registryNew}insignia/history/${insignId}`,
+
+  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/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>