From 4f973738a397cee95d3d5343793c75d881fa9cd0 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Fri, 28 Jun 2024 11:28:40 +0700
Subject: [PATCH] KPI

---
 src/api/14_KPI/api.KPI.ts                     |    8 +-
 .../14_KPI/components/Tab/01_Assessment.vue   |   90 +-
 .../Tab/Dialog/01_FormIndicator.vue           |   55 +-
 .../Tab/Dialog/DialogCommentProgress.vue      |  526 +++++---
 .../Tab/Dialog/DialogCompetncyByRow.vue       |  195 +++
 .../Tab/Dialog/DialogGovernment.vue           |   43 +-
 .../components/Tab/Dialog/DialogLevel.vue     |  178 +++
 .../components/Tab/Dialog/DialogStatus.vue    |   27 +-
 .../Tab/DialogEvaluate/01_Indicator.vue       |    7 +-
 .../Tab/DialogEvaluate/02_Competenct.vue      |    1 +
 .../components/Tab/Topic/01_Indicator.vue     |  126 +-
 .../components/Tab/Topic/02_Competency.vue    |  228 +++-
 src/modules/14_KPI/interface/request/index.ts |    3 +-
 src/modules/14_KPI/store.ts                   |   42 +-
 src/modules/14_KPI/views/detailView.vue       | 1100 +++++++++++------
 15 files changed, 1896 insertions(+), 733 deletions(-)
 create mode 100644 src/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
 create mode 100644 src/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue

diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index 990f035a2..b8fd56c69 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -21,6 +21,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`;
+const orgPosition = `${env.API_URI}/org/profile/profileid/position`;
 
 export default {
   KPI,
@@ -69,9 +70,12 @@ export default {
 
   kpiLink,
 
-  profilePosition: () => `${env.API_URI}/org/profile/profileid/position`,
+  profilePosition:`${env.API_URI}/org/profile/profileid/position`,
   placementKeycloak,
-
+  profilePositionKey: () => `${env.API_URI}/org/profile/keycloak/position`,
   /** Report*/
   kpiReport: () => `${KPI}/report/announcement`,
+  sendToCommander: `${KpiUser}/evaluation/admin/change-status`,
+  sendToSummary: (id: string) => `${kpiEvaluation}/summary/${id}`,
+  updatePoint: (id: string) => `${kpiEvaluation}/point/${id}`,
 };
diff --git a/src/modules/14_KPI/components/Tab/01_Assessment.vue b/src/modules/14_KPI/components/Tab/01_Assessment.vue
index 460465566..68292deb4 100644
--- a/src/modules/14_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/14_KPI/components/Tab/01_Assessment.vue
@@ -21,14 +21,8 @@ const dataListCriteria = ref<ListCriteria[]>([]);
 const modalCriteria = ref<boolean>(false);
 const $q = useQuasar();
 const route = useRoute();
-const {
-  hideLoader,
-  messageError,
-  date2Thai,
-  success,
-  showLoader,
-  dialogRemove,
-} = useCounterMixin();
+const { hideLoader, messageError, success, showLoader, dialogRemove } =
+  useCounterMixin();
 const store = useKpiDataStore();
 
 const evaluationId = ref<string>(route.params.id.toString());
@@ -152,10 +146,6 @@ function fetchAssigned() {
     });
 }
 
-function onInfo() {
-  modalCriteria.value = true;
-}
-
 function getCriteria() {
   http
     .get(config.API.KpiEvaluationInfo)
@@ -169,7 +159,7 @@ function getCriteria() {
 }
 
 const isShowScore = computed(() => {
-  return store.tabOpen === 3 && store.tabMain === "3";
+  return store.tabMain === "3";
 });
 
 watch(
@@ -195,32 +185,40 @@ watch(
 
       store.indicatorScoreVal =
         store.indicatorPercentVal * (store.indicatorScore / 100);
+
+      if (store.isUpdate && store.tabMain === "3") {
+        http
+          .put(config.API.updatePoint(evaluationId.value), {
+            totalPoint1: (
+              store.indicatorPercentVal *
+              (store.indicatorScore / 100)
+            ).toFixed(2),
+            summaryPoint: (
+              store.indicatorScoreVal +
+              store.competencyScoreVal +
+              store.devScoreVal
+            ).toFixed(2),
+          })
+          .then((res) => {});
+      }
     }
   }
 );
 
-onMounted(async () => {
-  showLoader();
-  try {
-    await Promise.all([
-      getCriteria(),
-      fetchListPlanned(),
-      fetchListRole(),
-      fetchAssigned(),
-    ]);
-  } catch (err) {
-    messageError($q, err);
-  } finally {
-    setTimeout(() => {
-      hideLoader();
-    }, 4000);
-  }
+onMounted(() => {
+  getCriteria();
+  fetchListPlanned();
+  fetchListRole();
+  fetchAssigned();
+  setTimeout(() => {
+    hideLoader();
+  }, 1000);
 });
 </script>
 
 <template>
   <q-scroll-area
-    style="height: 100vh"
+    style="height: 100vh; width: auto"
     class="bg-white row col-12 text-dark q-pa-md"
   >
     <div class="text-weight-bold text-body2">
@@ -229,7 +227,12 @@ onMounted(async () => {
     </div>
     <div class="q-gutter-md q-mt-sm">
       <!-- องค์ประกอบที่ 1 -->
-      <div v-if="store.dataEvaluation.posExecutiveName != null">
+      <div
+        v-if="
+          store.dataEvaluation.posTypeName == 'อำนวยการ' &&
+          store.dataEvaluation.posTypeName == 'บริหาร'
+        "
+      >
         <Work
           v-model:data="rows_01"
           :title="`มิติที่ 1 ภารกิจตามนโยบายและยุทธศาสตร์ของกรุงเทพมหานคร`"
@@ -415,16 +418,6 @@ onMounted(async () => {
       <div class="text-weight-bold text-body2 q-mb-sm">
         <span class="txt-under text-blue-6">องค์ประกอบที่ 2</span>
         <span class="q-ml-sm"> พฤติกรรมการปฎิบัติราชการ (สมรรถนะ)</span>
-        <q-btn
-          flat
-          icon="info"
-          color="info"
-          round
-          class="q-ml-xs"
-          @click="onInfo"
-        >
-          <q-tooltip>เกณฑ์การประเมิน</q-tooltip>
-        </q-btn>
       </div>
 
       <Competency v-model:dataListCriteria="dataListCriteria" />
@@ -437,7 +430,8 @@ onMounted(async () => {
         :rows="[
           {
             name: `สรุปผลการประเมินสมรรถนะ (คะแนนเต็ม ${
-              !store.dataEvaluation.posExecutiveName
+              store.dataEvaluation.posTypeName != 'อำนวยการ' &&
+              store.dataEvaluation.posTypeName != 'บริหาร'
                 ? store.competencyScore
                 : store.excusiveCompetencyScore
             } คะแนน)`,
@@ -464,7 +458,12 @@ onMounted(async () => {
         class="q-mt-xs q-mb-md"
       />
 
-      <div v-if="!store.dataEvaluation.posExecutiveName">
+      <div
+        v-if="
+          store.dataEvaluation.posTypeName != 'อำนวยการ' &&
+          store.dataEvaluation.posTypeName != 'บริหาร'
+        "
+      >
         <Develop />
 
         <div v-if="isShowScore">
@@ -502,7 +501,10 @@ onMounted(async () => {
 
       <div v-if="isShowScore">
         <div
-          v-if="store.dataEvaluation.posExecutiveName == null"
+          v-if="
+            store.dataEvaluation.posTypeName != 'อำนวยการ' &&
+            store.dataEvaluation.posTypeName != 'บริหาร'
+          "
           class="row text-body2 text-weight-bold"
         >
           <div class="col-12 text-center row justify-center">
diff --git a/src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue
index 558e494aa..cdd099a93 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -123,12 +123,14 @@ function fetchListPlanByid(id: string) {
       formDetail.achievement4 = data.achievement4;
       formDetail.achievement5 = data.achievement5;
       formDetail.documentInfoEvidence = data.documentInfoEvidence;
+
       if (data.startDate && data.endDate) {
         formDetail.date = [];
         formDetail.date[0] = data.startDate;
         formDetail.date[1] = data.endDate;
       }
-      clickList(data.kpiPlanId, true);
+
+      listCheckID.value = data.kpiPlanId;
     })
     .catch((err) => {
       messageError($q, err);
@@ -183,7 +185,9 @@ function fetchRoleByid(id: string) {
         formDetail.date[0] = data.startDate;
         formDetail.date[1] = data.endDate;
       }
-      clickList(data.kpiRoleId, true);
+
+      listCheckID.value = data.kpiRoleId;
+      // clickList(data.kpiRoleId, true);
     })
     .catch((err) => {
       messageError($q, err);
@@ -462,7 +466,7 @@ const title = computed(() => {
 
         <q-card-section class="q-pa-none scroll" style="max-height: 75vh">
           <div class="col-12 row">
-            <div class="bg-grey-1 q-pa-md col-3 row lineRight">
+            <div class="bg-grey-1 q-pa-md col-xs-12 col-md-3 row lineRight">
               <div class="col-12 fit">
                 <div class="row col-12" v-if="numpage !== 3">
                   <q-checkbox
@@ -617,14 +621,14 @@ const title = computed(() => {
               </div>
             </div>
 
-            <div class="col-9">
+            <div class="col-xs-12 col-md-9">
               <div class="row q-pa-md q-col-gutter-sm">
                 <div class="col-12">
                   <span class="text-body2 text-weight-medium"
                     >รายละเอียดตัวชี้วัด</span
                   >
                 </div>
-                <div class="col-6">
+                <div class="col-xs-12 col-6">
                   <q-card bordered class="full-height q-pa-sm">
                     <div class="q-pa-sm q-col-gutter-lg">
                       <div class="col-12 row" v-if="numpage !== 3">
@@ -647,7 +651,7 @@ const title = computed(() => {
                             dense
                             class="inputgreen"
                             :rules="[
-                              (val) =>
+                              (val:string) =>
                                 !!val || `${'กรุณากรอกลำดับ/รหัสตัวชี้วัด'}`,
                             ]"
                             lazy-rules
@@ -668,7 +672,7 @@ const title = computed(() => {
                             dense
                             class="inputgreen"
                             :rules="[
-                              (val) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
+                              (val:string) => !!val || `${'กรุณากรอกชื่อตัวชี้วัด'}`,
                             ]"
                             lazy-rules
                             hide-bottom-space
@@ -686,7 +690,7 @@ const title = computed(() => {
                             dense
                             class="inputgreen"
                             :rules="[
-                              (val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
+                              (val:string) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`,
                             ]"
                             hide-bottom-space
                             lazy-rules
