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] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20=20respo?=
 =?UTF-8?q?nsive?=
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