diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts
index 5d24b6b..cbc3145 100644
--- a/src/api/KPI/api.kpis.ts
+++ b/src/api/KPI/api.kpis.ts
@@ -9,6 +9,7 @@ const KpiCapacity = `${env.API_URI}/kpi/capacity`;
 const KpiFile = `${env.API_URI}/salary/file`;
 
 const KpiUser = `${env.API_URI}/kpi/user`;
+const kpiAchievement = `${env.API_URI}/kpi/user/achievement`;
 export default {
   kpiPeriod,
   kpiEvaluation,
@@ -17,6 +18,10 @@ export default {
   KpiCapacity,
   file: KpiFile,
 
+  kpiAchievement: (type: string) => `${kpiAchievement}/${type}`,
+
+  /** ผลสัมฤทธิ์ของงาน*/
+
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${url}/file/${name}/${group}/${id}/${fileName}`,
 
diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 8952e09..684da19 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -1,38 +1,69 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+
+import config from "@/app.config";
+import http from "@/plugins/http";
 
 import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
 import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";
 
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+
+const $q = useQuasar();
+const route = useRoute();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+const store = useKpiDataStore();
+
+const evaluationId = ref<string>(route.params.id.toString());
+
 const rows_01 = ref<any[]>();
 const rows_02 = ref<any[]>();
 const rows_03 = ref<any[]>();
 
-const rows_04 = ref<any[]>();
-const rows_05 = ref<any[]>();
-
 const total = ref<number>(0);
 const resultWork = ref<number>(0);
 const resultEvaluation = ref<number>(0);
 
-function getList() {
-  const data = [
-    {
-      indicators: "ตัวชี้วัด 1",
-      target: null,
-      scoreLevel: "4",
-      weight: "50",
-      workResult: "ระดับ 5",
-      evaluationResults: "50",
-    },
-  ];
-
-  rows_01.value = data;
+function fetchListPlanned() {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      rows_01.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+function fetchListRole() {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      rows_02.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchAssigned() {}
+
 onMounted(() => {
-  getList();
+  fetchListPlanned();
+  fetchListRole();
 });
 </script>
 
@@ -52,16 +83,19 @@ onMounted(() => {
         v-model:data="rows_01"
         :title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
         :page="1"
+        :fetchList="fetchListPlanned"
       />
       <Work
         v-model:data="rows_02"
         :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
         :page="2"
+        :fetchList="fetchListRole"
       />
       <Work
         v-model:data="rows_03"
         :title="`3. งานที่ได้รับมอบหมายพิเศษ`"
         :page="3"
+        :fetchList="fetchAssigned"
       />
       <div class="row text-body2 text-weight-bold">
         <div class="col-6 text-center row justify-center">
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index 73fb258..8f51a4d 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -1,4 +1,3 @@
-div
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
@@ -20,10 +19,15 @@ const {
   messageError,
   dialogConfirm,
   dialogMessageNotify,
+  success,
 } = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const numpage = defineModel<number>("numpage", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
+  required: true,
+});
 
 const search = ref<string>("");
 const listCheckID = ref<string | null>(null);
@@ -59,7 +63,6 @@ function fetchIndicators() {
   const nodeId = store.dataProfile.nodeId;
   const node = store.dataProfile.node;
   const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
-
   showLoader();
   http
     .get(
@@ -77,6 +80,27 @@ function fetchIndicators() {
     });
 }
 
+function fetchIndicatorsByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("planned") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.target = data.target;
+      formDetail.unit = data.unit;
+      formDetail.weight = data.weight;
+      formDetail.meaning = data.meaning;
+      formDetail.formula = data.formula;
+      clickList(data.kpiPlanId, true);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function fetchListRole() {
   const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
   const position = store.dataProfile.position;
@@ -93,7 +117,28 @@ function fetchListRole() {
     });
 }
 
-function clickList(id: string) {
+function fetchRoleByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("role") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.target = data.target;
+      formDetail.unit = data.unit;
+      formDetail.weight = data.weight;
+      formDetail.meaning = data.meaning;
+      formDetail.formula = data.formula;
+      clickList(data.kpiRoleId, true);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function clickList(id: string, isData: boolean = false) {
   showLoader();
   const url = numpage.value === 1 ? config.API.kpiPlan : config.API.kpiRole;
   http
@@ -101,6 +146,13 @@ function clickList(id: string) {
     .then((res) => {
       listCheckID.value = id;
       const data = res.data.result;
+      if (!isData) {
+        formDetail.target = data.target;
+        formDetail.unit = data.unit;
+        formDetail.weight = data.weight;
+        formDetail.meaning = data.meaning;
+        formDetail.formula = data.formula;
+      }
       formDetail.orgRevisionId = data.corgRevisionId;
       formDetail.id = data.id;
       formDetail.year = data.year;
@@ -108,16 +160,11 @@ function clickList(id: string) {
       formDetail.kpiPeriodId = data.kpiPeriodId;
       formDetail.includingName = data.includingName;
       formDetail.including = data.including;
-      formDetail.target = data.target;
-      formDetail.unit = data.unit;
-      formDetail.weight = data.weight;
       formDetail.achievement1 = data.achievement1;
       formDetail.achievement2 = data.achievement2;
       formDetail.achievement3 = data.achievement3;
       formDetail.achievement4 = data.achievement4;
       formDetail.achievement5 = data.achievement5;
-      formDetail.meaning = data.meaning;
-      formDetail.formula = data.formula;
       formDetail.node = data.node;
       formDetail.nodeId = data.nodeId;
       formDetail.nodeName = data.nodeName;
@@ -165,7 +212,39 @@ function onSubmit() {
   if (!listCheckID.value) {
     dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
   } else {
-    dialogConfirm($q, () => {});
+    dialogConfirm($q, async () => {
+      // showLoader();
+
+      const formBody = {
+        target: formDetail.target,
+        unit: Number(formDetail.unit),
+        weight: Number(formDetail.weight),
+        meaning: formDetail.meaning,
+        formula: formDetail.formula,
+        kpiUserEvaluationId: store.dataEvaluation.id,
+        kpiPlanId: numpage.value === 1 ? listCheckID.value : undefined,
+        kpiRoleId: numpage.value === 2 ? listCheckID.value : undefined,
+      };
+      try {
+        const urlPlanned = isStatusEdit.value
+          ? config.API.kpiAchievement("planned") + `/${kpiUserPlannedId.value}`
+          : config.API.kpiAchievement("planned");
+
+        const urlRole = isStatusEdit.value
+          ? config.API.kpiAchievement("role") + `/${kpiUserPlannedId.value}`
+          : config.API.kpiAchievement("role");
+
+        const url = numpage.value === 1 ? urlPlanned : urlRole;
+        const method = isStatusEdit.value ? "put" : "post";
+        await http[method](url, formBody);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+        closeDialog();
+      }
+    });
   }
 }
 
@@ -175,8 +254,10 @@ watch(
     if (modal.value) {
       if (numpage.value === 1) {
         fetchIndicators();
+        isStatusEdit.value && fetchIndicatorsByid(kpiUserPlannedId.value);
       } else if (numpage.value === 2) {
         fetchListRole();
+        isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
       }
     }
   }
@@ -219,6 +300,7 @@ watch(
                     </template>
                   </q-input>
                 </div>
+
                 <q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
                   <div class="row q-px-md q-py-sm items-center bg-grey-1">
                     <div class="col-4">
@@ -231,8 +313,9 @@ watch(
                   <q-separator />
 
                   <q-card-section class="q-pa-none">
-                    <q-list separator dense>
+                    <q-list separator>
                       <q-item
+                        dense
                         v-for="(item, index) in listTarget"
                         :key="index"
                         clickable
@@ -242,12 +325,12 @@ watch(
                         @click="clickList(item.id)"
                       >
                         <q-item-section class="q-pa-none">
-                          <div class="row items-center" style="height: 20px">
+                          <div class="row items-center" style="height: 50px">
                             <div class="col-4">
-                              <span>{{ item.including }}</span>
+                              {{ item.including }}
                             </div>
                             <div class="col-4">
-                              <span>{{ item.includingName }}</span>
+                              {{ item.includingName }}
                             </div>
                           </div>
                         </q-item-section>
@@ -333,8 +416,7 @@ watch(
                                 !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
                             ]"
                             hide-bottom-space
-                            mask="#"
-                            reverse-fill-mask
+                            mask="###"
                           />
                         </div>
                       </div>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index 6e84a7e..92b27f3 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -1,36 +1,57 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
 import Dialog from "@/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue";
 import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue";
+
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
+const $q = useQuasar();
+const route = useRoute();
+const {
+  date2Thai,
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
 const title = defineModel<string>("title", { required: true });
 const rows = defineModel<any>("data", { required: true });
 const numpage = defineModel<number>("page", { required: true });
 
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const props = defineProps({
+  fetchList: { type: Function, required: true },
+});
+
+const kpiUserPlannedId = ref<string>("");
 const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
 const modalAssigned = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
 
 const visibleColumns = ref<string[]>([
-  "indicators",
+  "includingName",
   "target",
-  "scoreLevel",
+  "point",
   "weight",
-  "workResult",
+  "achievement",
   "evaluationResults",
 ]);
 
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "indicators",
+    name: "includingName",
     align: "left",
     label: "ตัวชี้วัด",
     sortable: true,
-    field: "indicators",
+    field: "includingName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -48,11 +69,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "scoreLevel",
+    name: "point",
     align: "left",
     label: "ระดับคะแนนตามเกณฑ์การประเมิน",
     sortable: true,
-    field: "scoreLevel",
+    field: "point",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -70,11 +91,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "workResult",
+    name: "achievement",
     align: "left",
     label: "ผลสำเร็จของงาน",
     sortable: true,
-    field: "workResult",
+    field: "achievement",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -93,13 +114,43 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onAdd() {
+function onAdd(edit: boolean = false, id: string = "") {
   if (numpage.value !== 3) {
     modal.value = true;
+    isStatusEdit.value = edit;
+    kpiUserPlannedId.value = id;
   } else if (numpage.value == 3) {
     modalAssigned.value = true;
   }
 }
+
+function onDelete(id: string) {
+  dialogRemove($q, async () => {
+    try {
+      showLoader();
+      const url =
+        numpage.value === 1
+          ? config.API.kpiAchievement("planned") + `/${id}`
+          : config.API.kpiAchievement("role") + `/${id}`;
+      await http.delete(url);
+      props.fetchList?.();
+      success($q, "ลบข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (!modal.value) {
+      props.fetchList?.();
+    }
+  }
+);
 </script>
 <template>
   <q-card bordered style="border-radius: 5px" class="no-shadow">
@@ -114,7 +165,7 @@ function onAdd() {
         color="primary"
         size="12px"
         dense
-        @click="onAdd"
+        @click="onAdd()"
       >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
@@ -129,11 +180,11 @@ function onAdd() {
         row-key="id"
         flat
         bordered
-        :paging="true"
         dense
         hide-pagination
         class="custom-table2"
         :visible-columns="visibleColumns"
+        :rows-per-page-options="[20]"
         no-data-label="ไม่มีข้อมูล"
       >
         <template v-slot:header="props">
@@ -154,13 +205,43 @@ function onAdd() {
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
+            <td>
+              <q-btn
+                flat
+                round
+                icon="edit"
+                color="edit"
+                size="12px"
+                dense
+                @click="onAdd(true, props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+
+              <q-btn
+                flat
+                round
+                icon="delete"
+                color="red"
+                size="12px"
+                dense
+                @click="onDelete(props.row.id)"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </td>
           </q-tr>
         </template>
       </q-table>
     </q-card-section>
   </q-card>
 
-  <Dialog v-model:modal="modal" :numpage="numpage" />
+  <Dialog
+    v-model:modal="modal"
+    :numpage="numpage"
+    :isStatusEdit="isStatusEdit"
+    :kpiUserPlannedId="kpiUserPlannedId"
+  />
   <Dialog03 v-model:modal="modalAssigned" :numpage="numpage" />
 </template>
 <style scoped>