From 718d5a64216809b32d2febcaeadd6536b45db740 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 23 May 2024 18:05:18 +0700
Subject: [PATCH 01/10] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=9C=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A3=E0=B8=B0=E0=B8=94=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5=20=3D>=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/views/AddTransfer.vue | 14 ++--
 src/modules/02_transfer/views/Main.vue        | 75 ++++++++-----------
 src/modules/03_retire/views/DialogRetire.vue  |  2 +-
 src/modules/03_retire/views/addRetire.vue     | 25 +++++--
 src/modules/03_retire/views/main.vue          |  2 +-
 src/modules/05_leave/components/Table.vue     |  6 +-
 src/modules/05_leave/views/Main.vue           | 42 ++++++-----
 .../08_KPI/components/Evaluator/01_TabAll.vue | 27 +++++++
 .../components/Evaluator/02_TabOther.vue      | 48 ++++++++++++
 src/modules/08_KPI/components/Tab/TabMain.vue | 18 +----
 10 files changed, 162 insertions(+), 97 deletions(-)

diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index 1294a70..a359a55 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -59,10 +59,6 @@ const saveData = async () => {
 const createTransfer = async () => {
   showLoader();
   const formData = new FormData();
-  //   const blob = files.value.slice(0, files.value[0].size);
-  //   const newFile = new File(blob, nameFile.value, {
-  //     type: files.value[0].type,
-  //   });
   formData.append("Organization", tranferOrg.value);
   formData.append("Reason", noteReason.value);
   formData.append("file", files.value);
@@ -145,7 +141,9 @@ const fileUploadDoc = async (file: any) => {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -154,7 +152,9 @@ const fileUploadDoc = async (file: any) => {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
                 />
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="noteReason"
@@ -166,7 +166,7 @@ const fileUploadDoc = async (file: any) => {
                 <div class="col-12 row" v-if="routeName == 'addTransfer'">
                   <q-file
                     v-model="files"
-                    class="col-xs-12 col-sm-12"
+                    class="col-xs-12 col-sm-12 inputgreen"
                     outlined
                     dense
                     lazy-rules
diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index ce7ce9d..39b49dd 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -234,7 +234,7 @@ const clickBack = () => {
             </div>
           </div>
           <div>
-            <q-table
+            <d-table
               flat
               bordered
               dense
@@ -290,52 +290,39 @@ const clickBack = () => {
                   </q-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
+                    @click="router.push(`/transfer/` + props.row.id)"
+                  >
+                    <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 === 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </q-item-label>
+
+                          <q-item-label v-else>{{
+                            col.value ?? "-"
+                          }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+            </d-table>
           </div>
         </q-card>
       </div>
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.custom-table2 {
-  max-height: 64vh;
-
-  .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>
+<style scoped lang="scss"></style>
diff --git a/src/modules/03_retire/views/DialogRetire.vue b/src/modules/03_retire/views/DialogRetire.vue
index 9f48e7d..9c8d213 100644
--- a/src/modules/03_retire/views/DialogRetire.vue
+++ b/src/modules/03_retire/views/DialogRetire.vue
@@ -20,7 +20,7 @@ const props = defineProps({
   fectData: { type: Function, require: true },
 });
 
-const id = ref<string>(route.params.id.toString());
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
 
 const mixin = useCounterMixin();
 const { dialogConfirm, messageError, showLoader, hideLoader, success } = mixin;
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index b3da355..cc532e2 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -186,7 +186,12 @@ function downloadFile(data: string) {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-md-8 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-8 col-xs-12'
+                      : 'col-md-8 col-xs-12 inputgreen'
+                  "
+                  class=""
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -196,7 +201,11 @@ function downloadFile(data: string) {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
                 />
                 <datepicker
-                  class="col-md-2 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-2 col-xs-12'
+                      : 'col-md-2 col-xs-12 inputgreen'
+                  "
                   menu-class-name="modalfix"
                   v-model="dateCommand"
                   :locale="'th'"
@@ -240,7 +249,11 @@ function downloadFile(data: string) {
                   </template>
                 </datepicker>
                 <datepicker
-                  class="col-md-2 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-2 col-xs-12'
+                      : 'col-md-2 col-xs-12 inputgreen'
+                  "
                   menu-class-name="modalfix"
                   v-model="dateLeave"
                   :locale="'th'"
@@ -284,7 +297,9 @@ function downloadFile(data: string) {
                   </template>
                 </datepicker>
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="noteReason"
@@ -300,7 +315,7 @@ function downloadFile(data: string) {
                 <div class="col-12 row" v-if="routeName == 'AddRetire'">
                   <q-file
                     v-model="files"
-                    class="col-xs-12 col-sm-12"
+                    class="col-xs-12 col-sm-12 inputgreen"
                     outlined
                     dense
                     lazy-rules
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index d0cbd59..3d7912c 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -256,7 +256,7 @@ const clickBack = () => {
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
-                    <div>
+                    <div v-else>
                       {{ col.value }}
                     </div>
                   </q-td>
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index 0639bbb..b71361e 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -205,11 +205,11 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
     </q-card>
   </div>
   <div>
-    <q-table
+    <d-table
       ref="table"
       flat
       bordered
-      class="custom-table2"
+     
       v-bind="attrs"
       virtual-scroll
       :virtual-scroll-sticky-size-start="48"
@@ -244,7 +244,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
       <template v-slot:item="props">
         <slot v-bind="props" name="item"></slot>
       </template>
-    </q-table>
+    </d-table>
   </div>
 </template>
 
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 46fd6e3..3cb4338 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -452,28 +452,30 @@ onMounted(async () => {
                 </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>
+            <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 === 'no'">
-                        {{ props.rowIndex + 1 }}
-                      </q-item-label>
+                        <q-item-label v-if="col.name === 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </q-item-label>
 
-                      <q-item-label v-else>{{ col.value }}</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-card>
-            </div>
-          </template> -->
+                        <q-item-label v-else>{{
+                          col.value ?? "-"
+                        }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
           </d-table>
         </div>
       </q-card-section>
diff --git a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
index 3a4b976..f114fa1 100644
--- a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
+++ b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
@@ -77,6 +77,33 @@ const pagination = ref({
           </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 @click="redirectViewDetail(props.row.id)">
+            <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>
+                    <div v-if="col.name === 'name'">
+                      {{
+                        `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div></q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
       <template v-slot:pagination="scope">
         ทั้งหมด {{ total }} รายการ
         <q-pagination
diff --git a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
index 772f2f1..886443a 100644
--- a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
+++ b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
@@ -152,6 +152,54 @@ function onClickApprove(type: string = "") {
           </q-td>
         </q-tr>
       </template>
+      <template v-slot:item="props">
+        <div
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+          :style="props.selected ? 'transform: scale(0.95);' : ''"
+        >
+          <q-card
+            bordered
+            flat
+            :class="
+              props.selected
+                ? $q.dark.isActive
+                  ? 'bg-grey-9'
+                  : 'bg-grey-2'
+                : ''
+            "
+          >
+            <q-card-section>
+              <q-checkbox
+                dense
+                v-model="props.selected"
+                :label="props.row.name"
+              />
+            </q-card-section>
+            <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>
+                    <div v-if="col.name === 'name'">
+                      {{
+                        `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div></q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
       <template v-slot:pagination="scope">
         ทั้งหมด {{ total }} รายการ
         <q-pagination
diff --git a/src/modules/08_KPI/components/Tab/TabMain.vue b/src/modules/08_KPI/components/Tab/TabMain.vue
index 52ab8ad..a3b8930 100644
--- a/src/modules/08_KPI/components/Tab/TabMain.vue
+++ b/src/modules/08_KPI/components/Tab/TabMain.vue
@@ -35,22 +35,14 @@ const splitterModel = ref<number>(12);
 </script>
 
 <template>
-  <q-splitter v-model="splitterModel" disable>
+  <q-splitter 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
-          class="hover-tab"
-          v-for="(tab, index) in itemsTab"
-          :key="index"
-          :name="tab.name"
-          :icon="tab.icon"
-          :label="tab.label"
-        /> -->
         <q-tab name="1" label="จัดทำข้อตกลง" />
         <q-tab
           name="2"
@@ -62,12 +54,6 @@ const splitterModel = ref<number>(12);
           label="รายงานผลสำเร็จของงาน"
           :disable="store.tabOpen < 3"
         />
-        <!-- <q-tab name="3" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไป</div>
-        </q-tab>
-        <q-tab name="4" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไปอีกชั้นหนึ่ง</div>
-        </q-tab> -->
         <q-tab name="5" label="ไฟล์เอกสาร" />
       </q-tabs>
     </template>

From 650948d68a07eb9b64ef20b770201962584edca6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 23 May 2024 18:05:18 +0700
Subject: [PATCH 02/10] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=E0=B8=9C=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A3=E0=B8=B0=E0=B8=94=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5=20=3D>=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/02_transfer/views/AddTransfer.vue | 14 ++--
 src/modules/02_transfer/views/Main.vue        | 75 ++++++++-----------
 src/modules/03_retire/views/DialogRetire.vue  |  2 +-
 src/modules/03_retire/views/addRetire.vue     | 25 +++++--
 src/modules/03_retire/views/main.vue          |  2 +-
 src/modules/05_leave/components/Table.vue     |  6 +-
 src/modules/05_leave/views/Main.vue           | 42 ++++++-----
 .../08_KPI/components/Evaluator/01_TabAll.vue | 27 +++++++
 .../components/Evaluator/02_TabOther.vue      | 48 ++++++++++++
 src/modules/08_KPI/components/Tab/TabMain.vue | 18 +----
 10 files changed, 162 insertions(+), 97 deletions(-)

diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index 1294a70..a359a55 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -59,10 +59,6 @@ const saveData = async () => {
 const createTransfer = async () => {
   showLoader();
   const formData = new FormData();
-  //   const blob = files.value.slice(0, files.value[0].size);
-  //   const newFile = new File(blob, nameFile.value, {
-  //     type: files.value[0].type,
-  //   });
   formData.append("Organization", tranferOrg.value);
   formData.append("Reason", noteReason.value);
   formData.append("file", files.value);
@@ -145,7 +141,9 @@ const fileUploadDoc = async (file: any) => {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -154,7 +152,9 @@ const fileUploadDoc = async (file: any) => {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
                 />
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="noteReason"
@@ -166,7 +166,7 @@ const fileUploadDoc = async (file: any) => {
                 <div class="col-12 row" v-if="routeName == 'addTransfer'">
                   <q-file
                     v-model="files"
-                    class="col-xs-12 col-sm-12"
+                    class="col-xs-12 col-sm-12 inputgreen"
                     outlined
                     dense
                     lazy-rules
diff --git a/src/modules/02_transfer/views/Main.vue b/src/modules/02_transfer/views/Main.vue
index ce7ce9d..39b49dd 100644
--- a/src/modules/02_transfer/views/Main.vue
+++ b/src/modules/02_transfer/views/Main.vue
@@ -234,7 +234,7 @@ const clickBack = () => {
             </div>
           </div>
           <div>
-            <q-table
+            <d-table
               flat
               bordered
               dense
@@ -290,52 +290,39 @@ const clickBack = () => {
                   </q-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
+                    @click="router.push(`/transfer/` + props.row.id)"
+                  >
+                    <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 === 'no'">
+                            {{ props.rowIndex + 1 }}
+                          </q-item-label>
+
+                          <q-item-label v-else>{{
+                            col.value ?? "-"
+                          }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+            </d-table>
           </div>
         </q-card>
       </div>
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.custom-table2 {
-  max-height: 64vh;
-
-  .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>
+<style scoped lang="scss"></style>
diff --git a/src/modules/03_retire/views/DialogRetire.vue b/src/modules/03_retire/views/DialogRetire.vue
index 9f48e7d..9c8d213 100644
--- a/src/modules/03_retire/views/DialogRetire.vue
+++ b/src/modules/03_retire/views/DialogRetire.vue
@@ -20,7 +20,7 @@ const props = defineProps({
   fectData: { type: Function, require: true },
 });
 
-const id = ref<string>(route.params.id.toString());
+const id = ref<string>(route.params.id ? route.params.id.toString() : "");
 
 const mixin = useCounterMixin();
 const { dialogConfirm, messageError, showLoader, hideLoader, success } = mixin;
diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index b3da355..cc532e2 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -186,7 +186,12 @@ function downloadFile(data: string) {
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
                 <q-input
-                  class="col-md-8 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-8 col-xs-12'
+                      : 'col-md-8 col-xs-12 inputgreen'
+                  "
+                  class=""
                   dense
                   outlined
                   v-model="tranferOrg"
@@ -196,7 +201,11 @@ function downloadFile(data: string) {
                   :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
                 />
                 <datepicker
-                  class="col-md-2 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-2 col-xs-12'
+                      : 'col-md-2 col-xs-12 inputgreen'
+                  "
                   menu-class-name="modalfix"
                   v-model="dateCommand"
                   :locale="'th'"
@@ -240,7 +249,11 @@ function downloadFile(data: string) {
                   </template>
                 </datepicker>
                 <datepicker
-                  class="col-md-2 col-xs-12"
+                  :class="
+                    routeName !== 'AddRetire'
+                      ? 'col-md-2 col-xs-12'
+                      : 'col-md-2 col-xs-12 inputgreen'
+                  "
                   menu-class-name="modalfix"
                   v-model="dateLeave"
                   :locale="'th'"
@@ -284,7 +297,9 @@ function downloadFile(data: string) {
                   </template>
                 </datepicker>
                 <q-input
-                  class="col-12"
+                  :class="
+                    routeName !== 'AddRetire' ? 'col-12' : 'col-12 inputgreen'
+                  "
                   dense
                   outlined
                   v-model="noteReason"
@@ -300,7 +315,7 @@ function downloadFile(data: string) {
                 <div class="col-12 row" v-if="routeName == 'AddRetire'">
                   <q-file
                     v-model="files"
-                    class="col-xs-12 col-sm-12"
+                    class="col-xs-12 col-sm-12 inputgreen"
                     outlined
                     dense
                     lazy-rules
diff --git a/src/modules/03_retire/views/main.vue b/src/modules/03_retire/views/main.vue
index d0cbd59..3d7912c 100644
--- a/src/modules/03_retire/views/main.vue
+++ b/src/modules/03_retire/views/main.vue
@@ -256,7 +256,7 @@ const clickBack = () => {
                     <div v-if="col.name == 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
-                    <div>
+                    <div v-else>
                       {{ col.value }}
                     </div>
                   </q-td>
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index 0639bbb..b71361e 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -205,11 +205,11 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
     </q-card>
   </div>
   <div>
-    <q-table
+    <d-table
       ref="table"
       flat
       bordered
-      class="custom-table2"
+     
       v-bind="attrs"
       virtual-scroll
       :virtual-scroll-sticky-size-start="48"
@@ -244,7 +244,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
       <template v-slot:item="props">
         <slot v-bind="props" name="item"></slot>
       </template>
-    </q-table>
+    </d-table>
   </div>
 </template>
 
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 46fd6e3..3cb4338 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -452,28 +452,30 @@ onMounted(async () => {
                 </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>
+            <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 === 'no'">
-                        {{ props.rowIndex + 1 }}
-                      </q-item-label>
+                        <q-item-label v-if="col.name === 'no'">
+                          {{ props.rowIndex + 1 }}
+                        </q-item-label>
 
-                      <q-item-label v-else>{{ col.value }}</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-card>
-            </div>
-          </template> -->
+                        <q-item-label v-else>{{
+                          col.value ?? "-"
+                        }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
           </d-table>
         </div>
       </q-card-section>
diff --git a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
index 3a4b976..f114fa1 100644
--- a/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
+++ b/src/modules/08_KPI/components/Evaluator/01_TabAll.vue
@@ -77,6 +77,33 @@ const pagination = ref({
           </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 @click="redirectViewDetail(props.row.id)">
+            <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>
+                    <div v-if="col.name === 'name'">
+                      {{
+                        `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div></q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
       <template v-slot:pagination="scope">
         ทั้งหมด {{ total }} รายการ
         <q-pagination
diff --git a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
index 772f2f1..886443a 100644
--- a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
+++ b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
@@ -152,6 +152,54 @@ function onClickApprove(type: string = "") {
           </q-td>
         </q-tr>
       </template>
+      <template v-slot:item="props">
+        <div
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+          :style="props.selected ? 'transform: scale(0.95);' : ''"
+        >
+          <q-card
+            bordered
+            flat
+            :class="
+              props.selected
+                ? $q.dark.isActive
+                  ? 'bg-grey-9'
+                  : 'bg-grey-2'
+                : ''
+            "
+          >
+            <q-card-section>
+              <q-checkbox
+                dense
+                v-model="props.selected"
+                :label="props.row.name"
+              />
+            </q-card-section>
+            <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>
+                    <div v-if="col.name === 'name'">
+                      {{
+                        `${props.row.prefix}${props.row.firstname}  ${props.row.lastname}`
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value ? col.value : "-" }}
+                    </div></q-item-label
+                  >
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </template>
       <template v-slot:pagination="scope">
         ทั้งหมด {{ total }} รายการ
         <q-pagination
diff --git a/src/modules/08_KPI/components/Tab/TabMain.vue b/src/modules/08_KPI/components/Tab/TabMain.vue
index 52ab8ad..a3b8930 100644
--- a/src/modules/08_KPI/components/Tab/TabMain.vue
+++ b/src/modules/08_KPI/components/Tab/TabMain.vue
@@ -35,22 +35,14 @@ const splitterModel = ref<number>(12);
 </script>
 
 <template>
-  <q-splitter v-model="splitterModel" disable>
+  <q-splitter 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
-          class="hover-tab"
-          v-for="(tab, index) in itemsTab"
-          :key="index"
-          :name="tab.name"
-          :icon="tab.icon"
-          :label="tab.label"
-        /> -->
         <q-tab name="1" label="จัดทำข้อตกลง" />
         <q-tab
           name="2"
@@ -62,12 +54,6 @@ const splitterModel = ref<number>(12);
           label="รายงานผลสำเร็จของงาน"
           :disable="store.tabOpen < 3"
         />
-        <!-- <q-tab name="3" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไป</div>
-        </q-tab>
-        <q-tab name="4" label="ผู้บังคับบัญชา">
-          <div class="text-caption">เหนือขึ้นไปอีกชั้นหนึ่ง</div>
-        </q-tab> -->
         <q-tab name="5" label="ไฟล์เอกสาร" />
       </q-tabs>
     </template>

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

---
 src/modules/01_dashboard/views/Dashboard.vue  |   2 +-
 .../components/TableListEvaluate.vue          |  50 +-
 .../06_evaluate/views/EvaluateMain.vue        |   2 +-
 src/modules/08_KPI/views/form.vue             | 451 +++++++++---------
 src/modules/08_KPI/views/mainEvaluator.vue    | 171 ++++---
 src/modules/09_scholarship/views/detail.vue   | 250 +++++-----
 src/modules/09_scholarship/views/main.vue     | 239 ++++------
 src/style/quasar-variables.sass               |   6 +
 8 files changed, 611 insertions(+), 560 deletions(-)

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 38b3328..27b38e9 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -257,7 +257,7 @@ const thaiOptions: Intl.DateTimeFormatOptions = {
       <q-card
         flat
         bordered
-        :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: 100px;'"
+        :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: 500px;'"
         class="q-pb-sm col-12"
       >
         <div class="col-12 row q-px-md q-pt-md q-pb-sm">
diff --git a/src/modules/06_evaluate/components/TableListEvaluate.vue b/src/modules/06_evaluate/components/TableListEvaluate.vue
index ef058fb..6b0f5ec 100644
--- a/src/modules/06_evaluate/components/TableListEvaluate.vue
+++ b/src/modules/06_evaluate/components/TableListEvaluate.vue
@@ -152,7 +152,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
 </script>
 
 <template>
-  <q-table
+  <d-table
     ref="table"
     flat
     bordered
@@ -207,6 +207,52 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         </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="redirectToDetail(props.row)">
+            <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 === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </q-item-label>
+
+                <q-item-label v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+          <q-separator
+            v-if="
+              props.row.step === 'CHECK_SPEC' ||
+              props.row.step === 'PREPARE_DOC_V1' ||
+              props.row.step === 'CHECK_DOC_V1'
+            "
+          />
+          <q-card-actions align="around">
+            <q-btn
+              v-if="
+                props.row.step === 'CHECK_SPEC' ||
+                props.row.step === 'PREPARE_DOC_V1' ||
+                props.row.step === 'CHECK_DOC_V1'
+              "
+              flat
+              dense
+              round
+              color="red"
+              icon="delete"
+              @click.stop="onCkilckDelete(props.row.id)"
+            >
+              <q-tooltip>ลบ</q-tooltip>
+            </q-btn>
+          </q-card-actions>
+        </q-card>
+      </div>
+    </template>
     <template v-slot:pagination="scope">
       ทั้งหมด {{ store.row.length }} รายการ
       <q-pagination
@@ -219,7 +265,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
         :max="Number(props.maxPage)"
       ></q-pagination>
     </template>
-  </q-table>
+  </d-table>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/06_evaluate/views/EvaluateMain.vue b/src/modules/06_evaluate/views/EvaluateMain.vue
index 50b8520..ed5dcd6 100644
--- a/src/modules/06_evaluate/views/EvaluateMain.vue
+++ b/src/modules/06_evaluate/views/EvaluateMain.vue
@@ -295,7 +295,7 @@ watch(
                 :options="options"
                 option-value="val"
                 label="ค้นหาสถานะ"
-                style="width: 35vw"
+                :style="!$q.screen.gt.xs ? '' : 'width: 35vw'"
                 @update:model-value="fetchEvaluteList"
                 use-input
                 @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 2dabd13..813c4e4 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -312,251 +312,260 @@ function requireEdit() {
 onMounted(async () => {
   showLoader();
   await getAll();
+  console.log(store.dataEvaluation.avartar);
 });
 </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" />
-            </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>
+    <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.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.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="!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>
+                      <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>
                   </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 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>
-                  </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 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>
-                  <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 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>
-                  <div class="col-2">
-                    <div class="column">
-                      <span class="text-grey-6">สถานะการประเมิน</span>
-                      <span class="text-weight-medium text-dark">{{
-                        formProfile.status
-                      }}</span>
+                    <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>
-                  <div class="col-2">
-                    <div class="column">
-                      <span class="text-grey-6">ผลการประเมิน</span>
-                      <span class="text-weight-medium text-dark">{{
-                        formProfile.result
-                      }}</span>
+                    <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>
-                  <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 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>
             </div>
-          </div>
-        </q-card>
+          </q-card>
 
-        <q-card class="q-mt-md rounded">
-          <TabMain />
-        </q-card>
+          <q-card class="q-mt-md rounded">
+            <TabMain />
+          </q-card>
+        </div>
       </div>
     </div>
-  </div>
+
 
   <q-dialog v-model="modalEdit" persistent>
     <q-card bordered style="width: 50vh">
diff --git a/src/modules/08_KPI/views/mainEvaluator.vue b/src/modules/08_KPI/views/mainEvaluator.vue
index f7acc39..810100e 100644
--- a/src/modules/08_KPI/views/mainEvaluator.vue
+++ b/src/modules/08_KPI/views/mainEvaluator.vue
@@ -213,94 +213,93 @@ onMounted(async () => {
       </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <q-toolbar style="padding: 0">
-            <div class="row q-gutter-sm">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="store.yearRound"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                @update:model-value="fetchRoundOption(true)"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    lazy-rules
-                    outlined
-                    hide-bottom-space
-                    :model-value="
-                      !!store.yearRound ? store.yearRound + 543 : null
-                    "
-                    :label="`${'ปีงบประมาณ'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-
-              <q-select
-                v-model="store.formQuery.round"
-                outlined
-                label="รอบการประเมิน"
-                dense
-                option-label="name"
-                option-value="id"
-                :options="roundOp"
-                style="min-width: 200px"
-                emit-value
-                map-options
-                @update:model-value="changRound"
-              />
-            </div>
+          <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+            <datepicker
+              class="col-md-1 col-xs-12"
+              menu-class-name="modalfix"
+              v-model="store.yearRound"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:model-value="fetchRoundOption(true)"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  lazy-rules
+                  outlined
+                  hide-bottom-space
+                  :model-value="
+                    !!store.yearRound ? store.yearRound + 543 : null
+                  "
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              class="col-md-2 col-xs-12"
+              v-model="store.formQuery.round"
+              outlined
+              label="รอบการประเมิน"
+              dense
+              option-label="name"
+              option-value="id"
+              :options="roundOp"
+              emit-value
+              map-options
+              @update:model-value="changRound"
+            />
 
             <q-space />
-            <div class="row q-gutter-sm">
-              <q-input
-                outlined
-                dense
-                v-model="store.formQuery.keyword"
-                label="ค้นหาผู้ขอรับการประเมิน"
-                @keydown.enter.prevent="changRound"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    v-if="store.formQuery.keyword !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="(store.formQuery.keyword = ''), changRound()"
-                  />
-                  <q-icon v-else name="search" color="grey-5" />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumns"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-              />
-            </div>
-          </q-toolbar>
+
+            <q-input
+              class="col-md-2 col-xs-12"
+              outlined
+              dense
+              v-model="store.formQuery.keyword"
+              label="ค้นหาผู้ขอรับการประเมิน"
+              @keydown.enter.prevent="changRound"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="store.formQuery.keyword !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="(store.formQuery.keyword = ''), changRound()"
+                />
+                <q-icon v-else name="search" color="grey-5" />
+              </template>
+            </q-input>
+            <q-select
+              class="col-md-1 col-xs-12"
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+            />
+          </div>
+
           <div class="col-12">
             <q-card bordered class="q-mt-sm">
               <q-tabs
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
index 8fea0e5..08347a0 100644
--- a/src/modules/09_scholarship/views/detail.vue
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -427,10 +427,10 @@ function fetchDataDetail(id: string) {
 
       dataPerson.citizenId = data.citizenId ? data.citizenId : "-";
       dataPerson.name = `${data.prefix}${data.firstName}  ${data.lastName}`;
-      dataPerson.prefix = data.prefix,
-      dataPerson.firstName = data.firstName,
-      dataPerson.lastName = data.lastName,
-      dataPerson.position = data.position ? data.position : "-";
+      (dataPerson.prefix = data.prefix),
+        (dataPerson.firstName = data.firstName),
+        (dataPerson.lastName = data.lastName),
+        (dataPerson.position = data.position ? data.position : "-");
       dataPerson.type = data.posTypeName ? data.posTypeName : "-";
       dataPerson.level = data.posLevelName ? data.posLevelName : "-";
       dataPerson.positionSide = data.posExecutive ? data.posExecutive : "-";
@@ -522,7 +522,7 @@ onMounted(async () => {
             </div>
 
             <q-space />
-            <div v-if="fileList == null" class="col-3">
+            <div v-if="fileList == null" class="col-xs-5 col-3">
               <q-file
                 for="inputFiles"
                 class="col-12"
@@ -573,39 +573,39 @@ onMounted(async () => {
           </div>
           <div class="col-12"><q-separator /></div>
           <div class="row col-12 q-col-gutter-md q-pa-md" v-if="isGov">
-            <div class="col">
+            <div class="col-xs-12 col-md-6">
               <div class="row q-col-gutter-md">
                 <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.citizenId ? dataPerson.citizenId:'-' }}
+                  {{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
                 </div>
                 <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.firstName ? dataPerson.name:'-' }}
+                  {{ dataPerson.firstName ? dataPerson.name : "-" }}
                 </div>
                 <div class="col-4 text-grey">ตำแหน่ง</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.position ? dataPerson.position:'-' }}
+                  {{ dataPerson.position ? dataPerson.position : "-" }}
                 </div>
                 <div class="col-4 text-grey">ประเภทตำแหน่ง</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.type ? dataPerson.type:'-' }}
+                  {{ dataPerson.type ? dataPerson.type : "-" }}
                 </div>
               </div>
             </div>
-            <div class="col">
+            <div class="col-xs-12 col-md-6">
               <div class="row q-col-gutter-md">
                 <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.level ? dataPerson.level:'-' }}
+                  {{ dataPerson.level ? dataPerson.level : "-" }}
                 </div>
                 <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.positionSide ? dataPerson.positionSide:'-' }}
+                  {{ dataPerson.positionSide ? dataPerson.positionSide : "-" }}
                 </div>
                 <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                 <div class="col-8 text-weight-medium">
-                  {{ dataPerson.org ? dataPerson.org:'-' }}
+                  {{ dataPerson.org ? dataPerson.org : "-" }}
                 </div>
               </div>
             </div>
@@ -618,7 +618,7 @@ onMounted(async () => {
         </q-card>
 
         <div class="row q-col-gutter-md q-mt-sm">
-          <div class="col-9">
+          <div class="col-md-9 col-xs-12">
             <q-select
               dense
               readonly
@@ -634,7 +634,7 @@ onMounted(async () => {
             />
           </div>
           <div
-            class="col-3"
+            class="col-md-3 col-xs-12"
             v-if="
               formBody.scholarshipType !== '' &&
               formBody.scholarshipType !== 'EXECUTIVE' &&
@@ -662,7 +662,7 @@ onMounted(async () => {
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="INPLAN"
-              label="ในแผนฯ"
+              label="ในแผน ฯ"
               dense
               disable
             />
@@ -671,7 +671,7 @@ onMounted(async () => {
               checked-icon="task_alt"
               unchecked-icon="panorama_fish_eye"
               val="OUTPLAN"
-              label="นอกแผนฯ"
+              label="นอกแผน ฯ"
               dense
               disable
               class="q-pl-sm"
@@ -679,7 +679,7 @@ onMounted(async () => {
           </div>
 
           <div class="row col-12 q-col-gutter-md">
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formBody.scholarshipYear"
@@ -722,7 +722,10 @@ onMounted(async () => {
                 </template>
               </datepicker>
             </div>
-            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+            <div
+              v-if="formBody.scholarshipType !== 'RESEARCH'"
+              class="col-xs-12 col-md-3"
+            >
               <q-select
                 dense
                 outlined
@@ -737,7 +740,7 @@ onMounted(async () => {
                 readonly
               />
             </div>
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <q-input
                 dense
                 outlined
@@ -749,7 +752,7 @@ onMounted(async () => {
                 reverse-fill-mask
               />
             </div>
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <q-checkbox
                 keep-color
                 disable
@@ -761,7 +764,7 @@ onMounted(async () => {
           </div>
 
           <div class="row col-12 q-col-gutter-md">
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <q-input
                 dense
                 readonly
@@ -771,7 +774,7 @@ onMounted(async () => {
                 label="เลขที่หนังสืออนุมัติ"
               />
             </div>
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formBody.bookNoDate"
@@ -809,7 +812,7 @@ onMounted(async () => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-3">
+            <div class="col-xs-12 col-md-3">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formBody.bookApproveDate"
@@ -847,7 +850,10 @@ onMounted(async () => {
                 </template>
               </datepicker>
             </div>
-            <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+            <div
+              v-if="formBody.scholarshipType !== 'RESEARCH'"
+              class="col-xs-12 col-md-3"
+            >
               <q-checkbox
                 keep-color
                 disable
@@ -873,7 +879,7 @@ onMounted(async () => {
 
           <div class="col-12" v-if="formBody.scholarshipType !== 'EXECUTIVE'">
             <div class="row col-12 q-col-gutter-md">
-              <div class="col-3">
+              <div class="col-xs-12 col-md-3">
                 <q-input
                   dense
                   readonly
@@ -883,7 +889,7 @@ onMounted(async () => {
                   v-model="formBody.contractNo"
                 />
               </div>
-              <div class="col-2">
+              <div class="col-xs-12 col-md-2">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -920,7 +926,10 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-3">
+              <div
+                v-if="formBody.scholarshipType !== 'RESEARCH'"
+                class="col-xs-12 col-md-3"
+              >
                 <q-input
                   dense
                   readonly
@@ -930,7 +939,10 @@ onMounted(async () => {
                   label="เลขที่หนังสือรายงานตัวกลับ"
                 />
               </div>
-              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+              <div
+                v-if="formBody.scholarshipType !== 'RESEARCH'"
+                class="col-xs-12 col-md-2"
+              >
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -968,7 +980,10 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div v-if="formBody.scholarshipType !== 'RESEARCH'" class="col-2">
+              <div
+                v-if="formBody.scholarshipType !== 'RESEARCH'"
+                class="col-xs-12 col-md-2"
+              >
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="formBody.reportBackDate"
@@ -1006,49 +1021,60 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-12" >
+              <div class="col-12">
                 <q-card bordered tyle="border: 1px solid #d6dee1">
                   <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
                     ข้อมูลผู้ค้ำประกัน
                   </div>
                   <div class="col-12"><q-separator /></div>
-                  <div
-                    class="row col-12 q-col-gutter-md q-pa-md"
-                   
-                  >
-                    <div class="col">
+                  <div class="row col-12 q-col-gutter-md q-pa-md">
+                    <div class="col-xs-12 col-md-6">
                       <div class="row q-col-gutter-md">
                         <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.citizenId ? dataGuarantor.citizenId :'-' }}
+                          {{
+                            dataGuarantor.citizenId
+                              ? dataGuarantor.citizenId
+                              : "-"
+                          }}
                         </div>
                         <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.firstName ? dataGuarantor.name:'-' }}
+                          {{
+                            dataGuarantor.firstName ? dataGuarantor.name : "-"
+                          }}
                         </div>
                         <div class="col-4 text-grey">ตำแหน่ง</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.position ? dataGuarantor.position:'-' }}
+                          {{
+                            dataGuarantor.position
+                              ? dataGuarantor.position
+                              : "-"
+                          }}
                         </div>
                         <div class="col-4 text-grey">ประเภท</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.type ? dataGuarantor.type :'-' }}
+                          {{ dataGuarantor.type ? dataGuarantor.type : "-" }}
                         </div>
                       </div>
                     </div>
-                    <div class="col">
+                    <div class="col-xs-12 col-md-6">
                       <div class="row q-col-gutter-md">
                         <div class="col-4 text-grey">ระดับตำแหน่ง</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.level ? dataGuarantor.level:'-' }}
+                          {{ dataGuarantor.level ? dataGuarantor.level : "-" }}
                         </div>
                         <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.positionSide ? dataGuarantor.positionSide:'-' }}
+                          {{
+                            dataGuarantor.positionSide
+                              ? dataGuarantor.positionSide
+                              : "-"
+                          }}
                         </div>
                         <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
                         <div class="col-8 text-weight-medium">
-                          {{ dataGuarantor.org ? dataGuarantor.org:'-' }}
+                          {{ dataGuarantor.org ? dataGuarantor.org : "-" }}
                         </div>
                       </div>
                     </div>
@@ -1062,7 +1088,7 @@ onMounted(async () => {
                 v-if="formBody.scholarshipType === 'DOMESTICE'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -1072,7 +1098,7 @@ onMounted(async () => {
                       v-model="formBody.degreeLevel"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -1082,7 +1108,7 @@ onMounted(async () => {
                       v-model="formBody.course"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       outlined
@@ -1092,7 +1118,7 @@ onMounted(async () => {
                       v-model="formBody.field"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       outlined
@@ -1102,7 +1128,7 @@ onMounted(async () => {
                       v-model="formBody.faculty"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       outlined
@@ -1112,7 +1138,7 @@ onMounted(async () => {
                       v-model="formBody.educationalInstitution"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       v-model="formBody.startDate"
@@ -1152,7 +1178,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       v-model="formBody.endDate"
@@ -1192,7 +1218,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1202,7 +1228,7 @@ onMounted(async () => {
                       v-model="formBody.studyPlace"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1212,7 +1238,7 @@ onMounted(async () => {
                       v-model="formBody.studyTopic"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1252,7 +1278,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       readonly
@@ -1292,8 +1318,8 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6"></div>
-                  <div class="col-6">
+                  <div class="col-6" v-if="!$q.screen.gt.xs"></div>
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1303,7 +1329,7 @@ onMounted(async () => {
                       v-model="formBody.studyCountry"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1313,7 +1339,7 @@ onMounted(async () => {
                       v-model="formBody.studyAbroadTopic"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1355,7 +1381,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1401,7 +1427,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -1420,7 +1446,7 @@ onMounted(async () => {
                 v-else-if="formBody.scholarshipType === 'NOABROAD'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       outlined
@@ -1430,7 +1456,7 @@ onMounted(async () => {
                       v-model="formBody.course"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1440,7 +1466,7 @@ onMounted(async () => {
                       v-model="formBody.field"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       readonly
                       dense
@@ -1450,7 +1476,7 @@ onMounted(async () => {
                       v-model="formBody.educationalInstitution"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1490,7 +1516,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1530,7 +1556,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1540,7 +1566,7 @@ onMounted(async () => {
                       v-model="formBody.studyPlace"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1550,7 +1576,7 @@ onMounted(async () => {
                       v-model="formBody.studyTopic"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       menu-class-name="modalfix"
                       v-model="formBody.studyStartDate"
@@ -1590,7 +1616,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1636,7 +1662,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -1655,7 +1681,7 @@ onMounted(async () => {
                 v-else-if="formBody.scholarshipType === 'ABROAD'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1665,7 +1691,7 @@ onMounted(async () => {
                       v-model="formBody.course"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       outlined
@@ -1675,7 +1701,7 @@ onMounted(async () => {
                       v-model="formBody.field"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1685,7 +1711,7 @@ onMounted(async () => {
                       v-model="formBody.educationalInstitution"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1725,7 +1751,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1765,7 +1791,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1775,7 +1801,7 @@ onMounted(async () => {
                       v-model="formBody.studyPlace"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1785,7 +1811,7 @@ onMounted(async () => {
                       v-model="formBody.studyTopic"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1825,7 +1851,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1872,8 +1898,8 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6"></div>
-                  <div class="col-6">
+                  <div class="col-6" v-if="!$q.screen.gt.xs"></div>
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1883,7 +1909,7 @@ onMounted(async () => {
                       v-model="formBody.studyCountry"
                     />
                   </div>
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -1893,7 +1919,7 @@ onMounted(async () => {
                       v-model="formBody.studyAbroadTopic"
                     />
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1935,7 +1961,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -1981,7 +2007,7 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       readonly
                       dense
@@ -2000,7 +2026,7 @@ onMounted(async () => {
                 v-else-if="formBody.scholarshipType === 'RESEARCH'"
               >
                 <div class="row q-col-gutter-md">
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-select
                       dense
                       readonly
@@ -2018,7 +2044,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -2029,7 +2055,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -2040,7 +2066,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -2051,7 +2077,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <q-input
                       dense
                       readonly
@@ -2062,7 +2088,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-6">
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       readonly
                       dense
@@ -2073,7 +2099,7 @@ onMounted(async () => {
                     />
                   </div>
 
-                  <div class="col-3">
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -2113,7 +2139,8 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-3">
+
+                  <div class="col-xs-12 col-md-3">
                     <datepicker
                       readonly
                       menu-class-name="modalfix"
@@ -2153,7 +2180,8 @@ onMounted(async () => {
                       </template>
                     </datepicker>
                   </div>
-                  <div class="col-6">
+
+                  <div class="col-xs-12 col-md-6">
                     <q-input
                       dense
                       readonly
@@ -2174,7 +2202,7 @@ onMounted(async () => {
             v-else-if="formBody.scholarshipType === 'EXECUTIVE'"
           >
             <div class="row q-col-gutter-md">
-              <div class="col-6">
+              <div class="col-xs-12 col-md-md-6">
                 <q-input
                   readonly
                   dense
@@ -2184,7 +2212,7 @@ onMounted(async () => {
                   v-model="formBody.course"
                 />
               </div>
-              <div class="col-6">
+              <div class="col-xs-12 col-md-md-6">
                 <q-input
                   dense
                   readonly
@@ -2194,7 +2222,7 @@ onMounted(async () => {
                   v-model="formBody.educationalInstitution"
                 />
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2235,7 +2263,7 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2273,8 +2301,8 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-6"></div>
-              <div class="col-6">
+              <div class="col-6" v-if="!$q.screen.gt.xs"></div>
+              <div class="col-xs-12 col-md-6">
                 <q-input
                   dense
                   readonly
@@ -2284,7 +2312,7 @@ onMounted(async () => {
                   v-model="formBody.studyPlace"
                 />
               </div>
-              <div class="col-6">
+              <div class="col-xs-12 col-md-6">
                 <q-input
                   dense
                   readonly
@@ -2294,7 +2322,7 @@ onMounted(async () => {
                   v-model="formBody.studyTopic"
                 />
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2334,7 +2362,7 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2380,8 +2408,8 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-6"></div>
-              <div class="col-6">
+              <div class="col-6" v-if="!$q.screen.gt.xs"></div>
+              <div class="col-xs-12 col-md-6">
                 <q-input
                   dense
                   readonly
@@ -2391,7 +2419,7 @@ onMounted(async () => {
                   v-model="formBody.studyCountry"
                 />
               </div>
-              <div class="col-6">
+              <div class="col-xs-12 col-md-6">
                 <q-input
                   dense
                   outlined
@@ -2401,7 +2429,7 @@ onMounted(async () => {
                   v-model="formBody.studyAbroadTopic"
                 />
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2441,7 +2469,7 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-3">
+              <div class="ccol-xs-12 ol-md-3">
                 <datepicker
                   readonly
                   menu-class-name="modalfix"
@@ -2487,7 +2515,7 @@ onMounted(async () => {
                   </template>
                 </datepicker>
               </div>
-              <div class="col-3">
+              <div class="col-xs-12 col-md-3">
                 <q-input
                   readonly
                   dense
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index ab4bbc8..5abaef7 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -168,105 +168,85 @@ onMounted(async () => {
       </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <q-toolbar style="padding: 0">
-            <div class="row q-gutter-sm">
-              <datepicker
-                style="width: 150px"
-                menu-class-name="modalfix"
-                v-model="year"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                @update:model-value="getData()"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    dense
-                    lazy-rules
-                    outlined
-                    :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
-                    :label="`${'ปีงบประมาณ'}`"
-                  >
-                    <template v-if="year" v-slot:append>
-                      <q-icon
-                        name="cancel"
-                        @click.stop.prevent="(year = 0), getData()"
-                        class="cursor-pointer"
-                      />
-                    </template>
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-              <q-select
-                dense
-                outlined
-                v-model="type"
-                :options="scholarshipTypeOp"
-                emit-value
-                map-options
-                option-value="id"
-                option-label="name"
-                label="เลือกประเภททุน"
-                @update:model-value="getData()"
-                style="width: 350px"
-              />
-              <!-- <q-btn
-                flat
-                round
-                color="primary"
-                icon="add"
-                @click="router.push(`/KPI/add`)"
-              >
-                <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-              </q-btn> -->
-            </div>
+          <div class="items-center col-12 row q-col-gutter-sm q-mb-sm">
+            <datepicker
+              class="col-xs-12 col-md-1"
+              menu-class-name="modalfix"
+              v-model="year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              @update:model-value="getData()"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  lazy-rules
+                  outlined
+                  :model-value="year === 0 ? 'ทั้งหมด' : Number(year) + 543"
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-if="year" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="(year = 0), getData()"
+                      class="cursor-pointer"
+                    />
+                  </template>
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <q-select
+              dense
+              outlined
+              v-model="type"
+              :options="scholarshipTypeOp"
+              emit-value
+              map-options
+              option-value="id"
+              option-label="name"
+              label="เลือกประเภททุน"
+              @update:model-value="getData()"
+              class="select_ellipsis col-xs-12 col-md-2"
+            />
 
             <q-space />
-            <div class="row q-gutter-sm">
-              <!-- <q-input
-                outlined
-                dense
-                v-model="filterKeyword"
-                label="ค้นหา"
-              ></q-input> -->
-              <q-select
-                v-model="visibleColumns"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columns"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-              />
-            </div>
-          </q-toolbar>
+
+            <q-select
+              v-model="visibleColumns"
+              multiple
+              outlined
+              dense
+              options-dense
+              :display-value="$q.lang.table.columns"
+              emit-value
+              map-options
+              :options="columns"
+              option-value="name"
+              options-cover
+              class="col-xs-12 col-md-1"
+            />
+          </div>
 
           <div>
-            <q-table
+            <d-table
               flat
               bordered
               dense
               row-key="id"
-              class="custom-table2"
-              style="max-height: 80vh"
               :rows="rows"
               :columns="columns"
               :visible-columns="visibleColumns"
@@ -318,56 +298,39 @@ onMounted(async () => {
                   </q-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>
+                    <q-list @click="onEdit(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 v-if="col.name === 'scholarshipYear'">
+                            {{ col.value ? col.value + 543 : "-" }}
+                          </q-item-label>
+                          <q-item-label
+                            v-else-if="col.name === 'scholarshipType'"
+                          >
+                            {{ col.value ? convertType(col.value) : "-" }}
+                          </q-item-label>
+
+                          <q-item-label v-else>{{ col.value }}</q-item-label>
+                        </q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-card>
+                </div>
+              </template>
+            </d-table>
           </div>
         </q-card>
       </div>
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.icon-color {
-  color: #4154b3;
-}
-
-.custom-table2 {
-  max-height: 64vh;
-
-  .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>
+<style scoped lang="scss"></style>
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index 39fea51..b995a40 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -82,3 +82,9 @@ input.input-alert
 
 .input-alert i.text-primary
     color: #f00 !important
+
+.select_ellipsis .q-field__native > span
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    width: 200px

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 04/10] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20re?=
 =?UTF-8?q?sponesive?=
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">

From 6b1a397ac627d38b5dfc9c7ecde39e12752c9061 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 27 May 2024 10:20:15 +0700
Subject: [PATCH 05/10] =?UTF-8?q?=E0=B8=A5=E0=B8=B2=E0=B8=AD=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=81=20=3D>=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/03_retire/views/addRetire.vue | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/modules/03_retire/views/addRetire.vue b/src/modules/03_retire/views/addRetire.vue
index cc532e2..930a995 100644
--- a/src/modules/03_retire/views/addRetire.vue
+++ b/src/modules/03_retire/views/addRetire.vue
@@ -200,6 +200,7 @@ function downloadFile(data: string) {
                   :readonly="routeName != 'AddRetire'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกสถานที่ยื่นขอลาออกจากราชการ'}`]"
                 />
+
                 <datepicker
                   :class="
                     routeName !== 'AddRetire'
@@ -227,7 +228,7 @@ function downloadFile(data: string) {
                       readonly
                       dense
                       hide-bottom-space
-                      class="full-width datepicker"
+                      class="full-width"
                       :model-value="
                         dateCommand != null ? date2Thai(dateCommand) : null
                       "
@@ -275,7 +276,7 @@ function downloadFile(data: string) {
                       dense
                       hide-bottom-space
                       :readonly="routeName != 'AddRetire'"
-                      class="full-width datepicker"
+                      class="full-width"
                       :model-value="
                         dateLeave != null ? date2Thai(dateLeave) : null
                       "
@@ -329,18 +330,6 @@ function downloadFile(data: string) {
                     <template v-slot:prepend>
                       <q-icon name="attach_file" /> </template
                   ></q-file>
-                  <!-- <q-uploader
-                    flat
-                    bordered
-                    class="col-xs-12 col-sm-12"
-                    accept=".jpg,.png,.pdf,.csv,.doc"
-                    url="http://localhost:4444/upload"
-                    label="เอกสารเพิ่มเติม"
-                    type="file"
-                    @added="fileUploadDoc"
-                    @removed="filesNull"
-                    style="max-width: px"
-                  /> -->
                 </div>
                 <div class="col-12 row">
                   <q-card

From 8d0ac4eb7c9f1483712af930595e75cbdf21bd0f Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 27 May 2024 11:59:26 +0700
Subject: [PATCH 06/10] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Tab/Topic/01_Indicator.vue     |  4 +--
 src/modules/08_KPI/store.ts                   | 35 ++-----------------
 src/modules/08_KPI/views/form.vue             | 23 ++++++------
 src/modules/08_KPI/views/main.vue             |  6 ++--
 4 files changed, 18 insertions(+), 50 deletions(-)

diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index 318ba81..50f7993 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -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"
@@ -431,7 +431,7 @@ const isEditStep3 = computed(() => {
             </td>
           </q-tr>
         </template>
-      </q-table>
+      </d-table>
     </q-card-section>
   </q-card>
 
diff --git a/src/modules/08_KPI/store.ts b/src/modules/08_KPI/store.ts
index f9e5b64..636dd18 100644
--- a/src/modules/08_KPI/store.ts
+++ b/src/modules/08_KPI/store.ts
@@ -129,11 +129,9 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
     }
   }
 
-  function checkCompetency() {
-    const position = dataEvaluation.value.position;
-    const posTypeName = dataEvaluation.value.posTypeName;
-    const posLevelName = dataEvaluation.value.posLevelName;
-    const executiveName = dataEvaluation.value.posExecutiveName;
+  async function checkCompetency() {
+    const position = await dataEvaluation.value.position;
+    const executiveName = await dataEvaluation.value.posExecutiveName;
 
     if (
       position == "ผู้ตรวจราชการกรุงเทพมหานคร" ||
@@ -156,33 +154,6 @@ export const useKpiDataStore = defineStore("KPIDate", () => {
           (x: DataOptions) => x.id == "HEAD" || x.id == "EXECUTIVE"
         );
       }
-      // switch (posTypeName + " " + posLevelName) {
-      //   // case "ทั่วไป ปฏิบัติงาน":
-      //   // case "ทั่วไป ชำนาญงาน":
-      //   // case "ทั่วไป อาวุโส":
-      //   // case "วิชาการ ปฏิบัติการ":
-      //   // case "วิชาการ ชำนาญการ":
-      //   // case "วิชาการ ชำนาญการพิเศษ":
-      //   // case "วิชาการ เชี่ยวชาญ":
-      //   // case "วิชาการ ทรงคุณวุฒิ":
-      //   //   competencyType.value = competencyType.value.filter(
-      //   //     (x: DataOptions) => x.id == "HEAD" || x.id == "GROUP"
-      //   //   );
-      //   //   break;
-      //   case "อำนวยการ ต้น":
-      //   case "อำนวยการ สูง":
-      //   case "บริหาร ต้น":
-      //   case "บริหาร สูง":
-      //     competencyType.value = competencyType.value.filter(
-      //       (x: DataOptions) => x.id == "HEAD" || x.id == "EXECUTIVE"
-      //     );
-      //     break;
-      //   default:
-      //     competencyType.value = competencyType.value.filter(
-      //       (x: DataOptions) => x.id == "HEAD" || x.id == "GROUP"
-      //     );
-      //     break;
-      // }
     }
   }
 
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 6401e12..94b90cf 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -130,7 +130,7 @@ function onSubmit() {
             ? commanderHighId.value.id
             : null,
         })
-        .then((res) => {
+        .then(() => {
           success($q, "บันทึกสำเร็จ");
           close();
         })
@@ -246,13 +246,11 @@ function filterOption(val: any, update: Function, refData: string) {
 //   getAll();
 // }
 
-async function getAll() {
-  await getProfile();
-  await fetchEvaluation();
-
-  await store.checkStep();
-
-  await getOrgOp();
+function getAll() {
+  getProfile();
+  fetchEvaluation();
+  store.checkStep();
+  getOrgOp();
 }
 
 function sendToEvaluatore(status: string) {
@@ -265,7 +263,7 @@ function sendToEvaluatore(status: string) {
           .put(config.API.kpiSendToStatus(id.value), {
             status: status,
           })
-          .then((res) => {
+          .then(() => {
             success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
             close();
           })
@@ -292,7 +290,7 @@ function requireEdit() {
           .put(config.API.kpiReqEdit(id.value), {
             status: "EVALUATOR",
           })
-          .then((res) => {
+          .then(() => {
             success($q, "ขอแก้ไขสำเร็จ");
             close();
           })
@@ -309,10 +307,9 @@ function requireEdit() {
   );
 }
 
-onMounted(async () => {
+onMounted(() => {
   showLoader();
-  await getAll();
-  console.log(store.dataEvaluation.avartar);
+  getAll();
 });
 </script>
 
diff --git a/src/modules/08_KPI/views/main.vue b/src/modules/08_KPI/views/main.vue
index 87e2940..0968880 100644
--- a/src/modules/08_KPI/views/main.vue
+++ b/src/modules/08_KPI/views/main.vue
@@ -272,11 +272,11 @@ function onSubmit() {
 function getProfile() {
   http
     .get(config.API.profilePosition())
-    .then((res) => {
+    .then(async (res) => {
       const data = res.data.result;
       store.dataProfile = data;
-      store.checkCompetency();
-      store.checkCompetencyDefaultCompetencyLevel();
+      await store.checkCompetency();
+      await store.checkCompetencyDefaultCompetencyLevel();
 
       formRound.profileId = data.profileId;
       formRound.prefix = data.prefix;

From 93bdc791dc56319c25cd47ce95b8d0be600512c5 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 27 May 2024 15:29:13 +0700
Subject: [PATCH 07/10] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20ui?=
 =?UTF-8?q?=20Responensive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/01_dashboard/views/Dashboard.vue  |   6 +-
 .../Tab/Dialog/01_FormIndicator.vue           |   8 +-
 .../Tab/Dialog/04_FormCompetency.vue          |  39 +++++-
 .../components/Tab/Dialog/DialogViewInfo.vue  |   6 +-
 src/modules/08_KPI/components/Tab/TabMain.vue |  36 +++--
 .../components/Tab/Topic/01_Indicator.vue     | 117 ++++++++++++----
 .../components/Tab/Topic/02_Competency.vue    | 127 ++++++++++++++----
 .../components/Tab/Topic/03_Develop.vue       |   1 -
 src/views/MainLayout.vue                      |   6 +-
 9 files changed, 266 insertions(+), 80 deletions(-)

diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 27b38e9..e0111e4 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -6,6 +6,7 @@ import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import keycloak from "@/plugins/keycloak";
 import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
 import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
 
@@ -13,7 +14,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
-const fullname = ref<string>("ธัญลักษณ์");
+const fullname = ref<string>("");
 const inboxList = ref<any>([
   //   {
   //     no: 1,
@@ -108,6 +109,9 @@ const items = ref<any>([
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
+  if (keycloak.tokenParsed != null) {
+    fullname.value = keycloak.tokenParsed.name;
+  }
 });
 const fetchlistInbox = async (index: number) => {
   index === 1 && showLoader();
diff --git a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
index 90937c5..0f3a90e 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/01_FormIndicator.vue
@@ -462,7 +462,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 +617,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">
@@ -733,7 +733,7 @@ const title = computed(() => {
                     </div>
                   </q-card>
                 </div>
-                <div class="col-6 row">
+                <div class="col-xs-12 col-6 row">
                   <div class="row col-12 card-box">
                     <div
                       class="col-12 bg-grey-2 row items-center text-weight-medium"
diff --git a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
index 7d3ecb7..8d57926 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/04_FormCompetency.vue
@@ -282,7 +282,7 @@ watch(
 
         <q-card-section class="q-pa-none scroll" style="max-height: 80vh">
           <div class="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 q-col-gutter-sm fit">
                 <div class="col-12">
                   <q-select
@@ -362,13 +362,13 @@ watch(
               </div>
             </div>
 
-            <div class="col-9 q-pa-md q-col-gutter-sm">
+            <div class="col-xs-12 col-md-9 q-pa-md q-col-gutter-sm">
               <span class="text-body2 text-weight-medium"
                 >รายละเอียดสมรรถนะ</span
               >
 
               <div class="row q-col-gutter-sm">
-                <div class="col-5 row">
+                <div class="col-xs-12 col-md-5 row">
                   <q-card bordered class="fit q-pa-sm no-shadow">
                     <div
                       v-for="(field, index) in Object.keys(fieldDetailLabels)"
@@ -442,14 +442,13 @@ watch(
                     </div>
                   </q-card>
                 </div>
-                <div class="col-7">
-                  <q-table
+                <div class="col-xs-12 col-md-7">
+                  <d-table
                     flat
                     bordered
                     dense
                     :paging="true"
                     row-key="level"
-                    class="custom-table2"
                     virtual-scroll
                     :rows="dataListCapacityDetails"
                     hide-pagination
@@ -486,6 +485,32 @@ watch(
                         </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"
@@ -493,7 +518,7 @@ watch(
                         <span style="font-size: 16px">ไม่พบข้อมูลสมรรถนะ</span>
                       </div>
                     </template>
-                  </q-table>
+                  </d-table>
 
                   <!-- <q-card bordered class="col-12 no-shadow">
                     <div class="bg-grey-2 row q-py-sm text-weight-bold col-12">
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
index 12c71e8..e911d34 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogViewInfo.vue
@@ -1,4 +1,3 @@
-divdiv
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
@@ -79,7 +78,10 @@ watch(
 
 <template>
   <q-dialog v-model="modal" persistent>
-    <q-card class="col-12" style="width: 45%">
+    <q-card
+      class="col-12"
+      :style="!$q.screen.gt.xs ? 'width: 100%' : 'width: 45%'"
+    >
       <DialogHeader :tittle="'คำอธิบายผลสำเร็จของงาน'" :close="closeDialog" />
       <q-separator />
       <q-card-section>
diff --git a/src/modules/08_KPI/components/Tab/TabMain.vue b/src/modules/08_KPI/components/Tab/TabMain.vue
index 6672963..d613417 100644
--- a/src/modules/08_KPI/components/Tab/TabMain.vue
+++ b/src/modules/08_KPI/components/Tab/TabMain.vue
@@ -36,10 +36,10 @@ const splitterModel = ref<number>(12);
 
 <template>
   <q-splitter
+    v-if="$q.screen.gt.xs"
     v-model="splitterModel"
     :horizontal="!$q.screen.gt.xs"
     disable
-    v-if="$q.screen.gt.xs"
   >
     <template v-slot:before>
       <q-tabs
@@ -89,20 +89,38 @@ const splitterModel = ref<number>(12);
   </q-splitter>
 
   <q-list bordered class="rounded-borders" v-else>
-    <q-expansion-item expand-separator label="จัดทำข้อตกลง">
-      <Assessment />
+    <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="รายงานความก้าวหน้า">
-      <Assessment :type="'evaluator'" />
+    <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="รายงานผลสำเร็จของงาน">
-      <Assessment :type="'commander'" />
+    <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="ไฟล์เอกสาร">
-      <File />
+    <q-expansion-item
+      expand-separator
+      label="ไฟล์เอกสาร"
+      @click="store.tabMain = '5'"
+    >
+      <File v-if="store.tabMain === '5'" />
     </q-expansion-item>
   </q-list>
 </template>
diff --git a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
index 50f7993..c399fef 100644
--- a/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/01_Indicator.vue
@@ -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">
@@ -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="ไม่มีข้อมูล"
@@ -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,6 +405,95 @@ const isEditStep3 = computed(() => {
             </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>
+              <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>
diff --git a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
index 6564cdb..1d91d35 100644
--- a/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/02_Competency.vue
@@ -266,7 +266,7 @@ 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">
@@ -302,7 +302,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,7 +312,6 @@ onMounted(() => {
           :paging="true"
           dense
           hide-pagination
-          class="custom-table2"
           no-data-label="ไม่มีข้อมูล"
           :visible-columns="visibleColumns"
         >
@@ -348,29 +347,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'">
                   {{
@@ -438,7 +415,105 @@ onMounted(() => {
               </q-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>
+                <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
+                    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"
+                    @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>
+                </q-card-actions>
+              </q-card>
+            </div>
+          </template>
+        </d-table>
       </q-card-section>
     </q-card>
   </div>
diff --git a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
index dcc510b..6da04f9 100644
--- a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
@@ -237,7 +237,6 @@ onMounted(() => {
         :paging="true"
         dense
         hide-pagination
-        class="custom-table2"
         no-data-label="ไม่มีข้อมูล"
         :visible-columns="visibleColumns"
       >
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index c058e0f..476b933 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -473,16 +473,16 @@ function onInfo(){
             flat
             round
             color="white"
-            icon="mdi-view-dashboard-outline"
+            icon="mdi-home"
             @click="router.push(`/`)"
           />
-          <q-btn
+          <!-- <q-btn
             flat
             round
             color="white"
             icon="mdi-map-marker-check-outline"
             @click="router.push(`/check-in`)"
-          />
+          /> -->
           <q-btn
             flat
             round

From 870625aecb7b64783490ca24a0df87a4b9d88365 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 27 May 2024 16:43:40 +0700
Subject: [PATCH 08/10] =?UTF-8?q?UI=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=B4=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Evaluator/02_TabOther.vue      |   2 +-
 .../components/Tab/Topic/03_Develop.vue       | 132 +++++++++++++++++-
 src/modules/08_KPI/views/form.vue             |  56 ++++++--
 3 files changed, 172 insertions(+), 18 deletions(-)

diff --git a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
index 886443a..b081981 100644
--- a/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
+++ b/src/modules/08_KPI/components/Evaluator/02_TabOther.vue
@@ -176,7 +176,7 @@ function onClickApprove(type: string = "") {
               />
             </q-card-section>
             <q-separator />
-            <q-list>
+            <q-list @click="redirectViewDetail(props.row.id)">
               <q-item
                 v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
                 :key="col.name"
diff --git a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
index 6da04f9..525dade 100644
--- a/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
+++ b/src/modules/08_KPI/components/Tab/Topic/03_Develop.vue
@@ -227,7 +227,7 @@ onMounted(() => {
       </div>
     </q-card-section>
     <q-card-section class="q-pa-sm">
-      <q-table
+      <d-table
         ref="table"
         :columns="columns"
         :rows="rows"
@@ -361,7 +361,135 @@ onMounted(() => {
             </q-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>
+              <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 == 'develop'">
+                      <div class="column">
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment70"
+                          label="70 การลงมือปฏิบัติ (โดยผู้บังคับบัญชามอบหมาย)"
+                        />
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment20"
+                          label="20 การเรียนรู้จากผู้อื่น (Coach/Mentor/Consulting)"
+                        />
+                        <q-checkbox
+                          size="xs"
+                          :model-value="props.row.isDevelopment10"
+                          label="10 การฝึกอบรมอื่นๆ"
+                        />
+                      </div>
+                    </q-item-label>
+                    <q-item-label v-else-if="col.name == 'achievement'">
+                      <q-btn-group outline>
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="0"
+                          :class="props.row.summary == 0 && 'active'"
+                          ><q-tooltip>{{
+                            props.row.achievement0
+                          }}</q-tooltip></q-btn
+                        >
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="5"
+                          :class="props.row.summary == 5 && 'active'"
+                          ><q-tooltip>{{
+                            props.row.achievement5
+                          }}</q-tooltip></q-btn
+                        >
+                        <q-btn
+                          outline
+                          color="grey-6"
+                          label="10"
+                          :class="props.row.summary == 10 && 'active'"
+                          ><q-tooltip>{{
+                            props.row.achievement10
+                          }}</q-tooltip></q-btn
+                        >
+                      </q-btn-group>
+                    </q-item-label>
+                    <q-item-label v-else-if="col.name == 'summary'">
+                      {{ props.row.summary ? props.row.summary : 0 }}
+                    </q-item-label>
+                    <q-item-label v-else>
+                      {{ col.value ? 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"
+                  @click.stop.pervent="onEdit(props.row.id)"
+                >
+                  <q-tooltip>แก้ไข </q-tooltip>
+                </q-btn>
+                <q-btn
+                  flat
+                  round
+                  icon="delete"
+                  color="red"
+                  @click.stop.pervent="onDelete(props.row.id)"
+                >
+                  <q-tooltip>ลบข้อมูล </q-tooltip>
+                </q-btn>
+              </q-card-actions>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
     </q-card-section>
   </q-card>
 
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index 94b90cf..e0ea245 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -130,7 +130,7 @@ function onSubmit() {
             ? commanderHighId.value.id
             : null,
         })
-        .then(() => {
+        .then((res) => {
           success($q, "บันทึกสำเร็จ");
           close();
         })
@@ -246,11 +246,13 @@ function filterOption(val: any, update: Function, refData: string) {
 //   getAll();
 // }
 
-function getAll() {
-  getProfile();
-  fetchEvaluation();
-  store.checkStep();
-  getOrgOp();
+async function getAll() {
+  await getProfile();
+  await fetchEvaluation();
+
+  await store.checkStep();
+
+  await getOrgOp();
 }
 
 function sendToEvaluatore(status: string) {
@@ -263,7 +265,7 @@ function sendToEvaluatore(status: string) {
           .put(config.API.kpiSendToStatus(id.value), {
             status: status,
           })
-          .then(() => {
+          .then((res) => {
             success($q, "ส่งข้อตกลงให้ผู้ประเมินอนุมัติสำเร็จ");
             close();
           })
@@ -290,7 +292,7 @@ function requireEdit() {
           .put(config.API.kpiReqEdit(id.value), {
             status: "EVALUATOR",
           })
-          .then(() => {
+          .then((res) => {
             success($q, "ขอแก้ไขสำเร็จ");
             close();
           })
@@ -307,9 +309,10 @@ function requireEdit() {
   );
 }
 
-onMounted(() => {
+onMounted(async () => {
   showLoader();
-  getAll();
+  await getAll();
+  console.log(store.dataEvaluation.avartar);
 });
 </script>
 
@@ -340,11 +343,25 @@ onMounted(() => {
       </div>
       <div class="col-12">
         <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> -->
+
           <div
+            v-if="$q.screen.gt.xs"
             class="absolute-center-left"
             style="left: 2%; top: 50%; transform: translateY(-50%)"
           >
-            <q-avatar size="95px">
+            <q-avatar size="80px">
               <q-img
                 :src="store.dataEvaluation.avartar"
                 v-if="store.dataEvaluation.avartar !== undefined"
@@ -354,12 +371,16 @@ onMounted(() => {
           </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">
+              <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.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
                   }}</span>
-                  <q-space />
+                  <q-space v-if="$q.screen.gt.xs" />
+
                   <div class="q-gutter-x-sm">
                     <span
                       v-if="
@@ -473,7 +494,12 @@ onMounted(() => {
             </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="col-12 q-py-xs"
+                :style="
+                  $q.screen.gt.xs ? 'padding-left: 12%' : 'padding-left:5%'
+                "
+              >
                 <div class="row no-wrap">
                   <div class="col-2">
                     <div class="column">

From feeb92b91d3769ab740f78fde74fe1a277a4097c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 28 May 2024 10:29:00 +0700
Subject: [PATCH 09/10] =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=99=20=20=3D?=
 =?UTF-8?q?>=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/08_KPI/views/form.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index e0ea245..c0abfe3 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -393,6 +393,8 @@ onMounted(async () => {
                       class="text-red"
                       >*น้ำหนัก(ร้อยละ) ผลสัมฤทธิ์ของงานไม่ถูกต้อง</span
                     >
+                    <br v-if="!$q.screen.gt.xs" />
+                    
                     <q-btn
                       v-if="
                         store.rolePerson == 'USER' &&

From e89d03cfa2fbad85fb04df0cd031c188704ac97a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 28 May 2024 14:49:06 +0700
Subject: [PATCH 10/10] =?UTF-8?q?=E0=B8=81=E0=B8=A5=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A1=20=3D>=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=82=E0=B8=99=E0=B8=B2=E0=B8=94=20Popup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PopupReplyInbox.vue            | 49 +++++++++----------
 .../00_support/components/FormChat.vue        |  2 +-
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/components/PopupReplyInbox.vue b/src/components/PopupReplyInbox.vue
index 1eed8b2..0cdb863 100644
--- a/src/components/PopupReplyInbox.vue
+++ b/src/components/PopupReplyInbox.vue
@@ -10,7 +10,7 @@ import { useQuasar } from "quasar";
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
 const $q = useQuasar();
 
-const { showLoader, hideLoader, success, messageError } = mixin;
+const { showLoader, hideLoader, success, messageError, dialogConfirm } = mixin;
 
 const myForm = ref<any>();
 const props = defineProps({
@@ -30,35 +30,34 @@ const props = defineProps({
 
 const subject = ref<string>("");
 const body = ref<string>("");
-async function submit() {
-  myForm.value.validate().then(async (result: boolean) => {
-    if (result) {
-      // props.savaForm(reason.value);
-      showLoader();
-      await http
-        .put(config.API.replyMessage(props.idInbox), {
-          subject: subject.value,
-          body: body.value,
-        })
-        .then((res) => {
-          props.clickClose()
-          success($q, "ส่งข้อความสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    }
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(config.API.replyMessage(props.idInbox), {
+        subject: subject.value,
+        body: body.value,
+      })
+      .then(() => {
+        props.clickClose();
+        success($q, "ส่งข้อความสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 </script>
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 40vw; max-width: 40vw">
-      <q-form ref="myForm">
+    <q-card
+      :style="$q.screen.gt.xs ? 'width: 40vw; max-width: 40vw' : 'width: 100%'"
+    >
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader tittle="ส่งข้อความ" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
@@ -98,7 +97,7 @@ async function submit() {
             unelevated
             label="ส่งข้อความ"
             color="public"
-            @click="submit"
+            type="submit"
             class="q-px-md"
           >
             <!-- icon="mdi-content-save-outline" -->
diff --git a/src/modules/00_support/components/FormChat.vue b/src/modules/00_support/components/FormChat.vue
index b2a698d..99746d0 100644
--- a/src/modules/00_support/components/FormChat.vue
+++ b/src/modules/00_support/components/FormChat.vue
@@ -11,7 +11,7 @@ const { date2Thai } = useCounterMixin();
 const { scrollContainer } = storeToRefs(store);
 
 function getOnlineStatus(option: "icon" | "status") {
-  const isAdmin = store.userStatus.some((u) => u.role.includes("admin"));
+  const isAdmin = store.userStatus.some((u: any) => u.role.includes("admin"));
   if (option === "icon") return isAdmin ? "green" : "grey";
   if (option === "status") return isAdmin ? "ออนไลน์" : "ออฟไลน์";
 }