diff --git a/src/modules/01_metadataNew/components/Indicators/DialogHistory.vue b/src/modules/01_metadataNew/components/Indicators/DialogHistory.vue
index 91d34c4dc..5d41a4083 100644
--- a/src/modules/01_metadataNew/components/Indicators/DialogHistory.vue
+++ b/src/modules/01_metadataNew/components/Indicators/DialogHistory.vue
@@ -3,17 +3,29 @@ import { ref } from "vue";
 import type { QTableProps } from "quasar";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-
+import { useCounterMixin } from "@/stores/mixin";
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
 const modal = defineModel<boolean>("modal", { required: true });
-const rows = ref<any[]>([]);
-const visibleColumns = ref<string[]>(["fullName"]);
+const rows = defineModel<any[]>("rows", { required: true });
+
+const visibleColumns = ref<string[]>(["createdFullName", "lastUpdatedAt"]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "fullName",
+    name: "createdFullName",
     align: "left",
     label: "ชื่อ",
     sortable: true,
-    field: "fullName",
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "เวลาที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -24,7 +36,7 @@ function close() {
 </script>
 <template>
   <q-dialog persistent v-model="modal">
-    <q-card style="min-width: 50vw">
+    <q-card style="min-width: 30vw">
       <DialogHeader tittle="ประวัติการแก้ไข" :close="close" />
       <q-separator />
       <q-card-section>
@@ -46,13 +58,15 @@ function close() {
               <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">
+                <div v-if="col.name == 'lastUpdatedAt'" class="table_ellipsis">
+                  {{ col.value ? date2Thai(col.value, false, true) : "-" }}
+                </div>
+                <div v-else class="table_ellipsis">
                   {{ col.value ? col.value : "-" }}
                 </div>
               </q-td>
diff --git a/src/modules/01_metadataNew/views/indicatorByPlan.vue b/src/modules/01_metadataNew/views/indicatorByPlan.vue
index dc3ff2b49..a2d64691e 100644
--- a/src/modules/01_metadataNew/views/indicatorByPlan.vue
+++ b/src/modules/01_metadataNew/views/indicatorByPlan.vue
@@ -13,6 +13,7 @@ import DialogHistory from "@/modules/01_metadataNew/components/Indicators/Dialog
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
+const dataHistory = ref<any[]>([]);
 const modalHistory = ref<boolean>(false);
 const isAll = ref<boolean>(false);
 const $q = useQuasar();
@@ -170,7 +171,20 @@ function clearFilter() {
  * @param id
  */
 function onClickHistory(id: string) {
-  modalHistory.value = true;
+  showLoader();
+  http
+    .get(config.API.kpiPlan + `/history/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      dataHistory.value = data;
+      modalHistory.value = true;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {
@@ -362,7 +376,6 @@ onMounted(async () => {
             <q-checkbox
               keep-color
               v-model="isAll"
-
               label="แสดงตำแหน่งทั้งหมด"
               color="primary"
               @update:model-value="fetchListProjectNew"
@@ -378,7 +391,7 @@ onMounted(async () => {
               v-model="nodeData.keyword"
               ref="filterRef"
               outlined
-              style="width:150px"
+              style="width: 150px"
               placeholder="ค้นหา"
               @keydown.enter.prevent="fetchListProjectNew"
             >
@@ -510,7 +523,7 @@ onMounted(async () => {
     </div>
   </q-card>
 
-  <DialogHistory v-model:modal="modalHistory" />
+  <DialogHistory v-model:modal="modalHistory" :rows="dataHistory" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/01_metadataNew/views/indicatorByRole.vue b/src/modules/01_metadataNew/views/indicatorByRole.vue
index 6c08428b5..b31493914 100644
--- a/src/modules/01_metadataNew/views/indicatorByRole.vue
+++ b/src/modules/01_metadataNew/views/indicatorByRole.vue
@@ -17,6 +17,7 @@ import DialogHistory from "@/modules/01_metadataNew/components/Indicators/Dialog
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
+const dataHistory = ref<any[]>([]);
 const modalHistory = ref<boolean>(false);
 const total = ref<number>();
 const $q = useQuasar();
@@ -211,7 +212,20 @@ function setModel(val: string) {
  * @param id
  */
 function onClickHistory(id: string) {
-  modalHistory.value = true;
+  showLoader();
+  http
+    .get(config.API.kpiRoleMainList + `/history/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      dataHistory.value = data;
+      modalHistory.value = true;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 onMounted(async () => {
@@ -275,7 +289,7 @@ onMounted(async () => {
       </div>
       <div class="row q-gutter-sm">
         <q-select
-        v-if="$q.screen.gt.md"
+          v-if="$q.screen.gt.md"
           dense
           :model-value="formFilter.position"
           label="ตำแหน่ง"
@@ -386,18 +400,18 @@ onMounted(async () => {
           @update:model-value="fetchList"
           style="width: 160px"
         >
-        <template v-if="formFilter.round" v-slot:append>
+          <template v-if="formFilter.round" v-slot:append>
             <q-icon
               name="cancel"
               @click.stop.prevent="(formFilter.round = ''), fetchList()"
               class="cursor-pointer"
             />
           </template>
-      </q-select>
+        </q-select>
       </div>
 
       <q-btn
-      v-if="$q.screen.gt.md"
+        v-if="$q.screen.gt.md"
         flat
         round
         dense
@@ -570,7 +584,7 @@ onMounted(async () => {
     </div>
   </q-card>
 
-  <DialogHistory v-model:modal="modalHistory" />
+  <DialogHistory v-model:modal="modalHistory" :rows="dataHistory" />
 </template>
 
 <style scoped></style>