@@ -703,7 +707,7 @@ const title = computed(() => {
                             dense
                             class="inputgreen"
                             :rules="[
-                              (val) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
+                              (val:string) => !!val || `${'กรุณากรอกหน่วยนับ'}`,
                             ]"
                             lazy-rules
                             hide-bottom-space
@@ -721,7 +725,7 @@ const title = computed(() => {
                             dense
                             class="inputgreen"
                             :rules="[
-                              (val) =>
+                              (val:string) =>
                                 !!val || `${'กรุณากรอกน้ำหนัก (ร้อยละ)'}`,
                             ]"
                             hide-bottom-space
@@ -733,17 +737,16 @@ const title = computed(() => {
                     </div>
                   </q-card>
                 </div>
-                <div class="col-6 row">
-                  <div class="row col-12 card-box">
+                <div class="col-12">
+                  <q-card bordered>
                     <div
                       class="col-12 bg-grey-2 row items-center text-weight-medium"
                     >
                       <div class="col-6 text-center">ระดับคะแนน</div>
                       <div class="col-6 text-center">ผลสำเร็จของงาน</div>
                     </div>
-                    <div
-                      class="row col-12 items-center lineTop q-col-gutter-sm"
-                    >
+                    <q-separator />
+                    <div class="row col-12 items-center q-pa-sm">
                       <div class="col-6 text-center text-body2">5</div>
                       <div class="col-6">
                         <q-input
@@ -757,9 +760,8 @@ const title = computed(() => {
                         />
                       </div>
                     </div>
-                    <div
-                      class="row col-12 items-center lineTop q-col-gutter-sm"
-                    >
+                    <q-separator />
+                    <div class="row col-12 items-center q-pa-sm">
                       <div class="col-6 text-center text-body2">4</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
@@ -773,9 +775,8 @@ const title = computed(() => {
                         />
                       </div>
                     </div>
-                    <div
-                      class="row col-12 items-center lineTop q-col-gutter-sm"
-                    >
+                    <q-separator />
+                    <div class="row col-12 items-center q-pa-sm">
                       <div class="col-6 text-center text-body2">3</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
@@ -789,9 +790,8 @@ const title = computed(() => {
                         />
                       </div>
                     </div>
-                    <div
-                      class="row col-12 items-center lineTop q-col-gutter-sm"
-                    >
+                    <q-separator />
+                    <div class="row col-12 items-center q-pa-sm">
                       <div class="col-6 text-center text-body2">2</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
@@ -805,9 +805,8 @@ const title = computed(() => {
                         />
                       </div>
                     </div>
-                    <div
-                      class="row col-12 items-center lineTop q-col-gutter-sm"
-                    >
+                    <q-separator />
+                    <div class="row col-12 items-center q-pa-sm">
                       <div class="col-6 text-center text-body2">1</div>
                       <div class="col-6 text-center text-primary">
                         <q-input
@@ -821,7 +820,7 @@ const title = computed(() => {
                         />
                       </div>
                     </div>
-                  </div>
+                  </q-card>
                 </div>
                 <div class="col-12">
                   <q-input
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue
index 9f8da4a60..115ca8d8e 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogCommentProgress.vue
@@ -14,11 +14,21 @@ import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import { useKpiDataStore } from "@/modules/14_KPI/store";
 
+const numLevel = ref<string>("");
 const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogMessageNotify,
+} = mixin;
 
+const check = ref<string>("");
+const rows = defineModel<any>("rows");
 const modal = defineModel<boolean>("modal", { required: true });
 const type = defineModel<string>("type", { required: true });
 const idList = defineModel<string>("idList", { required: true });
@@ -45,7 +55,8 @@ const formDataView = reactive<FormCommentByRole>({
   id: "",
   topic: "",
   reason: "",
-
+  createdFullName: "",
+  score: "",
   reasonEvaluator: "",
   reasonCommander: "",
   reasonCommanderHigh: "",
@@ -58,6 +69,8 @@ function clickList(index: string, data: any) {
   formDataView.id = data.id;
   formDataView.topic = data.topic;
   formDataView.reason = data.reason;
+  formDataView.createdFullName = data.createdFullName;
+  formDataView.score = data.score;
 
   formDataView.reasonEvaluator = data.reasonEvaluator;
   formDataView.reasonCommander = data.reasonCommander;
@@ -80,33 +93,38 @@ function clickList(index: string, data: any) {
 }
 
 function onSubmitAdd() {
-  dialogConfirm($q, () => {
-    showLoader();
-    http
-      .put(
-        config.API.kpiCommentP(
-          "progress",
-          type.value,
-          store.rolePerson.toLocaleLowerCase(),
-          idList.value
-        ),
-        {
-          reason: formDataAdd.reason,
-          topic: formDataAdd.topic,
-        }
-      )
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        getList();
-        closeAdd();
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
+  // type
+  if (
+    numLevel.value == "" &&
+    type.value != "capacity" &&
+    type.value != "development"
+  ) {
+    dialogMessageNotify($q, "กรุณาเลือกคะแนน");
+  } else {
+    dialogConfirm($q, () => {
+      showLoader();
+      http
+        .put(
+          config.API.kpiCommentP("progress", type.value, "user", idList.value),
+          {
+            reason: formDataAdd.reason,
+            topic: formDataAdd.topic,
+            score: type.value == "capacity" ? undefined : numLevel.value,
+          }
+        )
+        .then((res) => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          getList();
+          closeAdd();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
 }
 
 function onSubmit() {}
@@ -127,6 +145,7 @@ function closeAdd() {
   modalAdd.value = false;
   formDataAdd.topic = "";
   formDataAdd.reason = "";
+  numLevel.value = "";
 }
 
 function getList() {
@@ -197,6 +216,11 @@ function onSubmitComment(role: string) {
       });
   });
 }
+
+function onCheckNumber(num: number) {
+  numLevel.value = num.toString();
+}
+
 watch(
   () => modal.value,
   () => {
@@ -210,7 +234,14 @@ watch(
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 70vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
-        <DialogHeader tittle="รายงานความก้าวหน้า" :close="close" />
+        <DialogHeader
+          :tittle="
+            type == 'capacity' || type == 'development'
+              ? 'บันทึกเหตุการณ์/พฤติกรรม'
+              : 'รายงานความก้าวหน้า'
+          "
+          :close="close"
+        />
         <q-separator />
         <q-card-section class="q-pa-none">
           <q-splitter
@@ -222,7 +253,13 @@ watch(
             <template v-slot:before>
               <div class="q-pa-sm">
                 <q-btn
-                  v-if="store.rolePerson === 'USER'"
+                  v-if="
+                    type == 'capacity' ||
+                    type == 'development' ||
+                    (type != 'capacity' &&
+                      type != 'development' &&
+                      store.rolePerson == 'USER')
+                  "
                   icon="add"
                   color="teal"
                   flat
@@ -233,23 +270,38 @@ watch(
                     }
                   "
                 >
-                  <q-tooltip>เพิ่มความก้าวหน้า</q-tooltip>
+                  <q-tooltip>{{
+                    type == "capacity" || type == "development"
+                      ? "เพิ่มเหตุการณ์/พฤติกรรม"
+                      : "เพิ่มความก้าวหน้า"
+                  }}</q-tooltip>
                 </q-btn>
 
-                <q-card bordered flat class="no-shadow bg-white col-12">
+                <q-card
+                  bordered
+                  flat
+                  class="no-shadow bg-white col-12"
+                  style="min-height: 300px"
+                >
                   <div class="row q-px-md q-py-sm items-center bg-grey-1">
                     <div class="col-12">
-                      <span>ความก้าวหน้า</span>
+                      <span>{{
+                        type == "capacity" || type == "development"
+                          ? "เหตุการณ์/พฤติกรรม"
+                          : "ความก้าวหน้า"
+                      }}</span>
                     </div>
                   </div>
 
                   <q-separator />
                   <q-card-section class="q-pa-none">
                     <div v-if="listTarget.length > 0">
-                      <q-list separator dense>
+                      <q-list
+                        dense
+                        v-for="(item, index) in listTarget"
+                        :key="item.id"
+                      >
                         <q-item
-                          v-for="(item, index) in listTarget"
-                          :key="item.id"
                           clickable
                           v-ripple
                           :active="listCheck === item.id"
@@ -264,6 +316,7 @@ watch(
                             </div>
                           </q-item-section>
                         </q-item>
+                        <q-separator />
                       </q-list>
                     </div>
 
@@ -295,168 +348,197 @@ watch(
               <div v-else>
                 <div class="row q-pa-md q-col-gutter-sm">
                   <div class="row col-12 text-weight-medium">
-                    <div class="col-4 text-grey-6">หัวข้อความก้าวหน้า</div>
+                    <div class="col-4 text-grey-6">
+                      {{
+                        type == "capacity" || type == "development"
+                          ? "เหตุการณ์/พฤติกรรม"
+                          : "หัวข้อความก้าวหน้า"
+                      }}
+                    </div>
                     <div class="col-8">{{ formDataView.topic }}</div>
                   </div>
                   <div class="row col-12 text-weight-medium">
-                    <div class="col-4 text-grey-6">รายละเอียดความก้าวหน้า</div>
+                    <div class="col-4 text-grey-6">
+                      {{
+                        type == "capacity" || type == "development"
+                          ? "รายละเอียด"
+                          : "รายละเอียดความก้าวหน้า"
+                      }}
+                    </div>
                     <div class="col-8">{{ formDataView.reason }}</div>
                   </div>
-                  <div class="col-12">
-                    <q-separator />
+                  <div
+                    class="row col-12 text-weight-medium"
+                    v-if="type !== 'capacity' && type !== 'development'"
+                  >
+                    <div class="col-4 text-grey-6">คะแนน</div>
+                    <div class="col-8">{{ formDataView.score }}</div>
+                  </div>
+                  <div class="row col-12 text-weight-medium">
+                    <div class="col-4 text-grey-6">ผู้สร้าง</div>
+                    <div class="col-8">{{ formDataView.createdFullName }}</div>
                   </div>
 
-                  <!-- ความคิดเห็นของผู้ประเมิน -->
-                  <q-form
-                    v-if="store.dataEvaluation.evaluatorId"
-                    ref="reasonEvaluatorRef"
-                    greedy
-                    @submit.prevent
-                    @validation-success="onSubmitComment('evaluator')"
-                    class="full-width q-mt-sm"
+                  <div
+                    class="col-12"
+                    v-if="type != 'capacity' && type != 'development'"
                   >
-                    <div class="row col-12 q-col-gutter-sm">
-                      <div class="col-12">
-                        <span class="text-weight-medium text-grey-6"
-                          >ความคิดเห็นของผู้ประเมิน</span
-                        >
-                      </div>
-                      <div class="col-12">
-                        <q-input
-                          outlined
-                          dense
-                          :readonly="
-                            formDataView.reasonEvaluator !== null ||
-                            store.rolePerson !== 'EVALUATOR'
-                          "
-                          label="ความคิดเห็นของผู้ประเมิน"
-                          v-model="reasonEvaluator"
-                          type="textarea"
-                          class="inputgreen"
-                          lazy-rules
-                          hide-bottom-space
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
-                        ></q-input>
-                      </div>
-
-                      <div
-                        v-if="
-                          formDataView.reasonEvaluator == null &&
-                          store.rolePerson == 'EVALUATOR'
-                        "
-                        class="col-12"
-                        align="right"
-                      >
-                        <q-btn
-                          label="บันทึกความคิดเห็น"
-                          color="secondary"
-                          type="submit"
-                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
-                        >
-                      </div>
+                    <div class="col-12">
+                      <q-separator />
                     </div>
-                  </q-form>
 
-                  <!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
-                  <q-form
-                    v-if="store.dataEvaluation.commanderId"
-                    class="full-width q-mt-sm"
-                    ref="reasonCommanderRef"
-                    greedy
-                    @submit.prevent
-                    @validation-success="onSubmitComment('commander')"
-                  >
-                    <div class="row col-12 q-col-gutter-sm">
-                      <div class="col-12">
-                        <span class="text-weight-medium text-grey-6"
-                          >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
-                        >
-                      </div>
-                      <div class="col-12">
-                        <q-input
-                          outlined
-                          dense
-                          label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
-                          v-model="reasonCommander"
-                          type="textarea"
-                          class="inputgreen"
-                          lazy-rules
-                          :readonly="
-                            formDataView.reasonCommander !== null ||
-                            store.rolePerson !== 'COMMANDER'
+                    <!-- ความคิดเห็นของผู้ประเมิน -->
+                    <q-form
+                      v-if="store.dataEvaluation.evaluatorId"
+                      ref="reasonEvaluatorRef"
+                      greedy
+                      @submit.prevent
+                      @validation-success="onSubmitComment('evaluator')"
+                      class="full-width q-mt-sm"
+                    >
+                      <div class="row col-12 q-col-gutter-sm">
+                        <div class="col-12">
+                          <span class="text-weight-medium text-grey-6"
+                            >ความคิดเห็นของผู้ประเมิน</span
+                          >
+                        </div>
+                        <div class="col-12">
+                          <q-input
+                            outlined
+                            dense
+                            :readonly="
+                              formDataView.reasonEvaluator !== null ||
+                              store.rolePerson !== 'EVALUATOR'
+                            "
+                            label="ความคิดเห็นของผู้ประเมิน"
+                            v-model="reasonEvaluator"
+                            type="textarea"
+                            class="inputgreen"
+                            lazy-rules
+                            hide-bottom-space
+                            :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้ประเมิน'}`,]"
+                          ></q-input>
+                        </div>
+
+                        <div
+                          v-if="
+                            formDataView.reasonEvaluator == null &&
+                            store.rolePerson == 'EVALUATOR'
                           "
-                          hide-bottom-space
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
-                        ></q-input>
-                      </div>
-
-                      <div
-                        v-if="
-                          formDataView.reasonCommander == null &&
-                          store.rolePerson == 'COMMANDER'
-                        "
-                        class="col-12"
-                        align="right"
-                      >
-                        <q-btn
-                          label="บันทึกความคิดเห็น"
-                          color="secondary"
-                          type="submit"
-                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                          class="col-12"
+                          align="right"
                         >
+                          <q-btn
+                            label="บันทึกความคิดเห็น"
+                            color="secondary"
+                            type="submit"
+                            ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                          >
+                        </div>
                       </div>
-                    </div>
-                  </q-form>
+                    </q-form>
 
-                  <q-form
-                    v-if="store.dataEvaluation.commanderHighId"
-                    class="full-width q-mt-sm"
-                    ref="reasonCommanderHighRef"
-                    greedy
-                    @submit.prevent
-                    @validation-success="onSubmitComment('commanderhigh')"
-                  >
-                    <div class="row col-12 q-col-gutter-sm">
-                      <div class="col-12">
-                        <span class="text-weight-medium text-grey-6"
-                          >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง</span
-                        >
-                      </div>
-                      <div class="col-12">
-                        <q-input
-                          outlined
-                          dense
-                          label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
-                          v-model="reasonCommanderHigh"
-                          type="textarea"
-                          class="inputgreen"
-                          lazy-rules
-                          :readonly="
-                            formDataView.reasonCommanderHigh !== null ||
-                            store.rolePerson !== 'COMMANDERHIGH'
+                    <!-- ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป -->
+                    <q-form
+                      v-if="store.dataEvaluation.commanderId"
+                      class="full-width q-mt-sm"
+                      ref="reasonCommanderRef"
+                      greedy
+                      @submit.prevent
+                      @validation-success="onSubmitComment('commander')"
+                    >
+                      <div class="row col-12 q-col-gutter-sm">
+                        <div class="col-12">
+                          <span class="text-weight-medium text-grey-6"
+                            >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป</span
+                          >
+                        </div>
+                        <div class="col-12">
+                          <q-input
+                            outlined
+                            dense
+                            label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป"
+                            v-model="reasonCommander"
+                            type="textarea"
+                            class="inputgreen"
+                            lazy-rules
+                            :readonly="
+                              formDataView.reasonCommander !== null ||
+                              store.rolePerson !== 'COMMANDER'
+                            "
+                            hide-bottom-space
+                            :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไป'}`,]"
+                          ></q-input>
+                        </div>
+
+                        <div
+                          v-if="
+                            formDataView.reasonCommander == null &&
+                            store.rolePerson == 'COMMANDER'
                           "
-                          hide-bottom-space
-                          :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
-                        ></q-input>
-                      </div>
-
-                      <div
-                        v-if="
-                          formDataView.reasonCommanderHigh == null &&
-                          store.rolePerson == 'COMMANDERHIGH'
-                        "
-                        class="col-12"
-                        align="right"
-                      >
-                        <q-btn
-                          label="บันทึกความคิดเห็น"
-                          color="secondary"
-                          type="submit"
-                          ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                          class="col-12"
+                          align="right"
                         >
+                          <q-btn
+                            label="บันทึกความคิดเห็น"
+                            color="secondary"
+                            type="submit"
+                            ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                          >
+                        </div>
                       </div>
-                    </div>
-                  </q-form>
+                    </q-form>
+
+                    <q-form
+                      v-if="store.dataEvaluation.commanderHighId"
+                      class="full-width q-mt-sm"
+                      ref="reasonCommanderHighRef"
+                      greedy
+                      @submit.prevent
+                      @validation-success="onSubmitComment('commanderhigh')"
+                    >
+                      <div class="row col-12 q-col-gutter-sm">
+                        <div class="col-12">
+                          <span class="text-weight-medium text-grey-6"
+                            >ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง</span
+                          >
+                        </div>
+                        <div class="col-12">
+                          <q-input
+                            outlined
+                            dense
+                            label="ความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง"
+                            v-model="reasonCommanderHigh"
+                            type="textarea"
+                            class="inputgreen"
+                            lazy-rules
+                            :readonly="
+                              formDataView.reasonCommanderHigh !== null ||
+                              store.rolePerson !== 'COMMANDERHIGH'
+                            "
+                            hide-bottom-space
+                            :rules="[(val:string) => !!val || `${'กรุณากรอกความคิดเห็นของผู้บังคับบัญชาเหนือขึ้นไปอีกขั้นหนึ่ง'}`,]"
+                          ></q-input>
+                        </div>
+
+                        <div
+                          v-if="
+                            formDataView.reasonCommanderHigh == null &&
+                            store.rolePerson == 'COMMANDERHIGH'
+                          "
+                          class="col-12"
+                          align="right"
+                        >
+                          <q-btn
+                            label="บันทึกความคิดเห็น"
+                            color="secondary"
+                            type="submit"
+                            ><q-tooltip>บันทึกความคิดเห็น</q-tooltip></q-btn
+                          >
+                        </div>
+                      </div>
+                    </q-form>
+                  </div>
                 </div>
               </div>
             </template>
@@ -469,7 +551,14 @@ watch(
   <q-dialog v-model="modalAdd" persistent>
     <q-card style="min-width: 30vw">
       <q-form greedy @submit.prevent @validation-success="onSubmitAdd">
-        <DialogHeader tittle="เพิ่มหัวข้อความก้าวหน้า" :close="closeAdd" />
+        <DialogHeader
+          :tittle="
+            type == 'capacity' || type == 'development'
+              ? 'เพิ่มหัวข้อบันทึกเหตุการณ์/พฤติกรรม'
+              : 'เพิ่มหัวข้อความก้าวหน้า'
+          "
+          :close="closeAdd"
+        />
         <q-separator />
 
         <q-card-section>
@@ -479,23 +568,70 @@ watch(
                 v-model="formDataAdd.topic"
                 outlined
                 class="inputgreen"
-                label="หัวข้อความก้าวหน้า"
+                :label="
+                  type == 'capacity' || type == 'development'
+                    ? 'เหตุการณ์/พฤติกรรม'
+                    : 'หัวข้อความก้าวหน้า'
+                "
                 dense
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val:string) => !!val || `${'กรุณากรอกหัวข้อความก้าวหน้า'}`,]"
+                :rules="[(val:string) => !!val || `${type == 'capacity'||type == 'development' ? 'กรุณากรอกเหตุการณ์/พฤติกรรม':'กรุณากรอกหัวข้อความก้าวหน้า' }`,]"
               />
             </div>
+            <!-- <div
+              class="col-12"
+              v-if="type !== 'capacity' && type !== 'development'"
+            >
+              <q-input
+                v-model="numLevel"
+                outlined
+                class="inputgreen"
+                label="คะแนน"
+                dense
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกคะแนน'}`,]"
+              />
+            </div> -->
+            <div
+              class="col-12"
+              v-if="type !== 'capacity' && type !== 'development'"
+            >
+              <div class="col-12">
+                <q-label class="text-grey-6">คะแนนความก้าวหน้า</q-label>
+              </div>
+
+              <q-btn-group outline>
+                <q-btn
+                  v-for="i in 5"
+                  :class="numLevel == i.toString() && 'active'"
+                  outline
+                  color="grey-6"
+                  :label="i"
+                  @click="onCheckNumber(i)"
+                >
+                  <q-tooltip>
+                    <div class="text-body2">
+                      <span>{{ i }}</span>
+                    </div>
+                  </q-tooltip>
+                </q-btn>
+              </q-btn-group>
+            </div>
             <div class="col-12">
               <q-input
                 v-model="formDataAdd.reason"
                 outlined
                 class="inputgreen"
-                label="รายละเอียดความก้าวหน้า"
+                :label="
+                  type == 'capacity' || type == 'development'
+                    ? 'รายละเอียด'
+                    : 'รายละเอียดความก้าวหน้า'
+                "
                 dense
                 lazy-rules
                 hide-bottom-space
-                :rules="[(val:string) => !!val || `${'กรุณากรอกรายละเอียดความก้าวหน้า'}`,]"
                 type="textarea"
               />
             </div>
@@ -520,4 +656,20 @@ watch(
   background: #ebf9f7 !important;
   color: #1bb19ab8 !important;
 }
+
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
new file mode 100644
index 000000000..edcf0752a
--- /dev/null
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue
@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<any>("rows", { required: true });
+const dataRows = ref<any[]>([]);
+
+const visibleColumns = ref<String[]>(["level", "description"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "center",
+    label: "ระดับสมรรถนะ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:5px;",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+]);
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  rows.value = [];
+  dataRows.value = [];
+}
+
+watch(
+  () => rows.value,
+  () => {
+    if (rows.value) {
+      const data = rows.value;
+      dataRows.value = data.sort((a: any, b: any) => a.level - b.level);
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 85%">
+      <DialogHeader :tittle="`พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย`" :close="closeDialog" />
+      <q-separator />
+
+      <q-card-section class="q-pa-sm scroll" style="max-height: 80vh">
+        <div class="row">
+          <div class="col-12">
+            <d-table
+              flat
+              bordered
+              dense
+              :paging="true"
+              row-key="level"
+              virtual-scroll
+              :rows="dataRows"
+              hide-pagination
+              :columns="columns"
+              :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"
+                    class="bg-grey-2"
+                  >
+                    <span class="text-weight-bold">{{ 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"
+                  >
+                    <div v-if="(col.name = 'description')">
+                      <span v-html="col.value"></span>
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template #item="props">
+                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  <q-card bordered flat>
+                    <q-list>
+                      <q-item
+                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                        :key="col.name"
+                      >
+                        <q-item-section>
+                          <q-item-label caption>{{ col.label }}</q-item-label>
+
+                          <q-item-label v-if="(col.name = 'description')">
+                            <span v-html="col.value"></span
+                          ></q-item-label>
+
+                          <q-item-label v-else>{{
+                            col.value ?? "-"
+                          }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+              <template v-slot:no-data="{ icon, message }">
+                <div class="q-pa-md text-weight-bold full-width text-center">
+                  <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
+                </div>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+.no-shadow {
+  box-shadow: none !important;
+}
+.lineRight {
+  border-right: 1px solid #ededed !important;
+}
+.lineTop {
+  border-top: 1px solid #ededed !important;
+}
+.card-box {
+  border: 1px solid #ededed !important;
+  border-radius: 8px;
+}
+.custom-table2 {
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
index de09cb3bf..032e5c1e7 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import DialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
-import { ref,watch } from "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";
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
+const store = useKpiDataStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
@@ -23,7 +25,7 @@ const {
 
 const route = useRoute();
 const router = useRouter();
-const id = ref<string>(route.params.id as string)
+const id = ref<string>(route.params.id as string);
 const modal = defineModel<boolean>("modal", { required: true });
 const filterKeyword = ref<string>("");
 const rows = ref<any[]>([]);
@@ -75,7 +77,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "positionLevel",
     align: "left",
-    label: "ประเภทตำแหน่ง",
+    label: "ตำแหน่งประเภท",
     sortable: true,
     field: "positionLevel",
     headerStyle: "font-size: 14px",
@@ -190,24 +192,29 @@ 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()
+function getData() {
+  showLoader();
+  http
+    .get(config.API.placementKeycloak + `/${store.dataProfile.profileId}`)
+    .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()
+watch(
+  () => modal.value,
+  (n) => {
+    if (n == true) {
+      getData();
     }
-})
+  }
+);
 </script>
 <template>
   <q-dialog persistent v-model="modal">
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue
new file mode 100644
index 000000000..4ca44b3ea
--- /dev/null
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from "vue";
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader } = mixin;
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = defineModel<any>("rows", { required: true });
+const dataRows = ref<any[]>([]);
+
+const visibleColumns = ref<String[]>([ "description"]);
+const columns = ref<QTableProps["columns"]>([
+
+  {
+    name: "description",
+    align: "left",
+    label: "พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย",
+    sortable: true,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px; width:15%;",
+  },
+]);
+
+/** ปิด dialog */
+function closeDialog() {
+  modal.value = false;
+  rows.value = [];
+  dataRows.value = [];
+}
+
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 85%">
+      <DialogHeader :tittle="`ข้อมูลพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย`" :close="closeDialog" />
+      <q-separator />
+
+      <q-card-section class="q-pa-sm scroll" style="max-height: 80vh">
+        <div class="row">
+          <div class="col-12">
+            <d-table
+              flat
+              bordered
+              dense
+              :paging="true"
+              row-key="level"
+              virtual-scroll
+              :rows="rows"
+              hide-pagination
+              :columns="columns"
+              :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"
+                    class="bg-grey-2"
+                  >
+                    <span class="text-weight-bold">{{ 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"
+                  >
+                    <div v-if="(col.name = 'description')">
+                      <span v-html="col.value"></span>
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template #item="props">
+                <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                  <q-card bordered flat>
+                    <q-list>
+                      <q-item
+                        v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                        :key="col.name"
+                      >
+                        <q-item-section>
+                          <q-item-label caption>{{ col.label }}</q-item-label>
+
+                          <q-item-label v-if="(col.name = 'description')">
+                            <span v-html="col.value"></span
+                          ></q-item-label>
+
+                          <q-item-label v-else>{{
+                            col.value ?? "-"
+                          }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+              <template v-slot:no-data="{ icon, message }">
+                <div class="q-pa-md text-weight-bold full-width text-center">
+                  <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
+                </div>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-menu-link {
+  background: #ebf9f7 !important;
+  color: #1bb19ab8 !important;
+}
+.no-shadow {
+  box-shadow: none !important;
+}
+.lineRight {
+  border-right: 1px solid #ededed !important;
+}
+.lineTop {
+  border-top: 1px solid #ededed !important;
+}
+.card-box {
+  border: 1px solid #ededed !important;
+  border-radius: 8px;
+}
+.custom-table2 {
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue b/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
index 1ad994b67..5e6847ea4 100644
--- a/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
+++ b/src/modules/14_KPI/components/Tab/Dialog/DialogStatus.vue
@@ -1,21 +1,35 @@
 <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 route = useRoute();
+import { useKpiDataStore } from "@/modules/14_KPI/store";
 
+const store = useKpiDataStore();
+
+const route = useRoute();
+const router = useRouter();
+const id = ref<string>(route.params.id as string);
 const work = ref<boolean>(false);
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError } = mixin;
+const {
+  dialogConfirm,
+  success,
+  showLoader,
+  hideLoader,
+  messageError,
+  findPosMasterNoOld,
+  findOrgNameOld,
+  date2Thai,
+} = mixin;
 
 const modal = defineModel<boolean>("modal", { required: true });
-const profileId = defineModel<string>("profileId", { required: true });
+const isProbation = defineModel<boolean>("isProbation", { required: true });
 
 function close() {
   modal.value = false;
@@ -24,7 +38,7 @@ function close() {
 function getData() {
   showLoader();
   http
-    .get(config.API.profilePosition() + `/${profileId.value}`)
+    .get(config.API.profilePosition+`/${store.dataProfile.profileId}`)
     .then((res) => {
       const data = res.data.result.isProbation;
       work.value = data;
@@ -45,6 +59,7 @@ watch(
   }
 );
 </script>
+
 <template>
   <q-dialog persistent v-model="modal">
     <q-card bordered style="min-width: 20vw">
@@ -54,7 +69,7 @@ watch(
         <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 ? `อยู่ระหว่างทดลองงาน` : "พ้นจากการทดลองงาน"
+              isProbation ? `อยู่ระหว่างทดลองงาน` : "-"
             }}</span>
           </div>
         </div>
diff --git a/src/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue b/src/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
index c0781fd11..9239d4eec 100644
--- a/src/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
+++ b/src/modules/14_KPI/components/Tab/DialogEvaluate/01_Indicator.vue
@@ -130,6 +130,8 @@ function onSubmit() {
   dialogConfirm($q, async () => {
     try {
       showLoader();
+      store.isUpdate = true;
+
       const formData = rows.value.map((e: any) => ({
         id: e.id,
         point: e.point,
@@ -144,8 +146,9 @@ function onSubmit() {
           : numpage.value === 3
           ? config.API.kpiAchievementPoint("special")
           : "";
-      await http.post(url, formData);
-      props.fetchList();
+      await http.post(url, formData).then((res) => {
+        props.fetchList();
+      });
       success($q, "บันทึกข้อมูลสำเร็จ");
     } catch (err) {
       messageError($q, err);
diff --git a/src/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue b/src/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
index aea90e8cd..e4120bd4e 100644
--- a/src/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
+++ b/src/modules/14_KPI/components/Tab/DialogEvaluate/02_Competenct.vue
@@ -115,6 +115,7 @@ function onSubmit() {
     dialogMessageNotify($q, "กรุณาเลือกระดับคะแนนตามเกณฑ์การประเมิน");
   } else {
     dialogConfirm($q, () => {
+      store.isUpdate = true;
       const data = rows.value;
       const body = data.map((i: any) => ({
         id: i.id,
diff --git a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
index a66a56739..9437eaa76 100644
--- a/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/01_Indicator.vue
@@ -47,7 +47,7 @@ const visibleColumns = ref<string[]>(
         "achievement",
         "evaluationResults",
       ]
-    : ["includingName", "target", "weight"]
+    : ["includingName", "target", "point", "weight"]
 );
 const columns = ref<QTableProps["columns"]>([
   {
@@ -238,7 +238,7 @@ const isEditStep3 = computed(() => {
 </script>
 
 <template>
-  <q-card bordered style="border-radius: 5px" class="no-shadow">
+  <q-card bordered style="border-radius: 5px" class="no-shadow q-mt-sm">
     <q-card-section class="bg-grey-2 q-py-sm">
       <div class="row items-center no-wrap">
         <div class="col">
@@ -275,7 +275,7 @@ const isEditStep3 = computed(() => {
     </q-card-section>
     <q-separator />
     <q-card-section class="q-pa-sm">
-      <q-table
+      <d-table
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -285,7 +285,6 @@ const isEditStep3 = computed(() => {
         bordered
         dense
         hide-pagination
-        class="custom-table2"
         :visible-columns="visibleColumns"
         :rows-per-page-options="[20]"
         no-data-label="ไม่มีข้อมูล"
@@ -305,7 +304,7 @@ const isEditStep3 = computed(() => {
               <q-btn
                 flat
                 round
-                icon="info"
+                icon="mdi-eye"
                 color="info"
                 size="12px"
                 dense
@@ -331,31 +330,6 @@ const isEditStep3 = computed(() => {
                     </q-tooltip>
                   </q-btn>
                 </q-btn-group>
-                <!-- <q-rating
-                  v-model="props.row.point"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="store.ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  disable
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>{{ props.row.achievement1 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>{{ props.row.achievement2 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>{{ props.row.achievement3 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>{{ props.row.achievement4 }}</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>{{ props.row.achievement5 }}</q-tooltip>
-                  </template>
-                </q-rating> -->
               </div>
               <div v-else-if="col.name === 'achievement'">
                 {{ props.row.point ? `ระดับ ${props.row.point}` : "" }}
@@ -431,7 +405,96 @@ const isEditStep3 = computed(() => {
             </td>
           </q-tr>
         </template>
-      </q-table>
+        <template #item="props">
+          <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+            <q-card bordered flat>
+              <div class="row justify-end">
+                <q-btn
+                  flat
+                  round
+                  icon="info"
+                  color="info"
+                  size="14px"
+                  @click="onClickView(props.row.id)"
+                >
+                  <q-tooltip>คำอธิบายผลสำเร็จของงาน</q-tooltip>
+                </q-btn>
+              </div>
+
+              <q-separator />
+              <q-list>
+                <q-item
+                  v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                  :key="col.name"
+                >
+                  <q-item-section>
+                    <q-item-label caption>{{ col.label }}</q-item-label>
+                    <q-item-label>{{ col.value ?? "-" }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+              <q-separator />
+              <q-card-actions
+                align="around"
+                v-if="
+                  store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                  store.tabMain === '2'
+                "
+              >
+                <q-btn
+                  flat
+                  round
+                  icon="mdi-developer-board"
+                  color="blue-6"
+                  size="12px"
+                  dense
+                  @click="openPopupProgress(props.row.id)"
+                >
+                  <q-tooltip>รายงานความก้าวหน้า</q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  icon="warning"
+                  color="red-5"
+                  size="12px"
+                  dense
+                  main="problem"
+                  @click="openPopupProblem(props.row.id)"
+                >
+                  <q-tooltip>รายงานปัญหา</q-tooltip>
+                </q-btn>
+              </q-card-actions>
+
+              <q-card-actions align="around" v-if="isEditStep1">
+                <q-btn
+                  flat
+                  round
+                  icon="edit"
+                  color="edit"
+                  size="12px"
+                  dense
+                  @click="onAdd(true, props.row.id)"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+
+                <q-btn
+                  flat
+                  round
+                  icon="delete"
+                  color="red"
+                  size="12px"
+                  dense
+                  @click="onDelete(props.row.id)"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-card-actions>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
     </q-card-section>
   </q-card>
 
@@ -466,6 +529,7 @@ const isEditStep3 = computed(() => {
   <DialogProgress
     v-model:modal="modalProgress"
     v-model:type="type"
+    v-model:rows="rows"
     :idList="idList"
   />
   <DialogProblem
diff --git a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
index 0c02658d8..11d9e6006 100644
--- a/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/14_KPI/components/Tab/Topic/02_Competency.vue
@@ -17,6 +17,15 @@ import type {
   ListCriteria,
 } from "@/modules/14_KPI/interface/request/index";
 
+import DialogListCriteria from "@/modules/14_KPI/components/Tab/Dialog/DialogListCriteria.vue";
+import DialogCompetncyByRow from "@/modules/14_KPI/components/Tab/Dialog/DialogCompetncyByRow.vue";
+import DialogLevel from "@/modules/14_KPI/components/Tab/Dialog/DialogLevel.vue";
+
+const modalLevel = ref<boolean>(false);
+const modalCompetncyByRow = ref<boolean>(false);
+const dataCompetncyByRow = ref<any[]>([]);
+const dataLevel = ref<any[]>([]);
+const modalCriteria = ref<boolean>(false);
 const dataListCriteria = defineModel<ListCriteria[]>("dataListCriteria", {
   required: true,
 });
@@ -74,7 +83,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "point",
     align: "left",
     label: "ระดับคะแนนตามเกณฑ์การประเมิน",
-    sortable: true,
+    sortable: false,
     field: "point",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -108,7 +117,7 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>(
   store.tabOpen === 3 && store.tabMain === "3"
     ? ["name", "level", "point", "weight", "summary"]
-    : ["name", "level", "weight"]
+    : ["name", "level", "point", "weight"]
 );
 
 const typeCompetency = ref<string>("");
@@ -162,7 +171,10 @@ function getData(type: string) {
         let weightAvg = weight / total;
         let resultAvg = result / total;
 
-        if (store.dataEvaluation.posExecutiveName != null) {
+        if (
+          store.dataEvaluation.posTypeName == "อำนวยการ" &&
+          store.dataEvaluation.posTypeName == "บริหาร"
+        ) {
           store.competencyScoreVal =
             weightAvg != 0
               ? (resultAvg / weightAvg) * store.excusiveCompetencyScore
@@ -173,6 +185,24 @@ function getData(type: string) {
               ? (resultAvg / weightAvg) * store.competencyScore
               : 0;
         }
+
+        if (
+          store.isUpdate &&
+          store.tabMain === "3" &&
+          (store.dataEvaluation.evaluationStatus === "EVALUATOR" ||
+            store.dataEvaluation.evaluationStatus === "EVALUATING_EVALUATOR")
+        ) {
+          http
+            .put(config.API.updatePoint(store.dataEvaluation.id), {
+              totalPoint2_1: store.competencyScoreVal.toFixed(2),
+              summaryPoint: (
+                store.indicatorScoreVal +
+                store.competencyScoreVal +
+                store.devScoreVal
+              ).toFixed(2),
+            })
+            .then((res) => {});
+        }
       }
     });
 }
@@ -256,6 +286,20 @@ watch(
   }
 );
 
+function onInfo() {
+  modalCriteria.value = true;
+}
+
+function onAchievement(data: any) {
+  modalCompetncyByRow.value = true;
+  dataCompetncyByRow.value = data;
+}
+
+function onLevel(num: number, list: any) {
+  dataLevel.value = list.filter((i: any) => i.level == num);
+  modalLevel.value = true;
+}
+
 onMounted(() => {
   for (let index = 0; index < store.competencyType.length; index++) {
     const element = store.competencyType[index];
@@ -266,13 +310,13 @@ onMounted(() => {
 
 <template>
   <div v-for="(item, index) in store.competencyType" :key="index">
-    <q-card bordered style="border-radius: 5px" class="no-shadow">
+    <q-card bordered style="border-radius: 5px" class="no-shadow q-mt-sm">
       <q-card-section class="bg-grey-2 q-py-sm">
         <div class="row items-center">
           <div class="col">
             <span class="text-weight-medium">{{ item.name }}</span>
             <q-btn
-              v-if="isEditStep1"
+              v-if="isEditStep1 && item.id != 'HEAD' && item.id != 'GROUP'"
               class="q-ml-xs"
               flat
               round
@@ -302,7 +346,7 @@ onMounted(() => {
         </div>
       </q-card-section>
       <q-card-section class="q-pa-sm">
-        <q-table
+        <d-table
           ref="table"
           :columns="columns"
           :rows="rows[item.id]"
@@ -312,20 +356,44 @@ onMounted(() => {
           :paging="true"
           dense
           hide-pagination
-          class="custom-table2"
           no-data-label="ไม่มีข้อมูล"
           :visible-columns="visibleColumns"
         >
           <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>
+                <span v-if="col.name == 'point'" class="text-weight-medium">
+                  <q-btn
+                    flat
+                    icon="mdi-eye"
+                    color="info"
+                    round
+                    class="q-ml-xs"
+                    @click="onInfo"
+                  >
+                    <q-tooltip>เกณฑ์การประเมิน</q-tooltip> </q-btn
+                  >{{ col.label }}</span
+                >
+                <span v-else 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 auto-width>
+                <q-btn
+                  flat
+                  icon="mdi-eye"
+                  color="info"
+                  round
+                  class="q-ml-xs"
+                  @click="onAchievement(props.row.achievement)"
+                >
+                  <q-tooltip>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</q-tooltip>
+                </q-btn>
+              </q-td>
               <q-td v-for="col in props.cols" :key="col.id">
                 <div v-if="col.name == 'createDate'">
                   {{ col.value ? date2Thai(col.value) : "-" }}
@@ -348,29 +416,7 @@ onMounted(() => {
                         </q-tooltip>
                       </q-btn>
                     </q-btn-group>
-                    <!-- <q-rating
-                      v-model="props.row.point"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="store.ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                      disable
-                    >
-                      <template
-                        v-for="(i, index) in sortedDataListCriteria"
-                        :key="i.level"
-                        v-slot:[`tip-${index+1}`]
-                      >
-                        <q-tooltip>
-                          <div class="text-body2">
-                            <span v-html="i.description"></span>
-                          </div>
-                        </q-tooltip>
-                      </template>
-                    </q-rating> -->
                   </div>
-                  <!-- <div v-else>รอ ทำ select</div> -->
                 </div>
                 <div v-else-if="col.name == 'summary'">
                   {{
@@ -379,6 +425,14 @@ onMounted(() => {
                       : "-"
                   }}
                 </div>
+                <div v-else-if="col.name == 'level'">
+                  <div
+                    @click="onLevel(props.row.level, props.row.achievement)"
+                    class="text-teal"
+                  >
+                    {{ props.row.level }}
+                  </div>
+                </div>
                 <div v-else>
                   {{ col.value }}
                 </div>
@@ -389,6 +443,96 @@ onMounted(() => {
                     store.dataEvaluation.evaluationStatus == 'APPROVE' &&
                     store.tabMain === '2'
                   "
+                >
+                  <q-btn
+                    flat
+                    round
+                    icon="mdi-account-details"
+                    color="blue-6"
+                    size="12px"
+                    dense
+                    @click="openPopupProgress(props.row.id)"
+                  >
+                    <q-tooltip>บันทึกเหตุการณ์/พฤติกรรม</q-tooltip>
+                  </q-btn>
+                </div>
+
+                <div v-if="isEditStep1">
+                  <q-btn
+                    flat
+                    round
+                    :icon="
+                      item.id == 'HEAD' || item.id == 'GROUP'
+                        ? 'edit'
+                        : 'edit'
+                    "
+                    color="info"
+                    @click.stop.pervent="onEdit(props.row, item.id)"
+                  >
+                    <q-tooltip>แก้ไข </q-tooltip>
+                  </q-btn>
+                  <q-btn
+                    flat
+                    round
+                    icon="delete"
+                    color="red"
+                    @click.stop.pervent="onDelete(props.row.id, item.id)"
+                  >
+                    <q-tooltip>ลบข้อมูล </q-tooltip>
+                  </q-btn>
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <template #item="props">
+            <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+              <q-card bordered flat>
+                <q-list>
+                  <q-item
+                    v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+                    :key="col.name"
+                  >
+                    <q-item-section>
+                      <q-item-label caption>{{ col.label }}</q-item-label>
+                      <q-item-label v-if="col.name == 'createDate'">
+                        {{ col.value ? date2Thai(col.value) : "-" }}
+                      </q-item-label>
+                      <q-item-label v-else-if="col.name == 'point'">
+                        <q-btn-group outline>
+                          <q-btn
+                            v-for="(i, index) in sortedDataListCriteria"
+                            :key="index"
+                            :class="props.row.point == i.level && 'active'"
+                            outline
+                            color="grey-6"
+                            :label="i.level"
+                          >
+                            <q-tooltip>
+                              <div class="text-body2">
+                                <span v-html="i.description"></span>
+                              </div>
+                            </q-tooltip>
+                          </q-btn>
+                        </q-btn-group>
+                      </q-item-label>
+                      <q-item-label v-else-if="col.name == 'summary'">
+                        {{
+                          props.row.point !== 0
+                            ? (props.row.point / 5) * props.row.weight
+                            : "-"
+                        }}
+                      </q-item-label>
+                      <q-item-label v-else>{{ col.value ?? "-" }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+                <q-separator />
+                <q-card-actions
+                  align="around"
+                  v-if="
+                    store.dataEvaluation.evaluationStatus == 'APPROVE' &&
+                    store.tabMain === '2'
+                  "
                 >
                   <q-btn
                     flat
@@ -413,9 +557,9 @@ onMounted(() => {
                   >
                     <q-tooltip>รายงานปัญหา</q-tooltip>
                   </q-btn>
-                </div>
+                </q-card-actions>
 
-                <div v-if="isEditStep1">
+                <q-card-actions align="around" v-if="isEditStep1">
                   <q-btn
                     flat
                     round
@@ -434,11 +578,11 @@ onMounted(() => {
                   >
                     <q-tooltip>ลบข้อมูล </q-tooltip>
                   </q-btn>
-                </div>
-              </q-td>
-            </q-tr>
+                </q-card-actions>
+              </q-card>
+            </div>
           </template>
-        </q-table>
+        </d-table>
       </q-card-section>
     </q-card>
   </div>
@@ -468,6 +612,18 @@ onMounted(() => {
     v-model:type="type"
     :idList="idList"
   />
+
+  <DialogListCriteria
+    v-model:modal="modalCriteria"
+    v-model:dataListCriteria="dataListCriteria"
+  />
+
+  <DialogCompetncyByRow
+    v-model:modal="modalCompetncyByRow"
+    v-model:rows="dataCompetncyByRow"
+  />
+
+  <DialogLevel v-model:modal="modalLevel" v-model:rows="dataLevel" />
 </template>
 
 <style scoped>
diff --git a/src/modules/14_KPI/interface/request/index.ts b/src/modules/14_KPI/interface/request/index.ts
index 25eb9e8e0..4d3c00919 100644
--- a/src/modules/14_KPI/interface/request/index.ts
+++ b/src/modules/14_KPI/interface/request/index.ts
@@ -57,7 +57,8 @@ interface FormCommentByRole {
   id: string;
   topic: string;
   reason: string;
-
+  createdFullName: string;
+score:string
   reasonEvaluator: string;
   reasonCommander: string;
   reasonCommanderHigh: string;
diff --git a/src/modules/14_KPI/store.ts b/src/modules/14_KPI/store.ts
index 85cc771d5..9e2d5c72c 100644
--- a/src/modules/14_KPI/store.ts
+++ b/src/modules/14_KPI/store.ts
@@ -13,7 +13,7 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
     keyword: "",
   });
   const selected = ref([]);
-
+  const isUpdate = ref<boolean>(false);
   const tabMain = ref<string>("1");
   const dataProfile = ref<any>({
     profileId: null,
@@ -280,51 +280,58 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
   const rolePerson = ref<string>("USER"); //"USER" | "EVALUATOR" |  "COMMANDER", "COMMANDERHIGH"
   const tabOpen = ref<number>(1);
   function checkStep() {
-    const role =
-      dataEvaluation.value.profileId == dataProfile.value.profileId
-        ? "USER"
-        : dataEvaluation.value.evaluatorId == dataProfile.value.profileId
-        ? "EVALUATOR"
-        : dataEvaluation.value.commanderId == dataProfile.value.profileId
-        ? "COMMANDER"
-        : dataEvaluation.value.commanderHighId == dataProfile.value.profileId
-        ? "COMMANDERHIGH"
-        : "";
-    rolePerson.value = role;
+    // const role =
+    // dataEvaluation.value.profileId == 'USER'
+    rolePerson.value = "USER";
 
     switch (dataEvaluation.value.evaluationStatus) {
       case "NEW":
         tabOpen.value = 1;
+        tabMain.value = "1";
         break;
       case "NEW_EVALUATOR":
         tabOpen.value = 1;
+        tabMain.value = "1";
         break;
       case "NEW_COMMANDER":
         tabOpen.value = 1;
+        tabMain.value = "1";
         break;
       case "NEW_COMMANDER_HIGH":
         tabOpen.value = 1;
+        tabMain.value = "1";
         break;
       case "APPROVE":
         tabOpen.value = 2;
+        tabMain.value = "2";
         break;
       case "EVALUATING":
         tabOpen.value = 3;
+        tabMain.value = "3";
         break;
       case "EVALUATING_EVALUATOR":
         tabOpen.value = 3;
+        tabMain.value = "3";
         break;
-      case "EVALUATING_COMMANDER":
-        tabOpen.value = 3;
+      case "SUMMARY":
+        tabOpen.value = 4;
+        tabMain.value = "3";
         break;
-      case "EVALUATING_COMMANDER_HIGH":
-        tabOpen.value = 3;
+      case "SUMMARY_COMMANDER":
+        tabOpen.value = 4;
+        tabMain.value = "3";
+        break;
+      case "SUMMARY_COMMANDER_HIGH":
+        tabOpen.value = 4;
+        tabMain.value = "3";
         break;
       case "COMPLETE":
-        tabOpen.value = 3;
+        tabOpen.value = 4;
+        tabMain.value = "4";
         break;
       default:
         tabOpen.value = 1;
+        tabMain.value = "1";
         break;
     }
   }
@@ -398,5 +405,6 @@ export const useKpiDataStore = defineStore("KPIDataAdmin", () => {
     yearRound,
     selected,
     statusOptions,
+    isUpdate,
   };
 });
diff --git a/src/modules/14_KPI/views/detailView.vue b/src/modules/14_KPI/views/detailView.vue
index 4dd286777..4286ee737 100644
--- a/src/modules/14_KPI/views/detailView.vue
+++ b/src/modules/14_KPI/views/detailView.vue
@@ -21,157 +21,148 @@ 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 itemsTab = ref<any>([
+  {
+    name: "1",
+    label: "จัดทำแบบฟอร์มการประเมิน",
+  },
+  {
+    name: "2",
+    label: "รายงานความก้าวหน้า",
+  },
+  {
+    name: "3",
+    label: "รายงานผลสำเร็จของงาน",
+  },
+  {
+    name: "4",
+    label: "สรุปผลการประเมิน",
+  },
+  {
+    name: "5",
+    label: "ไฟล์เอกสาร",
+  },
+]);
+
+const splitterModel = ref<number>(12);
+const modalGovernment = ref<boolean>(false);
+const modalStatus = ref<boolean>(false);
+// const modalScore = ref<boolean>(false);
+const modalEdit = ref<boolean>(false);
 const route = useRoute();
-const router = useRouter();
+const id = ref<string>(route.params.id as string);
+const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
+
+// const plannedPoint = ref<string>("");
+// const rolePoint = ref<string>("");
+// const specialPoint = ref<string>("");
+// const capacityPoint = ref<string>("");
+
 const store = useKpiDataStore();
-const { showLoader, hideLoader, messageError, dialogConfirm, success } =
-  useCounterMixin();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, dialogConfirm, success } = mixin;
 
-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();
+const formProfile = reactive<any>({
+  fullName: "",
+  position: "",
+  type: "",
+  level: "",
+  status: "",
+  result: "",
+  score: "-",
+  avartar: "",
+});
+
+const router = useRouter();
+
+async function fetchEvaluation() {
+  await http
+    .get(config.API.kpiEvaluationUser + `/${id.value}`)
+    .then(async (res) => {
+      const data = res.data.result;
+      store.dataEvaluation = await data;
+      store.dataProfile = await data;
+      formProfile.status = store.convertStatus(data.evaluationStatus);
+      formProfile.result = store.convertResults(data.evaluationResults);
+      store.checkCompetency();
+      store.checkCompetencyDefaultCompetencyLevel();
+
+      fetchProfile(data.profileId);
+
+      // plannedPoint.value = data.plannedPoint == null ? "" : data.plannedPoint;
+      // rolePoint.value = data.rolePoint == null ? "" : data.rolePoint;
+      // specialPoint.value = data.specialPoint == null ? "" : data.specialPoint;
+      // capacityPoint.value =
+      //   data.capacityPoint == null ? "" : data.capacityPoint;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+  .finally(() => {
+    hideLoader();
+  });
 }
-function closeDialogAssessor() {
-  modal.value = false;
+
+async function fetchProfile(id: string) {
+  await http
+    .get(config.API.orgCheckAvatar(id))
+    .then(async (res) => {
+      if (res.data.result.avatarName) {
+        http
+          .get(
+            config.API.fileByFile(
+              "ทะเบียนประวัติ",
+              "โปรไฟล์",
+              id,
+              res.data.result.avatarName
+            )
+          )
+          .then(async (res) => {
+            store.dataEvaluation.avartar = res.data.downloadUrl;
+          });
+      }
+    })
+    .catch(() => {
+      // profilePicture.value = avatar;
+    });
+}
+
+function close() {
+  modalEdit.value = false;
   evaluatorId.value = null;
   commanderId.value = null;
   commanderHighId.value = null;
 }
+
 function onSubmit() {
   dialogConfirm($q, () => {
-    if (kpiId.value) {
+    if (id.value) {
       showLoader();
       http
-        .put(config.API.kpiEvaluationCheck + `/${kpiId.value}`, {
+        .put(config.API.kpiEvaluationCheck + `/${id.value}`, {
           evaluatorId: evaluatorId.value ? evaluatorId.value.id : null,
           commanderId: commanderId.value ? commanderId.value.id : null,
           commanderHighId: commanderHighId.value
             ? commanderHighId.value.id
             : null,
         })
-        .then(() => {
-          close();
+        .then((res) => {
           fetchEvaluation();
+          getOrgOp();
+          close();
           success($q, "บันทึกสำเร็จ");
         })
         .catch((e) => {
@@ -183,7 +174,8 @@ function onSubmit() {
     }
   });
 }
-function fetchListAssessor() {
+
+async function getOrgOp() {
   http
     .get(config.API.Kpiorg)
     .then((res) => {
@@ -207,13 +199,13 @@ function fetchListAssessor() {
           name: `${i.prefix}${i.firstName} ${i.lastName}`,
         }))
         .find((i: any) => i.id == store.dataEvaluation.evaluatorId);
-      commanderId.value = data.caregiver
+      commanderId.value = data.commander
         .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
+      commanderHighId.value = data.chairman
         .map((i: any) => ({
           id: i.id,
           name: `${i.prefix}${i.firstName} ${i.lastName}`,
@@ -225,6 +217,7 @@ function fetchListAssessor() {
     })
     .finally(() => {});
 }
+
 function filterOption(val: any, update: Function, refData: string) {
   switch (refData) {
     case "evaluatorIdOp":
@@ -253,39 +246,218 @@ function filterOption(val: any, update: Function, refData: string) {
   }
 }
 
-const modalGovernment = ref<boolean>(false);
+// function onSubmitScore() {
+//   showLoader();
+//   http
+//     .put(config.API.kpiScoreTotal() + `/${id.value}`, {
+//       plannedPoint: plannedPoint.value,
+//       rolePoint: rolePoint.value,
+//       specialPoint: specialPoint.value,
+//       capacityPoint: capacityPoint.value,
+//     })
+//     .then(async (res) => {
+//       await fetchEvaluation();
+//       success($q, "บันทึกสำเร็จ");
+//       modalScore.value = false;
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// }
+
+// async function clearScore() {
+//   modalScore.value = false;
+//   plannedPoint.value = "";
+//   rolePoint.value = "";
+//   specialPoint.value = "";
+//   capacityPoint.value = "";
+//   getAll();
+// }
+async function getProfile() {
+  await http
+    .get(config.API.profilePositionKey())
+    .then(async (res) => {
+      const data = await res.data.result;
+      store.dataProfile = await data;
+
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+  // .finally(() => {
+  //   hideLoader();
+  // });
+}
+async function getAll() {
+  await fetchEvaluation();
+  await store.checkStep();
+  getOrgOp();
+}
+
+function sendToEvaluatore() {
+  dialogConfirm(
+    $q,
+    () => {
+      if (id.value) {
+        showLoader();
+        http
+          .put(config.API.kpiEvaluationUser+`/status/${id.value}`, {
+            status: "NEW_EVALUATOR",
+          })
+          .then((res) => {
+            success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
+            fetchEvaluation();
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      }
+    },
+    "ยืนยันการส่งข้อตกลงให้ผู้ประเมินอนุมัติ",
+    "ต้องการยืนยันส่งข้อตกลงนี้ให้ผู้ประเมินอนุมัติใช่หรือไม่?"
+  );
+}
+
+function sendToEvaluateEvaluatore() {
+  dialogConfirm(
+    $q,
+    () => {
+      if (id.value) {
+        showLoader();
+        http
+          .put(config.API.kpiSendToStatus(id.value), {
+            status: "EVALUATING_EVALUATOR",
+          })
+          .then((res) => {
+            success($q, "ส่งให้ผู้ประเมินรายงานผลสำเร็จของงานสำเร็จ");
+            fetchEvaluation();
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      }
+    },
+    "ยืนยันการส่งให้ผู้ประเมินรายงานผลสำเร็จของงาน",
+    "ต้องการยืนยันส่งให้ผู้ประเมินรายงานผลสำเร็จของงานใช่หรือไม่?"
+  );
+}
+// function sendToSummary(status: string) {
+//   dialogConfirm(
+//     $q,
+//     () => {
+//       if (id.value) {
+//         showLoader();
+//         http
+//           .get(config.API.kpiSendToSummary(id.value))
+//           .then((res) => {
+//             success($q, "ส่งไปสรุปผลการประเมินสำเร็จ");
+//             getAll();
+//             store.tabMain = "4";
+//           })
+//           .catch((e) => {
+//             messageError($q, e);
+//           })
+//           .finally(() => {
+//             hideLoader();
+//           });
+//       }
+//     },
+//     "ยืนยันการส่งไปสรุปผลการประเมิน",
+//     "ต้องการยืนยันส่งไปสรุปผลการประเมินใช่หรือไม่?"
+//   );
+// }
+function requireEdit() {
+  dialogConfirm(
+    $q,
+    () => {
+      if (id.value) {
+        showLoader();
+        http
+          .put(config.API.kpiReqEdit(id.value), {
+            status: "EVALUATOR",
+          })
+          .then((res) => {
+            success($q, "ขอแก้ไขสำเร็จ");
+            fetchEvaluation();
+          })
+          .catch((e) => {
+            messageError($q, e);
+          })
+          .finally(() => {
+            hideLoader();
+          });
+      }
+    },
+    "ยืนยันการขอแก้ไขข้อตกลง",
+    "ต้องการยืนยันการขอแก้ไขข้อตกลงนี้ใช่หรือไม่?"
+  );
+}
+
 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: "ไฟล์เอกสาร",
-  },
-]);
+function sendToEvauator() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .post(config.API.sendToCommander, {
+        status: "EVALUATING",
+        id: [store.dataEvaluation.id],
+      })
+      .then(async (res) => {
+        await getAll();
+        store.tabMain = "3";
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
 
-onMounted(() => {
-  fetchEvaluation();
+function goToSummary() {
+  dialogConfirm(
+    $q,
+    () => {
+      showLoader();
+      http
+        .get(config.API.sendToSummary(store.dataEvaluation.id))
+        .then(async (res) => {
+          await fetchEvaluation();
+          store.tabMain = "4";
+          store.tabOpen = 4;
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการส่งไปสรุปผลการประเมิน",
+    "ต้องการยืนยันส่งไปสรุปผลการประเมินใช่หรือไม่?"
+  );
+}
+
+onMounted(async () => {
+  showLoader();
+  store.isUpdate = await false;
+  await getAll();
 });
 </script>
 
@@ -305,243 +477,335 @@ onMounted(() => {
   </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-card bordered flat class="relative-position">
+    <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
+      <q-avatar size="80px">
+        <q-img
+          :src="store.dataEvaluation.avartar"
+          v-if="store.dataEvaluation.avartar !== undefined"
+        />
+        <q-img src="@/assets/avatar_user.jpg" v-else />
+      </q-avatar>
+    </div>
+    <!-- <div class="row text-center">
+        
+          </div> -->
 
-                <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>
+    <div
+      v-if="$q.screen.gt.xs"
+      class="absolute-center-left"
+      style="left: 2%; top: 50%; transform: translateY(-50%)"
+    >
+      <q-avatar size="80px">
+        <q-img
+          :src="store.dataEvaluation.avartar"
+          v-if="store.dataEvaluation.avartar !== undefined"
+        />
+        <q-img src="@/assets/avatar_user.jpg" v-else />
+      </q-avatar>
+    </div>
+    <div class="row col-12">
+      <div class="row items-center col-12 q-pa-sm">
+        <div class="col-12" :style="$q.screen.gt.xs ? 'padding-left: 12%' : ''">
+          <div class="row col-12 items-center justify-center">
+            <span class="text-h6 text-weight-medium text-primary">{{
+              store.dataEvaluation.firstName
+                ? `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
+                : ""
+            }}</span>
+            <q-space v-if="$q.screen.gt.xs" />
 
-                <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>
+            <div class="q-gutter-x-sm">
+              <span
+                v-if="
+                  (store.tabMain === '1' &&
+                    store.dataEvaluation.posTypeName != 'อำนวยการ' &&
+                    store.dataEvaluation.posTypeName != 'บริหาร' &&
+                    store.indicatorWeightTotal != 100) ||
+                  (store.dataEvaluation.posTypeName == 'อำนวยการ' &&
+                    store.dataEvaluation.posTypeName == 'บริหาร' &&
+                    (store.indicatorWeight1Total != 100 ||
+                      store.indicatorWeight2Total != 20) &&
+                    store.dataEvaluation.evaluationStatus == 'NEW')
+                "
+                class="text-red"
+                >*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
+              >
+              <br v-if="!$q.screen.gt.xs" />
+              <q-btn
+                v-if="
+                  store.rolePerson == 'USER' &&
+                  store.dataEvaluation.evaluationStatus == 'NEW'
+                "
+                :disabled="
+                  (store.dataEvaluation.posTypeName != 'อำนวยการ' &&
+                    store.dataEvaluation.posTypeName != 'บริหาร' &&
+                    store.indicatorWeightTotal != 100) ||
+                  (store.dataEvaluation.posTypeName == 'อำนวยการ' &&
+                    store.dataEvaluation.posTypeName == 'บริหาร' &&
+                    (store.indicatorWeight1Total != 100 ||
+                      store.indicatorWeight2Total != 20))
+                "
+                unelevated
+                round
+                icon="mdi-send"
+                color="grey-2"
+                text-color="blue-6"
+                size="md"
+                @click="sendToEvaluatore()"
+              >
+                <q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  store.rolePerson == 'USER' &&
+                  store.tabMain == '2' &&
+                  store.dataEvaluation.evaluationStatus == 'APPROVE'
+                "
+                unelevated
+                round
+                icon="mdi-send"
+                color="grey-2"
+                text-color="blue-6"
+                size="md"
+                @click="sendToEvauator"
+              >
+                <q-tooltip>ทำการประเมิน</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  store.rolePerson == 'USER' &&
+                  store.dataEvaluation.evaluationStatus == 'EVALUATING' &&
+                  store.tabMain == '3'
+                "
+                unelevated
+                round
+                icon="mdi-send"
+                color="grey-2"
+                text-color="blue-6"
+                size="md"
+                @click="sendToEvaluateEvaluatore()"
+              >
+                <q-tooltip>ส่งให้ผู้ประเมินรายงานผลสำเร็จของงาน</q-tooltip>
+              </q-btn>
+              <!-- <q-btn
+                      v-if="
+                        store.rolePerson == 'EVALUATOR' &&
+                        store.dataEvaluation.evaluationStatus ==
+                          'EVALUATING_EVALUATOR' &&
+                        store.tabMain == '3'
+                      "
+                      unelevated
+                      round
+                      icon="mdi-send"
+                      color="grey-2"
+                      text-color="blue-6"
+                      size="md"
+                      @click="sendToSummary('SUMMARY')"
+                    >
+                      <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>
+              <q-btn
+                v-if="
+                  store.rolePerson == 'EVALUATOR' &&
+                  store.tabMain === '3' &&
+                  store.dataEvaluation.evaluationStatus ===
+                    'EVALUATING_EVALUATOR'
+                "
+                :disabled="
+                  store.indicatorScoreVal +
+                    store.competencyScoreVal +
+                    store.devScoreVal <=
+                  0
+                "
+                unelevated
+                round
+                icon="mdi-send"
+                color="grey-2"
+                text-color="blue-6"
+                size="md"
+                @click="goToSummary()"
+              >
+                <q-tooltip>สรุปผลการประเมิน</q-tooltip>
+              </q-btn>
+
+              <q-btn
+                v-if="store.rolePerson == 'USER'"
+                unelevated
+                round
+                icon="mdi-account"
+                color="grey-2"
+                text-color="edit"
+                size="md"
+                @click="modalEdit = true"
+              >
+                <q-tooltip>{{
+                  store.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 class="row items-center bg-toolbar col-12 q-pa-sm">
+        <div
+          class="col-12 q-py-xs"
+          :style="$q.screen.gt.xs ? 'padding-left: 12%' : 'padding-left:5%'"
+        >
+          <div class="row">
+            <div class="col-xs-12 col-md-2">
+              <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                <span class="text-grey-6 col">ตำแหน่งในสายงาน</span>
+                <span class="text-weight-medium text-dark col">{{
+                  store.dataEvaluation.position
+                }}</span>
               </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-xs-12 col-md-2">
+              <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                <span class="text-grey-6 col">ตำแหน่งประเภท</span>
+                <span class="text-weight-medium text-dark col">{{
+                  store.dataEvaluation.posTypeName
+                }}</span>
               </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-xs-12 col-md-2">
+              <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                <span class="text-grey-6 col">ระดับ</span>
+                <span class="text-weight-medium text-dark col">{{
+                  store.dataEvaluation.posLevelName
+                }}</span>
               </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-xs-12 col-md-2">
+              <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                <span class="text-grey-6 col">สถานะการประเมิน</span>
+                <span class="text-weight-medium text-dark col">{{
+                  formProfile.status
+                }}</span>
               </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-xs-12 col-md-2">
+              <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                <span class="text-grey-6 col">ผลการประเมิน</span>
+                <span class="text-weight-medium text-dark col">{{
+                  formProfile.result
+                }}</span>
               </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 class="col-xs-12 col-md-2">
+              <div :class="$q.screen.gt.sm ? 'column' : 'row'">
+                <span class="text-grey-6 col">คะแนนประเมิน</span>
+                <span class="text-weight-medium text-primary col">
+                  {{
+                    store.dataEvaluation.posTypeName != "อำนวยการ" &&
+                    store.dataEvaluation.posTypeName != "บริหาร"
+                      ? (
+                          store.indicatorScoreVal +
+                          store.competencyScoreVal +
+                          store.devScoreVal
+                        ).toFixed(2)
+                      : (
+                          store.excusiveIndicator1ScoreVal +
+                          store.excusiveIndicator2ScoreVal +
+                          store.competencyScoreVal
+                        ).toFixed(2)
+                  }}
+                </span>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </q-card-section>
+    </div>
   </q-card>
 
   <q-card class="q-mt-md">
     <q-card-section style="padding: 0px">
-      <q-splitter v-model="splitterModel" disable>
+      <q-splitter
+        v-if="$q.screen.gt.xs"
+        v-model="splitterModel"
+        :horizontal="!$q.screen.gt.xs"
+        disable
+      >
         <template v-slot:before>
           <q-tabs
             v-model="store.tabMain"
-            vertical
+            :vertical="$q.screen.gt.xs"
             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="1"
+              label="จัดทำข้อตกลง"
+              :disable="store.tabOpen != 1"
+            />
             <q-tab
               name="2"
               label="รายงานความก้าวหน้า"
-              :disable="store.tabOpen < 2"
+              :disable="store.tabOpen != 2"
             />
             <q-tab
               name="3"
               label="รายงานผลสำเร็จของงาน"
               :disable="store.tabOpen < 3"
             />
-
+            <q-tab
+              name="4"
+              label="สรุปผลการประเมิน"
+              :disable="
+                store.tabOpen < 4 ||
+                (store.tabOpen == 4 &&
+                  store.rolePerson === 'USER' &&
+                  store.dataEvaluation.evaluationStatus != 'COMPLETE')
+              "
+            />
             <q-tab name="5" label="ไฟล์เอกสาร" />
           </q-tabs>
         </template>
@@ -562,16 +826,52 @@ onMounted(() => {
               class="q-pa-none"
             >
               <Assessment v-if="store.tabMain === '1'" />
-              <Assessment v-if="store.tabMain === '2'" />
-              <Assessment v-if="store.tabMain === '3'" />
+              <Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
+              <Assessment v-if="store.tabMain === '3'" :type="'commander'" />
+              <Result v-if="store.tabMain === '4'" :type="'result'" />
               <File v-if="store.tabMain === '5'" />
             </q-tab-panel>
           </q-tab-panels>
-        </template> </q-splitter
+        </template>
+      </q-splitter>
+
+      <q-list bordered class="rounded-borders" v-else>
+        <q-expansion-item
+          expand-separator
+          label="จัดทำข้อตกลง"
+          @click="store.tabMain = '1'"
+        >
+          <Assessment v-if="store.tabMain === '1'" />
+        </q-expansion-item>
+
+        <q-expansion-item
+          expand-separator
+          label="รายงานความก้าวหน้า"
+          @click="store.tabMain = '2'"
+          :disable="store.tabOpen < 2"
+        >
+          <Assessment v-if="store.tabMain === '2'" :type="'evaluator'" />
+        </q-expansion-item>
+
+        <q-expansion-item
+          expand-separator
+          label="รายงานผลสำเร็จของงาน"
+          @click="store.tabMain = '3'"
+          :disable="store.tabOpen < 3"
+        >
+          <Assessment v-if="store.tabMain === '3'" :type="'commander'" />
+        </q-expansion-item>
+
+        <q-expansion-item
+          expand-separator
+          label="ไฟล์เอกสาร"
+          @click="store.tabMain = '5'"
+        >
+          <File v-if="store.tabMain === '5'" />
+        </q-expansion-item> </q-list
     ></q-card-section>
   </q-card>
-
-  <q-dialog v-model="modal" persistent>
+  <q-dialog v-model="modalEdit" persistent>
     <q-card bordered style="width: 50vh">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
@@ -581,7 +881,7 @@ onMounted(() => {
               ? 'แก้ไขผู้ประเมิน'
               : 'ข้อมูลผู้ประเมิน'
           "
-          :close="closeDialogAssessor"
+          :close="close"
         />
         <q-separator />
         <q-card-section>
@@ -702,11 +1002,89 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
+  <!-- <q-dialog v-model="modalScore" persistent>
+    <q-card bordered style="width: 50vh">
+      <q-form greedy @submit.prevent @validation-success="onSubmitScore">
+        <DialogHeader tittle="แก้ไขคะแนนเต็ม" :close="clearScore" />
+        <q-separator />
+        <q-card-section>
+          <div class="column q-gutter-sm">
+            <q-input
+              v-model="plannedPoint"
+              label="งานตามแผนปฏิบัติราชการประจำปี"
+              dense
+              outlined
+              class="inputgreen"
+              mask="###"
+              :rules="[
+                (val) =>
+                  !!val ||
+                  val == '0' ||
+                  'กรุณากรอกคะเเนนงานตามแผนปฏิบัติราชการประจำปี หรือ 0',
+              ]"
+              hide-bottom-space
+              lazy-rules
+            />
+            <q-input
+              v-model="rolePoint"
+              label="งานตามหน้าที่ความรับผิดชอบหลัก"
+              dense
+              outlined
+              class="inputgreen"
+              mask="###"
+              :rules="[(val:string) => !!val || val == '0' || `${'กรุณากรอกคะเเนนงานตามหน้าที่ความรับผิดชอบหลัก หรือ 0'}`,]"
+              hide-bottom-space
+              lazy-rules
+            />
+            <q-input
+              v-model="specialPoint"
+              label="งานที่ได้รับมอบหมายพิเศษ"
+              dense
+              outlined
+              class="inputgreen"
+              mask="###"
+              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนงานที่ได้รับมอบหมายพิเศษ หรือ 0'}`,]"
+              hide-bottom-space
+              lazy-rules
+            />
+            <q-input
+              v-model="capacityPoint"
+              label="สมรรถนะ"
+              dense
+              outlined
+              class="inputgreen"
+              mask="###"
+              :rules="[(val:string) => !!val || val == '0' ||`${'กรุณากรอกคะเเนนสมรรถนะ หรือ 0'}`,]"
+              hide-bottom-space
+              lazy-rules
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions class="bg-white row justify-between">
+          <div class="col-8 text-red q-px-sm">
+            <span v-if="scoreTotal == true"
+              >คะแนนเต็มรวมกันต้องเท่ากับ 100 คะแนน</span
+            >
+          </div>
+          <q-btn
+            label="บันทึก"
+            color="secondary"
+            type="submit"
+            :disable="totalScore !== 100"
+            ><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" />
+  <DialogStatus
+    v-model:modal="modalStatus"
+    v-model:is-probation="store.dataProfile.isProbation"
+  />
 </template>
-
-<style scoped>
+<style>
 .bg-toolbar {
   background-color: #f2fbfa;
 }
@@ -716,4 +1094,4 @@ onMounted(() => {
   top: 50%;
   transform: translateY(-50%);
 }
-</style>
+</style>
\ No newline at end of file