From 76118a8d11186ec3e7367f6d83c3893da26ff1c8 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 20 Sep 2024 13:02:15 +0700
Subject: [PATCH] Refactoring code module 14_KPI

---
 .../components/1_Complaint/EditPage.vue       |   2 +-
 .../components/1_Complaint/MainPage.vue       |   6 +-
 .../2_InvestigateFacts/EditPage.vue           |   2 +-
 .../components/2_InvestigateFacts/Form.vue    |  10 +-
 .../14_KPI/components/Tab/01_Assessment.vue   |  30 +-
 .../14_KPI/components/Tab/02_Evaluator.vue    | 333 ---------
 .../components/Tab/03_CommanderAbove.vue      |   3 -
 .../Tab/04_CommanderAboveOneStep.vue          |   3 -
 .../14_KPI/components/Tab/04_Result.vue       |   6 +
 src/modules/14_KPI/components/Tab/05_File.vue |  16 +-
 .../Tab/Dialog/01_FormIndicator.vue           |  59 +-
 .../Tab/Dialog/03_FormIndicatorSpecial.vue    |   6 +-
 .../Tab/Dialog/04_FormCompetency.vue          |  57 +-
 .../Tab/Dialog/DialogCommentProblem.vue       |  13 +-
 .../Tab/Dialog/DialogCommentProgress.vue      | 680 +++++++++---------
 .../Tab/Dialog/DialogCompetncyByRow.vue       |   5 +-
 .../components/Tab/Dialog/DialogDevelop.vue   | 186 ++---
 .../components/Tab/Dialog/DialogEvalute.vue   | 116 +--
 .../Tab/Dialog/DialogGovernment.vue           |  34 +-
 .../components/Tab/Dialog/DialogLevel.vue     |   8 +-
 .../Tab/Dialog/DialogListCriteria.vue         |   8 -
 .../components/Tab/Dialog/DialogStatus.vue    |  79 --
 .../components/Tab/Dialog/DialogViewInfo.vue  |   4 +-
 .../Tab/DialogEvaluate/01_Indicator.vue       |  29 +-
 .../Tab/DialogEvaluate/02_Competenct.vue      |  39 +-
 .../03_DialogEvalutionDevelop.vue             |   9 +-
 .../components/Tab/Topic/01_Indicator.vue     | 283 +++-----
 .../components/Tab/Topic/02_Competency.vue    | 154 +---
 .../components/Tab/Topic/03_Develop.vue       | 165 ++---
 .../components/results/dialogIndividual.vue   |  48 +-
 .../components/results/tableIndividual.vue    |  30 +-
 .../components/results/tableResults.vue       |  11 +-
 src/modules/14_KPI/interface/request/index.ts |   4 +-
 src/modules/14_KPI/interface/response/KPI.ts  |  18 +-
 src/modules/14_KPI/router.ts                  |  13 -
 src/modules/14_KPI/store.ts                   |  31 +-
 src/modules/14_KPI/views/detail.vue           |   2 +-
 37 files changed, 827 insertions(+), 1675 deletions(-)
 delete mode 100644 src/modules/14_KPI/components/Tab/02_Evaluator.vue
 delete mode 100644 src/modules/14_KPI/components/Tab/03_CommanderAbove.vue
 delete mode 100644 src/modules/14_KPI/components/Tab/04_CommanderAboveOneStep.vue
 delete mode 100644 src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue

