From 67d117dcfc1297128207b5104225ccb4562485db Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 10 Sep 2024 11:42:43 +0700
Subject: [PATCH] Refactoring code module 08_KPI

---
 src/modules/00_support/store/Main.ts          |  12 -
 src/modules/01_dashboard/views/Dashboard.vue  |   1 -
 .../components/formDetail/08_MilitaryForm.vue |   1 -
 src/modules/05_leave/store.ts                 |   6 -
 .../06_evaluate/stores/evaluationFunction.ts  |   2 -
 .../interface/response/mainType.ts            |  29 +
 src/modules/07_appealComplain/views/Add.vue   |  43 +-
 src/modules/07_appealComplain/views/Edit.vue  |   1 -
 src/modules/07_appealComplain/views/Form.vue  |  11 +-
 src/modules/07_appealComplain/views/Main.vue  |   7 +-
 .../08_KPI/components/Evaluator/01_TabAll.vue |  15 +-
 .../components/Evaluator/02_TabOther.vue      |  12 +-
 .../08_KPI/components/Tab/01_Assessment.vue   |  34 +-
 .../08_KPI/components/Tab/02_Evaluator.vue    |   6 +-
 .../components/Tab/03_CommanderAbove.vue      |   3 -
 .../Tab/04_CommanderAboveOneStep.vue          |   3 -
 .../08_KPI/components/Tab/04_Result.vue       |   1 -
 .../Tab/Dialog/01_FormIndicator.vue           |  15 +-
 .../Tab/Dialog/03_FormIndicatorSpecial.vue    |  31 +-
 .../Tab/Dialog/04_FormCompetency.vue          |  74 +--
 .../Tab/Dialog/DialogCommentProblem.vue       | 599 +++++++++---------
 .../Tab/Dialog/DialogCommentProgress.vue      |  19 +-
 .../Tab/Dialog/DialogCompetncyByRow.vue       |   8 +-
 .../components/Tab/Dialog/DialogDevelop.vue   | 162 +++--
 .../Tab/Dialog/DialogGovernment.vue           |  67 +-
 .../components/Tab/Dialog/DialogLevel.vue     |   8 +-
 .../Tab/Dialog/DialogListCriteria.vue         |  14 +-
 .../components/Tab/Dialog/DialogStatus.vue    |  25 +-
 .../components/Tab/Dialog/DialogViewInfo.vue  |   4 +-
 .../Tab/DialogEvaluate/01_Indicator.vue       |  38 +-
 .../Tab/DialogEvaluate/02_Competenct.vue      |  46 +-
 .../03_DialogEvalutionDevelop.vue             |  20 +-
 src/modules/08_KPI/components/Tab/TabMain.vue |   1 +
 .../components/Tab/Topic/01_Indicator.vue     |  50 +-
 .../components/Tab/Topic/02_Competency.vue    | 117 ++--
 .../components/Tab/Topic/03_Develop.vue       |  91 ++-
 src/modules/08_KPI/interface/index/Main.ts    |  71 ++-
 src/modules/08_KPI/interface/request/index.ts |  20 +
 .../08_KPI/interface/response/index.ts        |  55 +-
 src/modules/08_KPI/store.ts                   |  40 +-
 src/modules/08_KPI/views/form.vue             | 194 +++---
 src/modules/08_KPI/views/main.vue             | 106 ++--
 src/modules/08_KPI/views/mainEvaluator.vue    |  53 +-
 .../11_probation/component/01_Assign.vue      |   9 -
 .../component/editPage/01_result.vue          |   1 -
 src/modules/12_organization/views/main.vue    |   2 -
 src/modules/13_portfolio/views/Add.vue        |   1 -
 src/router/loader.ts                          |   1 -
 48 files changed, 989 insertions(+), 1140 deletions(-)
 delete mode 100644 src/modules/08_KPI/components/Tab/03_CommanderAbove.vue
 delete mode 100644 src/modules/08_KPI/components/Tab/04_CommanderAboveOneStep.vue

diff --git a/src/modules/00_support/store/Main.ts b/src/modules/00_support/store/Main.ts
index 5302d69..12383f0 100644
--- a/src/modules/00_support/store/Main.ts
+++ b/src/modules/00_support/store/Main.ts
@@ -52,13 +52,11 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
       name: r.name,
       role: r.role,
     });
-    // console.log("online: ", userStatus.value);
   });
 
   socket.on("offline", (socketId: string) => {
     if (socketId === socket.id) return;
     userStatus.value = userStatus.value.filter((v) => v.socketId !== socketId);
-    // console.log("offline: ", userStatus.value);
   });
 
   socket.on("notify-message", (r) => {
@@ -87,8 +85,6 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     }
     socket.emit("mark-read", { issueId: currentIssue.value });
     scrollToEnd();
-    // console.log(r.id);
-    // console.log(message.value?.result.message);
   });
 
   socket.on("read", (r) => {
@@ -97,7 +93,6 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
         if (v.fromUserId === r.fromUserId) return r;
         return v;
       });
-      // console.log("event(read):", messageStatus.value);
     }
   });
 
@@ -108,8 +103,6 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
   }
 
   function sendMessage(content: string, to: string) {
-    // console.log(content);
-    // console.log(to);
     if (content.trim() !== "") {
       socket.emit("message", { to, content });
       scrollToEnd();
@@ -128,7 +121,6 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
       });
     if (res && res.data) {
       messageStatus.value = res.data;
-      // console.log(messageStatus.value);
     }
   }
 
@@ -165,7 +157,6 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
 
     if (res && res.data) {
       issue.value = res.data;
-      // console.log(JSON.stringify(res.data, null, 2));
     }
   }
 
@@ -183,7 +174,6 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
 
     if (res && res.data) {
       issueCategory.value = res.data;
-      // console.log(JSON.stringify(res.data, null, 2));
     }
   }
 
@@ -206,7 +196,6 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
 
     if (res) {
       fetchIssue();
-      // console.log(JSON.stringify(res.data, null, 2));
     }
   }
 
@@ -218,7 +207,6 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
       });
     if (res && res.data) {
       issue.value = res.data;
-      // console.log(issue.value);
     }
   }
 
diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 2ab5984..b847b1d 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -122,7 +122,6 @@ const fetchlistInbox = async (index: number) => {
         totalInbox.value = res.data.result.total;
         let listItem: InboxDetail[] = [];
         if (data && data.length > 0) {
-          console.log(data);
 
           data.map((e: InboxList) => {
             listItem.push({
diff --git a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
index 97c0f08..8f57aa2 100644
--- a/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
@@ -8,7 +8,6 @@ const props = defineProps({
     required: true,
   },
 });
-console.log(props);
 </script>
 
 <template>
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index a6eaf9a..d29167b 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -219,13 +219,7 @@ export const useLeaveStore = defineStore("Leave", () => {
    * @param subitem ประเภทแบบฟอร์มย่อย
    */
   function typeConvert(item: string, subitem: any) {
-    // console.log('first',item)
-    // if (item !== "LV-006" && item !== "LV-008") {
     typeLeave.value = convertSubtitle(item);
-    // } else if (item === "LV-006") {
-    //   typeLeave.value = convertSubtitleInfo(subitem);
-    // } else if (item === "LV-008") {
-    //   typeLeave.value = convertSubtitleInfo2(subitem);
     // }
     typeId.value = convertId(item);
   }
diff --git a/src/modules/06_evaluate/stores/evaluationFunction.ts b/src/modules/06_evaluate/stores/evaluationFunction.ts
index ca66668..a683f9c 100644
--- a/src/modules/06_evaluate/stores/evaluationFunction.ts
+++ b/src/modules/06_evaluate/stores/evaluationFunction.ts
@@ -156,7 +156,6 @@ async function nextPrapare(type: string, body: any) {
   await http
     .put(config.API.evaluationPreparedoc(store.evaluateId, type), body)
     .then((res) => {
-      console.log(res);
     })
     .catch((err) => {
       messageError($q, err);
@@ -172,7 +171,6 @@ async function nextCheckDoc(type: string) {
   await http
     .put(config.API.evaluationCheckdoc(store.evaluateId, type))
     .then((res) => {
-      console.log(res);
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/07_appealComplain/interface/response/mainType.ts b/src/modules/07_appealComplain/interface/response/mainType.ts
index cb8c207..1d49495 100644
--- a/src/modules/07_appealComplain/interface/response/mainType.ts
+++ b/src/modules/07_appealComplain/interface/response/mainType.ts
@@ -60,6 +60,33 @@ interface FileObType {
   pathName: string;
   fileName: string;
 }
+interface FormProfile {
+  profileId: string;
+  fullname: string;
+  citizenId: string;
+  oc: string;
+  position: string;
+}
+
+interface FormDataType {
+  id: string;
+  title: string;
+  type: string;
+  description: string;
+  year: string;
+  caseType: string;
+  caseNumber: string;
+  fullname: string;
+  profileId: string;
+  citizenId: string;
+  status: string;
+  oc: string;
+  position: string;
+  disciplineComplaint_Appeal_Docs: FileObType[];
+  historyStatus: HistoryStatusType[];
+  files: File | null;
+  lastUpdatedAt: Date | null;
+}
 
 export type {
   FormType,
@@ -68,4 +95,6 @@ export type {
   EditDataList,
   HistoryStatusType,
   FileObType,
+  FormDataType,
+  FormProfile
 };
diff --git a/src/modules/07_appealComplain/views/Add.vue b/src/modules/07_appealComplain/views/Add.vue
index f6d267b..eea7d4d 100644
--- a/src/modules/07_appealComplain/views/Add.vue
+++ b/src/modules/07_appealComplain/views/Add.vue
@@ -8,17 +8,22 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 
 import Form from "@/modules/07_appealComplain/views/Form.vue";
-
+import type {
+  FormProfile,
+  FormDataType,
+} from "@/modules/07_appealComplain/interface/response/mainType";
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 
 const { findOrgName, success, messageError, showLoader, hideLoader } = mixin;
 
-const formProfile = reactive<any>({
+const formProfile = reactive<FormProfile>({
   profileId: "",
   fullname: "",
   citizenId: "",
+  oc: "",
+  position: "",
 });
 
 /** ดึงข้อมูลจาก keycloak*/
@@ -46,7 +51,7 @@ function getProFile() {
  * บันทึกข้อมูล
  * @param data ฟอร์มข้อมูล
  */
-function onSubmit(data: any) {
+function onSubmit(data: FormDataType) {
   const formData = new FormData();
   formData.append("profileId", data.profileId);
   formData.append("citizenId", data.citizenId);
@@ -57,23 +62,25 @@ function onSubmit(data: any) {
   formData.append("year", "");
   formData.append("caseType", "");
   formData.append("caseNumber", "");
-  formData.append("file", data.files);
+  if (data.files) {
+    formData.append("file", data.files);
+  }
   formData.append("oc", data.oc);
   formData.append("position", data.position);
-  showLoader();
-  http
-    .post(config.API.appealAdd(), formData)
-    .then((res) => {
-      /** รอรับ id จาก response */
-      router.push(`/appeal-complain/${res.data.result}`);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-    });
+  // showLoader();
+  // http
+  //   .post(config.API.appealAdd(), formData)
+  //   .then((res) => {
+  //     /** รอรับ id จาก response */
+  //     router.push(`/appeal-complain/${res.data.result}`);
+  //     success($q, "บันทึกข้อมูลสำเร็จ");
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(async () => {
+  //     hideLoader();
+  //   });
 }
 
 onMounted(() => {
diff --git a/src/modules/07_appealComplain/views/Edit.vue b/src/modules/07_appealComplain/views/Edit.vue
index 4f1bc26..4cdcf58 100644
--- a/src/modules/07_appealComplain/views/Edit.vue
+++ b/src/modules/07_appealComplain/views/Edit.vue
@@ -90,7 +90,6 @@ async function getReport(fileName: string) {
   await http
     .get(config.API.appealByPrintReport(id.value))
     .then(async (res) => {
-      console.log(res.data.result.data);
       const data = res.data.result;
       await genReport(data, fileName);
     })
diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 0476067..64360b7 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -9,6 +9,7 @@ import type { MyObjectAppealRef } from "@/modules/07_appealComplain/interface/re
 import type {
   HistoryStatusType,
   FileObType,
+  FormDataType,
 } from "@/modules/07_appealComplain/interface/response/mainType";
 
 const $q = useQuasar();
@@ -29,7 +30,8 @@ const fileOb = reactive<FileObType>({
   fileName: "",
 });
 
-const formData = reactive<any>({
+const formData = reactive<FormDataType>({
+  id: "",
   title: "",
   type: "",
   description: "",
@@ -41,8 +43,11 @@ const formData = reactive<any>({
   citizenId: "",
   oc: "",
   position: "",
+  status: "",
   disciplineComplaint_Appeal_Docs: [fileOb],
   historyStatus: [historyStatusOb],
+  files: null,
+  lastUpdatedAt: null,
 });
 
 const props = defineProps({
@@ -98,8 +103,6 @@ function validateForm() {
   if (hasError.every((result) => result === true)) {
     onSubmit(formData);
   } else {
-    console.log("ไม่ผ่าน ");
-    console.log(hasError);
   }
 }
 
@@ -134,7 +137,7 @@ function filePrintDownload(fileName: string) {
  * บันทึก form อุทธรณ์/ร้องทุกข์
  * @param data ข้อมูล
  */
-function onSubmit(data: any) {
+function onSubmit(data: FormDataType) {
   dialogConfirm(
     $q,
     async () => {
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 0a5607a..c251e4f 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -173,7 +173,7 @@ async function getData() {
         filterKeyword.value
       )
     )
-    .then((res: any) => {
+    .then((res) => {
       total.value = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       let data = res.data.result.data;
@@ -436,10 +436,7 @@ onMounted(async () => {
                   <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
                     <q-card bordered flat>
                       <q-list @click="editPage(props.row.id)">
-                        <q-item
-                          v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
-                          :key="col.name"
-                        >
+                        <q-item v-for="col in props.cols" :key="col.name">
                           <q-item-section>
                             <q-item-label caption>{{ col.label }}</q-item-label>
 
diff --git a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
index 4c80e73..715947d 100644
--- a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
+++ b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useRouter } from "vue-router";
+import type { QTableProps } from "quasar";
+
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-import type { QTableProps } from "quasar";
 import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
 import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
 
@@ -25,17 +26,17 @@ const props = defineProps({
   fetchList: { type: Function },
 });
 
-async function redirectViewDetail(id: string) {
-  store.tabMain = await "";
-  router.push(`/KPI-evaluator/${id}`);
-}
-
 const pagination = ref({
   sortBy: "desc",
   descending: false,
   page: 1,
   rowsPerPage: 10,
 });
+
+async function redirectViewDetail(id: string) {
+  store.tabMain = await "";
+  router.push(`/KPI-evaluator/${id}`);
+}
 </script>
 
 <template>
@@ -85,7 +86,7 @@ const pagination = ref({
           <q-card bordered flat @click="redirectViewDetail(props.row.id)">
             <q-list>
               <q-item
-                v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                v-for="col in props.cols"
                 :key="col.name"
               >
                 <q-item-section>
diff --git a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
index 3350472..20aed72 100644
--- a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
+++ b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
@@ -2,16 +2,16 @@
 import { ref } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import type { QTableProps } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
-
-import type { QTableProps } from "quasar";
-import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
-import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
-
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type { FormQuery } from "@/modules/08_KPI/interface/request/index";
+import type { ResEvaluatorAssessor } from "@/modules/08_KPI/interface/response/index";
+
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
@@ -188,7 +188,7 @@ async function onClickApprove(type: string = "") {
             <q-separator />
             <q-list @click="redirectViewDetail(props.row.id)">
               <q-item
-                v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                v-for="col in props.cols"
                 :key="col.name"
               >
                 <q-item-section>
diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 0cd2d32..ff9b550 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch, reactive } from "vue";
-import { useQuasar, type QTableProps } from "quasar";
+import { ref, onMounted, computed, watch } from "vue";
+import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
-import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
-
 import config from "@/app.config";
 import http from "@/plugins/http";
-
-import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
-import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";
-import Develop from "@/modules/08_KPI/components/Tab/Topic/03_Develop.vue";
-
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
+import type { EvaluationIndicatorType } from "@/modules/08_KPI/interface/response/index";
+
+import Work from "@/modules/08_KPI/components/Tab/Topic/01_Indicator.vue";
+import Competency from "@/modules/08_KPI/components/Tab/Topic/02_Competency.vue";
+import Develop from "@/modules/08_KPI/components/Tab/Topic/03_Develop.vue";
+import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
+
 const dataListCriteria = ref<ListCriteria[]>([]);
 
 const modalCriteria = ref<boolean>(false);
@@ -27,14 +27,13 @@ const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
 
-const rows_01 = ref<any[]>();
-const rows_02 = ref<any[]>();
-const rows_03 = ref<any[]>();
+const rows_01 = ref<EvaluationIndicatorType[]>();
+const rows_02 = ref<EvaluationIndicatorType[]>();
+const rows_03 = ref<EvaluationIndicatorType[]>();
 
 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,12 +41,13 @@ const weightAssigned = ref<number>(0);
 const resultPlanned = ref<number>(0);
 const resultRole = ref<number>(0);
 const resultAssigned = ref<number>(0);
+
 function fetchListPlanned() {
   http
     .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
     .then((res) => {
       const data = res.data.result;
-      const newRow = data.map((e: any) => ({
+      const newRow = data.map((e: EvaluationIndicatorType) => ({
         ...e,
         evaluationResults: (e.point / 5) * e.weight,
       }));
@@ -83,7 +83,7 @@ function fetchListRole() {
     .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
     .then((res) => {
       const data = res.data.result;
-      const newRow = data.map((e: any) => ({
+      const newRow = data.map((e: EvaluationIndicatorType) => ({
         ...e,
         evaluationResults: (e.point / 5) * e.weight,
       }));
@@ -281,10 +281,6 @@ onMounted(() => {
             dense
             bordered
             :rows="[
-              // {
-              //   name: 'รวมผลการประเมิน (ร้อยละ)',
-              //   value: store.excusiveIndicator2PercentVal.toFixed(2),
-              // },
               {
                 name: 'ผลการประเมินมิติที่ 2 (คะแนน)',
                 value: store.excusiveIndicator2ScoreVal.toFixed(2),
diff --git a/src/modules/08_KPI/components/Tab/02_Evaluator.vue b/src/modules/08_KPI/components/Tab/02_Evaluator.vue
index 7a1092a..1494c3e 100644
--- a/src/modules/08_KPI/components/Tab/02_Evaluator.vue
+++ b/src/modules/08_KPI/components/Tab/02_Evaluator.vue
@@ -2,17 +2,17 @@
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+import type { QTableProps } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
 
-import type { QTableProps } from "quasar";
 import type { FormComment } from "@/modules/08_KPI/interface/request/index";
 import type { ResEvaluator } from "@/modules/08_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 } =
diff --git a/src/modules/08_KPI/components/Tab/03_CommanderAbove.vue b/src/modules/08_KPI/components/Tab/03_CommanderAbove.vue
deleted file mode 100644
index d47994b..0000000
--- a/src/modules/08_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/08_KPI/components/Tab/04_CommanderAboveOneStep.vue b/src/modules/08_KPI/components/Tab/04_CommanderAboveOneStep.vue
deleted file mode 100644
index 4d5bde7..0000000
--- a/src/modules/08_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/08_KPI/components/Tab/04_Result.vue b/src/modules/08_KPI/components/Tab/04_Result.vue
index b7d85a0..ba2215e 100644
--- a/src/modules/08_KPI/components/Tab/04_Result.vue
+++ b/src/modules/08_KPI/components/Tab/04_Result.vue
@@ -206,7 +206,6 @@ async function downloadReport() {
   await http
     .get(config.API.kpiReport(id.value))
     .then(async (res) => {
-      console.log(res.data.result.data);
       const data = res.data.result;
       await genReport(
         data,
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index 0aa6d8b..3cef789 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_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/08_KPI/store";
 
 import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
@@ -90,7 +89,6 @@ function fetchListPlan() {
   formFilter.nodeId = store.dataProfile.nodeId;
   formFilter.node = store.dataProfile.node;
   formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
-  // const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
 
   showLoader();
   http
@@ -108,6 +106,10 @@ function fetchListPlan() {
     });
 }
 
+/**
+ * ดึงข้อมูลตัวชี้วัด
+ * @param id id
+ */
 function fetchListPlanByid(id: string) {
   showLoader();
   http
@@ -140,8 +142,6 @@ 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() : "";
@@ -183,7 +183,6 @@ function fetchRoleByid(id: string) {
       formDetail.endDate = data.endDate;
 
       listCheckID.value = data.kpiRoleId;
-      // clickList(data.kpiRoleId, true);
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue b/src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
index 82b6efd..0cd3731 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue
@@ -1,27 +1,21 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { FormDataAssigned } from "@/modules/08_KPI/interface/request/index";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 const store = useKpiDataStore();
 
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  dialogConfirm,
-  dialogMessageNotify,
-  success,
-} = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } =
+  useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
 const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
@@ -51,7 +45,6 @@ function fetchspecialByid(id: string) {
     .get(config.API.kpiAchievement("special") + `/${id}`)
     .then((res) => {
       const data = res.data.result;
-
       formData.including = data.including;
       formData.includingName = data.includingName;
       formData.target = data.target;
@@ -143,7 +136,7 @@ watch(
                 bg-color="white"
                 dense
                 class="inputgreen"
-                :rules="[(val) => !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`]"
                 hide-bottom-space
                 lazy-rules
               />
@@ -222,7 +215,7 @@ watch(
                       dense
                       class="inputgreen"
                       :rules="[
-                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                       ]"
                       hide-bottom-space
                       lazy-rules
@@ -242,7 +235,7 @@ watch(
                       dense
                       class="inputgreen"
                       :rules="[
-                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                       ]"
                       hide-bottom-space
                       lazy-rules
@@ -262,7 +255,7 @@ watch(
                       dense
                       class="inputgreen"
                       :rules="[
-                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                       ]"
                       hide-bottom-space
                       lazy-rules
@@ -282,7 +275,7 @@ watch(
                       dense
                       class="inputgreen"
                       :rules="[
-                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                       ]"
                       hide-bottom-space
                       lazy-rules
@@ -302,7 +295,7 @@ watch(
                       dense
                       class="inputgreen"
                       :rules="[
-                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                        (val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
                       ]"
                       hide-bottom-space
                       lazy-rules
@@ -333,7 +326,7 @@ watch(
                 type="textarea"
                 dense
                 class="inputgreen"
-                :rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
                 hide-bottom-space
                 lazy-rules
               />
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
index 23704ef..4a5d936 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
-import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-
-import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar, type QTableProps } from "quasar";
-import { useRoute } from "vue-router";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import type { ListCapacity } from "@/modules/08_KPI/interface/request/index";
+
+import DialogHeader from "@/components/DialogHeader.vue";
 
 const dataListCapacityDetails = ref<ListCapacity[]>([]);
 const route = useRoute();
@@ -22,7 +23,7 @@ const props = defineProps({
 
 const $q = useQuasar();
 const store = useKpiDataStore();
-const expectedLevel = ref<any>();
+const expectedLevel = ref<number | null>(null);
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -162,6 +163,7 @@ function getclass() {
   return "inputgreen";
 }
 
+/** save สมรรถนะ */
 function onSubmit() {
   if (formDetail.id == "") {
     dialogMessageNotify($q, "กรุณาเลือกสมรรถนะ");
@@ -173,7 +175,7 @@ function onSubmit() {
       const body = {
         kpiUserEvaluationId: idParam.value,
         kpiCapacityId: formDetail.id,
-        level: expectedLevel.value.toString(),
+        level: expectedLevel.value?.toString(),
         weight: weight.value,
       };
       showLoader();
@@ -193,6 +195,7 @@ function onSubmit() {
   }
 }
 
+/** ดึงข้อมูล สมรรถนะ */
 function getData() {
   showLoader();
   http
@@ -214,12 +217,17 @@ function getData() {
     });
 }
 
+/**
+ * ฟิลเตอร์
+ * @param val ค่าที่ฟิลเตอร์
+ */
 function filterTxt(val: any) {
   listTarget.value = listTargetMain.value.filter(
     (v: any) => v.name.indexOf(val) > -1
   );
 }
 
+/** ดึงข้อมูลตามไอดี */
 function getDataById() {
   http
     .get(config.API.kpiUserCapacity + `/${idProps.value}`)
@@ -444,17 +452,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>
@@ -496,7 +493,6 @@ watch(
                           </div>
                           <div v-else>
                             {{ col.value }}
-                            <!-- <span v-html="item.description"></span> -->
                           </div>
                         </q-td>
                       </q-tr>
@@ -535,40 +531,6 @@ watch(
                       </div>
                     </template>
                   </d-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/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
index ca11066..5a6b5d8 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue
@@ -1,33 +1,23 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, reactive } from "vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import type {
   FormComment,
   FormCommentByRole,
 } from "@/modules/08_KPI/interface/request/index";
-import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
 
-import { useKpiDataStore } from "@/modules/08_KPI/store";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 const store = useKpiDataStore();
 const $q = useQuasar();
-const route = useRoute();
-const id = ref<string>(route.params.id as string);
 const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  dialogMessageNotify,
-  success,
-} = mixin;
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const type = defineModel<string>("type", { required: true });
@@ -46,6 +36,7 @@ const reasonCommanderHigh = ref<string>(""); //ผู้บังคับบั
 const reasonEvaluatorRef = ref<any>();
 const reasonCommanderRef = ref<any>();
 const reasonCommanderHighRef = ref<any>();
+
 const sendType = ref<string>("");
 const formDataAdd = reactive<FormComment>({
   topic: "",
@@ -64,10 +55,12 @@ const formDataView = reactive<FormCommentByRole>({
 });
 
 let count = ref<number>(0);
+/**
+ * ดึงข้อมูลหัวข้อรายงานปัญหา
+ * @param index id หัวข้อ
+ * @param data ข้อมูล
+ */
 function clickList(index: string, data: any) {
-  // if (data.status == "DRAFT") {
-
-  // }
   listCheck.value = index as string;
 
   formDataView.id = data.id;
@@ -94,13 +87,18 @@ function clickList(index: string, data: any) {
   }, 100);
 }
 
-function onEdit(index: string, data: any) {
+/**
+ * เปิดเเบบร่าง
+ * @param data ข้อมูลเเบบร่าง
+ */
+function onEdit(data: any) {
   modalAdd.value = true;
   sendId.value = data.id;
   formDataAdd.topic = data.topic;
   formDataAdd.reason = data.reason;
 }
 
+/** save หัวข้อปัญหา */
 function onSubmitAdd() {
   dialogConfirm($q, () => {
     showLoader();
@@ -138,8 +136,7 @@ function onSubmitAdd() {
   });
 }
 
-function onSubmit() {}
-
+/** ปิด dialog */
 function close() {
   count.value = 0;
   modal.value = false;
@@ -183,6 +180,10 @@ function getList() {
     });
 }
 
+/**
+ * save comment
+ * @param role ระดับผู้ประเมิน
+ */
 function onSubmitComment(role: string) {
   dialogConfirm($q, () => {
     const body = {
@@ -229,28 +230,12 @@ function onSubmitComment(role: string) {
   });
 }
 
-function statusText(val: string) {
-  switch (val) {
-    case "DRAFT":
-      return "แบบร่าง";
-    case "EVALUATOR":
-      return "ผู้ประเมิน";
-    case "COMMANDER":
-      return "ผู้บังคับบัญชาเหนือขึ้นไป";
-    case "COMMANDERHIGH":
-      return "ผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง";
-    case "DONE":
-      return "เสร็จสิ้น";
-
-    default:
-      return "";
-  }
-}
-
+/** ฟังชั่นเเจ้งเตือน เลือกหัวข้อปัญหา */
 function onNoti() {
   listCheck.value = "";
   count.value = 0;
 }
+
 watch(
   () => modal.value,
   () => {
@@ -263,282 +248,280 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 70vw">
-      <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader tittle="รายงานปัญหา" :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="
-                    store.rolePerson === 'USER' &&
-                    store.dataEvaluation.evaluationStatus == 'APPROVE' &&
-                    store.tabMain === '2'
-                  "
-                  icon="add"
-                  color="teal"
-                  flat
-                  round
-                  @click="
-                    () => {
-                      modalAdd = true;
-                    }
-                  "
-                >
-                  <q-tooltip>เพิ่มหัวข้อรายงานปัญหา</q-tooltip>
-                </q-btn>
-
-                <q-card bordered flat class="no-shadow bg-white col-12">
-                  <div class="row q-px-md q-py-sm items-center bg-grey-1">
-                    <div class="col-12">
-                      <span>หัวข้อปัญหา</span>
-                    </div>
-                  </div>
-
-                  <q-separator />
-                  <q-card-section class="q-pa-none">
-                    <div v-if="listTarget.length > 0">
-                      <q-list separator dense>
-                        <q-item
-                          v-for="(item, index) in listTarget"
-                          :key="item.id"
-                          clickable
-                          v-ripple
-                          :active="listCheck === item.id"
-                          active-class="my-menu-link"
-                          @click="
-                            item.status == 'DRAFT'
-                              ? onNoti()
-                              : clickList(item.id, item)
-                          "
-                        >
-                          <q-item-section class="q-pa-none">
-                            <div class="row items-center">
-                              <div class="col-12 row justify-between">
-                                <span>{{ item.topic }}</span>
-                                <q-badge
-                                  v-if="item.status == 'DRAFT'"
-                                  outline
-                                  color="grey"
-                                  label="แบบร่าง"
-                                  @click="onEdit(item.id, item)"
-                                />
-                              </div>
-                            </div>
-                          </q-item-section>
-                        </q-item>
-                      </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="รายงานปัญหา" :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="
+                  store.rolePerson === 'USER' &&
+                  store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                  store.tabMain === '2'
+                "
+                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">หัวข้อปัญหา</div>
-                    <div class="col-8">{{ formDataView.topic }}</div>
-                  </div>
-                  <div class="row col-12 text-weight-medium">
-                    <div class="col-4 text-grey-6">รายละเอียดปัญหา</div>
-                    <div class="col-8">{{ formDataView.reason }}</div>
-                  </div>
+                <q-tooltip>เพิ่มหัวข้อรายงานปัญหา</q-tooltip>
+              </q-btn>
+
+              <q-card bordered flat class="no-shadow bg-white col-12">
+                <div class="row q-px-md q-py-sm items-center bg-grey-1">
                   <div class="col-12">
-                    <q-separator />
+                    <span>หัวข้อปัญหา</span>
+                  </div>
+                </div>
+
+                <q-separator />
+                <q-card-section class="q-pa-none">
+                  <div v-if="listTarget.length > 0">
+                    <q-list separator dense>
+                      <q-item
+                        v-for="(item, index) in listTarget"
+                        :key="item.id"
+                        clickable
+                        v-ripple
+                        :active="listCheck === item.id"
+                        active-class="my-menu-link"
+                        @click="
+                          item.status == 'DRAFT'
+                            ? onNoti()
+                            : clickList(item.id, item)
+                        "
+                      >
+                        <q-item-section class="q-pa-none">
+                          <div class="row items-center">
+                            <div class="col-12 row justify-between">
+                              <span>{{ item.topic }}</span>
+                              <q-badge
+                                v-if="item.status == 'DRAFT'"
+                                outline
+                                color="grey"
+                                label="แบบร่าง"
+                                @click="onEdit(item)"
+                              />
+                            </div>
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
                   </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="
-                            formDataView.reasonEvaluator !== null ||
-                            store.rolePerson !== 'EVALUATOR' ||
-                            store.tabMain !== '2'
-                          "
-                          label="ความคิดเห็นของผู้ประเมิน"
-                          v-model="reasonEvaluator"
-                          type="textarea"
-                          class="inputgreen"
-                          lazy-rules
-                          hide-bottom-space
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
-                        ></q-input>
-                      </div>
+                  <div v-else class="q-pa-md">
+                    <span>ไม่พบข้อมูล</span>
+                  </div>
+                </q-card-section>
+              </q-card>
+            </div>
+          </template>
 
-                      <div
-                        v-if="
-                          formDataView.reasonEvaluator == null &&
-                          store.rolePerson == 'EVALUATOR' &&
-                          store.dataEvaluation.evaluationStatus == 'APPROVE' &&
-                          store.tabMain === '2'
-                        "
-                        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="
-                            formDataView.reasonCommander !== null ||
-                            store.rolePerson !== 'COMMANDER' ||
-                            store.tabMain !== '2'
-                          "
-                          hide-bottom-space
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
-                        ></q-input>
-                      </div>
-
-                      <div
-                        v-if="
-                          formDataView.reasonCommander == null &&
-                          store.rolePerson == 'COMMANDER' &&
-                          store.dataEvaluation.evaluationStatus == 'APPROVE' &&
-                          store.tabMain === '2'
-                        "
-                        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="
-                            formDataView.reasonCommanderHigh !== null ||
-                            store.rolePerson !== 'COMMANDERHIGH' ||
-                            store.tabMain !== '2'
-                          "
-                          hide-bottom-space
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
-                        ></q-input>
-                      </div>
-
-                      <div
-                        v-if="
-                          formDataView.reasonCommanderHigh == null &&
-                          store.rolePerson == 'COMMANDERHIGH' &&
-                          store.dataEvaluation.evaluationStatus == 'APPROVE' &&
-                          store.tabMain === '2'
-                        "
-                        class="col-12"
-                        align="right"
-                      >
-                        <q-btn
-                          label="บันทึกความคิดเห็น"
-                          color="secondary"
-                          type="submit"
-                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
-                        >
-                      </div>
-                    </div>
-                  </q-form>
+          <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">หัวข้อปัญหา</div>
+                  <div class="col-8">{{ formDataView.topic }}</div>
                 </div>
+                <div class="row col-12 text-weight-medium">
+                  <div class="col-4 text-grey-6">รายละเอียดปัญหา</div>
+                  <div class="col-8">{{ formDataView.reason }}</div>
+                </div>
+                <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="
+                          formDataView.reasonEvaluator !== null ||
+                          store.rolePerson !== 'EVALUATOR' ||
+                          store.tabMain !== '2'
+                        "
+                        label="ความคิดเห็นของผู้ประเมิน"
+                        v-model="reasonEvaluator"
+                        type="textarea"
+                        class="inputgreen"
+                        lazy-rules
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
+                      ></q-input>
+                    </div>
+
+                    <div
+                      v-if="
+                        formDataView.reasonEvaluator == null &&
+                        store.rolePerson == 'EVALUATOR' &&
+                        store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                        store.tabMain === '2'
+                      "
+                      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="
+                          formDataView.reasonCommander !== null ||
+                          store.rolePerson !== 'COMMANDER' ||
+                          store.tabMain !== '2'
+                        "
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
+                      ></q-input>
+                    </div>
+
+                    <div
+                      v-if="
+                        formDataView.reasonCommander == null &&
+                        store.rolePerson == 'COMMANDER' &&
+                        store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                        store.tabMain === '2'
+                      "
+                      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="
+                          formDataView.reasonCommanderHigh !== null ||
+                          store.rolePerson !== 'COMMANDERHIGH' ||
+                          store.tabMain !== '2'
+                        "
+                        hide-bottom-space
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
+                      ></q-input>
+                    </div>
+
+                    <div
+                      v-if="
+                        formDataView.reasonCommanderHigh == null &&
+                        store.rolePerson == 'COMMANDERHIGH' &&
+                        store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                        store.tabMain === '2'
+                      "
+                      class="col-12"
+                      align="right"
+                    >
+                      <q-btn
+                        label="บันทึกความคิดเห็น"
+                        color="secondary"
+                        type="submit"
+                        ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                      >
+                    </div>
+                  </div>
+                </q-form>
               </div>
-            </template>
-          </q-splitter>
-        </q-card-section>
-      </q-form>
+            </div>
+          </template>
+        </q-splitter>
+      </q-card-section>
     </q-card>
   </q-dialog>
 
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
index adf6598..89dbe49 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, reactive } from "vue";
+import { ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import type {
   FormComment,
   FormCommentByRole,
+  ListTarget,
 } from "@/modules/08_KPI/interface/request/index";
-import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
-import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-const numLevel = ref<string>("");
-const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -27,15 +26,15 @@ const {
   dialogMessageNotify,
 } = mixin;
 
-const check = ref<string>("");
-const rows = defineModel<any>("rows");
+const numLevel = ref<string>("");
+const store = useKpiDataStore();
 const modal = defineModel<boolean>("modal", { required: true });
 const type = defineModel<string>("type", { required: true });
 const idList = defineModel<string>("idList", { required: true });
 const modalAdd = ref<boolean>(false);
 
 const splitterModel = ref<number>(40);
-const listTarget = ref<any>([]);
+const listTarget = ref<ListTarget[]>([]);
 const listCheck = ref<string>("");
 
 const reasonEvaluator = ref<string>(""); //ผู้ประเมิน
@@ -202,7 +201,7 @@ function onSubmitComment(role: string) {
           if (listCheck.value) {
             const idCheck = listCheck.value;
             const data = listTarget.value.find(
-              (item: any) => item.id == idCheck
+              (item: ListTarget) => item.id == idCheck
             );
             clickList(idCheck, data);
           }
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
index 96705d8..f51836e 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.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, watch } 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/08_KPI/components/Tab/Dialog/DialogDevelop.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
index dd15491..dcb2683 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue
@@ -1,32 +1,44 @@
 <script setup lang="ts">
 import DialogHeader from "@/components/DialogHeader.vue";
 import { ref, reactive, watch, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 import 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/08_KPI/interface/index/Main";
 
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = mixin;
+
 const props = defineProps({
   getAll: Function,
 });
 const route = useRoute();
 const idKpi = ref<string>(route.params.id.toLocaleString());
-const development = ref<any[]>([]);
-const reasonDevelopment70 = ref<string>("");
-const reasonDevelopment20 = ref<string>("");
-const reasonDevelopment10 = ref<string>("");
 
-const choice = ref<string>("MANUAL");
-const projectName = ref<any>("");
-const projectOp = ref<ProjectYearOp[]>([]);
-const projectOpMain = ref<ProjectYearOp[]>([]);
+const development = ref<string[]>([]); //ตัวแปรเก็บ ตัวเลือกการพัฒนา
+const reasonDevelopment70 = ref<string>(""); //อื่นๆ การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)
+const reasonDevelopment20 = ref<string>(""); //อื่นๆ การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)
+const reasonDevelopment10 = ref<string>(""); //อื่นๆ การฝึกอบรมอื่นๆ
+
+const choice = ref<string>("MANUAL"); //ตัวเลืออก กรอกเอง/เลือกในระบบ
+const projectName = ref<any>(""); //ชื่อเรื่อง
+const projectOp = ref<ProjectYearOp[]>([]); //ตัวเลือก โครงการ/หลักสูตรการฝึกอบรม
+const projectOpMain = ref<ProjectYearOp[]>([]); //ตัวเลือก โครงการ/หลักสูตรการฝึกอบรม แสดง
 const choiceOp = ref<DataOptionTechnique[]>([
   { value: "PROJECT", label: "เลือกจากโครงการ/หลักสูตรการฝึกอบรม" },
   { value: "MANUAL", label: "กรอกเอง" },
@@ -58,17 +70,6 @@ const isDevelopment10 = computed(() => {
   );
 });
 
-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 });
 
@@ -160,6 +161,7 @@ const projectTechniquesOp3 = ref<DataOptionTechnique[]>([
   { value: "other3", label: "อื่น ๆ (ระบุ)" },
 ]);
 
+/** ปิด Dialog */
 function close() {
   modal.value = false;
   id.value = "";
@@ -187,6 +189,7 @@ function close() {
   props.getAll?.();
 }
 
+/** บันทึกข้อมูลการพัฒนาตน */
 function onSubmit() {
   if (
     isDevelopment70.value == false &&
@@ -232,60 +235,9 @@ function onSubmit() {
     });
   }
 }
-watch(
-  () => id.value,
-  (i) => {
-    if (i) {
-      showLoader();
-      http
-        .get(config.API.kpiAchievementDevelop + `/${id.value}`)
-        .then(async (res) => {
-          const data = res.data.result;
-          formData.year = data.selectTypeYear;
-          await getDataByYear();
-          setTimeout(() => {
-            choice.value = data.selectType;
-            projectName.value = projectOpMain.value.find(
-              (i: any) => i.id == data.selectTypeId
-            );
-            formData.name = data.name;
-            formData.group = data.group;
-            formData.target = data.target;
-            formData.isDevelopment70 = data.isDevelopment70;
-            formData.isDevelopment20 = data.isDevelopment20;
-            formData.isDevelopment10 = data.isDevelopment10;
-            formData.achievement10 = data.achievement10;
-            formData.achievement5 = data.achievement5;
-            formData.achievement0 = data.achievement0;
-            development.value = data.developmentProjects;
-            reasonDevelopment70.value = data.developmentProjects.includes(
-              "other1"
-            )
-              ? data.reasonDevelopment70
-              : "";
-            reasonDevelopment20.value = data.developmentProjects.includes(
-              "other2"
-            )
-              ? data.reasonDevelopment20
-              : "";
-            reasonDevelopment10.value = data.developmentProjects.includes(
-              "other3"
-            )
-              ? data.reasonDevelopment10
-              : "";
-          }, 500);
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    }
-  }
-);
 
 const customPosition = () => ({ top: "490px", left: "410px" });
+
 async function getDataByYear() {
   if (formData.year) {
     showLoader();
@@ -350,6 +302,59 @@ function filterOptionFn(val: string, update: Function) {
     );
   });
 }
+
+watch(
+  () => id.value,
+  (i) => {
+    if (i) {
+      showLoader();
+      http
+        .get(config.API.kpiAchievementDevelop + `/${id.value}`)
+        .then(async (res) => {
+          const data = res.data.result;
+          formData.year = data.selectTypeYear;
+          await getDataByYear();
+          setTimeout(() => {
+            choice.value = data.selectType;
+            projectName.value = projectOpMain.value.find(
+              (i: any) => i.id == data.selectTypeId
+            );
+            formData.name = data.name;
+            formData.group = data.group;
+            formData.target = data.target;
+            formData.isDevelopment70 = data.isDevelopment70;
+            formData.isDevelopment20 = data.isDevelopment20;
+            formData.isDevelopment10 = data.isDevelopment10;
+            formData.achievement10 = data.achievement10;
+            formData.achievement5 = data.achievement5;
+            formData.achievement0 = data.achievement0;
+            development.value = data.developmentProjects;
+            reasonDevelopment70.value = data.developmentProjects.includes(
+              "other1"
+            )
+              ? data.reasonDevelopment70
+              : "";
+            reasonDevelopment20.value = data.developmentProjects.includes(
+              "other2"
+            )
+              ? data.reasonDevelopment20
+              : "";
+            reasonDevelopment10.value = data.developmentProjects.includes(
+              "other3"
+            )
+              ? data.reasonDevelopment10
+              : "";
+          }, 500);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  }
+);
 </script>
 <template>
   <q-dialog persistent v-model="modal">
@@ -542,19 +547,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/08_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
index f3519c9..40d6739 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_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 type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
 
-const store = useKpiDataStore();
 const $q = useQuasar();
+const store = useKpiDataStore();
 const mixin = useCounterMixin();
 const {
-  dialogConfirm,
-  success,
   showLoader,
   hideLoader,
   messageError,
@@ -23,13 +22,25 @@ 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[]>([]);
 
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "posMasterNoOld",
+  "positionOld",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
+  "status",
+  "commandNo",
+]);
+
 //หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
@@ -164,22 +175,9 @@ const columns = ref<QTableProps["columns"]>([
     format: (val) => statusText(val),
   },
 ]);
-const visibleColumns = ref<string[]>([
-  "no",
-  "name",
-  "posMasterNoOld",
-  "positionOld",
-  "positionLevel",
-  "organizationPositionOld",
-  "organization",
-  "dateStart",
-  "dateEnd",
-  "createdAt",
-  "status",
-  "commandNo",
-]);
 
-const statusText = (val: string) => {
+/** เเปลง status เป็น text */
+function statusText(val: string) {
   switch (val) {
     case "WAITTING":
       return "รอดำเนินการ";
@@ -197,12 +195,14 @@ const statusText = (val: string) => {
     default:
       return "-";
   }
-};
+}
 
+/** ปิด dialog */
 function close() {
   modal.value = false;
 }
 
+/** ดึงข้อมูล */
 function getData() {
   showLoader();
   http
@@ -218,6 +218,7 @@ function getData() {
       hideLoader();
     });
 }
+
 watch(
   () => modal.value,
   (n) => {
@@ -271,20 +272,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/08_KPI/components/Tab/Dialog/DialogLevel.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogLevel.vue
index bbb9c42..b2e16a8 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogLevel.vue
+++ b/src/modules/08_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/08_KPI/components/Tab/Dialog/DialogListCriteria.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue
index 19f3455..2bb6f3d 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue
@@ -1,20 +1,8 @@
 <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;
-  level: number;
-  description: string;
-}
+import type { ListCriteria } from "@/modules/08_KPI/interface/index/Main";
 
-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/08_KPI/components/Tab/Dialog/DialogStatus.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogStatus.vue
index b3e9290..5b0b01e 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogStatus.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogStatus.vue
@@ -1,40 +1,31 @@
 <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/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
 
 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 work = ref<boolean>(false);
 const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  success,
-  showLoader,
-  hideLoader,
-  messageError,
-  findPosMasterNoOld,
-  findOrgNameOld,
-  date2Thai,
-} = mixin;
+const { showLoader, hideLoader, messageError } = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
 const isProbation = defineModel<boolean>("isProbation", { required: true });
 
+/** ปิด dialog */
 function close() {
   modal.value = false;
 }
 
+/** ดึงข้อมูล */
 function getData() {
   showLoader();
   http
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
index e911d34..48c9006 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import config from "@/app.config";
+
 import http from "@/plugins/http";
+import config from "@/app.config";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -16,7 +17,6 @@ const numpage = defineModel<number>("numpage", { required: true });
 const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
   required: true,
 });
-
 const dataAchievement = ref<any[]>([]);
 
 function fetchByid(id: string, type: string) {
diff --git a/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue b/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
index 8f1e72d..d6396ad 100644
--- a/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useQuasar } from "quasar";
-import config from "@/app.config";
-import http from "@/plugins/http";
 
-import DialogHeader from "@/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { QTableProps } from "quasar";
 
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 const $q = useQuasar();
 const store = useKpiDataStore();
@@ -213,34 +213,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/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue b/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
index ec6ba03..e139701 100644
--- a/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
@@ -1,16 +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 http from "@/plugins/http";
+import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-import { useQuasar, type QTableProps } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
 import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
   required: true,
 });
@@ -23,19 +23,14 @@ const props = defineProps({
   getData: Function,
   default: () => console.log("not function"),
 });
-const {
-  dialogConfirm,
-  hideLoader,
-  showLoader,
-  messageError,
-  success,
-  dialogMessageNotify,
-} = useCounterMixin();
-const store = useKpiDataStore();
+const { dialogConfirm, messageError, dialogMessageNotify } = useCounterMixin();
+
 const $q = useQuasar();
+const store = useKpiDataStore();
 const modal = defineModel<boolean>("modal", { required: true });
 const rows = defineModel<any>("data", { required: true });
 const type = defineModel<string>("type", { required: true });
+
 const visibleColumns = ref<string[]>([
   "name",
   "level",
@@ -191,27 +186,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/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue b/src/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue
index 33a0726..88af0dd 100644
--- a/src/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
-import DialogHeader from "@/components/DialogHeader.vue";
+import { ref } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
 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 { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const props = defineProps({
   getAll: Function,
 });
@@ -15,18 +17,10 @@ const store = useKpiDataStore();
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  success,
-  messageError,
-  dialogMessageNotify,
-} = mixin;
+const { showLoader, hideLoader, success, messageError } = 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",
@@ -85,6 +79,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/** save ข้อมูล */
 function onSubmit() {
   const data = rows.value.map((i: any) => ({
     id: i.id,
@@ -107,6 +102,7 @@ function onSubmit() {
     });
 }
 
+/** ปิด dialog */
 function close() {
   modal.value = false;
   rows.value = [];
diff --git a/src/modules/08_KPI/components/Tab/TabMain.vue b/src/modules/08_KPI/components/Tab/TabMain.vue
index 627b9dd..5ff90d3 100644
--- a/src/modules/08_KPI/components/Tab/TabMain.vue
+++ b/src/modules/08_KPI/components/Tab/TabMain.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import Assessment from "@/modules/08_KPI/components/Tab/01_Assessment.vue";
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index a48678a..879712f 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -1,34 +1,26 @@
 <script setup lang="ts">
 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 { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
 import type { QTableProps } from "quasar";
 
 import Dialog from "@/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue";
-// import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue";
 import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue";
 import DialogViewInfo from "@/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue";
 import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-const checkDetail = ref<boolean>(false);
 const $q = useQuasar();
 const store = useKpiDataStore();
-const route = useRoute();
-const {
-  date2Thai,
-  dialogRemove,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = useCounterMixin();
+const { dialogRemove, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
 
+const checkDetail = ref<boolean>(false);
 const title = defineModel<string>("title", { required: true });
 const rows = defineModel<any>("data", { required: true });
 const numpage = defineModel<number>("page", { required: true });
@@ -121,7 +113,6 @@ 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);
@@ -129,11 +120,7 @@ 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) {
@@ -218,24 +205,6 @@ const isEditStep3 = computed(() => {
       store.tabMain === "3")
   );
 });
-
-// watch(
-//   () => modalAssigned.value,
-//   () => {
-//     if (!modalAssigned.value) {
-//       props.fetchList?.();
-//     }
-//   }
-// );
-
-// watch(
-//   () => modalEvaluate.value,
-//   () => {
-//     if (!modalEvaluate.value) {
-//       props.fetchList?.();
-//     }
-//   }
-// );
 </script>
 
 <template>
@@ -503,13 +472,6 @@ const isEditStep3 = computed(() => {
     :kpiUserPlannedId="kpiUserPlannedId"
   />
 
-  <!-- <Dialog03
-    v-model:modal="modalAssigned"
-    :numpage="numpage"
-    :isStatusEdit="isStatusEdit"
-    :kpiUserPlannedId="kpiUserPlannedId"
-  /> -->
-
   <DialogEvaluate
     v-model:modal="modalEvaluate"
     :data="rows"
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index 10b9456..ca6d059 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -1,25 +1,26 @@
 <script setup lang="ts">
-import { onMounted, ref, computed, watch } from "vue";
-import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue";
-import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
-import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
-import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
+import { onMounted, ref, computed } from "vue";
+import { useRoute } from "vue-router";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useQuasar, type QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useRoute } from "vue-router";
 
 import type {
   FormCapacityList,
   ListCriteria,
 } from "@/modules/08_KPI/interface/request/index";
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+
+import Dialog from "@/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue";
+import DialogLevel from "@/modules/08_KPI/components/Tab/Dialog/DialogLevel.vue";
+import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
+import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
+import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue";
 import DialogListCriteria from "@/modules/08_KPI/components/Tab/Dialog/DialogListCriteria.vue";
 import DialogCompetncyByRow from "@/modules/08_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
-import DialogLevel from "@/modules/08_KPI/components/Tab/Dialog/DialogLevel.vue";
-import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 
 const modalLevel = ref<boolean>(false);
 const modalCompetncyByRow = ref<boolean>(false);
@@ -39,7 +40,6 @@ const store = useKpiDataStore();
 
 const route = useRoute();
 const id = ref<string>(route.params.id as string);
-const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 
 const idCapacity = ref<string | null>(null);
 
@@ -121,15 +121,44 @@ const visibleColumns = ref<string[]>(
 );
 
 const typeCompetency = ref<string>("");
+
+const rows = ref<any>([]);
+const lists = ref<any>([]);
+const modalProgress = ref<boolean>(false);
+const modalProblem = ref<boolean>(false);
+const type = ref<string>("");
+const idList = ref<string>("");
+
+const isEditStep1 = computed(() => {
+  return (
+    (store.dataEvaluation.evaluationStatus === "NEW" &&
+      store.rolePerson === "USER" &&
+      store.tabMain === "1") ||
+    (store.dataEvaluation.evaluationStatus === "NEW_EVALUATOR" &&
+      store.rolePerson === "EVALUATOR" &&
+      store.tabMain === "1")
+  );
+});
+
+const competencyType = ref<DataOptions[]>([]);
+const isEditStep3 = computed(() => {
+  return (
+    (store.dataEvaluation.evaluationStatus === "EVALUATING" &&
+      store.rolePerson === "USER" &&
+      store.tabMain === "3") ||
+    (store.dataEvaluation.evaluationStatus === "EVALUATING_EVALUATOR" &&
+      store.rolePerson === "EVALUATOR" &&
+      store.tabMain === "3")
+  );
+});
+
+/** เพิ่มข้อมูล */
 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: string) {
   http
     .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
@@ -192,12 +221,18 @@ function getData(type: string) {
     });
 }
 
+/** เปิดหน้าต่างเเก้ไข */
 function onEdit(data: FormCapacityList, type: string) {
   idCapacity.value = data.id;
   typeCompetency.value = type;
   modal.value = true;
 }
 
+/**
+ * ลบข้อมูล
+ * @param id id row
+ * @param type แยกประเภท
+ */
 function onDelete(id: string, type: string) {
   dialogRemove($q, () => {
     showLoader();
@@ -216,68 +251,52 @@ function onDelete(id: string, type: string) {
   });
 }
 
+/**
+ * ประเมิน
+ * @param type เเยกประเภท
+ */
 function onEvaluate(type: string) {
   typeCompetency.value = type;
   modalEvaluate.value = true;
 }
 
-const modalProgress = ref<boolean>(false);
-const modalProblem = ref<boolean>(false);
-const type = ref<string>("");
-const idList = ref<string>("");
+/**
+ * รายงานความก้าวหน้า
+ * @param id id row
+ */
 function openPopupProgress(id: string) {
   modalProgress.value = true;
   type.value = "capacity";
   idList.value = id;
 }
 
+/**
+ * รายงานปัญหา
+ * @param id id รายงานปัญหา
+ */
 function openPopupProblem(id: string) {
   modalProblem.value = true;
   type.value = "capacity";
   idList.value = id;
 }
 
-const isEditStep1 = computed(() => {
-  return (
-    (store.dataEvaluation.evaluationStatus === "NEW" &&
-      store.rolePerson === "USER" &&
-      store.tabMain === "1") ||
-    (store.dataEvaluation.evaluationStatus === "NEW_EVALUATOR" &&
-      store.rolePerson === "EVALUATOR" &&
-      store.tabMain === "1")
-  );
-});
-
-const isEditStep3 = computed(() => {
-  return (
-    (store.dataEvaluation.evaluationStatus === "EVALUATING" &&
-      store.rolePerson === "USER" &&
-      store.tabMain === "3") ||
-    (store.dataEvaluation.evaluationStatus === "EVALUATING_EVALUATOR" &&
-      store.rolePerson === "EVALUATOR" &&
-      store.tabMain === "3")
-  );
-});
-
+/** dialog กณฑ์การประเมินสมรรถนะ */
 function onInfo() {
   modalCriteria.value = true;
 }
 
-function onAchievement(data: any) {
-  modalCompetncyByRow.value = true;
-  dataCompetncyByRow.value = data;
-}
-
+/**
+ * เปิด dialog รายละเอียดระดับที่คาดหวัง
+ * @param num ระดับ
+ * @param list list ข้อมูล
+ */
 function onLevel(num: number, list: any) {
   dataLevel.value = list.filter((i: any) => i.level == num);
   modalLevel.value = true;
 }
 
-const competencyType = ref<DataOptions[]>([]);
 onMounted(() => {
   setTimeout(async () => {
-    // console.log("posTypeName===>", store.dataEvaluation.posTypeName);
-
     competencyType.value = await (store.dataEvaluation.posTypeName ==
       "อำนวยการ" || store.dataEvaluation.posTypeName == "บริหาร"
       ? store.competencyType.filter(
diff --git a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
index 53128bc..a0a8166 100644
--- a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { onMounted, ref, computed, watch, reactive } from "vue";
+import { onMounted, ref, computed, reactive } from "vue";
+import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar, type QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+
 import DialogDevelop from "@/modules/08_KPI/components/Tab/Dialog/DialogDevelop.vue";
 import DialogEvalutionDevelop from "@/modules/08_KPI/components/Tab/DialogEvaluate/03_DialogEvalutionDevelop.vue";
 import DialogProgress from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProgress.vue";
 import DialogProblem from "@/modules/08_KPI/components/Tab/Dialog/DialogCommentProblem.vue";
 
-import { useQuasar, type QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/08_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());
@@ -37,10 +38,30 @@ const isUpdate = defineModel("isUpdate", {
   default: false,
 });
 
-const formData = reactive({
-  isDevelopment70: false,
-  isDevelopment20: false,
-  isDevelopment10: false,
+const modalProgress = ref<boolean>(false);
+const modalProblem = ref<boolean>(false);
+const type = ref<string>("");
+const idList = ref<string>("");
+const isEditStep1 = computed(() => {
+  return (
+    (store.dataEvaluation.evaluationStatus === "NEW" &&
+      store.rolePerson === "USER" &&
+      store.tabMain === "1") ||
+    (store.dataEvaluation.evaluationStatus === "NEW_EVALUATOR" &&
+      store.rolePerson === "EVALUATOR" &&
+      store.tabMain === "1")
+  );
+});
+
+const isEditStep3 = computed(() => {
+  return (
+    (store.dataEvaluation.evaluationStatus === "EVALUATING" &&
+      store.rolePerson === "USER" &&
+      store.tabMain === "3") ||
+    (store.dataEvaluation.evaluationStatus === "EVALUATING_EVALUATOR" &&
+      store.rolePerson === "EVALUATOR" &&
+      store.tabMain === "3")
+  );
 });
 const columns = ref<QTableProps["columns"]>([
   {
@@ -119,11 +140,16 @@ function onAdd() {
   modalDevelop.value = true;
 }
 
+/**
+ * เปิด dialog แก้ไข
+ * @param id id
+ */
 function onEdit(id: string) {
   modalDevelop.value = true;
   idEditDevelop.value = id;
 }
 
+/** ดึงข้อมูลพัฒนา */
 function getDevelop() {
   http
     .get(config.API.kpiAchievementDevelop + `?id=${evaluationId.value}`)
@@ -142,6 +168,9 @@ function onEvaluate() {
   modalEvaluate.value = true;
 }
 
+/** ลบข้อมูลตาม id
+ *  @param id id row
+ */
 function onDelete(id: string) {
   dialogRemove($q, () => {
     showLoader();
@@ -160,10 +189,6 @@ function onDelete(id: string) {
   });
 }
 
-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";
@@ -177,28 +202,6 @@ function openPopupProblem(id: string) {
   idList.value = id;
 }
 
-const isEditStep1 = computed(() => {
-  return (
-    (store.dataEvaluation.evaluationStatus === "NEW" &&
-      store.rolePerson === "USER" &&
-      store.tabMain === "1") ||
-    (store.dataEvaluation.evaluationStatus === "NEW_EVALUATOR" &&
-      store.rolePerson === "EVALUATOR" &&
-      store.tabMain === "1")
-  );
-});
-
-const isEditStep3 = computed(() => {
-  return (
-    (store.dataEvaluation.evaluationStatus === "EVALUATING" &&
-      store.rolePerson === "USER" &&
-      store.tabMain === "3") ||
-    (store.dataEvaluation.evaluationStatus === "EVALUATING_EVALUATOR" &&
-      store.rolePerson === "EVALUATOR" &&
-      store.tabMain === "3")
-  );
-});
-
 onMounted(() => {
   getDevelop();
 });
@@ -341,18 +344,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">
diff --git a/src/modules/08_KPI/interface/index/Main.ts b/src/modules/08_KPI/interface/index/Main.ts
index a5de84f..a898057 100644
--- a/src/modules/08_KPI/interface/index/Main.ts
+++ b/src/modules/08_KPI/interface/index/Main.ts
@@ -20,4 +20,73 @@ interface ProjectYearOp {
   projectName: string;
 }
 
-export type { DataOptions, Pagination, DataOptionTechnique, ProjectYearOp };
+interface PosmasterActType {
+  id: string;
+  posMasterOrder: number;
+  profileId: string;
+  citizenId: string;
+  prefix?: string;
+  firstName?: string;
+  lastName?: string;
+  posLevel: string;
+  posType: string;
+  position: string;
+  posNo: string;
+}
+
+interface EvaluatorType {
+  fullName: string;
+  position: string;
+  avartar: string;
+  posTypeName: string;
+  posLevelName: string;
+  posExecutiveName: string | null;
+  org: string;
+  isPosmasterAct: boolean;
+  posmasterAct: PosmasterActType[];
+}
+
+interface MainListKpi {
+  id: string;
+  profileId: string;
+  prefix: string;
+  firstname: string;
+  lastname: string;
+  kpiPeriodId: string;
+  evaluationStatus: string;
+  evaluationResults: string;
+  evaluatorId: string;
+  commanderId: string | null;
+  commanderHighId: string | null;
+  createdAt: string;
+  plannedPoint: number;
+  rolePoint: number;
+  specialPoint: number;
+  capacityPoint: number;
+  year: number;
+  durationKPI: string;
+}
+
+interface PaginationType {
+  sortBy: string;
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+}
+
+interface ListCriteria {
+  id: string;
+  level: number;
+  description: string;
+}
+
+export type {
+  DataOptions,
+  Pagination,
+  DataOptionTechnique,
+  ProjectYearOp,
+  EvaluatorType,
+  MainListKpi,
+  PaginationType,
+  ListCriteria,
+};
diff --git a/src/modules/08_KPI/interface/request/index.ts b/src/modules/08_KPI/interface/request/index.ts
index 66a60ad..817724f 100644
--- a/src/modules/08_KPI/interface/request/index.ts
+++ b/src/modules/08_KPI/interface/request/index.ts
@@ -71,6 +71,25 @@ interface FormQuery {
   keyword: string;
 }
 
+interface ListTarget {
+  id: string;
+  createdAt: string; 
+  createdUserId: string;
+  lastUpdatedAt: string;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  topic: string;
+  reason: string;
+  score: number | null;
+  reasonEvaluator: string | null;
+  reasonCommander: string | null;
+  reasonCommanderHigh: string | null;
+  status: string;
+  type: string;
+  kpiUserCapacityId: string;
+}
+
 export type {
   FormProfile,
   FormDataAssigned,
@@ -80,4 +99,5 @@ export type {
   FormComment,
   FormCommentByRole,
   FormQuery,
+  ListTarget
 };
diff --git a/src/modules/08_KPI/interface/response/index.ts b/src/modules/08_KPI/interface/response/index.ts
index c93bb00..b06d194 100644
--- a/src/modules/08_KPI/interface/response/index.ts
+++ b/src/modules/08_KPI/interface/response/index.ts
@@ -41,4 +41,57 @@ interface ResEvaluatorAssessor {
   profileId: string;
 }
 
-export type { ResEvaluator, ResRound, ResEvaluatorAssessor };
+interface EvaOptionType {
+  id: string;
+  prefix: string;
+  firstName: string;
+  lastName: string;
+  citizenId: string;
+  position: string;
+  posLevel: string;
+  posType: string;
+  isDirector: boolean;
+}
+
+interface RoundKpiResponse {
+  id: string;
+  createdAt: string;
+  createdUserId: string;
+  lastUpdatedAt: string;
+  lastUpdateUserId: string;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  year: number;
+  durationKPI: string;
+  startDate: string;
+  endDate: string;
+  isActive: boolean;
+}
+
+interface EvaluationIndicatorType {
+  id: string;
+  evaluationId: string;
+  indicatorId: string;
+  includingName: string;
+  target: string;
+  weight: number;
+  unit: string;
+  meaning: string;
+  formula: string;
+  summary: number;
+  point: number;
+  achievement: string;
+  achievement1: string;
+  achievement2: string;
+  achievement3: string;
+  achievement4: string;
+  achievement5: string;
+}
+export type {
+  ResEvaluator,
+  ResRound,
+  ResEvaluatorAssessor,
+  EvaOptionType,
+  RoundKpiResponse,
+  EvaluationIndicatorType
+};
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index e6e3d83..5074234 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -159,43 +159,7 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     }
   }
 
-  // async function checkCompetency() {
-  //   // const position = await dataEvaluation.value.position;
-  //   // const executiveName = await dataEvaluation.value.posExecutiveName;
-  //   const posTypeName = await dataEvaluation.value.posTypeName;
-  //   const posLevelName = dataEvaluation.value.posLevelName;
-
-  //   console.log("posTypeName===>", posTypeName);
-
-  //   // if (
-  //   //   position == "ผู้ตรวจราชการกรุงเทพมหานคร" ||
-  //   //   position == "ผู้ตรวจราชการ"
-  //   // ) {
-  //   //   competencyType.value = competencyType.value.filter(
-  //   //     (x: DataOptions) => x.id == "HEAD" || x.id == "INSPECTOR"
-  //   //   );
-  //   // } else if (position == "ผู้อำนวยการเขต") {
-  //   //   competencyType.value = competencyType.value.filter(
-  //   //     (x: DataOptions) => x.id == "HEAD" || x.id == "DIRECTOR"
-  //   //   );
-  //   // } else {
-  //   if (posTypeName == "อำนวยการ" || posTypeName == "บริหาร") {
-  //     competencyType.value = await competencyType.value.filter(
-  //       (x: DataOptions) =>
-  //         x.id == "HEAD" ||
-  //         x.id == "EXECUTIVE" ||
-  //         x.id == "INSPECTOR" ||
-  //         x.id == "DIRECTOR"
-  //     );
-  //   } else {
-  //     competencyType.value = await competencyType.value.filter(
-  //       (x: DataOptions) => x.id == "HEAD" || x.id == "GROUP"
-  //     );
-  //   }
-  //   // }
-  // }
-
-  const defaultCompetencyCoreLevel = ref<number>();
+  const defaultCompetencyCoreLevel = ref<number|null>(null);
   const defaultCompetencyGroupLevel = ref<number | null>(null);
   function checkCompetencyDefaultCompetencyLevel() {
     const posTypeName = dataEvaluation.value.posTypeName;
@@ -279,7 +243,6 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
       : dataEvaluation.value.commanderHighId == dataProfile.value.profileId
       ? "COMMANDERHIGH"
       : "");
-    // console.log("🚀 ~ checkStep ~ role:", role);
     rolePerson.value = role;
 
     switch (dataEvaluation.value.evaluationStatus) {
@@ -336,7 +299,6 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
         tabMain.value = "1";
         break;
     }
-    // console.log("🚀 ~ tabMain ~ role:", tabMain.value);
   }
 
   // SUMMARY GENERAL CASE
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index f770c90..30b2a3d 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -1,28 +1,26 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
-import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
-
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-import DialogHeader from "@/components/DialogHeader.vue";
 import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
-import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+import type {
+  DataOptions,
+  EvaluatorType,
+} from "@/modules/08_KPI/interface/index/Main";
+import type { EvaOptionType } from "@/modules/08_KPI/interface/response/index";
+
+import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import DialogGovernment from "@/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue";
 
-const modalGovernment = ref<boolean>(false);
-
-const modalEdit = ref<boolean>(false);
-const route = useRoute();
-const id = ref<string>(route.params.id as string);
-const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
-
-const store = useKpiDataStore();
 const $q = useQuasar();
+const store = useKpiDataStore();
 const mixin = useCounterMixin();
 const {
   showLoader,
@@ -32,18 +30,25 @@ const {
   success,
   findOrgName,
 } = mixin;
+const route = useRoute();
+const router = useRouter();
+const id = ref<string>(route.params.id as string);
 
-const evaluatorIdOp = ref<DataOptions[]>([]);
-const commanderIdOp = ref<DataOptions[]>([]);
-const commanderHighOp = ref<DataOptions[]>([]);
+const modalGovernment = ref<boolean>(false); // ตัวแปร dialog ช่วยราชการ
+const modalEdit = ref<boolean>(false); // ตัวแปร dialog แก้ไขผู้ประเมิน
+const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
 
-const evaluatorIdMainOp = ref<DataOptions[]>([]);
-const commanderIdMainOp = ref<DataOptions[]>([]);
-const commanderHighMainOp = ref<DataOptions[]>([]);
+const evaluatorIdOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้ประเมิน
+const commanderIdOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชา
+const commanderHighOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชาเหนือไปอีกขั้น
 
-const evaluatorId = ref<any>(null);
-const commanderId = ref<any>(null);
-const commanderHighId = ref<any>(null);
+const evaluatorIdMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้ประเมิน
+const commanderIdMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชา
+const commanderHighMainOp = ref<DataOptions[]>([]); // ตัวแปรเก็บ option ผู้บังคับบัญชาเหนือไปอีกขั้น
+
+const evaluatorId = ref<any>(null); // ตัวแปรเก็บ id ผู้ประเมิน
+const commanderId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชา
+const commanderHighId = ref<any>(null); // ตัวแปรเก็บ id ผู้บังคับบัญชาเหนือไปอีกขั้น
 
 const formProfile = reactive<FormProfile>({
   fullName: "",
@@ -56,8 +61,7 @@ const formProfile = reactive<FormProfile>({
   avartar: "",
 });
 
-const router = useRouter();
-
+/** ฟังชั่นดึงข้อมูล ผู้ประเมิน */
 async function fetchEvaluation() {
   await http
     .get(config.API.kpiEvaluation + `/${id.value}`)
@@ -66,7 +70,6 @@ async function fetchEvaluation() {
       store.dataEvaluation = res.data.result;
       formProfile.status = await store.convertStatus(data.evaluationStatus);
       formProfile.result = await store.convertResults(data.evaluationResults);
-      // store.checkCompetency();
       store.checkCompetencyDefaultCompetencyLevel();
     })
     .catch((e) => {
@@ -74,6 +77,7 @@ async function fetchEvaluation() {
     });
 }
 
+/** ดึงข้อมูลโปรไฟล์ */
 async function getProfile() {
   await http
     .get(config.API.profilePosition())
@@ -92,6 +96,7 @@ async function getProfile() {
     });
 }
 
+/** ดึงข้อมูล เพื่อเก็บรูปโปรไฟล์ */
 async function fetchProfile(id: string, avatarName: string) {
   http
     .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
@@ -100,11 +105,13 @@ async function fetchProfile(id: string, avatarName: string) {
     });
 }
 
+/** เปิด dialog แก้ไขผู้ประเมิน */
 function openEvaluator() {
   modalEdit.value = true;
   getOrgOp();
 }
 
+/** ปิด dialog */
 function close() {
   modalEdit.value = false;
   evaluatorId.value = null;
@@ -112,6 +119,7 @@ function close() {
   commanderHighId.value = null;
 }
 
+/** บันทึกข้อมูล */
 function onSubmit() {
   dialogConfirm($q, () => {
     if (id.value) {
@@ -139,42 +147,45 @@ function onSubmit() {
   });
 }
 
+/** ดึงข้อมูล ผู้ประเมิน */
 async function getOrgOp() {
   http
     .get(config.API.Kpiorg)
     .then((res) => {
       const data = res.data.result;
-      evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
+      evaluatorIdMainOp.value = data.caregiver.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix}${i.firstName} ${i.lastName}`,
       }));
-      commanderIdMainOp.value = data.commander.map((i: any) => ({
+      commanderIdMainOp.value = data.commander.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix}${i.firstName} ${i.lastName}`,
       }));
-      commanderHighMainOp.value = data.chairman.map((i: any) => ({
+      commanderHighMainOp.value = data.chairman.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix}${i.firstName} ${i.lastName}`,
       }));
 
       evaluatorId.value = data.caregiver
-        .map((i: any) => ({
+        .map((i: EvaOptionType) => ({
           id: i.id,
           name: `${i.prefix}${i.firstName} ${i.lastName}`,
         }))
-        .find((i: any) => i.id == store.dataEvaluation.evaluatorId);
+        .find((i: EvaOptionType) => i.id == store.dataEvaluation.evaluatorId);
       commanderId.value = data.commander
-        .map((i: any) => ({
+        .map((i: EvaOptionType) => ({
           id: i.id,
           name: `${i.prefix}${i.firstName} ${i.lastName}`,
         }))
-        .find((i: any) => i.id == store.dataEvaluation.commanderId);
+        .find((i: EvaOptionType) => i.id == store.dataEvaluation.commanderId);
       commanderHighId.value = data.chairman
-        .map((i: any) => ({
+        .map((i: EvaOptionType) => ({
           id: i.id,
           name: `${i.prefix}${i.firstName} ${i.lastName}`,
         }))
-        .find((i: any) => i.id == store.dataEvaluation.commanderHighId);
+        .find(
+          (i: EvaOptionType) => i.id == store.dataEvaluation.commanderHighId
+        );
     })
     .catch((e) => {
       messageError($q, e);
@@ -182,26 +193,27 @@ async function getOrgOp() {
     .finally(() => {});
 }
 
-function filterOption(val: any, update: Function, refData: string) {
+/** ฟิลเตอร์ input */
+function filterOption(val: string, update: Function, refData: string) {
   switch (refData) {
     case "evaluatorIdOp":
       update(() => {
         evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "commanderIdOp":
       update(() => {
         commanderIdOp.value = commanderIdMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "commanderHighOp":
       update(() => {
         commanderHighOp.value = commanderHighMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -210,10 +222,12 @@ function filterOption(val: any, update: Function, refData: string) {
   }
 }
 
+/** ดึงข้อมูลทั้งหมดในหน้า */
 async function getAll() {
   await Promise.all([fetchEvaluation(), getProfile(), getOrgOp()]);
 }
 
+/** ส่งให้ผู้ประเมิน */
 function sendToEvaluatore() {
   dialogConfirm(
     $q,
@@ -301,14 +315,17 @@ function requireEdit() {
   );
 }
 
+/** เปิด dialog ช่วยราชการ */
 function openGovernment() {
   modalGovernment.value = true;
 }
 
+/** เช็ค สถานะการทดลองงาน */
 function openStatus() {
   router.push(`/probation-detail/${store.dataEvaluation.profileId}`);
 }
 
+/** ส่งให้ผู้ประเมิน */
 function sendToEvauator() {
   dialogConfirm($q, () => {
     showLoader();
@@ -387,8 +404,14 @@ async function goToSummary() {
   );
 }
 
+/**
+ * เปิด dialog ข้อมูลผู้ประเมิน
+ * @param profileId id ผู้ประเมิน
+ * @param type ประเภท
+ */
 const modalEvaluatorDetail = ref<boolean>(false);
 const topic = ref<string>("");
+
 function viewEvaluatorDetail(profileId: string, type: string) {
   modalEvaluatorDetail.value = true;
   topic.value =
@@ -400,17 +423,22 @@ function viewEvaluatorDetail(profileId: string, type: string) {
   fetchProfileEvaluator(profileId);
 }
 
-const evaluator = ref<any>({
+const evaluator = ref<EvaluatorType>({
   fullName: "",
   position: "",
   avartar: "",
   posTypeName: "",
   posLevelName: "",
   org: "",
+  posExecutiveName: "",
   isPosmasterAct: false,
   posmasterAct: [],
 });
 
+/**
+ * ข้อมูลของผู้ประเมิน
+ * @param id ข้อมูลของผู้ประเมิน
+ */
 async function fetchProfileEvaluator(id: string) {
   showLoader();
   http
@@ -796,7 +824,7 @@ onMounted(async () => {
                   :rules="[ (val:string) => !!val ||
             `${'กรุณาเลือกผู้ประเมิน'}`, ]"
                   use-input
-                  @filter="(inputValue:any,
+                  @filter="(inputValue:string,
             doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
             ) "
                 />
@@ -833,7 +861,7 @@ onMounted(async () => {
                   map-options
                   class="inputgreen"
                   use-input
-                  @filter="(inputValue:any,
+                  @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
                     ) "
                 >
@@ -885,7 +913,7 @@ onMounted(async () => {
                   map-options
                   use-input
                   class="inputgreen"
-                  @filter="(inputValue:any,
+                  @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
                     ) "
                 >
@@ -989,7 +1017,7 @@ onMounted(async () => {
             <div class="row">
               <div class="col-12" v-if="evaluator.isPosmasterAct">
                 {{
-                  `${evaluator.posmasterAct.prefix}${evaluator.posmasterAct.firstName} ${evaluator.posmasterAct.lastName} (${evaluator.posmasterAct.posNo})`
+                  `${evaluator.posmasterAct[0].prefix}${evaluator.posmasterAct[0].firstName} ${evaluator.posmasterAct[0].lastName} (${evaluator.posmasterAct[0].posNo})`
                 }}
               </div>
               <div class="col-12" v-else>-</div>
@@ -999,88 +1027,8 @@ onMounted(async () => {
       </q-card-section>
     </q-card>
   </q-dialog>
-  <!-- <q-dialog v-model="modalScore" persistent>
-    <q-card bordered style="width: 50vh">
-      <q-form greedy @submit.prevent @validation-success="onSubmitScore">
-        <DialogHeader tittle="แก้ไขคะแนนเต็ม" :close="clearScore" />
-        <q-separator />
-        <q-card-section>
-          <div class="column q-gutter-sm">
-            <q-input
-              v-model="plannedPoint"
-              label="งานตามแผนปฏิบัติราชการประจำปี"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[
-                (val) =>
-                  !!val ||
-                  val == '0' ||
-                  'กรุณากรอกคะเเนนงานตามแผนปฏิบัติราชการประจำปี หรือ 0',
-              ]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="rolePoint"
-              label="งานตามหน้าที่ความรับผิดชอบหลัก"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' || `${'กรุณากรอกคะเเนนงานตามหน้าที่ความรับผิดชอบหลัก หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="specialPoint"
-              label="งานที่ได้รับมอบหมายพิเศษ"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนงานที่ได้รับมอบหมายพิเศษ หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-            <q-input
-              v-model="capacityPoint"
-              label="สมรรถนะ"
-              dense
-              outlined
-              class="inputgreen"
-              mask="###"
-              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนสมรรถนะ หรือ 0'}`,]"
-              hide-bottom-space
-              lazy-rules
-            />
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="bg-white row justify-between">
-          <div class="col-8 text-red q-px-sm">
-            <span v-if="scoreTotal == true"
-              >คะแนนเต็มรวมกันต้องเท่ากับ 100 คะแนน</span
-            >
-          </div>
-          <q-btn
-            label="บันทึก"
-            color="secondary"
-            type="submit"
-            :disable="totalScore !== 100"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog> -->
 
   <DialogGovernment v-model:modal="modalGovernment" />
-  <!-- <DialogStatus
-    v-model:modal="modalStatus"
-    v-model:is-probation="store.dataProfile.isProbation"
-  /> -->
 </template>
 <style>
 .bg-toolbar {
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 0e29e70..1ff7aea 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -2,17 +2,25 @@
 import { ref, onMounted, reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import config from "@/app.config";
-import http from "@/plugins/http";
-
-import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
 import type { QTableProps } from "quasar";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-
+import config from "@/app.config";
+import http from "@/plugins/http";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
 
+import type {
+  DataOptions,
+  MainListKpi,
+  PaginationType,
+} from "@/modules/08_KPI/interface/index/Main";
+import type {
+  RoundKpiResponse,
+  EvaOptionType,
+} from "@/modules/08_KPI/interface/response/index";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
@@ -21,7 +29,7 @@ const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
   mixin;
 
 /** Table*/
-const rows = ref<any[]>([]);
+const rows = ref<MainListKpi[]>([]);
 const visibleColumns = ref<string[]>([
   "createdAt",
   "year",
@@ -134,6 +142,17 @@ const total = ref<number>(0);
 const totalList = ref<number>(1);
 const isRoundClose = ref<boolean>(false);
 
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+/**
+ * ดึงข้อมูลรอบการประเมิน
+ * @param type 
+ */
 async function fetchRoundOption(type: string) {
   const y = type === "main" ? year.value : yearDialog.value;
   showLoader();
@@ -143,7 +162,7 @@ async function fetchRoundOption(type: string) {
     )
     .then(async (res) => {
       const data = res.data.result.data;
-      const list = data.map((e: any) => ({
+      const list = data.map((e: RoundKpiResponse) => ({
         id: e.id,
         name:
           e.durationKPI === "OCT"
@@ -194,28 +213,32 @@ async function fetchList() {
     });
 }
 
+/** เลือกรอบการประเมิน */
 function changRound() {
   formQuery.page = 1;
   fetchList();
 }
 
+/** ไปหน้ารายละเอียด */
 function redirectViewDetail(id: string) {
   store.tabMain = "1";
-
   router.push(`/KPI/${id}`);
 }
 
+/** สร้างแบบประเมิน */
 async function onClickAddList() {
   await getProfile();
   modalDialog.value = true;
 }
 
+/** ปิด Dialog  */
 function onCloseDialog() {
   modalDialog.value = false;
   formRound.kpiPeriodId = { id: "", name: "", isClosed: false };
   yearDialog.value = null;
 }
 
+/** บันทึกข้อมูลที่สร้าง */
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -250,6 +273,7 @@ function onSubmit() {
   });
 }
 
+/** ดึงข้อมูล */
 function getProfile() {
   http
     .get(config.API.profilePosition())
@@ -268,57 +292,43 @@ function getProfile() {
     })
     .catch((e) => {
       messageError($q, e);
-    });
-  // .finally(() => {
-  //   hideLoader();
-  // });
+    })
+    .finally(() => {});
 }
 
+/** เช็ครอบการประเมิน ปิด */
 function checkClosed() {
   isRoundClose.value = formRound.kpiPeriodId.isClosed;
 }
 
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 /**
  * function updatePagination
  * @param newPagination ข้อมูล Pagination ใหม่
  */
-function updatePagination(newPagination: any) {
+function updatePagination(newPagination: PaginationType) {
   formQuery.page = 1;
   formQuery.pageSize = newPagination.rowsPerPage;
 }
 
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
+/** ดึงข้อมูล option */
 function getOrgOp() {
   http
     .get(config.API.Kpiorg)
     .then((res) => {
       const data = res.data.result;
-      evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
+      evaluatorIdMainOp.value = data.caregiver.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
           i.lastName ? i.lastName : ""
         }`,
       }));
-      commanderIdMainOp.value = data.commander.map((i: any) => ({
+      commanderIdMainOp.value = data.commander.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
           i.lastName ? i.lastName : ""
         }`,
       }));
-      commanderHighMainOp.value = data.chairman.map((i: any) => ({
+      commanderHighMainOp.value = data.chairman.map((i: EvaOptionType) => ({
         id: i.id,
         name: `${i.prefix ? i.prefix : ""}${i.firstName ? i.firstName : ""} ${
           i.lastName ? i.lastName : ""
@@ -330,26 +340,32 @@ function getOrgOp() {
     });
 }
 
-function filterOption(val: any, update: Function, refData: string) {
+/**
+ * ฟังชั่น ฟิลเตอร์ จาก ค่า input
+ * @param val ค่าที่รับมาจาก input
+ * @param update
+ * @param refData
+ */
+function filterOption(val: string, update: Function, refData: string) {
   switch (refData) {
     case "evaluatorIdOp":
       update(() => {
         evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "commanderIdOp":
       update(() => {
         commanderIdOp.value = commanderIdMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
     case "commanderHighOp":
       update(() => {
         commanderHighOp.value = commanderHighMainOp.value.filter(
-          (v: any) => v.name.indexOf(val) > -1
+          (v: DataOptions) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -358,6 +374,13 @@ function filterOption(val: any, update: Function, refData: string) {
   }
 }
 
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
 onMounted(async () => {
   await Promise.all([fetchRoundOption("main"), getOrgOp()]);
 });
@@ -508,10 +531,7 @@ onMounted(async () => {
                 <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
                   <q-card bordered flat>
                     <q-list @click="redirectViewDetail(props.row.id)">
-                      <q-item
-                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
-                        :key="col.name"
-                      >
+                      <q-item v-for="col in props.cols" :key="col.name">
                         <q-item-section>
                           <q-item-label caption>{{ col.label }}</q-item-label>
 
@@ -607,7 +627,7 @@ onMounted(async () => {
                 :options="roundDialgOp"
                 hide-bottom-space
                 lazy-rules
-                :rules="[(val:any) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
+                :rules="[(val:DataOptions) => !!val.id || `${'กรุณาเลือกรอบการประเมิน'}`]"
                 @update:model-value="checkClosed"
               />
             </div>
@@ -636,7 +656,7 @@ onMounted(async () => {
                     !!val || `${'กรุณาเลือกผู้ประเมิน'}`,
                 ]"
                 use-input
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
                     ) "
               >
@@ -667,7 +687,7 @@ onMounted(async () => {
                 emit-value
                 map-options
                 use-input
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
                     ) "
               >
@@ -705,7 +725,7 @@ onMounted(async () => {
                 emit-value
                 map-options
                 use-input
-                @filter="(inputValue:any,
+                @filter="(inputValue:string,
                     doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
                     ) "
               >
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index b497b02..2ce446c 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -2,10 +2,13 @@
 import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
 
-import type { QTableProps } from "quasar";
 import type {
   DataOptions,
   Pagination,
@@ -18,9 +21,6 @@ import type {
 import TabAll from "@/modules/08_KPI/components/Evaluator/01_TabAll.vue";
 import TabOther from "@/modules/08_KPI/components/Evaluator/02_TabOther.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useKpiDataStore } from "@/modules/08_KPI/store";
-
 const $q = useQuasar();
 const router = useRouter();
 const store = useKpiDataStore();
@@ -89,6 +89,10 @@ const columns = ref<QTableProps["columns"]>([
 const totalList = ref<number>(0);
 const maxPage = ref<number>(1);
 
+/**
+ * ดึงข้อมูลรายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
+ * @param type
+ */
 async function fetchRoundOption(type: boolean = false) {
   showLoader();
   await http
@@ -121,6 +125,7 @@ async function fetchRoundOption(type: boolean = false) {
     });
 }
 
+/** ดึงข้อมูล list */
 async function fetchList() {
   showLoader();
   const body = {
@@ -157,6 +162,7 @@ async function fetchList() {
     });
 }
 
+/** เลือกรอบการประเมิน */
 function changRound() {
   store.formQuery.page = 1;
   fetchList();
@@ -171,13 +177,7 @@ function updatePagination(newPagination: Pagination) {
   store.formQuery.pageSize = newPagination.rowsPerPage;
 }
 
-watch(
-  () => store.formQuery.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
+/** เปลี่ยน tab */
 async function onChangTab() {
   store.formQuery.page = 1;
   dataListMain.value = [];
@@ -185,6 +185,13 @@ async function onChangTab() {
   await fetchList();
 }
 
+watch(
+  () => store.formQuery.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
 onMounted(async () => {
   await fetchRoundOption();
 });
@@ -313,19 +320,8 @@ onMounted(async () => {
                   label="รออนุมัติแก้ไขข้อตกลง"
                   @click="onChangTab"
                 />
-                <!-- <q-tab
-                  name="4"
-                  label="อนุมัติเพื่อเริ่มประเมิน"
-                  @click="onChangTab"
-                /> -->
                 <q-tab name="5" label="รายงานผลสำเร็จ" @click="onChangTab" />
                 <q-tab name="6" label="สรุปผลการประเมิน" @click="onChangTab" />
-                <!-- <q-tab
-                  name="6"
-                  label="รายงานผลสำเร็จ"
-                  onChangTab
-                  @click="onChangTab"
-                /> -->
               </q-tabs>
               <q-separator />
 
@@ -369,19 +365,6 @@ onMounted(async () => {
                   />
                 </q-tab-panel>
 
-                <!-- <q-tab-panel name="4">
-                  <TabOther
-                    :columns="columns"
-                    :visibleColumns="visibleColumns"
-                    :rows="dataListMain"
-                    :formQuery="store.formQuery"
-                    :total="totalList"
-                    :maxPage="maxPage"
-                    :updatePagination="updatePagination"
-                    :fetchList="fetchList"
-                  />
-                </q-tab-panel> -->
-
                 <q-tab-panel name="5">
                   <TabOther
                     :columns="columns"
diff --git a/src/modules/11_probation/component/01_Assign.vue b/src/modules/11_probation/component/01_Assign.vue
index 37c1ab7..af7bbca 100644
--- a/src/modules/11_probation/component/01_Assign.vue
+++ b/src/modules/11_probation/component/01_Assign.vue
@@ -164,10 +164,6 @@ function cancel() {
   getAssign();
 }
 
-function onSubmit() {
-  console.log(111);
-}
-
 /** ฟังชั่นส่ง วันที่ไปคำนวณ */
 async function postDateTime() {
   await http
@@ -408,16 +404,12 @@ async function getcompetency(id: string) {
       main3.value = data[2];
       main4.value = data[3];
       main5.value = data[4];
-      console.log(main.value);
     })
     .catch((err) => {
       messageError($q, err);
     });
   // await http.get(config.API.competencyOptions(id)).then((res: any) => {
   //   const data = res.data.data;
-
-  //   console.log(data);
-
   //   OPmain.value = data;
   //   main.value = data[0];
   //   main2.value = data[1];
@@ -433,7 +425,6 @@ async function getcompetency(id: string) {
  */
 const assign_competencyGroupMain = ref<any>();
 async function getCompetencyGroup(id: string) {
-  console.log(position.value);
   http
     .get(config.API.kpiCapacity + `/group?positionName=${position.value}`)
     .then((res) => {
diff --git a/src/modules/11_probation/component/editPage/01_result.vue b/src/modules/11_probation/component/editPage/01_result.vue
index 512aaa1..c891f88 100644
--- a/src/modules/11_probation/component/editPage/01_result.vue
+++ b/src/modules/11_probation/component/editPage/01_result.vue
@@ -165,7 +165,6 @@ async function fecthFormdata(id: string) {
 async function fecthFormRound() {
   try {
     let data = await dataArr.value;
-    console.log("🚀 ~ fecthFormRound ~ data:", data);
     evaluate_id.value = data.id;
     start_date.value = data.date_start;
     date_finish.value = data.date_finish;
diff --git a/src/modules/12_organization/views/main.vue b/src/modules/12_organization/views/main.vue
index 71b7c2c..da452fe 100644
--- a/src/modules/12_organization/views/main.vue
+++ b/src/modules/12_organization/views/main.vue
@@ -98,7 +98,6 @@ function savePDF() {
  * @param data
  */
 async function refreshChart(data: any, type: number) {
-  console.log(data, type);
 
   if (data.value === undefined) {
     fetchStructChart(data, type.toString());
@@ -113,7 +112,6 @@ async function fetchStructChart(
   type: string,
   status: boolean = false
 ) {
-  console.log(status);
 
   showLoader();
   await http
diff --git a/src/modules/13_portfolio/views/Add.vue b/src/modules/13_portfolio/views/Add.vue
index 95c59f5..bc0cf83 100644
--- a/src/modules/13_portfolio/views/Add.vue
+++ b/src/modules/13_portfolio/views/Add.vue
@@ -97,7 +97,6 @@ function uploadFiles(id: string) {
       ],
     })
     .then(async (res) => {
-      console.log(res);
       const foundKey: string | undefined = Object.keys(res.data).find(
         (key) =>
           res.data[key]?.fileName !== undefined &&
diff --git a/src/router/loader.ts b/src/router/loader.ts
index 0906711..4d17b93 100644
--- a/src/router/loader.ts
+++ b/src/router/loader.ts
@@ -7,6 +7,5 @@
  * @param folder "folderในsrc" [Ex. /src/"folder"] default=views เมื่อไม่ส่งค่า
  */
 export function load(view: string, folder: string = "views") {
-  //   console.log(`@/${folder}/${view}.vue`);
   return async () => await import(`@/${folder}/${view}.vue`);
 }