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/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 3f5609d8c..d8424ad5a 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -614,6 +614,11 @@ const menuList = readonly<any[]>([
         path: "KPIRound",
         role: "evaluateKPI",
       },
+      {
+        label: "รายการการประเมินผล",
+        path: "KPI​List",
+        role: "evaluateKPI",
+      },
     ],
   },
   {
diff --git a/src/modules/09_leave/components/2_Leave/Tab1.vue b/src/modules/09_leave/components/2_Leave/Tab1.vue
index 5a42d3f3d..9723b991e 100644
--- a/src/modules/09_leave/components/2_Leave/Tab1.vue
+++ b/src/modules/09_leave/components/2_Leave/Tab1.vue
@@ -33,6 +33,7 @@ const querySting = reactive<QuerySting>({
   keyword: leaveStore.filter.keyword, //keyword ค้นหา
 });
 const maxPage = ref<number>(1);
+const totalList = ref<number>(0);
 
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
@@ -50,6 +51,7 @@ async function fecthLeaveList() {
       .then((res) => {
         const data = res.data.result;
         maxPage.value = Math.ceil(data.total / querySting.pageSize);
+        totalList.value = data.total;
         leaveStore.fetchListLeave(data.data); /** ส่งข้อมูลไป stores*/
       })
       .catch((err) => {
@@ -143,6 +145,7 @@ watch(
       :page="querySting.page"
       :rowsPerPage="querySting.pageSize"
       :maxPage="maxPage"
+      :totalList="totalList"
       @update:querySting="updatePaging"
     />
   </div>
diff --git a/src/modules/09_leave/components/2_Leave/Tab2.vue b/src/modules/09_leave/components/2_Leave/Tab2.vue
index 4ac1621ac..722afc7b2 100644
--- a/src/modules/09_leave/components/2_Leave/Tab2.vue
+++ b/src/modules/09_leave/components/2_Leave/Tab2.vue
@@ -33,6 +33,7 @@ const querySting = reactive<QuerySting>({
   keyword: leaveStore.filter.keyword, //keyword ค้นหา
 });
 const maxPage = ref<number>(1);
+const totalList = ref<number>(0);
 
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
@@ -50,6 +51,7 @@ async function fecthLeaveList() {
       .then((res) => {
         const data = res.data.result;
         maxPage.value = Math.ceil(data.total / querySting.pageSize);
+        totalList.value = data.tatol;
         fetchListLeaveReject(data.data); /** ส่งข้อมูลไป stores*/
       })
       .catch((err) => {
@@ -96,6 +98,7 @@ onMounted(async () => {
     :page="querySting.page"
     :rowsPerPage="querySting.pageSize"
     :maxPage="maxPage"
+    :totalList="totalList"
     @update:querySting="updatePaging"
   />
 </template>
diff --git a/src/modules/09_leave/components/2_Leave/TableList.vue b/src/modules/09_leave/components/2_Leave/TableList.vue
index caf17aea7..7a20ae936 100644
--- a/src/modules/09_leave/components/2_Leave/TableList.vue
+++ b/src/modules/09_leave/components/2_Leave/TableList.vue
@@ -202,6 +202,10 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  totalList: {
+    type: Number,
+    require: true,
+  },
 });
 
 const emit = defineEmits(["update:querySting"]);
@@ -291,6 +295,7 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
+      ทั้งหมด {{ totalList }} รายการ
       <q-pagination
         v-model="currentPage"
         active-color="primary"
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index 2c49e0645..76818f859 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -28,6 +28,7 @@ const filterKeyword = ref<string>("");
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
+const toptitle = ref<number>(0);
 const statusFilter = ref<string>("NEW");
 
 async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
@@ -50,6 +51,7 @@ async function getList() {
     //
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      toptitle.value = res.data.result.total;
       const data = res.data.result.data;
       fetchComplainst(data);
     })
@@ -166,6 +168,7 @@ onMounted(async () => {
         :page="page"
         :maxPage="maxPage"
         @update:pagination="updatePagingProp"
+        :toptitle="toptitle"
       />
     </div>
   </q-card>
diff --git a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
index 77d5e1c75..7043da5b9 100644
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
@@ -27,6 +27,10 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  toptitle: {
+    type: Number,
+    require: true,
+  },
 });
 
 /** หัวข้อที่เเสดงในตาราง */
@@ -178,17 +182,6 @@ onMounted(() => {
     v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
   >
-    <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="Number(props.maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
     <template v-slot:header="props">
       <q-tr :props="props">
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -220,6 +213,18 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
+    <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.toptitle }}รายการ
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
   </d-table>
 </template>
 
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 6e32a2f55..106b26497 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -30,6 +30,7 @@ const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
+const toptitle = ref<number>(0);
 
 /**
  *pagination ของตาราง
@@ -70,6 +71,8 @@ async function getList() {
     )
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      toptitle.value = res.data.result.total;
+
       const data = res.data.result.data;
       dataInvestigate.fecthList(data);
     })
@@ -181,17 +184,6 @@ onMounted(async () => {
         v-model:pagination="pagination"
         :rows-per-page-options="[10, 25, 50, 100]"
       >
-        <template v-slot:pagination="scope">
-          <q-pagination
-            v-model="currentPage"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            size="sm"
-            boundary-links
-            direction-links
-          ></q-pagination>
-        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th
@@ -236,6 +228,18 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ toptitle }}รายการ
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
       </d-table>
     </div>
   </q-card>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 5756dd897..83a53d4f2 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -22,6 +22,8 @@ const router = useRouter();
 const filter = ref<string>(""); //search data table
 const page = ref<number>(1);
 const maxPage = ref<number>(1);
+const totalList = ref<number>();
+
 const status = ref<string>("NEW");
 async function fetchListDisciplinary() {
   showLoader();
@@ -33,6 +35,7 @@ async function fetchListDisciplinary() {
     .then((res) => {
       const data = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      totalList.value = res.data.result.total;
       fetchList(data);
     })
     .catch((err) => {})
@@ -57,7 +60,7 @@ async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
 
 function filterStatus(statusReturn: string) {
   status.value = statusReturn;
-  fetchListDisciplinary()
+  fetchListDisciplinary();
 }
 
 /**เมื่อเริ่มโหลดหน้า
@@ -88,6 +91,7 @@ onMounted(async () => {
         :rowsPerPage="rowsPerPage"
         :page="page"
         :maxPage="maxPage"
+        :totalList="totalList"
         :fetchListDisciplinary="fetchListDisciplinary"
         @update:pagination="updatePagingProp"
         v-model:open-edit="openEdit"
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index 0029abe53..32f31e61a 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -61,6 +61,10 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  totalList: {
+    type: Number,
+    require: true,
+  },
 });
 
 const emit = defineEmits([
@@ -195,6 +199,7 @@ function filterFn() {
     :rows-per-page-options="[10, 25, 50, 100]"
   >
     <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.totalList }} รายการ
       <q-pagination
         v-model="currentPage"
         active-color="primary"
diff --git a/src/modules/11_discipline/components/4_Result/MainPage.vue b/src/modules/11_discipline/components/4_Result/MainPage.vue
index 3df375880..aaec6a94d 100644
--- a/src/modules/11_discipline/components/4_Result/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Result/MainPage.vue
@@ -25,6 +25,7 @@ const initialPagination = ref<Pagination>({
 const page = ref<number>(1);
 const pageSize = ref<number>(10);
 const maxPage = ref<number>(1);
+const totalList = ref<number>(0);
 const filter = ref<string>("");
 const status = ref<string>("DONE");
 /** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
@@ -38,6 +39,7 @@ async function fetchListResult() {
     .then(async (res) => {
       const data = res.data.result.data;
       maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      totalList.value = res.data.result.total;
       await fetchList(data);
     })
     .catch((err) => {
@@ -97,6 +99,7 @@ onMounted(async () => {
         :fetchListResult="fetchListResult"
         :pageSize="pageSize"
         :maxPage="maxPage"
+        :totalList="totalList"
         @update:queryString="updateQueryString"
         v-model:open-edit="openEdit"
         :filterStatus="filterStatus"
diff --git a/src/modules/11_discipline/components/4_Result/Table.vue b/src/modules/11_discipline/components/4_Result/Table.vue
index fd7d8a705..abd020d5a 100644
--- a/src/modules/11_discipline/components/4_Result/Table.vue
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@@ -51,6 +51,9 @@ const props = defineProps({
   maxPage: {
     type: Number,
   },
+  totalList: {
+    type: Number,
+  },
 });
 
 const currentPage = ref<number>(1);
@@ -208,6 +211,7 @@ function filterFn() {
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
+      ทั้งหมด {{ props.totalList }} รายการ
       <q-pagination
         v-model="currentPage"
         active-color="primary"
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
index 0cb312bc9..1d2295d12 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
@@ -38,10 +38,10 @@ const pagination = ref({
 /**
  * clickไปหน้าเพิ่มchanel
  */
-function clickAdd(){
-  dataStore.getType('')
+function clickAdd() {
+  dataStore.getType("");
   router.push(`/discipline/channel/add`);
-};
+}
 
 /** get data */
 async function getComplaintChanal() {
@@ -91,9 +91,9 @@ async function deleteData(id: string) {
  * ไปหน้า แก้ไข
  * @param id type
  */
-function editPage(data:typeItem){
-  dataStore.getType(data.name)
-  router.push(`/discipline/channel/${data.id}`)
+function editPage(data: typeItem) {
+  dataStore.getType(data.name);
+  router.push(`/discipline/channel/${data.id}`);
 }
 /**เมื่อเริ่มโหลดหน้า เรียกใช้ฟังชั่น*/
 onMounted(() => {
@@ -188,7 +188,7 @@ onMounted(() => {
                 {{ props.rowIndex + 1 }}
               </div>
               <div v-else>
-                {{ col.value}}
+                {{ col.value ?? "-" }}
               </div>
             </q-td>
             <q-td>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
index 11d3d3e5a..455ab8c7f 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
@@ -18,9 +18,11 @@ const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
+const totalList = ref<number>(0);
+
 const modalDetail = ref<boolean>(false);
-const type = ref<string>('')
-const dataPopUp = ref<DirectorRowsResponse>()
+const type = ref<string>("");
+const dataPopUp = ref<DirectorRowsResponse>();
 /**
  * ค้นหาในตาราง
  */
@@ -64,6 +66,7 @@ async function getList() {
     )
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      totalList.value = res.data.result.total;
       const data = res.data.result.data;
       dataStore.fetchData(data);
     })
@@ -120,9 +123,9 @@ function openDetail(data: DirectorRowsResponse, typeChange: string) {
   } else if (typeChange == "disciplinary") {
     titleInvestigate.value = `รายการสอบสวนความผิดทางวินัยของ ${data.fullName}`;
   }
-  dataPopUp.value = data
+  dataPopUp.value = data;
   modalDetail.value = true;
-  type.value = typeChange
+  type.value = typeChange;
 }
 
 function closeDetail() {
@@ -207,6 +210,7 @@ onMounted(() => {
         :visible-columns="dataStore.visibleColumns"
       >
         <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
           <q-pagination
             v-model="currentPage"
             active-color="primary"
@@ -258,7 +262,7 @@ onMounted(() => {
                 v-else
                 @click="$router.push(`/discipline/director/${props.row.id}`)"
               >
-                {{ col.value }}
+                {{ col.value ?? "-" }}
               </div>
             </q-td>
             <q-td auto-width>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
index 6cbd1cbd8..f33e8fefa 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
@@ -139,7 +139,9 @@ function resetFilter() {
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
+
 const rowsPerPage = ref<number>(10);
+const totalList = ref<number>(0);
 
 /**
  *pagination ของตาราง
@@ -180,6 +182,7 @@ async function getList() {
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       const data = res.data.result.data;
+      totalList.value = res.data.result.total;
       dataStore.getData(data);
     })
     .catch((e) => {
@@ -311,6 +314,7 @@ onMounted(() => {
             :rows-per-page-options="[10, 25, 50, 100]"
           >
             <template v-slot:pagination="scope">
+              ทั้งหมด {{ totalList }} รายการ
               <q-pagination
                 v-model="currentPage"
                 active-color="primary"
@@ -345,16 +349,16 @@ onMounted(() => {
                     }}
                   </div>
                   <div v-else-if="col.name === 'title'" class="table_ellipsis">
-                    {{ props.row.title }}
+                    {{ props.row.title ? props.row.title : "-" }}
                   </div>
                   <div
                     v-else-if="col.name === 'organization'"
                     class="table_ellipsis"
                   >
-                    {{ props.row.organization }}
+                    {{ props.row.organization ? props.row.organization : "-" }}
                   </div>
                   <div v-else>
-                    {{ col.value }}
+                    {{ col.value ?? "-" }}
                   </div>
                 </q-td>
               </q-tr>
diff --git a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
index aaf281727..815118a8f 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
@@ -34,6 +34,8 @@ const dataRow = ref<RowList[]>([]);
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
+const totalList = ref<number>(0);
+
 const rowsPerPage = ref<number>(10);
 
 /**
@@ -236,6 +238,7 @@ async function getData() {
     )
     .then((res) => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      totalList.value = res.data.result.total;
       fetchAppealComplain(res.data.result.data);
     })
     .catch((e) => {
@@ -277,57 +280,57 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row q-mb-sm q-col-gutter-sm">
-        <div>
-          <q-btn
-            id="addComplaints"
-            for="addComplaints"
-            size="12px"
-            flat
-            round
-            color="primary"
-            icon="mdi-plus"
-            @click="redirectToPageadd()"
-            ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
-          >
-        </div>
-        <q-space />
-        <q-input
-          for="#search"
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          placeholder="ค้นหา"
-          @keydown.enter.prevent="filterFn"
+      <div>
+        <q-btn
+          id="addComplaints"
+          for="addComplaints"
+          size="12px"
+          flat
+          round
+          color="primary"
+          icon="mdi-plus"
+          @click="redirectToPageadd()"
+          ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
         >
-          <template v-slot:append>
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
+      </div>
+      <q-space />
+      <q-input
+        for="#search"
+        class="col-xs-12 col-sm-3 col-md-2"
+        standout
+        dense
+        v-model="filterKeyword"
+        ref="filterRef"
+        outlined
+        placeholder="ค้นหา"
+        @keydown.enter.prevent="filterFn"
+      >
+        <template v-slot:append>
+          <q-icon
+            v-if="filterKeyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
 
-        <q-select
-          id="visibleColumns"
-          for="visibleColumns"
-          v-model="dataStore.visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="dataStore.columns"
-          option-value="name"
-          options-cover
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
+      <q-select
+        id="visibleColumns"
+        for="visibleColumns"
+        v-model="dataStore.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="dataStore.columns"
+        option-value="name"
+        options-cover
+        class="col-xs-12 col-sm-3 col-md-2"
+      />
     </div>
     <div class="col-12 row q-mb-sm">
       <q-card bordered class="col-12 filter-card q-pa-sm">
@@ -404,7 +407,6 @@ onMounted(async () => {
               @update:model-value="dataUpdate"
             />
           </div>
-          
         </div>
       </q-card>
     </div>
@@ -425,6 +427,7 @@ onMounted(async () => {
         :rows-per-page-options="[10, 25, 50, 100]"
       >
         <template v-slot:pagination="scope">
+          ทั้งหมด {{ totalList }} รายการ
           <q-pagination
             v-model="currentPage"
             active-color="primary"
@@ -469,10 +472,10 @@ onMounted(async () => {
                 v-else-if="col.name === 'description'"
                 class="table_ellipsis"
               >
-                {{ props.row.description }}
+                {{ props.row.description ? props.row.description : "-" }}
               </div>
               <div v-else>
-                {{ col.value }}
+                {{ col.value ?? "-" }}
               </div>
             </q-td>
           </q-tr>
diff --git a/src/modules/11_discipline/components/9_Order/TableOrder.vue b/src/modules/11_discipline/components/9_Order/TableOrder.vue
index bbb933eba..6627312bb 100644
--- a/src/modules/11_discipline/components/9_Order/TableOrder.vue
+++ b/src/modules/11_discipline/components/9_Order/TableOrder.vue
@@ -186,7 +186,7 @@ const pagination = ref({
 });
 
 /**
- * ฟังชั่น redirect 
+ * ฟังชั่น redirect
  * @param id id ออกคำสั่ง
  * @param status status
  */
@@ -249,8 +249,8 @@ onMounted(() => {
           <div v-if="col.name === 'no'">
             {{ props.rowIndex + 1 }}
           </div>
-          <div>
-            {{ col.value }}
+          <div v-else>
+            {{ col.value ?? "-" }}
           </div>
         </q-td>
       </q-tr>
diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index 69dee5eb6..a9cc7255d 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@@ -244,7 +244,7 @@ onMounted(async () => {
         class="custom-header-table"
         :visible-columns="store.visibleColumns"
         v-model:pagination="initialPagination"
-        :rows-per-page-options="[1, 10, 25, 50, 100]"
+        :rows-per-page-options="[10, 25, 50, 100]"
         @update:pagination="updatePagination"
       >
         <template v-slot:header="props">
diff --git a/src/modules/13_salary/components/Command/step01.vue b/src/modules/13_salary/components/Command/step01.vue
index c2b4feb43..3072478c3 100644
--- a/src/modules/13_salary/components/Command/step01.vue
+++ b/src/modules/13_salary/components/Command/step01.vue
@@ -66,7 +66,7 @@ const byOrder = ref<string>("");
 const nameCommand = ref<any>();
 const positionCommand = ref<string>("");
 const year = ref<number>(0);
-const SalaryRound = ref<string>("");
+const SalaryRound = ref<any>(null);
 
 // 33-34-35
 const input33 = ref<string>("");
@@ -83,9 +83,6 @@ onMounted(async () => {
   } else {
     await fecthTypeOption("noData");
   }
-  if (year.value !== 0) {
-    fetchSalaryRound();
-  }
 });
 // เลือกคำสั่งโดย
 watch(byOrder, async () => {
@@ -176,6 +173,9 @@ const fetchdetailOrder = async () => {
       nameCommand.value = data.signatoryBy;
       positionCommand.value = data.signatoryPosition;
       SalaryRound.value = data.salaryPeriodId;
+      year.value = Number(data.year);
+
+      fetchSalaryRound();
     })
     .catch((e) => {
       messageError($q, e);
@@ -256,7 +256,8 @@ const submit = async () => {
     signatoryBy: signBy === "" ? nameCommand.value : signBy,
     signatoryPosition: positionCommand.value,
     year: year.value,
-    salaryPeriodId: SalaryRound.value,
+    salaryPeriodId: SalaryRound.value.id,
+    salaryPeriod: SalaryRound.value.code,
   };
   // if (
   //   typeOrder.value.commandCode == "C-PM-33" ||
@@ -387,8 +388,13 @@ function fetchSalaryRound() {
             : e.period === "OCT"
             ? "รอบตุลาคม"
             : "-",
+        code: e.period,
       }));
       salaryRoundOptionMain.value = list;
+
+      if (SalaryRound.value) {
+        SalaryRound.value = list.find((x: any) => x.id == SalaryRound.value);
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -398,6 +404,7 @@ function fetchSalaryRound() {
     });
 }
 </script>
+
 <template>
   <q-form greedy @submit.prevent @validation-success="submit" class="q-pa-md">
     <div class="q-pa-md">
@@ -665,13 +672,11 @@ function fetchSalaryRound() {
             :rules="[(val: string) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
             hide-bottom-space
             :label="`${'รอบการขึ้นเงินเดือน'}`"
-            map-options
             option-label="name"
             :options="salaryRoundOption"
             option-value="id"
             use-input
             input-debounce="0"
-            emit-value
             lazy-rules
             @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'SalaryRound'
diff --git a/src/modules/13_salary/components/Command/step02.vue b/src/modules/13_salary/components/Command/step02.vue
index ca0e97142..5157c420d 100644
--- a/src/modules/13_salary/components/Command/step02.vue
+++ b/src/modules/13_salary/components/Command/step02.vue
@@ -706,12 +706,15 @@ const pagination = ref({
     </q-card>
   </q-dialog>
   <!--********************************** รายชื่อ ********************************** -->
-  <q-dialog v-model="modalAdd" persistent>
+  <q-dialog v-model="modalAdd" class="dialog" persistent>
     <q-card style="width: 50vw; max-width: 50vw">
       <q-form ref="myFormAdd">
         <DialogHeader tittle="รายชื่อในการออกคำสั่ง" :close="modalAddChange" />
-        <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
+        <q-separator color="grey-4" />
+        <q-card-section
+          style="max-height: 60vh"
+          class="scroll q-pa-sm bg-grey-1"
+        >
           <d-table
             :rows="rows2"
             :columns="columns"
@@ -756,7 +759,7 @@ const pagination = ref({
             </template>
           </d-table>
         </q-card-section>
-        <q-separator />
+        <q-separator color="grey-4" />
         <q-card-actions align="right">
           <q-btn
             dense
diff --git a/src/modules/13_salary/components/Command/step04.vue b/src/modules/13_salary/components/Command/step04.vue
index 3c213a5f3..d0639fb20 100644
--- a/src/modules/13_salary/components/Command/step04.vue
+++ b/src/modules/13_salary/components/Command/step04.vue
@@ -51,6 +51,33 @@ const orderId = ref<string>(orderId_params.toString());
 
 // เช็คว่าต้องมีแนบท้ายไหม code ที่เพิ่มคืออันที่ไม่มีแนบท้าย
 const attachmentStatus = computed(() => {
+  return code.value != "c-pm-10" &&
+    code.value != "c-pm-11" &&
+    code.value != "c-pm-12" &&
+    code.value != "c-pm-16" &&
+    code.value != "c-pm-18" &&
+    code.value != "c-pm-19" &&
+    code.value != "c-pm-20" &&
+    code.value != "c-pm-21" &&
+    code.value != "c-pm-23" &&
+    code.value != "c-pm-25" &&
+    code.value != "c-pm-26" &&
+    code.value != "c-pm-27" &&
+    code.value != "c-pm-28" &&
+    code.value != "c-pm-29" &&
+    code.value != "c-pm-30" &&
+    code.value != "c-pm-31" &&
+    code.value != "c-pm-32" &&
+    code.value != "c-pm-33" &&
+    code.value != "c-pm-34" &&
+    code.value != "c-pm-35" &&
+    code.value != "c-pm-36" &&
+    code.value != "c-pm-37"
+    ? true
+    : false;
+});
+
+const attachmentUploadStatus = computed(() => {
   return code.value != "c-pm-10" &&
     code.value != "c-pm-11" &&
     code.value != "c-pm-12" &&
@@ -430,7 +457,7 @@ const clickExecute = async (id: string) => {
 };
 const validateFormUpload = () => {
   if (
-    attachmentStatus.value &&
+    attachmentUploadStatus.value &&
     fileOrder.value !== null &&
     fileTailer.value !== null
   ) {
@@ -645,7 +672,7 @@ onMounted(async () => {
                     </template>
                   </q-file>
                 </div>
-                <div v-if="attachmentStatus">
+                <div v-if="attachmentUploadStatus">
                   <label class="text-file">เอกสารแนบท้าย</label>
                   <div v-if="TailerPDFUpload != ''" class="text-right">
                     <q-btn
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_Evaluator.vue b/src/modules/14_KPI/components/detailList/02_Evaluator.vue
new file mode 100644
index 000000000..6bee11c56
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/02_Evaluator.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="q-pa-md">ผู้ประเมิน</div>
+</template>
diff --git a/src/modules/14_KPI/components/detailList/03_CommanderAbove.vue b/src/modules/14_KPI/components/detailList/03_CommanderAbove.vue
new file mode 100644
index 000000000..d47994bbf
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/03_CommanderAbove.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="q-pa-md">ผู้บังคับบัญชา เหนือขึ้นไป</div>
+</template>
diff --git a/src/modules/14_KPI/components/detailList/04_CommanderAboveOneStep.vue b/src/modules/14_KPI/components/detailList/04_CommanderAboveOneStep.vue
new file mode 100644
index 000000000..4d5bde7de
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/04_CommanderAboveOneStep.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="q-pa-md">ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง</div>
+</template>
diff --git a/src/modules/14_KPI/components/detailList/05_File.vue b/src/modules/14_KPI/components/detailList/05_File.vue
new file mode 100644
index 000000000..cf76d7ddc
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/05_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..feab75fde
--- /dev/null
+++ b/src/modules/14_KPI/components/detailList/TabMain.vue
@@ -0,0 +1,96 @@
+<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 Evaluator from "@/modules/14_KPI/components/detailList/02_Evaluator.vue";
+import CommanderAbove from "@/modules/14_KPI/components/detailList/03_CommanderAbove.vue";
+import CommanderAboveOneStep from "@/modules/14_KPI/components/detailList/04_CommanderAboveOneStep.vue";
+import File from "@/modules/14_KPI/components/detailList/05_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: "ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง",
+  },
+  {
+    name: "5",
+    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="ผู้ประเมิน"> </q-tab>
+        <q-tab name="3" label="ผู้บังคับบัญชา">
+          <div class="text-caption">เหนือขึ้นไป</div>
+        </q-tab>
+        <q-tab name="4" label="ผู้บังคับบัญชา">
+          <div class="text-caption">เหนือขึ้นไปอีกชั้นหนึ่ง</div>
+        </q-tab>
+        <q-tab name="5" 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'" />
+          <Evaluator v-if="store.tabMain === '2'" />
+          <CommanderAbove v-if="store.tabMain === '3'" />
+          <CommanderAboveOneStep v-if="store.tabMain === '4'" />
+          <File v-if="store.tabMain === '5'" />
+        </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/components/indicatorByPlan/IndicatorByPlan.vue b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
index 584f6b893..fe8ac501c 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
@@ -133,22 +133,6 @@ function fetchTreeAgency(id: string) {
       const data = res.data.result;
       nodeAgency.value = data;
       store.treeId = "";
-
-      if (nodeAgency.value && planData.nodeId) {
-        const nodeTree = await searchAndReplace(
-          nodeAgency.value,
-          planData.nodeId
-        );
-        if (nodeTree) {
-          expandedAgency.value = [];
-          const parts = nodeTree?.orgName.split("/");
-          for (let i = 1; i < parts.length; i++) {
-            const arrangedParts = parts[i];
-            expandedAgency.value.push(arrangedParts);
-          }
-          updateSelectedAgency(nodeTree, true);
-        }
-      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -182,6 +166,30 @@ function fetchDataById(id: string) {
       planData.strategy = data.strategy;
       planData.strategyId = data.strategyId;
 
+      // หน่วยงาน/ส่วนราชการ
+      const arrayexpandedAgency = [
+        data.root,
+        data.child1,
+        data.child2,
+        data.child3,
+        data.child4,
+      ];
+      expandedAgency.value = arrayexpandedAgency
+        .filter((e) => e !== null)
+        .slice(0, -1);
+
+      // ยุทธศาสตร์ / แผน
+      const arrayexpandedPlan = [
+        data.strategyChild1,
+        data.strategyChild2,
+        data.strategyChild3,
+        data.strategyChild4,
+        data.strategyChild5,
+      ];
+      expandedPlan.value = arrayexpandedPlan
+        .filter((e) => e !== null)
+        .slice(0, -1);
+
       fetchRoundOption();
     })
     .catch((err) => {
@@ -251,26 +259,6 @@ function onSubmit() {
   }
 }
 
-/**
- * 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(() => {
   fetchOrganizationActive();
   if (id.value) {
@@ -539,7 +527,13 @@ onMounted(() => {
             <q-separator />
 
             <q-card-section class="q-pa-sm">
-              <q-input dense outlined v-model="filterAgency" label="ค้นหา">
+              <q-input
+                dense
+                outlined
+                v-model="filterAgency"
+                label="ค้นหา"
+                class="inputgreen"
+              >
                 <template v-slot:append>
                   <q-icon
                     v-if="filterAgency !== ''"
@@ -554,8 +548,8 @@ onMounted(() => {
                 style="height: 350px; overflow: scroll"
                 dense
                 :nodes="nodeAgency"
-                node-key="orgTreeName"
-                label-key="labelName"
+                node-key="orgTreeId"
+                label-key="orgTreeName"
                 selected-color="primary"
                 :filter="filterAgency"
                 no-results-label="ไม่พบข้อมูลที่ค้นหา"
@@ -602,7 +596,13 @@ onMounted(() => {
             <q-separator />
 
             <q-card-section class="q-pa-sm">
-              <q-input dense outlined v-model="filter" label="ค้นหา">
+              <q-input
+                dense
+                outlined
+                v-model="filter"
+                label="ค้นหา"
+                class="inputgreen"
+              >
                 <template v-slot:append>
                   <q-icon
                     v-if="filter !== ''"
@@ -619,7 +619,7 @@ onMounted(() => {
                 :nodes="nodeplan"
                 selected-color="primary"
                 node-key="id"
-                label-key="id"
+                label-key="name"
                 :filter="filter"
                 no-results-label="ไม่พบข้อมูลที่ค้นหา"
                 no-nodes-label="ไม่มีข้อมูล"
diff --git a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
index 0e04eaf02..faacbbbda 100644
--- a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
@@ -17,22 +17,17 @@ const router = useRouter();
 const heightSize = ref<string>("224");
 const filter = ref<string>("");
 const node = ref<any>([]);
-const expanded = ref<any>([]);
-const ticked = ref<any>([]);
+const expanded = ref<string[]>([]);
 const orgName = ref<string>("");
 const nodeId = ref<string>("");
 
-const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
-const noData = ref<string>("ไม่มีข้อมูล");
 const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
 const {
-  dialogConfirm,
   showLoader,
   hideLoader,
   messageError,
   success,
-  date2Thai,
-  calculateDurationYmd,
+  dialogConfirm,
   dialogMessageNotify,
 } = useCounterMixin();
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
@@ -149,15 +144,20 @@ function onSubmit() {
   if (form.nodeId == null) {
     dialogMessageNotify($q, "กรุณาเลือกหน่วยงาน/ส่วนราชการ");
   } else {
-    showLoader();
-    http[id.value ? "put" : "post"](url, body)
-      .then((res) => {
-        success($q, "บันทึกสำเร็จ");
-        id.value ? getDetail() : router.push(`/KPI-indicator-role`);
-      })
-      .finally(() => {
-        hideLoader();
-      });
+    dialogConfirm($q, () => {
+      showLoader();
+      http[id.value ? "put" : "post"](url, body)
+        .then(() => {
+          success($q, "บันทึกสำเร็จ");
+          id.value ? getDetail() : router.push(`/KPI-indicator-role`);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
   }
 }
 
@@ -189,6 +189,14 @@ function getDetail() {
       form.node = data.node;
       form.nodeId = data.nodeId;
       form.orgRevisionId = data.orgRevisionId;
+      const arrayExpanded = [
+        data.root,
+        data.child1,
+        data.child2,
+        data.child3,
+        data.child4,
+      ];
+      expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
     })
     .catch((e) => {
       messageError($q, e);
@@ -228,11 +236,6 @@ async function fetchTree(id: string) {
     });
 }
 
-function updateTicked(val: any) {
-  ticked.value = [];
-  ticked.value.push(val[val.length - 1]);
-}
-
 function updateSelected(data: any) {
   nodeId.value = data.orgTreeId;
   orgName.value = data.orgTreeName;
@@ -482,7 +485,7 @@ onMounted(() => {
                   <q-tree
                     dense
                     :nodes="node"
-                    node-key="orgTreeName"
+                    node-key="orgTreeId"
                     label-key="orgTreeName"
                     v-model:expanded="expanded"
                     :filter="filter"
diff --git a/src/modules/14_KPI/router.ts b/src/modules/14_KPI/router.ts
index c9401da72..d7d3b8f09 100644
--- a/src/modules/14_KPI/router.ts
+++ b/src/modules/14_KPI/router.ts
@@ -10,6 +10,8 @@ const IndicatorByRoleDetail = () =>
 const competencyPage = () => import("@/modules/14_KPI/views/competency.vue");
 const competencyAddPage = () =>
   import("@/modules/14_KPI/components/competency/AddPage.vue");
+const listPage = () => import("@/modules/14_KPI/views/list.vue");
+const detailPage = () => import("@/modules/14_KPI/views/detail.vue");
 
 export default [
   {
@@ -113,4 +115,24 @@ export default [
       Role: "evaluateKPI",
     },
   },
+  {
+    path: "/KPI-list",
+    name: "KPI​List",
+    component: listPage,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
+  {
+    path: "/KPI-list/:id",
+    name: "KPIDetail",
+    component: detailPage,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
 ];
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
new file mode 100644
index 000000000..6c25a30f0
--- /dev/null
+++ b/src/modules/14_KPI/views/detail.vue
@@ -0,0 +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 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/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
index ca534e8a6..b757b46bb 100644
--- a/src/modules/14_KPI/views/indicatorByPlan.vue
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -3,10 +3,13 @@ import { ref, reactive, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
+import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
@@ -40,10 +43,7 @@ const expanded = ref<any>([]);
 const filterMain = ref<string>("");
 const visibleColumns = ref<string[]>(["including", "includingName"]);
 
-const roundOp = ref<any[]>([
-  { id: "APR", name: "รอบเมษายน" },
-  { id: "OCT", name: "รอบตุลาคม" },
-]);
+const roundOp = ref<DataOption[]>([]);
 
 const totalList = ref<number>(1);
 
@@ -192,7 +192,14 @@ onMounted(() => {
         <div class="col-12 q-py-sm q-px-sm">
           <div class="q-gutter-sm">
             <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
-            <q-input dense outlined v-model="filterMain" label="ค้นหา">
+
+            <q-input
+              class="inputgreen"
+              dense
+              outlined
+              v-model="filterMain"
+              label="ค้นหา"
+            >
               <template v-slot:append>
                 <q-icon
                   v-if="filterMain !== ''"
@@ -266,6 +273,7 @@ onMounted(() => {
               }}</template>
               <template #trigger>
                 <q-input
+                  class="inputgreen"
                   dense
                   lazy-rules
                   outlined
@@ -284,6 +292,7 @@ onMounted(() => {
               </template>
             </datepicker>
             <q-select
+              class="inputgreen"
               dense
               outlined
               v-model="nodeData.round"
@@ -312,12 +321,14 @@ onMounted(() => {
           <q-space />
           <div class="row q-gutter-sm">
             <q-input
+              class="inputgreen"
               standout
               dense
               v-model="nodeData.keyword"
               ref="filterRef"
               outlined
               placeholder="ค้นหา"
+              @keydown.enter.prevent="fetchListProjectNew"
             >
               <template v-slot:append>
                 <q-icon v-if="nodeData.keyword == ''" name="search" />
@@ -330,6 +341,7 @@ onMounted(() => {
               </template>
             </q-input>
             <q-select
+              class="inputgreen"
               v-model="visibleColumns"
               multiple
               outlined
@@ -352,7 +364,6 @@ onMounted(() => {
             :columns="columns"
             :rows="rows"
             row-key="subject"
-            :filter="nodeData.keyword"
             flat
             bordered
             dense
diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
index ee7f5c8ff..8f12a7161 100644
--- a/src/modules/14_KPI/views/indicatorByRole.vue
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -11,10 +11,11 @@ import type { NewPagination } from "@/modules/14_KPI/interface/request/Main";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
 
 /** use*/
-const total = ref<number>()
+const total = ref<number>();
 const $q = useQuasar();
 const router = useRouter();
-const { showLoader, hideLoader, dialogRemove, success } = useCounterMixin();
+const { showLoader, hideLoader, dialogRemove, success, messageError } =
+  useCounterMixin();
 
 const positionOp = ref<DataOption[]>([]);
 const positionMainOp = ref<DataOption[]>([]);
@@ -25,15 +26,15 @@ const totalList = ref<number>(1); //จำนวนข้อมูลราย
 /** หัวตาราง */
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับตัวชี้วัด ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
+  // {
+  //   name: "no",
+  //   align: "left",
+  //   label: "ลำดับตัวชี้วัด ",
+  //   sortable: true,
+  //   field: "no",
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
   {
     name: "including",
     align: "left",
@@ -53,7 +54,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const visibleColumns = ref<string[]>(["no", "including", "includingName"]);
+const visibleColumns = ref<string[]>(["including", "includingName"]);
 
 const formFilter = reactive({
   page: 1,
@@ -79,10 +80,13 @@ function fetchList() {
     )
     .then((res) => {
       const data = res.data.result.data;
-      total.value = res.data.result.total
+      total.value = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
       rows.value = data;
     })
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });
@@ -140,24 +144,32 @@ function filterOption(val: any, update: Function) {
 /** ดึงข้อมูลตำแหน่ง */
 function getOptions() {
   showLoader();
-  http.get(config.API.orgSalaryPosition).then((res) => {
-    const dataOp = res.data.result;
-    const uniqueNames = new Set();
-    const filteredData = dataOp
-      .filter((item: any) => {
-        if (!uniqueNames.has(item.positionName)) {
-          uniqueNames.add(item.positionName);
-          return true;
-        }
-        return false;
-      })
-      .map((item: any) => ({
-        id: item.positionName,
-        name: item.positionName,
-      }));
+  http
+    .get(config.API.orgSalaryPosition)
+    .then((res) => {
+      const dataOp = res.data.result;
+      const uniqueNames = new Set();
+      const filteredData = dataOp
+        .filter((item: any) => {
+          if (!uniqueNames.has(item.positionName)) {
+            uniqueNames.add(item.positionName);
+            return true;
+          }
+          return false;
+        })
+        .map((item: any) => ({
+          id: item.positionName,
+          name: item.positionName,
+        }));
 
-    positionMainOp.value = filteredData;
-  });
+      positionMainOp.value = filteredData;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function getRound() {
@@ -174,6 +186,9 @@ function getRound() {
         name: statusTothai(item.durationKPI),
       }));
     })
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });
@@ -314,6 +329,7 @@ onMounted(async () => {
           dense
           outlined
           v-model="formFilter.round"
+          class="inputgreen"
           :options="roundOp"
           label="รอบการประเมิน"
           option-label="name"
diff --git a/src/modules/14_KPI/views/list.vue b/src/modules/14_KPI/views/list.vue
new file mode 100644
index 000000000..335aaa731
--- /dev/null
+++ b/src/modules/14_KPI/views/list.vue
@@ -0,0 +1,339 @@
+<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;
+      round.value = "";
+      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 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="ค้นหา"
+              @keydown.enter.prevent="changRound"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterKeyword !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="(filterKeyword = ''), changRound()"
+                />
+                <q-icon v-else name="search" color="grey-5" />
+              </template>
+            </q-input>
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              style="min-width: 150px"
+            />
+          </div>
+        </q-toolbar>
+        <div class="col-12">
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            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/14_KPI/views/round.vue b/src/modules/14_KPI/views/round.vue
index 00b7ee919..7388825a4 100644
--- a/src/modules/14_KPI/views/round.vue
+++ b/src/modules/14_KPI/views/round.vue
@@ -39,10 +39,20 @@ const {
 /** หัวตาราง */
 const rows = ref<ResRound[]>([]);
 const columns = ref<QTableProps["columns"]>([
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => val + 543,
+  },
   {
     name: "durationKPI",
     align: "left",
-    label: "รอบการประเมิน ",
+    label: "รอบการประเมิน",
     sortable: true,
     field: "durationKPI",
     headerStyle: "font-size: 14px",
@@ -82,6 +92,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const visibleColumns = ref<string[]>([
+  "year",
   "durationKPI",
   "startDate",
   "endDate",
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 37fc6727b..73b437851 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -45,24 +45,23 @@ 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;
 
-      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);
-        }
-      }
+      const arrayExpanded = [
+        data.root,
+        data.child1,
+        data.child2,
+        data.child3,
+        data.child4,
+      ];
+      expanded.value = arrayExpanded.filter((e) => e !== null).slice(0, -1);
     })
     .catch((err) => {
       messageError($q, err);
@@ -135,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();
 });
@@ -182,7 +161,7 @@ onMounted(async () => {
               class="tree-container"
               dense
               :nodes="node"
-              node-key="orgTreeName"
+              node-key="orgTreeId"
               label-key="labelName"
               v-model:expanded="expanded"
               :filter="filter"
@@ -259,7 +238,7 @@ onMounted(async () => {
                 </datepicker>
               </div>
               <div class="col-xs-10 col-sm-10 col-md-10">
-                <q-input
+                <!-- <q-input
                   dense
                   outlined
                   class="inputgreen"
@@ -269,7 +248,7 @@ onMounted(async () => {
                   hide-bottom-space
                   lazy-rules
                   readonly
-                />
+                /> -->
               </div>
               <div class="col-xs-12 col-sm-12 col-md-12">
                 <q-input
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index d48d2a22b..f6c9b08da 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -192,6 +192,7 @@ onMounted(() => {
           emit-value
           map-options
           multiple
+          class="inputgreen"
         />
       </div>
     </div>
@@ -216,7 +217,13 @@ onMounted(() => {
               <q-separator />
 
               <q-card-section class="q-pa-sm">
-                <q-input dense outlined v-model="filter" label="ค้นหา">
+                <q-input
+                  dense
+                  outlined
+                  v-model="filter"
+                  label="ค้นหา"
+                  class="inputgreen"
+                >
                   <template v-slot:append>
                     <q-icon
                       v-if="filter !== ''"
@@ -232,7 +239,7 @@ onMounted(() => {
                   :nodes="nodes"
                   selected-color="primary"
                   node-key="id"
-                  label-key="id"
+                  label-key="name"
                   :filter="filter"
                   :no-results-label="notFound"
                   :no-nodes-label="noData"
@@ -267,7 +274,13 @@ onMounted(() => {
               <q-separator />
 
               <q-card-section class="q-pa-sm">
-                <q-input dense outlined v-model="filter2" label="ค้นหา">
+                <q-input
+                  dense
+                  outlined
+                  v-model="filter2"
+                  label="ค้นหา"
+                  class="inputgreen"
+                >
                   <template v-slot:append>
                     <q-icon
                       v-if="filter2 !== ''"
@@ -282,7 +295,7 @@ onMounted(() => {
                   dense
                   :nodes="nodes"
                   node-key="id"
-                  label-key="id"
+                  label-key="name"
                   :filter="filter2"
                   :no-results-label="notFound"
                   :no-nodes-label="noData"
@@ -345,6 +358,7 @@ onMounted(() => {
                   label="จำนวน (วัน)"
                   mask="#"
                   reverse-fill-mask
+                  class="inputgreen"
                 />
               </div>
             </div>
@@ -369,6 +383,7 @@ onMounted(() => {
                   label="จำนวน (วัน)"
                   mask="#"
                   reverse-fill-mask
+                  class="inputgreen"
                 />
               </div>
               <div class="col-12 col-md-4">
@@ -379,6 +394,7 @@ onMounted(() => {
                   v-model="formData.projectNigthHoldPlanned"
                   label="จำนวน (คืน)"
                   mask="#"
+                  class="inputgreen"
                   reverse-fill-mask
                 />
               </div>
@@ -406,6 +422,7 @@ onMounted(() => {
                 label="จำนวน (รุ่น)"
                 mask="#"
                 reverse-fill-mask
+                class="inputgreen"
               />
             </div>
           </div>