diff --git a/src/modules/14_KPI/components/DialogHistory.vue b/src/modules/14_KPI/components/DialogHistory.vue
new file mode 100644
index 000000000..485d0b4ce
--- /dev/null
+++ b/src/modules/14_KPI/components/DialogHistory.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { QTableProps } from "quasar";
+
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = ref<any[]>([]);
+const visibleColumns = ref<string[]>(["fullName"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "fullName",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+function close() {
+  modal.value = false;
+}
+</script>
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card style="min-width: 50vw">
+      <DialogHeader tittle="ประวัติการแก้ไข" :close="close" />
+      <q-separator />
+      <q-card-section>
+        <d-table
+          for="table"
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          row-key="id"
+          flat
+          bordered
+          dense
+          class="custom-header-table"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+        >
+          <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.name" :props="props">
+                <div class="table_ellipsis">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
index 3e68d2140..11fda18d8 100644
--- a/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/14_KPI/components/indicatorByPlan/IndicatorByPlan.vue
@@ -28,14 +28,15 @@ const {
 } = mixin;
 
 const id = ref<string>(route.params.id ? route.params.id.toLocaleString() : "");
+const editCheck = ref<boolean>(route.params.id ? true : false);
 
 /**form ตัวชี้วัดตามแผนฯ*/
 const planData = reactive({
-  kpiPeriodId: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
+  period: "", //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
   including: "", //รหัสตัวชี้วัด
   includingName: "", //ชื่อตัวชี้วัด
   target: "", //ค่าเป้าหมาย
-  unit: null, //หน่วยนับ
+  unit: "", //หน่วยนับ
   weight: null, //น้ำหนัก
   achievement1: "", //ผลสำเร็จของงาน 1
   achievement2: "", //ผลสำเร็จของงาน 2
@@ -49,10 +50,14 @@ const planData = reactive({
   orgRevisionId: "", //RevisionId หน่วยงาน
   strategy: null, //ระดับยุทธศาสตร์
   strategyId: "", //id ยุทธศาสตร์
+  documentInfoEvidence: "", //ข้อมูลเอกสารหลักฐาน
 });
 
-const year = ref<number>(0); // ปีงยประมาณ
-const roundOp = ref<DataOption[]>([]);
+const year = ref<number | null>(0); // ปีงยประมาณ
+const roundOp = ref<DataOption[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
 
 const nodeplan = ref<any>([]);
 const nodeAgency = ref<any>([]);
@@ -64,36 +69,6 @@ const expandedAgency = ref<string[]>([]);
 const editStatus = ref<boolean>(false);
 const inputRef = ref<any>(null);
 
-/** functiopn fetch รอบการประเมิน*/
-function fetchRoundOption(isId: number | null = null) {
-  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;
-
-      if (isId) {
-        planData.kpiPeriodId = "";
-        inputRef.value.resetValidation();
-      }
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
-}
-
 /** function fetch หาโครงสร้างที่ใช้งาน*/
 function fetchOrganizationActive() {
   http
@@ -147,7 +122,7 @@ function fetchDataById(id: string) {
     .then((res) => {
       const data = res.data.result;
       year.value = data.year;
-      planData.kpiPeriodId = data.kpiPeriodId;
+      planData.period = data.round;
       planData.including = data.including;
       planData.includingName = data.includingName;
       planData.target = data.target;
@@ -189,8 +164,6 @@ function fetchDataById(id: string) {
       expandedPlan.value = arrayexpandedPlan
         .filter((e) => e !== null)
         .slice(0, -1);
-
-      fetchRoundOption();
     })
     .catch((err) => {
       messageError($q, err);
@@ -235,6 +208,27 @@ function onSubmit() {
     dialogConfirm(
       $q,
       async () => {
+        const body = {
+          year: year.value == 0 ? null : year.value,
+          period: planData.period,
+          includingName: planData.includingName,
+          target: planData.target,
+          unit: planData.unit,
+          weight: planData.weight,
+          achievement1: planData.achievement1,
+          achievement2: planData.achievement2,
+          achievement3: planData.achievement3,
+          achievement4: planData.achievement4,
+          achievement5: planData.achievement5,
+          meaning: planData.meaning,
+          formula: planData.formula,
+          node: planData.node,
+          nodeId: planData.nodeId,
+          orgRevisionId: planData.orgRevisionId,
+          strategy: planData.strategy,
+          strategyId: planData.strategyId,
+          documentInfoEvidence: planData.documentInfoEvidence,
+        };
         showLoader();
         // editStatus.value ? editData(id.value) : addData();
         try {
@@ -242,7 +236,7 @@ function onSubmit() {
             ? config.API.kpiPlanById(id.value)
             : config.API.kpiPlan;
           const method = editStatus.value ? "put" : "post";
-          const res = await http[method](url, planData);
+          const res = await http[method](url, body);
           success($q, "บันทึกข้อมูลสำเร็จ");
           editStatus.value
             ? fetchDataById(id.value)
@@ -272,6 +266,29 @@ onMounted(() => {
   <q-form @submit.prevent greedy @validation-success="onSubmit()">
     <div>
       <div class="row q-col-gutter-md q-pa-md">
+        <div class="col-2" v-if="editCheck">
+          <q-input
+            outlined
+            v-model="planData.including"
+            label="ลำดับ/รหัสตัวชี้วัด"
+            bg-color="white"
+            readonly
+            dense
+            class="inputgreen"
+          />
+        </div>
+        <div :class="`${editCheck ? 'col-6' : 'col-8'}`">
+          <q-input
+            outlined
+            v-model="planData.includingName"
+            label="ชื่อตัวชี้วัด"
+            bg-color="white"
+            dense
+            class="inputgreen"
+            :rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
+            hide-bottom-space
+          />
+        </div>
         <div class="col-2">
           <datepicker
             menu-class-name="modalfix"
@@ -280,7 +297,7 @@ onMounted(() => {
             autoApply
             year-picker
             :enableTimePicker="false"
-            @update:modelValue="fetchRoundOption"
+            @update:modelValue="planData.period = ''"
           >
             <template #year="{ year }">{{ year + 543 }}</template>
             <template #year-overlay-value="{ value }">{{
@@ -303,6 +320,17 @@ onMounted(() => {
                   >
                   </q-icon>
                 </template>
+                <template v-slot:append>
+                  <q-icon
+                    v-if="year"
+                    name="cancel"
+                    class="cursor-pointer"
+                    @click.stop.prevent="
+                      year = 0;
+                      planData.period = '';
+                    "
+                  />
+                </template>
               </q-input>
             </template>
           </datepicker>
@@ -310,47 +338,17 @@ onMounted(() => {
         <div class="col-2">
           <q-select
             ref="inputRef"
-            :readonly="roundOp.length === 0"
+            :readonly="year == 0"
             dense
             outlined
-            v-model="planData.kpiPeriodId"
+            v-model="planData.period"
             :options="roundOp"
             label="รอบการประเมิน"
-            hide-bottom-space
             option-label="name"
             option-value="id"
             map-options
             emit-value
-            lazy-rules
             class="inputgreen"
-            :rules="[
-                (val:string) =>
-                  !!val || `${'กรุณาเลือกรอบการประเมิน'}`,
-              ]"
-          />
-        </div>
-        <div class="col-2">
-          <q-input
-            outlined
-            v-model="planData.including"
-            label="รหัสตัวชี้วัด"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-6">
-          <q-input
-            outlined
-            v-model="planData.includingName"
-            label="ชื่อตัวชี้วัด"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
-            hide-bottom-space
           />
         </div>
         <div class="col-4">
@@ -371,8 +369,8 @@ onMounted(() => {
             v-model="planData.unit"
             label="หน่วยนับ"
             bg-color="white"
-            type="number"
             dense
+            lazy-rules
             class="inputgreen"
             :rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
             hide-bottom-space
@@ -644,6 +642,16 @@ onMounted(() => {
             </q-card-section>
           </q-card>
         </div>
+        <div class="col-12">
+          <q-input
+            class="inputgreen"
+            v-model="planData.documentInfoEvidence"
+            label="ข้อมูลเอกสารหลักฐาน"
+            outlined
+            dense
+            type="textarea"
+          ></q-input>
+        </div>
       </div>
       <q-separator color="grey-4" />
     </div>
diff --git a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
index faacbbbda..f869a39d2 100644
--- a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
+++ b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
@@ -45,6 +45,7 @@ const form = reactive<FormDataRole>({
   weight: "", //น้ำหนัก
   meaning: "", //นิยามหรือความหมาย
   formula: "", //สูตรคำนวณ
+  documentInfoEvidence: "", //ข้อมูลเอกสารหลักฐาน
 
   node: null,
   nodeId: null,
@@ -71,7 +72,10 @@ const positionOp = ref<DataOption[]>([]);
 const positionMainOp = ref<DataOption[]>([]);
 
 /** Option  รอบการประเมิน*/
-const roundOp = ref<DataOption[]>([]);
+const roundOp = ref<DataOption[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
 
 /**
  * function ต้นหาข้อมูลของ Option
@@ -121,9 +125,9 @@ function onSubmit() {
     : config.API.kpiRoleMainList;
 
   const body = {
+    year: form.year == 0 ? null:form.year,
     position: form.position, //ตำแหน่ง
-    kpiPeriodId: form.round, //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
-    including: form.including, //รหัสตัวชี้วัด
+    period: form.round, //รอบการประเมิน(เมษา->APR, ตุลา->OCT)
     includingName: form.includingName, //ชื่อตัวชี้วัด
     target: form.target, //ค่าเป้าหมาย
     unit: form.unit, //หน่วยนับ
@@ -135,6 +139,7 @@ function onSubmit() {
     achievement5: formScore.score5, //ผลสำเร็จของงาน 5
     meaning: form.meaning, //นิยามหรือความหมาย
     formula: form.formula, //สูตรคำนวณ
+    documentInfoEvidence: form.documentInfoEvidence, //ข้อมูลเอกสารหลักฐาน
 
     node: form.node, //ระดับหน่วยงาน
     nodeId: form.nodeId, //id หน่วยงาน
@@ -171,7 +176,7 @@ function getDetail() {
       const data = res.data.result;
       form.position = data.position;
       form.year = data.year == null ? 0 : data.year;
-      form.round = data.kpiPeriodId;
+      form.round = data.round;
       form.including = data.including;
       form.includingName = data.includingName;
       form.target = data.target;
@@ -244,21 +249,6 @@ function updateSelected(data: any) {
   form.orgRevisionId = data.orgRevisionId;
 }
 
-function getRound() {
-  showLoader();
-  http
-    .get(config.API.kpiPeriod + `?year=${form.year}`)
-    .then((res) => {
-      const data = res.data.result.data;
-      roundOp.value = data.map((item: any) => ({
-        id: item.id,
-        name: statusTothai(item.durationKPI),
-      }));
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
 
 function statusTothai(val: string) {
   switch (val) {
@@ -284,7 +274,6 @@ function setModel(val: string) {
 onMounted(() => {
   fetchActive();
   getOptions();
-  getRound();
   if (id.value !== "") {
     getDetail();
   }
@@ -345,7 +334,7 @@ onMounted(() => {
               autoApply
               year-picker
               :enableTimePicker="false"
-              @update:model-value="(form.round = ''), getRound()"
+              @update:model-value="form.round = ''"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
@@ -355,8 +344,6 @@ onMounted(() => {
                 <q-input
                   dense
                   class="inputgreen"
-                  :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
-                  hide-bottom-space
                   outlined
                   :model-value="
                     form.year === 0 ? null : Number(form.year) + 543
@@ -371,12 +358,24 @@ onMounted(() => {
                     >
                     </q-icon>
                   </template>
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="form.year"
+                      name="cancel"
+                      class="cursor-pointer"
+                      @click.stop.prevent="
+                        form.year = 0;
+                        form.round = '';
+                      "
+                    />
+                  </template>
                 </q-input>
               </template>
             </datepicker>
           </div>
           <div class="col-2">
             <q-select
+              :readonly="form.year == 0"
               dense
               outlined
               v-model="form.round"
@@ -388,21 +387,16 @@ onMounted(() => {
               input-class="text-red"
               label="รอบการประเมิน"
               class="inputgreen"
-              lazy-rules
-              :rules="[(val:string) => !!val || `${'กรุณาเลือกรอบการประเมิน'}`,]"
-              hide-bottom-space
             />
           </div>
-          <div class="col-2">
+          <div class="col-2" v-if="id">
             <q-input
-              label="รหัสตัวชี้วัด"
+              label="ลำดับ/รหัสตัวชี้วัด"
               v-model="form.including"
               outlined
+              readonly
               dense
               class="inputgreen"
-              lazy-rules
-              :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสตัวชี้วัด'}`,]"
-              hide-bottom-space
             />
           </div>
           <div class="col-4">
@@ -632,6 +626,16 @@ onMounted(() => {
               type="textarea"
             />
           </div>
+          <div class="col-12">
+          <q-input
+            class="inputgreen"
+            v-model="form.documentInfoEvidence"
+            label="ข้อมูลเอกสารหลักฐาน"
+            outlined
+            dense
+            type="textarea"
+          ></q-input>
+        </div>
         </div>
       </q-card-section>
       <q-separator />
diff --git a/src/modules/14_KPI/interface/request/Main.ts b/src/modules/14_KPI/interface/request/Main.ts
index c8d8f976a..e578c5180 100644
--- a/src/modules/14_KPI/interface/request/Main.ts
+++ b/src/modules/14_KPI/interface/request/Main.ts
@@ -36,6 +36,7 @@ interface FormDataRole {
   weight: string;
   meaning: string;
   formula: string;
+  documentInfoEvidence: string;
   node: number | null;
   nodeId: string | null;
   orgRevisionId: string | null;
@@ -48,6 +49,15 @@ interface NewPagination {
   sortBy: string;
 }
 
+interface FormListMainByRole {
+  page:number
+  pageSize:number
+  position:string
+  round:string
+  keyword:string
+  year:number|null
+}
+
 interface ListGroup{
   id:string
   nameGroupKPI:string
@@ -66,5 +76,6 @@ export type {
   FormDataRole,
   NewPagination,
   FormQueryCapacity,
-  ListGroup
+  ListGroup,
+  FormListMainByRole
 };
diff --git a/src/modules/14_KPI/views/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
index b263184df..3bfc6252b 100644
--- a/src/modules/14_KPI/views/indicatorByPlan.vue
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -4,6 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
+import DialogHistory from '@/modules/14_KPI/components/DialogHistory.vue'
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -11,6 +12,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** use*/
+const modalHistory = ref<boolean>(false)
+const isAll = ref<boolean>(false);
 const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, dialogRemove, success, messageError } =
@@ -22,7 +25,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "including",
     align: "left",
-    label: "รหัสตัวชี้วัด",
+    label: "ลำดับ/รหัสตัวชี้วัด",
     sortable: true,
     field: "including",
     headerStyle: "font-size: 14px",
@@ -43,11 +46,14 @@ const expanded = ref<any>([]);
 const filterMain = ref<string>("");
 const visibleColumns = ref<string[]>(["including", "includingName"]);
 
-const roundOp = ref<DataOption[]>([]);
+const roundOp = ref<DataOption[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
 
 const totalList = ref<number>(1);
 
-const year = ref<number>(new Date().getFullYear());
+const year = ref<number|null>(new Date().getFullYear());
 const nodeData = reactive<any>({
   page: 1,
   pageSize: 10,
@@ -57,41 +63,12 @@ const nodeData = reactive<any>({
   keyword: "",
 });
 
-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;
-      nodeData.round = "";
-      fetchListProjectNew();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
 function fetchList() {
   showLoader();
   http
     .get(
       config.API.kpiPlan +
-        `?page=${nodeData.page}&pageSize=${nodeData.pageSize}&kpiPeriodId=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}`
+        `?page=${nodeData.page}&pageSize=${nodeData.pageSize}&period=${nodeData.round}&nodeId=${nodeData.nodeId}&node=${nodeData.node}&keyword=${nodeData.keyword}&year=${year.value}&isAll=${isAll.value}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -178,12 +155,20 @@ async function deleteData(idData: string) {
 function clearFilter() {
   nodeData.keyword = "";
   fetchActive();
-  fetchRoundOption();
+  fetchListProjectNew();
 }
-onMounted(() => {
-  fetchActive();
-  fetchRoundOption();
-  // fetchData();
+
+/**
+ * เปิด dialog history
+ * @param id 
+ */
+function onClickHistory(id:string){
+  modalHistory.value = true
+}
+
+onMounted(async () => {
+  await fetchActive();
+  await fetchList();
 });
 </script>
 
@@ -270,7 +255,7 @@ onMounted(() => {
               year-picker
               :enableTimePicker="false"
               style="width: 150px"
-              @update:model-value="fetchRoundOption"
+              @update:model-value="fetchListProjectNew"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
@@ -281,7 +266,7 @@ onMounted(() => {
                   class="inputgreen"
                   dense
                   outlined
-                  :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                  :model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
                   :label="`${'ปีงบประมาณ'}`"
                 >
                   <template v-slot:prepend>
@@ -292,6 +277,15 @@ onMounted(() => {
                     >
                     </q-icon>
                   </template>
+                  <template v-if="year" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="
+                        (year = null), (nodeData.page = 1), fetchListProjectNew()
+                      "
+                      class="cursor-pointer"
+                    />
+                  </template>
                 </q-input>
               </template>
             </datepicker>
@@ -323,7 +317,20 @@ onMounted(() => {
             </q-toolbar-title>
           </div>
           <q-space />
+
           <div class="row q-gutter-sm">
+            <q-checkbox
+              keep-color
+              v-model="isAll"
+              label="แสดงตำแหน่งทั้งหมด"
+              color="primary"
+              @update:model-value="fetchListProjectNew"
+            >
+              <q-tooltip
+                >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+              >
+            </q-checkbox>
+
             <q-input
               class="inputgreen"
               standout
@@ -367,11 +374,12 @@ onMounted(() => {
             ref="table"
             :columns="columns"
             :rows="rows"
-            row-key="subject"
+            row-key="id"
             flat
             bordered
             dense
             class="custom-header-table"
+            :rows-per-page-options="[10, 25, 50, 100]"
             :visible-columns="visibleColumns"
           >
             <template v-slot:header="props">
@@ -389,29 +397,66 @@ onMounted(() => {
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
-                <q-td>
+                <q-td auto-width>
                   <q-btn
-                    color="primary"
                     flat
-                    dense
                     round
-                    class="q-mr-xs"
+                    color="grey"
+                    @click.stop
                     size="14px"
-                    icon="mdi-pencil-outline"
-                    clickable
-                    @click="onClickAddOrView(true, props.row.id)"
+                    icon="more_vert"
                   >
-                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    flat
-                    round
-                    icon="delete"
-                    color="red"
-                    @click.stop.pervent="deleteData(props.row.id)"
-                  >
-                    <q-tooltip>ลบข้อมูล </q-tooltip>
+                    <q-menu>
+                      <q-list style="min-width: 180px">
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="onClickAddOrView(true, props.row.id)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                            <q-icon color="primary" size="xs" name="mdi-pencil-outline" />
+                          </q-item-section>
+                          <q-item-section>แก้ไขข้อมูล</q-item-section>
+                        </q-item>
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click="onClickHistory(props.row.id)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-tooltip>ประวัติการแก้ไข</q-tooltip>
+                            <q-icon color="info" size="xs" name="mdi-history" />
+                          </q-item-section>
+                          <q-item-section>ประวัติการแก้ไข</q-item-section>
+                        </q-item>
+                        <q-item
+                          clickable
+                          v-close-popup
+                          @click.stop.pervent="deleteData(props.row.id)"
+                        >
+                          <q-item-section
+                            style="min-width: 0px"
+                            avatar
+                            class="q-py-sm"
+                          >
+                            <q-tooltip>ลบข้อมูล</q-tooltip>
+                            <q-icon color="red" size="xs" name="mdi-delete" />
+                          </q-item-section>
+                          <q-item-section>ลบข้อมูล</q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-menu>
                   </q-btn>
+
                 </q-td>
               </q-tr>
             </template>
@@ -420,6 +465,11 @@ onMounted(() => {
       </div>
     </div>
   </q-card>
+
+
+  <DialogHistory
+  v-model:modal="modalHistory"
+  />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
index 48a7febca..8f85e14ba 100644
--- a/src/modules/14_KPI/views/indicatorByRole.vue
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -7,10 +7,14 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { NewPagination } from "@/modules/14_KPI/interface/request/Main";
+import type {
+  NewPagination,
+  FormListMainByRole,
+} from "@/modules/14_KPI/interface/request/Main";
 import type { DataOption } from "@/modules/14_KPI/interface/index/Main";
-
+import DialogHistory from "@/modules/14_KPI/components/DialogHistory.vue";
 /** use*/
+const modalHistory = ref<boolean>(false);
 const total = ref<number>();
 const $q = useQuasar();
 const router = useRouter();
@@ -56,7 +60,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["including", "includingName"]);
 
-const formFilter = reactive({
+const formFilter = reactive<FormListMainByRole>({
   page: 1,
   pageSize: 10,
   position: "",
@@ -70,13 +74,16 @@ const pagination = ref({
 });
 
 /** Option  รอบการประเมิน*/
-const roundOp = ref<DataOption[]>([]);
+const roundOp = ref<DataOption[]>([
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
 
 function fetchList() {
   http
     .get(
       config.API.kpiRoleMainList +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&kpiPeriodId=${formFilter.round}&position=${formFilter.position}&keyword=${formFilter.keyword}`
+        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&period=${formFilter.round}&position=${formFilter.position}&keyword=${formFilter.keyword}&year=${formFilter.year}`
     )
     .then((res) => {
       const data = res.data.result.data;
@@ -172,28 +179,6 @@ function getOptions() {
     });
 }
 
-function getRound() {
-  showLoader();
-  http
-    .get(
-      config.API.kpiPeriod +
-        `?page=${formFilter.page}&pageSize=${formFilter.pageSize}&keyword=${formFilter.keyword}&year=${formFilter.year}`
-    )
-    .then((res) => {
-      const data = res.data.result.data;
-      roundOp.value = data.map((item: any) => ({
-        id: item.id,
-        name: statusTothai(item.durationKPI),
-      }));
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 function statusTothai(val: string) {
   switch (val) {
     case "SPECIAL":
@@ -211,9 +196,16 @@ function setModel(val: string) {
   formFilter.position = val;
 }
 
+/**
+ * เปิด dialog history
+ * @param id
+ */
+function onClickHistory(id: string) {
+  modalHistory.value = true;
+}
+
 onMounted(async () => {
   await getOptions();
-  await getRound();
   await fetchList();
 });
 </script>
@@ -281,10 +273,7 @@ onMounted(async () => {
           year-picker
           :enableTimePicker="false"
           @update:model-value="
-            (formFilter.page = 1),
-              (formFilter.round = ''),
-              getRound(),
-              fetchList()
+            (formFilter.page = 1), (formFilter.round = ''), fetchList()
           "
         >
           <template #year="{ year }">{{ year + 543 }}</template>
@@ -297,7 +286,7 @@ onMounted(async () => {
               outlined
               class="inputgreen"
               :model-value="
-                formFilter.year === 0
+                formFilter.year === null
                   ? 'ทั้งหมด'
                   : Number(formFilter.year) + 543
               "
@@ -311,15 +300,15 @@ onMounted(async () => {
                 >
                 </q-icon>
               </template>
-              <!-- <template v-if="formFilter.year" v-slot:append>
+              <template v-if="formFilter.year" v-slot:append>
                 <q-icon
                   name="cancel"
                   @click.stop.prevent="
-                    (formFilter.year = 0), (formFilter.page = 1), getRound(),fetchList()
+                    (formFilter.year = null), (formFilter.page = 1), fetchList()
                   "
                   class="cursor-pointer"
                 />
-              </template> -->
+              </template>
             </q-input>
           </template>
         </datepicker>
@@ -443,24 +432,68 @@ onMounted(async () => {
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
-            <q-td>
+            <q-td auto-width>
               <q-btn
                 flat
                 round
-                icon="edit"
-                color="edit"
-                @click.stop.pervent="onClickAddOrView(true, props.row.id)"
+                color="grey"
+                @click.stop
+                size="14px"
+                icon="more_vert"
               >
-                <q-tooltip>แก้ไข </q-tooltip>
-              </q-btn>
-              <q-btn
-                flat
-                round
-                icon="delete"
-                color="red"
-                @click.stop.pervent="onClickDelete(props.row.id)"
-              >
-                <q-tooltip>ลบข้อมูล </q-tooltip>
+                <q-menu>
+                  <q-list style="min-width: 180px">
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click.stop.pervent="onClickAddOrView(true, props.row.id)"
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                        <q-icon
+                          color="primary"
+                          size="xs"
+                          name="mdi-pencil-outline"
+                        />
+                      </q-item-section>
+                      <q-item-section>แก้ไขข้อมูล</q-item-section>
+                    </q-item>
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="onClickHistory(props.row.id)"
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-tooltip>ประวัติการแก้ไข</q-tooltip>
+                        <q-icon color="info" size="xs" name="mdi-history" />
+                      </q-item-section>
+                      <q-item-section>ประวัติการแก้ไข</q-item-section>
+                    </q-item>
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click.stop.pervent="onClickDelete(props.row.id)"
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-tooltip>ลบข้อมูล</q-tooltip>
+                        <q-icon color="red" size="xs" name="mdi-delete" />
+                      </q-item-section>
+                      <q-item-section>ลบข้อมูล</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
               </q-btn>
             </q-td>
           </q-tr>
@@ -468,6 +501,8 @@ onMounted(async () => {
       </d-table>
     </div>
   </q-card>
+
+  <DialogHistory v-model:modal="modalHistory" />
 </template>
 
 <style scoped></style>