diff --git a/src/api/KPI/api.kpis.ts b/src/api/KPI/api.kpis.ts
index edd7f13..7dcac38 100644
--- a/src/api/KPI/api.kpis.ts
+++ b/src/api/KPI/api.kpis.ts
@@ -5,6 +5,7 @@ const kpiPeriod = `${env.API_URI}/kpi/period`;
 const kpiEvaluation = `${env.API_URI}/kpi/user/evaluation`;
 const kpiPlan = `${env.API_URI}/kpi/plan`;
 const kpiRole = `${env.API_URI}/kpi/role`;
+const kpiSpecial = `${env.API_URI}/kpi/special`;
 const KpiCapacity = `${env.API_URI}/kpi/capacity`;
 const KpiFile = `${env.API_URI}/salary/file`;
 const KpiEvaluationInfo = `${env.API_URI}/kpi/evaluation`;
@@ -17,6 +18,7 @@ export default {
   kpiEvaluation,
   kpiPlan,
   kpiRole,
+  kpiSpecial,
   KpiCapacity,
   file: KpiFile,
 
@@ -25,7 +27,6 @@ export default {
 
   kpiScoreTotal: () => `${kpiEvaluation}/point`,
 
-
   /** ผลสัมฤทธิ์ของงาน*/
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${url}/file/${name}/${group}/${id}/${fileName}`,
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 553bd8f..c6cdf50 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+import type { DataOptions } from "@/modules/08_KPI/interface/index/Main";
+
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -22,6 +24,7 @@ const {
   dialogConfirm,
   dialogMessageNotify,
   success,
+  date2Thai,
 } = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
@@ -35,6 +38,20 @@ const search = ref<string>("");
 const listCheckID = ref<string | null>(null);
 const listTarget = ref<any>([]);
 
+const formFilter = reactive<any>({
+  isAll: false,
+  keyword: "",
+  node: 0,
+  nodeId: "",
+  period: "",
+  year: null,
+  page: 1,
+  pageSize: 20,
+});
+
+const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
+const maxPage = ref<number>(1);
+
 const formDetail = reactive<any>({
   orgRevisionId: "",
   id: "",
@@ -60,20 +77,28 @@ const formDetail = reactive<any>({
   strategyId: "",
   strategyName: "",
   documentInfoEvidence: "",
+  date: null,
 });
 
-function fetchIndicators() {
-  const nodeId = store.dataProfile.nodeId;
-  const node = store.dataProfile.node;
-  const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
+/** Option  รอบการประเมิน*/
+const roundOp = ref<DataOptions[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
+
+function fetchListPlan() {
+  formFilter.nodeId = store.dataProfile.nodeId;
+  formFilter.node = store.dataProfile.node;
+  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
+  // const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
+
   showLoader();
   http
-    .get(
-      config.API.kpiPlan +
-        `?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&nodeId=${nodeId}&node=${node}&keyword=${""}`
-    )
+    .post(config.API.kpiPlan + `/search`, formFilter)
     .then((res) => {
       listTarget.value = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      totalList.value = res.data.result.total;
     })
     .catch((err) => {
       messageError($q, err);
@@ -83,7 +108,7 @@ function fetchIndicators() {
     });
 }
 
-function fetchIndicatorsByid(id: string) {
+function fetchListPlanByid(id: string) {
   showLoader();
   http
     .get(config.API.kpiAchievement("planned") + `/${id}`)
@@ -94,6 +119,17 @@ function fetchIndicatorsByid(id: string) {
       formDetail.weight = data.weight;
       formDetail.meaning = data.meaning;
       formDetail.formula = data.formula;
+      formDetail.achievement1 = data.achievement1;
+      formDetail.achievement2 = data.achievement2;
+      formDetail.achievement3 = data.achievement3;
+      formDetail.achievement4 = data.achievement4;
+      formDetail.achievement5 = data.achievement5;
+      formDetail.documentInfoEvidence = data.documentInfoEvidence;
+      if (data.startDate && data.endDate) {
+        formDetail.date = [];
+        formDetail.date[0] = data.startDate;
+        formDetail.date[1] = data.endDate;
+      }
       clickList(data.kpiPlanId, true);
     })
     .catch((err) => {
@@ -105,15 +141,22 @@ function fetchIndicatorsByid(id: string) {
 }
 
 function fetchListRole() {
-  const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
-  const position = store.dataProfile.position;
+  // const kpiPeriodId = store.dataEvaluation.kpiPeriodId;
+  // const position = store.dataProfile.position;
+  formFilter.nodeId = store.dataProfile.nodeId;
+  formFilter.node = store.dataProfile.node;
+  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
+  formFilter.position = store.dataProfile.position;
+
   http
-    .get(
-      config.API.kpiRole +
-        `?page=${1}&pageSize=${50}&kpiPeriodId=${kpiPeriodId}&position=${position}`
-    )
+    .post(config.API.kpiRole + `/search`, formFilter)
     .then((res) => {
       listTarget.value = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      totalList.value = res.data.result.total;
+    })
+    .catch((err) => {
+      messageError($q, err);
     })
     .finally(() => {
       hideLoader();
@@ -131,6 +174,17 @@ function fetchRoleByid(id: string) {
       formDetail.weight = data.weight;
       formDetail.meaning = data.meaning;
       formDetail.formula = data.formula;
+      formDetail.achievement1 = data.achievement1;
+      formDetail.achievement2 = data.achievement2;
+      formDetail.achievement3 = data.achievement3;
+      formDetail.achievement4 = data.achievement4;
+      formDetail.achievement5 = data.achievement5;
+      formDetail.documentInfoEvidence = data.documentInfoEvidence;
+      if (data.startDate && data.endDate) {
+        formDetail.date = [];
+        formDetail.date[0] = data.startDate;
+        formDetail.date[1] = data.endDate;
+      }
       clickList(data.kpiRoleId, true);
     })
     .catch((err) => {
@@ -141,9 +195,76 @@ function fetchRoleByid(id: string) {
     });
 }
 
+function fetchListSpecial() {
+  formFilter.nodeId = store.dataProfile.nodeId;
+  formFilter.node = store.dataProfile.node;
+  formFilter.year = formFilter?.year ? formFilter.year.toString() : "";
+
+  const body = {
+    keyword: formFilter.keyword,
+    period: formFilter.period,
+    year: formFilter.year,
+    pageSize: formFilter.pageSize,
+    page: formFilter.page,
+  };
+
+  showLoader();
+  http
+    .post(config.API.kpiSpecial + `/search`, body)
+    .then((res) => {
+      listTarget.value = res.data.result.data;
+      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
+      totalList.value = res.data.result.total;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchspecialByid(id: string) {
+  showLoader();
+  http
+    .get(config.API.kpiAchievement("special") + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      formDetail.including = data.including;
+      formDetail.includingName = data.includingName;
+      formDetail.target = data.target;
+      formDetail.unit = data.unit;
+      formDetail.achievement1 = data.achievement1;
+      formDetail.achievement2 = data.achievement2;
+      formDetail.achievement3 = data.achievement3;
+      formDetail.achievement4 = data.achievement4;
+      formDetail.achievement5 = data.achievement5;
+      formDetail.weight = data.weight;
+      formDetail.formula = data.formula;
+      formDetail.meaning = data.meaning;
+      formDetail.documentInfoEvidence = data.documentInfoEvidence;
+      if (data.startDate && data.endDate) {
+        formDetail.date = [];
+        formDetail.date[0] = data.startDate;
+        formDetail.date[1] = data.endDate;
+      }
+    })
+    .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;
+  const url =
+    numpage.value === 1
+      ? config.API.kpiPlan
+      : numpage.value === 2
+      ? config.API.kpiRole
+      : config.API.kpiSpecial;
   http
     .get(`${url}/${id}`)
     .then((res) => {
@@ -155,6 +276,11 @@ function clickList(id: string, isData: boolean = false) {
         formDetail.weight = data.weight;
         formDetail.meaning = data.meaning;
         formDetail.formula = data.formula;
+        formDetail.achievement1 = data.achievement1;
+        formDetail.achievement2 = data.achievement2;
+        formDetail.achievement3 = data.achievement3;
+        formDetail.achievement4 = data.achievement4;
+        formDetail.achievement5 = data.achievement5;
       }
       formDetail.orgRevisionId = data.corgRevisionId;
       formDetail.id = data.id;
@@ -163,11 +289,6 @@ function clickList(id: string, isData: boolean = false) {
       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;
@@ -209,14 +330,25 @@ function closeDialog() {
   formDetail.nodeId = "";
   formDetail.strategy = "";
   formDetail.strategyId = "";
+  formDetail.documentInfoEvidence = "";
+  formDetail.date = null;
+
+  formFilter.isAll = false;
+  formFilter.keyword = "";
+  formFilter.node = 0;
+  formFilter.nodeId = "";
+  formFilter.period = "";
+  formFilter.year = null;
+  formFilter.page = 1;
+  formFilter.pageSize = 20;
 }
 
 function onSubmit() {
-  if (!listCheckID.value) {
+  if (!listCheckID.value && numpage.value !== 3) {
     dialogMessageNotify($q, "กรุณาเลือกตัวชี้วัด");
   } else {
     dialogConfirm($q, async () => {
-      // showLoader();
+      showLoader();
 
       const formBody = {
         target: formDetail.target,
@@ -227,6 +359,23 @@ function onSubmit() {
         kpiUserEvaluationId: store.dataEvaluation.id,
         kpiPlanId: numpage.value === 1 ? listCheckID.value : undefined,
         kpiRoleId: numpage.value === 2 ? listCheckID.value : undefined,
+        achievement1: formDetail.achievement1,
+        achievement2: formDetail.achievement2,
+        achievement3: formDetail.achievement3,
+        achievement4: formDetail.achievement4,
+        achievement5: formDetail.achievement5,
+        documentInfoEvidence: formDetail.documentInfoEvidence,
+        startDate: formDetail.date ? formDetail.date[0] : undefined,
+        endDate: formDetail.date ? formDetail.date[1] : undefined,
+        including: numpage.value === 3 ? formDetail.including : undefined,
+        includingName:
+          numpage.value === 3 ? formDetail.includingName : undefined,
+        period:
+          numpage.value === 3 ? store.dataEvaluation.durationKPI : undefined,
+        year:
+          numpage.value === 3
+            ? store.dataEvaluation.year.toString()
+            : undefined,
       };
       try {
         const urlPlanned = isStatusEdit.value
@@ -237,68 +386,172 @@ function onSubmit() {
           ? config.API.kpiAchievement("role") + `/${kpiUserPlannedId.value}`
           : config.API.kpiAchievement("role");
 
-        const url = numpage.value === 1 ? urlPlanned : urlRole;
+        const urlSpecial = isStatusEdit.value
+          ? config.API.kpiAchievement("special") + `/${kpiUserPlannedId.value}`
+          : config.API.kpiAchievement("special");
+
+        const url =
+          numpage.value === 1
+            ? urlPlanned
+            : numpage.value === 2
+            ? urlRole
+            : urlSpecial;
         const method = isStatusEdit.value ? "put" : "post";
         await http[method](url, formBody);
+        closeDialog();
         success($q, "บันทึกข้อมูลสำเร็จ");
       } catch (err) {
         messageError($q, err);
       } finally {
         hideLoader();
-        closeDialog();
       }
     });
   }
 }
 
+function fetchNewList() {
+  formFilter.page = 1;
+  numpage.value === 1
+    ? fetchListPlan()
+    : numpage.value === 2
+    ? fetchListRole()
+    : fetchListSpecial();
+}
 watch(
   () => modal.value,
   () => {
     if (modal.value) {
       if (numpage.value === 1) {
-        fetchIndicators();
-        isStatusEdit.value && fetchIndicatorsByid(kpiUserPlannedId.value);
+        fetchListPlan();
+        isStatusEdit.value && fetchListPlanByid(kpiUserPlannedId.value);
       } else if (numpage.value === 2) {
         fetchListRole();
         isStatusEdit.value && fetchRoleByid(kpiUserPlannedId.value);
+      } else if (numpage.value === 3) {
+        fetchListSpecial();
+        isStatusEdit.value && fetchspecialByid(kpiUserPlannedId.value);
       }
     }
   }
 );
+
+const title = computed(() => {
+  let name = "";
+  if (numpage.value === 1) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดตามแผนปฏิบัติราชการประจําปี"
+      : "เพิ่มตัวชี้วัดตามแผนปฏิบัติราชการประจําปี";
+  } else if (numpage.value === 2) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดตามหน้าที่ความรับผิดชอบ"
+      : "เพิ่มตัวชี้วัดตามหน้าที่ความรับผิดชอบ";
+  } else if (numpage.value === 3) {
+    name = isStatusEdit.value
+      ? "แก้ไขตัวชี้วัดที่ได้รับมอบหมาย"
+      : "เพิ่มตัวชี้วัดที่ได้รับมอบหมาย";
+  }
+  return name;
+});
 </script>
 <template>
   <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"
-        />
+        <DialogHeader :tittle="title" :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">
+                <div class="row col-12" v-if="numpage !== 3">
+                  <q-checkbox
+                    v-model="formFilter.isAll"
+                    label="แสดงตัวชี้วัดภายใต้หน่วยงาน/ส่วนราชการทุกระดับ"
+                    @update:model-value="fetchNewList()"
+                  />
+                </div>
+                <div class="row q-col-gutter-sm col-12">
+                  <div class="col-5">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="formFilter.year"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:model-value="fetchNewList()"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          dense
+                          outlined
+                          :model-value="
+                            formFilter.year === null || formFilter.year === ''
+                              ? null
+                              : Number(formFilter.year) + 543
+                          "
+                          :label="`${'ปีงบประมาณ'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
+                            </q-icon>
+                          </template>
+                          <template v-slot:append>
+                            <q-icon
+                              v-if="formFilter.year"
+                              name="cancel"
+                              class="cursor-pointer"
+                              @click.stop.prevent="
+                                (formFilter.year = null), fetchNewList()
+                              "
+                            />
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-7">
+                    <q-select
+                      dense
+                      outlined
+                      v-model="formFilter.period"
+                      :options="roundOp"
+                      option-label="name"
+                      option-value="id"
+                      emit-value
+                      map-options
+                      input-class="text-red"
+                      label="รอบการประเมิน"
+                      clearable
+                      @update:model-value="fetchNewList()"
+                    />
+                  </div>
+                </div>
+
+                <div class="col-12 q-mt-sm">
                   <q-input
-                    v-model="search"
+                    v-model="formFilter.keyword"
                     outlined
                     dense
                     label="ค้นหา"
-                    class="inputgreen"
+                    @keydown.enter.prevent="fetchNewList()"
                   >
                     <template v-slot:append>
-                      <q-icon v-if="search == ''" name="search" />
+                      <q-icon v-if="formFilter.keyword == ''" name="search" />
                       <q-icon
-                        v-if="search !== ''"
+                        v-if="formFilter.keyword !== ''"
                         name="clear"
                         class="cursor-pointer"
-                        @click="search = ''"
+                        @click="(formFilter.keyword = ''), fetchNewList()"
                       />
                     </template>
                   </q-input>
@@ -335,6 +588,30 @@ watch(
                         </q-item-section>
                       </q-item>
                     </q-list>
+                    <q-separator />
+                    <div
+                      class="q-pa-lg flex justify-end"
+                      v-if="totalList !== 0"
+                    >
+                      ทั้งหมด {{ totalList }} รายการ
+                      <q-pagination
+                        v-model="formFilter.page"
+                        active-color="primary"
+                        color="dark"
+                        :max="Number(maxPage)"
+                        size="sm"
+                        boundary-links
+                        direction-links
+                        :max-pages="5"
+                        @update:model-value="
+                          numpage === 1
+                            ? fetchListPlan()
+                            : numpage === 2
+                            ? fetchListRole()
+                            : fetchListSpecial()
+                        "
+                      ></q-pagination>
+                    </div>
                   </q-card-section>
                 </q-card>
               </div>
@@ -350,7 +627,7 @@ watch(
                 <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-12 row" v-if="numpage !== 3">
                         <div class="col-4 text-grey-6">หน่วยงาน/ส่วนราชการ</div>
                         <div class="col-8">{{ formDetail.nodeName }}</div>
                       </div>
@@ -361,11 +638,43 @@ watch(
 
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">ลำดับ/รหัสตัวชี้วัด</div>
-                        <div class="col-8">{{ formDetail.including }}</div>
+                        <div class="col-8">
+                          <q-input
+                            v-if="numpage === 3"
+                            outlined
+                            v-model="formDetail.including"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) =>
+                                !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+
+                          <div v-else>{{ formDetail.including }}</div>
+                        </div>
                       </div>
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">ชื่อตัวชี้วัด</div>
-                        <div class="col-8">{{ formDetail.includingName }}</div>
+                        <div class="col-8">
+                          <q-input
+                            v-if="numpage === 3"
+                            outlined
+                            v-model="formDetail.includingName"
+                            bg-color="white"
+                            dense
+                            class="inputgreen"
+                            :rules="[
+                              (val) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
+                            ]"
+                            lazy-rules
+                            hide-bottom-space
+                          />
+                          <div v-else>{{ formDetail.includingName }}</div>
+                        </div>
                       </div>
                       <div class="col-12 row">
                         <div class="col-4 text-grey-6">ค่าเป้าหมาย</div>
@@ -380,6 +689,7 @@ watch(
                               (val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
                             ]"
                             hide-bottom-space
+                            lazy-rules
                           />
                         </div>
                       </div>
@@ -395,6 +705,7 @@ watch(
                             :rules="[
                               (val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
                             ]"
+                            lazy-rules
                             hide-bottom-space
                             reverse-fill-mask
                           />
@@ -414,6 +725,7 @@ watch(
                                 !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
                             ]"
                             hide-bottom-space
+                            lazy-rules
                             mask="###"
                           />
                         </div>
@@ -429,34 +741,84 @@ watch(
                       <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="row col-12 items-center lineTop q-col-gutter-sm"
+                    >
                       <div class="col-6 text-center text-body2">5</div>
-                      <div class="col-6 text-center text-primary">
-                        {{ formDetail.achievement5 }}
+                      <div class="col-6">
+                        <q-input
+                          v-model="formDetail.achievement5"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
                       </div>
                     </div>
-                    <div class="row col-12 items-center lineTop">
+                    <div
+                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    >
                       <div class="col-6 text-center text-body2">4</div>
                       <div class="col-6 text-center text-primary">
-                        {{ formDetail.achievement4 }}
+                        <q-input
+                          v-model="formDetail.achievement4"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
                       </div>
                     </div>
-                    <div class="row col-12 items-center lineTop">
+                    <div
+                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    >
                       <div class="col-6 text-center text-body2">3</div>
                       <div class="col-6 text-center text-primary">
-                        {{ formDetail.achievement3 }}
+                        <q-input
+                          v-model="formDetail.achievement3"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
                       </div>
                     </div>
-                    <div class="row col-12 items-center lineTop">
+                    <div
+                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    >
                       <div class="col-6 text-center text-body2">2</div>
                       <div class="col-6 text-center text-primary">
-                        {{ formDetail.achievement2 }}
+                        <q-input
+                          v-model="formDetail.achievement2"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
                       </div>
                     </div>
-                    <div class="row col-12 items-center lineTop">
+                    <div
+                      class="row col-12 items-center lineTop q-col-gutter-sm"
+                    >
                       <div class="col-6 text-center text-body2">1</div>
                       <div class="col-6 text-center text-primary">
-                        {{ formDetail.achievement1 }}
+                        <q-input
+                          v-model="formDetail.achievement1"
+                          outlined
+                          dense
+                          :rules="[(val:string) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,]"
+                          hide-bottom-space
+                          class="inputgreen"
+                          lazy-rules
+                        />
                       </div>
                     </div>
                   </div>
@@ -471,6 +833,7 @@ watch(
                     :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
                     hide-bottom-space
                     class="inputgreen"
+                    lazy-rules
                   />
                 </div>
 
@@ -484,6 +847,7 @@ watch(
                     :rules="[(val:string) => !!val || `${'กรุณากรอกตัวชี้วัด'}`,]"
                     hide-bottom-space
                     class="inputgreen"
+                    lazy-rules
                   />
                 </div>
 
@@ -497,8 +861,57 @@ watch(
                     :rules="[(val:string) => !!val || `${'กรุณากรอกข้อมูลเอกสารหลักฐาน'}`,]"
                     hide-bottom-space
                     class="inputgreen"
+                    lazy-rules
                   />
                 </div>
+                <div class="col-6">
+                  <datepicker
+                    v-model="formDetail.date"
+                    :locale="'th'"
+                    autoApply
+                    :enableTimePicker="false"
+                    week-start="0"
+                    range
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        dense
+                        outlined
+                        class="inputgreen"
+                        :model-value="
+                          formDetail.date
+                            ? `${date2Thai(formDetail.date[0])} - ${date2Thai(
+                                formDetail.date[1]
+                              )}`
+                            : null
+                        "
+                        :label="`${'ช่วงเวลาเริ่มต้น-สิ้นสุด'}`"
+                        hide-bottom-space
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                        <template v-slot:append>
+                          <q-icon
+                            v-if="formDetail.date !== null"
+                            name="cancel"
+                            class="cursor-pointer"
+                            @click="formDetail.date = null"
+                          />
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
               </div>
             </div>
           </div>
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 86e645c..ae6c2a5 100644
--- a/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
+++ b/src/modules/08_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
@@ -171,8 +171,26 @@ 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'">
-                      <div v-if="type == 'HEAD' || type == 'GROUP'">
-                        <q-rating
+                      <div>
+                        <q-btn-group outline>
+                          <q-btn
+                            v-for="(i, index) in sortedDataListCriteria"
+                            :key="index"
+                            :class="props.row.point == i.level && 'active'"
+                            outline
+                            color="grey-6"
+                            :label="i.level"
+                            @click="props.row.point = i.level"
+                          >
+                            <q-tooltip>
+                              <div class="text-body2">
+                                <span v-html="i.description"></span>
+                              </div>
+                            </q-tooltip>
+                          </q-btn>
+                        </q-btn-group>
+
+                        <!-- <q-rating
                           v-model="props.row.point"
                           max="5"
                           size="sm"
@@ -191,9 +209,8 @@ function onSubmit() {
                               </div>
                             </q-tooltip>
                           </template>
-                        </q-rating>
+                        </q-rating> -->
                       </div>
-                      <div v-else>รอ ทำ select</div>
                     </div>
                     <div v-else-if="col.name === 'summary'">
                       {{ props.row.point !== 0 ? props.row.point * 20 : "-" }}
@@ -260,4 +277,14 @@ 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: #fff;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+}
 </style>
diff --git a/src/modules/08_KPI/components/Tab/TabMain.vue b/src/modules/08_KPI/components/Tab/TabMain.vue
index d559d84..5240d73 100644
--- a/src/modules/08_KPI/components/Tab/TabMain.vue
+++ b/src/modules/08_KPI/components/Tab/TabMain.vue
@@ -11,7 +11,9 @@ import File from "@/modules/08_KPI/components/Tab/05_File.vue";
 
 const store = useKpiDataStore();
 const route = useRoute();
-const isReadonly = ref<boolean>(route.name === "KPIEditEvaluator" ? true : false);
+const isReadonly = ref<boolean>(
+  route.name === "KPIEditEvaluator" ? true : false
+);
 const step = ref<number>(1); // 1 = จัดทำข้อตกลง, 2 = รายงานความก้าวหน้า, 3 = รายงานผลสำเร็จของงาน
 const indicatorScore = defineModel("indicatorScore", {
   type: Number,
@@ -69,8 +71,16 @@ const splitterModel = ref<number>(12);
           :label="tab.label"
         /> -->
         <q-tab name="1" label="จัดทำข้อตกลง" />
-        <q-tab name="2" label="รายงานความก้าวหน้า" :disable="step < 2" />
-        <q-tab name="3" label="รายงานผลสำเร็จของงาน" :disable="step < 3" />
+        <q-tab
+          name="2"
+          label="รายงานความก้าวหน้า"
+          :disable="store.tabOpen < 2"
+        />
+        <q-tab
+          name="3"
+          label="รายงานผลสำเร็จของงาน"
+          :disable="store.tabOpen < 3"
+        />
         <!-- <q-tab name="3" label="ผู้บังคับบัญชา">
           <div class="text-caption">เหนือขึ้นไป</div>
         </q-tab>
@@ -101,9 +111,9 @@ const splitterModel = ref<number>(12);
             v-model:indicatorScore="indicatorScore"
             v-model:competencyScore="competencyScore"
           />
-          <Evaluator v-if="store.tabMain === '2'" :type="'evaluator'" />
-          <Evaluator v-if="store.tabMain === '3'" :type="'commander'" />
-          <Evaluator v-if="store.tabMain === '4'" :type="'commanderHigh'" />
+          <Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
+          <Assessment v-if="store.tabMain === '3'" :type="'commander'" />
+          <Assessment v-if="store.tabMain === '4'" :type="'commanderHigh'" />
           <File v-if="store.tabMain === '5'" />
         </q-tab-panel>
       </q-tab-panels>
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 1407b71..5d34234 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -123,11 +123,11 @@ const modalEvaluate = ref<boolean>(false);
 function onAdd(edit: boolean = false, id: string = "") {
   isStatusEdit.value = edit;
   kpiUserPlannedId.value = id;
-  if (numpage.value !== 3) {
+  // if (numpage.value !== 3) {
     modal.value = true;
-  } else if (numpage.value == 3) {
-    modalAssigned.value = true;
-  }
+  // } else if (numpage.value == 3) {
+  //   modalAssigned.value = true;
+  // }
 }
 
 function onEvaluate() {
@@ -166,23 +166,23 @@ watch(
   }
 );
 
-watch(
-  () => modalAssigned.value,
-  () => {
-    if (!modalAssigned.value) {
-      props.fetchList?.();
-    }
-  }
-);
+// watch(
+//   () => modalAssigned.value,
+//   () => {
+//     if (!modalAssigned.value) {
+//       props.fetchList?.();
+//     }
+//   }
+// );
 
-watch(
-  () => modalEvaluate.value,
-  () => {
-    if (!modalEvaluate.value) {
-      props.fetchList?.();
-    }
-  }
-);
+// watch(
+//   () => modalEvaluate.value,
+//   () => {
+//     if (!modalEvaluate.value) {
+//       props.fetchList?.();
+//     }
+//   }
+// );
 </script>
 <template>
   <q-card bordered style="border-radius: 5px" class="no-shadow">
@@ -338,18 +338,19 @@ watch(
     :isStatusEdit="isStatusEdit"
     :kpiUserPlannedId="kpiUserPlannedId"
   />
-  <Dialog03
+  
+  <!-- <Dialog03
     v-model:modal="modalAssigned"
     :numpage="numpage"
     :isStatusEdit="isStatusEdit"
     :kpiUserPlannedId="kpiUserPlannedId"
-  />
+  /> -->
 
-  <DialogEvaluate
+  <!-- <DialogEvaluate
     v-model:modal="modalEvaluate"
     :data="rows"
     :numpage="numpage"
-  />
+  /> -->
 </template>
 <style scoped>
 .custom-table2 {
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 65f4374..9963619 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -107,6 +107,12 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const visibleColumns = ref<string[]>(
+  store.tabOpen === 3
+    ? ["name", "level", "point", "weight", "summary"]
+    : ["name", "level", "weight"]
+);
+
 const typeCompetency = ref<string>("");
 function onAdd(type: string) {
   typeCompetency.value = type;
@@ -239,7 +245,7 @@ onMounted(() => {
           </div>
 
           <q-space />
-          <!-- <q-btn
+          <q-btn
             v-if="!isReadonly"
             flat
             round
@@ -250,7 +256,7 @@ onMounted(() => {
             @click="onEvaluate(item.id)"
           >
             <q-tooltip>ประเมิน</q-tooltip>
-          </q-btn> -->
+          </q-btn>
         </div>
       </q-card-section>
       <q-card-section class="q-pa-sm">
@@ -266,6 +272,7 @@ onMounted(() => {
           hide-pagination
           class="custom-table2"
           no-data-label="ไม่มีข้อมูล"
+          :visible-columns="visibleColumns"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -283,7 +290,23 @@ onMounted(() => {
                 </div>
                 <div v-else-if="col.name == 'point'">
                   <div>
-                    <q-rating
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(i, index) in sortedDataListCriteria"
+                        :key="index"
+                        :class="props.row.point == i.level && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="i.level"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span v-html="i.description"></span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                    <!-- <q-rating
                       v-model="props.row.point"
                       max="5"
                       size="sm"
@@ -303,7 +326,7 @@ onMounted(() => {
                           </div>
                         </q-tooltip>
                       </template>
-                    </q-rating>
+                    </q-rating> -->
                   </div>
                   <!-- <div v-else>รอ ทำ select</div> -->
                 </div>
@@ -402,4 +425,14 @@ onMounted(() => {
     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: #fff;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+}
 </style>
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index b0337f2..0ef9c19 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -4,8 +4,45 @@ import type { DataOptions } from "./interface/index/Main";
 
 export const useKpiDataStore = defineStore("KPIDate", () => {
   const tabMain = ref<string>("1");
-  const dataProfile = ref<any>(null);
+  const dataProfile = ref<any>({
+    profileId: null,
+    prefix: "",
+    rank: "",
+    firstName: "",
+    lastName: "",
+    citizenId: "",
+    position: "",
+    posMaster: null,
+    posLevelName: null,
+    posLevelRank: null,
+    posLevelId: null,
+    posTypeName: null,
+    posTypeRank: null,
+    posTypeId: null,
+    posExecutiveName: "",
+    posExecutivePriority: null,
+    posExecutiveId: null,
+    rootId: null,
+    root: "",
+    child1Id: null,
+    child1: null,
+    child2Id: null,
+    child2: null,
+    child3Id: null,
+    child3: null,
+    child4Id: null,
+    child4: null,
+    node: null,
+    nodeId: null,
+  });
+
   const dataEvaluation = ref<any>({
+    evaluationReqEdit: "NEW",
+    evaluationStatus: "NEW",
+    profileId: null,
+    evaluatorId: null,
+    commanderId: null,
+    commanderHighId: null,
     plannedPoint: 0,
     rolePoint: 0,
     specialPoint: 0,
@@ -43,12 +80,26 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
 
   function convertStatus(val: string) {
     switch (val) {
-      case "PENDING":
-        return "รอดำเนินการ";
-      case "INPROGRESS":
-        return "กําลังดำเนินการ";
-      case "DONE":
-        return "ประเมินเสร็จสิ้น";
+      case "NEW":
+        return "จัดทำข้อตกลง";
+      case "NEW_EVALUATOR":
+        return "รอผู้ประเมินตรวจสอบข้อตกลง";
+      case "NEW_COMMANDER":
+        return "รอผู้บังคับบัญชาเหนือขึ้นไปตรวจสอบข้อตกลง";
+      case "NEW_COMMANDER_HIGH":
+        return "รอผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่งตรวจสอบข้อตกลง";
+      case "APPROVE":
+        return "รายงานความก้าวหน้า";
+      case "EVALUATING":
+        return "รายงานผลสำเร็จของงาน";
+      case "EVALUATING_EVALUATOR":
+        return "รอผู้ประเมินตรวจสอบผล";
+      case "EVALUATING_COMMANDER":
+        return "รอผู้บังคับบัญชาเหนือขึ้นไปตรวจสอบผล";
+      case "EVALUATING_COMMANDER_HIGH":
+        return "รอผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่งตรวจสอบผล";
+      case "COMPLETE":
+        return "เสร็จสิ้น";
       default:
         break;
     }
@@ -182,6 +233,60 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     "blue-10",
   ]);
 
+  // ROLE & TAB
+  const rolePerson = ref<string>("USER"); //"USER" | "EVALUATOR" |  "COMMANDER", "COMMANDERHIGH"
+  const tabOpen = ref<number>(1);
+  function checkStep() {
+    const role =
+      dataEvaluation.value.profileId == dataProfile.value.profileId
+        ? "USER"
+        : dataEvaluation.value.evaluatorId == dataProfile.value.profileId
+        ? "EVALUATOR"
+        : dataEvaluation.value.commanderId == dataProfile.value.profileId
+        ? "COMMANDER"
+        : dataEvaluation.value.commanderHighId == dataProfile.value.profileId
+        ? "COMMANDERHIGH"
+        : "";
+    rolePerson.value = role;
+
+    switch (dataEvaluation.value.evaluationStatus) {
+      case "NEW" || "NEW_EVALUATOR" || "NEW_COMMANDER" || "NEW_COMMANDER_HIGH":
+        tabOpen.value = 1;
+        break;
+      case "APPROVE":
+        tabOpen.value = 2;
+        break;
+      default:
+        tabOpen.value = 3;
+        break;
+    }
+  }
+
+  // SUMMARY GENERAL CASE
+  const indicatorPercent = ref<number>(100); // รวมผลการประเมิน (ร้อยละ)
+  const indicatorPercentVal = ref<number>(0); // รวมผลการประเมิน (ร้อยละ) ที่ได้จริง
+  const indicatorScore = ref<number>(80); // สรุปผลการประเมินผลสัมฤทธิ์ของงาน ( คะแนนเต็ม indicatorScore คะแนน)
+  const indicatorScoreVal = ref<number>(0); // สรุปผลการประเมินผลสัมฤทธิ์ของงานที่ได้
+  const competencyScore = ref<number>(20); // ผลการประเมินสมรรถนะ (competencyScore คะแนน)
+  const competencyScoreVal = ref<number>(0); // ผลการประเมินสมรรถนะที่ได้กี่คะแนน
+  const devScore = ref<number>(10); // ผลการประเมินการพัฒนาตนเอง (devScore คะแนน)
+  const devScoreVal = ref<number>(0); // ผลการประเมินการพัฒนาตนเองที่ได้กี่คะแนน
+  const competencyDevScore = ref<number>(30); // สรุปผลการประเมินพฤติกรรมการปฏิบัติราชการ (สมรรถนะ+การพัฒนาตนเอง) (คะแนนเต็ม competencyDevScore คะแนน)
+  const competencyDevScoreVal = ref<number>(0); // สรุปผลการประเมินพฤติกรรมการปฏิบัติราชการ (สมรรถนะ+การพัฒนาตนเอง)ที่ได้กี่คะแนน
+
+  // SUMMARY EXCLUSIVE CASE
+  const excusiveIndicatorPercent = ref<number>(100); // รวมผลการประเมิน (ร้อยละ) แต่ละมิติต้องไม่เกิน 100%
+  const excusiveIndicator1PercentVal = ref<number>(0); // รวมผลการประเมิน (ร้อยละ) มิติที่ 1 ที่ได้จริง
+  const excusiveIndicator1Weight = ref<number>(60); // น้ำหนักของมิติที่ 1
+  const excusiveIndicator1ScoreVal = ref<number>(0); // คะแนนมิติที่ 1 ที่ได้จริง
+  const excusiveIndicator2Weight = ref<number>(20); // น้ำหนักของมิติที่ 2
+  const excusiveIndicator2PercentVal = ref<number>(0); // รวมผลการประเมิน (ร้อยละ) มิติที่ 2 ที่ได้จริง
+  const excusiveIndicator2ScoreVal = ref<number>(0); // คะแนนมิติที่ 2 ที่ได้จริง
+  const excusiveIndicatorScore = ref<number>(80); // สรุปผลการประเมินผลสัมฤทธิ์ของงาน (มิติที่ 1 + มิติที่ 2) ( คะแนนเต็ม excusiveIndicatorScore คะแนน)
+  const excusiveIndicatorScoreVal = ref<number>(0); // สรุปผลการประเมินผลสัมฤทธิ์ของงาน (มิติที่ 1 + มิติที่ 2) คะแนนที่ได้จริง
+  const excusiveCompetencyScore = ref<number>(20); // ผลการประเมินสมรรถนะ (competencyScore คะแนน)
+  const excusiveCompetencyScoreVal = ref<number>(0); // ผลการประเมินสมรรถนะที่ได้กี่คะแนน
+
   return {
     tabMain,
     dataProfile,
@@ -195,5 +300,31 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     defaultCompetencyCoreLevel,
     defaultCompetencyGroupLevel,
     ratingColors,
+    checkStep,
+    tabOpen,
+    rolePerson,
+
+    // score
+    indicatorPercent,
+    indicatorPercentVal,
+    indicatorScore,
+    indicatorScoreVal,
+    competencyScore,
+    competencyScoreVal,
+    devScore,
+    devScoreVal,
+    competencyDevScore,
+    competencyDevScoreVal,
+    excusiveCompetencyScore,
+    excusiveCompetencyScoreVal,
+    excusiveIndicatorPercent,
+    excusiveIndicator1PercentVal,
+    excusiveIndicator1Weight,
+    excusiveIndicator1ScoreVal,
+    excusiveIndicator2Weight,
+    excusiveIndicator2PercentVal,
+    excusiveIndicator2ScoreVal,
+    excusiveIndicatorScore,
+    excusiveIndicatorScoreVal,
   };
 });
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 91be026..881fcd9 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -70,6 +70,7 @@ function fetchEvaluation() {
     .get(config.API.kpiEvaluation + `/${id.value}`)
     .then((res) => {
       const data = res.data.result;
+
       store.dataEvaluation = data;
       formProfile.status = store.convertStatus(data.evaluationStatus);
       formProfile.result = store.convertResults(data.evaluationResults);
@@ -94,9 +95,11 @@ function getProfile() {
     .get(config.API.profilePosition())
     .then((res) => {
       const data = res.data.result;
+
       store.dataProfile = data;
       store.checkCompetency();
       store.checkCompetencyDefaultCompetencyLevel();
+      store.checkStep();
     })
     .catch((e) => {
       messageError($q, e);
@@ -281,10 +284,72 @@ async function clearScore() {
 
 async function getAll() {
   await fetchEvaluation();
-  await (store.dataProfile === null ? getProfile() : "");
+  await (store.dataProfile.profileId === null ? getProfile() : ""); // await getProfile();
   await getOrgOp();
 }
 
+function sendToEvaluatore() {
+  dialogConfirm(
+    $q,
+    () => {
+      if (id.value) {
+        // showLoader();
+        // http
+        //   .put(config.API.kpiEvaluationCheck + `/${id.value}`, {
+        //     evaluatorId: evaluatorId.value ? evaluatorId.value.id : null,
+        //     commanderId: commanderId.value ? commanderId.value.id : null,
+        //     commanderHighId: commanderHighId.value
+        //       ? commanderHighId.value.id
+        //       : null,
+        //   })
+        //   .then((res) => {
+        //     success($q, "บันทึกสำเร็จ");
+        //     close();
+        //   })
+        //   .catch((e) => {
+        //     messageError($q, e);
+        //   })
+        //   .finally(() => {
+        //     hideLoader();
+        //   });
+      }
+    },
+    "ยืนยันการส่งข้อตกลงให้ผู้ประเมินอนุมัติ",
+    "ต้องการยืนยันส่งข้อตกลงนี้ให้ผู้ประเมินอนุมัติใช่หรือไม่?"
+  );
+}
+
+function requireEdit() {
+  dialogConfirm(
+    $q,
+    () => {
+      if (id.value) {
+        // showLoader();
+        // http
+        //   .put(config.API.kpiEvaluationCheck + `/${id.value}`, {
+        //     evaluatorId: evaluatorId.value ? evaluatorId.value.id : null,
+        //     commanderId: commanderId.value ? commanderId.value.id : null,
+        //     commanderHighId: commanderHighId.value
+        //       ? commanderHighId.value.id
+        //       : null,
+        //   })
+        //   .then((res) => {
+        //     success($q, "บันทึกสำเร็จ");
+        //     close();
+        //   })
+        //   .catch((e) => {
+        //     messageError($q, e);
+        //   })
+        //   .finally(() => {
+        //     hideLoader();
+        //   });
+      }
+    },
+    "ยืนยันการขอแก้ไขข้อตกลง",
+    "ต้องการยืนยันการขอแก้ไขข้อตกลงนี้ใช่หรือไม่?"
+  );
+}
+
 onMounted(async () => {
   showLoader();
   await getAll();
@@ -292,6 +357,8 @@ onMounted(async () => {
 </script>
 
 <template>
+  <!-- evaluationStatus={{ store.dataEvaluation.evaluationStatus }} | tabOpen =
+  {{ store.tabOpen }} | rolePerson = {{ store.rolePerson }} | -->
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
       <div class="toptitle text-white col-12 row items-center">
@@ -335,6 +402,42 @@ onMounted(async () => {
                   }}</span>
                   <q-space />
                   <div class="q-gutter-x-sm">
+                    <q-btn
+                      v-if="
+                        store.rolePerson == 'USER' &&
+                        store.dataEvaluation.evaluationStatus == 'NEW'
+                      "
+                      :disabled="store.dataEvaluation.evaluatorId == null"
+                      unelevated
+                      round
+                      icon="mdi-send"
+                      color="grey-2"
+                      text-color="blue-6"
+                      size="md"
+                      @click="sendToEvaluatore()"
+                    >
+                      <q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="
+                        store.rolePerson == 'USER' &&
+                        store.tabOpen < 3 &&
+                        store.dataEvaluation.evaluationStatus != 'NEW' &&
+                        (store.dataEvaluation.evaluationReqEdit == null ||
+                          store.dataEvaluation.evaluationReqEdit == 'DONE')
+                      "
+                      :disabled="store.dataEvaluation.evaluatorId == null"
+                      unelevated
+                      round
+                      icon="mdi-file-edit"
+                      color="grey-2"
+                      text-color="red-6"
+                      size="md"
+                      @click="requireEdit()"
+                    >
+                      <q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
+                    </q-btn>
+
                     <!-- <q-btn
                       v-if="!isReadonly"
                       unelevated
@@ -537,7 +640,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <q-dialog v-model="modalScore" persistent>
+  <!-- <q-dialog v-model="modalScore" persistent>
     <q-card bordered style="width: 50vh">
       <q-form greedy @submit.prevent @validation-success="onSubmitScore">
         <DialogHeader tittle="แก้ไขคะแนนเต็ม" :close="clearScore" />
@@ -612,7 +715,7 @@ onMounted(async () => {
         </q-card-actions>
       </q-form>
     </q-card>
-  </q-dialog>
+  </q-dialog> -->
 </template>
 <style>
 .bg-toolbar {
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index dcc3397..97e994e 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -31,7 +31,7 @@ const visibleColumns = ref<string[]>([
   "name",
   "createdAt",
   "evaluationStatus",
-  "evaluationStatus",
+  "evaluationResults",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -65,16 +65,16 @@ const columns = ref<QTableProps["columns"]>([
     field: "evaluationStatus",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (v) => store.convertResults(v),
+    format: (v) => store.convertStatus(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "evaluationStatus",
+    name: "evaluationResults",
     align: "left",
     label: "ผลการประเมิน",
     sortable: true,
-    field: "evaluationStatus",
+    field: "evaluationResults",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format: (v) => store.convertResults(v),