diff --git a/src/modules/11_discipline/components/1_Complaint/EditPage.vue b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
index 4f67ceb6d..62ab55941 100644
--- a/src/modules/11_discipline/components/1_Complaint/EditPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/EditPage.vue
@@ -393,7 +393,7 @@ onMounted(() => {
       @return-person="sendPersonToNext"
       :rows="mainStore.rowsSend"
       :columns="columns"
-      :visibleColumns="visibleColumns"
+      :visible-columns="visibleColumns"
     />
   </div>
 </template>
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index 033e04e9f..ba40b5e61 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -197,10 +197,10 @@ onMounted(async () => {
 
     <div class="col-12">
       <TableComplaint
-        :filterTable="filterTable"
-        :rowsPerPage="rowsPerPage"
+        :filter-table="filterTable"
+        :rows-per-page="rowsPerPage"
         :page="page"
-        :maxPage="maxPage"
+        :max-page="maxPage"
         @update:pagination="updatePagingProp"
         :toptitle="toptitle"
       />
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
index 31ece10f8..5f5c2ac9b 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@@ -425,7 +425,7 @@ onMounted(() => {
       title="ส่งไปสอบสวน"
       :rows="mainStore.rowsSend.filter((item: ArrayPersonAdd)=> item.isSend == 'NEW')"
       :columns="mainStore.columnsDirector"
-      :visibleColumns="mainStore.visibleColumnsDirector"
+      :visible-columns="mainStore.visibleColumnsDirector"
       @return-person="emitPerson"
     />
   </div>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index edba86a1f..7839eedd1 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -1744,14 +1744,14 @@ onMounted(async () => {
   <DialogDirector
     :get-list="getList"
     v-model:Modal="modal"
-    :clickClose="clickClose"
+    :click-close="clickClose"
     :rows2="investigateDis.rows2"
     v-model:filterKeyword2="filterKeyword2"
     v-model:type="type"
-    :filterTable="filterTable"
-    :rowsPerPage="rowsPerPage"
+    :filter-table="filterTable"
+    :rows-per-page="rowsPerPage"
     :page="page"
-    :maxPage="maxPage"
+    :max-page="maxPage"
     :selected-row="rows"
     @update:pagination="updatePagingProp"
     @returnDirector="returnDirector"
@@ -1769,7 +1769,7 @@ onMounted(async () => {
     title="ส่งรายชื่อไปออกคำสั่งยุติเรื่อง"
     :rows="mainStore.rowsCheck"
     :columns="mainStore.columnsDirector"
-    :visibleColumns="mainStore.visibleColumnsDirector"
+    :visible-columns="mainStore.visibleColumnsDirector"
     @return-person="emitPerson"
     :checked-val="false"
     :fetch-data="fetchData"
diff --git a/src/modules/14_KPI/components/Tab/01_Assessment.vue b/src/modules/14_KPI/components/Tab/01_Assessment.vue
index 49a15155d..6aaaad1db 100644
--- a/src/modules/14_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/14_KPI/components/Tab/01_Assessment.vue
@@ -3,21 +3,19 @@ import { ref, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
-import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
-
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
+import type { ListCriteria } from "@/modules/14_KPI/interface/request/Index";
+
+import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
 import Work from "@/modules/14_KPI/components/Tab/Topic/01_Indicator.vue";
 import Competency from "@/modules/14_KPI/components/Tab/Topic/02_Competency.vue";
 import Develop from "@/modules/14_KPI/components/Tab/Topic/03_Develop.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/14_KPI/store";
-
-import type { ListCriteria } from "@/modules/14_KPI/interface/request/index";
 const dataListCriteria = ref<ListCriteria[]>([]);
-
 const modalCriteria = ref<boolean>(false);
 const $q = useQuasar();
 const route = useRoute();
@@ -33,7 +31,6 @@ const rows_03 = ref<any[]>([]);
 const totalResults1 = ref<number>(0);
 const totalResults2 = ref<number>(0);
 const totalResults3 = ref<number>(0);
-// const resultWork = ref<number>(0);
 
 const weightPlanned = ref<number>(0);
 const weightRole = ref<number>(0);
@@ -42,6 +39,11 @@ const resultPlanned = ref<number>(0);
 const resultRole = ref<number>(0);
 const resultAssigned = ref<number>(0);
 
+const isShowScore = computed(() => {
+  return store.tabMain === "3";
+});
+
+/** ดึงข้อมูล งานตามแผนปฏิบัติราชการประจำปี */
 async function fetchListPlanned() {
   await http
     .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
@@ -78,6 +80,7 @@ async function fetchListPlanned() {
     });
 }
 
+/** ดึงข้อมูล งานตามหน้าที่ความรับผิดชอบหลัก */
 async function fetchListRole() {
   await http
     .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
@@ -107,7 +110,7 @@ async function fetchListRole() {
       messageError($q, err);
     });
 }
-
+/** ดึงข้อมูล งานอื่น ๆ ที่ได้รับมอบหมาย */
 async function fetchAssigned() {
   await http
     .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
@@ -146,6 +149,7 @@ async function fetchAssigned() {
     });
 }
 
+/** ข้อมูล เกณฑ์การประเมินสมรรถนะ */
 async function getCriteria() {
   await http
     .get(config.API.KpiEvaluationInfo + `/criteria`)
@@ -158,10 +162,6 @@ async function getCriteria() {
     });
 }
 
-const isShowScore = computed(() => {
-  return store.tabMain === "3";
-});
-
 watch(
   [weightPlanned, weightRole, weightAssigned],
   ([newA, newB, newC], [prevA, prevB, prevC]) => {
@@ -297,10 +297,6 @@ onMounted(async () => {
             dense
             bordered
             :rows="[
-              // {
-              //   name: 'รวมผลการประเมิน (ร้อยละ)',
-              //   value: store.excusiveIndicator2PercentVal.toFixed(2),
-              // },
               {
                 name: 'ผลการประเมินมิติที่ 2 (คะแนน)',
                 value: store.excusiveIndicator2ScoreVal.toFixed(2),
diff --git a/src/modules/14_KPI/components/Tab/02_Evaluator.vue b/src/modules/14_KPI/components/Tab/02_Evaluator.vue
deleted file mode 100644
index d9b9c3c45..000000000
--- a/src/modules/14_KPI/components/Tab/02_Evaluator.vue
+++ /dev/null
@@ -1,333 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
-import config from "@/app.config";
-import http from "@/plugins/http";
-
-import type { QTableProps } from "quasar";
-import type { FormComment } from "@/modules/14_KPI/interface/request/index";
-import type { ResEvaluator } from "@/modules/14_KPI/interface/response/index";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-
-const $q = useQuasar();
-const route = useRoute();
-const { showLoader, hideLoader, messageError, dialogConfirm, success } =
-  useCounterMixin();
-
-const evaluatorId = ref<string>(route.params.id.toString());
-const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
-
-const props = defineProps({
-  type: {
-    type: String,
-    require: true,
-  },
-});
-
-/** Table*/
-const visibleColumns = ref<string[]>(["topic", "reason"]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "topic",
-    align: "left",
-    label: "หัวข้อ",
-    sortable: true,
-    field: "topic",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px;",
-  },
-  {
-    name: "reason",
-    align: "left",
-    label: "ความคิดเห็น",
-    sortable: true,
-    field: "reason",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px;",
-  },
-]);
-const rows = ref<ResEvaluator[]>([]);
-const filterKeyword = ref<string>("");
-
-const modal = ref<boolean>(false);
-const formComment = reactive<FormComment>({
-  topic: "",
-  reason: "",
-});
-const optionTopicMain = ref<string[]>([
-  "เห็นชอบตัวชี้วัดผลสัมฤทธิ์ของงาน รายการสมรรถนะ และน้ำหนักคะแนนของผู้ใต้บังคับบัญชา",
-  "ส่งกลับให้แก้ไข",
-  "บันทึกคำปรึกษาแนะนำ",
-  "บันทึกความเห็น",
-  "เห็นด้วยกับผลการประเมิน",
-  "บันทึกข้อเสนอแนะการพัฒนา",
-]);
-const optionTopic = ref<string[]>(optionTopicMain.value);
-
-function fetchList() {
-  showLoader();
-  http
-    .get(config.API.kpiUserEvaluation + `/${props.type}/${evaluatorId.value}`)
-    .then((res) => {
-      rows.value = res.data.result;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function openDialog() {
-  modal.value = true;
-}
-
-function closeDialog() {
-  modal.value = false;
-  formComment.topic = "";
-  formComment.reason = "";
-}
-
-function createValue(val: string, done: Function) {
-  if (val.length > 0) {
-    if (!optionTopic.value.includes(val)) {
-      optionTopic.value.push(val);
-    }
-    done(val);
-  }
-}
-
-function filterFn(val: string, update: Function) {
-  update(() => {
-    optionTopic.value = optionTopicMain.value.filter(
-      (v: string) => v.indexOf(val) > -1
-    );
-  });
-}
-
-function onSubmit() {
-  dialogConfirm($q, () => {
-    showLoader();
-    http
-      .put(
-        config.API.kpiUserEvaluation + `/${props.type}/${evaluatorId.value}`,
-        formComment
-      )
-      .then(() => {
-        fetchList();
-        closeDialog();
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-onMounted(() => {
-  fetchList();
-});
-</script>
-<template>
-  <div class="q-pa-md">
-    <q-toolbar style="padding: 0px">
-      <q-btn
-        v-if="isReadonly"
-        flat
-        round
-        dense
-        icon="add"
-        color="blue-4"
-        @click="openDialog"
-      >
-        <q-tooltip>เสนอความคิดเห็น</q-tooltip>
-      </q-btn>
-      <q-space />
-      <div class="row q-col-gutter-sm">
-        <q-input
-          outlined
-          dense
-          debounce="300"
-          v-model="filterKeyword"
-          placeholder="ค้นหา"
-        >
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
-      </div>
-    </q-toolbar>
-    <div class="col-12">
-      <q-table
-        ref="table"
-        :columns="columns"
-        :rows="rows"
-        :filter="filterKeyword"
-        row-key="id"
-        flat
-        bordered
-        dense
-        class="custom-table"
-        :visible-columns="visibleColumns"
-        :rows-per-page-options="[10, 20, 50, 100]"
-        no-data-label="ไม่มีข้อมูล"
-        v-model:pagination="pagination"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td v-for="col in props.cols" :key="col.id" style="width: 50%">
-              {{ col.value ? col.value : "-" }}
-            </q-td>
-          </q-tr>
-        </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ rows.length }} รายการ
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="scope.pagesNumber"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template>
-      </q-table>
-    </div>
-  </div>
-
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 700px; max-width: 80vw">
-      <DialogHeader :tittle="'เสนอความคิดเห็น'" :close="closeDialog" />
-      <q-separator />
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <q-card-section>
-          <div class="row q-col-gutter-md">
-            <div class="col-12">
-              <q-select
-                class="inputgreen"
-                dense
-                outlined
-                v-model="formComment.topic"
-                use-input
-                input-debounce="0"
-                @new-value="createValue"
-                :options="optionTopic"
-                @filter="filterFn"
-                hide-bottom-space
-                lazy-rules
-                label="หัวข้อ"
-                :rules="[
-                  (val:string) =>
-                    !!val || `${'กรุณาเลือกหัวข้อ'}`,
-                ]"
-              />
-            </div>
-            <div class="col-12">
-              <q-input
-                v-model="formComment.reason"
-                class="inputgreen"
-                dense
-                outlined
-                type="textarea"
-                label="ควาดคิดเห็น"
-                hide-bottom-space
-                lazy-rules
-                :rules="[
-                  (val:string) =>
-                    !!val || `${'กรุณากรอกความคิดเห็น'}`,
-                ]"
-              />
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions align="right">
-          <q-btn label="บันทึก" color="secondary" type="submit"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped>
-.custom-table {
-  max-height: 64vh;
-
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-  }
-
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
-
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>
diff --git a/src/modules/14_KPI/components/Tab/03_CommanderAbove.vue b/src/modules/14_KPI/components/Tab/03_CommanderAbove.vue
deleted file mode 100644
index d47994bbf..000000000
--- a/src/modules/14_KPI/components/Tab/03_CommanderAbove.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div class="q-pa-md">ผู้บังคับบัญชา เหนือขึ้นไป</div>
-</template>
diff --git a/src/modules/14_KPI/components/Tab/04_CommanderAboveOneStep.vue b/src/modules/14_KPI/components/Tab/04_CommanderAboveOneStep.vue
deleted file mode 100644
index 4d5bde7de..000000000
--- a/src/modules/14_KPI/components/Tab/04_CommanderAboveOneStep.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div class="q-pa-md">ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</div>
-</template>
diff --git a/src/modules/14_KPI/components/Tab/04_Result.vue b/src/modules/14_KPI/components/Tab/04_Result.vue
index de5b6d351..3de13102d 100644
--- a/src/modules/14_KPI/components/Tab/04_Result.vue
+++ b/src/modules/14_KPI/components/Tab/04_Result.vue
@@ -44,6 +44,7 @@ const sumWeight = ref<number>(0);
 const sumResult = ref<number>(0);
 const result = ref<string>("");
 
+/** บันทึกสรุปผล ผู้ประเมิน */
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -67,6 +68,7 @@ function onSubmit() {
   });
 }
 
+/** บันทึกสรุปผล ผู้บังคับบัญชา */
 function onSubmitCommander() {
   if (superiorCommentCheck.value == "") {
     dialogMessageNotify($q, "กรุณาเลือกความคิดเห็น");
@@ -92,6 +94,7 @@ function onSubmitCommander() {
   }
 }
 
+/** บันทึกสรุปผล ผู้บังคับบัญชาเหนือขึ้นไป */
 function onSubmitCommanderHigh() {
   if (additionalSuperiorCheck.value == "") {
     dialogMessageNotify($q, "กรุณาเลือกความคิดเห็น");
@@ -117,11 +120,13 @@ function onSubmitCommanderHigh() {
   }
 }
 
+/** เมื่อเห็นด้วย ล้างค่าความคิดเห็น */
 function resetCommander() {
   superiorComment.value = "";
   superiorCommentRef.value.resetValidation();
 }
 
+/** เมื่อเห็นด้วย ล้างค่าความคิดเห็น */
 function resetCommanderHigh() {
   additionalSuperiorComment.value = "";
   additionalSuperiorCommentRef.value.resetValidation();
@@ -158,6 +163,7 @@ function userOpen() {
   http.get(config.API.openPoint(id.value)).then(async () => {});
 }
 
+/** ดึงรายละเอียด ผลการประเมิน */
 async function getData() {
   showLoader();
   await http
diff --git a/src/modules/14_KPI/components/Tab/05_File.vue b/src/modules/14_KPI/components/Tab/05_File.vue
index d4c309b69..735deee2e 100644
--- a/src/modules/14_KPI/components/Tab/05_File.vue
+++ b/src/modules/14_KPI/components/Tab/05_File.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import axios from "axios";
 import { useQuasar } from "quasar";
+import axios from "axios";
+
+import { useCounterMixin } from "@/stores/mixin";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -33,6 +34,7 @@ const isReadonly = ref<boolean>(
 const documentFile = ref<any>(null);
 const fileList = ref<ArrayFileList[]>([]);
 
+/** ดึงข้อมูล */
 async function getData() {
   showLoader();
   await http
@@ -48,6 +50,11 @@ async function getData() {
     });
 }
 
+/**
+ * อัปโหลดไฟล์
+ * @param uploadUrl  url
+ * @param file ไฟล์
+ */
 async function uploadFileDoc(uploadUrl: string, file: any) {
   const Data = new FormData();
   Data.append("file", documentFile.value);
@@ -69,6 +76,8 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
       hideLoader();
     });
 }
+
+/** ฟังชั่น อัปโหลดไฟล์ */
 async function clickUpload(file: any) {
   const fileName = { fileName: file.name };
 
@@ -101,6 +110,7 @@ async function clickUpload(file: any) {
     "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
   );
 }
+
 /**
  * ดาวน์โหลดลิงก์ไฟล์
  * @param fileName file name
@@ -187,8 +197,6 @@ onMounted(() => {
               >
             </template>
           </q-file>
-
-          <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
         </div>
 
         <div v-if="fileList.length > 0" class="col-xs-12 row">
diff --git a/src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue
index 45f0a6194..042bc07f2 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed } from "vue";
 import { useQuasar } from "quasar";
-import { useRoute } from "vue-router";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/14_KPI/store";
-
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
@@ -86,6 +85,25 @@ const roundOp = ref<DataOption[]>([
   { id: "OCT", name: "รอบที่ 2 ตุลาคม" },
 ]);
 
+const title = computed(() => {
+  let name = "";
+  if (numpage.value === 1) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี"
+      : "เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี";
+  } else if (numpage.value === 2) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ"
+      : "เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ";
+  } else if (numpage.value === 3) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดงานอื่น ๆ ที่ได้รับมอบหมาย"
+      : "เพิ่มตัวชี้วัดงานอื่น ๆ ที่ได้รับมอบหมาย";
+  }
+  return name;
+});
+
+/** ดึงข้อมูล งานตามแผนปฏิบัติราชการประจำปี */
 function fetchListPlan() {
   formFilter.nodeId = store.dataProfile.nodeId;
   formFilter.node = store.dataProfile.node;
@@ -108,6 +126,7 @@ function fetchListPlan() {
     });
 }
 
+/** ดึงข้อมูล งานตามแผนปฏิบัติราชการประจำปีตาม id */
 function fetchListPlanByid(id: string) {
   showLoader();
   http
@@ -139,9 +158,8 @@ function fetchListPlanByid(id: string) {
     });
 }
 
+/** ดึงข้อมูล งานตามหน้าที่ความรับผิดชอบหลัก */
 function fetchListRole() {
-  // const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
-  // const position = store.dataProfile.position;
   formFilter.nodeId = store.dataProfile.nodeId;
   formFilter.node = store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
@@ -162,6 +180,7 @@ function fetchListRole() {
     });
 }
 
+/** ดึงข้อมูล งานตามหน้าที่ความรับผิดชอบหลักตาม id */
 function fetchRoleByid(id: string) {
   showLoader();
   http
@@ -193,6 +212,7 @@ function fetchRoleByid(id: string) {
     });
 }
 
+/** ดึงข้อมูล งานอื่น ๆ ที่ได้รับมอบหมาย */
 function fetchListSpecial() {
   formFilter.nodeId = store.dataProfile.nodeId;
   formFilter.node = store.dataProfile.node;
@@ -222,6 +242,7 @@ function fetchListSpecial() {
     });
 }
 
+/** ดึงข้อมูล งานอื่น ๆ ที่ได้รับมอบหมายตาม id */
 function fetchspecialByid(id: string) {
   showLoader();
   http
@@ -252,6 +273,11 @@ function fetchspecialByid(id: string) {
     });
 }
 
+/**
+ * ดึงรายละเอียดตัวชี้วัด
+ * @param id ตัวชี้วัด
+ * @param isData เเยก plan/role
+ */
 function clickList(id: string, isData: boolean = false) {
   if (!checkDetail.value) {
     showLoader();
@@ -345,6 +371,7 @@ function closeDialog() {
   checkDetail.value = false;
 }
 
+/** บันทึกข้อมูล */
 function onSubmit() {
   if (!listCheckID.value && numpage.value !== 3) {
     dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
@@ -411,6 +438,7 @@ function onSubmit() {
   }
 }
 
+/** ดึงข้อมูลตัวชีวัด */
 function fetchNewList() {
   formFilter.page = 1;
   numpage.value === 1
@@ -419,6 +447,7 @@ function fetchNewList() {
     ? fetchListRole()
     : fetchListSpecial();
 }
+
 watch(
   () => modal.value,
   () => {
@@ -439,24 +468,6 @@ watch(
     }
   }
 );
-
-const title = computed(() => {
-  let name = "";
-  if (numpage.value === 1) {
-    name = isStatusEdit.value
-      ? "แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี"
-      : "เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี";
-  } else if (numpage.value === 2) {
-    name = isStatusEdit.value
-      ? "แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ"
-      : "เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ";
-  } else if (numpage.value === 3) {
-    name = isStatusEdit.value
-      ? "แก้ไขตัวชี้วัดงานอื่น ๆ ที่ได้รับมอบหมาย"
-      : "เพิ่มตัวชี้วัดงานอื่น ๆ ที่ได้รับมอบหมาย";
-  }
-  return name;
-});
 </script>
 
 <template>
diff --git a/src/modules/14_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue b/src/modules/14_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
index 24f34ee3a..0c2dae4a7 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
 
-import type { FormDataAssigned } from "@/modules/14_KPI/interface/request/index";
+import type { FormDataAssigned } from "@/modules/14_KPI/interface/request/Index";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -19,7 +20,6 @@ const {
   hideLoader,
   messageError,
   dialogConfirm,
-  dialogMessageNotify,
   success,
 } = useCounterMixin();
 
diff --git a/src/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue
index 818305fdd..8d3cb6634 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -2,7 +2,7 @@
 import { ref, reactive, onMounted, watch } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
-import type { ListCapacity } from "@/modules/14_KPI/interface/request/index";
+import type { ListCapacity } from "@/modules/14_KPI/interface/request/Index";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -127,11 +127,6 @@ function clickList(index: string, data: any) {
   formDetail.name = data.name;
   formDetail.definition = data.description;
   dataListCapacityDetails.value = dataCapacityDetails;
-  // formScore.score1 = dataCapacityDetails[0].description;
-  // formScore.score2 = dataCapacityDetails[1].description;
-  // formScore.score3 = dataCapacityDetails[2].description;
-  // formScore.score4 = dataCapacityDetails[3].description;
-  // formScore.score5 = dataCapacityDetails[4].description;
 }
 
 /** ปิด dialog */
@@ -162,6 +157,7 @@ function getclass() {
   return "inputgreen";
 }
 
+/** บันทึกข้อมูล สมรรถนะ */
 function onSubmit() {
   if (formDetail.id == "") {
     dialogMessageNotify($q, "กรุณาเลือกสมรรถนะ");
@@ -193,6 +189,7 @@ function onSubmit() {
   }
 }
 
+/** ดึงข้อมูล สมรรถนะ */
 function getData() {
   showLoader();
   http
@@ -214,12 +211,14 @@ function getData() {
     });
 }
 
+/** ฟิลเตอร์ */
 function filterTxt(val: any) {
   listTarget.value = listTargetMain.value.filter(
     (v: any) => v.name.indexOf(val) > -1
   );
 }
 
+/** ดึงข้อมูลตาม id */
 function getDataById() {
   http
     .get(config.API.kpiUserCapacity + `/${idProps.value}`)
@@ -444,17 +443,6 @@ watch(
                           class="inputgreen"
                         />
                       </div>
-                      <!-- <div v-else>
-                        <q-input
-                          v-model="expectedLevel"
-                          dense
-                          outlined
-                          lazy-rules
-                          :rules="[(val:string) => !!val || `${'กรุณาระดับที่คาดหวัง'}`,]"
-                          hide-bottom-space
-                          class="inputgreen"
-                        />
-                      </div> -->
                     </div>
                   </q-card>
                 </div>
@@ -497,7 +485,6 @@ watch(
                           </div>
                           <div v-else>
                             {{ col.value }}
-                            <!-- <span v-html="item.description"></span> -->
                           </div>
                         </q-td>
                       </q-tr>
@@ -510,40 +497,6 @@ watch(
                       </div>
                     </template>
                   </q-table>
-
-                  <!-- <q-card bordered class="col-12 no-shadow">
-                    <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
-                      <div class="col-4 text-center">
-                        <span>ระดับสมรรถนะ</span>
-                      </div>
-                      <div class="col-8 text-start">
-                        <span>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
-                      </div>
-                    </div>
-                    <div
-                      v-if="dataListCapacityDetails.length == 0"
-                      class="q-pa-md text-weight-bold col-12 text-center"
-                      style="border: 2px solid #f5f5f5"
-                    >
-                      <span>ไม่พบข้อมูลสมรรถนะ</span>
-                    </div>
-                    <div
-                      v-for="(item, index) in dataListCapacityDetails"
-                      :key="item.id"
-                    >
-                      <div class="row q-pa-sm">
-                        <div class="col-4 text-center self-start text-body1">
-                          <span>{{ item.level }}</span>
-                        </div>
-                        <div class="col-8">
-                          <span v-html="item.description"></span>
-                        </div>
-                      </div>
-                      <q-separator
-                        v-if="index !== dataListCapacityDetails.length - 1"
-                      />
-                    </div>
-                  </q-card> -->
                 </div>
               </div>
             </div>
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue
index 81e535143..030829d1c 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, reactive } from "vue";
+import { ref, watch, reactive } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -9,7 +9,7 @@ import config from "@/app.config";
 import type {
   FormComment,
   FormCommentByRole,
-} from "@/modules/14_KPI/interface/request/index";
+} from "@/modules/14_KPI/interface/request/Index";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -56,7 +56,6 @@ const formDataView = reactive<FormCommentByRole>({
   id: "",
   topic: "",
   reason: "",
-
   reasonEvaluator: "",
   reasonCommander: "",
   reasonCommanderHigh: "",
@@ -64,9 +63,6 @@ const formDataView = reactive<FormCommentByRole>({
 
 let count = ref<number>(0);
 function clickList(index: string, data: any) {
-  // if (data.status == "DRAFT") {
-
-  // }
   listCheck.value = index as string;
 
   formDataView.id = data.id;
@@ -93,7 +89,8 @@ function clickList(index: string, data: any) {
   }, 100);
 }
 
-function onEdit(index: string, data: any) {
+/** แก้ไขแบบร่างรายงาน */
+function onEdit(data: any) {
   modalAdd.value = true;
   sendId.value = data.id;
   formDataAdd.topic = data.topic;
@@ -322,7 +319,7 @@ watch(
                                   outline
                                   color="grey"
                                   label="แบบร่าง"
-                                  @click="onEdit(item.id, item)"
+                                  @click="onEdit(item)"
                                 />
                               </div>
                             </div>
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue
index 6514c6334..6b6783b4e 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, reactive } from "vue";
+import { ref, watch, reactive } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-import type {
-  FormComment,
-  FormCommentByRole,
-} from "@/modules/14_KPI/interface/request/index";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 
-const numLevel = ref<string>("");
-const store = useKpiDataStore();
+import type {
+  FormComment,
+  FormCommentByRole,
+} from "@/modules/14_KPI/interface/request/Index";
+
 const $q = useQuasar();
+const store = useKpiDataStore();
 const route = useRoute();
-const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const mixin = useCounterMixin();
 const {
   dialogConfirm,
@@ -28,9 +26,9 @@ const {
   success,
   dialogMessageNotify,
 } = mixin;
+const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 
-const check = ref<string>("");
-const rows = defineModel<any>("rows");
+const numLevel = ref<string>("");
 const modal = defineModel<boolean>("modal", { required: true });
 const type = defineModel<string>("type", { required: true });
 const idList = defineModel<string>("idList", { required: true });
@@ -65,6 +63,13 @@ const formDataView = reactive<FormCommentByRole>({
 });
 
 let count = ref<number>(0);
+/**
+ * คลิกแสดงรายละเอียดข้อมูลของ
+ * -บันทึกเหตุการณ์/พฤติกรรม
+ * -รายงานความก้าวหน้า
+ * @param index id เมนูนั้นๆ
+ * @param data ข้อมูล
+ */
 function clickList(index: string, data: any) {
   listCheck.value = index as string;
 
@@ -94,6 +99,10 @@ function clickList(index: string, data: any) {
   }, 100);
 }
 
+/** บันทึกข้อมูล
+ * -บันทึกเหตุการณ์/พฤติกรรม
+ * -ความก้าวหน้า
+ */
 function onSubmitAdd() {
   // type
   if (
@@ -129,8 +138,7 @@ function onSubmitAdd() {
   }
 }
 
-function onSubmit() {}
-
+/** ปิด popup */
 function close() {
   count.value = 0;
   modal.value = false;
@@ -143,6 +151,7 @@ function close() {
   listCheck.value = "";
 }
 
+/** ปิด popup เพิ่มข้อมูล */
 function closeAdd() {
   modalAdd.value = false;
   formDataAdd.topic = "";
@@ -150,6 +159,7 @@ function closeAdd() {
   numLevel.value = "";
 }
 
+/** ดึงข้อมูล */
 function getList() {
   showLoader();
   http
@@ -173,6 +183,10 @@ function getList() {
     });
 }
 
+/**
+ * คอมเม้น
+ * @param role type
+ */
 function onSubmitComment(role: string) {
   dialogConfirm($q, () => {
     const body = {
@@ -219,6 +233,7 @@ function onSubmitComment(role: string) {
   });
 }
 
+/** เก็บคะแนน ลง ตัวแปร */
 function onCheckNumber(num: number) {
   numLevel.value = num.toString();
 }
@@ -235,325 +250,321 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 70vw">
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader
-          :tittle="
-            type == 'capacity' || type == 'development'
-              ? 'บันทึกเหตุการณ์/พฤติกรรม'
-              : 'รายงานความก้าวหน้า'
-          "
-          :close="close"
-        />
-        <q-separator />
-        <q-card-section class="q-pa-none">
-          <q-splitter
-            v-model="splitterModel"
-            disable
-            separator-class="bg-gray"
-            separator-style="width: 1px"
-          >
-            <template v-slot:before>
-              <div class="q-pa-sm">
-                <q-btn
-                  v-if="
-                    (!checkRoutePermisson && type == 'capacity') ||
-                    (!checkRoutePermisson && type == 'development') ||
-                    (!checkRoutePermisson &&
-                      type != 'capacity' &&
-                      type != 'development' &&
-                      store.rolePerson == 'USER')
-                  "
-                  icon="add"
-                  color="teal"
-                  flat
-                  round
-                  @click="
-                    () => {
-                      modalAdd = true;
-                    }
-                  "
-                >
-                  <q-tooltip>{{
-                    type == "capacity" || type == "development"
-                      ? "เพิ่มเหตุการณ์/พฤติกรรม"
-                      : "เพิ่มความก้าวหน้า"
-                  }}</q-tooltip>
-                </q-btn>
-
-                <q-card
-                  bordered
-                  flat
-                  class="no-shadow bg-white col-12"
-                  style="min-height: 300px"
-                >
-                  <div class="row q-px-md q-py-sm items-center bg-grey-1">
-                    <div class="col-12">
-                      <span>{{
-                        type == "capacity" || type == "development"
-                          ? "เหตุการณ์/พฤติกรรม"
-                          : "ความก้าวหน้า"
-                      }}</span>
-                    </div>
-                  </div>
-
-                  <q-separator />
-                  <q-card-section class="q-pa-none">
-                    <div v-if="listTarget.length > 0">
-                      <q-list
-                        dense
-                        v-for="(item, index) in listTarget"
-                        :key="item.id"
-                      >
-                        <q-item
-                          clickable
-                          v-ripple
-                          :active="listCheck === item.id"
-                          active-class="my-menu-link"
-                          @click="clickList(item.id, item)"
-                        >
-                          <q-item-section class="q-pa-none">
-                            <div class="row items-center">
-                              <div class="col-12">
-                                <span>{{ item.topic }}</span>
-                              </div>
-                            </div>
-                          </q-item-section>
-                        </q-item>
-                        <q-separator />
-                      </q-list>
-                    </div>
-
-                    <div v-else class="q-pa-md">
-                      <span>ไม่พบข้อมูล</span>
-                    </div>
-                  </q-card-section>
-                </q-card>
-              </div>
-            </template>
-
-            <template v-slot:after>
-              <div
-                v-if="!listCheck"
-                class="row col-12 items-center"
-                style="height: 30vh"
+      <DialogHeader
+        :tittle="
+          type == 'capacity' || type == 'development'
+            ? 'บันทึกเหตุการณ์/พฤติกรรม'
+            : 'รายงานความก้าวหน้า'
+        "
+        :close="close"
+      />
+      <q-separator />
+      <q-card-section class="q-pa-none">
+        <q-splitter
+          v-model="splitterModel"
+          disable
+          separator-class="bg-gray"
+          separator-style="width: 1px"
+        >
+          <template v-slot:before>
+            <div class="q-pa-sm">
+              <q-btn
+                v-if="
+                  (!checkRoutePermisson && type == 'capacity') ||
+                  (!checkRoutePermisson && type == 'development') ||
+                  (!checkRoutePermisson &&
+                    type != 'capacity' &&
+                    type != 'development' &&
+                    store.rolePerson == 'USER')
+                "
+                icon="add"
+                color="teal"
+                flat
+                round
+                @click="
+                  () => {
+                    modalAdd = true;
+                  }
+                "
               >
-                <q-banner class="q-pa-lg col-12 text-center">
-                  <q-icon
-                    name="mdi-hand-pointing-left"
-                    size="lg"
-                    color="primary"
-                  />
-                  <p class="text-grey-9 q-pt-sm">
-                    กรุณาเลือกหัวข้อความก้าวหน้า
-                  </p>
-                </q-banner>
-              </div>
-              <div v-else>
-                <div class="row q-pa-md q-col-gutter-sm">
-                  <div class="row col-12 text-weight-medium">
-                    <div class="col-4 text-grey-6">
-                      {{
-                        type == "capacity" || type == "development"
-                          ? "เหตุการณ์/พฤติกรรม"
-                          : "หัวข้อความก้าวหน้า"
-                      }}
-                    </div>
-                    <div class="col-8">{{ formDataView.topic }}</div>
-                  </div>
-                  <div class="row col-12 text-weight-medium">
-                    <div class="col-4 text-grey-6">
-                      {{
-                        type == "capacity" || type == "development"
-                          ? "รายละเอียด"
-                          : "รายละเอียดความก้าวหน้า"
-                      }}
-                    </div>
-                    <div class="col-8">{{ formDataView.reason }}</div>
-                  </div>
-                  <div
-                    class="row col-12 text-weight-medium"
-                    v-if="type !== 'capacity' && type !== 'development'"
-                  >
-                    <div class="col-4 text-grey-6">คะแนน</div>
-                    <div class="col-8">{{ formDataView.score }}</div>
-                  </div>
-                  <div class="row col-12 text-weight-medium">
-                    <div class="col-4 text-grey-6">ผู้สร้าง</div>
-                    <div class="col-8">{{ formDataView.createdFullName }}</div>
-                  </div>
+                <q-tooltip>{{
+                  type == "capacity" || type == "development"
+                    ? "เพิ่มเหตุการณ์/พฤติกรรม"
+                    : "เพิ่มความก้าวหน้า"
+                }}</q-tooltip>
+              </q-btn>
 
-                  <div
-                    class="col-12"
-                    v-if="type != 'capacity' && type != 'development'"
-                  >
-                    <div class="col-12">
-                      <q-separator />
-                    </div>
-
-                    <!-- ความคิดเห็นของผู้ประเมิน -->
-                    <q-form
-                      v-if="store.dataEvaluation.evaluatorId"
-                      ref="reasonEvaluatorRef"
-                      greedy
-                      @submit.prevent
-                      @validation-success="onSubmitComment('evaluator')"
-                      class="full-width q-mt-sm"
-                    >
-                      <div class="row col-12 q-col-gutter-sm">
-                        <div class="col-12">
-                          <span class="text-weight-medium text-grey-6"
-                            >ความคิดเห็นของผู้ประเมิน</span
-                          >
-                        </div>
-                        <div class="col-12">
-                          <q-input
-                            outlined
-                            dense
-                            :readonly="
-                              checkRoutePermisson ||
-                              formDataView.reasonEvaluator !== null ||
-                              store.rolePerson !== 'EVALUATOR'
-                            "
-                            label="ความคิดเห็นของผู้ประเมิน"
-                            v-model="reasonEvaluator"
-                            type="textarea"
-                            class="inputgreen"
-                            lazy-rules
-                            hide-bottom-space
-                            :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
-                          ></q-input>
-                        </div>
-
-                        <div
-                          v-if="
-                            !checkRoutePermisson &&
-                            formDataView.reasonEvaluator == null &&
-                            store.rolePerson == 'EVALUATOR'
-                          "
-                          class="col-12"
-                          align="right"
-                        >
-                          <q-btn
-                            label="บันทึกความคิดเห็น"
-                            color="secondary"
-                            type="submit"
-                            ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-form>
-
-                    <!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
-                    <q-form
-                      v-if="store.dataEvaluation.commanderId"
-                      class="full-width q-mt-sm"
-                      ref="reasonCommanderRef"
-                      greedy
-                      @submit.prevent
-                      @validation-success="onSubmitComment('commander')"
-                    >
-                      <div class="row col-12 q-col-gutter-sm">
-                        <div class="col-12">
-                          <span class="text-weight-medium text-grey-6"
-                            >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
-                          >
-                        </div>
-                        <div class="col-12">
-                          <q-input
-                            outlined
-                            dense
-                            label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
-                            v-model="reasonCommander"
-                            type="textarea"
-                            class="inputgreen"
-                            lazy-rules
-                            :readonly="
-                              checkRoutePermisson ||
-                              formDataView.reasonCommander !== null ||
-                              store.rolePerson !== 'COMMANDER'
-                            "
-                            hide-bottom-space
-                            :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
-                          ></q-input>
-                        </div>
-
-                        <div
-                          v-if="
-                            !checkRoutePermisson &&
-                            formDataView.reasonCommander == null &&
-                            store.rolePerson == 'COMMANDER'
-                          "
-                          class="col-12"
-                          align="right"
-                        >
-                          <q-btn
-                            label="บันทึกความคิดเห็น"
-                            color="secondary"
-                            type="submit"
-                            ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-form>
-
-                    <q-form
-                      v-if="store.dataEvaluation.commanderHighId"
-                      class="full-width q-mt-sm"
-                      ref="reasonCommanderHighRef"
-                      greedy
-                      @submit.prevent
-                      @validation-success="onSubmitComment('commanderhigh')"
-                    >
-                      <div class="row col-12 q-col-gutter-sm">
-                        <div class="col-12">
-                          <span class="text-weight-medium text-grey-6"
-                            >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง</span
-                          >
-                        </div>
-                        <div class="col-12">
-                          <q-input
-                            outlined
-                            dense
-                            label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
-                            v-model="reasonCommanderHigh"
-                            type="textarea"
-                            class="inputgreen"
-                            lazy-rules
-                            :readonly="
-                              checkRoutePermisson ||
-                              formDataView.reasonCommanderHigh !== null ||
-                              store.rolePerson !== 'COMMANDERHIGH'
-                            "
-                            hide-bottom-space
-                            :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
-                          ></q-input>
-                        </div>
-
-                        <div
-                          v-if="
-                            !checkRoutePermisson &&
-                            formDataView.reasonCommanderHigh == null &&
-                            store.rolePerson == 'COMMANDERHIGH'
-                          "
-                          class="col-12"
-                          align="right"
-                        >
-                          <q-btn
-                            label="บันทึกความคิดเห็น"
-                            color="secondary"
-                            type="submit"
-                            ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
-                          >
-                        </div>
-                      </div>
-                    </q-form>
+              <q-card
+                bordered
+                flat
+                class="no-shadow bg-white col-12"
+                style="min-height: 300px"
+              >
+                <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                  <div class="col-12">
+                    <span>{{
+                      type == "capacity" || type == "development"
+                        ? "เหตุการณ์/พฤติกรรม"
+                        : "ความก้าวหน้า"
+                    }}</span>
                   </div>
                 </div>
+
+                <q-separator />
+                <q-card-section class="q-pa-none">
+                  <div v-if="listTarget.length > 0">
+                    <q-list
+                      dense
+                      v-for="(item, index) in listTarget"
+                      :key="item.id"
+                    >
+                      <q-item
+                        clickable
+                        v-ripple
+                        :active="listCheck === item.id"
+                        active-class="my-menu-link"
+                        @click="clickList(item.id, item)"
+                      >
+                        <q-item-section class="q-pa-none">
+                          <div class="row items-center">
+                            <div class="col-12">
+                              <span>{{ item.topic }}</span>
+                            </div>
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                      <q-separator />
+                    </q-list>
+                  </div>
+
+                  <div v-else class="q-pa-md">
+                    <span>ไม่พบข้อมูล</span>
+                  </div>
+                </q-card-section>
+              </q-card>
+            </div>
+          </template>
+
+          <template v-slot:after>
+            <div
+              v-if="!listCheck"
+              class="row col-12 items-center"
+              style="height: 30vh"
+            >
+              <q-banner class="q-pa-lg col-12 text-center">
+                <q-icon
+                  name="mdi-hand-pointing-left"
+                  size="lg"
+                  color="primary"
+                />
+                <p class="text-grey-9 q-pt-sm">กรุณาเลือกหัวข้อความก้าวหน้า</p>
+              </q-banner>
+            </div>
+            <div v-else>
+              <div class="row q-pa-md q-col-gutter-sm">
+                <div class="row col-12 text-weight-medium">
+                  <div class="col-4 text-grey-6">
+                    {{
+                      type == "capacity" || type == "development"
+                        ? "เหตุการณ์/พฤติกรรม"
+                        : "หัวข้อความก้าวหน้า"
+                    }}
+                  </div>
+                  <div class="col-8">{{ formDataView.topic }}</div>
+                </div>
+                <div class="row col-12 text-weight-medium">
+                  <div class="col-4 text-grey-6">
+                    {{
+                      type == "capacity" || type == "development"
+                        ? "รายละเอียด"
+                        : "รายละเอียดความก้าวหน้า"
+                    }}
+                  </div>
+                  <div class="col-8">{{ formDataView.reason }}</div>
+                </div>
+                <div
+                  class="row col-12 text-weight-medium"
+                  v-if="type !== 'capacity' && type !== 'development'"
+                >
+                  <div class="col-4 text-grey-6">คะแนน</div>
+                  <div class="col-8">{{ formDataView.score }}</div>
+                </div>
+                <div class="row col-12 text-weight-medium">
+                  <div class="col-4 text-grey-6">ผู้สร้าง</div>
+                  <div class="col-8">{{ formDataView.createdFullName }}</div>
+                </div>
+
+                <div
+                  class="col-12"
+                  v-if="type != 'capacity' && type != 'development'"
+                >
+                  <div class="col-12">
+                    <q-separator />
+                  </div>
+
+                  <!-- ความคิดเห็นของผู้ประเมิน -->
+                  <q-form
+                    v-if="store.dataEvaluation.evaluatorId"
+                    ref="reasonEvaluatorRef"
+                    greedy
+                    @submit.prevent
+                    @validation-success="onSubmitComment('evaluator')"
+                    class="full-width q-mt-sm"
+                  >
+                    <div class="row col-12 q-col-gutter-sm">
+                      <div class="col-12">
+                        <span class="text-weight-medium text-grey-6"
+                          >ความคิดเห็นของผู้ประเมิน</span
+                        >
+                      </div>
+                      <div class="col-12">
+                        <q-input
+                          outlined
+                          dense
+                          :readonly="
+                            checkRoutePermisson ||
+                            formDataView.reasonEvaluator !== null ||
+                            store.rolePerson !== 'EVALUATOR'
+                          "
+                          label="ความคิดเห็นของผู้ประเมิน"
+                          v-model="reasonEvaluator"
+                          type="textarea"
+                          class="inputgreen"
+                          lazy-rules
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="
+                          !checkRoutePermisson &&
+                          formDataView.reasonEvaluator == null &&
+                          store.rolePerson == 'EVALUATOR'
+                        "
+                        class="col-12"
+                        align="right"
+                      >
+                        <q-btn
+                          label="บันทึกความคิดเห็น"
+                          color="secondary"
+                          type="submit"
+                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-form>
+
+                  <!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
+                  <q-form
+                    v-if="store.dataEvaluation.commanderId"
+                    class="full-width q-mt-sm"
+                    ref="reasonCommanderRef"
+                    greedy
+                    @submit.prevent
+                    @validation-success="onSubmitComment('commander')"
+                  >
+                    <div class="row col-12 q-col-gutter-sm">
+                      <div class="col-12">
+                        <span class="text-weight-medium text-grey-6"
+                          >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
+                        >
+                      </div>
+                      <div class="col-12">
+                        <q-input
+                          outlined
+                          dense
+                          label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
+                          v-model="reasonCommander"
+                          type="textarea"
+                          class="inputgreen"
+                          lazy-rules
+                          :readonly="
+                            checkRoutePermisson ||
+                            formDataView.reasonCommander !== null ||
+                            store.rolePerson !== 'COMMANDER'
+                          "
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="
+                          !checkRoutePermisson &&
+                          formDataView.reasonCommander == null &&
+                          store.rolePerson == 'COMMANDER'
+                        "
+                        class="col-12"
+                        align="right"
+                      >
+                        <q-btn
+                          label="บันทึกความคิดเห็น"
+                          color="secondary"
+                          type="submit"
+                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-form>
+
+                  <q-form
+                    v-if="store.dataEvaluation.commanderHighId"
+                    class="full-width q-mt-sm"
+                    ref="reasonCommanderHighRef"
+                    greedy
+                    @submit.prevent
+                    @validation-success="onSubmitComment('commanderhigh')"
+                  >
+                    <div class="row col-12 q-col-gutter-sm">
+                      <div class="col-12">
+                        <span class="text-weight-medium text-grey-6"
+                          >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง</span
+                        >
+                      </div>
+                      <div class="col-12">
+                        <q-input
+                          outlined
+                          dense
+                          label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
+                          v-model="reasonCommanderHigh"
+                          type="textarea"
+                          class="inputgreen"
+                          lazy-rules
+                          :readonly="
+                            checkRoutePermisson ||
+                            formDataView.reasonCommanderHigh !== null ||
+                            store.rolePerson !== 'COMMANDERHIGH'
+                          "
+                          hide-bottom-space
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
+                        ></q-input>
+                      </div>
+
+                      <div
+                        v-if="
+                          !checkRoutePermisson &&
+                          formDataView.reasonCommanderHigh == null &&
+                          store.rolePerson == 'COMMANDERHIGH'
+                        "
+                        class="col-12"
+                        align="right"
+                      >
+                        <q-btn
+                          label="บันทึกความคิดเห็น"
+                          color="secondary"
+                          type="submit"
+                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                        >
+                      </div>
+                    </div>
+                  </q-form>
+                </div>
               </div>
-            </template>
-          </q-splitter>
-        </q-card-section>
-      </q-form>
+            </div>
+          </template>
+        </q-splitter>
+      </q-card-section>
     </q-card>
   </q-dialog>
 
@@ -588,21 +599,6 @@ watch(
                 :rules="[(val:string) => !!val || `${type == 'capacity'||type == 'development' ? 'กรุณากรอกเหตุการณ์/พฤติกรรม':'กรุณากรอกหัวข้อความก้าวหน้า' }`,]"
               />
             </div>
-            <!-- <div
-              class="col-12"
-              v-if="type !== 'capacity' && type !== 'development'"
-            >
-              <q-input
-                v-model="numLevel"
-                outlined
-                class="inputgreen"
-                label="คะแนน"
-                dense
-                lazy-rules
-                hide-bottom-space
-                :rules="[(val:string) => !!val || `${'กรุณากรอกคะแนน'}`,]"
-              />
-            </div> -->
             <div
               class="col-12"
               v-if="type !== 'capacity' && type !== 'development'"
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
index 96705d8ae..eadc06199 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, watch } from "vue";
 import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 
-const mixin = useCounterMixin();
-const { showLoader, hideLoader } = mixin;
 const modal = defineModel<boolean>("modal", { required: true });
 const rows = defineModel<any>("rows", { required: true });
 const dataRows = ref<any[]>([]);
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue
index 48f40ad62..fbb7fb452 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -1,19 +1,33 @@
 <script setup lang="ts">
-import DialogHeader from "@/components/DialogHeader.vue";
 import { ref, reactive, watch, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type {
   DataOptionTechnique,
   ProjectYearOp,
 } from "@/modules/14_KPI/interface/index/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const props = defineProps({
   getAll: Function,
 });
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = mixin;
 const route = useRoute();
 const idKpi = ref<string>(route.params.id.toLocaleString());
 
@@ -79,6 +93,7 @@ const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
   { value: "team_working", label: "การทำงานเป็นทีม (Team working)" },
   { value: "other1", label: "อื่น ๆ (ระบุ)" },
 ]);
+
 const projectTechniquesOp2 = ref<DataOptionTechnique[]>([
   { value: "coaching", label: "การสอนงาน (Coaching)" },
   { value: "mentoring", label: "การเป็นพี่เลี้ยง (Mentoring)" },
@@ -119,16 +134,6 @@ const choiceOp = ref<DataOptionTechnique[]>([
   { value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" },
   { value: "MANUAL", label: "กรอกเอง" },
 ]);
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  messageError,
-  success,
-  dialogMessageNotify,
-} = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const id = defineModel<string>("id", { required: true });
@@ -182,6 +187,7 @@ function close() {
   props.getAll?.();
 }
 
+/** บันทึกการพัฒนา */
 function onSubmit() {
   if (
     isDevelopment70.value == false &&
@@ -228,6 +234,80 @@ function onSubmit() {
     });
   }
 }
+
+const customPosition = () => ({ top: "385px", left: "410px" });
+
+/** ดึงข้อมูลจากปี */
+async function getDataByYear() {
+  if (formData.year) {
+    showLoader();
+    http
+      .get(config.API.developmentMain + `/done?year=${formData.year}`)
+      .then(async (res) => {
+        const data = await res.data.result.data;
+        projectOpMain.value = data;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+}
+
+/**
+ * ดึงข้อมูลจากหัวข้อโครงการ
+ * @param val ข้อมูลจากปี
+ */
+function getProjectDetail(val: any) {
+  showLoader();
+  http
+    .get(config.API.developmentMain + `/tab3_1/${val.id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formData.name = val.projectName;
+      formData.group = data.group;
+      formData.isDevelopment70 = data.isDevelopment70;
+      formData.isDevelopment20 = data.isDevelopment20;
+      formData.isDevelopment10 = data.isDevelopment10;
+
+      development.value = data.developmentProjectTechniqueActuals;
+      reasonDevelopment70.value =
+        data.developmentProjectTechniqueActuals.includes("other1")
+          ? data.reasonDevelopment70
+          : "";
+      reasonDevelopment20.value =
+        data.developmentProjectTechniqueActuals.includes("other2")
+          ? data.reasonDevelopment20
+          : "";
+      reasonDevelopment10.value =
+        data.developmentProjectTechniqueActuals.includes("other3")
+          ? data.reasonDevelopment10
+          : "";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  projectName.value = "";
+  update(() => {
+    projectOp.value = projectOpMain.value.filter(
+      (e: any) => e.projectName.search(val) !== -1
+    );
+  });
+}
+
 watch(
   () => id.value,
   (i) => {
@@ -280,73 +360,6 @@ watch(
     }
   }
 );
-
-const customPosition = () => ({ top: "385px", left: "410px" });
-async function getDataByYear() {
-  if (formData.year) {
-    showLoader();
-    http
-      .get(config.API.developmentMain + `/done?year=${formData.year}`)
-      .then(async (res) => {
-        const data = await res.data.result.data;
-        projectOpMain.value = data;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
-}
-
-function getProjectDetail(val: any) {
-  showLoader();
-  http
-    .get(config.API.developmentMain + `/tab3_1/${val.id}`)
-    .then((res) => {
-      const data = res.data.result;
-      formData.name = val.projectName;
-      formData.group = data.group;
-      formData.isDevelopment70 = data.isDevelopment70;
-      formData.isDevelopment20 = data.isDevelopment20;
-      formData.isDevelopment10 = data.isDevelopment10;
-
-      development.value = data.developmentProjectTechniqueActuals;
-      reasonDevelopment70.value =
-        data.developmentProjectTechniqueActuals.includes("other1")
-          ? data.reasonDevelopment70
-          : "";
-      reasonDevelopment20.value =
-        data.developmentProjectTechniqueActuals.includes("other2")
-          ? data.reasonDevelopment20
-          : "";
-      reasonDevelopment10.value =
-        data.developmentProjectTechniqueActuals.includes("other3")
-          ? data.reasonDevelopment10
-          : "";
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * function ค้นหาข้อมูลใน option
- * @param val คำค้นหา
- * @param update function
- */
-function filterOptionFn(val: string, update: Function) {
-  projectName.value = "";
-  update(() => {
-    projectOp.value = projectOpMain.value.filter(
-      (e: any) => e.projectName.search(val) !== -1
-    );
-  });
-}
 </script>
 <template>
   <q-dialog persistent v-model="modal">
@@ -539,19 +552,6 @@ function filterOptionFn(val: string, update: Function) {
                   </div>
                 </div>
               </div>
-
-              <!-- <q-checkbox
-                v-model="formData.isDevelopment70"
-                label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
-              />
-              <q-checkbox
-                v-model="formData.isDevelopment20"
-                label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
-              />
-              <q-checkbox
-                v-model="formData.isDevelopment10"
-                label="10 การฝึกอบรมอื่นๆ"
-              /> -->
             </div>
             <div class="col-12">
               <q-input
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue
index fbb6337c6..a1c16cf11 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue
@@ -1,21 +1,37 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
+import { reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
-import { reactive, ref, onMounted, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type {
   DataOption,
   typeOp,
   NewPagination,
   tableType,
-  FormData,
 } from "@/modules/14_KPI/interface/index/Main";
-import { useRouter } from "vue-router";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+  findOrgName,
+} = mixin;
+
+const total = ref<number>(0);
+const maxPage = ref<number>(1);
 const searchRules = ref<boolean>(false);
 const selected = ref<any[]>([]);
 const personId = ref<string>("");
@@ -29,20 +45,6 @@ const typeOps = ref<typeOp[]>([
   { id: "firstname", name: "ชื่อ" },
   { id: "lastname", name: "นามสกุล" },
 ]);
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  dialogConfirm,
-  dialogMessageNotify,
-  findOrgName,
-  findPosMasterNo,
-} = mixin;
-
-const router = useRouter();
 
 const modalDialog = defineModel<boolean>("modal", { required: true });
 const yearDialog = ref<number | any>(new Date().getFullYear());
@@ -72,32 +74,6 @@ const evaluatorIdMainOp = ref<DataOption[]>([]);
 const commanderIdMainOp = ref<DataOption[]>([]);
 const commanderHighMainOp = ref<DataOption[]>([]);
 
-/**
- * ข้อมูลทั้งก้อน form
- */
-const formData = reactive<FormData>({
-  personalId: "",
-  prefix: "",
-  firstname: "",
-  lastname: "",
-  position: "",
-  phone: "",
-  email: "",
-  qualification: "",
-});
-
-function onCloseDialog() {
-  modalDialog.value = false;
-  formRound.kpiPeriodId = { id: "", name: "", isClosed: false };
-  yearDialog.value = new Date().getFullYear();
-  rows.value = [];
-  formRound.evaluatorId = "";
-  formRound.commanderId = "";
-  formRound.commanderHighId = "";
-  selected.value = [];
-  search.value = "";
-  type.value = "citizenId";
-}
 /** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
 const visibleColumnsRespondent = ref<string[]>([
   "no",
@@ -164,6 +140,21 @@ const columnsRespondent = ref<QTableProps["columns"]>([
   },
 ]);
 
+/** ปิด popup และ clear ค่า */
+function onCloseDialog() {
+  modalDialog.value = false;
+  formRound.kpiPeriodId = { id: "", name: "", isClosed: false };
+  yearDialog.value = new Date().getFullYear();
+  rows.value = [];
+  formRound.evaluatorId = "";
+  formRound.commanderId = "";
+  formRound.commanderHighId = "";
+  selected.value = [];
+  search.value = "";
+  type.value = "citizenId";
+}
+
+/** ดึงข้อมูลตามรอบการประเมิน */
 function fetchRoundOption() {
   showLoader();
   http
@@ -195,6 +186,12 @@ function fetchRoundOption() {
     });
 }
 
+/**
+ * ฟิลเตอร์ตาม input
+ * @param val ค่าจาก input
+ * @param update function Quasar
+ * @param refData เเยกประเภท
+ */
 function filterOption(val: any, update: Function, refData: string) {
   switch (refData) {
     case "evaluatorIdOp":
@@ -223,13 +220,12 @@ function filterOption(val: any, update: Function, refData: string) {
   }
 }
 
+/** เช็ครอบการประเมินที่ปิดรอบ */
 function checkClosed() {
   isRoundClose.value = formRound.kpiPeriodId.isClosed;
 }
 
-const total = ref<number>(0);
-const maxPage = ref<number>(1);
-
+/** ค้นหาตัวชี้วัดตาม ค่า input */
 async function searchInput(check: boolean) {
   if (check) {
     searchRules.value = check;
@@ -271,6 +267,7 @@ function updateSelect() {
   search.value = "";
 }
 
+/** ดึงข้อมูล ผู้ประเมิน */
 function getOrgOp(check: boolean, id: string) {
   if (check == false) {
     http
@@ -307,6 +304,7 @@ function getOrgOp(check: boolean, id: string) {
   }
 }
 
+/** บันทึกข้อมูล */
 function onSubmit() {
   if (selected.value.length == 0) {
     dialogMessageNotify($q, "กรุณาเลือกรายชื่อผู้ประเมิน");
@@ -339,14 +337,25 @@ function onSubmit() {
   }
 }
 
+/** เปิด/ปิด popup  */
 function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
+/** route ไปหน้ารายละเอียด */
 function redirectViewDetail(id: string) {
   router.push(`/KPI-list/${id}`);
 }
 
+/**
+ * function อัปเดท paging
+ * @param initialPagination ข้อมูล pagination
+ */
+async function updatePagination(initialPagination: NewPagination) {
+  query.page = 1;
+  query.pageSize = initialPagination.rowsPerPage;
+}
+
 watch(
   () => modalDialog.value,
   (n) => {
@@ -356,15 +365,6 @@ watch(
   }
 );
 
-/**
- * function อัปเดท paging
- * @param initialPagination ข้อมูล pagination
- */
-async function updatePagination(initialPagination: NewPagination) {
-  query.page = 1;
-  query.pageSize = initialPagination.rowsPerPage;
-}
-
 watch(
   () => query.pageSize,
   () => {
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
index f9a23e82f..455bb5a4a 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import DialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { ref, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
-  dialogConfirm,
-  success,
   showLoader,
   hideLoader,
   messageError,
@@ -23,9 +22,6 @@ const {
   date2Thai,
 } = mixin;
 
-const route = useRoute();
-const router = useRouter();
-const id = ref<string>(route.params.id as string);
 const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
 const rows = ref<any[]>([]);
@@ -164,6 +160,7 @@ const columns = ref<QTableProps["columns"]>([
     format: (val) => statusText(val),
   },
 ]);
+
 const visibleColumns = ref<string[]>([
   "no",
   "name",
@@ -179,7 +176,8 @@ const visibleColumns = ref<string[]>([
   "commandNo",
 ]);
 
-const statusText = (val: string) => {
+/** แปลง สถานะเป็น text */
+function statusText(val: string) {
   switch (val) {
     case "WAITTING":
       return "รอดำเนินการ";
@@ -197,12 +195,14 @@ const statusText = (val: string) => {
     default:
       return "-";
   }
-};
+}
 
+/** ปิด popup  */
 function close() {
   modal.value = false;
 }
 
+/** ดึงข้อมูล */
 function getData() {
   showLoader();
   http
@@ -271,20 +271,6 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-              <!-- <template v-slot:pagination="scope">
-                ทั้งหมด {{ total }} รายการ
-                <q-pagination
-                  v-model="formQuery.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(totalList)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="fetchList"
-                ></q-pagination>
-              </template> -->
             </d-table>
           </div>
         </div>
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue
index bbb9c4221..b2e16a8ac 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { ref } from "vue";
 import type { QTableProps } from "quasar";
 
-const mixin = useCounterMixin();
-const { showLoader, hideLoader } = mixin;
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const modal = defineModel<boolean>("modal", { required: true });
 const rows = defineModel<any>("rows", { required: true });
 const dataRows = ref<any[]>([]);
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue
index 19f345581..70492b194 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue
@@ -1,10 +1,5 @@
 <script setup lang="ts">
-import { watch, ref } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
 
 interface ListCriteria {
   id: string;
@@ -12,9 +7,6 @@ interface ListCriteria {
   description: string;
 }
 
-const $q = useQuasar();
-const dataList = ref<ListCriteria[]>([]);
-const { showLoader, hideLoader, messageError } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true });
 const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
   required: true,
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
deleted file mode 100644
index dfe431689..000000000
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { QTableProps } from "quasar";
-import { ref, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useKpiDataStore } from "@/modules/14_KPI/store";
-
-const store = useKpiDataStore();
-
-const route = useRoute();
-const router = useRouter();
-const id = ref<string>(route.params.id as string);
-const work = ref<boolean>(false);
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  success,
-  showLoader,
-  hideLoader,
-  messageError,
-  findPosMasterNoOld,
-  findOrgNameOld,
-  date2Thai,
-} = mixin;
-
-const modal = defineModel<boolean>("modal", { required: true });
-const isProbation = defineModel<boolean>("isProbation", { required: true });
-
-function close() {
-  modal.value = false;
-}
-
-function getData() {
-  showLoader();
-  http
-    .get(config.API.profilePosition + `/${store.dataProfile.profileId}`)
-    .then((res) => {
-      const data = res.data.result.isProbation;
-      work.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-watch(
-  () => modal.value,
-  (n) => {
-    if (n == true) {
-      getData();
-    }
-  }
-);
-</script>
-
-<template>
-  <q-dialog persistent v-model="modal">
-    <q-card bordered style="min-width: 20vw">
-      <DialogHeader tittle="สถานะการทดลองงาน" :close="close" />
-      <q-separator />
-      <q-card-section class="q-pa-sm">
-        <div class="row">
-          <div class="col-12 text-center bg-grey-1 q-pa-md rounded-borders">
-            <span class="text-weight-bold text-teal">{{
-              isProbation ? `อยู่ระหว่างทดลองงาน` : "-"
-            }}</span>
-          </div>
-        </div>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogViewInfo.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogViewInfo.vue
index 12c71e88b..b964cde4a 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogViewInfo.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogViewInfo.vue
@@ -2,13 +2,13 @@ divdiv
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
 
diff --git a/src/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue b/src/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
index 9239d4eec..62cf9c0ec 100644
--- a/src/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
+++ b/src/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
@@ -126,6 +126,7 @@ function updateAchievement(index: number, data: any) {
   }
 }
 
+/** บันทึกข้อมูล ประเมินผลสัมฤทธิ์ของงาน */
 function onSubmit() {
   dialogConfirm($q, async () => {
     try {
@@ -213,34 +214,6 @@ function onSubmit() {
                         </q-tooltip>
                       </q-btn>
                     </q-btn-group>
-
-                    <!-- <q-rating
-                      v-model="props.row.point"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="store.ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                      @update:model-value="
-                        updateAchievement(props.rowIndex, props.row)
-                      "
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>{{ props.row.achievement1 }}</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
-                      </template>
-                    </q-rating> -->
                   </div>
                   <div v-else-if="col.name === 'achievement'">
                     {{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
diff --git a/src/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue b/src/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
index e4120bd4e..5c00d1867 100644
--- a/src/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
+++ b/src/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
+import { ref, computed } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
-import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 
-import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { ListCriteria } from "@/modules/14_KPI/interface/request/index";
+import type { ListCriteria } from "@/modules/14_KPI/interface/request/Index";
+
+import DialogHeader from "@/components/DialogHeader.vue";
 
 const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
   required: true,
@@ -23,14 +24,7 @@ const props = defineProps({
   getData: Function,
   default: () => console.log("not function"),
 });
-const {
-  dialogConfirm,
-  hideLoader,
-  showLoader,
-  messageError,
-  success,
-  dialogMessageNotify,
-} = useCounterMixin();
+const { dialogConfirm, messageError, dialogMessageNotify } = useCounterMixin();
 const store = useKpiDataStore();
 const $q = useQuasar();
 const modal = defineModel<boolean>("modal", { required: true });
@@ -191,27 +185,6 @@ function onSubmit() {
                             </q-tooltip>
                           </q-btn>
                         </q-btn-group>
-
-                        <!-- <q-rating
-                          v-model="props.row.point"
-                          max="5"
-                          size="sm"
-                          color="grey"
-                          :color-selected="store.ratingColors"
-                          label="ระดับการประเมินพฤติกรรม"
-                        >
-                          <template
-                            v-for="(i, index) in sortedDataListCriteria"
-                            :key="i.level"
-                            v-slot:[`tip-${index+1}`]
-                          >
-                            <q-tooltip>
-                              <div class="text-body2">
-                                <span v-html="i.description"></span>
-                              </div>
-                            </q-tooltip>
-                          </template>
-                        </q-rating> -->
                       </div>
                     </div>
                     <div v-else-if="col.name === 'summary'">
diff --git a/src/modules/14_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue b/src/modules/14_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue
index 4f2fe3c79..3869e2a9d 100644
--- a/src/modules/14_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue
+++ b/src/modules/14_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import DialogHeader from "@/components/DialogHeader.vue";
+import { ref } from "vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
 
 const props = defineProps({
   getAll: Function,
@@ -13,17 +15,14 @@ const props = defineProps({
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
-  dialogConfirm,
   showLoader,
   hideLoader,
   success,
   messageError,
-  dialogMessageNotify,
 } = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const rows = defineModel<any[]>("data", { required: true });
-const summary = ref<number | null>(null);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
diff --git a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
index 913af37fb..3915ed6c1 100644
--- a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
@@ -2,33 +2,25 @@
 import { computed, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
-import config from "@/app.config";
-import http from "@/plugins/http";
-
 import type { QTableProps } from "quasar";
 
+import config from "@/app.config";
+import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+
 import Dialog from "@/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue";
-// import Dialog03 from "@/modules/14_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue";
 import DialogEvaluate from "@/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue";
 import DialogViewInfo from "@/modules/14_KPI/components/Tab/Dialog/DialogViewInfo.vue";
 import DialogProgress from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/14_KPI/store";
-
 const $q = useQuasar();
 const store = useKpiDataStore();
 const route = useRoute();
 const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
-const {
-  date2Thai,
-  dialogRemove,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = useCounterMixin();
+const { dialogRemove, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
 
 const title = defineModel<string>("title", { required: true });
 const rows = defineModel<any[]>("data", { required: true });
@@ -122,81 +114,14 @@ const columns = ref<QTableProps["columns"]>([
 const kpiUserPlannedId = ref<string>("");
 const filterKeyword = ref<string>("");
 const modal = ref<boolean>(false);
-const modalAssigned = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const modalEvaluate = ref<boolean>(false);
 const modalViewInfo = ref<boolean>(false);
 
-function onAdd(edit: boolean = false, id: string = "") {
-  isStatusEdit.value = edit;
-  kpiUserPlannedId.value = id;
-  // if (numpage.value !== 3) {
-  modal.value = true;
-  // } else if (numpage.value == 3) {
-  //   modalAssigned.value = true;
-  // }
-}
-
-function onClickView(id: string) {
-  checkDetail.value = true;
-  kpiUserPlannedId.value = id;
-  modal.value = true;
-}
-
-async function onEvaluate() {
-  modalEvaluate.value = true;
-}
-
-function onDelete(id: string) {
-  dialogRemove($q, async () => {
-    try {
-      showLoader();
-      const url =
-        numpage.value === 1
-          ? config.API.kpiAchievement("planned") + `/${id}`
-          : numpage.value === 2
-          ? config.API.kpiAchievement("role") + `/${id}`
-          : numpage.value === 3
-          ? config.API.kpiAchievement("special") + `/${id}`
-          : "";
-      await http.delete(url);
-      await props.fetchList?.();
-      await success($q, "ลบข้อมูลสำเร็จ");
-    } catch (err) {
-      messageError($q, err);
-    } finally {
-      hideLoader();
-    }
-  });
-}
-
 const modalProgress = ref<boolean>(false);
 const modalProblem = ref<boolean>(false);
 const type = ref<string>("");
 const idList = ref<string>("");
-function openPopupProgress(id: string) {
-  modalProgress.value = true;
-  type.value =
-    numpage.value === 1 ? "plan" : numpage.value === 2 ? "role" : "special";
-  idList.value = id;
-}
-
-function openPopupProblem(id: string) {
-  modalProblem.value = true;
-
-  type.value =
-    numpage.value === 1 ? "plan" : numpage.value === 2 ? "role" : "special";
-  idList.value = id;
-}
-
-watch(
-  () => modal.value,
-  () => {
-    if (!modal.value) {
-      props.fetchList?.();
-    }
-  }
-);
 
 const isEditStep1 = computed(() => {
   return (
@@ -220,23 +145,74 @@ const isEditStep3 = computed(() => {
   );
 });
 
-// watch(
-//   () => modalAssigned.value,
-//   () => {
-//     if (!modalAssigned.value) {
-//       props.fetchList?.();
-//     }
-//   }
-// );
+/** เพิ่มข้อมูล */
+function onAdd(edit: boolean = false, id: string = "") {
+  isStatusEdit.value = edit;
+  kpiUserPlannedId.value = id;
+  modal.value = true;
+}
 
-// watch(
-//   () => modalEvaluate.value,
-//   () => {
-//     if (!modalEvaluate.value) {
-//       props.fetchList?.();
-//     }
-//   }
-// );
+/**  เปิด รายละเอียด */
+function onClickView(id: string) {
+  checkDetail.value = true;
+  kpiUserPlannedId.value = id;
+  modal.value = true;
+}
+
+/** เปิด popup ประเมิน */
+async function onEvaluate() {
+  modalEvaluate.value = true;
+}
+
+/** ลบ ข้อมูล */
+function onDelete(id: string) {
+  dialogRemove($q, async () => {
+    try {
+      showLoader();
+      const url =
+        numpage.value === 1
+          ? config.API.kpiAchievement("planned") + `/${id}`
+          : numpage.value === 2
+          ? config.API.kpiAchievement("role") + `/${id}`
+          : numpage.value === 3
+          ? config.API.kpiAchievement("special") + `/${id}`
+          : "";
+      await http.delete(url);
+      await props.fetchList?.();
+      await success($q, "ลบข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/** เปิด popup รายงานความก้าวหน้า */
+function openPopupProgress(id: string) {
+  modalProgress.value = true;
+  type.value =
+    numpage.value === 1 ? "plan" : numpage.value === 2 ? "role" : "special";
+  idList.value = id;
+}
+
+/** เปิด popup รายงานปัญหา */
+function openPopupProblem(id: string) {
+  modalProblem.value = true;
+
+  type.value =
+    numpage.value === 1 ? "plan" : numpage.value === 2 ? "role" : "special";
+  idList.value = id;
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (!modal.value) {
+      props.fetchList?.();
+    }
+  }
+);
 </script>
 
 <template>
@@ -416,96 +392,6 @@ const isEditStep3 = computed(() => {
             </td>
           </q-tr>
         </template>
-        <!-- <template #item="props">
-          <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-            <q-card bordered flat>
-              <div class="row justify-end">
-                <q-btn
-                  flat
-                  round
-                  icon="info"
-                  color="info"
-                  size="14px"
-                  @click="onClickView(props.row.id)"
-                >
-                  <q-tooltip>รายละเอียด</q-tooltip>
-                </q-btn>
-              </div>
-
-              <q-separator />
-              <q-list>
-                <q-item
-                  v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
-                  :key="col.name"
-                >
-                  <q-item-section>
-                    <q-item-label caption>{{ col.label }}</q-item-label>
-                    <q-item-label>{{ col.value ?? "-" }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-              <q-separator />
-              <q-card-actions
-                align="around"
-                v-if="
-                  (store.dataEvaluation.evaluationStatus == 'APPROVE' &&
-                    store.tabMain === '2') ||
-                  store.tabMain === '3'
-                "
-              >
-                <q-btn
-                  flat
-                  round
-                  icon="mdi-developer-board"
-                  color="blue-6"
-                  size="12px"
-                  dense
-                  @click="openPopupProgress(props.row.id)"
-                >
-                  <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
-                </q-btn>
-                <q-btn
-                  flat
-                  round
-                  icon="warning"
-                  color="red-5"
-                  size="12px"
-                  dense
-                  main="problem"
-                  @click="openPopupProblem(props.row.id)"
-                >
-                  <q-tooltip>รายงานปัญหา</q-tooltip>
-                </q-btn>
-              </q-card-actions>
-
-              <q-card-actions align="around" v-if="isEditStep1">
-                <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>
-              </q-card-actions>
-            </q-card>
-          </div>
-        </template> -->
       </d-table>
     </q-card-section>
   </q-card>
@@ -513,42 +399,35 @@ const isEditStep3 = computed(() => {
   <Dialog
     v-model:modal="modal"
     :numpage="numpage"
-    v-model:isStatusEdit="isStatusEdit"
-    :kpiUserPlannedId="kpiUserPlannedId"
+    v-model:is-status-edit="isStatusEdit"
+    :kpi-user-planned-id="kpiUserPlannedId"
     v-model:checkDetail="checkDetail"
   />
 
-  <!-- <Dialog03
-    v-model:modal="modalAssigned"
-    :numpage="numpage"
-    :isStatusEdit="isStatusEdit"
-    :kpiUserPlannedId="kpiUserPlannedId"
-  /> -->
-
   <DialogEvaluate
     v-model:modal="modalEvaluate"
     :data="rows"
     :numpage="numpage"
-    :fetchList="fetchList"
+    :fetch-list="fetchList"
   />
 
   <DialogViewInfo
     v-model:modal="modalViewInfo"
     :numpage="numpage"
-    :isStatusEdit="isStatusEdit"
-    :kpiUserPlannedId="kpiUserPlannedId"
+    :is-status-edit="isStatusEdit"
+    :kpi-user-planned-id="kpiUserPlannedId"
   />
 
   <DialogProgress
     v-model:modal="modalProgress"
     v-model:type="type"
     v-model:rows="rows"
-    :idList="idList"
+    :id-list="idList"
   />
   <DialogProblem
     v-model:modal="modalProblem"
     v-model:type="type"
-    :idList="idList"
+    :id-list="idList"
   />
 </template>
 
diff --git a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
index 73bb4f235..32aac1c71 100644
--- a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { onMounted, ref, computed, watch } from "vue";
-import Dialog from "@/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue";
-import DialogEvaluate from "@/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
-import DialogProgress from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
-import DialogProblem from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
-
+import { onMounted, ref, computed } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/14_KPI/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
 import type {
   FormCapacityList,
   ListCriteria,
   DataOptions,
-} from "@/modules/14_KPI/interface/request/index";
+} from "@/modules/14_KPI/interface/request/Index";
 
 import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
 import DialogCompetncyByRow from "@/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
 import DialogLevel from "@/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue";
+import Dialog from "@/modules/14_KPI/components/Tab/Dialog/04_FormCompetency.vue";
+import DialogEvaluate from "@/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
+import DialogProgress from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
+import DialogProblem from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
 const modalLevel = ref<boolean>(false);
 const modalCompetncyByRow = ref<boolean>(false);
@@ -41,7 +41,6 @@ const store = useKpiDataStore();
 const route = useRoute();
 const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
 const id = ref<string>(route.params.id as string);
-const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 
 const idCapacity = ref<string | null>(null);
 
@@ -122,16 +121,16 @@ const visibleColumns = ref<string[]>(
     : ["name", "level", "point", "weight"]
 );
 
+const rows = ref<any[]>([]);
+const lists = ref<any>([]);
+
 const typeCompetency = ref<any>("");
 function onAdd(type: string) {
   typeCompetency.value = type;
   modal.value = true;
 }
 
-const rows = ref<any[]>([]);
-const lists = ref<any>([]);
-// const resultEvaluation = ref<string | 0>(0);
-
+/** ดึงข้อมูล สมรรถนะ */
 function getData(type: any) {
   http
     .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
@@ -145,7 +144,6 @@ function getData(type: any) {
       messageError($q, e);
     })
     .finally(async () => {
-      // cal summary
       let result = 0;
       let weight = 0;
       let total = 0;
@@ -209,12 +207,22 @@ function getData(type: any) {
     });
 }
 
+/**
+ * เปิด popup แก้ไข
+ * @param data ข้อมูล row
+ * @param type แยกประเภท
+ */
 function onEdit(data: FormCapacityList, type: string) {
   idCapacity.value = data.id;
   typeCompetency.value = type;
   modal.value = true;
 }
 
+/**
+ * ลบข้อมูล
+ * @param id row
+ * @param type แยกประเภท
+ */
 function onDelete(id: string, type: string) {
   dialogRemove($q, () => {
     showLoader();
@@ -233,11 +241,12 @@ function onDelete(id: string, type: string) {
   });
 }
 
+/** เปิด popup ประเมิน */
 function onEvaluate(type: string) {
   typeCompetency.value = type;
   modalEvaluate.value = true;
 }
-
+const competencyType = ref<any[]>([]);
 const modalProgress = ref<boolean>(false);
 const modalProblem = ref<boolean>(false);
 const type = ref<string>("");
@@ -248,12 +257,6 @@ function openPopupProgress(id: string) {
   idList.value = id;
 }
 
-function openPopupProblem(id: string) {
-  modalProblem.value = true;
-  type.value = "capacity";
-  idList.value = id;
-}
-
 const isEditStep1 = computed(() => {
   return (
     (store.dataEvaluation.evaluationStatus === "NEW" &&
@@ -280,21 +283,13 @@ function onInfo() {
   modalCriteria.value = true;
 }
 
-function onAchievement(data: any) {
-  modalCompetncyByRow.value = true;
-  dataCompetncyByRow.value = data;
-}
-
 function onLevel(num: number, list: any) {
   dataLevel.value = list.filter((i: any) => i.level == num);
   modalLevel.value = true;
 }
 
-const competencyType = ref<any[]>([]);
 onMounted(() => {
   setTimeout(async () => {
-    // console.log("posTypeName===>", store.dataEvaluation.posTypeName);
-
     competencyType.value =
       store.dataEvaluation.posTypeName == "อำนวยการ" ||
       store.dataEvaluation.posTypeName == "บริหาร"
@@ -493,105 +488,6 @@ onMounted(() => {
               </q-td>
             </q-tr>
           </template>
-          <!-- <template #item="props">
-            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-              <q-card bordered flat>
-                <q-list>
-                  <q-item
-                    v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
-                    :key="col.name"
-                  >
-                    <q-item-section>
-                      <q-item-label caption>{{ col.label }}</q-item-label>
-                      <q-item-label v-if="col.name == 'createDate'">
-                        {{ col.value ? date2Thai(col.value) : "-" }}
-                      </q-item-label>
-                      <q-item-label v-else-if="col.name == 'point'">
-                        <q-btn-group outline>
-                          <q-btn
-                            v-for="(i, index) in sortedDataListCriteria"
-                            :key="index"
-                            :class="props.row.point == i.level && 'active'"
-                            outline
-                            color="grey-6"
-                            :label="i.level"
-                          >
-                            <q-tooltip>
-                              <div class="text-body2">
-                                <span v-html="i.description"></span>
-                              </div>
-                            </q-tooltip>
-                          </q-btn>
-                        </q-btn-group>
-                      </q-item-label>
-                      <q-item-label v-else-if="col.name == 'summary'">
-                        {{
-                          props.row.point !== 0
-                            ? (props.row.point / 5) * props.row.weight
-                            : "-"
-                        }}
-                      </q-item-label>
-                      <q-item-label v-else>{{ col.value ?? "-" }}</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-                <q-separator />
-                <q-card-actions
-                  align="around"
-                  v-if="
-                    (store.dataEvaluation.evaluationStatus == 'APPROVE' &&
-                      store.tabMain === '2') ||
-                    store.tabMain === '3'
-                  "
-                >
-                  <q-btn
-                    flat
-                    round
-                    icon="mdi-developer-board"
-                    color="blue-6"
-                    size="12px"
-                    dense
-                    @click="openPopupProgress(props.row.id)"
-                  >
-                    <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    flat
-                    round
-                    icon="warning"
-                    color="red-5"
-                    size="12px"
-                    dense
-                    main="problem"
-                    @click="openPopupProblem(props.row.id)"
-                  >
-                    <q-tooltip>รายงานปัญหา</q-tooltip>
-                  </q-btn>
-                </q-card-actions>
-
-                <q-card-actions align="around" v-if="isEditStep1">
-                  <q-btn
-                    flat
-                    round
-                    icon="edit"
-                    color="edit"
-                    @click.stop.pervent="onEdit(props.row, item.id)"
-                  >
-                    <q-tooltip>แก้ไข </q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    flat
-                    round
-                    icon="delete"
-                    color="red"
-                    @click.stop.pervent="onDelete(props.row.id, item.id)"
-                  >
-                    <q-tooltip>ลบข้อมูล </q-tooltip>
-                  </q-btn>
-                </q-card-actions>
-              </q-card>
-            </div>
-          </template> -->
         </d-table>
       </q-card-section>
     </q-card>
diff --git a/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
index 5e7d0dd95..52d4d26ee 100644
--- a/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/03_Develop.vue
@@ -1,28 +1,25 @@
 <script setup lang="ts">
-import { onMounted, ref, computed, watch, reactive } from "vue";
+import { onMounted, ref, computed } from "vue";
+
+import { useQuasar, type QTableProps } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+
+import type { DevelopListType } from "@/modules/14_KPI/interface/response/KPI";
+
 import DialogDevelop from "@/modules/14_KPI/components/Tab/Dialog/DialogDevelop.vue";
 import DialogEvalutionDevelop from "@/modules/14_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue";
 import DialogProgress from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/14_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
-import { useQuasar, type QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/14_KPI/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
-
-const store = useKpiDataStore();
-const route = useRoute();
-const evaluationId = ref<string>(route.params.id.toString());
-const modalEvaluate = ref<boolean>(false);
-const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
-const rows = ref<any[]>([]);
-const modalDevelop = ref<boolean>(false);
-const idEditDevelop = ref<string>("");
-
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const store = useKpiDataStore();
+const route = useRoute();
 const {
   date2Thai,
   messageError,
@@ -32,11 +29,13 @@ const {
   success,
 } = mixin;
 
-const formData = reactive({
-  isDevelopment70: false,
-  isDevelopment20: false,
-  isDevelopment10: false,
-});
+const evaluationId = ref<string>(route.params.id.toString());
+const modalEvaluate = ref<boolean>(false);
+const checkRoutePermisson = ref<boolean>(route.name == "KPIDetailPage");
+const rows = ref<DevelopListType[]>([]);
+const modalDevelop = ref<boolean>(false);
+const idEditDevelop = ref<string>("");
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -110,68 +109,10 @@ const visibleColumns = ref<string[]>(
     : ["no", "name", "develop", "target"]
 );
 
-function onAdd() {
-  modalDevelop.value = true;
-}
-
-function onEdit(id: string) {
-  modalDevelop.value = true;
-  idEditDevelop.value = id;
-}
-
-function getDevelop() {
-  http
-    .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data;
-
-      store.devScoreVal = rows.value.reduce(
-        (sum: number, e: any) => sum + e.summary,
-        0
-      );
-    });
-}
-
-function onEvaluate() {
-  modalEvaluate.value = true;
-}
-
-function onDelete(id: string) {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.kpiAchievementDevelop + `/${id}`)
-      .then(async () => {
-        await getDevelop();
-        await success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
 const modalProgress = ref<boolean>(false);
 const modalProblem = ref<boolean>(false);
 const type = ref<string>("");
 const idList = ref<string>("");
-function openPopupProgress(id: string) {
-  modalProgress.value = true;
-  type.value = "development";
-  idList.value = id;
-}
-
-function openPopupProblem(id: string) {
-  modalProblem.value = true;
-
-  type.value = "development";
-  idList.value = id;
-}
-
 const isEditStep1 = computed(() => {
   return (
     (store.dataEvaluation.evaluationStatus === "NEW" &&
@@ -194,6 +135,58 @@ const isEditStep3 = computed(() => {
   );
 });
 
+function openPopupProgress(id: string) {
+  modalProgress.value = true;
+  type.value = "development";
+  idList.value = id;
+}
+
+function onAdd() {
+  modalDevelop.value = true;
+}
+
+function onEdit(id: string) {
+  modalDevelop.value = true;
+  idEditDevelop.value = id;
+}
+
+function getDevelop() {
+  http
+    .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+      store.devScoreVal = rows.value.reduce(
+        (sum: number, e: any) => sum + e.summary,
+        0
+      );
+    });
+}
+
+/** เปิด popup ประเมิน */
+function onEvaluate() {
+  modalEvaluate.value = true;
+}
+
+/** ลบข้อมูล */
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.kpiAchievementDevelop + `/${id}`)
+      .then(async () => {
+        await getDevelop();
+        await success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
 onMounted(() => {
   getDevelop();
 });
@@ -337,18 +330,6 @@ onMounted(() => {
                 >
                   <q-tooltip>บันทึกเหตุการณ์/พฤติกรรม</q-tooltip>
                 </q-btn>
-                <!-- <q-btn
-                  flat
-                  round
-                  icon="warning"
-                  color="red-5"
-                  size="12px"
-                  dense
-                  main="problem"
-                  @click="openPopupProblem(props.row.id)"
-                >
-                  <q-tooltip>รายงานปัญหา</q-tooltip>
-                </q-btn> -->
               </div>
 
               <div v-if="isEditStep1 && !checkRoutePermisson">
diff --git a/src/modules/14_KPI/components/results/dialogIndividual.vue b/src/modules/14_KPI/components/results/dialogIndividual.vue
index cd465eb3f..470af8bf5 100644
--- a/src/modules/14_KPI/components/results/dialogIndividual.vue
+++ b/src/modules/14_KPI/components/results/dialogIndividual.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type { DataOptionTechnique } from "@/modules/14_KPI/interface/index/Main";
 /**
  * importType
@@ -17,10 +20,8 @@ import type {
  */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
+const $q = useQuasar();
+const { showLoader, messageError, hideLoader } = useCounterMixin();
 
 /**
  * use
@@ -41,22 +42,6 @@ const checkOtherBox13 = computed<boolean>(() => {
   return development.value.includes("other3");
 });
 
-const isDevelopment70 = computed(() => {
-  return projectTechniquesOp1.value.some((txt) =>
-    development.value.includes(txt.value)
-  );
-});
-const isDevelopment20 = computed(() => {
-  return projectTechniquesOp2.value.some((txt) =>
-    development.value.includes(txt.value)
-  );
-});
-const isDevelopment10 = computed(() => {
-  return projectTechniquesOp3.value.some((txt) =>
-    development.value.includes(txt.value)
-  );
-});
-
 const projectTechniquesOp1 = ref<DataOptionTechnique[]>([
   {
     value: "on_the_job_training",
@@ -121,9 +106,6 @@ const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
   { value: "other3", label: "อื่น ๆ (ระบุ)" },
 ]);
 
-const $q = useQuasar();
-const { showLoader, messageError, hideLoader } = useCounterMixin();
-
 /**
  * props
  */
@@ -163,17 +145,6 @@ const columns = ref<QTableProps["columns"]>([
  */
 const title = ref<string>("");
 const develop = ref<string[]>([]);
-const options = ref<OptionCheckbox[]>([
-  {
-    label: "70 การลงมือปฏิบัต (โดยผู้บังคับบัญชามอบหมาย)",
-    value: "isDevelopment70",
-  },
-  {
-    label: "20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)",
-    value: "isDevelopment20",
-  },
-  { label: "10 การฝึกอบรมอื่นๆ", value: "isDevelopment10" },
-]);
 const target = ref<string>("");
 
 /**
@@ -257,15 +228,6 @@ watch(
           </div>
           <div class="col-12">
             <div class="text-weight-bold">วิธีการพัฒนา</div>
-            <!-- <div class="q-pa-sm">
-              <q-option-group
-                :options="options"
-                type="checkbox"
-                v-model="develop"
-                disable
-              />
-            </div> -->
-
             <div class="row q-col-gutter-md full-width">
               <div class="col-12 col-sm-6 col-md-6 col-lg-4">
                 <span class="text-weight-bold"
diff --git a/src/modules/14_KPI/components/results/tableIndividual.vue b/src/modules/14_KPI/components/results/tableIndividual.vue
index 7343f23f1..ab342fd23 100644
--- a/src/modules/14_KPI/components/results/tableIndividual.vue
+++ b/src/modules/14_KPI/components/results/tableIndividual.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+import { checkPermission } from "@/utils/permissions";
 
 /**
  * importType
@@ -12,21 +16,13 @@ import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 import type {
   ResRound,
   ResDevelopment,
-} from "@/modules/14_KPI/interface/response/index";
+} from "@/modules/14_KPI/interface/response/Index";
 
 /**
  * importComponents
  */
 import DialogIndividual from "@/modules/14_KPI/components/results/dialogIndividual.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/14_KPI/store";
-
-import { checkPermission } from "@/utils/permissions";
-
 /**
  * use
  */
@@ -236,14 +232,6 @@ function onSearchData() {
   fetcDataList();
 }
 
-/**
- * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
- */
-watch(pagination, () => {
-  page.value = 1;
-  pageSize.value = pagination.value.rowsPerPage;
-});
-
 /**
  * function รายละเอียดแผนพัฒนาการปฏิบัติราชการรายบุคคล
  * @param id แผนพัฒนาการปฏิบัติราชการรายบุคคล
@@ -253,6 +241,14 @@ function onClickView(id: string) {
   devId.value = id;
 }
 
+/**
+ * ทำงานเมื่อมีการเปลี่ยนแถวต่อหน้า
+ */
+watch(pagination, () => {
+  page.value = 1;
+  pageSize.value = pagination.value.rowsPerPage;
+});
+
 /**
  * HookLifecycle
  */
diff --git a/src/modules/14_KPI/components/results/tableResults.vue b/src/modules/14_KPI/components/results/tableResults.vue
index e7b39196a..d372aaf93 100644
--- a/src/modules/14_KPI/components/results/tableResults.vue
+++ b/src/modules/14_KPI/components/results/tableResults.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+import { checkPermission } from "@/utils/permissions";
 
 /**
  * importType
@@ -14,13 +18,6 @@ import type {
 } from "@/modules/14_KPI/interface/response/Main";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/14_KPI/store";
-
-import { checkPermission } from "@/utils/permissions";
 /**
  * use
  */
diff --git a/src/modules/14_KPI/interface/request/index.ts b/src/modules/14_KPI/interface/request/index.ts
index b3a079e97..c3c970e77 100644
--- a/src/modules/14_KPI/interface/request/index.ts
+++ b/src/modules/14_KPI/interface/request/index.ts
@@ -62,8 +62,8 @@ interface FormCommentByRole {
   id: string;
   topic: string;
   reason: string;
-  createdFullName: string;
-  score: string;
+  createdFullName?: string;
+  score?: string;
   reasonEvaluator: string;
   reasonCommander: string;
   reasonCommanderHigh: string;
diff --git a/src/modules/14_KPI/interface/response/KPI.ts b/src/modules/14_KPI/interface/response/KPI.ts
index 952de3b9f..4907247b2 100644
--- a/src/modules/14_KPI/interface/response/KPI.ts
+++ b/src/modules/14_KPI/interface/response/KPI.ts
@@ -24,4 +24,20 @@ interface ResUserEvaluation {
   year: number;
 }
 
-export type { ResUserEvaluation };
+interface DevelopListType {
+  id: string;
+  evaluationId: string;
+  target: string;
+  summary: string | null;
+  point: number | null;
+  name: string;
+  achievement10: string;
+  achievement5: string;
+  achievement0: string;
+  isDevelopment70: boolean;
+  isDevelopment20: boolean;
+  isDevelopment10: boolean;
+}
+
+
+export type { ResUserEvaluation,DevelopListType };
diff --git a/src/modules/14_KPI/router.ts b/src/modules/14_KPI/router.ts
index 804cd9685..d259797c7 100644
--- a/src/modules/14_KPI/router.ts
+++ b/src/modules/14_KPI/router.ts
@@ -1,19 +1,6 @@
 const roundPage = () => import("@/modules/14_KPI/views/round.vue");
 const probationDetail = () => import("@/modules/14_KPI/views/mainDetail.vue");
-
-// const IndicatorByPlan = () =>
-//   import("@/modules/14_KPI/views/indicatorByPlan.vue");
-// const IndicatorByPlanDetail = () =>
-//   import("@/modules/14_KPI/components/indicatorByPlan/DetailView.vue");
-// const IndicatorByRole = () =>
-//   import("@/modules/14_KPI/views/indicatorByRole.vue");
-// const IndicatorByRoleDetail = () =>
-//   import("@/modules/14_KPI/components/indicatorByRole/DetailView.vue");
-// const competencyPage = () => import("@/modules/14_KPI/views/competency.vue");
-// const competencyAddPage = () =>
-//   import("@/modules/14_KPI/components/competency/AddPage.vue");
 const listPage = () => import("@/modules/14_KPI/views/list.vue");
-// const detailPage = () => import("@/modules/14_KPI/views/detail.vue");
 const reportPage = () => import("@/modules/14_KPI/views/report.vue");
 const detailView = () => import("@/modules/14_KPI/views/detailView.vue");
 const detailViewPage = () => import("@/modules/14_KPI/views/detailView.vue");
diff --git a/src/modules/14_KPI/store.ts b/src/modules/14_KPI/store.ts
index 4bbdf4d8f..d5a83b009 100644
--- a/src/modules/14_KPI/store.ts
+++ b/src/modules/14_KPI/store.ts
@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { ref, reactive } from "vue";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
-import type { FormQuery } from "@/modules/14_KPI/interface/request/index";
+import type { FormQuery } from "@/modules/14_KPI/interface/request/Index";
 
 export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
   const tabMainevaluator = ref<string>("1");
@@ -190,33 +190,6 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
           (x: DataOption) => x.id == "HEAD" || x.id == "EXECUTIVE"
         );
       }
-      // switch (posTypeName + " " + posLevelName) {
-      //   // case "ทั่วไป ปฏิบัติงาน":
-      //   // case "ทั่วไป ชำนาญงาน":
-      //   // case "ทั่วไป อาวุโส":
-      //   // case "วิชาการ ปฏิบัติการ":
-      //   // case "วิชาการ ชำนาญการ":
-      //   // case "วิชาการ ชำนาญการพิเศษ":
-      //   // case "วิชาการ เชี่ยวชาญ":
-      //   // case "วิชาการ ทรงคุณวุฒิ":
-      //   //   competencyType.value = competencyType.value.filter(
-      //   //     (x: DataOption) => x.id == "HEAD" || x.id == "GROUP"
-      //   //   );
-      //   //   break;
-      //   case "อำนวยการ ต้น":
-      //   case "อำนวยการ สูง":
-      //   case "บริหาร ต้น":
-      //   case "บริหาร สูง":
-      //     competencyType.value = competencyType.value.filter(
-      //       (x: DataOption) => x.id == "HEAD" || x.id == "EXECUTIVE"
-      //     );
-      //     break;
-      //   default:
-      //     competencyType.value = competencyType.value.filter(
-      //       (x: DataOption) => x.id == "HEAD" || x.id == "GROUP"
-      //     );
-      //     break;
-      // }
     }
   }
 
@@ -294,8 +267,6 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
   const rolePerson = ref<string>("USER"); //"USER" | "EVALUATOR" |  "COMMANDER", "COMMANDERHIGH"
   const tabOpen = ref<number>(1);
   function checkStep() {
-    // const role =
-    // dataEvaluation.value.profileId == 'USER'
     rolePerson.value = "USER";
 
     switch (dataEvaluation.value.evaluationStatus) {
diff --git a/src/modules/14_KPI/views/detail.vue b/src/modules/14_KPI/views/detail.vue
index 324e79c47..8fe645f76 100644
--- a/src/modules/14_KPI/views/detail.vue
+++ b/src/modules/14_KPI/views/detail.vue
@@ -10,7 +10,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import type { FormProfile } from "@/modules/14_KPI/interface/request/index";
+import type { FormProfile } from "@/modules/14_KPI/interface/request/Index";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
 // const modalScore = ref<boolean>(false);