diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index c2a3ea2c2..5149ddd7c 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -2,22 +2,23 @@ import env from "../index";
 const KPI = `${env.API_URI}/kpi`;
 const kpiPeriod = `${env.API_URI}/kpi/period`;
 const kpiEvaluation = `${env.API_URI}/kpi/evaluation`;
+const kpiUserEvaluation = `${env.API_URI}/kpi/user/evaluation`;
+const kpiAchievement = `${env.API_URI}/kpi/user/achievement`;
 const kpiGroup = `${env.API_URI}/kpi/group`;
 const kpiPlan = `${env.API_URI}/kpi/plan`;
 const kpiCapacity = `${env.API_URI}/kpi/capacity`;
 const kpiLink = `${env.API_URI}/kpi/link`;
+const KpiUser = `${env.API_URI}/kpi/user`;
 export default {
   KPI,
   /** รอบการประเมินผล*/
-  kpiPeriod: `${kpiPeriod}`,
+  kpiPeriod,
   kpiPeriodById: (id: string) => `${kpiPeriod}/${id}`,
   kpiEvaluation,
 
-
   /** role */
-  kpiRoleMainList:`${KPI}/role`,
+  kpiRoleMainList: `${KPI}/role`,
 
-  
   kpiGroup,
   kpiGroupById: (id: string) => `${kpiGroup}/${id}`,
   kpiPlan,
@@ -27,4 +28,10 @@ export default {
   kpiCapacity,
 
   kpiLink,
+
+  kpiUserEvaluation,
+  profilePosition: () => `${env.API_URI}/org/profile/keycloak/position`,
+  kpiAchievement: (type: string) => `${kpiAchievement}/${type}`,
+  kpiAchievementPoint: (type: string) => `${kpiAchievement}/${type}/point`,
+  kpiUserCapacity: `${KpiUser}/capacity`,
 };
diff --git a/src/modules/14_KPI/components/detailList/01_Assessment.vue b/src/modules/14_KPI/components/detailList/01_Assessment.vue
new file mode 100644
index 000000000..963388874
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/01_Assessment.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import Work from "@/modules/14_KPI/components/detailList/Topic/01_Indicator.vue";
+import Competency from "@/modules/14_KPI/components/detailList/Topic/02_Competency.vue";
+import DialogListCriteria from "@/modules/14_KPI/components/detailList/Dialog/DialogListCriteria.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+
+// import type { ListCriteria } from "@/modules/08_KPI/interface/request/index";
+
+const dataListCriteria = ref<any[]>([]);
+
+const modalCriteria = ref<boolean>(false);
+const $q = useQuasar();
+const route = useRoute();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+const store = useKPIDataStore();
+
+const evaluationId = ref<string>(route.params.id.toString());
+
+const rows_01 = ref<any[]>();
+const rows_02 = ref<any[]>();
+const rows_03 = ref<any[]>();
+
+const totalResults1 = ref<number>(0);
+const totalResults2 = ref<number>(0);
+const totalResults3 = ref<number>(0);
+// const resultWork = ref<number>(0);
+
+function fetchListPlanned() {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("planned") + `?id=${evaluationId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      const newRow = data.map((e: any) => ({
+        ...e,
+        evaluationResults: (e.point / 5) * e.weight,
+      }));
+      rows_01.value = newRow;
+      if (newRow.length > 0) {
+        const result = newRow.reduce(
+          (sum: number, e: any) => sum + e.evaluationResults,
+          0
+        );
+        const weight = newRow.reduce(
+          (sum: number, e: any) => sum + e.weight,
+          0
+        );
+        totalResults1.value = (result * 60) / weight;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchListRole() {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("role") + `?id=${evaluationId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      const newRow = data.map((e: any) => ({
+        ...e,
+        evaluationResults: (e.point / 5) * e.weight,
+      }));
+      rows_02.value = newRow;
+      if (newRow.length > 0) {
+        const result = newRow.reduce(
+          (sum: number, e: any) => sum + e.evaluationResults,
+          0
+        );
+        const weight = newRow.reduce(
+          (sum: number, e: any) => sum + e.weight,
+          0
+        );
+        totalResults2.value = (result * 60) / weight;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchAssigned() {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("special") + `?id=${evaluationId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      const newRow = data.map((e: any) => ({
+        ...e,
+        evaluationResults: (e.point / 5) * e.weight,
+      }));
+      rows_03.value = newRow;
+      if (newRow.length > 0) {
+        const result = newRow.reduce(
+          (sum: number, e: any) => sum + e.evaluationResults,
+          0
+        );
+        const weight = newRow.reduce(
+          (sum: number, e: any) => sum + e.weight,
+          0
+        );
+        totalResults3.value = (result * 20) / weight;
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onInfo() {
+  modalCriteria.value = true;
+}
+const resultWork = computed(() => {
+  const total = totalResults1.value + totalResults2.value + totalResults3.value;
+  return total.toFixed(2);
+});
+
+function getCriteria() {
+  http
+    .get(config.API.kpiEvaluation)
+    .then((res) => {
+      const data = res.data.result.data;
+      dataListCriteria.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getCriteria();
+  fetchListPlanned();
+  fetchListRole();
+  fetchAssigned();
+});
+</script>
+
+<template>
+  <q-scroll-area
+    style="height: 100vh"
+    class="bg-white row col-12 text-dark q-pa-md"
+  >
+    <div class="text-weight-bold text-body2">
+      <span class="txt-under text-blue-6">องค์ประกอบที่ 1</span>
+      <span class="q-ml-sm"> ผลสัมฤทธิ์ของงาน</span>
+    </div>
+
+    <div class="q-gutter-md q-mt-sm">
+      <!-- องค์ประกอบที่ 1 -->
+      <Work
+        v-model:data="rows_01"
+        :title="`1. งานตามแผนปฏิบัติราชการประจำปี`"
+        :page="1"
+        :fetchList="fetchListPlanned"
+        :total="totalResults1"
+      />
+      <Work
+        v-model:data="rows_02"
+        :title="`2. งานตามหน้าที่ความรับผิดชอบหลัก`"
+        :page="2"
+        :fetchList="fetchListRole"
+        :total="totalResults2"
+      />
+      <Work
+        v-model:data="rows_03"
+        :title="`3. งานที่ได้รับมอบหมายพิเศษ`"
+        :page="3"
+        :fetchList="fetchAssigned"
+        :total="totalResults3"
+      />
+      <div class="row text-body2 text-weight-bold">
+        <!-- <div class="col-6 text-center row justify-center">
+          <span>รวมผลการประเมิน (ร้อยละ) 100</span>
+          <div class="text-primary q-pl-md">{{ total }}</div>
+        </div> -->
+
+        <div class="col-12 text-center row justify-center">
+          <span>สรุปผลการประเมินผลสัมฤทธิ์ของงาน (คะแนนเต็ม 80 คะแนน)</span>
+          <div class="text-primary q-pl-md">{{ resultWork }}</div>
+        </div>
+      </div>
+
+      <q-separator size="3px" class="q-my-lg" />
+
+      <!-- องค์ประกอบที่ 2 -->
+      <div class="text-weight-bold text-body2 q-mb-sm">
+        <span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
+        <span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
+        <q-btn
+          flat
+          icon="info"
+          color="info"
+          round
+          class="q-ml-xs"
+          @click="onInfo"
+        >
+          <q-tooltip>เกณฑ์การประเมิน</q-tooltip>
+        </q-btn>
+      </div>
+
+      <Competency v-model:dataListCriteria="dataListCriteria" />
+    </div>
+  </q-scroll-area>
+
+  <DialogListCriteria
+    v-model:modal="modalCriteria"
+    v-model:dataListCriteria="dataListCriteria"
+  />
+</template>
+
+<style scoped>
+.txt-under {
+  text-decoration: underline;
+}
+</style>
diff --git a/src/modules/14_KPI/components/detailList/02_CommanderAbove.vue b/src/modules/14_KPI/components/detailList/02_CommanderAbove.vue
new file mode 100644
index 000000000..d33dbfeb9
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/02_CommanderAbove.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="q-pa-md">2</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/14_KPI/components/detailList/03_CommanderAboveOneStep.vue b/src/modules/14_KPI/components/detailList/03_CommanderAboveOneStep.vue
new file mode 100644
index 000000000..c60e29914
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/03_CommanderAboveOneStep.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="q-pa-md">3</div>
+</template>
\ No newline at end of file
diff --git a/src/modules/14_KPI/components/detailList/04_File.vue b/src/modules/14_KPI/components/detailList/04_File.vue
new file mode 100644
index 000000000..cf76d7ddc
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/04_File.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import axios from "axios";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useRoute } from "vue-router";
+
+const $q = useQuasar();
+const route = useRoute();
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  success,
+  messageError,
+  dialogRemove,
+} = useCounterMixin();
+interface ArrayFileList {
+  id: string;
+  pathName: string;
+  fileName: string;
+}
+
+const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
+
+const documentFile = ref<any>(null);
+const fileList = ref<ArrayFileList[]>([]);
+
+async function getData() {
+  // showLoader();
+  // await http
+  //   .get(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}`)
+  //   .then((res) => {
+  //     fileList.value = res.data;
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  // const Data = new FormData();
+  // Data.append("file", documentFile.value);
+  // showLoader();
+  // await axios
+  //   .put(uploadUrl, file, {
+  //     headers: {
+  //       "Content-Type": file.type,
+  //     },
+  //   })
+  //   .then((res) => {
+  //     success($q, "อัปโหลดไฟล์สำเร็จ");
+  //     getData();
+  //   })
+  //   .catch((e) => {
+  //     messageError($q, e);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //     documentFile.value = null;
+  //   });
+}
+async function clickUpload(file: any) {
+  // const fileName = { fileName: file.name };
+
+  // dialogConfirm(
+  //   $q,
+  //   async () => {
+  //     const selectedFile = file;
+  //     const formdata = new FormData();
+  //     formdata.append("file", selectedFile);
+  //     await http
+  //       .post(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}`, {
+  //         replace: false,
+  //         fileList: fileName,
+  //       })
+  //       .then(async (res) => {
+  //         const foundKey: string | undefined = Object.keys(res.data).find(
+  //           (key) =>
+  //             res.data[key]?.fileName !== undefined &&
+  //             res.data[key]?.fileName !== ""
+  //         );
+  //         foundKey &&
+  //           uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
+  //       })
+  //       .catch((err) => {
+  //         messageError($q, err);
+  //       });
+  //   },
+  //   "ยืนยันการอัปโหลดไฟล์",
+  //   "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  // );
+}
+
+/**
+ * ดาวน์โหลดลิงค์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบไฟล์
+ * @param fileName file name
+ */
+function deleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(config.API.file + `/KPI/ไฟล์เอกสาร/${id.value}/${fileName}`)
+
+      .then((res) => {
+        success($q, `ลบไฟล์สำเร็จ`);
+        setTimeout(() => {
+          getData();
+          hideLoader();
+        }, 1000);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="q-pa-md">
+    <q-card bordered class="row col-12" style="border: 1px solid #d6dee1">
+      <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+        อัปโหลดไฟล์เอกสารหลักฐาน
+      </div>
+      <div class="col-12"><q-separator /></div>
+      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+        <div class="col-12 row" v-if="!isReadonly">
+          <q-file
+            for="inputFiles"
+            class="col-12"
+            outlined
+            dense
+            v-model="documentFile"
+            label="ไฟล์เอกสารหลักฐาน"
+            hide-bottom-space
+            accept=".pdf,.xlsx,.docx,.png,.jpg"
+            clearable
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+            <template v-slot:after>
+              <q-btn
+                size="14px"
+                v-if="documentFile"
+                flat
+                round
+                dense
+                color="add"
+                icon="mdi-upload"
+                @click="clickUpload(documentFile)"
+                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+              >
+            </template>
+          </q-file>
+
+          <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
+        </div>
+
+        <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <q-list class="full-width rounded-borders" bordered separator>
+            <q-item
+              clickable
+              v-ripple
+              v-for="data in fileList"
+              :key="data.id"
+              class="items-center"
+            >
+              <q-item-section>{{ data.fileName }}</q-item-section>
+              <q-space />
+              <div>
+                <q-btn
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="blue"
+                  icon="mdi-download"
+                  @click="downloadFile(data.fileName)"
+                  ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                >
+
+                <q-btn
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="red"
+                  class="q-ml-sm"
+                  icon="mdi-delete-outline"
+                  @click="deleteFile(data.fileName)"
+                  ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </q-item>
+          </q-list>
+        </div>
+
+        <div class="col-12" v-else>
+          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
diff --git a/src/modules/14_KPI/components/detailList/Dialog/01_FormIndicator.vue b/src/modules/14_KPI/components/detailList/Dialog/01_FormIndicator.vue
new file mode 100644
index 000000000..65e8531a6
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/Dialog/01_FormIndicator.vue
@@ -0,0 +1,527 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+
+const $q = useQuasar();
+const route = useRoute();
+const mixin = useCounterMixin();
+const store = useKpiDataStore();
+
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+  success,
+} = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
+  required: true,
+});
+
+const search = ref<string>("");
+const listCheckID = ref<string | null>(null);
+const listTarget = ref<any>([]);
+
+const formDetail = reactive<any>({
+  orgRevisionId: "",
+  id: "",
+  year: null,
+  round: "",
+  kpiPeriodId: "",
+  includingName: "",
+  including: "",
+  target: "",
+  unit: null,
+  weight: null,
+  achievement1: "",
+  achievement2: "",
+  achievement3: "",
+  achievement4: "",
+  achievement5: "",
+  meaning: "",
+  formula: "",
+  node: null,
+  nodeId: "",
+  nodeName: "",
+  strategy: null,
+  strategyId: "",
+  strategyName: "",
+});
+
+function fetchIndicators() {
+  const nodeId = store.dataProfile.nodeId;
+  const node = store.dataProfile.node;
+  const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
+  showLoader();
+  http
+    .get(
+      config.API.kpiPlan +
+        `?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&nodeId=${nodeId}&node=${node}&keyword=${""}`
+    )
+    .then((res) => {
+      listTarget.value = res.data.result.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchIndicatorsByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("planned") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.target = data.target;
+      formDetail.unit = data.unit;
+      formDetail.weight = data.weight;
+      formDetail.meaning = data.meaning;
+      formDetail.formula = data.formula;
+      clickList(data.kpiPlanId, true);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchListRole() {
+  const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
+  const position = store.dataProfile.position;
+  http
+    .get(
+      config.API.kpiRole +
+        `?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&position=${position}`
+    )
+    .then((res) => {
+      listTarget.value = res.data.result.data;
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchRoleByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("role") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.target = data.target;
+      formDetail.unit = data.unit;
+      formDetail.weight = data.weight;
+      formDetail.meaning = data.meaning;
+      formDetail.formula = data.formula;
+      clickList(data.kpiRoleId, true);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function clickList(id: string, isData: boolean = false) {
+  showLoader();
+  const url = numpage.value === 1 ? config.API.kpiPlan : config.API.kpiRole;
+  http
+    .get(`${url}/${id}`)
+    .then((res) => {
+      listCheckID.value = id;
+      const data = res.data.result;
+      if (!isData) {
+        formDetail.target = data.target;
+        formDetail.unit = data.unit;
+        formDetail.weight = data.weight;
+        formDetail.meaning = data.meaning;
+        formDetail.formula = data.formula;
+      }
+      formDetail.orgRevisionId = data.corgRevisionId;
+      formDetail.id = data.id;
+      formDetail.year = data.year;
+      formDetail.round = data.round;
+      formDetail.kpiPeriodId = data.kpiPeriodId;
+      formDetail.includingName = data.includingName;
+      formDetail.including = data.including;
+      formDetail.achievement1 = data.achievement1;
+      formDetail.achievement2 = data.achievement2;
+      formDetail.achievement3 = data.achievement3;
+      formDetail.achievement4 = data.achievement4;
+      formDetail.achievement5 = data.achievement5;
+      formDetail.node = data.node;
+      formDetail.nodeId = data.nodeId;
+      formDetail.nodeName = data.nodeName;
+      formDetail.strategy = data.strategy;
+      formDetail.strategyId = data.strategyId;
+      formDetail.strategyName = data.strategyName;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  search.value = "";
+  listCheckID.value = null;
+  formDetail.orgRevisionId = "";
+  formDetail.id = "";
+  formDetail.year = "";
+  formDetail.round = "";
+  formDetail.kpiPeriodId = "";
+  formDetail.includingName = "";
+  formDetail.including = "";
+  formDetail.target = "";
+  formDetail.unit = "";
+  formDetail.weight = "";
+  formDetail.achievement1 = "";
+  formDetail.achievement2 = "";
+  formDetail.achievement3 = "";
+  formDetail.achievement4 = "";
+  formDetail.achievement5 = "";
+  formDetail.meaning = "";
+  formDetail.formula = "";
+  formDetail.node = "";
+  formDetail.nodeId = "";
+  formDetail.strategy = "";
+  formDetail.strategyId = "";
+}
+
+function onSubmit() {
+  if (!listCheckID.value) {
+    dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
+  } else {
+    dialogConfirm($q, async () => {
+      // showLoader();
+
+      const formBody = {
+        target: formDetail.target,
+        unit: Number(formDetail.unit),
+        weight: Number(formDetail.weight),
+        meaning: formDetail.meaning,
+        formula: formDetail.formula,
+        kpiUserEvaluationId: store.dataEvaluation.id,
+        kpiPlanId: numpage.value === 1 ? listCheckID.value : undefined,
+        kpiRoleId: numpage.value === 2 ? listCheckID.value : undefined,
+      };
+      try {
+        const urlPlanned = isStatusEdit.value
+          ? config.API.kpiAchievement("planned") + `/${kpiUserPlannedId.value}`
+          : config.API.kpiAchievement("planned");
+
+        const urlRole = isStatusEdit.value
+          ? config.API.kpiAchievement("role") + `/${kpiUserPlannedId.value}`
+          : config.API.kpiAchievement("role");
+
+        const url = numpage.value === 1 ? urlPlanned : urlRole;
+        const method = isStatusEdit.value ? "put" : "post";
+        await http[method](url, formBody);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      } catch (err) {
+        messageError($q, err);
+      } finally {
+        hideLoader();
+        closeDialog();
+      }
+    });
+  }
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      if (numpage.value === 1) {
+        fetchIndicators();
+        isStatusEdit.value && fetchIndicatorsByid(kpiUserPlannedId.value);
+      } else if (numpage.value === 2) {
+        fetchListRole();
+        isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
+      }
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 100%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="
+            numpage == 1
+              ? 'เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี'
+              : 'เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ'
+          "
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section class="q-pa-none scroll" style="max-height: 75vh">
+          <div class="col-12 row">
+            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
+              <div class="col-12 fit">
+                <div class="col-12">
+                  <q-input
+                    v-model="search"
+                    outlined
+                    dense
+                    label="ค้นหา"
+                    class="inputgreen"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="search == ''" name="search" />
+                      <q-icon
+                        v-if="search !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="search = ''"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+
+                <q-card bordered flat class="q-mt-sm no-shadow bg-white col-12">
+                  <div class="row q-px-md q-py-sm items-center bg-grey-1">
+                    <div class="col-4">
+                      <span>รหัสตัวชี้วัด</span>
+                    </div>
+                    <div class="col-4">
+                      <span>ชื่อตัวชี้วัด</span>
+                    </div>
+                  </div>
+                  <q-separator />
+
+                  <q-card-section class="q-pa-none">
+                    <q-list separator>
+                      <q-item
+                        dense
+                        v-for="(item, index) in listTarget"
+                        :key="index"
+                        clickable
+                        v-ripple
+                        :active="listCheckID === item.id"
+                        active-class="my-menu-link"
+                        @click="clickList(item.id)"
+                      >
+                        <q-item-section class="q-pa-none">
+                          <div class="row items-center" style="height: 50px">
+                            <div class="col-4">
+                              {{ item.including }}
+                            </div>
+                            <div class="col-4">
+                              {{ item.includingName }}
+                            </div>
+                          </div>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card-section>
+                </q-card>
+              </div>
+            </div>
+
+            <div class="col-9">
+              <div class="row q-pa-md q-col-gutter-sm">
+                <div class="col-12">
+                  <span class="text-body2 text-weight-medium"
+                    >รายละเอียดตัวชี้วัด</span
+                  >
+                </div>
+                <div class="col-6">
+                  <q-card bordered class="full-height q-pa-sm">
+                    <div class="q-pa-sm q-col-gutter-lg">
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
+                        <div class="col-8">{{ formDetail.nodeName }}</div>
+                      </div>
+                      <div class="col-12 row" v-if="numpage === 1">
+                        <div class="col-4 text-grey-6">ยุทธศาสตร์ / แผน</div>
+                        <div class="col-8">{{ formDetail.strategyName }}</div>
+                      </div>
+
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">รหัสตัวชี้วัด</div>
+                        <div class="col-8">{{ formDetail.including }}</div>
+                      </div>
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
+                        <div class="col-8">{{ formDetail.includingName }}</div>
+                      </div>
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
+                        <div class="col-8">
+                          <q-input
+                            outlined
+                            v-model="formDetail.target"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
+                            ]"
+                            hide-bottom-space
+                          />
+                        </div>
+                      </div>
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">หน่วยนับ</div>
+                        <div class="col-8">
+                          <q-input
+                            outlined
+                            v-model="formDetail.unit"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
+                            ]"
+                            hide-bottom-space
+                            mask="#"
+                            reverse-fill-mask
+                          />
+                        </div>
+                      </div>
+                      <div class="col-12 row">
+                        <div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
+                        <div class="col-8">
+                          <q-input
+                            outlined
+                            v-model="formDetail.weight"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) =>
+                                !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
+                            ]"
+                            hide-bottom-space
+                            mask="###"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </q-card>
+                </div>
+                <div class="col-6 row">
+                  <div class="row col-12 card-box">
+                    <div
+                      class="col-12 bg-grey-2 row items-center text-weight-medium"
+                    >
+                      <div class="col-6 text-center">ระดับคะแนน</div>
+                      <div class="col-6 text-center">ผลสำเร็จของงาน</div>
+                    </div>
+                    <div class="row col-12 items-center lineTop">
+                      <div class="col-6 text-center text-body2">5</div>
+                      <div class="col-6 text-center text-primary">
+                        {{ formDetail.achievement5 }}
+                      </div>
+                    </div>
+                    <div class="row col-12 items-center lineTop">
+                      <div class="col-6 text-center text-body2">4</div>
+                      <div class="col-6 text-center text-primary">
+                        {{ formDetail.achievement4 }}
+                      </div>
+                    </div>
+                    <div class="row col-12 items-center lineTop">
+                      <div class="col-6 text-center text-body2">3</div>
+                      <div class="col-6 text-center text-primary">
+                        {{ formDetail.achievement3 }}
+                      </div>
+                    </div>
+                    <div class="row col-12 items-center lineTop">
+                      <div class="col-6 text-center text-body2">2</div>
+                      <div class="col-6 text-center text-primary">
+                        {{ formDetail.achievement2 }}
+                      </div>
+                    </div>
+                    <div class="row col-12 items-center lineTop">
+                      <div class="col-6 text-center text-body2">1</div>
+                      <div class="col-6 text-center text-primary">
+                        {{ formDetail.achievement1 }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="formDetail.meaning"
+                    label="นิยามหรือความหมายของตัวชี้วัด"
+                    type="textarea"
+                    outlined
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                    hide-bottom-space
+                    class="inputgreen"
+                  />
+                </div>
+
+                <div class="col-12">
+                  <q-input
+                    v-model="formDetail.formula"
+                    label="สูตรคำนวณ"
+                    type="textarea"
+                    outlined
+                    dense
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
+                    hide-bottom-space
+                    class="inputgreen"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+.no-shadow {
+  box-shadow: none !important;
+}
+.lineRight {
+  border-right: 1px solid #ededed !important;
+}
+.lineTop {
+  border-top: 1px solid #ededed !important;
+}
+.card-box {
+  border: 1px solid #ededed !important;
+  border-radius: 8px;
+}
+</style>
diff --git a/src/modules/14_KPI/components/detailList/Dialog/03_FormIndicatorSpecial.vue b/src/modules/14_KPI/components/detailList/Dialog/03_FormIndicatorSpecial.vue
new file mode 100644
index 000000000..9d103c41a
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/Dialog/03_FormIndicatorSpecial.vue
@@ -0,0 +1,362 @@
+<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 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 modal = defineModel<boolean>("modal", { required: true });
+const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
+const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
+  required: true,
+});
+
+const formData = reactive<FormDataAssigned>({
+  including: "", //รหัสตัวชี้วัด
+  includingName: "", //ชื่อตัวชี้วัด
+  target: "", //ค่าเป้าหมาย
+  unit: null, //หน่วยนับ
+  weight: null, //น้ำหนัก (ร้อยละ)
+  meaning: "", //นิยามหรือความหมายของตัวชี้วัด
+  formula: "", //สูตรคำนวณ
+  achievement1: "", // ผลสำเร็จของงาน1
+  achievement2: "", // ผลสำเร็จของงาน2
+  achievement3: "", // ผลสำเร็จของงาน3
+  achievement4: "", // ผลสำเร็จของงาน4
+  achievement5: "", // ผลสำเร็จของงาน5
+  kpiUserEvaluationId: "",
+});
+
+function fetchspecialByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("special") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+
+      formData.including = data.including;
+      formData.includingName = data.includingName;
+      formData.target = data.target;
+      formData.unit = data.unit;
+      formData.achievement1 = data.achievement1;
+      formData.achievement2 = data.achievement2;
+      formData.achievement3 = data.achievement3;
+      formData.achievement4 = data.achievement4;
+      formData.achievement5 = data.achievement5;
+      formData.weight = data.weight;
+      formData.formula = data.formula;
+      formData.meaning = data.meaning;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  formData.including = "";
+  formData.includingName = "";
+  formData.target = "";
+  formData.unit = null;
+  formData.achievement1 = "";
+  formData.achievement2 = "";
+  formData.achievement3 = "";
+  formData.achievement4 = "";
+  formData.achievement5 = "";
+  formData.weight = null;
+  formData.meaning = "";
+  formData.formula = "";
+}
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    formData.weight = Number(formData.weight);
+    formData.unit = Number(formData.unit);
+    formData.kpiUserEvaluationId = store.dataEvaluation.id;
+
+    try {
+      const url = isStatusEdit.value
+        ? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
+        : config.API.kpiAchievement("special");
+
+      const method = isStatusEdit.value ? "put" : "post";
+      await http[method](url, formData);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+      closeDialog();
+    }
+  });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 50%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`เพิ่มตัวชี้วัดที่ได้รับมอบหมาย`"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-2">
+              <q-input
+                outlined
+                v-model="formData.including"
+                label="รหัสตัวชี้วัด"
+                bg-color="white"
+                dense
+                class="inputgreen"
+                :rules="[(val) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`]"
+                hide-bottom-space
+                lazy-rules
+              />
+            </div>
+            <div class="col-10">
+              <q-input
+                v-model="formData.includingName"
+                label="ชื่อตัวชี้วัด"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                lazy-rules
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                v-model="formData.target"
+                label="ค่าเป้าหมาย"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                lazy-rules
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                v-model="formData.unit"
+                label="หน่วยนับ"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                mask="#"
+                reverse-fill-mask
+                lazy-rules
+              />
+            </div>
+            <div class="col-4">
+              <q-input
+                v-model="formData.weight"
+                label="น้ำหนัก (ร้อยละ)"
+                outlined
+                dense
+                :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                mask="#"
+                reverse-fill-mask
+                lazy-rules
+              />
+            </div>
+            <div class="col-12">
+              <q-card bordered>
+                <q-card>
+                  <q-card-actions class="bg-grey-3 row">
+                    <div class="col-4 flex justify-center items-center">
+                      <div>ระดับคะแนน</div>
+                    </div>
+                    <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
+                  </q-card-actions>
+                </q-card>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>5</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement5"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      lazy-rules
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>4</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement4"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      lazy-rules
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>3</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement3"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      lazy-rules
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>2</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement2"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      lazy-rules
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>1</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="formData.achievement1"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                      lazy-rules
+                    />
+                  </div>
+                </div>
+              </q-card>
+            </div>
+            <div class="col-12">
+              <q-input
+                v-model="formData.meaning"
+                label="นิยามหรือความหมายของตัวชี้วัด"
+                outlined
+                dense
+                type="textarea"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกนิยามหรือความหมายของตัวชี้วัด'}`,]"
+                hide-bottom-space
+                class="inputgreen"
+                lazy-rules
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                v-model="formData.formula"
+                label="สูตรคำนวณ"
+                bg-color="white"
+                type="textarea"
+                dense
+                class="inputgreen"
+                :rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
+                hide-bottom-space
+                lazy-rules
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+</style>
diff --git a/src/modules/14_KPI/components/detailList/Dialog/04_FormCompetency.vue b/src/modules/14_KPI/components/detailList/Dialog/04_FormCompetency.vue
new file mode 100644
index 000000000..8fcd6077e
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/Dialog/04_FormCompetency.vue
@@ -0,0 +1,486 @@
+<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 http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+
+const dataListCapacityDetails = ref<ListCapacity[]>([]);
+const route = useRoute();
+const idParam = ref<string>(route.params.id as string);
+
+const props = defineProps({
+  getDataList: Function,
+});
+
+const $q = useQuasar();
+const store = useKpiDataStore();
+const expectedLevel = ref<any>();
+
+const weight = ref<number | null>(null);
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  messageError,
+  dialogMessageNotify,
+  success,
+} = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+const idProps = defineModel<string | null>("id", { required: true });
+const competencyType = defineModel<string>("competencyType", {
+  required: true,
+});
+const search = ref<string>("");
+
+const type = ref<string>("");
+
+const listCheck = ref<string>();
+const listTarget = ref<any>([]);
+const listTargetMain = ref<any>([]);
+
+const expectedLevelOp = ref<Object[]>(["1", "2", "3", "4", "5"]);
+const formDetail = reactive<any>({
+  id: "",
+  type: "สมรรถนะหลัก",
+  name: "สมรรถนะ 1",
+  definition: "",
+  criteria: "",
+});
+const formScore = reactive<any>({
+  score1: "",
+  score2: "",
+  score3: "",
+  score4: "",
+  score5: "",
+});
+
+const fieldDetailLabels = {
+  type: "ประเภทสมรรถนะ",
+  name: "ชื่อสมรรถนะ",
+  definition: "คำจำกัดความ",
+};
+
+const fieldLabels = {
+  score1: "1",
+  score2: "2",
+  score3: "3",
+  score4: "4",
+  score5: "5",
+};
+
+const competencyTypeOp = ref<DataOptions[]>(store.competencyType);
+
+function clickList(index: string, data: any) {
+  const dataCapacityDetails = data.capacityDetails.sort(
+    (a: any, b: any) => a.level - b.level
+  );
+  showLoader();
+  setTimeout(() => {
+    hideLoader();
+  }, 100);
+  formScore.score1 = "";
+  formScore.score2 = "";
+  formScore.score3 = "";
+  formScore.score4 = "";
+  formScore.score5 = "";
+  listCheck.value = index as string;
+
+  formDetail.id = data.id;
+  formDetail.type = data.type;
+  formDetail.name = data.name;
+  formDetail.definition = data.description;
+  dataListCapacityDetails.value = dataCapacityDetails;
+  // formScore.score1 = dataCapacityDetails[0].description;
+  // formScore.score2 = dataCapacityDetails[1].description;
+  // formScore.score3 = dataCapacityDetails[2].description;
+  // formScore.score4 = dataCapacityDetails[3].description;
+  // formScore.score5 = dataCapacityDetails[4].description;
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  type.value = "";
+  search.value = "";
+  listCheck.value = "";
+  formScore.score1 = "";
+  formScore.score2 = "";
+  formScore.score3 = "";
+  formScore.score4 = "";
+  formScore.score5 = "";
+  formDetail.id = "";
+  formDetail.type = "";
+  formDetail.name = "";
+  formDetail.definition = "";
+  formDetail.criteria = "";
+  idProps.value = null;
+  weight.value = null;
+  expectedLevel.value = null;
+
+  dataListCapacityDetails.value = [];
+}
+
+/** เรียกใช้ class */
+function getclass() {
+  return "inputgreen";
+}
+
+function onSubmit() {
+  if (formDetail.id == "") {
+    dialogMessageNotify($q, "กรุณาเลือกสมรรถนะ");
+  } else {
+    dialogConfirm($q, () => {
+      const url = idProps.value
+        ? config.API.kpiUserCapacity + `/${idProps.value}`
+        : config.API.kpiUserCapacity;
+      const body = {
+        kpiUserEvaluationId: idParam.value,
+        kpiCapacityId: formDetail.id,
+        level: expectedLevel.value.toString(),
+        weight: weight.value,
+        summary: 0,
+      };
+      showLoader();
+      http[idProps.value ? `put` : `post`](url, body)
+        .then((res) => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          closeDialog();
+          props.getDataList?.(competencyType.value);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.KpiCapacity + `?type=${type.value}`)
+    .then((res) => {
+      const data = res.data.result.data;
+      listTarget.value = data;
+      listTargetMain.value = data;
+      if (data.capacityDetails) {
+        formScore.score1 = data.capacityDetails[0].description;
+        formScore.score2 = data.capacityDetails[1].description;
+        formScore.score3 = data.capacityDetails[2].description;
+        formScore.score4 = data.capacityDetails[3].description;
+        formScore.score5 = data.capacityDetails[4].description;
+      }
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+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}`)
+    .then((res) => {
+      const list = listTargetMain.value;
+      const data = res.data.result;
+      const target = list.find((item: any) => item.name == data.name);
+
+      const dataListCriteria = target.capacityDetails.sort(
+        (a: any, b: any) => a.level - b.level
+      );
+
+      listCheck.value = data.name as string;
+      formDetail.name = data.name;
+
+      weight.value = data.weight;
+      expectedLevel.value = data.level;
+
+      formDetail.id = target.id;
+      formDetail.type = target.type;
+      formDetail.name = target.name;
+      formDetail.definition = target.description;
+
+      dataListCapacityDetails.value = dataListCriteria;
+    })
+    .catch((e) => {})
+    .finally(() => {});
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      type.value = competencyType.value;
+      getData();
+      if (idProps.value) {
+        setTimeout(() => {
+          getDataById();
+        }, 500);
+      } else {
+        if (type.value == "HEAD") {
+          expectedLevel.value = store.defaultCompetencyCoreLevel;
+        } else if (type.value == "GROUP") {
+          expectedLevel.value = store.defaultCompetencyGroupLevel;
+        } else {
+          expectedLevel.value = null;
+        }
+      }
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 85%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="`เพิ่มสมรรถนะ`" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
+          <div class="row">
+            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
+              <div class="col-12 q-col-gutter-sm fit">
+                <div class="col-12">
+                  <q-select
+                    v-model="type"
+                    outlined
+                    label="ประเภทสมรรถนะ"
+                    dense
+                    readonly
+                    bg-color="white"
+                    option-label="name"
+                    option-value="id"
+                    :options="competencyTypeOp"
+                    emit-value
+                    :class="getclass()"
+                    map-options
+                  />
+                </div>
+                <div class="col-12">
+                  <q-input
+                    v-model="search"
+                    outlined
+                    dense
+                    label="ค้นหา"
+                    bg-color="white"
+                    :class="getclass()"
+                    @update:model-value="filterTxt"
+                  >
+                    <template v-slot:append>
+                      <q-icon v-if="search == ''" name="search" />
+                      <q-icon
+                        v-if="search !== ''"
+                        name="clear"
+                        class="cursor-pointer"
+                        @click="(search = ''), (listTarget = listTargetMain)"
+                      />
+                    </template>
+                  </q-input>
+                </div>
+                <div class="col-12">
+                  <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.name"
+                            clickable
+                            v-ripple
+                            :active="listCheck === item.name"
+                            active-class="my-menu-link"
+                            @click="clickList(item.name, item)"
+                          >
+                            <q-item-section class="q-pa-none">
+                              <div class="row items-center">
+                                <div class="col-12">
+                                  <span>{{ item.name }}</span>
+                                </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>
+              </div>
+            </div>
+
+            <div class="col-9 q-pa-md q-col-gutter-sm">
+              <span class="text-body2 text-weight-medium"
+                >รายละเอียดสมรรถนะ</span
+              >
+
+              <div class="row q-col-gutter-sm">
+                <div class="col-5 row">
+                  <q-card bordered class="fit q-pa-sm no-shadow">
+                    <div
+                      v-for="(field, index) in Object.keys(fieldDetailLabels)"
+                      :key="index + 1"
+                    >
+                      <div class="row q-pa-sm q-col-gutter-lg col-12">
+                        <div class="col-4 text-grey-6">
+                          {{
+                            fieldDetailLabels[
+                              field as keyof typeof fieldDetailLabels
+                            ]
+                          }}
+                        </div>
+                        <div class="col-8">
+                          <span v-if="field == 'type'">{{
+                            formDetail[field]
+                              ? store.convertCompetencyType(formDetail[field])
+                              : "-"
+                          }}</span>
+                          <span
+                            v-else-if="field == 'definition'"
+                            v-html="formDetail[field]"
+                          ></span>
+                          <span v-else>{{
+                            formDetail[field] ? formDetail[field] : "-"
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row q-col-gutter-sm q-pa-sm">
+                      <div class="col-4 text-grey-6">น้ำหนัก (ร้อยละ)</div>
+                      <div class="col-8">
+                        <q-input
+                          v-model="weight"
+                          dense
+                          outlined
+                          lazy-rules
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          mask="###"
+                        />
+                      </div>
+                      <div class="col-4 text-grey-6">ระดับที่คาดหวัง</div>
+                      <div
+                        v-if="type == 'HEAD' || type == 'GROUP'"
+                        class="col-8"
+                      >
+                        <q-select
+                          v-model="expectedLevel"
+                          :options="expectedLevelOp"
+                          dense
+                          emit-value
+                          outlined
+                          lazy-rules
+                          :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับที่คาดหวัง'}`,]"
+                          hide-bottom-space
+                          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>
+                <div class="col-7">
+                  <q-card bordered class="col-12 row 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-center">
+                        <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 />
+                    </div>
+                  </q-card>
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+.no-shadow {
+  box-shadow: none !important;
+}
+.lineRight {
+  border-right: 1px solid #ededed !important;
+}
+.lineTop {
+  border-top: 1px solid #ededed !important;
+}
+.card-box {
+  border: 1px solid #ededed !important;
+  border-radius: 8px;
+}
+</style>
diff --git a/src/modules/14_KPI/components/detailList/Dialog/DialogListCriteria.vue b/src/modules/14_KPI/components/detailList/Dialog/DialogListCriteria.vue
new file mode 100644
index 000000000..1904da9ce
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/Dialog/DialogListCriteria.vue
@@ -0,0 +1,53 @@
+<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;
+}
+
+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 });
+
+function close() {
+  modal.value = false;
+}
+</script>
+
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card style="min-width: 60%">
+      <DialogHeader tittle="เกณฑ์การประเมินสมรรถนะ" :close="close" />
+      <q-separator />
+      <q-card-section class="">
+        <q-card bordered>
+          <div class="bg-grey-2 q-pa-sm">
+            <div class="row text-dark text-body2 text-weight-medium">
+              <div class="text-center col-8">เกณฑ์การประเมิน</div>
+              <div class="text-center col-4">ระดับคะแนน</div>
+            </div>
+          </div>
+          <q-separator />
+          <div v-for="(item, index) in dataListCriteria" :key="item.id">
+            <div :class="`row q-pa-sm ${index %2 !== 0 && 'bg-grey-2'}`">
+              <div class="col-8"><span v-html="item.description"></span></div>
+              <div class="col-4 text-center self-center text-body1 text-weight-bold">
+                <span>{{ item.level }}</span>
+              </div>
+            </div>
+            <q-separator />
+          </div>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/14_KPI/components/detailList/DialogEvaluate/01_Indicator.vue b/src/modules/14_KPI/components/detailList/DialogEvaluate/01_Indicator.vue
new file mode 100644
index 000000000..16133dea3
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/DialogEvaluate/01_Indicator.vue
@@ -0,0 +1,286 @@
+<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 type { QTableProps } from "quasar";
+
+import { useKpiDataStore } from "@/modules/08_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const store = useKpiDataStore();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<any>("data", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
+
+/** table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "includingName",
+    align: "left",
+    label: "ตัวชี้วัด",
+    sortable: true,
+    field: "includingName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "ค่าเป้าหมาย",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "point",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "achievement",
+    align: "left",
+    label: "ผลสำเร็จของงาน",
+    sortable: true,
+    field: "achievement",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "evaluationResults",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "evaluationResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "includingName",
+  "target",
+  "point",
+  "weight",
+  "achievement",
+  "evaluationResults",
+]);
+
+function closeDialog() {
+  modal.value = false;
+}
+
+function updateAchievement(index: number, data: any) {
+  switch (data.point) {
+    case 1:
+      rows.value[index].achievement = data.achievement1;
+      break;
+    case 2:
+      rows.value[index].achievement = data.achievement2;
+      break;
+    case 3:
+      rows.value[index].achievement = data.achievement3;
+      break;
+    case 4:
+      rows.value[index].achievement = data.achievement4;
+      break;
+    case 5:
+      rows.value[index].achievement = data.achievement5;
+      break;
+  }
+}
+
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    try {
+      showLoader();
+      const formData = rows.value.map((e: any) => ({
+        id: e.id,
+        point: e.point,
+      }));
+
+      const url =
+        numpage.value === 1
+          ? config.API.kpiAchievementPoint("planned")
+          : numpage.value === 2
+          ? config.API.kpiAchievementPoint("role")
+          : numpage.value === 3
+          ? config.API.kpiAchievementPoint("special")
+          : "";
+      await http.post(url, formData);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+      closeDialog();
+    }
+  });
+}
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 1200px; max-width: 80vw">
+      <DialogHeader :tittle="'ประเมินผลสัมฤทธิ์ของงาน'" :close="closeDialog" />
+
+      <q-separator />
+      <q-card-section style="height: 80vh">
+        <div class="col-12 q-pa-sm">
+          <q-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            flat
+            bordered
+            dense
+            hide-pagination
+            class="custom-table2"
+            :visible-columns="visibleColumns"
+            :rows-per-page-options="[20]"
+            no-data-label="ไม่มีข้อมูล"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td v-for="col in props.cols" :key="col.id">
+                  <div v-if="col.name === 'point'">
+                    <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}` : "" }}
+                  </div>
+                  <div v-else-if="col.name === 'evaluationResults'">
+                    {{
+                      parseFloat(
+                        Number(
+                          (props.row.point / 5) * props.row.weight
+                        ).toFixed(2)
+                      )
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn label="บันทึก" color="secondary" @click="onSubmit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/14_KPI/components/detailList/DialogEvaluate/02_Competenct.vue b/src/modules/14_KPI/components/detailList/DialogEvaluate/02_Competenct.vue
new file mode 100644
index 000000000..899ce1395
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/DialogEvaluate/02_Competenct.vue
@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+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";
+
+const dataListCriteria = defineModel<any[]>("dataListCriteria", {
+  required: true,
+});
+
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+const sortedDataListCriteria = computed(() => {
+  return dataListCriteria.value.sort((a, b) => a.level - b.level);
+});
+
+const props = defineProps({
+  getData: Function,
+  default: () => console.log("not function"),
+});
+const {
+  dialogConfirm,
+  hideLoader,
+  showLoader,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = useCounterMixin();
+const store = useKPIDataStore();
+const $q = useQuasar();
+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",
+  "point",
+  "weight",
+  "summary",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "รายการสมรรถนะ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับที่คาดหวัง",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "point",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "summary",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "summary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function closeDialog() {
+  modal.value = false;
+  props.getData?.(type.value);
+}
+
+function onSubmit() {
+  // const main = rows.value;
+  // const checkPoint = main.some((item: any) => item.point === 0);
+  // if (checkPoint) {
+  //   dialogMessageNotify($q, "กรุณาเลือกระดับคะแนนตามเกณฑ์การประเมิน");
+  // } else {
+  //   dialogConfirm($q, () => {
+  //     const data = rows.value;
+  //     const body = data.map((i: any) => ({
+  //       id: i.id,
+  //       point: i.point,
+  //     }));
+  //     http
+  //       .post(config.API.kpiUserCapacity + `/point`, body)
+  //       .then((res) => {
+  //         closeDialog();
+  //       })
+  //       .catch((e) => {
+  //         messageError($q, e);
+  //       })
+  //       .finally(() => {});
+  //   });
+  // }
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent style="width: 60vw">
+    <q-card style="width: 1200px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="'ประเมิน'" :close="closeDialog" />
+        <q-separator />
+        <q-card-section class="q-pt-none" style="min-height: 70vh">
+          <div class="col-12 q-pa-sm">
+            <q-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              row-key="id"
+              flat
+              bordered
+              dense
+              hide-pagination
+              class="custom-table2"
+              :visible-columns="visibleColumns"
+              :rows-per-page-options="[20]"
+              no-data-label="ไม่มีข้อมูล"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td v-for="col in props.cols" :key="col.id">
+                    <div v-if="col.name === 'point'">
+                      <div v-if="type == 'HEAD' || type == '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 v-else>รอ ทำ select</div>
+                    </div>
+                    <div v-else-if="col.name === 'summary'">
+                      {{ props.row.point !== 0 ? props.row.point * 20 : "-" }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </q-table>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right" class="q-pa-md">
+          <q-btn unelevated label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/14_KPI/components/detailList/TabMain.vue b/src/modules/14_KPI/components/detailList/TabMain.vue
new file mode 100644
index 000000000..416fc6982
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/TabMain.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRoute } from "vue-router";
+
+import Assessment from "@/modules/14_KPI/components/detailList/01_Assessment.vue";
+import CommanderAbove from "@/modules/14_KPI/components/detailList/02_CommanderAbove.vue";
+import CommanderAboveOneStep from "@/modules/14_KPI/components/detailList/03_CommanderAboveOneStep.vue";
+import File from "@/modules/14_KPI/components/detailList/04_File.vue";
+
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+
+const store = useKPIDataStore();
+const route = useRoute();
+
+const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
+
+const itemsTab = ref<any>([
+  {
+    name: "1",
+    label: "ผู้ขอรับการประเมิน",
+  },
+  {
+    name: "2",
+    label: "ผู้บังคับบัญชาเหนือขึ้นไป",
+  },
+  {
+    name: "3",
+    label: "ผู้บังคับบัญชาเหนือขึ้นไปอีกหนึ่งขั้น",
+  },
+  {
+    name: "4",
+    label: "ไฟล์เอกสาร",
+  },
+]);
+
+const splitterModel = ref<number>(12);
+</script>
+<template>
+  <q-splitter v-model="splitterModel" disable>
+    <template v-slot:before>
+      <q-tabs
+        v-model="store.tabMain"
+        vertical
+        class="text-grey-7 text-weight-light"
+        active-class="bg-blue-1 text-blue-8 text-weight-bold"
+      >
+        <q-tab name="1" label="ผู้ขอรับการประเมิน" />
+        <q-tab name="2" label="ผู้บังคับบัญชา">
+          <div class="text-caption">เหนือขึ้นไป</div>
+        </q-tab>
+        <q-tab name="3" label="ผู้บังคับบัญชา">
+          <div class="text-caption">เหนือขึ้นไปอีกหนึ่งขั้น</div>
+        </q-tab>
+        <q-tab name="4" label="ไฟล์เอกสาร" />
+      </q-tabs>
+    </template>
+
+    <template v-slot:after>
+      <q-tab-panels
+        v-model="store.tabMain"
+        animated
+        swipeable
+        vertical
+        transition-prev="jump-up"
+        transition-next="jump-up"
+      >
+        <q-tab-panel
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          class="q-pa-none"
+        >
+          <Assessment v-if="store.tabMain === '1'" />
+          <CommanderAbove v-if="store.tabMain === '2'" />
+          <CommanderAboveOneStep v-if="store.tabMain === '3'" />
+          <File v-if="store.tabMain === '4'" />
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
+</template>
+
+<style scoped>
+.hover-tab:hover {
+  background-color: #0793f1;
+  color: white !important;
+  opacity: 1 !important;
+}
+</style>
diff --git a/src/modules/14_KPI/components/detailList/Topic/!02_CompetencyCard.vue b/src/modules/14_KPI/components/detailList/Topic/!02_CompetencyCard.vue
new file mode 100644
index 000000000..665dc0864
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/Topic/!02_CompetencyCard.vue
@@ -0,0 +1,345 @@
+<!-- <script setup lang="ts">
+import { onMounted, ref } 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 { 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 } from "@/modules/08_KPI/interface/request/index";
+
+const modalEvaluate = ref<boolean>(false);
+const store = useKpiDataStore();
+
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+const idCapacity = ref<string | null>(null);
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  success,
+} = mixin;
+
+const type = defineModel<string>("type", { required: true });
+const name = defineModel<any>("name", { required: true });
+const lists = defineModel<any>("lists", { required: true });
+
+const filterKeyword = ref<string>("");
+const modal = ref<boolean>(false);
+
+const visibleColumns = ref<string[]>([
+  "name",
+  "level",
+  "point",
+  "weight",
+  "summary",
+]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "รายการสมรรถนะ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับที่คาดหวัง",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "point",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "summary",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "summary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+function onAdd() {
+  modal.value = true;
+}
+
+const rows = ref<FormCapacityList[]>([]);
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type.value}`)
+    .then((res) => {
+      const data = res.data.result.data;
+      rows.value = data;
+      lists.value.push(res.data.result.data);
+      console.log("lists card===>", lists.value);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onEdit(data: FormCapacityList) {
+  modal.value = true;
+  idCapacity.value = data.id;
+}
+
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.kpiUserCapacity + `/${id}`)
+      .then((res) => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        getData();
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function onEvaluate() {
+  modalEvaluate.value = true;
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <q-card bordered style="border-radius: 5px" class="no-shadow">
+    <q-card-section class="bg-grey-2 q-py-sm">
+      <div class="row items-center">
+        <div class="col">
+          <span class="text-weight-medium">{{ name }}</span>
+          <q-btn
+            class="q-ml-xs"
+            flat
+            round
+            icon="mdi-plus"
+            color="primary"
+            size="12px"
+            dense
+            @click="onAdd"
+          >
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+
+        <q-space />
+        <q-btn
+          flat
+          round
+          icon="mdi-clipboard-check-outline"
+          color="blue-5"
+          size="12px"
+          dense
+          @click="onEvaluate"
+        >
+          <q-tooltip>ประเมิน</q-tooltip>
+        </q-btn>
+      </div>
+    </q-card-section>
+    <q-card-section class="q-pa-sm">
+      <q-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filterKeyword"
+        row-key="id"
+        flat
+        bordered
+        :paging="true"
+        dense
+        hide-pagination
+        class="custom-table2"
+        :visible-columns="visibleColumns"
+        no-data-label="ไม่มีข้อมูล"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.id">
+              <div v-if="col.name == 'createDate'">
+                {{ col.value ? date2Thai(col.value) : "-" }}
+              </div>
+              <div v-else-if="col.name == 'point'">
+                <div v-if="type == 'HEAD' || type == 'GROUP'">
+                  <q-rating
+                    v-model="props.row.point"
+                    max="5"
+                    size="sm"
+                    color="grey"
+                    :color-selected="store.ratingColors"
+                    label="ระดับการประเมินพฤติกรรม"
+                    disable
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าระดับที่คาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าระดับที่คาดหวัง (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>อยู่ในระดับที่คาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>อยู่ในระดับสูงกว่าที่คาดหวัง (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>เป็นแบบอย่างที่ดีให้กับผู้อื่น (5)</q-tooltip>
+                    </template>
+                  </q-rating>
+                </div>
+                <div v-else>รอ ทำ select</div>
+              </div>
+              <div v-else-if="col.name == 'summary'">
+                {{ props.row.point !== 0 ? props.row.point * 20 : "-" }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                flat
+                round
+                icon="edit"
+                color="edit"
+                @click.stop.pervent="onEdit(props.row)"
+              >
+                <q-tooltip>แก้ไข </q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                round
+                icon="delete"
+                color="red"
+                @click.stop.pervent="onDelete(props.row.id)"
+              >
+                <q-tooltip>ลบข้อมูล </q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+    </q-card-section>
+  </q-card>
+
+  <Dialog
+    v-model:modal="modal"
+    v-model:competency-type="type"
+    v-model:id="idCapacity"
+    :get-data-list="getData"
+  />
+
+  <DialogEvaluate
+    v-model:modal="modalEvaluate"
+    v-model:data="rows"
+    v-model:type="type"
+    :get-data="getData"
+  />
+</template>
+
+<style scoped>
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style> -->
diff --git a/src/modules/14_KPI/components/detailList/Topic/01_Indicator.vue b/src/modules/14_KPI/components/detailList/Topic/01_Indicator.vue
new file mode 100644
index 000000000..55a980b93
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/Topic/01_Indicator.vue
@@ -0,0 +1,395 @@
+<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 type { QTableProps } from "quasar";
+
+// import Dialog from "@/modules/14_KPI/components/detailList/Dialog/01_FormIndicator.vue";
+// import Dialog03 from "@/modules/14_KPI/components/detailList/Dialog/03_FormIndicatorSpecial.vue";
+// import DialogEvaluate from "@/modules/14_KPI/components/detailList/DialogEvaluate/01_Indicator.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+
+const $q = useQuasar();
+const store = useKPIDataStore();
+const route = useRoute();
+const {
+  date2Thai,
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = useCounterMixin();
+
+const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
+const title = defineModel<string>("title", { required: true });
+const rows = defineModel<any>("data", { required: true });
+const numpage = defineModel<number>("page", { required: true });
+const evaluationTotal = defineModel<number>("total", { required: true });
+
+const props = defineProps({
+  fetchList: { type: Function, required: true },
+});
+
+const visibleColumns = ref<string[]>([
+  "includingName",
+  "target",
+  "point",
+  "weight",
+  "achievement",
+  "evaluationResults",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "includingName",
+    align: "left",
+    label: "ตัวชี้วัด",
+    sortable: true,
+    field: "includingName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "target",
+    align: "left",
+    label: "ค่าเป้าหมาย",
+    sortable: true,
+    field: "target",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "point",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "achievement",
+    align: "left",
+    label: "ผลสำเร็จของงาน",
+    sortable: true,
+    field: "achievement",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "evaluationResults",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "evaluationResults",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+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);
+
+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 onEvaluate() {
+  modalEvaluate.value = true;
+}
+
+function onDelete(id: string) {
+  // dialogRemove($q, async () => {
+  //   try {
+  //     showLoader();
+  //     const url =
+  //       numpage.value === 1
+  //         ? config.API.kpiAchievement("planned") + `/${id}`
+  //         : numpage.value === 2
+  //         ? config.API.kpiAchievement("role") + `/${id}`
+  //         : numpage.value === 3
+  //         ? config.API.kpiAchievement("special") + `/${id}`
+  //         : "";
+  //     await http.delete(url);
+  //     success($q, "ลบข้อมูลสำเร็จ");
+  //     props.fetchList?.();
+  //   } catch (err) {
+  //     messageError($q, err);
+  //   } finally {
+  //     hideLoader();
+  //   }
+  // });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (!modal.value) {
+      props.fetchList?.();
+    }
+  }
+);
+
+watch(
+  () => modalAssigned.value,
+  () => {
+    if (!modalAssigned.value) {
+      props.fetchList?.();
+    }
+  }
+);
+
+watch(
+  () => modalEvaluate.value,
+  () => {
+    if (!modalEvaluate.value) {
+      props.fetchList?.();
+    }
+  }
+);
+</script>
+<template>
+  <q-card bordered style="border-radius: 5px" class="no-shadow">
+    <q-card-section class="bg-grey-2 q-py-sm">
+      <div class="row items-center no-wrap">
+        <div class="col">
+          <span class="text-weight-medium">{{ title }}</span>
+          <q-btn
+            v-if="!isReadonly"
+            class="q-ml-xs"
+            flat
+            round
+            icon="mdi-plus"
+            color="primary"
+            size="12px"
+            dense
+            @click="onAdd()"
+          >
+            <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+          </q-btn>
+        </div>
+        <div class="col-auto">
+          <q-btn
+            v-if="!isReadonly"
+            flat
+            round
+            icon="mdi-clipboard-check-outline"
+            color="blue-5"
+            size="12px"
+            dense
+            @click="onEvaluate"
+          >
+            <q-tooltip>ประเมิน</q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+    </q-card-section>
+    <q-separator />
+    <q-card-section class="q-pa-sm">
+      <q-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        :filter="filterKeyword"
+        row-key="id"
+        flat
+        bordered
+        dense
+        hide-pagination
+        class="custom-table2"
+        :visible-columns="visibleColumns"
+        :rows-per-page-options="[20]"
+        no-data-label="ไม่มีข้อมูล"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width v-if="!isReadonly" />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.id">
+              <div v-if="col.name === 'point'">
+                <q-rating
+                  v-model="props.row.point"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="store.ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                  disable
+                >
+                  <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}` : "" }}
+              </div>
+              <div v-else-if="col.name === 'evaluationResults'">
+                {{
+                  parseFloat(
+                    Number((props.row.point / 5) * props.row.weight).toFixed(2)
+                  )
+                }}
+              </div>
+              <div v-else>
+                {{ col.value ? col.value : "-" }}
+              </div>
+            </q-td>
+            <td v-if="!isReadonly">
+              <q-btn
+                flat
+                round
+                icon="edit"
+                color="edit"
+                size="12px"
+                dense
+                @click="onAdd(true, props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+
+              <q-btn
+                flat
+                round
+                icon="delete"
+                color="red"
+                size="12px"
+                dense
+                @click="onDelete(props.row.id)"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </td>
+          </q-tr>
+        </template>
+        <template v-slot:bottom>
+          <span class="text-body2 text-weight-bold"
+            >รวมผลการประเมิน (ร้อยละ)</span
+          >
+          <div class="text-primary q-pl-md">{{ evaluationTotal }}</div>
+        </template>
+      </q-table>
+      <!-- <div class="row text-body2 text-weight-bold q-pa-md">
+        <div class="col-12 text-center row justify-center">
+          <span>รวมผลการประเมิน (ร้อยละ)</span>
+          <div class="text-primary q-pl-md">{{ evaluationTotal }}</div>
+        </div>
+      </div> -->
+    </q-card-section>
+  </q-card>
+
+  <Dialog
+    v-model:modal="modal"
+    :numpage="numpage"
+    :isStatusEdit="isStatusEdit"
+    :kpiUserPlannedId="kpiUserPlannedId"
+  />
+  <Dialog03
+    v-model:modal="modalAssigned"
+    :numpage="numpage"
+    :isStatusEdit="isStatusEdit"
+    :kpiUserPlannedId="kpiUserPlannedId"
+  />
+
+  <DialogEvaluate
+    v-model:modal="modalEvaluate"
+    :data="rows"
+    :numpage="numpage"
+  />
+</template>
+<style scoped>
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue b/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue
new file mode 100644
index 000000000..52a22db76
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/Topic/02_Competency.vue
@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import { onMounted, ref, computed } from "vue";
+
+// import Dialog from "@/modules/14_KPI/components/detailList/Dialog/04_FormCompetency.vue";
+// import DialogEvaluate from "@/modules/14_KPI/components/detailList/DialogEvaluate/02_Competenct.vue";
+
+import { useQuasar, type QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+
+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";
+
+const dataListCriteria = defineModel<any[]>("dataListCriteria", {
+  required: true,
+});
+
+const sortedDataListCriteria = computed(() => {
+  return dataListCriteria.value.sort((a, b) => a.level - b.level);
+});
+
+const modalEvaluate = ref<boolean>(false);
+const store = useKPIDataStore();
+
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
+
+const idCapacity = ref<string | null>(null);
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  success,
+} = mixin;
+
+const modal = ref<boolean>(false);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "รายการสมรรถนะ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "level",
+    align: "left",
+    label: "ระดับที่คาดหวัง",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "point",
+    align: "left",
+    label: "ระดับคะแนนตามเกณฑ์การประเมิน",
+    sortable: true,
+    field: "point",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "weight",
+    align: "left",
+    label: "น้ำหนัก (ร้อยละ)",
+    sortable: true,
+    field: "weight",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "summary",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "summary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const typeCompetency = ref<string>("");
+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) {
+  showLoader();
+  http
+    .get(config.API.kpiUserCapacity + `?id=${id.value}&type=${type}`)
+    .then(async (res) => {
+      const data = res.data.result.data;
+      rows.value[type] = data;
+      lists.value = await lists.value.filter((x: any) => x.type != type);
+      lists.value.push({ type: type, data });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      // cal summary
+      let result = 0;
+      let weight = 0;
+      let total = 0;
+      for (let index = 0; index < store.competencyType.length; index++) {
+        const element = await store.competencyType[index];
+        const dataArr = await lists.value.find(
+          (x: any) => x.type == element.id
+        );
+        if (dataArr) {
+          result += dataArr.data.reduce(
+            (sum: number, e: any) => sum + (e.point / 5) * e.weight,
+            0
+          );
+          weight += dataArr.data.reduce(
+            (sum: number, e: any) => sum + e.weight,
+            0
+          );
+          total++;
+        }
+      }
+      if (total > 0) {
+        let weightAvg = weight / total;
+        let resultAvg = result / total;
+        let sum = weightAvg != 0 ? (resultAvg / weightAvg) * 20 : 0;
+        resultEvaluation.value = sum.toFixed(2);
+      }
+      // end cal summary
+      hideLoader();
+    });
+}
+
+function onEdit(data: any, type: string) {
+  idCapacity.value = data.id;
+  typeCompetency.value = type;
+  modal.value = true;
+}
+
+function onDelete(id: string, type: string) {
+  // dialogRemove($q, () => {
+  //   showLoader();
+  //   http
+  //     .delete(config.API.kpiUserCapacity + `/${id}`)
+  //     .then((res) => {
+  //       success($q, "ลบข้อมูลสำเร็จ");
+  //       getData(type);
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
+  // });
+}
+
+function onEvaluate(type: string) {
+  typeCompetency.value = type;
+  modalEvaluate.value = true;
+}
+
+onMounted(() => {
+  for (let index = 0; index < store.competencyType.length; index++) {
+    const element = store.competencyType[index];
+    getData(element.id);
+  }
+});
+</script>
+
+<template>
+  <div v-for="(item, index) in store.competencyType" :key="index">
+    <q-card bordered style="border-radius: 5px" class="no-shadow">
+      <q-card-section class="bg-grey-2 q-py-sm">
+        <div class="row items-center">
+          <div class="col">
+            <span class="text-weight-medium">{{ item.name }}</span>
+            <q-btn
+              v-if="!isReadonly"
+              class="q-ml-xs"
+              flat
+              round
+              icon="mdi-plus"
+              color="primary"
+              size="12px"
+              dense
+              @click="onAdd(item.id)"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+
+          <q-space />
+          <q-btn
+            v-if="!isReadonly"
+            flat
+            round
+            icon="mdi-clipboard-check-outline"
+            color="blue-5"
+            size="12px"
+            dense
+            @click="onEvaluate(item.id)"
+          >
+            <q-tooltip>ประเมิน</q-tooltip>
+          </q-btn>
+        </div>
+      </q-card-section>
+      <q-card-section class="q-pa-sm">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows[item.id]"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          hide-pagination
+          class="custom-table2"
+          no-data-label="ไม่มีข้อมูล"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width v-if="!isReadonly" />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name == 'createDate'">
+                  {{ col.value ? date2Thai(col.value) : "-" }}
+                </div>
+                <div v-else-if="col.name == 'point'">
+                  <div>
+                    <q-rating
+                      v-model="props.row.point"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="store.ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                      disable
+                    >
+                      <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 v-else>รอ ทำ select</div> -->
+                </div>
+                <div v-else-if="col.name == 'summary'">
+                  {{
+                    props.row.point !== 0
+                      ? (props.row.point / 5) * props.row.weight
+                      : "-"
+                  }}
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+              <q-td v-if="!isReadonly">
+                <q-btn
+                  flat
+                  round
+                  icon="edit"
+                  color="edit"
+                  @click.stop.pervent="onEdit(props.row, item.id)"
+                >
+                  <q-tooltip>แก้ไข </q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  icon="delete"
+                  color="red"
+                  @click.stop.pervent="onDelete(props.row.id, item.id)"
+                >
+                  <q-tooltip>ลบข้อมูล </q-tooltip>
+                </q-btn>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </q-card-section>
+    </q-card>
+  </div>
+
+  <Dialog
+    v-model:modal="modal"
+    v-model:competency-type="typeCompetency"
+    v-model:id="idCapacity"
+    :get-data-list="getData"
+  />
+
+  <DialogEvaluate
+    v-model:modal="modalEvaluate"
+    v-model:data="rows[typeCompetency]"
+    v-model:type="typeCompetency"
+    v-model:dataListCriteria="dataListCriteria"
+    :get-data="getData"
+  />
+
+  <div class="row text-body2 text-weight-bold justify-center">
+    <span>สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม 20 คะแนน)</span>
+    <div class="text-primary q-pl-md">{{ resultEvaluation }}</div>
+  </div>
+</template>
+
+<style scoped>
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/14_KPI/store/KPIStore.ts b/src/modules/14_KPI/store/KPIStore.ts
index 5cc082e07..2cdd7f3dd 100644
--- a/src/modules/14_KPI/store/KPIStore.ts
+++ b/src/modules/14_KPI/store/KPIStore.ts
@@ -1,9 +1,188 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
 // store
 export const useKPIDataStore = defineStore("KPIDataStore", () => {
-  const competencyType = ref<string>("HEAD");
+  // const competencyType = ref<string>("HEAD");
 
-  return { competencyType };
+  const tabMain = ref<string>("1");
+  const dataProfile = ref<any>();
+  const dataEvaluation = ref<any>();
+
+  const competencyType = ref<DataOption[]>([
+    {
+      id: "HEAD",
+      name: "สมรรถนะหลัก",
+    },
+    {
+      id: "GROUP",
+      name: "สมรรถนะประจำกลุ่มงาน",
+    },
+    {
+      id: "EXECUTIVE",
+      name: "สมรรถนะประจำผู้บริหารกรุงเทพมหานคร",
+    },
+    {
+      id: "DIRECTOR",
+      name: "สมรรถนะเฉพาะสำหรับตำแหน่ง ผอ.เขต ผช.ผอ.เขต และหัวหน้าฝ่ายในสังกัด สนง.เขต",
+    },
+    {
+      id: "INSPECTOR",
+      name: "สมรรถนะเฉพาะสำหรับตำแหน่งผู้ตรวจราชการ กทม. และผู้ตรวจราชการ",
+    },
+  ]);
+
+  function convertStatus(val: string) {
+    switch (val) {
+      case "PENDING":
+        return "รอดำเนินการ";
+      case "INPROGRESS":
+        return "กําลังดำเนินการ";
+      case "DONE":
+        return "ประเมินเสร็จสิ้น";
+      default:
+        break;
+    }
+  }
+
+  function convertResults(val: string) {
+    switch (val) {
+      case "PENDING":
+        return "รอดำเนินการ";
+      case "PASSED":
+        return "ผ่านการประเมิน";
+      case "NOTPASSED":
+        return "ไม่ผ่านการประเมิน";
+      default:
+        break;
+    }
+  }
+
+  const ratingColors = ref<string[]>([
+    "light-blue-3",
+    "light-blue-6",
+    "blue",
+    "blue-9",
+    "blue-10",
+  ]);
+
+  function checkCompetency() {
+    const position = dataProfile.value.position;
+    const posTypeName = dataProfile.value.posTypeName;
+    const posLevelName = dataProfile.value.posLevelName;
+
+    if (
+      position == "ผู้ตรวจราชการกรุงเทพมหานคร" ||
+      position == "ผู้ตรวจราชการ"
+    ) {
+      competencyType.value = competencyType.value.filter(
+        (x: DataOption) => x.id == "HEAD" || x.id == "INSPECTOR"
+      );
+    } else if (position == "ผู้อำนวยการเขต") {
+      competencyType.value = competencyType.value.filter(
+        (x: DataOption) => x.id == "HEAD" || x.id == "DIRECTOR"
+      );
+    } else {
+      switch (posTypeName + " " + posLevelName) {
+        // case "ทั่วไป ปฏิบัติงาน":
+        // case "ทั่วไป ชำนาญงาน":
+        // case "ทั่วไป อาวุโส":
+        // case "วิชาการ ปฏิบัติการ":
+        // case "วิชาการ ชำนาญการ":
+        // case "วิชาการ ชำนาญการพิเศษ":
+        // case "วิชาการ เชี่ยวชาญ":
+        // case "วิชาการ ทรงคุณวุฒิ":
+        //   competencyType.value = competencyType.value.filter(
+        //     (x: DataOptions) => x.id == "HEAD" || x.id == "GROUP"
+        //   );
+        //   break;
+        case "อำนวยการ ต้น":
+        case "อำนวยการ สูง":
+        case "บริหาร ต้น":
+        case "บริหาร สูง":
+          competencyType.value = competencyType.value.filter(
+            (x: DataOption) => x.id == "HEAD" || x.id == "EXECUTIVE"
+          );
+          break;
+        default:
+          competencyType.value = competencyType.value.filter(
+            (x: DataOption) => x.id == "HEAD" || x.id == "GROUP"
+          );
+          break;
+      }
+    }
+  }
+
+  const defaultCompetencyCoreLevel = ref<number>();
+  const defaultCompetencyGroupLevel = ref<number | null>(null);
+  function checkCompetencyDefaultCompetencyLevel() {
+    const posTypeName = dataProfile.value.posTypeName;
+    const posLevelName = dataProfile.value.posLevelName;
+
+    switch (posTypeName + " " + posLevelName) {
+      case "บริหาร สูง":
+        defaultCompetencyCoreLevel.value = 5;
+        break;
+      case "บริหาร ต้น":
+        defaultCompetencyCoreLevel.value = 4;
+        break;
+      case "อำนวยการ สูง":
+        defaultCompetencyCoreLevel.value = 4;
+        break;
+      case "อำนวยการ ต้น":
+        defaultCompetencyCoreLevel.value = 3;
+        break;
+      case "วิชาการ ทรงคุณวุฒิ":
+        defaultCompetencyCoreLevel.value = 5;
+        defaultCompetencyGroupLevel.value = 5;
+        break;
+      case "วิชาการ เชี่ยวชาญ":
+        defaultCompetencyCoreLevel.value = 4;
+        defaultCompetencyGroupLevel.value = 4;
+        break;
+      case "วิชาการ ชำนาญการพิเศษ":
+        defaultCompetencyCoreLevel.value = 3;
+        defaultCompetencyGroupLevel.value = 4;
+        break;
+      case "วิชาการ ชำนาญการ":
+        defaultCompetencyCoreLevel.value = 2;
+        defaultCompetencyGroupLevel.value = 3;
+        break;
+      case "วิชาการ ปฏิบัติการ":
+        defaultCompetencyCoreLevel.value = 1;
+        defaultCompetencyGroupLevel.value = 2;
+        break;
+      case "ทั่วไป ทักษะพิเศษ":
+        defaultCompetencyCoreLevel.value = 4;
+        defaultCompetencyGroupLevel.value = 4;
+        break;
+      case "ทั่วไป อาวุโส":
+        defaultCompetencyCoreLevel.value = 3;
+        defaultCompetencyGroupLevel.value = 3;
+        break;
+      case "ทั่วไป ชำนาญงาน":
+        defaultCompetencyCoreLevel.value = 2;
+        defaultCompetencyGroupLevel.value = 2;
+        break;
+      case "ทั่วไป ปฏิบัติงาน":
+        defaultCompetencyCoreLevel.value = 1;
+        defaultCompetencyGroupLevel.value = 1;
+        break;
+      default:
+        break;
+    }
+  }
+
+  return {
+    competencyType,
+    convertStatus,
+    convertResults,
+    tabMain,
+    dataProfile,
+    dataEvaluation,
+    ratingColors,
+    checkCompetency,
+    checkCompetencyDefaultCompetencyLevel,
+  };
 });
diff --git a/src/modules/14_KPI/views/detail.vue b/src/modules/14_KPI/views/detail.vue
index 818d0ca87..6c25a30f0 100644
--- a/src/modules/14_KPI/views/detail.vue
+++ b/src/modules/14_KPI/views/detail.vue
@@ -1,3 +1,244 @@
+<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 TabMain from "@/modules/14_KPI/components/detailList/TabMain.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+
+// import type { FormProfile } from "@/modules/08_KPI/interface/request/index";
+
+const route = useRoute();
+const id = ref<string>(route.params.id as string);
+const isReadonly = <boolean>(route.name === "KPIDetail" ? true : false);
+
+const store = useKPIDataStore();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const formProfile = reactive<any>({
+  fullName: "",
+  position: "",
+  type: "",
+  level: "",
+  status: "",
+  result: "",
+  score: "-",
+  avartar: "",
+});
+
+const router = useRouter();
+
+function fetchEvaluation() {
+  showLoader();
+  http
+    .get(config.API.kpiUserEvaluation + `/${id.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      store.dataEvaluation = data;
+      formProfile.status = store.convertStatus(data.evaluationStatus);
+      formProfile.result = store.convertResults(data.evaluationResults);
+      fetchProfile(data.profileId);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function getProfile() {
+  showLoader();
+  http
+    .get(config.API.profilePosition())
+    .then((res) => {
+      const data = res.data.result;
+      store.dataProfile = data;
+      store.checkCompetency();
+      store.checkCompetencyDefaultCompetencyLevel();
+      formProfile.fullName = `${data.prefix}${data.firstName} ${data.lastName}`;
+      formProfile.position = data.position;
+      formProfile.type = data.posTypeName;
+      formProfile.level = data.posLevelName;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchProfile(id: string) {
+  showLoader();
+  await http
+    .get(
+      config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
+    )
+    .then(async (res) => {
+      formProfile.avartar = res.data.downloadUrl;
+    })
+    .catch(() => {
+      // profilePicture.value = avatar;
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** save */
+function onSave() {}
+
+onMounted(() => {
+  fetchEvaluation();
+  getProfile();
+});
+</script>
+
 <template>
-  <div>detail</div>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="isReadonly ? router.push(`/KPI-list`) : router.push(`/KPI`)"
+      />
+      {{ id ? `แก้ไขแบบประเมิน` : `เพิ่มแบบประเมิน` }}
+      <q-space />
+    </div>
+    <div class="col-12">
+      <q-card bordered flat class="relative-position">
+        <div
+          class="absolute-center-left"
+          style="left: 2%; top: 50%; transform: translateY(-50%)"
+        >
+          <q-avatar size="95px">
+            <img
+              v-if="formProfile.avartar == null"
+              src="@/assets/avatar_user.jpg"
+              class="bg-grey-3"
+              style="object-fit: cover"
+            />
+
+            <img v-else :src="formProfile.avartar" />
+          </q-avatar>
+        </div>
+        <div class="row col-12">
+          <div class="row items-center col-12 q-pa-sm">
+            <div class="col-12" style="padding-left: 12%">
+              <div class="row col-12 items-center">
+                <span class="text-h6 text-weight-medium text-primary">{{
+                  formProfile.fullName ? formProfile.fullName : "-"
+                }}</span>
+                <q-space />
+                <div class="q-gutter-x-sm">
+                  <q-btn
+                    unelevated
+                    round
+                    icon="mdi-file-eye-outline"
+                    color="grey-2"
+                    text-color="primary"
+                    size="md"
+                  >
+                    <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    unelevated
+                    round
+                    color="grey-2"
+                    text-color="blue-5"
+                    icon="mdi-file-eye-outline"
+                    size="md"
+                  >
+                    <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
+                  </q-btn>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="row items-center bg-toolbar col-12 q-pa-sm">
+            <div class="col-12 q-py-xs" style="padding-left: 12%">
+              <div class="row no-wrap">
+                <div class="col-2">
+                  <div class="column">
+                    <span class="text-grey-6">ตำแหน่งในสายงาน</span>
+                    <span class="text-weight-medium text-dark">{{
+                      formProfile.position
+                    }}</span>
+                  </div>
+                </div>
+                <div class="col-2">
+                  <div class="column">
+                    <span class="text-grey-6">ประเภทตำแหน่ง</span>
+                    <span class="text-weight-medium text-dark">{{
+                      formProfile.type
+                    }}</span>
+                  </div>
+                </div>
+                <div class="col-2">
+                  <div class="column">
+                    <span class="text-grey-6">ระดับตำแหน่ง</span>
+                    <span class="text-weight-medium text-dark">{{
+                      formProfile.level
+                    }}</span>
+                  </div>
+                </div>
+                <div class="col-2">
+                  <div class="column">
+                    <span class="text-grey-6">สถานะการประเมิน</span>
+                    <span class="text-weight-medium text-dark">{{
+                      formProfile.status
+                    }}</span>
+                  </div>
+                </div>
+                <div class="col-2">
+                  <div class="column">
+                    <span class="text-grey-6">ผลการประเมิน</span>
+                    <span class="text-weight-medium text-dark">{{
+                      formProfile.result
+                    }}</span>
+                  </div>
+                </div>
+                <div class="col-2">
+                  <div class="column">
+                    <span class="text-grey-6">คะแนนประเมิน</span>
+                    <span class="text-weight-medium text-primary">{{
+                      formProfile.score
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-card>
+
+      <q-card class="q-mt-md rounded">
+        <TabMain />
+      </q-card>
+    </div>
+  </div>
 </template>
+<style>
+.bg-toolbar {
+  background-color: #f2fbfa;
+}
+
+.absolute-center-left {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>
diff --git a/src/modules/14_KPI/views/list.vue b/src/modules/14_KPI/views/list.vue
index fd60fc191..bdffc356c 100644
--- a/src/modules/14_KPI/views/list.vue
+++ b/src/modules/14_KPI/views/list.vue
@@ -1,3 +1,328 @@
+<script setup lang="ts">
+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 { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import type { QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useKPIDataStore } from "@/modules/14_KPI/store/KPIStore";
+
+const $q = useQuasar();
+const router = useRouter();
+const store = useKPIDataStore();
+
+const { showLoader, hideLoader, messageError, date2Thai, dialogConfirm } =
+  useCounterMixin();
+
+const filterKeyword = ref<string>("");
+
+const rows = ref<any>();
+
+const year = ref<number>(new Date().getFullYear());
+
+const round = ref<string>("");
+const roundOp = ref<DataOption[]>([]);
+
+const visibleColumns = ref<string[]>([
+  "name",
+  "createdAt",
+  "evaluationStatus",
+  "evaluationStatus",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ผู้ขอรับการประเมิน",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้างแบบประเมิน",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "evaluationStatus",
+    align: "left",
+    label: "สถานะการประเมิน",
+    sortable: true,
+    field: "evaluationStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => store.convertResults(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "evaluationStatus",
+    align: "left",
+    label: "ผลการประเมิน",
+    sortable: true,
+    field: "evaluationStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => store.convertResults(v),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const formQuery = reactive({
+  page: 1,
+  pageSize: 10,
+});
+const maxPage = ref<number>(1);
+const totalList = ref<number>(0);
+
+function fetchRoundOption() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiPeriod +
+        `?page=${1}&pageSize=${10}&keyword=${""}&year=${year.value}`
+    )
+    .then((res) => {
+      const data = res.data.result.data;
+      const list = data.map((e: any) => ({
+        id: e.id,
+        name:
+          e.durationKPI === "OCT"
+            ? "รอบตุลาคม"
+            : e.durationKPI === "APR"
+            ? "รอบเมษายน"
+            : "",
+      }));
+      roundOp.value = list;
+      fetchList();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchList() {
+  showLoader();
+  http
+    .get(
+      config.API.kpiUserEvaluation +
+        `/admin?page=${formQuery.page}&pageSize=${formQuery.pageSize}&kpiPeriodId=${round.value}`
+    )
+    .then((res) => {
+      const data = res.data.result;
+      maxPage.value = Math.ceil(data.total / formQuery.pageSize);
+      totalList.value = data.total;
+      rows.value = data.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function changRound() {
+  formQuery.page = 1;
+  fetchList();
+}
+
+function redirectViewDetail(id: string) {
+  router.push(`KPI-list/${id}`);
+}
+
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: any) {
+  formQuery.page = 1;
+  formQuery.pageSize = newPagination.rowsPerPage;
+}
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+watch(
+  () => formQuery.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
+onMounted(async () => {
+  fetchRoundOption();
+});
+</script>
+
 <template>
-  <div>list</div>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
+    </div>
+    <div class="col-12">
+      <q-card bordered class="q-pa-md">
+        <q-toolbar style="padding: 0">
+          <div class="row q-gutter-sm">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:model-value="fetchRoundOption()"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  lazy-rules
+                  outlined
+                  class="inputgreen"
+                  hide-bottom-space
+                  :model-value="!!year ? year + 543 : null"
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+
+            <q-select
+              v-model="round"
+              outlined
+              label="รอบการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="roundOp"
+              style="min-width: 200px"
+              emit-value
+              map-options
+              @update:model-value="changRound"
+            />
+          </div>
+
+          <q-space />
+          <div class="row q-gutter-sm">
+            <q-input
+              outlined
+              dense
+              v-model="filterKeyword"
+              label="ค้นหา"
+            ></q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </div>
+        </q-toolbar>
+        <div class="col-12">
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            flat
+            bordered
+            :paging="true"
+            dense
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+            @update:pagination="updatePagination"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.id"
+                  @click="redirectViewDetail(props.row.id)"
+                >
+                  <div v-if="col.name === 'name'">
+                    {{
+                      `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ totalList }} รายการ
+              <q-pagination
+                v-model="formQuery.page"
+                active-color="primary"
+                color="dark"
+                :max="Number(maxPage)"
+                size="sm"
+                boundary-links
+                direction-links
+                :max-pages="5"
+                @update:model-value="fetchList"
+              ></q-pagination>
+            </template>
+          </d-table>
+        </div>
+      </q-card>
+    </div>
+  </div>
 </template>
+<style scoped lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+</style>
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index dc44c614f..73b437851 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -45,11 +45,14 @@ function fetchData(id: string) {
     .get(config.API.developmentMainTab("tab1", id))
     .then(async (res) => {
       const data = res.data.result;
+
       formData.year = data.year;
       formData.reason = data.reason;
       formData.projectName = data.projectName;
       formData.objective = data.objective;
       formData.nodeId = data.nodeId;
+      formData.node = data.node;
+      formData.orgRevisionId = data.revisionId;
 
       const arrayExpanded = [
         data.root,
@@ -59,19 +62,6 @@ function fetchData(id: string) {
         data.child4,
       ];
       expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
-
-      // if (node.value && formData?.nodeId) {
-      //   const nodeTree = await searchAndReplace(node.value, formData?.nodeId);
-      //   if (nodeTree) {
-      //     expanded.value = [];
-      //     const parts = nodeTree?.orgName.split("/");
-      //     for (let i = 1; i < parts.length; i++) {
-      //       const arrangedParts = parts[i];
-      //       expanded.value.push(arrangedParts);
-      //     }
-      //     updateSelected(nodeTree);
-      //   }
-      // }
     })
     .catch((err) => {
       messageError($q, err);
@@ -144,26 +134,6 @@ function updateSelected(data: DataTree) {
   formData.orgRevisionId = data.orgRevisionId;
 }
 
-/**
- * function หาหน่วยงานที่รับผิดชอบ
- * @param orgTreeData ข้อมูล  nodeTree
- * @param treeId tree ID
- */
-async function searchAndReplace(orgTreeData: any, treeId: string | null) {
-  if (orgTreeData) {
-    for (let orgTree of orgTreeData) {
-      if (orgTree.orgTreeId === treeId) {
-        return orgTree;
-      }
-      let foundOrg: any = await searchAndReplace(orgTree.children, treeId);
-      if (foundOrg) {
-        return foundOrg;
-      }
-    }
-    return false;
-  }
-}
-
 onMounted(async () => {
   fetchActive();
 });