diff --git a/src/modules/02_organization/components/StructureMain.vue b/src/modules/02_organization/components/StructureMain.vue
index d221ef2d5..375cc20ac 100644
--- a/src/modules/02_organization/components/StructureMain.vue
+++ b/src/modules/02_organization/components/StructureMain.vue
@@ -46,8 +46,6 @@ async function fetchStructChart(
   type: string,
   status: boolean = false
 ) {
-  console.log(status);
-
   showLoader();
   await http
     .get(config.API.orgStructChart(id, type))
@@ -70,58 +68,11 @@ async function fetchStructChart(
     });
 }
 
-/**
- * อ่าน Root ของข้อมูลทั้งหมดจาก ​​API ต้องทำเป็นอันดับแรก เพื่อจะได้รู้รากของข้อมูล
- */
-// const fetchTreeRoot = async () => {
-//   showLoader();
-//   let urlRequest = config.API.chartGetTreeRoot;
-//   await http
-//     .get(urlRequest)
-//     .then((response) => {
-//       if (response.data.result.length > 0) {
-//         rootOrgID.value = response.data.result[0].organizationId;
-//       }
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
-/**
- * อ่านข้อมูล organization id ปัจจุบันจาก API ข้อมูลที่ได้เอามาสร้าง Structure Chart
- */
-// const fetchStructChart = async () => {
-//   showLoader();
-//   let urlRequest = config.API.chartGetStructure(rootOrgID.value);
-//   await http
-//     .get(urlRequest)
-//     .then((response) => {
-//       if (response.data.result.length > 0) {
-//         dataSource.value = response.data.result[0];
-//         if (dataSourceLock.value === undefined)
-//           dataSourceLock.value = dataSource.value;
-//         breadcrumbsGen();
-//       }
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     })
-//     .finally(() => {
-//       hideLoader();
-//     });
-// };
-
 /**
  * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
  * @param data
  */
 const refreshChart = async (data: any, type: number) => {
-  console.log(data, type);
-
   if (data.value === undefined) {
     fetchStructChart(data, type.toString());
     rootOrgID.value = data;
diff --git a/src/modules/02_organization/components/StructureOrgMain.vue b/src/modules/02_organization/components/StructureOrgMain.vue
new file mode 100644
index 000000000..9b6a7245f
--- /dev/null
+++ b/src/modules/02_organization/components/StructureOrgMain.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { OrgChart } from "bma-org-chart";
+import "bma-org-chart/org-chart.css";
+import { useCounterMixin } from "@/stores/mixin";
+
+import chartData from "@/assets/orgChartData";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+const $q = useQuasar(); // show dialog
+
+const dataSource = ref(chartData);
+// const dataSource = ref() // ข้อมูล Chart
+
+const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
+const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
+const chartRef = ref(); // อ้างอิงไปที่ตัว chart
+const savePNG = () => {
+  chartRef.value.savePNG();
+};
+const savePDF = () => {
+  chartRef.value.savePDF();
+};
+
+onMounted(async () => {
+  await fetchTreeRoot();
+  await fetchOrgChart();
+});
+
+/**
+ * อ่าน Root ของข้อมูลทั้งหมดก่อน
+ */
+const fetchTreeRoot = async () => {
+  showLoader();
+  let urlRequest = config.API.chartGetTreeRoot;
+  await http
+    .get(urlRequest)
+    .then((response) => {
+      if (response.data.result.length > 0) {
+        rootOrgID.value = response.data.result[0].organizationId;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const fetchOrgChart = async () => {
+  showLoader();
+  let urlRequest = config.API.chartGetOrg(rootOrgID.value);
+  await http
+    .get(urlRequest)
+    .then((response) => {
+      if (response.data.result.length > 0) {
+        dataSource.value = response.data.result[0];
+        if (dataSourceLock.value === undefined)
+          dataSourceLock.value = dataSource.value;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+/**
+ * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
+ * @param data
+ */
+const refreshChart = async (data: any) => {
+  if (data.value !== undefined) rootOrgID.value = data.value;
+  else rootOrgID.value = data;
+  if (rootOrgID.value !== 0) await fetchOrgChart();
+  if (data.value !== undefined) data.value = 0;
+};
+</script>
+
+<template>
+  <!-- <div class="toptitle text-dark col-12 row items-center">แผนภูมิองค์กร</div> -->
+  <div class="text-dark">
+    <q-card flat bordered class="col-12 q-mt-sm">
+      <div class="q-pa-sm">
+        <q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
+          <q-tooltip> ดาวน์โหลด PNG </q-tooltip>
+        </q-btn>
+        <q-btn
+          flat
+          round
+          color="red-7"
+          @click="savePDF()"
+          icon="mdi-file-pdf-box"
+        >
+          <q-tooltip> ดาวน์โหลด PDF </q-tooltip>
+        </q-btn>
+      </div>
+      <q-separator />
+      <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
+        <OrgChart
+          style="height: 70vh"
+          ref="chartRef"
+          class="org"
+          :dataSource="dataSource"
+          @onElementClick="refreshChart"
+        />
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<style>
+.org .section-list {
+  padding: 15px !important;
+}
+
+.org .section-list .column-content .header {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 500 !important;
+}
+.org .section-list .column-content .subheader {
+  font-weight: 500 !important;
+}
+
+.org .section-list .column-content .caption {
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  font-weight: 400 !important;
+}
+
+.org .element-container .column-content p {
+  padding-top: 3px !important;
+}
+
+.org .element-container .column-side .side-button {
+  background-size: 14px;
+}
+</style>
diff --git a/src/modules/02_organization/views/main.vue b/src/modules/02_organization/views/main.vue
index 1824a137d..40056bae8 100644
--- a/src/modules/02_organization/views/main.vue
+++ b/src/modules/02_organization/views/main.vue
@@ -16,6 +16,7 @@ import type { OrgRevision } from "@/modules/02_organization/interface/response/o
  */
 import TreeView from "@/modules/02_organization/components/TreeView.vue";
 import StructureView from "@/modules/02_organization/components/StructureMain.vue";
+import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
 import DialogFormNewStructure from "@/modules/02_organization/components/DialogNewStructure.vue";
 import DialogDateTime from "@/modules/02_organization/components/DialogFormDateTime.vue";
 
@@ -323,6 +324,14 @@ onMounted(async () => {
               :color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
               @click="store.statusView = 'tree'"
             />
+            <q-separator inset vertical />
+            <q-btn
+              flat
+              dense
+              icon="mdi-account-group"
+              :color="store.statusView === 'org' ? 'grey-7' : 'grey-4'"
+              @click="store.statusView = 'org'"
+            />
           </q-toolbar>
         </q-card-section>
         <q-separator />
@@ -339,6 +348,10 @@ onMounted(async () => {
             <q-tab-panel name="tree" style="padding: 0px">
               <StructureView v-if="store.statusView === 'tree'" />
             </q-tab-panel>
+
+            <q-tab-panel name="org" style="padding: 0px">
+              <StructureOrgMain v-if="store.statusView === 'org'" />
+            </q-tab-panel>
           </q-tab-panels>
         </q-card-section>
       </q-card>
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
index 2415d54ec..de3d93189 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { checkPermission } from "@/utils/permissions";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
@@ -442,17 +442,27 @@ onMounted(async () => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
+            color="deep-purple"
+            icon="mdi-history"
+            @click="
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
+            "
+          >
+            <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
             clickable
             @click="
               () => {
@@ -462,32 +472,6 @@ onMounted(async () => {
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-history"
-            @click="
-              () => (fetchHistoryData(props.row.id), (historyDialog = true))
-            "
-          >
-            <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
-          </q-btn>
-          <!-- <q-btn
-            color="red"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-delete"
-            clickable
-            @click.stop="deleteData(props.row.id)"
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn> -->
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div>
@@ -503,27 +487,26 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
-              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              color="primary"
-              icon="edit"
-              @click="editForm(props.row)"
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              color="info"
+              color="deep-purple"
               icon="mdi-history"
-              size="14px"
               @click="
                 () => (fetchHistoryData(props.row.id), (historyDialog = true))
               "
             >
               <q-tooltip>ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click="editForm(props.row)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <q-list>
@@ -764,7 +747,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
index 448a1b2e6..5439f87d3 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
@@ -600,18 +600,27 @@ onMounted(async () => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
-            color="primary"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            icon="mdi-pencil-outline"
-            clickable
+            color="deep-purple"
+            icon="mdi-history"
+            @click="
+              () => (fetchHistoryData(props.row.id), (historyDialog = true))
+            "
+          >
+            <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
             @click="
               () => {
                 editForm(props.row);
@@ -620,19 +629,6 @@ onMounted(async () => {
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-history"
-            @click="
-              () => (fetchHistoryData(props.row.id), (historyDialog = true))
-            "
-          >
-            <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
-          </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div>
@@ -648,28 +644,26 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions align="right" class="bg-grey-3">
             <q-btn
-              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              size="14px"
-              color="primary"
-              icon="mdi-pencil-outline"
-              @click="editForm(props.row)"
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              size="14px"
-              color="info"
-              icon="history"
+              color="deep-purple"
+              icon="mdi-history"
               @click="
                 () => (fetchHistoryData(props.row.id), (historyDialog = true))
               "
             >
               <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click="editForm(props.row)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <q-list>
@@ -1139,7 +1133,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
index f3546bcfa..da6baa35b 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@@ -715,39 +715,32 @@ onMounted(async () => {
     </template>
 
     <template v-slot:body="props" v-if="modeView === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            color="primary"
-            icon="mdi-pencil-outline"
-            @click="onClickOpenDialog(true, props.row)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            flat
-            dense
-            round
-            size="14px"
-            color="info"
+            color="deep-purple"
             icon="mdi-history"
             @click="clickHistory(props.row)"
           >
             <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
           </q-btn>
+
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click="onClickOpenDialog(true, props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
-        <q-td
-          v-for="col in props.cols"
-          class="cursor-pointer"
-          :key="col.name"
-          :props="props"
-        >
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div class="table_ellipsis">
             {{ col.value ? col.value : "-" }}
           </div>
@@ -760,24 +753,24 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
-              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              color="primary"
-              icon="mdi-pencil-outline"
-              @click="onClickOpenDialog(true, props.row)"
-            >
-              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              color="info"
+              color="deep-purple"
               icon="mdi-history"
               @click="clickHistory(props.row)"
             >
               <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click="onClickOpenDialog(true, props.row)"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <div>
@@ -1189,7 +1182,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
index 551a80e72..e3f32e15b 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
@@ -448,36 +448,28 @@ onMounted(async () => {
       <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            color="primary"
-            icon="mdi-pencil-outline"
-            @click="onClickOpenDialog(true, props.row)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
+            color="deep-purple"
             icon="mdi-history"
             @click="clickHistory(props.row)"
           >
             <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
           </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click="onClickOpenDialog(true, props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
-        <q-td
-          v-for="col in props.cols"
-          :key="col.name"
-          :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>
@@ -490,24 +482,24 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
-              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              color="primary"
-              icon="mdi-pencil-outline"
-              @click="onClickOpenDialog(true, props.row)"
-            >
-              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              color="info"
+              color="deep-purple"
               icon="mdi-history"
               @click.stop.prevent="clickHistory(props.row)"
             >
               <q-tooltip>ประวัติแก้ไขประกาศเกียรติคุณ</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click="onClickOpenDialog(true, props.row)"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <div>
@@ -822,7 +814,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index 4ab2675e0..f40030d5b 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -520,36 +520,28 @@ onMounted(async () => {
       <q-tr :props="props">
         <q-td auto-width>
           <q-btn
-            v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            color="primary"
-            icon="mdi-pencil-outline"
-            @click="onClickOpenDialog(true, props.row)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
+            color="deep-purple"
             icon="mdi-history"
             @click="clickHistory(props.row)"
           >
             <q-tooltip>ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ</q-tooltip>
           </q-btn>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
+            flat
+            dense
+            round
+            color="edit"
+            icon="edit"
+            @click="onClickOpenDialog(true, props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
-        <q-td
-          v-for="col in props.cols"
-          :key="col.name"
-          :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>
@@ -562,24 +554,24 @@ onMounted(async () => {
         <q-card bordered>
           <q-card-actions class="bg-grey-3" align="right">
             <q-btn
-              v-if="checkPermission($route)?.attrIsUpdate"
               flat
               round
-              color="primary"
-              icon="mdi-pencil-outline"
-              @click.stop.prevent="onClickOpenDialog(true, props.row)"
-            >
-              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
-            </q-btn>
-            <q-btn
-              flat
-              round
-              color="info"
+              color="deep-purple"
               icon="mdi-history"
               @click="clickHistory(props.row)"
             >
               <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
             </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              flat
+              round
+              color="edit"
+              icon="edit"
+              @click.stop.prevent="onClickOpenDialog(true, props.row)"
+            >
+              <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+            </q-btn>
           </q-card-actions>
           <q-separator />
           <div>
@@ -834,7 +826,7 @@ onMounted(async () => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
index 7c7955779..a6baf3f4c 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
@@ -303,8 +303,8 @@ onMounted(() => {
         flat
         round
         dense
-        icon="mdi-pencil-outline"
-        color="primary"
+        icon="edit"
+        color="edit"
         @click="onClickEdit"
       >
         <q-tooltip>แก้ไขข้อมูล</q-tooltip>
@@ -314,7 +314,7 @@ onMounted(() => {
         round
         dense
         icon="mdi-history"
-        color="info"
+        color="deep-purple"
         @click="onClickHistory"
       >
         <q-tooltip>ประวัติแก้ไขข้อมูลลูกจ้างชั่วคราว</q-tooltip>
@@ -614,7 +614,7 @@ onMounted(() => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
index c26885415..3dfbd0357 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
@@ -290,8 +290,6 @@ onMounted(() => {
     >
       <template v-slot:header="props">
         <q-tr :props="props">
-          <q-th auto-width v-if="checkPermission($route)?.attrIsUpdate" />
-          <q-th auto-width v-if="checkPermission($route)?.attrIsDelete" />
           <q-th auto-width />
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
             <span class="text-weight-medium">{{ col.label }}</span>
@@ -299,21 +297,31 @@ onMounted(() => {
         </q-tr>
       </template>
       <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer" style="height: 40px">
-          <q-td v-if="checkPermission($route)?.attrIsUpdate">
+        <q-tr :props="props">
+          <q-td auto-width>
             <q-btn
               dense
               flat
               round
-              color="primary"
-              icon="mdi-pencil"
+              color="deep-purple"
+              icon="mdi-history"
+              @click="onClickHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsUpdate"
+              dense
+              flat
+              round
+              color="edit"
+              icon="edit"
               @click="onOpenDialog(true, props.row.id)"
             >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
-          </q-td>
-          <q-td v-if="checkPermission($route)?.attrIsDelete">
             <q-btn
+              v-if="checkPermission($route)?.attrIsDelete"
               dense
               flat
               round
@@ -324,18 +332,7 @@ onMounted(() => {
               <q-tooltip>ลบข้อมูล</q-tooltip></q-btn
             >
           </q-td>
-          <q-td>
-            <q-btn
-              dense
-              flat
-              round
-              color="info"
-              icon="mdi-history"
-              @click="onClickHistory(props.row.id)"
-            >
-              <q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
-            </q-btn>
-          </q-td>
+
           <q-td v-for="col in props.cols" :key="col.name" :props="props">
             <div>
               {{ col.value ? col.value : "-" }}
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
index b8a52959e..d7d3ed4d1 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
@@ -321,32 +321,29 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
-      <q-tr :props="props" class="cursor-pointer">
+      <q-tr :props="props">
         <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            color="deep-purple"
+            icon="mdi-history"
+            @click="openDialogHistory(props.row.id)"
+          >
+            <q-tooltip>ประวัติแก้ไขอื่นๆ</q-tooltip>
+          </q-btn>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
-            class="q-mr-xs"
-            size="14px"
-            color="primary"
-            icon="mdi-pencil-outline"
+            color="edit"
+            icon="edit"
             @click="openDialogEdit(props.row)"
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
-          <q-btn
-            color="info"
-            flat
-            dense
-            round
-            size="14px"
-            icon="mdi-history"
-            @click="openDialogHistory(props.row.id)"
-          >
-            <q-tooltip>ประวัติแก้ไขอื่นๆ</q-tooltip>
-          </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.id">
           <div>
@@ -362,22 +359,22 @@ onMounted(() => {
             <q-space />
             <div class="q-gutter-x-sm">
               <q-btn
-                v-if="checkPermission($route)?.attrIsUpdate"
-                color="primary"
-                icon="mdi-pencil-outline"
-                flat
-                round
-                @click="openDialogEdit(props.row)"
-                ><q-tooltip>แก้ไข</q-tooltip></q-btn
-              >
-              <q-btn
-                color="info"
+                color="deep-purple"
                 icon="mdi-history"
                 flat
                 round
                 @click="openDialogHistory(props.row.id)"
                 ><q-tooltip>ประวิติแก้ไขอื่นๆ</q-tooltip></q-btn
               >
+              <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
+                color="edit"
+                icon="edit"
+                flat
+                round
+                @click="openDialogEdit(props.row)"
+                ><q-tooltip>แก้ไข</q-tooltip></q-btn
+              >
             </div>
           </div>
           <q-separator />
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
index cf5affeff..bb22ad1b0 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
@@ -202,7 +202,7 @@ watch(modal, (status) => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value ? col.value : "-" }}
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index f19ed42f2..88e09e9d1 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, watch } from "vue";
 import { checkPermission } from "@/utils/permissions";
-import { date, useQuasar } from "quasar";
+import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -35,8 +35,6 @@ const {
 } = useCounterMixin();
 const { statusText } = useRegistryEmp();
 
-const filter = ref<string>("");
-
 /** Table*/
 const rows = ref<DataEmployee[]>([]);
 const maxPage = ref<number>(0);
@@ -375,7 +373,13 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width />
+            <q-th
+              auto-width
+              v-if="
+                checkPermission($route)?.attrIsDelete ||
+                checkPermission($route)?.attrIsUpdate
+              "
+            />
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
@@ -391,74 +395,48 @@ onMounted(() => {
               "
             >
               <q-btn
-                icon="mdi-dots-vertical"
-                size="12px"
-                color="grey-7"
+                v-if="
+                  (props.row.draftOrgEmployeeStatus === null ||
+                    props.row.draftOrgEmployeeStatus === 'WAITTING' ||
+                    props.row.draftOrgEmployeeStatus === 'PENDING') &&
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
                 flat
                 round
                 dense
+                color="blue"
+                icon="mdi-account-settings"
+                @click.pervent="onClickSelectPos(props.row)"
               >
-                <q-menu transition-show="jump-down" transition-hide="jump-up">
-                  <q-list dense style="min-width: 160px">
-                    <q-item
-                      clickable
-                      v-close-popup
-                      v-if="
-                        (props.row.draftOrgEmployeeStatus === null ||
-                          props.row.draftOrgEmployeeStatus === 'WAITTING' ||
-                          props.row.draftOrgEmployeeStatus === 'PENDING') &&
-                        checkPermission($route)?.attrIsUpdate
-                      "
-                      @click.pervent="onClickSelectPos(props.row)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon
-                          color="blue"
-                          size="xs"
-                          name="mdi-account-settings"
-                        />
-                      </q-item-section>
-                      <q-item-section>กำหนดตำแหน่ง</q-item-section>
-                    </q-item>
-                    <q-item
-                      v-if="checkPermission($route)?.attrIsUpdate"
-                      clickable
-                      v-close-popup
-                      @click.pervent="redirectToPageDetail(props.row.id)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon color="primary" size="xs" name="mdi-account" />
-                      </q-item-section>
-                      <q-item-section>แก้ไขข้อมูล</q-item-section>
-                    </q-item>
-                    <q-separator />
-                    <q-item
-                      v-if="checkPermission($route)?.attrIsDelete"
-                      clickable
-                      v-close-popup
-                      @click.pervent="onClickDelete(props.row.id)"
-                    >
-                      <q-item-section
-                        style="min-width: 0px"
-                        avatar
-                        class="q-py-sm"
-                      >
-                        <q-icon color="red" size="xs" name="mdi-delete" />
-                      </q-item-section>
-                      <q-item-section>ลบ</q-item-section>
-                    </q-item>
+                <q-tooltip>กำหนดตำแหน่ง </q-tooltip>
+              </q-btn>
 
-                    <q-separator />
-                  </q-list>
-                </q-menu>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                round
+                dense
+                color="edit"
+                icon="edit"
+                @click.pervent="redirectToPageDetail(props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล </q-tooltip>
+              </q-btn>
+
+              <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
+                flat
+                round
+                dense
+                color="red"
+                icon="mdi-delete"
+                @click.pervent="onClickDelete(props.row.id)"
+              >
+                <q-tooltip>ลบ </q-tooltip>
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index 5cedd0ea0..9fc124a94 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -12,6 +12,7 @@ import TableComplaint from "@/modules/11_discipline/components/1_Complaint/Table
 
 import config from "@/app.config";
 import http from "@/plugins/http";
+import { checkPermission } from "@/utils/permissions";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -129,7 +130,11 @@ onMounted(async () => {
           <template v-if="statusFilter !== 'ALL'" v-slot:append>
             <q-icon
               name="cancel"
-              @click.stop.prevent="(option = complainstStore.statusOptions),(statusFilter = 'ALL'), getList()"
+              @click.stop.prevent="
+                (option = complainstStore.statusOptions),
+                  (statusFilter = 'ALL'),
+                  getList()
+              "
               class="cursor-pointer"
             />
           </template>
@@ -137,6 +142,7 @@ onMounted(async () => {
       </div>
       <div>
         <q-btn
+          v-if="checkPermission($route)?.attrIsCreate"
           id="addComplaints"
           for="addComplaints"
           size="12px"
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
index 1df0a12cc..cc92edf38 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
@@ -8,6 +8,7 @@ import config from "@/app.config";
 import http from "@/plugins/http";
 import type { typeItem } from "@/modules/11_discipline/interface/response/channel";
 
+import { checkPermission } from "@/utils/permissions";
 const dataStore = useDisciplineChannelDataStore();
 const mixin = useCounterMixin();
 const { dialogRemove, showLoader, messageError, hideLoader, success } = mixin;
@@ -108,6 +109,7 @@ onMounted(() => {
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div>
         <q-btn
+        v-if="checkPermission($route)?.attrIsCreate"
           @click="clickAdd()"
           size="12px"
           flat
@@ -170,7 +172,7 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width />
+            <q-th auto-width v-if="checkPermission($route)?.attrIsDelete"/>
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
@@ -178,7 +180,7 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td>
+            <q-td v-if="checkPermission($route)?.attrIsDelete">
               <q-btn
                 dense
                 size="12px"
@@ -195,7 +197,7 @@ onMounted(() => {
               v-for="col in props.cols"
               :key="col.name"
               :props="props"
-              @click="editPage(props.row)"
+              @click="checkPermission($route)?.attrIsUpdate ? editPage(props.row):''"
             >
               <div v-if="col.name === 'no'">
                 {{ props.rowIndex + 1 }}
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
index 91d6ff20f..7dafa4016 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
@@ -8,6 +8,7 @@ import http from "@/plugins/http";
 import DialogTotal from "@/modules/11_discipline/components/6_BasicInformation/Director/DialogInvestigateTotal.vue";
 import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
 
+import { checkPermission } from "@/utils/permissions";
 const $q = useQuasar();
 const dataStore = useDisciplineDirectorDataStore();
 const mixin = useCounterMixin();
@@ -147,6 +148,7 @@ onMounted(() => {
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div>
         <q-btn
+        v-if="checkPermission($route)?.attrIsCreate"
           @click="$router.push(`/discipline/director/add`)"
           size="12px"
           flat
@@ -223,7 +225,7 @@ onMounted(() => {
         </template>
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width />
+            <q-th auto-width v-if="checkPermission($route)?.attrIsDelete"/>
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
@@ -231,7 +233,7 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td auto-width>
+            <q-td auto-width v-if="checkPermission($route)?.attrIsDelete">
               <q-btn
                 dense
                 size="12px"
@@ -257,7 +259,7 @@ onMounted(() => {
                   props.row.totalInvestigate > 0
                 "
                 class="text-blue"
-                @click="openDetail(props.row, 'investigate')"
+                @click="checkPermission($route)?.attrIsGet ? openDetail(props.row, 'investigate'):''"
               >
                 {{ props.row.totalInvestigate }}
               </div>
@@ -267,18 +269,17 @@ onMounted(() => {
                   props.row.totalDisciplinary > 0
                 "
                 class="text-blue"
-                @click="openDetail(props.row, 'disciplinary')"
+                @click="checkPermission($route)?.attrIsGet ? openDetail(props.row, 'disciplinary'):''"
               >
                 {{ props.row.totalDisciplinary }}
               </div>
               <div
                 v-else
-                @click="$router.push(`/discipline/director/${props.row.id}`)"
+                @click="checkPermission($route)?.attrIsUpdate ? $router.push(`/discipline/director/${props.row.id}`):''"
               >
                 {{ col.value ?? "-" }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
       </d-table>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue b/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
index 4319246de..665769f2f 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
@@ -16,6 +16,7 @@ import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import CardProfile from "@/components/CardProfile.vue";
 
+
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 /** use */
@@ -23,6 +24,7 @@ const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
+const checkRoutePermission = ref<boolean>(route.name == 'disciplineDetailSuspend')
 const mixin = useCounterMixin();
 const dataId = route.params.id.toString();
 const {
@@ -330,10 +332,10 @@ onMounted(async () => {
     <q-form greedy @submit.prevent @validation-success="saveData">
       <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
         <div class="q-pl-sm text-weight-bold text-dark">
-          แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
+          {{ checkRoutePermission ? 'รายละเอียดข้อมูลบัญชีแนบท้าย':'แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย'}}
         </div>
         <q-space />
-        <div v-if="data.status !== 'DONE' && data.status !== 'REPORT'">
+        <div v-if="data.status !== 'DONE' && data.status !== 'REPORT'&& !checkRoutePermission">
           <div class="q-gutter-sm" v-if="!edit">
             <q-btn
               outline
diff --git a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
index 3e7da48f4..138f3b629 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
@@ -11,6 +11,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+import { checkPermission } from "@/utils/permissions";
 
 /** use */
 const dataStore = useDisciplineSuspendStore();
@@ -251,6 +252,7 @@ onMounted(() => {
       <div class="col-12">
         <div class="row col-12">
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             @click="openModalOrder"
             size="14px"
             flat
@@ -324,6 +326,7 @@ onMounted(() => {
             </template>
             <template v-slot:header="props">
               <q-tr :props="props">
+                <q-th auto-width v-if="checkPermission($route)?.attrIsGet !== false || checkPermission($route)?.attrIsUpdate !== false"/>
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
@@ -332,12 +335,33 @@ onMounted(() => {
             </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"
-                  @click="router.push(`/discipline-suspend/${props.row.id}`)"
-                >
+                <q-td auto-width v-if="checkPermission($route)?.attrIsGet !== false || checkPermission($route)?.attrIsUpdate !== false">
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
+                    @click="
+                      router.push(`/discipline-suspend-detail/${props.row.id}`)
+                    "
+                    size="14px"
+                    flat
+                    round
+                    color="info"
+                    icon="mdi-eye"
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    v-if="checkPermission($route)?.attrIsUpdate"
+                    @click="router.push(`/discipline-suspend/${props.row.id}`)"
+                    size="14px"
+                    flat
+                    round
+                    color="edit"
+                    icon="edit"
+                  >
+                    <q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name === 'no'">
                     {{
                       (currentPage - 1) * Number(pagination.rowsPerPage) +
@@ -346,7 +370,9 @@ onMounted(() => {
                     }}
                   </div>
                   <div v-else-if="col.name === 'name'" class="table_ellipsis">
-                    {{ props.row.prefix ? props.row.prefix : "" }}{{ props.row.firstName ? props.row.firstName : "" }} {{ props.row.lastName ? props.row.lastName : "" }}
+                    {{ props.row.prefix ? props.row.prefix : ""
+                    }}{{ props.row.firstName ? props.row.firstName : "" }}
+                    {{ props.row.lastName ? props.row.lastName : "" }}
                   </div>
                   <div v-else-if="col.name === 'title'" class="table_ellipsis">
                     {{ props.row.title ? props.row.title : "-" }}
diff --git a/src/modules/11_discipline/components/8_AppealComplain/EditPage.vue b/src/modules/11_discipline/components/8_AppealComplain/EditPage.vue
index eb87d596a..fc0aa4a38 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/EditPage.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/EditPage.vue
@@ -19,7 +19,7 @@ const { showLoader, messageError, hideLoader, dialogConfirm, success } = mixin;
 const route = useRoute();
 const router = useRouter();
 const id = ref<string>(route.params.id as string);
-
+const checkRoutePermission = ref<boolean>(route.name == 'appealComplainDetail')
 const historyStatusOb = reactive<HistoryStatusType>({
   status: "",
   createdFullName: "",
@@ -134,7 +134,7 @@ onMounted(() => {
         class="q-mr-sm"
         @click="router.push('/discipline-appealcomplain')"
       />
-      แก้ไขการอุทธรณ์/ร้องทุกข์
+      {{ checkRoutePermission ? `รายละเอียด`:`แก้ไข` }}การอุทธรณ์/ร้องทุกข์
     </div>
 
     <Form :on-submit="onSubmit" :data="data" :get-data="getData" />
diff --git a/src/modules/11_discipline/components/8_AppealComplain/Form.vue b/src/modules/11_discipline/components/8_AppealComplain/Form.vue
index cfe0f83df..9ec102dc8 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/Form.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/Form.vue
@@ -17,10 +17,12 @@ import type {
   MyObjectAppealRef,
   HistoryStatusType,
 } from "@/modules/11_discipline/interface/response/appealComplain";
+import { checkPermission } from "@/utils/permissions";
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const mainStore = useDisciplineMainStore();
 const router = useRouter();
 const route = useRoute();
+const checkRoutePermission = ref<boolean>(route.name == "appealComplainDetail");
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   data: {
@@ -378,6 +380,7 @@ onMounted(() => {
                 <div class="row q-gutter-x-sm">
                   <div class="col-3">
                     <q-select
+                      :readonly="checkRoutePermission"
                       ref="typeRef"
                       :class="inputEdit(isReadonly)"
                       v-model="formData.type"
@@ -405,6 +408,7 @@ onMounted(() => {
                   </div>
                   <div class="col-3" v-if="isReadonly">
                     <q-select
+                      :readonly="checkRoutePermission"
                       ref="statusRef"
                       v-model="formData.status"
                       :class="inputEdit(isReadonly)"
@@ -528,6 +532,7 @@ onMounted(() => {
                 <div class="row col-12">
                   <div class="col-12" id="title">
                     <q-input
+                      :readonly="checkRoutePermission"
                       ref="titleRef"
                       dense
                       :class="inputEdit(isReadonly)"
@@ -545,6 +550,7 @@ onMounted(() => {
 
                 <div class="col-xs-12 col-sm-12" id="detail">
                   <q-input
+                    :readonly="checkRoutePermission"
                     ref="descriptionRef"
                     dense
                     :class="inputEdit(isReadonly)"
@@ -563,6 +569,7 @@ onMounted(() => {
                 <div class="row q-gutter-x-sm">
                   <div class="col-3">
                     <datepicker
+                      :readonly="checkRoutePermission"
                       menu-class-name="modalfix"
                       v-model="formData.year"
                       class="col-2"
@@ -578,6 +585,7 @@ onMounted(() => {
                       <template #trigger>
                         <q-input
                           dense
+                          :readonly="checkRoutePermission"
                           :class="inputEdit(isReadonly)"
                           outlined
                           :model-value="Number(formData.year) + 543"
@@ -599,6 +607,7 @@ onMounted(() => {
                   <div class="col-3">
                     <q-input
                       ref="caseTypeRef"
+                      :readonly="checkRoutePermission"
                       :class="inputEdit(isReadonly)"
                       v-model="formData.caseType"
                       dense
@@ -612,6 +621,7 @@ onMounted(() => {
                   <div class="col-3">
                     <q-input
                       ref="caseNumberRef"
+                      :readonly="checkRoutePermission"
                       :class="inputEdit(isReadonly)"
                       v-model="formData.caseNumber"
                       dense
@@ -642,6 +652,7 @@ onMounted(() => {
                 <div class="col-12 row">
                   <q-file
                     for="inputFiles"
+                    :readonly="checkRoutePermission"
                     class="col-12"
                     outlined
                     dense
@@ -696,6 +707,7 @@ onMounted(() => {
                         ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
                       >
                       <q-btn
+                        v-if="!checkRoutePermission"
                         size="12px"
                         flat
                         round
@@ -715,8 +727,8 @@ onMounted(() => {
               </div>
             </q-card>
           </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row col-12 q-pa-sm">
+          <div class="col-12" v-if="!checkRoutePermission"><q-separator /></div>
+          <div v-if="!checkRoutePermission" class="row col-12 q-pa-sm">
             <q-space />
             <q-btn id="onSubmit" type="submit" label="บันทึก" color="secondary"
               ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
diff --git a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
index dad98cced..698055593 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
@@ -14,6 +14,8 @@ import DialogStatus from "@/modules/11_discipline/components/8_AppealComplain/di
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+import { checkPermission } from "@/utils/permissions";
+
 const $q = useQuasar();
 const mixin = useCounterMixin();
 
@@ -201,6 +203,12 @@ watch(
   }
 );
 
+/** ไปยังหน้าเพิ่มข้อมูล */
+function redirectToPageDetail(id: string) {
+  dataStore.rowsAdd = [];
+  router.push(`/discipline-appealcomplain-detail/${id}`);
+}
+
 /** ไปยังหน้าเพิ่มข้อมูล */
 function redirectToPageadd() {
   dataStore.rowsAdd = [];
@@ -307,6 +315,7 @@ onMounted(async () => {
     <div class="row q-mb-sm q-col-gutter-sm">
       <div>
         <q-btn
+          v-if="checkPermission($route)?.attrIsCreate"
           id="addComplaints"
           for="addComplaints"
           size="12px"
@@ -424,7 +433,7 @@ onMounted(async () => {
                 <q-icon
                   name="cancel"
                   @click.stop.prevent="
-                    (optionType = type),((formData.type = 'ALL')), dataUpdate()
+                    (optionType = type), (formData.type = 'ALL'), dataUpdate()
                   "
                   class="cursor-pointer"
                 />
@@ -506,6 +515,13 @@ onMounted(async () => {
         </template>
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th
+              auto-width
+              v-if="
+                checkPermission($route)?.attrIsGet !== false ||
+                checkPermission($route)?.attrIsUpdate !== false
+              "
+            ></q-th>
             <q-th
               v-for="col in props.cols"
               :key="col.name"
@@ -519,11 +535,38 @@ onMounted(async () => {
         <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"
-              @click="editPage(props.row.id)"
+              auto-width
+              v-if="
+                checkPermission($route)?.attrIsGet !== false ||
+                checkPermission($route)?.attrIsUpdate !== false
+              "
             >
+              <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                id="addComplaints"
+                for="addComplaints"
+                size="12px"
+                flat
+                round
+                color="info"
+                icon="mdi-eye"
+                @click="redirectToPageDetail(props.row.id)"
+                ><q-tooltip>รายละเอียดการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+              >
+              <q-btn
+                v-if="checkPermission($route)?.attrIsUpdate"
+                id="addComplaints"
+                for="addComplaints"
+                size="12px"
+                flat
+                round
+                color="edit"
+                icon="edit"
+                @click="editPage(props.row.id)"
+                ><q-tooltip>แก้ไขการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+              >
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
                 {{
                   (currentPage - 1) * Number(pagination.rowsPerPage) +
diff --git a/src/modules/11_discipline/router.ts b/src/modules/11_discipline/router.ts
index f4392b4f7..414ced8ae 100644
--- a/src/modules/11_discipline/router.ts
+++ b/src/modules/11_discipline/router.ts
@@ -64,6 +64,8 @@ const listSuspendMainPage = () =>
   import("@/modules/11_discipline/components/7_ListSuspend/ListsPage.vue");
 const suspendEditPage = () =>
   import("@/modules/11_discipline/components/7_ListSuspend/DetailPage.vue");
+const suspendDetailPage = () =>
+  import("@/modules/11_discipline/components/7_ListSuspend/DetailPage.vue");
 
 const appealComplain = () =>
   import("@/modules/11_discipline/components/8_AppealComplain/MainPage.vue");
@@ -71,6 +73,8 @@ const appealComplainAdd = () =>
   import("@/modules/11_discipline/components/8_AppealComplain/AddPage.vue");
 const appealComplainEdit = () =>
   import("@/modules/11_discipline/components/8_AppealComplain/EditPage.vue");
+const appealComplainDetail = () =>
+  import("@/modules/11_discipline/components/8_AppealComplain/EditPage.vue");
 
 const DetailPage = () => import("@/modules/10_order/components/Detail.vue");
 export default [
@@ -285,6 +289,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/discipline-suspend-detail/:id",
+    name: "disciplineDetailSuspend",
+    component: suspendDetailPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_DISCIPLINE_SUSPENDED",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/discipline-appealcomplain",
     name: "appealComplain",
@@ -315,6 +329,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/discipline-appealcomplain-detail/:id",
+    name: "appealComplainDetail",
+    component: appealComplainDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_DISCIPLINE_APPEAL",
+      Role: "STAFF",
+    },
+  },
 
   {
     path: "/discipline-order",
diff --git a/src/modules/14_KPI/views/list.vue b/src/modules/14_KPI/views/list.vue
index 995ad8929..e4915b676 100644
--- a/src/modules/14_KPI/views/list.vue
+++ b/src/modules/14_KPI/views/list.vue
@@ -10,7 +10,7 @@ import type { QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
-
+import { checkPermission } from "@/utils/permissions";
 import DialogEvalute from "@/modules/14_KPI/components/Tab/Dialog/DialogEvalute.vue";
 const $q = useQuasar();
 const router = useRouter();
@@ -262,7 +262,7 @@ onMounted(async () => {
               @update:model-value="changRound"
               :disable="year === null"
             />
-            <q-btn round color="primary" flat icon="add" @click="onDialog()">
+            <q-btn v-if="checkPermission($route)?.attrIsCreate" round color="primary" flat icon="add" @click="onDialog()">
               <q-tooltip>เพิ่มผู้ประเมิน</q-tooltip>
             </q-btn>
             <!-- <q-select
@@ -342,7 +342,7 @@ onMounted(async () => {
                 <q-td
                   v-for="col in props.cols"
                   :key="col.id"
-                  @click="redirectViewDetail(props.row.id)"
+                  @click="checkPermission($route)?.attrIsUpdate ? redirectViewDetail(props.row.id):''"
                 >
                   <div v-if="col.name === 'name'">
                     {{
diff --git a/src/modules/14_KPI/views/round.vue b/src/modules/14_KPI/views/round.vue
index 4e4b9399b..378ab1224 100644
--- a/src/modules/14_KPI/views/round.vue
+++ b/src/modules/14_KPI/views/round.vue
@@ -27,6 +27,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
  * importStore
  */
 import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 
 /**
  * use
@@ -447,6 +448,7 @@ onMounted(() => {
           </template>
         </datepicker>
         <q-btn
+          v-if="checkPermission($route)?.attrIsCreate"
           flat
           round
           dense
@@ -507,21 +509,29 @@ onMounted(() => {
                 <q-menu>
                   <q-list style="min-width: 150px" dense>
                     <q-item
+                      v-if="props.row.isActive !== false && checkPermission($route)?.attrIsUpdate !== false"
                       clickable
                       v-close-popup
-                      v-for="items in props.row.isActive
-                        ? itemMenu
-                        : itemMenu.slice(1, 2)"
-                      @click="onClickAction(items.value, props.row.id)"
+                      @click="onClickAction('close', props.row.id)"
                     >
                       <q-item-section avatar>
-                        <q-icon :color="items.color" :name="items.icon" />
+                        <q-icon :color="'orange'" :name="'mdi-close'" />
                       </q-item-section>
-                      <q-item-section>{{ items.label }}</q-item-section>
+                      <q-item-section>ปิดรอบ</q-item-section>
+                    </q-item>
+                    <q-item
+                    v-if="checkPermission($route)?.attrIsDelete !== false"
+                      clickable
+                      v-close-popup
+                      @click="onClickAction('delete', props.row.id)"
+                    >
+                      <q-item-section avatar>
+                        <q-icon :color="'red'" :name="'delete'" />
+                      </q-item-section>
+                      <q-item-section>ลบรอบ</q-item-section>
                     </q-item>
                   </q-list>
                 </q-menu>
-                <q-tooltip>ดาวน์โหลด</q-tooltip>
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
@@ -529,7 +539,6 @@ onMounted(() => {
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
         <template v-slot:pagination="scope">
diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index b09d2008c..5a1163aa7 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -19,7 +19,9 @@ const mixin = useCounterMixin();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
 
 const projectId = ref<string>(route.params.id.toLocaleString());
-
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
 const formData = reactive<FormBasicinfo>({
   year: new Date().getFullYear(),
   projectName: "",
@@ -147,7 +149,7 @@ onMounted(async () => {
         <div class="col-12 row no-wrap">
           <div class="col-12 q-py-sm q-px-sm q-gutter-sm">
             <div class="text-subtitle2 text-bold">หน่วยงาน/ส่วนราชการ</div>
-            <q-input dense outlined v-model="filter" label="ค้นหา">
+            <q-input :readonly="checkRoutePermission" dense outlined v-model="filter" label="ค้นหา">
               <template v-slot:append>
                 <q-icon
                   v-if="filter !== ''"
@@ -168,10 +170,12 @@ onMounted(async () => {
               :filter="filter"
               no-results-label="ไม่พบข้อมูลที่ค้นหา"
               no-nodes-label="ไม่มีข้อมูล"
+              :style="checkRoutePermission ? 'pointer-events: none !important;':''"
             >
               <template v-slot:default-header="prop">
                 <q-item
                   clickable
+                  :disable="checkRoutePermission"
                   @click.stop="updateSelected(prop.node)"
                   :active="formData.nodeId === prop.node.orgTreeId"
                   active-class="my-list-link text-primary text-weight-medium"
@@ -212,6 +216,7 @@ onMounted(async () => {
                   autoApply
                   year-picker
                   :enableTimePicker="false"
+                  :readonly="checkRoutePermission"
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -220,6 +225,7 @@ onMounted(async () => {
                   <template #trigger>
                     <q-input
                       dense
+                      :readonly="checkRoutePermission"
                       lazy-rules
                       outlined
                       class="inputgreen"
@@ -244,6 +250,7 @@ onMounted(async () => {
                   outlined
                   class="inputgreen"
                   dense
+                  :readonly="checkRoutePermission"
                   v-model="formData.projectName"
                   label="ชื่อโครงการ/กิจกรรม/หลักสูตร"
                   rows="6"
@@ -260,6 +267,7 @@ onMounted(async () => {
                   outlined
                   class="inputgreen"
                   dense
+                  :readonly="checkRoutePermission"
                   v-model="formData.reason"
                   label="หลักการและเหตุผล"
                   rows="6"
@@ -272,6 +280,7 @@ onMounted(async () => {
                   outlined
                   class="inputgreen"
                   dense
+                  :readonly="checkRoutePermission"
                   v-model="formData.objective"
                   label="วัตถุประสงค์"
                   rows="6"
@@ -285,8 +294,8 @@ onMounted(async () => {
       </div>
     </q-card>
 
-    <q-separator />
-    <div class="text-right q-pa-sm">
+    <q-separator v-if="!checkRoutePermission"/>
+    <div class="text-right q-pa-sm" v-if="!checkRoutePermission">
       <q-btn
         unelevated
         label="บันทึก"
diff --git a/src/modules/15_development/components/FollowResult.vue b/src/modules/15_development/components/FollowResult.vue
index c09682e23..393f05c2c 100644
--- a/src/modules/15_development/components/FollowResult.vue
+++ b/src/modules/15_development/components/FollowResult.vue
@@ -51,7 +51,9 @@ const {
 } = useCounterMixin();
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
-
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
 /** หัวตาราง */
 const rows = ref<DevelopmentEvaluations[]>([]); // ข้อมูลรายการ
 const columns = ref<QTableProps["columns"]>([
@@ -283,6 +285,7 @@ onMounted(() => {
     <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
       ตัวชี้วัดความสำเร็จ
       <q-btn
+        v-if="!checkRoutePermission"
         dense
         flat
         round
@@ -310,18 +313,17 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width />
             <q-th auto-width />
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
-
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
             <q-td>
               <q-btn
+                v-if="!checkRoutePermission"
                 dense
                 flat
                 round
@@ -330,10 +332,9 @@ onMounted(() => {
                 @click="onClickAddIndicator(true, props.row)"
               >
                 <q-tooltip>แก้ไขตัวชี้วัดความสำเร็จ</q-tooltip>
-              </q-btn></q-td
-            >
-            <q-td>
+              </q-btn>
               <q-btn
+                v-if="!checkRoutePermission"
                 dense
                 flat
                 round
@@ -344,12 +345,12 @@ onMounted(() => {
                 <q-tooltip>ลบ</q-tooltip>
               </q-btn>
             </q-td>
+
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
-
           </q-tr>
         </template>
       </d-table>
@@ -366,6 +367,7 @@ onMounted(() => {
       <div class="row q-pa-md q-col-gutter-sm">
         <div class="col-12 col-sm-6 col-md-4">
           <q-select
+            :readonly="checkRoutePermission"
             dense
             outlined
             label="ประเภทโครงการ"
@@ -383,12 +385,14 @@ onMounted(() => {
           <div class="row" v-if="formProject.project == 'OFFER'">
             <div class="col-12">
               <q-checkbox
+                :disable="checkRoutePermission"
                 v-model="formProject.isPassAllocate"
                 label="ผ่านการพิจาณา ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
               />
             </div>
             <div class="col-12">
               <q-checkbox
+                :disable="checkRoutePermission"
                 v-model="formProject.isPassNoAllocate"
                 label="ผ่านการพิจารณา ไม่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
               />
@@ -396,6 +400,7 @@ onMounted(() => {
 
             <div class="col-12">
               <q-checkbox
+                :disable="checkRoutePermission"
                 v-model="formProject.isNoPass"
                 label="ไม่ผ่านการพิจารณา แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
               />
@@ -404,12 +409,14 @@ onMounted(() => {
           <div class="row" v-else>
             <div class="col-12">
               <q-checkbox
+                :disable="checkRoutePermission"
                 v-model="formProject.isBudget"
                 label="แต่ได้รับการจัดสรรงบประมาณตามข้อบัญญัติ"
               />
             </div>
             <div class="col-12">
               <q-checkbox
+                :disable="checkRoutePermission"
                 v-model="formProject.isOutBudget"
                 label="แต่ได้รับการจัดสรรเงินนอกงบประมาณ"
               />
@@ -417,9 +424,10 @@ onMounted(() => {
           </div>
         </div>
       </div>
-      <q-separator />
+      <q-separator v-if="!checkRoutePermission" />
       <q-card-actions align="right">
         <q-btn
+          v-if="!checkRoutePermission"
           unelevated
           label="บันทึก"
           id="onSubmit"
@@ -441,7 +449,7 @@ onMounted(() => {
           :close="closeDialog"
         />
         <q-separator />
-        <q-card-section >
+        <q-card-section>
           <div class="row q-col-gutter-sm">
             <div class="col-12">
               <q-input
@@ -479,7 +487,6 @@ onMounted(() => {
               />
             </div>
 
-
             <div class="col-6">
               <q-input
                 dense
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index e6ca5b935..a6e57a062 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -25,6 +25,7 @@ const store = useDevelopmentDataStore();
 const { success, showLoader, hideLoader, messageError, dialogConfirm } =
   useCounterMixin();
 
+const checkRoutePermission = ref<boolean>(route.name == 'developmentDetailPage')
 const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
 const projectId = ref<string>(route.params.id.toLocaleString());
 const tab = ref<string>("BasicInfo");
@@ -90,10 +91,11 @@ onMounted(() => {
       color="primary"
       @click="router.push('/development')"
     />
-    {{ `${title}โครงการ/หลักสูตรการฝึกอบรม` }}
+    {{ checkRoutePermission ? 'รายละเอียดโครงการ/หลักสูตรการฝึกอบรม':`${title}โครงการ/หลักสูตรการฝึกอบรม` }}
     <q-space />
+    <div v-if="!checkRoutePermission"></div>
     <q-btn
-      v-if="status === 'ONGOING'"
+      v-if="status === 'ONGOING' && !checkRoutePermission"
       unelevated
       label="เสร็จสิ้นโครงการ"
       color="green"
@@ -101,7 +103,7 @@ onMounted(() => {
     >
       <q-tooltip>เสร็จสิ้นโครงการ</q-tooltip>
     </q-btn>
-    <q-badge v-else outline color="primary" class="q-px-sm q-py-xs"
+    <q-badge v-else-if="status !== 'ONGOING' || !checkRoutePermission" outline color="primary" class="q-px-sm q-py-xs"
       >เสร็จสิ้นโครงการ</q-badge
     >
   </div>
@@ -131,9 +133,13 @@ onMounted(() => {
           <BasicInfo />
         </q-tab-panel>
         <q-tab-panel name="Target"> <Target /></q-tab-panel>
-        <q-tab-panel name="ProjectDetail" style="padding: 0px"> <ProjectDetail /> </q-tab-panel>
+        <q-tab-panel name="ProjectDetail" style="padding: 0px">
+          <ProjectDetail />
+        </q-tab-panel>
         <q-tab-panel name="FollowResult"> <FollowResult /> </q-tab-panel>
-        <q-tab-panel name="Other" style="padding: 0px"> <Other :status="status"/> </q-tab-panel>
+        <q-tab-panel name="Other" style="padding: 0px">
+          <Other :status="status" />
+        </q-tab-panel>
         <!-- <q-tab-panel name="Record"> <Record /> </q-tab-panel> -->
       </q-tab-panels>
     </div>
diff --git a/src/modules/15_development/components/Other.vue b/src/modules/15_development/components/Other.vue
index 6ae9ff120..349b67bb0 100644
--- a/src/modules/15_development/components/Other.vue
+++ b/src/modules/15_development/components/Other.vue
@@ -22,8 +22,10 @@ const {
 } = useCounterMixin();
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
-
-const status = defineModel<string>('status',{required:true})
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
+const status = defineModel<string>("status", { required: true });
 const provinceOp = ref<DataOption[]>([]);
 const provinceOpMain = ref<DataOption[]>([]);
 const budgetOp = ref<DataOption[]>([
@@ -262,6 +264,7 @@ onMounted(() => {
           v-model="formData.dateStart"
           :locale="'th'"
           autoApply
+          :readonly="checkRoutePermission"
           :enableTimePicker="false"
           week-start="0"
           @update:model-value="changeDateStart()"
@@ -274,6 +277,7 @@ onMounted(() => {
             <q-input
               class="inputgreen"
               dense
+              :readonly="checkRoutePermission"
               outlined
               :model-value="
                 formData.dateStart ? date2Thai(formData.dateStart) : null
@@ -297,6 +301,7 @@ onMounted(() => {
           menu-class-name="modalfix"
           v-model="formData.dateEnd"
           :locale="'th'"
+          :readonly="checkRoutePermission"
           autoApply
           :enableTimePicker="false"
           week-start="0"
@@ -310,6 +315,7 @@ onMounted(() => {
           <template #trigger>
             <q-input
               dense
+              :readonly="checkRoutePermission"
               outlined
               class="inputgreen"
               :model-value="
@@ -332,6 +338,7 @@ onMounted(() => {
       <div class="col-12 col-sm-6 col-md-3">
         <q-input
           dense
+          :readonly="checkRoutePermission"
           outlined
           class="inputgreen"
           label="รวมระยะเวลา (วัน)"
@@ -344,6 +351,7 @@ onMounted(() => {
       <div class="col-12 q-mt-md">
         <span class="text-weight-medium text-body1">สถานที่ดำเนินการ</span>
         <q-btn
+          v-if="!checkRoutePermission"
           dense
           flat
           round
@@ -358,6 +366,7 @@ onMounted(() => {
         <div class="row q-col-gutter-sm">
           <div class="col-8">
             <q-input
+              :readonly="checkRoutePermission"
               outlined
               dense
               class="inputgreen"
@@ -367,6 +376,7 @@ onMounted(() => {
           </div>
           <div class="col-3">
             <q-select
+              :readonly="checkRoutePermission"
               outlined
               dense
               v-model="formData.developmentAddresss[index].provinceId"
@@ -394,7 +404,7 @@ onMounted(() => {
           </div>
           <div class="col-1 text-center">
             <q-btn
-              v-if="index !== 0"
+              v-if="index !== 0 && !checkRoutePermission"
               dense
               flat
               round
@@ -413,6 +423,7 @@ onMounted(() => {
       </div>
       <div class="col-4">
         <q-select
+        :readonly="checkRoutePermission"
           outlined
           dense
           v-model="formData.budget"
@@ -430,6 +441,7 @@ onMounted(() => {
           v-if="formData.budget === 'OUTSIDEBUDGET'"
           outlined
           dense
+          :readonly="checkRoutePermission"
           v-model="formData.budgetSub"
           label="ประเภทย่อย"
           :options="budgetSubOp"
@@ -445,6 +457,7 @@ onMounted(() => {
           <div class="col-3">
             <q-input
               outlined
+              :readonly="checkRoutePermission"
               dense
               class="inputgreen"
               v-model="formData.accept"
@@ -456,6 +469,7 @@ onMounted(() => {
           <div class="col-3">
             <q-input
               outlined
+              :readonly="checkRoutePermission"
               dense
               class="inputgreen"
               v-model="formData.receive"
@@ -467,6 +481,7 @@ onMounted(() => {
           <div class="col-3">
             <q-input
               outlined
+              :readonly="checkRoutePermission"
               dense
               class="inputgreen"
               v-model="formData.approved"
@@ -479,6 +494,7 @@ onMounted(() => {
           <div class="col-3" v-if="status == 'FINISH'">
             <q-input
               outlined
+              :readonly="checkRoutePermission"
               dense
               class="inputgreen"
               v-model="formData.budgetPay"
@@ -496,6 +512,7 @@ onMounted(() => {
       <div class="col-12">
         <q-input
           outlined
+          :readonly="checkRoutePermission"
           dense
           class="inputgreen"
           v-model="formData.issues"
@@ -508,6 +525,7 @@ onMounted(() => {
           outlined
           dense
           class="inputgreen"
+          :readonly="checkRoutePermission"
           v-model="formData.chance"
           label="โอกาสที่จะเกิด"
           :options="[1, 2, 3, 4]"
@@ -516,6 +534,7 @@ onMounted(() => {
       </div>
       <div class="col-3">
         <q-select
+        :readonly="checkRoutePermission"
           outlined
           dense
           class="inputgreen"
@@ -539,6 +558,7 @@ onMounted(() => {
       <div class="col-12">
         <q-input
           outlined
+          :readonly="checkRoutePermission"
           dense
           class="inputgreen"
           v-model="formData.riskManagement"
@@ -554,6 +574,7 @@ onMounted(() => {
       <div class="col-12">
         <q-input
           outlined
+          :readonly="checkRoutePermission"
           dense
           class="inputgreen"
           v-model="formData.expect"
@@ -568,6 +589,7 @@ onMounted(() => {
         <q-input
           outlined
           dense
+          :readonly="checkRoutePermission"
           class="inputgreen"
           v-model="formData.topicAcademic"
           label="หัวข้อ/ประเด็นการฝึกอบรม ศึกษาดูงาน"
@@ -577,6 +599,7 @@ onMounted(() => {
         <q-input
           outlined
           dense
+          :readonly="checkRoutePermission"
           class="inputgreen"
           v-model="formData.addressAcademic"
           label="สถานที่ฝึกอบรม ศึกษาดูงาน"
@@ -588,6 +611,7 @@ onMounted(() => {
           dense
           v-model="formData.provinceActualId"
           label="จังหวัด"
+          :readonly="checkRoutePermission"
           :options="provinceOp"
           option-label="name"
           option-value="id"
@@ -607,8 +631,8 @@ onMounted(() => {
         >
       </div>
     </div>
-    <q-separator />
-    <div class="text-right q-pa-sm">
+    <q-separator v-if="!checkRoutePermission"/>
+    <div class="text-right q-pa-sm" v-if="!checkRoutePermission">
       <q-btn
         unelevated
         label="บันทึก"
diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index bb23ac09d..d0de113da 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -49,7 +49,9 @@ const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
 const { showLoader, hideLoader, dialogConfirm, messageError, success } =
   useCounterMixin();
-
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
 const projectTypeOp = ref<String[]>([
   "โครงการตามยุทธศาสตร์",
   "โครงการตามภารกิจประจำของหน่วยงาน",
@@ -187,13 +189,15 @@ function fetchData() {
       formData.projectDayBackPlanned = data.projectDayBackPlanned;
       formData.projectDayHoldPlanned = data.projectDayHoldPlanned;
       formData.projectNigthHoldPlanned = data.projectNigthHoldPlanned;
-      formData.developmentProjectTechniquePlanneds = data.developmentProjectTechniquePlanneds;
+      formData.developmentProjectTechniquePlanneds =
+        data.developmentProjectTechniquePlanneds;
       formData.isBackActual = data.isBackActual;
       formData.isHoldActual = data.isHoldActual;
       formData.projectDayBackActual = data.projectDayBackActual;
       formData.projectDayHoldActual = data.projectDayHoldActual;
       formData.projectNigthHoldActual = data.projectNigthHoldActual;
-      formData.developmentProjectTechniqueActuals = data.developmentProjectTechniqueActuals;
+      formData.developmentProjectTechniqueActuals =
+        data.developmentProjectTechniqueActuals;
       formData.projectModalPlanned = data.projectModalPlanned;
       formData.projectModalActual = data.projectModalActual;
 
@@ -335,6 +339,7 @@ onMounted(() => {
     <div class="row q-pa-sm">
       <div class="col-12">
         <q-select
+          :readonly="checkRoutePermission"
           dense
           outlined
           v-model="formData.developmentProjectTypes"
@@ -370,6 +375,7 @@ onMounted(() => {
 
                 <q-card-section class="q-pa-sm">
                   <q-input
+                    :readonly="checkRoutePermission"
                     dense
                     outlined
                     v-model="filter"
@@ -396,6 +402,7 @@ onMounted(() => {
                     :no-results-label="notFound"
                     :no-nodes-label="noData"
                     v-model:expanded="expanded"
+                    :style="checkRoutePermission ? 'pointer-events: none;' : ''"
                   >
                     <template v-slot:default-header="prop">
                       <q-item
@@ -429,6 +436,7 @@ onMounted(() => {
 
                 <q-card-section class="q-pa-sm">
                   <q-input
+                    :readonly="checkRoutePermission"
                     dense
                     outlined
                     v-model="filter2"
@@ -454,6 +462,7 @@ onMounted(() => {
                     :no-results-label="notFound"
                     :no-nodes-label="noData"
                     v-model:expanded="expanded2"
+                    :style="checkRoutePermission ? 'pointer-events: none;' : ''"
                   >
                     <template v-slot:default-header="prop">
                       <q-item
@@ -493,7 +502,9 @@ onMounted(() => {
             <div class="row col-12 q-col-gutter-sm">
               <div class="col-12 col-md-3">
                 <q-checkbox
-                  :disable="store.projectStatus === 'FINISH'"
+                  :disable="
+                    store.projectStatus === 'FINISH' || checkRoutePermission
+                  "
                   keep-color
                   color="primary"
                   dense
@@ -504,7 +515,9 @@ onMounted(() => {
               </div>
               <div class="col-12 col-md-4">
                 <q-input
-                  :readonly="store.projectStatus === 'FINISH'"
+                  :readonly="
+                    store.projectStatus === 'FINISH' || checkRoutePermission
+                  "
                   dense
                   outlined
                   v-model="formData.projectDayBackPlanned"
@@ -518,7 +531,9 @@ onMounted(() => {
             <div class="row col-12 q-col-gutter-sm">
               <div class="col-12 col-md-3">
                 <q-checkbox
-                  :disable="store.projectStatus === 'FINISH'"
+                  :disable="
+                    store.projectStatus === 'FINISH' || checkRoutePermission
+                  "
                   keep-color
                   color="primary"
                   dense
@@ -529,7 +544,9 @@ onMounted(() => {
               </div>
               <div class="col-12 col-md-4">
                 <q-input
-                  :readonly="store.projectStatus === 'FINISH'"
+                  :readonly="
+                    store.projectStatus === 'FINISH' || checkRoutePermission
+                  "
                   dense
                   outlined
                   v-model="formData.projectDayHoldPlanned"
@@ -541,7 +558,9 @@ onMounted(() => {
               </div>
               <div class="col-12 col-md-4">
                 <q-input
-                  :readonly="store.projectStatus === 'FINISH'"
+                  :readonly="
+                    store.projectStatus === 'FINISH' || checkRoutePermission
+                  "
                   dense
                   outlined
                   v-model="formData.projectNigthHoldPlanned"
@@ -565,7 +584,9 @@ onMounted(() => {
                   >
                   <q-option-group
                     class="check_box q-mt-sm"
-                    :disable="store.projectStatus === 'FINISH'"
+                    :disable="
+                      store.projectStatus === 'FINISH' || checkRoutePermission
+                    "
                     keep-color
                     color="primary"
                     dense
@@ -579,7 +600,10 @@ onMounted(() => {
                         <q-input
                           v-model="reasonPlanned70"
                           dense
-                          :disable="store.projectStatus === 'FINISH'"
+                          :readonly="
+                            store.projectStatus === 'FINISH' ||
+                            checkRoutePermission
+                          "
                           outlined
                           class="inputgreen"
                           label="กรุณาระบุ"
@@ -594,7 +618,9 @@ onMounted(() => {
                   >
                   <q-option-group
                     class="check_box q-mt-sm"
-                    :disable="store.projectStatus === 'FINISH'"
+                    :disable="
+                      store.projectStatus === 'FINISH' || checkRoutePermission
+                    "
                     keep-color
                     color="primary"
                     dense
@@ -608,7 +634,10 @@ onMounted(() => {
                         <q-input
                           v-model="reasonPlanned20"
                           dense
-                          :disable="store.projectStatus === 'FINISH'"
+                          :readonly="
+                            store.projectStatus === 'FINISH' ||
+                            checkRoutePermission
+                          "
                           outlined
                           class="inputgreen"
                           label="กรุณาระบุ"
@@ -623,7 +652,9 @@ onMounted(() => {
                   >
                   <q-option-group
                     class="check_box q-mt-sm"
-                    :disable="store.projectStatus === 'FINISH'"
+                    :disable="
+                      store.projectStatus === 'FINISH' || checkRoutePermission
+                    "
                     keep-color
                     color="primary"
                     dense
@@ -637,7 +668,10 @@ onMounted(() => {
                         <q-input
                           v-model="reasonPlanned10"
                           dense
-                          :disable="store.projectStatus === 'FINISH'"
+                          :readonly="
+                            store.projectStatus === 'FINISH' ||
+                            checkRoutePermission
+                          "
                           outlined
                           class="inputgreen"
                           label="กรุณาระบุ"
@@ -650,7 +684,9 @@ onMounted(() => {
             </div>
             <div class="col-12 col-sm-6 col-md-4">
               <q-input
-                :disable="store.projectStatus === 'FINISH'"
+                :readonly="
+                  store.projectStatus === 'FINISH' || checkRoutePermission
+                "
                 dense
                 outlined
                 v-model="formData.projectModalPlanned"
@@ -670,6 +706,7 @@ onMounted(() => {
                 <div class="row col-12 q-col-gutter-sm">
                   <div class="col-md-3">
                     <q-checkbox
+                      :disable="checkRoutePermission"
                       keep-color
                       color="primary"
                       dense
@@ -680,6 +717,7 @@ onMounted(() => {
                   </div>
                   <div class="col-12 col-md-4">
                     <q-input
+                      :readonly="checkRoutePermission"
                       class="inputgreen"
                       dense
                       outlined
@@ -693,6 +731,7 @@ onMounted(() => {
                 <div class="row col-12 q-col-gutter-sm">
                   <div class="col-12 col-md-3">
                     <q-checkbox
+                      :disable="checkRoutePermission"
                       keep-color
                       color="primary"
                       dense
@@ -703,6 +742,7 @@ onMounted(() => {
                   </div>
                   <div class="col-12 col-md-4">
                     <q-input
+                      :readonly="checkRoutePermission"
                       class="inputgreen"
                       dense
                       outlined
@@ -714,6 +754,7 @@ onMounted(() => {
                   </div>
                   <div class="col-12 col-md-4">
                     <q-input
+                      :readonly="checkRoutePermission"
                       class="inputgreen"
                       dense
                       outlined
@@ -733,6 +774,7 @@ onMounted(() => {
                       <q-option-group
                         class="check_box q-mt-sm"
                         keep-color
+                        :disable="checkRoutePermission"
                         color="primary"
                         dense
                         v-model="formData.developmentProjectTechniqueActuals"
@@ -743,6 +785,7 @@ onMounted(() => {
                         <div class="offset-4 col-8 q-mt-sm relative-position">
                           <div class="other_custom_input">
                             <q-input
+                              :readonly="checkRoutePermission"
                               v-model="reasonActual70"
                               dense
                               outlined
@@ -761,6 +804,7 @@ onMounted(() => {
                         class="check_box q-mt-sm"
                         keep-color
                         color="primary"
+                        :disable="checkRoutePermission"
                         dense
                         v-model="formData.developmentProjectTechniqueActuals"
                         :options="projectTechniquesOp2"
@@ -770,6 +814,7 @@ onMounted(() => {
                         <div class="offset-4 col-8 q-mt-sm relative-position">
                           <div class="other_custom_input">
                             <q-input
+                              :readonly="checkRoutePermission"
                               v-model="reasonActual20"
                               dense
                               outlined
@@ -787,6 +832,7 @@ onMounted(() => {
                       <q-option-group
                         class="check_box q-mt-sm"
                         keep-color
+                        :disable="checkRoutePermission"
                         color="primary"
                         dense
                         v-model="formData.developmentProjectTechniqueActuals"
@@ -799,6 +845,7 @@ onMounted(() => {
                             <q-input
                               v-model="reasonActual10"
                               dense
+                              :readonly="checkRoutePermission"
                               outlined
                               class="inputgreen"
                               label="กรุณาระบุ"
@@ -813,6 +860,7 @@ onMounted(() => {
                   <q-input
                     dense
                     class="inputgreen"
+                    :readonly="checkRoutePermission"
                     outlined
                     v-model="formData.projectModalActual"
                     label="จำนวน (รุ่น)"
@@ -826,9 +874,9 @@ onMounted(() => {
         </q-card-section>
       </q-card>
     </div>
-    <q-separator />
+    <q-separator v-if="!checkRoutePermission" />
 
-    <div class="text-right q-pa-sm">
+    <div class="text-right q-pa-sm" v-if="!checkRoutePermission">
       <q-btn
         unelevated
         label="บันทึก"
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index 6ba4f8eba..9f133d3f3 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -21,14 +21,15 @@ import type {
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
-
 const store = useDevelopmentDataStore();
 const route = useRoute();
 const projectId = ref<string>(route.params.id.toLocaleString());
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, success, dialogConfirm } = mixin;
-
+const checkRoutePermission = ref<boolean>(
+  route.name == "developmentDetailPage"
+);
 const plannedGoals = ref<ResPlannedGoals[]>([]);
 const plannedPeoples = ref<ResPeople[]>([]);
 const actualGoals = ref<ResActualGoals[]>([]);
@@ -482,7 +483,7 @@ onMounted(() => {
     <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
       เป้าหมายตามแผน
       <q-btn
-        v-if="store.projectStatus !== 'FINISH'"
+        v-if="store.projectStatus !== 'FINISH' && !checkRoutePermission"
         flat
         round
         dense
@@ -542,10 +543,12 @@ onMounted(() => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer vertical-top">
+            <q-tr :props="props" class="vertical-top">
               <q-td>
                 <q-btn
-                  v-if="store.projectStatus !== 'FINISH'"
+                  v-if="
+                    store.projectStatus !== 'FINISH' && !checkRoutePermission
+                  "
                   round
                   flat
                   color="primary"
@@ -618,10 +621,12 @@ onMounted(() => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+            <q-tr :props="props">
               <q-td>
                 <q-btn
-                  v-if="store.projectStatus !== 'FINISH'"
+                  v-if="
+                    store.projectStatus !== 'FINISH' && !checkRoutePermission
+                  "
                   round
                   flat
                   color="primary"
@@ -662,7 +667,14 @@ onMounted(() => {
   >
     <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
       เป้าหมายตามจริง
-      <q-btn flat round dense icon="add" color="primary">
+      <q-btn
+        v-if="!checkRoutePermission"
+        flat
+        round
+        dense
+        icon="add"
+        color="primary"
+      >
         <q-menu>
           <q-list style="min-width: 100px">
             <q-item
@@ -702,39 +714,17 @@ onMounted(() => {
         >
           <template v-slot:header="props">
             <q-tr :props="props">
+              <q-th auto-width />
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
-              <q-th auto-width />
             </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 v-if="col.name === 'posTypeActualId'">
-                  <div v-if="props.row.groupTarget !== 'OUTSIDERS'">
-                    {{ `- ${props.row.position}`
-                    }}{{
-                      props.row.posType !== null || props.row.posLevel !== null
-                        ? ` (${props.row.posType ? props.row.posType : ""}${
-                            props.row.posLevel ? " " + props.row.posLevel : ""
-                          })`
-                        : ""
-                    }}
-                  </div>
-                  <div v-else>
-                    {{ props.row.type ? props.row.type : "-" }}
-                  </div>
-                </div>
-                <div v-else class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-                <div v-else class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
+            <q-tr :props="props">
               <q-td>
                 <q-btn
+                  v-if="!checkRoutePermission"
                   round
                   flat
                   color="primary"
@@ -759,6 +749,29 @@ onMounted(() => {
                   <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
                 >
               </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name === 'posTypeActualId'">
+                  <div v-if="props.row.groupTarget !== 'OUTSIDERS'">
+                    {{ `- ${props.row.position}`
+                    }}{{
+                      props.row.posType !== null || props.row.posLevel !== null
+                        ? ` (${props.row.posType ? props.row.posType : ""}${
+                            props.row.posLevel ? " " + props.row.posLevel : ""
+                          })`
+                        : ""
+                    }}
+                  </div>
+                  <div v-else>
+                    {{ props.row.type ? props.row.type : "-" }}
+                  </div>
+                </div>
+                <div v-else class="table_ellipsis">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+                <div v-else class="table_ellipsis">
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
             </q-tr>
           </template>
         </d-table>
@@ -779,21 +792,17 @@ onMounted(() => {
         >
           <template v-slot:header="props">
             <q-tr :props="props">
+              <q-th auto-width />
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
-              <q-th auto-width />
             </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 :props="props">
               <q-td>
                 <q-btn
+                v-if="!checkRoutePermission"
                   round
                   flat
                   color="primary"
@@ -813,6 +822,11 @@ onMounted(() => {
                   <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
                 >
               </q-td>
+              <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>
diff --git a/src/modules/15_development/components/scholarship/DetailView.vue b/src/modules/15_development/components/scholarship/DetailView.vue
index 75ba552a6..0f3f08748 100644
--- a/src/modules/15_development/components/scholarship/DetailView.vue
+++ b/src/modules/15_development/components/scholarship/DetailView.vue
@@ -19,6 +19,9 @@ const fileBackReceived = ref<string>("");
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
+const checkRouteDetail = ref<boolean>(
+  route.name == "developmentScholarshipidDetail"
+);
 const {
   dialogConfirm,
   showLoader,
@@ -526,7 +529,11 @@ onMounted(() => {
         color="primary"
         @click="router.go(-1)"
       />
-      {{ `${title}ข้าราชการ ฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม` }}
+      {{
+        checkRouteDetail
+          ? "รายละเอียดข้าราชการ ฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม"
+          : `${title}ข้าราชการ ฯ ที่ได้รับทุนการศึกษา/ฝึกอบรม`
+      }}
     </div>
     <q-space />
     <q-btn
@@ -543,12 +550,14 @@ onMounted(() => {
     <div class="row q-ml-md" v-if="scholarshipId">
       <div class="q-gutter-sm" v-if="isStatus === 'PENDING'">
         <q-btn
+          v-if="!checkRouteDetail"
           unelevated
           color="green"
           label="เรียนจบ"
           @click="onClickUpdateStatus('GRADUATE')"
         />
         <q-btn
+          v-if="!checkRouteDetail"
           unelevated
           color="red"
           label="เรียนไม่จบ"
@@ -561,13 +570,14 @@ onMounted(() => {
     </div>
   </div>
 
-  <q-form greedy @submit.prevent @validation-success="onSubmit">
-    <q-card flat bordered class="col-12">
+  <q-card flat bordered class="col-12">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
       <div class="q-pa-md">
         <q-card bordered tyle="border: 1px solid #d6dee1">
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
             ข้อมูลราชการ
             <q-btn
+              v-if="!checkRouteDetail"
               flat
               dense
               icon="add"
@@ -626,6 +636,7 @@ onMounted(() => {
       <div class="row q-col-gutter-md q-pa-md" v-if="isGov">
         <div class="col-9">
           <q-select
+            :readonly="checkRouteDetail"
             dense
             outlined
             hide-bottom-space
@@ -653,6 +664,7 @@ onMounted(() => {
           "
         >
           <q-select
+            :readonly="checkRouteDetail"
             dense
             outlined
             hide-bottom-space
@@ -674,6 +686,7 @@ onMounted(() => {
 
         <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
           <q-radio
+            :disable="checkRouteDetail"
             v-model="formBody.planType"
             checked-icon="task_alt"
             unchecked-icon="panorama_fish_eye"
@@ -682,6 +695,7 @@ onMounted(() => {
             dense
           />
           <q-radio
+            :disable="checkRouteDetail"
             v-model="formBody.planType"
             checked-icon="task_alt"
             unchecked-icon="panorama_fish_eye"
@@ -701,6 +715,7 @@ onMounted(() => {
               autoApply
               year-picker
               :enableTimePicker="false"
+              :readonly="checkRouteDetail"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
@@ -708,6 +723,7 @@ onMounted(() => {
               }}</template>
               <template #trigger>
                 <q-input
+                  :readonly="checkRouteDetail"
                   dense
                   outlined
                   class="inputgreen"
@@ -740,6 +756,7 @@ onMounted(() => {
           </div>
           <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
             <q-select
+              :readonly="checkRouteDetail"
               dense
               outlined
               class="inputgreen"
@@ -759,6 +776,7 @@ onMounted(() => {
           </div>
           <div class="col-3">
             <q-input
+              :readonly="checkRouteDetail"
               dense
               outlined
               hide-bottom-space
@@ -779,6 +797,7 @@ onMounted(() => {
           </div>
           <div class="col-3">
             <q-checkbox
+              :disable="checkRouteDetail"
               keep-color
               color="primary"
               v-model="formBody.isNoUseBudget"
@@ -790,6 +809,7 @@ onMounted(() => {
         <div class="row col-12 q-col-gutter-md">
           <div class="col-3">
             <q-input
+              :readonly="checkRouteDetail"
               dense
               outlined
               class="inputgreen"
@@ -809,6 +829,7 @@ onMounted(() => {
               :locale="'th'"
               autoApply
               :enableTimePicker="false"
+              :readonly="checkRouteDetail"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
@@ -816,6 +837,7 @@ onMounted(() => {
               }}</template>
               <template #trigger>
                 <q-input
+                  :readonly="checkRouteDetail"
                   dense
                   outlined
                   class="inputgreen"
@@ -847,6 +869,7 @@ onMounted(() => {
               v-model="formBody.bookApproveDate"
               :locale="'th'"
               autoApply
+              :readonly="checkRouteDetail"
               :enableTimePicker="false"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
@@ -856,6 +879,7 @@ onMounted(() => {
               <template #trigger>
                 <q-input
                   dense
+                  :readonly="checkRouteDetail"
                   outlined
                   class="inputgreen"
                   :model-value="
@@ -884,6 +908,7 @@ onMounted(() => {
           </div>
           <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
             <q-checkbox
+              :disable="checkRouteDetail"
               keep-color
               color="primary"
               v-model="formBody.useOfficialTime"
@@ -894,6 +919,7 @@ onMounted(() => {
 
         <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-12">
           <q-input
+            :readonly="checkRouteDetail"
             outlined
             dense
             class="inputgreen"
@@ -913,6 +939,7 @@ onMounted(() => {
           <div class="row col-12 q-col-gutter-md">
             <div class="col-3">
               <q-input
+                :readonly="checkRouteDetail"
                 dense
                 outlined
                 lazy-rules
@@ -933,6 +960,7 @@ onMounted(() => {
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
+                :readonly="checkRouteDetail"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -941,6 +969,7 @@ onMounted(() => {
                 <template #trigger>
                   <q-input
                     dense
+                    :readonly="checkRouteDetail"
                     outlined
                     class="inputgreen"
                     :model-value="
@@ -970,6 +999,7 @@ onMounted(() => {
             <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
               <q-input
                 dense
+                :readonly="checkRouteDetail"
                 outlined
                 hide-bottom-space
                 lazy-rules
@@ -988,6 +1018,7 @@ onMounted(() => {
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
+                :readonly="checkRouteDetail"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -995,6 +1026,7 @@ onMounted(() => {
                 }}</template>
                 <template #trigger>
                   <q-input
+                    :readonly="checkRouteDetail"
                     dense
                     outlined
                     class="inputgreen"
@@ -1029,6 +1061,7 @@ onMounted(() => {
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
+                :readonly="checkRouteDetail"
               >
                 <template #year="{ year }">{{ year + 543 }}</template>
                 <template #year-overlay-value="{ value }">{{
@@ -1036,6 +1069,7 @@ onMounted(() => {
                 }}</template>
                 <template #trigger>
                   <q-input
+                    :readonly="checkRouteDetail"
                     dense
                     outlined
                     class="inputgreen"
@@ -1068,6 +1102,7 @@ onMounted(() => {
                 <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                   ข้อมูลผู้ค้ำประกัน
                   <q-btn
+                    v-if="!checkRouteDetail"
                     flat
                     dense
                     icon="add"
@@ -1128,6 +1163,7 @@ onMounted(() => {
               <div class="row q-col-gutter-md">
                 <div class="col-3">
                   <q-input
+                  :readonly="checkRouteDetail"
                     dense
                     outlined
                     lazy-rules
@@ -1143,6 +1179,7 @@ onMounted(() => {
                 </div>
                 <div class="col-3">
                   <q-input
+                  :readonly="checkRouteDetail"
                     dense
                     outlined
                     lazy-rules
@@ -1158,6 +1195,7 @@ onMounted(() => {
                 </div>
                 <div class="col-3">
                   <q-input
+                  :readonly="checkRouteDetail"
                     dense
                     outlined
                     lazy-rules
@@ -1174,6 +1212,7 @@ onMounted(() => {
                 <div class="col-3">
                   <q-input
                     dense
+                    :readonly="checkRouteDetail"
                     outlined
                     lazy-rules
                     hide-bottom-space
@@ -1189,6 +1228,7 @@ onMounted(() => {
                 <div class="col-6">
                   <q-input
                     dense
+                    :readonly="checkRouteDetail"
                     outlined
                     lazy-rules
                     hide-bottom-space
@@ -1209,6 +1249,7 @@ onMounted(() => {
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="checkRouteDetail"
                     @update:model-value="changeStartDate('startDate')"
                   >
                     <template #year="{ year }">{{ year + 543 }}</template>
@@ -1218,6 +1259,7 @@ onMounted(() => {
                     <template #trigger>
                       <q-input
                         dense
+                        :readonly="checkRouteDetail"
                         outlined
                         class="inputgreen"
                         :model-value="
@@ -1253,6 +1295,7 @@ onMounted(() => {
                     :enableTimePicker="false"
                     week-start="0"
                     :min-date="formBody.startDate"
+                    :readonly="checkRouteDetail"
                   >
                     <template #year="{ year }">{{ year + 543 }}</template>
                     <template #year-overlay-value="{ value }">{{
@@ -1261,6 +1304,7 @@ onMounted(() => {
                     <template #trigger>
                       <q-input
                         dense
+                        :readonly="checkRouteDetail"
                         outlined
                         class="inputgreen"
                         :model-value="
@@ -1289,6 +1333,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="สถานที่ไปศึกษาดูงาน"
@@ -1304,6 +1349,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="หัวข้อการไปศึกษาดูงาน"
@@ -1322,6 +1368,7 @@ onMounted(() => {
                     :locale="'th'"
                     autoApply
                     :enableTimePicker="false"
+                    :readonly="checkRouteDetail"
                     week-start="0"
                     @update:model-value="changeStartDate('studyStartDate')"
                   >
@@ -1333,6 +1380,7 @@ onMounted(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkRouteDetail"
                         class="inputgreen"
                         :model-value="
                           formBody.studyStartDate
@@ -1363,6 +1411,7 @@ onMounted(() => {
                     menu-class-name="modalfix"
                     v-model="formBody.studyEndDate"
                     :locale="'th'"
+                    :readonly="checkRouteDetail"
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
@@ -1376,6 +1425,7 @@ onMounted(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkRouteDetail"
                         class="inputgreen"
                         :model-value="
                           formBody.studyEndDate
@@ -1405,6 +1455,7 @@ onMounted(() => {
                 <div class="col-6">
                   <q-input
                     dense
+                    :readonly="checkRouteDetail"
                     outlined
                     lazy-rules
                     hide-bottom-space
@@ -1420,6 +1471,7 @@ onMounted(() => {
                 <div class="col-6">
                   <q-input
                     dense
+                    :readonly="checkRouteDetail"
                     outlined
                     lazy-rules
                     hide-bottom-space
@@ -1440,6 +1492,7 @@ onMounted(() => {
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="checkRouteDetail"
                     @update:model-value="
                       changeStartDate('studyAbroadStartDate')
                     "
@@ -1453,6 +1506,7 @@ onMounted(() => {
                         dense
                         outlined
                         class="inputgreen"
+                        :readonly="checkRouteDetail"
                         :model-value="
                           formBody.studyAbroadStartDate
                             ? date2Thai(formBody.studyAbroadStartDate)
@@ -1484,6 +1538,7 @@ onMounted(() => {
                     :locale="'th'"
                     autoApply
                     :enableTimePicker="false"
+                    :readonly="checkRouteDetail"
                     week-start="0"
                     :min-date="formBody.studyAbroadStartDate"
                     @update:model-value="
@@ -1501,6 +1556,7 @@ onMounted(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkRouteDetail"
                         class="inputgreen"
                         :model-value="
                           formBody.studyAbroadEndDate
@@ -1530,6 +1586,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="รวมระยะเวลาในการศึกษา"
@@ -1554,6 +1611,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="หลักสูตรการฝึกอบรม"
@@ -1570,6 +1628,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     label="สาขา"
                     class="inputgreen"
@@ -1584,6 +1643,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
@@ -1603,6 +1663,7 @@ onMounted(() => {
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
+                    :readonly="checkRouteDetail"
                     @update:model-value="changeStartDate('startDate')"
                   >
                     <template #year="{ year }">{{ year + 543 }}</template>
@@ -1613,6 +1674,7 @@ onMounted(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkRouteDetail"
                         class="inputgreen"
                         :model-value="
                           formBody.startDate
@@ -1643,6 +1705,7 @@ onMounted(() => {
                     menu-class-name="modalfix"
                     v-model="formBody.endDate"
                     :locale="'th'"
+                    :readonly="checkRouteDetail"
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
@@ -1656,6 +1719,7 @@ onMounted(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkRouteDetail"
                         class="inputgreen"
                         :model-value="
                           formBody.endDate ? date2Thai(formBody.endDate) : null
@@ -1684,6 +1748,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     label="สถานที่ไปศึกษาดูงาน"
                     class="inputgreen"
@@ -1698,6 +1763,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="หัวข้อการไปศึกษาดูงาน"
@@ -1714,6 +1780,7 @@ onMounted(() => {
                     menu-class-name="modalfix"
                     v-model="formBody.studyStartDate"
                     :locale="'th'"
+                    :readonly="checkRouteDetail"
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
@@ -1726,6 +1793,7 @@ onMounted(() => {
                     <template #trigger>
                       <q-input
                         dense
+                        :readonly="checkRouteDetail"
                         outlined
                         class="inputgreen"
                         :model-value="
@@ -1758,6 +1826,7 @@ onMounted(() => {
                     v-model="formBody.studyEndDate"
                     :locale="'th'"
                     autoApply
+                    :readonly="checkRouteDetail"
                     :enableTimePicker="false"
                     week-start="0"
                     :min-date="formBody.studyStartDate"
@@ -1775,6 +1844,7 @@ onMounted(() => {
                     <template #trigger>
                       <q-input
                         dense
+                        :readonly="checkRouteDetail"
                         outlined
                         class="inputgreen"
                         :model-value="
@@ -1806,6 +1876,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     label="รวมระยะเวลาในการฝึกอบรม"
                     class="inputgreen"
@@ -1829,6 +1900,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="หลักสูตรการฝึกอบรม"
@@ -1845,6 +1917,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     label="สาขา"
                     class="inputgreen"
@@ -1860,6 +1933,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
                     class="inputgreen"
@@ -1875,6 +1949,7 @@ onMounted(() => {
                     menu-class-name="modalfix"
                     v-model="formBody.startDate"
                     :locale="'th'"
+                    :readonly="checkRouteDetail"
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
@@ -1888,6 +1963,7 @@ onMounted(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkRouteDetail"
                         class="inputgreen"
                         :model-value="
                           formBody.startDate
@@ -1919,6 +1995,7 @@ onMounted(() => {
                     v-model="formBody.endDate"
                     :locale="'th'"
                     autoApply
+                    :readonly="checkRouteDetail"
                     :enableTimePicker="false"
                     week-start="0"
                     :min-date="formBody.startDate"
@@ -1930,6 +2007,7 @@ onMounted(() => {
                     <template #trigger>
                       <q-input
                         dense
+                        :readonly="checkRouteDetail"
                         outlined
                         class="inputgreen"
                         :model-value="
@@ -1958,6 +2036,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="สถานที่ไปศึกษาดูงานในประเทศ"
@@ -1974,6 +2053,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     label="หัวข้อการไปศึกษาดูงานในประเทศ"
                     class="inputgreen"
@@ -1989,6 +2069,7 @@ onMounted(() => {
                     menu-class-name="modalfix"
                     v-model="formBody.studyStartDate"
                     :locale="'th'"
+                    :readonly="checkRouteDetail"
                     autoApply
                     :enableTimePicker="false"
                     week-start="0"
@@ -2003,6 +2084,7 @@ onMounted(() => {
                         dense
                         outlined
                         class="inputgreen"
+                        :readonly="checkRouteDetail"
                         :model-value="
                           formBody.studyStartDate
                             ? date2Thai(formBody.studyStartDate)
@@ -2031,6 +2113,7 @@ onMounted(() => {
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="formBody.studyEndDate"
+                    :readonly="checkRouteDetail"
                     :locale="'th'"
                     autoApply
                     :enableTimePicker="false"
@@ -2052,6 +2135,7 @@ onMounted(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkRouteDetail"
                         class="inputgreen"
                         :model-value="
                           formBody.studyEndDate
@@ -2082,6 +2166,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="ประเทศที่เดินทางไปศึกษาดูงาน"
@@ -2097,6 +2182,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
@@ -2115,6 +2201,7 @@ onMounted(() => {
                     :locale="'th'"
                     autoApply
                     :enableTimePicker="false"
+                    :readonly="checkRouteDetail"
                     week-start="0"
                     @update:model-value="
                       changeStartDate('studyAbroadStartDate')
@@ -2128,6 +2215,7 @@ onMounted(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkRouteDetail"
                         class="inputgreen"
                         :model-value="
                           formBody.studyAbroadStartDate
@@ -2160,6 +2248,7 @@ onMounted(() => {
                     :locale="'th'"
                     autoApply
                     :enableTimePicker="false"
+                    :readonly="checkRouteDetail"
                     week-start="0"
                     :min-date="formBody.studyAbroadStartDate"
                     @update:model-value="
@@ -2178,6 +2267,7 @@ onMounted(() => {
                         dense
                         outlined
                         class="inputgreen"
+                        :readonly="checkRouteDetail"
                         :model-value="
                           formBody.studyAbroadEndDate
                             ? date2Thai(formBody.studyAbroadEndDate)
@@ -2206,6 +2296,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="รวมระยะเวลาในการศึกษา"
@@ -2230,6 +2321,7 @@ onMounted(() => {
                   <q-select
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     class="inputgreen"
@@ -2254,6 +2346,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     label="ระดับปริญญา"
                     class="inputgreen"
@@ -2270,6 +2363,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     class="inputgreen"
                     label="หลักสูตรการฝึกอบรม"
@@ -2286,6 +2380,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     label="สาขาวิชา"
                     class="inputgreen"
@@ -2302,6 +2397,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     label="คณะ"
                     class="inputgreen"
@@ -2317,6 +2413,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     lazy-rules
                     hide-bottom-space
                     label="สถาบันการศึกษา/หน่วยงานผู้จัด"
@@ -2335,6 +2432,7 @@ onMounted(() => {
                     v-model="formBody.startDate"
                     :locale="'th'"
                     autoApply
+                    :readonly="checkRouteDetail"
                     :enableTimePicker="false"
                     week-start="0"
                     @update:model-value="changeStartDate('startDate')"
@@ -2347,6 +2445,7 @@ onMounted(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkRouteDetail"
                         class="inputgreen"
                         :model-value="
                           formBody.startDate
@@ -2378,6 +2477,7 @@ onMounted(() => {
                     v-model="formBody.endDate"
                     :locale="'th'"
                     autoApply
+                    :readonly="checkRouteDetail"
                     :enableTimePicker="false"
                     week-start="0"
                     :min-date="formBody.startDate"
@@ -2390,6 +2490,7 @@ onMounted(() => {
                       <q-input
                         dense
                         outlined
+                        :readonly="checkRouteDetail"
                         class="inputgreen"
                         :model-value="
                           formBody.endDate ? date2Thai(formBody.endDate) : null
@@ -2418,6 +2519,7 @@ onMounted(() => {
                     dense
                     outlined
                     lazy-rules
+                    :readonly="checkRouteDetail"
                     hide-bottom-space
                     label="ประเทศที่ไปศึกษา ฝึกอบรม ประชุม ดูงาน และปฏิบัติการวิจัย"
                     class="inputgreen"
@@ -2444,6 +2546,7 @@ onMounted(() => {
                 dense
                 outlined
                 lazy-rules
+                :readonly="checkRouteDetail"
                 hide-bottom-space
                 class="inputgreen"
                 label="หลักสูตรการฝึกอบรม"
@@ -2459,6 +2562,7 @@ onMounted(() => {
                 dense
                 outlined
                 lazy-rules
+                :readonly="checkRouteDetail"
                 hide-bottom-space
                 class="inputgreen"
                 label="สถาบันการศึกษา/หน่วยงานผู้จัดการฝึกอบรม"
@@ -2475,6 +2579,7 @@ onMounted(() => {
                 v-model="formBody.startDate"
                 :locale="'th'"
                 autoApply
+                :readonly="checkRouteDetail"
                 :enableTimePicker="false"
                 week-start="0"
                 @update:model-value="changeStartDate('startDate')"
@@ -2489,6 +2594,7 @@ onMounted(() => {
                     dense
                     outlined
                     class="inputgreen"
+                    :readonly="checkRouteDetail"
                     :model-value="
                       formBody.startDate ? date2Thai(formBody.startDate) : null
                     "
@@ -2516,6 +2622,7 @@ onMounted(() => {
                 menu-class-name="modalfix"
                 v-model="formBody.endDate"
                 :locale="'th'"
+                :readonly="checkRouteDetail"
                 autoApply
                 :enableTimePicker="false"
                 week-start="0"
@@ -2529,6 +2636,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     class="inputgreen"
                     :model-value="
                       formBody.endDate ? date2Thai(formBody.endDate) : null
@@ -2558,6 +2666,7 @@ onMounted(() => {
                 dense
                 outlined
                 lazy-rules
+                :readonly="checkRouteDetail"
                 hide-bottom-space
                 label="สถานที่ไปศึกษาดูงานในประเทศ"
                 class="inputgreen"
@@ -2572,6 +2681,7 @@ onMounted(() => {
               <q-input
                 dense
                 outlined
+                :readonly="checkRouteDetail"
                 lazy-rules
                 hide-bottom-space
                 label="หัวข้อการไปศึกษาดูงานในประเทศ"
@@ -2588,6 +2698,7 @@ onMounted(() => {
                 menu-class-name="modalfix"
                 v-model="formBody.studyStartDate"
                 :locale="'th'"
+                :readonly="checkRouteDetail"
                 autoApply
                 :enableTimePicker="false"
                 week-start="0"
@@ -2601,6 +2712,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     class="inputgreen"
                     :model-value="
                       formBody.studyStartDate
@@ -2633,6 +2745,7 @@ onMounted(() => {
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
+                :readonly="checkRouteDetail"
                 week-start="0"
                 :min-date="formBody.studyStartDate"
                 @update:model-value="
@@ -2650,6 +2763,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     class="inputgreen"
                     :model-value="
                       formBody.studyEndDate
@@ -2681,6 +2795,7 @@ onMounted(() => {
                 dense
                 outlined
                 lazy-rules
+                :readonly="checkRouteDetail"
                 hide-bottom-space
                 label="ประเทศที่ไปศึกษาดูงาน"
                 class="inputgreen"
@@ -2696,6 +2811,7 @@ onMounted(() => {
                 dense
                 outlined
                 lazy-rules
+                :readonly="checkRouteDetail"
                 hide-bottom-space
                 label="หัวข้อการไปศึกษาดูงานต่างประเทศ"
                 class="inputgreen"
@@ -2712,6 +2828,7 @@ onMounted(() => {
                 v-model="formBody.studyAbroadStartDate"
                 :locale="'th'"
                 autoApply
+                :readonly="checkRouteDetail"
                 :enableTimePicker="false"
                 week-start="0"
                 @update:model-value="changeStartDate('studyAbroadStartDate')"
@@ -2724,6 +2841,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     class="inputgreen"
                     :model-value="
                       formBody.studyAbroadStartDate
@@ -2756,6 +2874,7 @@ onMounted(() => {
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
+                :readonly="checkRouteDetail"
                 week-start="0"
                 :min-date="formBody.studyAbroadStartDate"
                 @update:model-value="
@@ -2773,6 +2892,7 @@ onMounted(() => {
                   <q-input
                     dense
                     outlined
+                    :readonly="checkRouteDetail"
                     class="inputgreen"
                     :model-value="
                       formBody.studyAbroadEndDate
@@ -2803,6 +2923,7 @@ onMounted(() => {
                 dense
                 outlined
                 lazy-rules
+                :readonly="checkRouteDetail"
                 hide-bottom-space
                 label="รวมระยะเวลาในการฝึกอบรม "
                 class="inputgreen"
@@ -2816,15 +2937,14 @@ onMounted(() => {
           </div>
         </div>
       </div>
-
-      <q-separator v-if="isGov"/>
-      <q-card-actions align="right" v-if="isGov">
-          <q-btn label="บันทึก" color="secondary" type="submit"
-            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-          >
-        </q-card-actions>
+      <q-separator v-if="isGov && !checkRouteDetail" />
+      <q-card-actions align="right" v-if="isGov && !checkRouteDetail">
+        <q-btn label="บันทึก" color="secondary" type="submit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-form>
     </q-card>
-  </q-form>
 
   <DialogGov v-model:modal="modalDialogGov" :up-date="upDate" />
 </template>
diff --git a/src/modules/15_development/router.ts b/src/modules/15_development/router.ts
index 6c387c797..ad1063244 100644
--- a/src/modules/15_development/router.ts
+++ b/src/modules/15_development/router.ts
@@ -1,6 +1,7 @@
 const mainPage = () => import("@/modules/15_development/views/MainPage.vue");
 const mainForm = () =>
   import("@/modules/15_development/components/MainTab.vue");
+
 const developmentHistory = () =>
   import("@/modules/15_development/views/History.vue");
 const employeeHistory = () =>
@@ -17,6 +18,8 @@ const historyEmployeeEdit = () =>
   import("@/modules/15_development/components/historyEmployee/AddPage.vue");
 const ScholarshipDetail = () =>
   import("@/modules/15_development/components/scholarship/DetailView.vue");
+const ScholarshipDetailById = () =>
+  import("@/modules/15_development/components/scholarship/DetailView.vue");
 // const historyAdd = () =>
 //   import("@/modules/15_development/components/history/AddPage.vue");
 // const StrategicView = () =>
@@ -24,6 +27,8 @@ const ScholarshipDetail = () =>
 
 const RecordPage = () =>
   import("@/modules/15_development/views/RecordPage.vue");
+const mainFormDetail = () =>
+  import("@/modules/15_development/components/MainTab.vue");
 export default [
   {
     path: "/development",
@@ -55,6 +60,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/development-detail/:id",
+    name: "developmentDetailPage",
+    component: mainFormDetail,
+    meta: {
+      Auth: true,
+      Key: "SYS_DEV_PROJECT",
+      Role: "STAFF",
+    },
+  },
   {
     path: "/development/record/:id",
     name: "developmentRecordPage",
@@ -135,6 +150,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/development/scholarship-detail/:id",
+    name: "developmentScholarshipidDetail",
+    component: ScholarshipDetailById,
+    meta: {
+      Auth: true,
+      Key: "SYS_DEV_SCHOLARSHIP",
+      Role: "STAFF",
+    },
+  },
   // {
   //   path: "/development/history/add",
   //   name: "developmentHistoryAdd",
diff --git a/src/modules/15_development/views/EmployeeHistory.vue b/src/modules/15_development/views/EmployeeHistory.vue
index 8d5e59ff8..324b0524a 100644
--- a/src/modules/15_development/views/EmployeeHistory.vue
+++ b/src/modules/15_development/views/EmployeeHistory.vue
@@ -4,7 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReportXLSX from "@/plugins/genreportxlsx";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 
 import type {
   NewPagination,
@@ -14,9 +14,10 @@ import type {
 /** importStore*/
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
-
+import { checkPermission } from "@/utils/permissions";
 /** use*/
 const router = useRouter();
+const route = useRoute();
 const store = useDevelopmentDataStore();
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
@@ -183,8 +184,10 @@ function onDownload(type: string) {
  * @param id id ของ row
  */
 function onEdit(id: string) {
-  store.statusEdit = true;
-  router.push(`/development/employee-history/${id}`);
+  if (checkPermission(route)?.attrIsUpdate !== false) {
+    store.statusEdit = true;
+    router.push(`/development/employee-history/${id}`);
+  }
 }
 
 /** ดึงข้อมูล */
@@ -322,7 +325,10 @@ onMounted(() => {
       <q-toolbar class="col-4 text-white q-pa-none q-gutter-x-sm">
         <q-space />
         <q-btn
-          v-if="formFilter.root !== null"
+          v-if="
+            formFilter.root !== null &&
+            checkPermission($route)?.attrIsGet !== false
+          "
           flat
           round
           dense
@@ -422,19 +428,27 @@ onMounted(() => {
         </template>
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th auto-width></q-th>
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="onEdit(props.row.id)"
-            >
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                flat
+                round
+                dense
+                icon="mdi-eye"
+                color="info"
+                @click="onEdit(props.row.id)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div class="table_ellipsis">
                 {{ col.value ? col.value : "-" }}
               </div>
diff --git a/src/modules/15_development/views/History.vue b/src/modules/15_development/views/History.vue
index ce096448c..600ae5cdd 100644
--- a/src/modules/15_development/views/History.vue
+++ b/src/modules/15_development/views/History.vue
@@ -22,6 +22,7 @@ import type { ResHistory } from "@/modules/15_development/interface/response/Mai
  */
 import { useDevelopmentDataStore } from "@/modules/15_development/store/developmentStore";
 import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 
 /** use*/
 const router = useRouter();
@@ -347,7 +348,7 @@ onMounted(() => {
         <q-space />
 
         <q-btn
-          v-if="formFilter.root !== null"
+          v-if="formFilter.root !== null && checkPermission($route)?.attrIsGet !== false"
           flat
           round
           dense
@@ -431,6 +432,7 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th auto-width v-if="checkPermission($route)?.attrIsGet"></q-th>
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
@@ -438,12 +440,23 @@ onMounted(() => {
         </template>
 
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr :props="props">
+            <q-td auto-width v-if="checkPermission($route)?.attrIsGet">
+              <q-btn
+                flat
+                round
+                dense
+                icon="mdi-eye"
+                color="info"
+                @click="onEdit(props.row.id)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+            </q-td>
             <q-td
               v-for="col in props.cols"
               :key="col.name"
               :props="props"
-              @click="onEdit(props.row.id)"
             >
               <div class="table_ellipsis">
                 {{ col.value ? col.value : "-" }}
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 7f38ce850..2b520e005 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/src/modules/15_development/views/MainPage.vue
@@ -5,7 +5,7 @@ import { useRouter } from "vue-router";
 import genReportXLSX from "@/plugins/genreportxlsx";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import { checkPermission } from "@/utils/permissions";
 /**importType*/
 import type {
   DataOption,
@@ -296,6 +296,14 @@ watch(
   }
 );
 
+/**
+ * function redirect หน้าบันทึกผล
+ * @param id โครงการ
+ */
+function onDetail(id: string) {
+  router.push(`/development-detail/${id}`);
+}
+
 /** ดึงข้อมูลเมื่อโหลดหน้าเสร็จสิ้น */
 onMounted(() => {
   fetchActive();
@@ -433,14 +441,23 @@ onMounted(() => {
             @update:model-value="fetchListProjectNew"
           />
           <q-toolbar-title>
-            <q-btn flat round dense icon="add" color="primary" @click="onAdd()">
-              <q-tooltip>เพิ่ม</q-tooltip>
+            <q-btn
+              v-if="checkPermission($route)?.attrIsCreate"
+              flat
+              round
+              dense
+              icon="add"
+              color="primary"
+              @click="onAdd()"
+            >
+              <q-tooltip>เพิ่มข้อมูล</q-tooltip>
             </q-btn>
           </q-toolbar-title>
 
           <q-space />
 
           <q-btn
+            v-if="checkPermission($route)?.attrIsGet"
             flat
             round
             dense
@@ -508,32 +525,57 @@ onMounted(() => {
           >
             <template v-slot:header="props">
               <q-tr :props="props">
-                <q-th v-if="formQuery.status === 'FINISH'" auto-width />
+                <q-th auto-width />
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-if="formQuery.status === 'FINISH'">
+              <q-tr :props="props">
+                <q-td>
                   <q-btn
+                    v-if="checkPermission($route)?.attrIsGet"
                     flat
                     round
+                    dense
+                    color="info"
+                    icon="mdi-eye"
+                    @click.pervent="onDetail(props.row.id)"
+                  >
+                    <q-tooltip>รายละเอียด</q-tooltip></q-btn
+                  >
+                  <q-btn
+                    v-if="
+                      checkPermission($route)?.attrIsUpdate &&
+                      checkPermission($route)?.attrIsGet
+                    "
+                    flat
+                    round
+                    dense
+                    color="edit"
+                    icon="edit"
+                    @click.pervent="onClickAddOrView(true, props.row.id)"
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
+                  >
+                  <q-btn
+                    v-if="
+                      formQuery.status === 'FINISH' &&
+                      checkPermission($route)?.attrIsUpdate &&
+                      checkPermission($route)?.attrIsGet
+                    "
+                    flat
+                    round
+                    dense
                     color="public"
                     icon="mdi-content-save-edit-outline"
-                    size="12px"
                     @click.pervent="onRedirectToRecordPage(props.row.id)"
                   >
                     <q-tooltip>บันทึกผล</q-tooltip></q-btn
                   >
                 </q-td>
-                <q-td
-                  v-for="col in props.cols"
-                  :key="col.name"
-                  :props="props"
-                  @click.pervent="onClickAddOrView(true, props.row.id)"
-                >
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div class="table_ellipsis">
                     {{ col.value ? col.value : "-" }}
                   </div>
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index d0e834468..6a22d6f90 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/src/modules/15_development/views/Scholarship.vue
@@ -4,7 +4,7 @@ import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import { checkPermission } from "@/utils/permissions";
 import genReportXLSX from "@/plugins/genreportxlsx";
 
 import type {
@@ -202,6 +202,10 @@ watch(
   }
 );
 
+function onDetail(id: string) {
+  router.push(`/development/scholarship-detail/${id}`);
+}
+
 /** ดึงข้อมูลเมื่ออยู่ในหน้า */
 onMounted(() => {
   fetchList();
@@ -278,6 +282,7 @@ onMounted(() => {
       </div>
 
       <q-btn
+        v-if="checkPermission($route)?.attrIsCreate"
         flat
         round
         dense
@@ -285,22 +290,11 @@ onMounted(() => {
         color="primary"
         @click="onClickAddOrView()"
       >
-        <q-tooltip>เพิ่ม</q-tooltip>
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
 
       <q-space />
       <div class="row q-gutter-sm">
-        <!-- <q-btn
-          flat
-          round
-          dense
-          icon="mdi-arrow-down-bold-circle-outline"
-          color="blue"
-          @click="onDownload"
-        >
-          <q-tooltip>ดาวน์โหลด</q-tooltip>
-        </q-btn> -->
-
         <q-input
           standout
           dense
@@ -355,19 +349,42 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
+            <q-th auto-width></q-th>
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="onClickAddOrView(true, props.row.id)"
-            >
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                icon="mdi-eye"
+                color="info"
+                @click="onDetail(props.row.id)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                dense
+                round
+                icon="edit"
+                color="edit"
+                @click="onClickAddOrView(true, props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div class="table_ellipsis">
                 {{ col.value ? col.value : "-" }}
               </div>