diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 3e642aa5a..f63a60e0f 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -6,6 +6,8 @@ const orgProfile = `${env.API_URI}/org/profile`;
 const orgEmployeePos = `${env.API_URI}/org/employee/pos`;
 
 export default {
+  keycloakPosition: () => `${organization}/profile/keycloak/position`,
+
   /** โครงสร้างอัตรากำลัง*/
   activeOrganization: `${organization}/active`,
   orgByid: (id: string) => `${organization}/${id}`,
diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 902d5b476..990f035a2 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -20,6 +20,7 @@ const urlFile = `${env.API_URI}/salary`;
 
 const kpiGroup = `${env.API_URI}/kpi/group`;
 const kpiLink = `${env.API_URI}/kpi/link`;
+const placementKeycloak = `${env.API_URI}/placement/officer/profileId`;
 
 export default {
   KPI,
@@ -68,7 +69,8 @@ export default {
 
   kpiLink,
 
-  profilePosition: () => `${env.API_URI}/org/profile/keycloak/position`,
+  profilePosition: () => `${env.API_URI}/org/profile/profileid/position`,
+  placementKeycloak,
 
   /** Report*/
   kpiReport: () => `${KPI}/report/announcement`,
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index beae6906e..18e1cf255 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -275,11 +275,11 @@ const menuList = readonly<any[]>([
         path: "appoint-employee",
         role: "placement",
       },
-      {
-        label: "ออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง",
-        path: "changePositions",
-        role: "placement",
-      },
+      // {
+      //   label: "ออกคำสั่งย้ายสับเปลี่ยนตำแหน่ง",
+      //   path: "changePositions",
+      //   role: "placement",
+      // },
       {
         label: "รายการอื่นๆ",
         path: "other",
diff --git a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
index 44365a5bf..348be8ed2 100644
--- a/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
+++ b/src/modules/02_organizationalNew/components/DialogSelectPerson.vue
@@ -687,6 +687,7 @@ watch([() => page.value, () => pageSize.value], () => {
                           active-color="primary"
                           color="dark"
                           :max="totalPage"
+                           :max-pages="5"
                           size="sm"
                           boundary-links
                           direction-links
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
index 8736fa91d..6f3edb9d4 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
@@ -16,14 +16,14 @@
   <q-card flat bordered class="col-12">
     <q-form ref="myForm">
       <q-card-section class="q-pa-md">
-        <div class="col-xs-12 col-sm-8"></div>
-        <div class="col-12 row items-center q-col-gutter-x-sm">
+        <div class="col-12 row q-col-gutter-sm">
           <div class="col-xs-12 col-sm-8">
             <q-input
               outlined
               v-model="name"
               label="ชื่อรอบสอบแข่งขัน"
               dense
+              hide-bottom-space
               lazy-rules
               :rules="[(val) => !!val || `${'กรุณากรอกชื่อรอบสอบแข่งขัน'}`]"
             ></q-input>
@@ -57,8 +57,8 @@
                 <q-input
                   dense
                   outlined
-                  :model-value="yearly + 543"
                   :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
+                  :model-value="yearly + 543"
                   :label="`${'ปีงบประมาณ'}`"
                 >
                   <template v-slot:prepend>
@@ -79,15 +79,15 @@
               v-model="fee"
               type="number"
               label="ค่าธรรมเนียม"
-              dense
               lazy-rules
-              input-class="text-right"
+              dense
               :rules="[
                 (val) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
               ]"
+              input-class="text-right"
             ></q-input>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-4 col-md-3" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="dateExam"
@@ -107,10 +107,9 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -145,7 +144,8 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  hide-bottom-space
+                  class="full-width datepicker"
                   :model-value="
                     dateAnnouncement != null
                       ? dateThaiRange(dateAnnouncement)
@@ -187,12 +187,11 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="
                     dateRegister != null ? dateThaiRange(dateRegister) : null
                   "
                   :label="`${'วันที่สมัคร'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -227,12 +226,11 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="
                     datePayment != null ? dateThaiRange(datePayment) : null
                   "
                   :label="`${'วันที่ชำระเงิน'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -267,12 +265,11 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker"
                   :model-value="
                     dateAnnounce != null ? date2Thai(dateAnnounce) : null
                   "
                   :label="`${'วันประกาศผลสอบ'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
                 >
                   <template v-slot:prepend>
                     <q-icon
@@ -637,7 +634,6 @@
               v-model="note"
               label="หมายเหตุ"
               dense
-              lazy-rules
               type="textarea"
             />
           </div>
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 41321aad3..aee88b5bd 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -743,7 +743,6 @@ function clearInsigniaFilters(name: string) {
 onMounted(async () => {
   organizationOptions.value = await DataStore.optionsTypeOc;
   organization.value = await DataStore.typeOc;
-  console.log(organization.value);
 
   if (organization.value !== "" || organization.value !== undefined) {
     if (props.fecthInsigniaByOc) {
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index 9d8fa1ce7..612b57e11 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -63,7 +63,7 @@ async function fecthlistRound() {
         DataStore.roundId = round.value;
         roundName.value = lastValue.name;
         await fecthStat(round.value);
-        await fecthAgency();
+        // await fecthAgency();
       }
     })
     .catch((err) => {
@@ -92,47 +92,59 @@ const fecthStat = async (id: string) => {
 
 /** funcion เช็คหน่วยงาน*/
 async function fecthAgency() {
-  showLoader();
   await http
-    .get(config.API.insigniaAgency())
+    .get(config.API.keycloakPosition())
     .then(async (res) => {
       loadview.value = true;
-      DataStore.agency = res.data.result;
+      DataStore.agency = res.data.result.rootId;
       DataStore.typeOc = DataStore.agency;
-      if (roleDataStore.adminRole) {
-        await fecthType(); // ถ้าไม่มีหนวยงานจะเรียกหน่วยงานทั้งหมด
-      } else {
-      }
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
       loading.value = true;
-      hideLoader();
     });
 }
 
-/** funcion เรียกหน่อยวงาน*/
-async function fecthType() {
-  await http
-    .get(config.API.typeOc())
+function fetchActiveId() {
+  http
+    .get(config.API.activeOrganization)
     .then((res) => {
-      optiontypeOc.value = res.data.result.map((e: any) => ({
-        id: e.organizationId,
-        name: e.organizationName,
-      }));
-      DataStore.fetchOption(optiontypeOc.value); //ค่าของหน่วยงานทั้งหมดไว้ที่  DataStore
+      const data = res.data.result;
+      fetchListOrg(data.activeId);
     })
     .catch((err) => {
       messageError($q, err);
     });
 }
+function fetchListOrg(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByid(id))
+    .then(async (res) => {
+      const data = await res.data.result.map((item: any) => ({
+        id: item.orgTreeId,
+        name: item.orgName,
+      }));
+      optiontypeOc.value = data;
+      DataStore.fetchOption(optiontypeOc.value); //ค่าของหน่วยงานทั้งหมดไว้ที่  DataStore
+      fecthAgency();
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+
 
 /**function เรียกประเภทเครื่องราช*/
 async function fecthInsignia() {
   await http
-    .get(config.API.insignia)
+    .get(config.API.insigniaOrg)
     .then((res) => {
       let data = res.data.result;
       DataStore.fetchInsigniaType(data);
@@ -397,6 +409,7 @@ async function uploadFile(event: any) {
 onMounted(async () => {
   tab.value = DataStore.mainTab;
   await fecthlistRound();
+  await fetchActiveId();
   DataStore.dataInsigniaType.length === 0 && (await fecthInsignia());
 });
 </script>
@@ -652,13 +665,13 @@ onMounted(async () => {
 
     <!-- popup หมายเหตุ -->
     <DialogPopupReason
-    v-model:modal="modalPopupBackToEdit"
+      v-model:modal="modalPopupBackToEdit"
       title="หมายเหตุการตีกลับ"
       label="หมายเหตุ"
       :savaForm="backToEdit"
     />
     <DialogPopupReason
-    v-model:modal="modalbackInsignia2Role"
+      v-model:modal="modalbackInsignia2Role"
       title="หมายเหตุการตีกลับ"
       label="หมายเหตุ"
       :savaForm="backToEditinsignia2Role"
diff --git a/src/modules/07_insignia/components/4_Allocate/Main.vue b/src/modules/07_insignia/components/4_Allocate/Main.vue
index ed15c5e94..fdb96235e 100644
--- a/src/modules/07_insignia/components/4_Allocate/Main.vue
+++ b/src/modules/07_insignia/components/4_Allocate/Main.vue
@@ -134,7 +134,7 @@ async function fecthRound() {
 /** function เรียกประเภทเครื่องราช*/
 async function fecthInsignia() {
   await http
-    .get(config.API.insignia)
+    .get(config.API.insigniaOrg)
     .then((res) => {
       let data = res.data.result;
       DataStore.fetchDatainsignia(data);
@@ -151,7 +151,7 @@ async function fecthInsignia() {
 
 /** function เรียก Tab*/
 const fecthInsigniaType = async () => {
-  await http(config.API.insigniaType)
+  await http(config.API.insigniaTypeOrg)
     .then((res) => {
       let data = res.data.result;
       DataStore.fetchDatainsigniaType(data);
diff --git a/src/modules/07_insignia/components/5_Borrow/Main.vue b/src/modules/07_insignia/components/5_Borrow/Main.vue
index f9cb701b9..36646d4e0 100644
--- a/src/modules/07_insignia/components/5_Borrow/Main.vue
+++ b/src/modules/07_insignia/components/5_Borrow/Main.vue
@@ -307,7 +307,7 @@ async function fecthRound() {
 /** function เรียกประเภทเครื่องราชฯ*/
 async function fecthInsignia() {
   await http
-    .get(config.API.insignia)
+    .get(config.API.insigniaOrg)
     .then((res) => {
       let data = res.data.result;
       DataStore.fetchDataInsignia(data);
@@ -324,7 +324,7 @@ async function fecthInsignia() {
 
 /** function เรียกระดับเครื่องราชฯ Tab*/
 async function fecthInsigniaType() {
-  await http(config.API.insigniaType)
+  await http(config.API.insigniaTypeOrg)
     .then(async (res) => {
       let data = res.data.result;
       DataStore.fetchDatainsigniaType(data);
diff --git a/src/modules/07_insignia/storeAllocate.ts b/src/modules/07_insignia/storeAllocate.ts
index a217bd841..3413c5f33 100644
--- a/src/modules/07_insignia/storeAllocate.ts
+++ b/src/modules/07_insignia/storeAllocate.ts
@@ -23,7 +23,7 @@ export const useAllocateDataStore = defineStore("insigniaallocate", () => {
       insigniaOp.value.push({
         name: `${e.name} (${e.shortName})`,
         id: e.id,
-        type: e.insigniaType.id,
+        type: e.insigniaTypeId,
       });
     });
     data.forEach((e: any) => {
diff --git a/src/modules/07_insignia/storeBrrow.ts b/src/modules/07_insignia/storeBrrow.ts
index dcc46b22e..27f7d8791 100644
--- a/src/modules/07_insignia/storeBrrow.ts
+++ b/src/modules/07_insignia/storeBrrow.ts
@@ -41,7 +41,7 @@ export const useBrrowDataStore = defineStore("insigniaBrrow", () => {
       insigniaOp.value.push({
         name: `${e.name} (${e.shortName})`,
         id: e.id,
-        type: e.insigniaType.id,
+        type: e.insigniaTypeId,
       });
     });
     data.forEach((e: any) => {
diff --git a/src/modules/07_insignia/storeResult.ts b/src/modules/07_insignia/storeResult.ts
index c798aab84..a2a3c8806 100644
--- a/src/modules/07_insignia/storeResult.ts
+++ b/src/modules/07_insignia/storeResult.ts
@@ -43,9 +43,10 @@ export const useResultDataStore = defineStore("insigniaResult", () => {
       insigniaOp.value.push({
         name: `${e.name} (${e.shortName})`,
         id: e.id,
-        insigniaType: e.insigniaType.id,
+        insigniaType: e.insigniaTypeId,
       });
     });
+
     data.forEach((e: any) => {
       insigniaOp2.value.push({ name: `${e.name} (${e.shortName})`, id: e.id });
     });
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 1d5b908e1..38f55ea6a 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -254,7 +254,7 @@ async function fecthRound() {
 /** function เรียกประเภทเครื่องราช*/
 async function fecthInsignia() {
   await http
-    .get(config.API.insignia)
+    .get(config.API.insigniaOrg)
     .then((res) => {
       let data = res.data.result;
       DataStore.fetchDatainsignia(data);
@@ -266,7 +266,7 @@ async function fecthInsignia() {
 
 /** function เรียกระดับเครื่องราช*/
 async function fecthInsigniaType() {
-  await http(config.API.insigniaType)
+  await http(config.API.insigniaTypeOrg)
     .then((res) => {
       let data = res.data.result;
       DataStore.fetchDatainsigniaType(data);
@@ -299,6 +299,7 @@ watch(tab, () => {
   if (tab.value !== "doc") {
     DataStore.insignia = "";
     fecthlistInsignia();
+
     insigniaTypeOption.value = DataStore.insigniaOp.filter(
       (e: any) => e.insigniaType == tab.value || e.name == "ทั้งหมด"
     );
diff --git a/src/modules/14_KPI/components/Tab/01_Assessment.vue b/src/modules/14_KPI/components/Tab/01_Assessment.vue
index f4a73105b..460465566 100644
--- a/src/modules/14_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/14_KPI/components/Tab/01_Assessment.vue
@@ -199,14 +199,22 @@ watch(
   }
 );
 
-onMounted(() => {
-  getCriteria();
-  fetchListPlanned();
-  fetchListRole();
-  fetchAssigned();
-  setTimeout(() => {
-    hideLoader();
-  }, 1000);
+onMounted(async () => {
+  showLoader();
+  try {
+    await Promise.all([
+      getCriteria(),
+      fetchListPlanned(),
+      fetchListRole(),
+      fetchAssigned(),
+    ]);
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    setTimeout(() => {
+      hideLoader();
+    }, 4000);
+  }
 });
 </script>
 
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
new file mode 100644
index 000000000..1ddd1bc9b
--- /dev/null
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+import type { QTableProps } from "quasar";
+import { ref,watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const {
+  dialogConfirm,
+  success,
+  showLoader,
+  hideLoader,
+  messageError,
+  findPosMasterNoOld,
+  findOrgNameOld,
+  date2Thai,
+} = mixin;
+
+const route = useRoute();
+const router = useRouter();
+const id = ref<string>(route.params.id as string)
+const modal = defineModel<boolean>("modal", { required: true });
+const filterKeyword = ref<string>("");
+const rows = ref<any[]>([]);
+
+//หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix}${row.firstName} ${row.lastName}`;
+    },
+  },
+  {
+    name: "posMasterNoOld",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNoOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return findPosMasterNoOld(row);
+    },
+  },
+  {
+    name: "positionOld",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLevel",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "positionLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      let name = "";
+      if (row.posTypeNameOld && row.posLevelNameOld) {
+        name = `${row.posTypeNameOld} (${row.posLevelNameOld})`;
+      } else if (row.posTypeNameOld) {
+        name = `${row.posTypeNameOld}`;
+      } else if (row.posLevelNameOld) {
+        name = `(${row.posLevelNameOld})`;
+      } else name = "-";
+      return name;
+    },
+  },
+  {
+    name: "organizationPositionOld",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val, row) => findOrgNameOld(row),
+  },
+  {
+    name: "organization",
+    align: "left",
+    label: "หน่วยงานที่ให้ช่วยราชการ",
+    sortable: true,
+    field: "organization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "วันเริ่มช่วยราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "dateEnd",
+    align: "left",
+    label: "วันสิ้นสุดการช่วยราชการ",
+    sortable: true,
+    field: "dateEnd",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่ดำเนินการ",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => date2Thai(val),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val) => statusText(val),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "posMasterNoOld",
+  "positionOld",
+  "positionLevel",
+  "organizationPositionOld",
+  "organization",
+  "dateStart",
+  "dateEnd",
+  "createdAt",
+  "status",
+]);
+
+const statusText = (val: string) => {
+  switch (val) {
+    case "WAITTING":
+      return "รอดำเนินการ";
+    case "PENDING":
+      return "เลือกตำแหน่งแล้ว";
+    case "APPROVE":
+      return "อนุมัติ";
+    case "REJECT":
+      return "ไม่อนุมัติ";
+    case "REPORT":
+      return "ส่งรายชื่อไปออกคำสั่ง";
+    case "DONE":
+      return "ออกคำสั่งเสร็จแล้ว";
+
+    default:
+      return "-";
+  }
+};
+
+function close() {
+  modal.value = false;
+}
+
+function getData(){
+    showLoader()
+    http
+    .get(config.API.placementKeycloak+`/${id.value}`)
+    .then((res)=>{
+        const data = res.data.result
+        rows.value = data
+    }).catch((e)=>{
+        messageError($q,e)
+    }).finally(()=>{
+        hideLoader()
+    })
+}
+watch(()=>modal.value,(n)=>{
+    if(n == true){
+        getData()
+    }
+})
+</script>
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card bordered style="min-width: 80vw">
+      <DialogHeader tittle="ข้อมูลการช่วยราชการ" :close="close" />
+      <q-separator />
+      <q-card-section>
+        <div class="row">
+          <div class="col-12">
+            <d-table
+              ref="table"
+              :columns="columns"
+              :rows="rows"
+              :filter="filterKeyword"
+              row-key="id"
+              flat
+              bordered
+              :paging="true"
+              dense
+              :rows-per-page-options="[10, 25, 50, 100]"
+              :visible-columns="visibleColumns"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                </q-tr>
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td v-for="col in props.cols" :key="col.id">
+                    <div v-if="col.name === 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <!-- <template v-slot:pagination="scope">
+                ทั้งหมด {{ total }} รายการ
+                <q-pagination
+                  v-model="formQuery.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="Number(totalList)"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                  :max-pages="5"
+                  @update:model-value="fetchList"
+                ></q-pagination>
+              </template> -->
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
new file mode 100644
index 000000000..1ad994b67
--- /dev/null
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+const route = useRoute();
+
+const work = ref<boolean>(false);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+
+const modal = defineModel<boolean>("modal", { required: true });
+const profileId = defineModel<string>("profileId", { required: true });
+
+function close() {
+  modal.value = false;
+}
+
+function getData() {
+  showLoader();
+  http
+    .get(config.API.profilePosition() + `/${profileId.value}`)
+    .then((res) => {
+      const data = res.data.result.isProbation;
+      work.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+watch(
+  () => modal.value,
+  (n) => {
+    if (n == true) {
+      getData();
+    }
+  }
+);
+</script>
+<template>
+  <q-dialog persistent v-model="modal">
+    <q-card bordered style="min-width: 20vw">
+      <DialogHeader tittle="สถานะการทดลองงาน" :close="close" />
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <div class="row">
+          <div class="col-12 text-center bg-grey-1 q-pa-md rounded-borders">
+            <span class="text-weight-bold text-teal">{{
+              work ? `อยู่ระหว่างทดลองงาน` : "พ้นจากการทดลองงาน"
+            }}</span>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/14_KPI/components/Tab/TabMain.vue b/src/modules/14_KPI/components/Tab/TabMain.vue
index 645a44c3f..78e97ad3b 100644
--- a/src/modules/14_KPI/components/Tab/TabMain.vue
+++ b/src/modules/14_KPI/components/Tab/TabMain.vue
@@ -43,14 +43,6 @@ const splitterModel = ref<number>(12);
         class="text-grey-7 text-weight-light"
         active-class="bg-blue-1 text-blue-8 text-weight-bold"
       >
-        <!-- <q-tab
-          class="hover-tab"
-          v-for="(tab, index) in itemsTab"
-          :key="index"
-          :name="tab.name"
-          :icon="tab.icon"
-          :label="tab.label"
-        /> -->
         <q-tab name="1" label="จัดทำข้อตกลง" />
         <q-tab
           name="2"
@@ -62,12 +54,7 @@ const splitterModel = ref<number>(12);
           label="รายงานผลสำเร็จของงาน"
           :disable="store.tabOpen < 3"
         />
-        <!-- <q-tab name="3" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไป</div>
-        </q-tab>
-        <q-tab name="4" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไปอีกชั้นหนึ่ง</div>
-        </q-tab> -->
+
         <q-tab name="5" label="ไฟล์เอกสาร" />
       </q-tabs>
     </template>
diff --git a/src/modules/14_KPI/interface/index/Main.ts b/src/modules/14_KPI/interface/index/Main.ts
index e0114d8f9..6ed8b34ab 100644
--- a/src/modules/14_KPI/interface/index/Main.ts
+++ b/src/modules/14_KPI/interface/index/Main.ts
@@ -2,6 +2,10 @@ interface DataOption {
   id: string;
   name: string;
 }
+interface ItemsTab {
+  label: string;
+  name: string;
+}
 
 interface ItemsMenu {
   label: string;
@@ -61,4 +65,13 @@ interface FormData {
   qualification: string;
 }
 
-export type { DataOption, ItemsMenu,NewPagination,typeOp,ResponsePreson,tableType,FormData };
+export type {
+  DataOption,
+  ItemsMenu,
+  NewPagination,
+  typeOp,
+  ResponsePreson,
+  tableType,
+  FormData,
+  ItemsTab,
+};
diff --git a/src/modules/14_KPI/interface/response/KPI.ts b/src/modules/14_KPI/interface/response/KPI.ts
new file mode 100644
index 000000000..952de3b9f
--- /dev/null
+++ b/src/modules/14_KPI/interface/response/KPI.ts
@@ -0,0 +1,27 @@
+interface ResUserEvaluation {
+  capacityPoint: null;
+  commanderHighId: null | string;
+  commanderId: null | string;
+  createdAt: string;
+  durationKPI: string;
+  evaluationReqEdit: null | string;
+  evaluationResults: string;
+  evaluationStatus: string;
+  evaluatorId: string;
+  firstName: string;
+  id: string;
+  kpiPeriodId: string;
+  lastName: string;
+  plannedPoint: null | string;
+  posExecutiveName: null | string;
+  posLevelName: string;
+  posTypeName: string;
+  position: string;
+  prefix: string;
+  profileId: string;
+  rolePoint: null | string;
+  specialPoint: null | string;
+  year: number;
+}
+
+export type { ResUserEvaluation };
diff --git a/src/modules/14_KPI/router.ts b/src/modules/14_KPI/router.ts
index 2b8312b23..79c2d697e 100644
--- a/src/modules/14_KPI/router.ts
+++ b/src/modules/14_KPI/router.ts
@@ -13,6 +13,7 @@ const roundPage = () => import("@/modules/14_KPI/views/round.vue");
 const listPage = () => import("@/modules/14_KPI/views/list.vue");
 const detailPage = () => import("@/modules/14_KPI/views/detail.vue");
 const reportPage = () => import("@/modules/14_KPI/views/report.vue");
+const detailView = () => import("@/modules/14_KPI/views/detailView.vue");
 
 export default [
   {
@@ -25,97 +26,7 @@ export default [
       Role: "evaluateKPI",
     },
   },
-  // {
-  //   path: "/KPI-indicator-plan",
-  //   name: "KPIIndicatorByPlan",
-  //   component: IndicatorByPlan,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [1.1],
-  //     Role: "evaluateKPI",
-  //   },
-  // },
-  // {
-  //   path: "/KPI-indicator-plan/add",
-  //   name: "KPIIndicatorByPlan/Add",
-  //   component: IndicatorByPlanDetail,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [1.1],
-  //     Role: "evaluateKPI",
-  //   },
-  // },
-  // {
-  //   path: "/KPI-indicator-plan/:id",
-  //   name: "KPIIndicatorByPlanByid",
-  //   component: IndicatorByPlanDetail,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [1.1],
-  //     Role: "evaluateKPI",
-  //   },
-  // },
-  // {
-  //   path: "/KPI-indicator-role",
-  //   name: "KPIIndicatorByRole",
-  //   component: IndicatorByRole,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [1.1],
-  //     Role: "evaluateKPI",
-  //   },
-  // },
-  // {
-  //   path: "/KPI-indicator-role/add",
-  //   name: "KPIIndicatorByRoleAdd",
-  //   component: IndicatorByRoleDetail,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [1.1],
-  //     Role: "evaluateKPI",
-  //   },
-  // },
-  // {
-  //   path: "/KPI-indicator-role/:id",
-  //   name: "KPIIndicatorByRoleByid",
-  //   component: IndicatorByRoleDetail,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [1.1],
-  //     Role: "evaluateKPI",
-  //   },
-  // },
-  // {
-  //   path: "/KPI-competency",
-  //   name: "KPICompetency",
-  //   component: competencyPage,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [1.1],
-  //     Role: "evaluateKPI",
-  //   },
-  // },
-  // {
-  //   path: "/KPI-competency/add",
-  //   name: "KPICompetencyAdd",
-  //   component: competencyAddPage,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [1.1],
-  //     Role: "evaluateKPI",
-  //   },
-  // },
 
-  // {
-  //   path: "/KPI-competency/:id",
-  //   name: "KPICompetencyByid",
-  //   component: competencyAddPage,
-  //   meta: {
-  //     Auth: true,
-  //     Key: [1.1],
-  //     Role: "evaluateKPI",
-  //   },
-  // },
   {
     path: "/KPI-list",
     name: "KPI​List",
@@ -129,7 +40,7 @@ export default [
   {
     path: "/KPI-list/:id",
     name: "KPIDetail",
-    component: detailPage,
+    component: detailView,
     meta: {
       Auth: true,
       Key: [1.1],
@@ -146,4 +57,15 @@ export default [
       Role: "evaluateKPI",
     },
   },
+
+  {
+    path: "/KPI-list/new/:id",
+    name: "KPIDetailnew",
+    component: detailView,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
 ];
diff --git a/src/modules/14_KPI/views/detail.vue b/src/modules/14_KPI/views/detail.vue
index e9cc7831d..324e79c47 100644
--- a/src/modules/14_KPI/views/detail.vue
+++ b/src/modules/14_KPI/views/detail.vue
@@ -59,14 +59,13 @@ async function fetchEvaluation() {
     .get(config.API.kpiUserEvaluation + `/${id.value}`)
     .then(async (res) => {
       const data = await res.data.result;
-
       store.dataEvaluation = await data;
       formProfile.status = store.convertStatus(data.evaluationStatus);
       formProfile.result = store.convertResults(data.evaluationResults);
       await store.checkCompetency();
       await store.checkCompetencyDefaultCompetencyLevel();
 
-      fetchProfile(data.profileId);
+      await fetchProfile(data.profileId);
 
       plannedPoint.value = data.plannedPoint == null ? "" : data.plannedPoint;
       rolePoint.value = data.rolePoint == null ? "" : data.rolePoint;
diff --git a/src/modules/14_KPI/views/detailView.vue b/src/modules/14_KPI/views/detailView.vue
new file mode 100644
index 000000000..4dd286777
--- /dev/null
+++ b/src/modules/14_KPI/views/detailView.vue
@@ -0,0 +1,719 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive, computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import Avatar from "@/assets/!avatar_user.jpg";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import Assessment from "@/modules/14_KPI/components/Tab/01_Assessment.vue";
+import File from "@/modules/14_KPI/components/Tab/05_File.vue";
+import DialogGovernment from "@/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue";
+import DialogStatus from "@/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue";
+
+import type {
+  DataOption,
+  ItemsTab,
+} from "@/modules/14_KPI/interface/index/Main";
+import type { ResUserEvaluation } from "@/modules/14_KPI/interface/response/KPI";
+
+import { useKpiDataStore } from "@/modules/14_KPI/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const store = useKpiDataStore();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } =
+  useCounterMixin();
+
+const kpiId = ref<string>(route.params.id as string);
+const profileId = ref<string>("");
+
+/** Header*/
+const dataEvaluation = ref<ResUserEvaluation>();
+const avartarProfile = ref<string>("");
+
+function fetchEvaluation() {
+  http
+    .get(config.API.kpiUserEvaluation + `/${kpiId.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      store.dataEvaluation = data;
+      dataEvaluation.value = data;
+      profileId.value = data.profileId;
+      fetchProfile(data.profileId);
+      fetchProfilePosition(data.profileId);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      if (store.dataEvaluation) {
+        Promise.all([
+          store.checkStep(),
+          store.checkCompetency(),
+          store.checkCompetencyDefaultCompetencyLevel(),
+        ]);
+      }
+    });
+}
+function fetchProfilePosition(id: string) {
+  http
+    .get(config.API.profilePosition() + `/${id}`)
+    .then((res) => {
+      const data = res.data.result;
+      store.dataProfile = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+function sendToEvaluatore(status: string) {
+  dialogConfirm(
+    $q,
+    () => {
+      if (kpiId.value) {
+        showLoader();
+        http
+          .put(config.API.kpiSendToStatus(kpiId.value), {
+            status: status,
+          })
+          .then(() => {
+            success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
+            close();
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      }
+    },
+    "ยืนยันการส่งข้อตกลงให้ผู้ประเมินอนุมัติ",
+    "ต้องการยืนยันส่งข้อตกลงนี้ให้ผู้ประเมินอนุมัติใช่หรือไม่?"
+  );
+}
+function requireEdit() {
+  dialogConfirm(
+    $q,
+    () => {
+      if (kpiId.value) {
+        showLoader();
+        http
+          .put(config.API.kpiReqEdit(kpiId.value), {
+            status: "EVALUATOR",
+          })
+          .then((res) => {
+            success($q, "ขอแก้ไขสำเร็จ");
+            close();
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      }
+    },
+    "ยืนยันการขอแก้ไขข้อตกลง",
+    "ต้องการยืนยันการขอแก้ไขข้อตกลงนี้ใช่หรือไม่?"
+  );
+}
+function fetchProfile(id: string) {
+  http
+    .get(
+      config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
+    )
+    .then((res) => {
+      avartarProfile.value = res.data.downloadUrl;
+    })
+    .catch(() => {
+      avartarProfile.value = Avatar;
+    });
+}
+
+/** Dialog  ข้อมูลผู้ประเมิน*/
+const modal = ref<boolean>(false);
+const evaluatorIdOp = ref<DataOption[]>([]);
+const commanderIdOp = ref<DataOption[]>([]);
+const commanderHighOp = ref<DataOption[]>([]);
+const evaluatorIdMainOp = ref<DataOption[]>([]);
+const commanderIdMainOp = ref<DataOption[]>([]);
+const commanderHighMainOp = ref<DataOption[]>([]);
+const evaluatorId = ref<any>(null);
+const commanderId = ref<any>(null);
+const commanderHighId = ref<any>(null);
+
+function openDialogAssessor() {
+  modal.value = true;
+  fetchListAssessor();
+}
+function closeDialogAssessor() {
+  modal.value = false;
+  evaluatorId.value = null;
+  commanderId.value = null;
+  commanderHighId.value = null;
+}
+function onSubmit() {
+  dialogConfirm($q, () => {
+    if (kpiId.value) {
+      showLoader();
+      http
+        .put(config.API.kpiEvaluationCheck + `/${kpiId.value}`, {
+          evaluatorId: evaluatorId.value ? evaluatorId.value.id : null,
+          commanderId: commanderId.value ? commanderId.value.id : null,
+          commanderHighId: commanderHighId.value
+            ? commanderHighId.value.id
+            : null,
+        })
+        .then(() => {
+          close();
+          fetchEvaluation();
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  });
+}
+function fetchListAssessor() {
+  http
+    .get(config.API.Kpiorg)
+    .then((res) => {
+      const data = res.data.result;
+      evaluatorIdMainOp.value = data.caregiver.map((i: any) => ({
+        id: i.id,
+        name: `${i.prefix}${i.firstName} ${i.lastName}`,
+      }));
+      commanderIdMainOp.value = data.commander.map((i: any) => ({
+        id: i.id,
+        name: `${i.prefix}${i.firstName} ${i.lastName}`,
+      }));
+      commanderHighMainOp.value = data.chairman.map((i: any) => ({
+        id: i.id,
+        name: `${i.prefix}${i.firstName} ${i.lastName}`,
+      }));
+
+      evaluatorId.value = data.caregiver
+        .map((i: any) => ({
+          id: i.id,
+          name: `${i.prefix}${i.firstName} ${i.lastName}`,
+        }))
+        .find((i: any) => i.id == store.dataEvaluation.evaluatorId);
+      commanderId.value = data.caregiver
+        .map((i: any) => ({
+          id: i.id,
+          name: `${i.prefix}${i.firstName} ${i.lastName}`,
+        }))
+        .find((i: any) => i.id == store.dataEvaluation.commanderId);
+      commanderHighId.value = data.caregiver
+        .map((i: any) => ({
+          id: i.id,
+          name: `${i.prefix}${i.firstName} ${i.lastName}`,
+        }))
+        .find((i: any) => i.id == store.dataEvaluation.commanderHighId);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+function filterOption(val: any, update: Function, refData: string) {
+  switch (refData) {
+    case "evaluatorIdOp":
+      update(() => {
+        evaluatorIdOp.value = evaluatorIdMainOp.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "commanderIdOp":
+      update(() => {
+        commanderIdOp.value = commanderIdMainOp.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    case "commanderHighOp":
+      update(() => {
+        commanderHighOp.value = commanderHighMainOp.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
+
+const modalGovernment = ref<boolean>(false);
+function openGovernment() {
+  modalGovernment.value = true;
+}
+
+const modalStatus = ref<boolean>(false);
+function openStatus() {
+  modalStatus.value = true;
+}
+
+/** ์ Body*/
+const splitterModel = ref<number>(15);
+const itemsTab = ref<ItemsTab[]>([
+  {
+    name: "1",
+    label: "จัดทำแบบฟอร์มการประเมิน",
+  },
+  {
+    name: "2",
+    label: "รายงานความก้าวหน้า",
+  },
+  {
+    name: "3",
+    label: "รายงานผลสำเร็จของงาน",
+  },
+  {
+    name: "5",
+    label: "ไฟล์เอกสาร",
+  },
+]);
+
+onMounted(() => {
+  fetchEvaluation();
+});
+</script>
+
+<template>
+  <div class="toptitle col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.push(`/KPI-list`)"
+    />
+    รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล
+  </div>
+
+  <!-- Profile -->
+  <q-card>
+    <q-card-section style="padding: 0px">
+      <div
+        class="absolute-center-left"
+        style="left: 2%; top: 50%; transform: translateY(-50%)"
+      >
+        <q-avatar size="90px">
+          <q-img :src="avartarProfile" />
+        </q-avatar>
+      </div>
+      <div class="row col-12">
+        <div class="row items-center col-12 q-pa-sm">
+          <div class="col-12" style="padding-left: 12%">
+            <div class="row col-12 items-center">
+              <span class="text-h6 text-weight-medium text-primary">
+                {{
+                  `${dataEvaluation?.prefix ?? ""}${
+                    dataEvaluation?.firstName
+                  } ${dataEvaluation?.lastName}`
+                }}
+              </span>
+              <q-space />
+              <div class="q-gutter-x-sm">
+                <span
+                  class="text-red"
+                  v-if="
+                    (store.dataEvaluation.posExecutiveName == null &&
+                      store.indicatorWeightTotal != 100) ||
+                    (store.dataEvaluation.posExecutiveName != null &&
+                      (store.indicatorWeight1Total != 100 ||
+                        store.indicatorWeight2Total != 20))
+                  "
+                  >*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
+                >
+                <q-btn
+                  v-if="
+                    store.rolePerson == 'USER' &&
+                    store.dataEvaluation.evaluationStatus == 'NEW'
+                  "
+                  :disabled="
+                    (store.dataEvaluation.posExecutiveName == null &&
+                      store.indicatorWeightTotal != 100) ||
+                    (store.dataEvaluation.posExecutiveName != null &&
+                      (store.indicatorWeight1Total != 100 ||
+                        store.indicatorWeight2Total != 20))
+                  "
+                  unelevated
+                  round
+                  icon="mdi-send"
+                  color="grey-2"
+                  text-color="blue-6"
+                  size="md"
+                >
+                  <q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
+                </q-btn>
+
+                <q-btn
+                  v-if="
+                    store.rolePerson == 'USER' &&
+                    store.dataEvaluation.evaluationStatus == 'EVALUATING'
+                  "
+                  unelevated
+                  round
+                  icon="mdi-send"
+                  color="grey-2"
+                  text-color="blue-6"
+                  size="md"
+                  @click="sendToEvaluatore('EVALUATING_EVALUATOR')"
+                >
+                  <q-tooltip>ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip>
+                </q-btn>
+
+                <q-btn
+                  v-if="
+                    store.rolePerson == 'USER' &&
+                    store.tabOpen < 3 &&
+                    store.dataEvaluation.evaluationStatus != 'NEW' &&
+                    (store.dataEvaluation.evaluationReqEdit == null ||
+                      store.dataEvaluation.evaluationReqEdit == 'DONE')
+                  "
+                  :disabled="store.dataEvaluation.evaluatorId == null"
+                  unelevated
+                  round
+                  icon="mdi-file-edit"
+                  color="grey-2"
+                  text-color="red-6"
+                  size="md"
+                  @click="requireEdit()"
+                >
+                  <q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
+                </q-btn>
+
+                <q-btn
+                  unelevated
+                  round
+                  icon="mdi-account"
+                  color="grey-2"
+                  text-color="edit"
+                  size="md"
+                  @click="openDialogAssessor"
+                >
+                  <q-tooltip>{{
+                    dataEvaluation?.evaluationStatus === "NEW" &&
+                    store.rolePerson === "USER"
+                      ? "แก้ไขผู้ประเมิน"
+                      : "ข้อมูลผู้ประเมิน"
+                  }}</q-tooltip>
+                </q-btn>
+                <q-btn
+                  unelevated
+                  round
+                  icon="mdi-file-eye-outline"
+                  color="grey-2"
+                  text-color="primary"
+                  size="md"
+                  @click="openGovernment"
+                >
+                  <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
+                </q-btn>
+                <q-btn
+                  unelevated
+                  round
+                  color="grey-2"
+                  text-color="blue-5"
+                  icon="mdi-file-eye-outline"
+                  size="md"
+                  @click="openStatus"
+                >
+                  <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="row items-center bg-toolbar col-12 q-pa-sm">
+          <div class="col-12 q-py-xs" style="padding-left: 12%">
+            <div class="row no-wrap">
+              <div class="col-2">
+                <div class="column">
+                  <span class="text-grey-6">ตำแหน่งในสายงาน</span>
+                  <span class="text-weight-medium text-dark">
+                    {{ dataEvaluation?.position }}
+                  </span>
+                </div>
+              </div>
+              <div class="col-2">
+                <div class="column">
+                  <span class="text-grey-6">ประเภทตำแหน่ง</span>
+                  <span class="text-weight-medium text-dark">
+                    {{ dataEvaluation?.posTypeName }}
+                  </span>
+                </div>
+              </div>
+              <div class="col-2">
+                <div class="column">
+                  <span class="text-grey-6">ระดับตำแหน่ง</span>
+                  <span class="text-weight-medium text-dark">
+                    {{ dataEvaluation?.posLevelName }}
+                  </span>
+                </div>
+              </div>
+              <div class="col-2">
+                <div class="column">
+                  <span class="text-grey-6">สถานะการประเมิน</span>
+                  <span class="text-weight-medium text-dark">
+                    {{
+                      dataEvaluation?.evaluationStatus
+                        ? store.convertStatus(dataEvaluation?.evaluationStatus)
+                        : "-"
+                    }}
+                  </span>
+                </div>
+              </div>
+              <div class="col-2">
+                <div class="column">
+                  <span class="text-grey-6">ผลการประเมิน</span>
+                  <span class="text-weight-medium text-dark">
+                    {{
+                      dataEvaluation?.evaluationResults
+                        ? store.convertResults(dataEvaluation.evaluationResults)
+                        : "-"
+                    }}
+                    ผลการประเมิน
+                  </span>
+                </div>
+              </div>
+              <div class="col-2">
+                <div class="column">
+                  <span class="text-grey-6">คะแนนประเมิน</span>
+                  <span class="text-weight-medium text-primary">
+                    คะแนนประเมิน
+                    {{
+                      dataEvaluation?.posExecutiveName === null
+                        ? (
+                            store.indicatorScoreVal +
+                            store.competencyScoreVal +
+                            store.devScoreVal
+                          ).toFixed(2)
+                        : (
+                            store.excusiveIndicator1ScoreVal +
+                            store.excusiveIndicator2ScoreVal +
+                            store.competencyScoreVal
+                          ).toFixed(2)
+                    }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card-section>
+  </q-card>
+
+  <q-card class="q-mt-md">
+    <q-card-section style="padding: 0px">
+      <q-splitter v-model="splitterModel" disable>
+        <template v-slot:before>
+          <q-tabs
+            v-model="store.tabMain"
+            vertical
+            class="text-grey-7 text-weight-light"
+            active-class="bg-blue-1 text-blue-8 text-weight-bold"
+          >
+            <q-tab name="1" label="จัดทำข้อตกลง" />
+            <q-tab
+              name="2"
+              label="รายงานความก้าวหน้า"
+              :disable="store.tabOpen < 2"
+            />
+            <q-tab
+              name="3"
+              label="รายงานผลสำเร็จของงาน"
+              :disable="store.tabOpen < 3"
+            />
+
+            <q-tab name="5" label="ไฟล์เอกสาร" />
+          </q-tabs>
+        </template>
+
+        <template v-slot:after>
+          <q-tab-panels
+            v-model="store.tabMain"
+            animated
+            swipeable
+            vertical
+            transition-prev="jump-up"
+            transition-next="jump-up"
+          >
+            <q-tab-panel
+              v-for="(tab, index) in itemsTab"
+              :key="index"
+              :name="tab.name"
+              class="q-pa-none"
+            >
+              <Assessment v-if="store.tabMain === '1'" />
+              <Assessment v-if="store.tabMain === '2'" />
+              <Assessment v-if="store.tabMain === '3'" />
+              <File v-if="store.tabMain === '5'" />
+            </q-tab-panel>
+          </q-tab-panels>
+        </template> </q-splitter
+    ></q-card-section>
+  </q-card>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card bordered style="width: 50vh">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="
+            store.dataEvaluation.evaluationStatus === 'NEW' &&
+            store.rolePerson === 'USER'
+              ? 'แก้ไขผู้ประเมิน'
+              : 'ข้อมูลผู้ประเมิน'
+          "
+          :close="closeDialogAssessor"
+        />
+        <q-separator />
+        <q-card-section>
+          <div class="column q-gutter-sm">
+            <q-select
+              :readonly="
+                !(
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER'
+                )
+              "
+              v-model="evaluatorId"
+              outlined
+              label="ผู้ประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="evaluatorIdOp"
+              class="inputgreen"
+              map-options
+              hide-bottom-space
+              lazy-rules
+              :rules="[ (val:string) => !!val ||
+            `${'กรุณาเลือกผู้ประเมิน'}`, ]"
+              use-input
+              @filter="(inputValue:any,
+            doneFn:Function) => filterOption(inputValue, doneFn,'evaluatorIdOp'
+            ) "
+            />
+            <q-select
+              :readonly="
+                !(
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER'
+                )
+              "
+              v-model="commanderId"
+              outlined
+              label="ผู้บังคับบัญชาเหนือขึ้นไป"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="commanderIdOp"
+              map-options
+              class="inputgreen"
+              use-input
+              @filter="(inputValue:any,
+                    doneFn:Function) => filterOption(inputValue, doneFn,'commanderIdOp'
+                    ) "
+            >
+              <template
+                v-if="
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER' &&
+                  commanderId
+                "
+                v-slot:append
+              >
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="commanderId = null"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
+            <q-select
+              :readonly="
+                !(
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER'
+                )
+              "
+              v-model="commanderHighId"
+              outlined
+              label="ผู้บังคับบัญชาเหนือขึ้นไปอีกชั้นหนึ่ง"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="commanderHighOp"
+              map-options
+              use-input
+              class="inputgreen"
+              @filter="(inputValue:any,
+                    doneFn:Function) => filterOption(inputValue, doneFn,'commanderHighOp'
+                    ) "
+            >
+              <template
+                v-if="
+                  store.dataEvaluation.evaluationStatus === 'NEW' &&
+                  store.rolePerson === 'USER' &&
+                  commanderHighId
+                "
+                v-slot:append
+              >
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="commanderHighId = null"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions
+          v-if="
+            store.dataEvaluation.evaluationStatus === 'NEW' &&
+            store.rolePerson === 'USER'
+          "
+          align="right"
+          class="bg-white text-teal"
+        >
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <DialogGovernment v-model:modal="modalGovernment" />
+  <DialogStatus v-model:modal="modalStatus" :profileId="profileId" />
+</template>
+
+<style scoped>
+.bg-toolbar {
+  background-color: #f2fbfa;
+}
+
+.absolute-center-left {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>