From 72ca70070261b099b16877b58ee9b2b561617f9f Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 24 May 2024 16:57:35 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20respones?=
 =?UTF-8?q?ive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/05_leave/components/Calendar.vue  |   4 +-
 src/modules/07_appealComplain/views/Form.vue  |  45 +-
 src/modules/07_appealComplain/views/Main.vue  |  10 +-
 .../08_KPI/components/Tab/01_Assessment.vue   |   2 +-
 src/modules/08_KPI/components/Tab/TabMain.vue |  25 +-
 src/modules/08_KPI/views/form.vue             | 444 +++++++++---------
 src/modules/08_KPI/views/main.vue             |  73 ++-
 src/modules/08_KPI/views/mainEvaluator.vue    |  21 +-
 8 files changed, 342 insertions(+), 282 deletions(-)

diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index ad2ac1a..a217649 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -274,7 +274,7 @@ onMounted(async () => {
 
 <template>
   <div class="row">
-    <div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm row">
+    <div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
       <q-card class="col-12" flat bordered>
         <div class="q-gutter-sm col-12">
           <q-list class="rounded-borders q-pt-sm" dense>
@@ -299,7 +299,7 @@ onMounted(async () => {
       </q-card>
     </div>
 
-    <div class="col-sm-12 col-md-9 row">
+    <div class="col-xs-12 col-md-9 row">
       <div class="q-mt-sm col-12">
         <div class="row col-12 q-gutter-sm">
           <div class="demo-app-main">
diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
index 22ea4bd..d98e413 100644
--- a/src/modules/07_appealComplain/views/Form.vue
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, reactive, defineProps, watch } from "vue";
 import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
@@ -96,7 +97,7 @@ function validateForm() {
     }
   }
   if (hasError.every((result) => result === true)) {
-      onSubmit(formData);
+    onSubmit(formData);
   } else {
     console.log("ไม่ผ่าน ");
     console.log(hasError);
@@ -161,7 +162,7 @@ function onSubmit(data: any) {
 </script>
 <template>
   <div class="row">
-    <div class="col-sm-12 col-md-12">
+    <div class="col-sm-12 col-md-12 col-xs-12">
       <form @submit.prevent="validateForm">
         <q-card bordered>
           <div class="q-pa-md">
@@ -184,10 +185,14 @@ function onSubmit(data: any) {
                   <q-icon name="mdi-information-outline" size="20px" />
                   คำอุทธรณ์/ร้องทุกข์นี้จะยังไม่สมบูรณ์
                   จนกว่าผู้อุทธรณ์/ร้องทุกข์จะ “พิมพ์แบบฟอร์มคำร้อง” จากระบบ
-                  พร้อมเอกสารหลักฐานทั้งหมดนำส่งไปรษณีย์ให้ กพค. หรือนำเอกสารทั้งหมดไปส่งด้วยตนเองที่ชั้น 14 อาคารศรีจุลทรัพย์
+                  พร้อมเอกสารหลักฐานทั้งหมดนำส่งไปรษณีย์ให้ กพค.
+                  หรือนำเอกสารทั้งหมดไปส่งด้วยตนเองที่ชั้น 14 อาคารศรีจุลทรัพย์
                 </q-banner>
               </div>
-              <div class="q-gutter-sm" v-else-if="isReadOnly||formData.status === 'NEW'">
+              <div
+                class="q-gutter-sm"
+                v-else-if="isReadOnly || formData.status === 'NEW'"
+              >
                 <q-banner
                   inline-actions
                   bordered
@@ -202,7 +207,7 @@ function onSubmit(data: any) {
                 </q-banner>
               </div>
               <div class="row q-gutter-x-sm">
-                <div class="col-3">
+                <div class="col-xs-12 col-md-3">
                   <q-select
                     :class="inputEdit(isReadOnly)"
                     :readonly="isReadOnly"
@@ -221,22 +226,20 @@ function onSubmit(data: any) {
                     hide-bottom-space
                   />
                 </div>
-                <div class="col-3">
-                  <div class="col-3">
-                    <q-input
-                      :class="inputEdit(isReadOnly)"
-                      :readonly="isReadOnly"
-                      ref="titleRef"
-                      :rules="[
-                        (val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
-                      ]"
-                      v-model="formData.title"
-                      dense
-                      outlined
-                      label="เรื่องอุทธรณ์/ร้องทุกข์"
-                      hide-bottom-space
-                    />
-                  </div>
+                <div class="col-xs-12 col-md-3">
+                  <q-input
+                    :class="inputEdit(isReadOnly)"
+                    :readonly="isReadOnly"
+                    ref="titleRef"
+                    :rules="[
+                      (val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
+                    ]"
+                    v-model="formData.title"
+                    dense
+                    outlined
+                    label="เรื่องอุทธรณ์/ร้องทุกข์"
+                    hide-bottom-space
+                  />
                 </div>
               </div>
               <div class="row">
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 5c47962..6471e94 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -14,7 +14,7 @@ import config from "@/app.config";
 import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
 import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
 
-const total = ref<number>(0)
+const total = ref<number>(0);
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
@@ -175,7 +175,7 @@ const getData = async () => {
       )
     )
     .then((res: any) => {
-      total.value = res.data.result.total
+      total.value = res.data.result.total;
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       let data = res.data.result.data;
       dataStore.fetchAppealComplain(data);
@@ -280,7 +280,7 @@ onMounted(async () => {
             </div>
           </div>
           <div class="row col-12 q-col-gutter-sm q-mb-sm">
-            <div class="col-2">
+            <div class="col-xs-12 col-md-2">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formData.year"
@@ -316,7 +316,7 @@ onMounted(async () => {
               </datepicker>
             </div>
 
-            <div class="col-2">
+            <div class="col-xs-12 col-md-2">
               <q-select
                 v-model="formData.type"
                 label="ประเภท"
@@ -330,7 +330,7 @@ onMounted(async () => {
                 @update:model-value="dataUpdate"
               />
             </div>
-            <div class="col-2">
+            <div class="col-xs-12 col-md-2">
               <q-select
                 v-model="formData.status"
                 label="สถานะ"
diff --git a/src/modules/08_KPI/components/Tab/01_Assessment.vue b/src/modules/08_KPI/components/Tab/01_Assessment.vue
index 5afc8d5..8cb40c6 100644
--- a/src/modules/08_KPI/components/Tab/01_Assessment.vue
+++ b/src/modules/08_KPI/components/Tab/01_Assessment.vue
@@ -212,7 +212,7 @@ onMounted(() => {
 
 <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">
diff --git a/src/modules/08_KPI/components/Tab/TabMain.vue b/src/modules/08_KPI/components/Tab/TabMain.vue
index a3b8930..6672963 100644
--- a/src/modules/08_KPI/components/Tab/TabMain.vue
+++ b/src/modules/08_KPI/components/Tab/TabMain.vue
@@ -35,7 +35,12 @@ const splitterModel = ref<number>(12);
 </script>
 
 <template>
-  <q-splitter v-model="splitterModel" :horizontal="!$q.screen.gt.xs" disable>
+  <q-splitter
+    v-model="splitterModel"
+    :horizontal="!$q.screen.gt.xs"
+    disable
+    v-if="$q.screen.gt.xs"
+  >
     <template v-slot:before>
       <q-tabs
         v-model="store.tabMain"
@@ -82,6 +87,24 @@ const splitterModel = ref<number>(12);
       </q-tab-panels>
     </template>
   </q-splitter>
+
+  <q-list bordered class="rounded-borders" v-else>
+    <q-expansion-item expand-separator label="จัดทำข้อตกลง">
+      <Assessment />
+    </q-expansion-item>
+
+    <q-expansion-item expand-separator label="รายงานความก้าวหน้า">
+      <Assessment :type="'evaluator'" />
+    </q-expansion-item>
+
+    <q-expansion-item expand-separator label="รายงานผลสำเร็จของงาน">
+      <Assessment :type="'commander'" />
+    </q-expansion-item>
+
+    <q-expansion-item expand-separator label="ไฟล์เอกสาร">
+      <File />
+    </q-expansion-item>
+  </q-list>
 </template>
 
 <style scoped>
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 813c4e4..6401e12 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -3,8 +3,8 @@ import { ref, onMounted, reactive, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
 import { useQuasar } from "quasar";
+import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useKpiDataStore } from "@/modules/08_KPI/store";
@@ -317,255 +317,239 @@ onMounted(async () => {
 </script>
 
 <template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="
+            isReadonly ? router.push(`/KPI-evaluator`) : router.push(`/KPI`)
+          "
+        />
+        {{
+          isReadonly
+            ? "รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล"
+            : id
+            ? `แก้ไขแบบประเมิน`
+            : `เพิ่มแบบประเมิน`
+        }}
+        <q-space />
+      </div>
+      <div class="col-12">
+        <q-card bordered flat class="relative-position">
+          <div
+            class="absolute-center-left"
+            style="left: 2%; top: 50%; transform: translateY(-50%)"
+          >
+            <q-avatar size="95px">
+              <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="padding-left: 12%">
+                <div class="row col-12 items-center">
+                  <span class="text-h6 text-weight-medium text-primary">{{
+                    `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
+                  }}</span>
+                  <q-space />
+                  <div class="q-gutter-x-sm">
+                    <span
+                      v-if="
+                        (store.dataEvaluation.posExecutiveName == null &&
+                          store.indicatorWeightTotal != 100) ||
+                        (store.dataEvaluation.posExecutiveName != null &&
+                          (store.indicatorWeight1Total != 100 ||
+                            store.indicatorWeight2Total != 20))
+                      "
+                      class="text-red"
+                      >*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</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"
+                      @click="sendToEvaluatore('NEW_EVALUATOR')"
+                    >
+                      <q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
+                    </q-btn>
 
-    <div class="col-12 row justify-center">
-      <div class="col-xs-12 col-sm-12 col-md-11">
-        <div class="toptitle text-white col-12 row items-center">
-          <q-btn
-            icon="mdi-arrow-left"
-            unelevated
-            round
-            dense
-            flat
-            color="primary"
-            class="q-mr-sm"
-            @click="
-              isReadonly ? router.push(`/KPI-evaluator`) : router.push(`/KPI`)
-            "
-          />
-          {{
-            isReadonly
-              ? "รายละเอียดการประเมินผลการปฏิบัติราชการระดับบุคคล"
-              : id
-              ? `แก้ไขแบบประเมิน`
-              : `เพิ่มแบบประเมิน`
-          }}
-          <q-space />
-        </div>
-        <div class="col-12">
-          <q-card bordered flat class="relative-position">
-            <div
-              class="absolute-center-left"
-              style="left: 2%; top: 50%; transform: translateY(-50%)"
-            >
-              <q-avatar size="95px">
-                <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="padding-left: 12%">
-                  <div class="row col-12 items-center">
-                    <span class="text-h6 text-weight-medium text-primary">{{
-                      `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
-                    }}</span>
-                    <q-space />
-                    <div class="q-gutter-x-sm">
-                      <span
-                        v-if="
-                          (store.dataEvaluation.posExecutiveName == null &&
-                            store.indicatorWeightTotal != 100) ||
-                          (store.dataEvaluation.posExecutiveName != null &&
-                            (store.indicatorWeight1Total != 100 ||
-                              store.indicatorWeight2Total != 20))
-                        "
-                        class="text-red"
-                        >*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</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"
-                        @click="sendToEvaluatore('NEW_EVALUATOR')"
-                      >
-                        <q-tooltip>ส่งให้ผู้ประเมินอนุมัติ</q-tooltip>
-                      </q-btn>
+                    <q-btn
+                      v-if="
+                        store.rolePerson == 'USER' &&
+                        store.dataEvaluation.evaluationStatus == 'EVALUATING'
+                      "
+                      unelevated
+                      round
+                      icon="mdi-send"
+                      color="grey-2"
+                      text-color="blue-6"
+                      size="md"
+                      @click="sendToEvaluatore('EVALUATING_EVALUATOR')"
+                    >
+                      <q-tooltip>ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip>
+                    </q-btn>
 
-                      <q-btn
-                        v-if="
-                          store.rolePerson == 'USER' &&
-                          store.dataEvaluation.evaluationStatus == 'EVALUATING'
-                        "
-                        unelevated
-                        round
-                        icon="mdi-send"
-                        color="grey-2"
-                        text-color="blue-6"
-                        size="md"
-                        @click="sendToEvaluatore('EVALUATING_EVALUATOR')"
-                      >
-                        <q-tooltip
-                          >ส่งให้ผู้ประเมินอนุมัติผลการประเมิน</q-tooltip
-                        >
-                      </q-btn>
+                    <q-btn
+                      v-if="
+                        store.rolePerson == 'USER' &&
+                        store.tabOpen < 3 &&
+                        store.dataEvaluation.evaluationStatus != 'NEW' &&
+                        (store.dataEvaluation.evaluationReqEdit == null ||
+                          store.dataEvaluation.evaluationReqEdit == 'DONE')
+                      "
+                      :disabled="store.dataEvaluation.evaluatorId == null"
+                      unelevated
+                      round
+                      icon="mdi-file-edit"
+                      color="grey-2"
+                      text-color="red-6"
+                      size="md"
+                      @click="requireEdit()"
+                    >
+                      <q-tooltip>ขอแก้ไขข้อตกลง</q-tooltip>
+                    </q-btn>
 
-                      <q-btn
-                        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
-                          v-if="!isReadonly"
-                          unelevated
-                          round
-                          icon="mdi-format-list-bulleted-square"
-                          color="grey-2"
-                          text-color="amber-10"
-                          size="md"
-                          @click="modalScore = true"
-                        >
-                          <q-tooltip>แก้ไขคะแนนเต็ม</q-tooltip>
-                        </q-btn> -->
-                      <q-btn
-                        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"
-                      >
-                        <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
-                      </q-btn>
-                      <q-btn
-                        unelevated
-                        round
-                        color="grey-2"
-                        text-color="blue-5"
-                        icon="mdi-file-eye-outline"
-                        size="md"
-                      >
-                        <q-tooltip>ดูข้อมูลการทดลองงาน</q-tooltip>
-                      </q-btn>
-                    </div>
+                    <q-btn
+                      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"
+                    >
+                      <q-tooltip>ดูข้อมูลการช่วยราชการ</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      unelevated
+                      round
+                      color="grey-2"
+                      text-color="blue-5"
+                      icon="mdi-file-eye-outline"
+                      size="md"
+                    >
+                      <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">{{
-                          store.dataEvaluation.position
-                        }}</span>
-                      </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">{{
+                        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">{{
-                          store.dataEvaluation.posTypeName
-                        }}</span>
-                      </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ประเภทตำแหน่ง</span>
+                      <span class="text-weight-medium text-dark">{{
+                        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">{{
-                          store.dataEvaluation.posLevelName
-                        }}</span>
-                      </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ระดับตำแหน่ง</span>
+                      <span class="text-weight-medium text-dark">{{
+                        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">{{
-                          formProfile.status
-                        }}</span>
-                      </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">สถานะการประเมิน</span>
+                      <span class="text-weight-medium text-dark">{{
+                        formProfile.status
+                      }}</span>
                     </div>
-                    <div class="col-2">
-                      <div class="column">
-                        <span class="text-grey-6">ผลการประเมิน</span>
-                        <span class="text-weight-medium text-dark">{{
-                          formProfile.result
-                        }}</span>
-                      </div>
+                  </div>
+                  <div class="col-2">
+                    <div class="column">
+                      <span class="text-grey-6">ผลการประเมิน</span>
+                      <span class="text-weight-medium text-dark">{{
+                        formProfile.result
+                      }}</span>
                     </div>
-                    <div class="col-2">
-                      <div class="column">
-                        <span class="text-grey-6">คะแนนประเมิน</span>
-                        <span class="text-weight-medium text-primary">
-                          {{
-                            store.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-2">
+                    <div class="column">
+                      <span class="text-grey-6">คะแนนประเมิน</span>
+                      <span class="text-weight-medium text-primary">
+                        {{
+                          store.dataEvaluation.posExecutiveName == null
+                            ? (
+                                store.indicatorScoreVal +
+                                store.competencyScoreVal +
+                                store.devScoreVal
+                              ).toFixed(2)
+                            : (
+                                store.excusiveIndicator1ScoreVal +
+                                store.excusiveIndicator2ScoreVal +
+                                store.competencyScoreVal
+                              ).toFixed(2)
+                        }}
+                      </span>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </q-card>
+          </div>
+        </q-card>
 
-          <q-card class="q-mt-md rounded">
-            <TabMain />
-          </q-card>
-        </div>
+        <q-card class="q-mt-md rounded">
+          <TabMain />
+        </q-card>
       </div>
     </div>
-
+  </div>
 
   <q-dialog v-model="modalEdit" persistent>
     <q-card bordered style="width: 50vh">
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 8e5b749..87e2940 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -383,7 +383,23 @@ onMounted(() => {
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
+      <q-toolbar style="padding: 0px">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+        <q-toolbar-title class="toptitle text-white items-center">
+          รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล</q-toolbar-title
+        >
+      </q-toolbar>
+
+      <!-- <div class="toptitle text-white col-12 row items-center">
         <q-btn
           icon="mdi-arrow-left"
           unelevated
@@ -395,11 +411,11 @@ onMounted(() => {
           @click="router.push(`/`)"
         />
         รายการขอรับประเมินผลการปฏิบัติราชการระดับบุคคล
-      </div>
+      </div> -->
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <q-toolbar style="padding: 0">
-            <div class="row q-gutter-sm">
+          <div class="row col-12 q-col-gutter-sm q-mb-sm">
+            <div class="col-xs-12 col-md-3">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="year"
@@ -418,7 +434,6 @@ onMounted(() => {
                     dense
                     lazy-rules
                     outlined
-                    class="inputgreen"
                     hide-bottom-space
                     :model-value="!!year ? year + 543 : null"
                     :label="`${'ปีงบประมาณ'}`"
@@ -434,6 +449,9 @@ onMounted(() => {
                   </q-input>
                 </template>
               </datepicker>
+            </div>
+
+            <div class="col-xs-10 col-md-3">
               <q-select
                 v-model="round"
                 outlined
@@ -442,11 +460,13 @@ onMounted(() => {
                 option-label="name"
                 option-value="id"
                 :options="roundMainOp"
-                style="min-width: 200px"
                 emit-value
                 map-options
                 @update:model-value="changRound"
               />
+            </div>
+
+            <div class="col-xs-2 col-md-2">
               <q-btn
                 flat
                 round
@@ -459,13 +479,7 @@ onMounted(() => {
             </div>
 
             <q-space />
-            <div class="row q-gutter-sm">
-              <!-- <q-input
-                outlined
-                dense
-                v-model="filterKeyword"
-                label="ค้นหา"
-              ></q-input> -->
+            <div class="col-xs-12 col-md-2">
               <q-select
                 v-model="visibleColumns"
                 multiple
@@ -481,10 +495,10 @@ onMounted(() => {
                 style="min-width: 150px"
               />
             </div>
-          </q-toolbar>
+          </div>
 
           <div class="col-12">
-            <q-table
+            <d-table
               ref="table"
               :columns="columns"
               :rows="rows"
@@ -494,7 +508,6 @@ onMounted(() => {
               bordered
               :paging="true"
               dense
-              class="custom-table2"
               :rows-per-page-options="[10, 25, 50, 100]"
               :visible-columns="visibleColumns"
               v-model:pagination="pagination"
@@ -524,6 +537,26 @@ onMounted(() => {
                   </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 @click="redirectViewDetail(props.row.id)">
+                      <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 ? col.value : "-" }}</q-item-label
+                          >
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
               <template v-slot:pagination="scope">
                 ทั้งหมด {{ total }} รายการ
                 <q-pagination
@@ -538,7 +571,7 @@ onMounted(() => {
                   @update:model-value="fetchList"
                 ></q-pagination>
               </template>
-            </q-table>
+            </d-table>
           </div>
         </q-card>
       </div>
@@ -546,7 +579,10 @@ onMounted(() => {
   </div>
 
   <q-dialog v-model="modalDialog" persistent>
-    <q-card class="col-12" style="width: 25vw">
+    <q-card
+      class="col-12"
+      :style="$q.screen.gt.xs ? 'width: 25vw' : 'width: 100vw'"
+    >
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader :tittle="'สร้างแบบประเมินผลฯ'" :close="onCloseDialog" />
         <q-separator />
@@ -571,7 +607,6 @@ onMounted(() => {
                     dense
                     lazy-rules
                     outlined
-                    class="inputgreen"
                     hide-bottom-space
                     :model-value="!!yearDialog ? yearDialog + 543 : null"
                     :label="`${'ปีงบประมาณ'}`"
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index 810100e..f024cf5 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -198,7 +198,7 @@ onMounted(async () => {
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">
+      <q-toolbar style="padding: 0px;">
         <q-btn
           icon="mdi-arrow-left"
           unelevated
@@ -209,8 +209,23 @@ onMounted(async () => {
           class="q-mr-sm"
           @click="router.push(`/`)"
         />
-        รายการการประเมินผลการปฏิบัติราชการระดับบุคคล
-      </div>
+        <q-toolbar-title class="toptitle text-white items-center">
+          รายการการประเมินผลการปฏิบัติราชการระดับบุคคล</q-toolbar-title
+        >
+      </q-toolbar>
+
+      <!-- <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/`)"
+        />
+      </div> -->
       <div class="col-12">
         <q-card bordered class="q-pa-md">
           <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">