diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index c6cdf50..cd4d865 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -16,7 +16,6 @@ const $q = useQuasar();
 const route = useRoute();
 const mixin = useCounterMixin();
 const store = useKpiDataStore();
-
 const {
   showLoader,
   hideLoader,
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
new file mode 100644
index 0000000..12c71e8
--- /dev/null
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
@@ -0,0 +1,111 @@
+divdiv
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const numpage = defineModel<number>("numpage", { required: true });
+const kpiUserPlannedId = defineModel<string>("kpiUserPlannedId", {
+  required: true,
+});
+
+const dataAchievement = ref<any[]>([]);
+
+function fetchByid(id: string, type: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement(`${type}`) + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      dataAchievement.value = [
+        {
+          level: "5",
+          val: data.achievement5,
+        },
+        {
+          level: "4",
+          val: data.achievement4,
+        },
+        {
+          level: "3",
+          val: data.achievement3,
+        },
+        {
+          level: "2",
+          val: data.achievement2,
+        },
+        {
+          level: "1",
+          val: data.achievement1,
+        },
+      ];
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function closeDialog() {
+  modal.value = false;
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      const type =
+        numpage.value === 1
+          ? "planned"
+          : numpage.value === 2
+          ? "role"
+          : "special";
+      fetchByid(kpiUserPlannedId.value, type);
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 45%">
+      <DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
+      <q-separator />
+      <q-card-section>
+        <q-card bordered>
+          <div class="bg-grey-2 q-pa-sm">
+            <div
+              class="row text-dark text-body2 text-weight-medium text-weight-bold"
+            >
+              <div class="text-center col-6">ระดับคะแนน</div>
+              <div class="text-center col-6">ผลสำเร็จของงาน</div>
+            </div>
+          </div>
+          <q-separator />
+          <div v-for="(item, index) in dataAchievement" :key="item.id">
+            <div :class="`row q-pa-sm ${index % 2 !== 0 && 'bg-grey-2'}`">
+              <div class="col-6 text-center text-body1">{{ item.level }}</div>
+              <div class="col-6 text-center self-center">
+                <span>{{ item.val }}</span>
+              </div>
+            </div>
+            <q-separator />
+          </div>
+        </q-card>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue b/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
index 16133de..429d1a7 100644
--- a/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
@@ -126,9 +126,12 @@ function onSubmit() {
   dialogConfirm($q, async () => {
     try {
       showLoader();
+      console.log(rows.value);
+
       const formData = rows.value.map((e: any) => ({
         id: e.id,
         point: e.point,
+        summary: ((e.point / 5) * e.weight).toFixed(2),
       }));
 
       const url =
@@ -183,7 +186,29 @@ function onSubmit() {
               <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
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="i in 5"
+                        :class="props.row.point == i && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="i"
+                        @click="
+                          () => {
+                            updateAchievement(props.rowIndex, props.row);
+                            props.row.point = i;
+                          }
+                        "
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span v-html="props.row[`achievement${i}`]"></span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+
+                    <!-- <q-rating
                       v-model="props.row.point"
                       max="5"
                       size="sm"
@@ -209,7 +234,7 @@ function onSubmit() {
                       <template v-slot:tip-5>
                         <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
                       </template>
-                    </q-rating>
+                    </q-rating> -->
                   </div>
                   <div v-else-if="col.name === 'achievement'">
                     {{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
@@ -283,4 +308,19 @@ function onSubmit() {
     top: 0;
   }
 }
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue b/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
index ae6c2a5..9299127 100644
--- a/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
@@ -282,9 +282,14 @@ function onSubmit() {
 }
 .q-btn-group--outline > .q-btn-item.active {
   color: #2196f3 !important;
-  background-color: #fff;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
 }
 .q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
   border: 1px solid #2196f3;
+  background-color: #cde6fb;
 }
 </style>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index 5d34234..1427d89 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -10,6 +10,7 @@ import type { QTableProps } from "quasar";
 import Dialog from "@/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue";
 import Dialog03 from "@/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue";
 import DialogEvaluate from "@/modules/08_KPI/components/Tab/DialogEvaluate/01_Indicator.vue";
+import DialogViewInfo from "@/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
@@ -36,14 +37,18 @@ const props = defineProps({
   fetchList: { type: Function, required: true },
 });
 
-const visibleColumns = ref<string[]>([
-  "includingName",
-  "target",
-  "point",
-  "weight",
-  "achievement",
-  "evaluationResults",
-]);
+const visibleColumns = ref<string[]>(
+  store.tabOpen === 3
+    ? [
+        "includingName",
+        "target",
+        "point",
+        "weight",
+        "achievement",
+        "evaluationResults",
+      ]
+    : ["includingName", "target", "weight"]
+);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "includingName",
@@ -119,17 +124,23 @@ const modal = ref<boolean>(false);
 const modalAssigned = ref<boolean>(false);
 const isStatusEdit = ref<boolean>(false);
 const modalEvaluate = ref<boolean>(false);
+const modalViewInfo = ref<boolean>(false);
 
 function onAdd(edit: boolean = false, id: string = "") {
   isStatusEdit.value = edit;
   kpiUserPlannedId.value = id;
   // if (numpage.value !== 3) {
-    modal.value = true;
+  modal.value = true;
   // } else if (numpage.value == 3) {
   //   modalAssigned.value = true;
   // }
 }
 
+function onClickView(id: string) {
+  kpiUserPlannedId.value = id;
+  modalViewInfo.value = true;
+}
+
 function onEvaluate() {
   modalEvaluate.value = true;
 }
@@ -191,7 +202,10 @@ watch(
         <div class="col">
           <span class="text-weight-medium">{{ title }}</span>
           <q-btn
-            v-if="!isReadonly"
+            v-if="
+              store.dataEvaluation.evaluationStatus === 'NEW' &&
+              store.rolePerson === 'USER'
+            "
             class="q-ml-xs"
             flat
             round
@@ -204,9 +218,12 @@ watch(
             <q-tooltip>เพิ่มข้อมูล</q-tooltip>
           </q-btn>
         </div>
-        <!-- <div class="col-auto">
+        <div class="col-auto">
           <q-btn
-            v-if="!isReadonly"
+            v-if="
+              store.rolePerson === 'USER' &&
+              store.dataEvaluation.evaluationStatus === 'EVALUATING'
+            "
             flat
             round
             icon="mdi-clipboard-check-outline"
@@ -217,7 +234,7 @@ watch(
           >
             <q-tooltip>ประเมิน</q-tooltip>
           </q-btn>
-        </div> -->
+        </div>
       </div>
     </q-card-section>
     <q-separator />
@@ -239,17 +256,52 @@ watch(
       >
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th auto-width />
             <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-th
+              auto-width
+              v-if="
+                store.dataEvaluation.evaluationStatus === 'NEW' &&
+                store.rolePerson === 'USER'
+              "
+            />
           </q-tr>
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
+            <q-td>
+              <q-btn
+                flat
+                round
+                icon="info"
+                color="info"
+                size="12px"
+                dense
+                @click="onClickView(props.row.id)"
+              >
+                <q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
+              </q-btn></q-td
+            >
             <q-td v-for="col in props.cols" :key="col.id">
               <div v-if="col.name === 'point'">
-                <q-rating
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="i in 5"
+                    :class="props.row.point == i && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="i"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span v-html="props.row[`achievement${i}`]"></span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
+                <!-- <q-rating
                   v-model="props.row.point"
                   max="5"
                   size="sm"
@@ -273,7 +325,7 @@ watch(
                   <template v-slot:tip-5>
                     <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
                   </template>
-                </q-rating>
+                </q-rating> -->
               </div>
               <div v-else-if="col.name === 'achievement'">
                 {{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
@@ -289,7 +341,12 @@ watch(
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
-            <td v-if="!isReadonly">
+            <td
+              v-if="
+                store.dataEvaluation.evaluationStatus === 'NEW' &&
+                store.rolePerson === 'USER'
+              "
+            >
               <q-btn
                 flat
                 round
@@ -338,7 +395,7 @@ watch(
     :isStatusEdit="isStatusEdit"
     :kpiUserPlannedId="kpiUserPlannedId"
   />
-  
+
   <!-- <Dialog03
     v-model:modal="modalAssigned"
     :numpage="numpage"
@@ -346,11 +403,18 @@ watch(
     :kpiUserPlannedId="kpiUserPlannedId"
   /> -->
 
-  <!-- <DialogEvaluate
+  <DialogEvaluate
     v-model:modal="modalEvaluate"
     :data="rows"
     :numpage="numpage"
-  /> -->
+  />
+
+  <DialogViewInfo
+    v-model:modal="modalViewInfo"
+    :numpage="numpage"
+    :isStatusEdit="isStatusEdit"
+    :kpiUserPlannedId="kpiUserPlannedId"
+  />
 </template>
 <style scoped>
 .custom-table2 {
@@ -393,4 +457,19 @@ watch(
     top: 0;
   }
 }
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index 9963619..27abba3 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -230,7 +230,10 @@ onMounted(() => {
           <div class="col">
             <span class="text-weight-medium">{{ item.name }}</span>
             <q-btn
-              v-if="!isReadonly"
+              v-if="
+                store.dataEvaluation.evaluationStatus === 'NEW' &&
+                store.rolePerson === 'USER'
+              "
               class="q-ml-xs"
               flat
               round
@@ -246,7 +249,7 @@ onMounted(() => {
 
           <q-space />
           <q-btn
-            v-if="!isReadonly"
+            v-if="store.dataEvaluation.evaluationStatus == 'EVALUATING'"
             flat
             round
             icon="mdi-clipboard-check-outline"
@@ -279,7 +282,13 @@ onMounted(() => {
               <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-th
+                auto-width
+                v-if="
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER'
+                "
+              />
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -341,7 +350,12 @@ onMounted(() => {
                   {{ col.value }}
                 </div>
               </q-td>
-              <q-td v-if="!isReadonly">
+              <q-td
+                v-if="
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER'
+                "
+              >
                 <q-btn
                   flat
                   round
@@ -430,9 +444,14 @@ onMounted(() => {
 }
 .q-btn-group--outline > .q-btn-item.active {
   color: #2196f3 !important;
-  background-color: #fff;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
 }
 .q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
   border: 1px solid #2196f3;
+  background-color: #cde6fb;
 }
 </style>