From e5f2e716329750f3489bd121464db96bc6d8f280 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Mon, 31 Mar 2025 10:50:40 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99=20(=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1=E0=B9=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=97=E0=B8=B3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/01_compete/CompeteReport.vue        |  11 +-
 .../05_placement/views/09_reportMain.vue      |   2 +-
 src/modules/06_retirement/views/07_report.vue |   2 +-
 .../07_insignia/views/06_ReportMain.vue       |   4 +-
 src/modules/09_leave/router.ts                |   8 +-
 ...eportCheckin.vue => !07_ReportCheckin.vue} |   0
 src/modules/09_leave/views/06_ReportMain.vue  |  66 ++--
 .../components/9_DisciplineReport/Main.vue    |   6 +-
 src/modules/14_KPI/views/report.vue           |  11 +-
 src/modules/21_report/views/01_reportOrg.vue  | 286 +++++++++---------
 .../21_report/views/02_reportRegistry.vue     |   2 +-
 .../21_report/views/03_reportDevelopment.vue  |   2 +-
 .../21_report/views/04_reportEvaluate.vue     |   2 +-
 .../21_report/views/05_reportSalary.vue       |   8 +-
 14 files changed, 226 insertions(+), 184 deletions(-)
 rename src/modules/09_leave/views/{07_ReportCheckin.vue => !07_ReportCheckin.vue} (100%)

diff --git a/src/modules/03_recruiting/views/01_compete/CompeteReport.vue b/src/modules/03_recruiting/views/01_compete/CompeteReport.vue
index 2749a1866..6f703d586 100644
--- a/src/modules/03_recruiting/views/01_compete/CompeteReport.vue
+++ b/src/modules/03_recruiting/views/01_compete/CompeteReport.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import axios from "axios";
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useQuasar } from "quasar";
 
@@ -17,7 +17,7 @@ import genReportXLSX from "@/plugins/genreportxlsx";
 const isReport = ref<boolean>(true);
 const mixin = useCounterMixin();
 const $q = useQuasar();
-const { showLoader, hideLoader, date2Thai, dateToISO, messageError } = mixin;
+const { showLoader, hideLoader, messageError } = mixin;
 
 const isLoadPDF = ref<boolean>(false);
 
@@ -150,9 +150,14 @@ function clearFilter() {
   detailReport.value = undefined;
 }
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    รายงานสถิติสำหรับการสอบแข่งขัน
+    {{
+      $route.name == "reportExam"
+        ? "รายงานสรรหา"
+        : "รายงานสถิติสำหรับการสอบแข่งขัน"
+    }}
   </div>
 
   <q-form greedy @submit.prevent @validation-success="getReportRecruit">
diff --git a/src/modules/05_placement/views/09_reportMain.vue b/src/modules/05_placement/views/09_reportMain.vue
index 541261971..5ccf31edf 100644
--- a/src/modules/05_placement/views/09_reportMain.vue
+++ b/src/modules/05_placement/views/09_reportMain.vue
@@ -206,7 +206,7 @@ onMounted(() => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    รายงานบรรจุ แต่งตั้ง ย้าย โอน
+    รายงานการบรรจุ แต่งตั้ง ย้าย โอน
   </div>
 
   <q-form greedy @submit.prevent @validation-success="fetchDataReport">
diff --git a/src/modules/06_retirement/views/07_report.vue b/src/modules/06_retirement/views/07_report.vue
index de4fcb3f8..d1c4f5b46 100644
--- a/src/modules/06_retirement/views/07_report.vue
+++ b/src/modules/06_retirement/views/07_report.vue
@@ -228,7 +228,7 @@ onMounted(() => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    รายงานพ้นจากราชการ
+    รายงานการพ้นจากราชการ
   </div>
 
   <q-form greedy @submit.prevent @validation-success="fetchDataReport">
diff --git a/src/modules/07_insignia/views/06_ReportMain.vue b/src/modules/07_insignia/views/06_ReportMain.vue
index 0b95585ca..20fb6bb39 100644
--- a/src/modules/07_insignia/views/06_ReportMain.vue
+++ b/src/modules/07_insignia/views/06_ReportMain.vue
@@ -349,13 +349,13 @@ onMounted(async () => {
       <div class="col-12">
         <q-card class="q-pa-sm">
           <div class="row q-col-gutter-sm no-wrap">
-            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12">
+            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
               <q-select
                 outlined
                 dense
                 v-model="employeeClass"
                 :options="employeeClassOption"
-                label="สถานภาพ"
+                label="ประเภทตำแหน่ง"
                 emit-value
                 map-options
                 option-label="name"
diff --git a/src/modules/09_leave/router.ts b/src/modules/09_leave/router.ts
index 1b9f2496f..5ec1f7604 100644
--- a/src/modules/09_leave/router.ts
+++ b/src/modules/09_leave/router.ts
@@ -11,8 +11,8 @@ const SpecialTimeMain = () =>
   import("@/modules/09_leave/views/04_SpecialTimeMain.vue");
 const leaveReport = () => import("@/modules/09_leave/views/06_ReportMain.vue");
 
-const CheckinReport = () =>
-  import("@/modules/09_leave/views/07_ReportCheckin.vue");
+// const CheckinReport = () =>
+//   import("@/modules/09_leave/views/!07_ReportCheckin.vue");
 export default [
   {
     path: "/round-time",
@@ -96,9 +96,9 @@ export default [
   },
 
   {
-    path: "/checkinReport",
+    path: "/checkin-report",
     name: "checkinReport",
-    component: CheckinReport,
+    component: leaveReport,
     meta: {
       Auth: true,
       Key: "SYS_WORK_REPORT",
diff --git a/src/modules/09_leave/views/07_ReportCheckin.vue b/src/modules/09_leave/views/!07_ReportCheckin.vue
similarity index 100%
rename from src/modules/09_leave/views/07_ReportCheckin.vue
rename to src/modules/09_leave/views/!07_ReportCheckin.vue
diff --git a/src/modules/09_leave/views/06_ReportMain.vue b/src/modules/09_leave/views/06_ReportMain.vue
index e248b24c8..eb6d78fbd 100644
--- a/src/modules/09_leave/views/06_ReportMain.vue
+++ b/src/modules/09_leave/views/06_ReportMain.vue
@@ -45,26 +45,49 @@ const dateMonth = ref<DataDateMonthObject>({
   year: new Date().getFullYear(),
 });
 
+const pageName = ref<string>(route.name as string);
+
 const dateWeek = ref<Date[]>(getCurrentWeek());
 const date = ref<Date>(new Date());
 
 const typeReport = ref<string>("");
 const optionReport = ref<DataOption[]>([]);
-const optionReportMain = ref<DataOption[]>([
-  {
-    id: "3",
-    name: "รายงานการเข้างาน",
-  },
-  {
-    id: "4",
-    name: "รายงานการเข้างานสาย",
-  },
-  { id: "1", name: "รายงานการลางานตามประเภทการลา" },
-  {
-    id: "2",
-    name: "รายงานการลางาน จำแนกตามเพศ ประเภทการลา หน่วยงาน/ส่วนราชการ",
-  },
-]);
+const optionReportMain = ref<DataOption[]>(
+  route.name?.toString() === "reportLeave"
+    ? [
+        {
+          id: "3",
+          name: "รายงานการเข้างาน",
+        },
+        {
+          id: "4",
+          name: "รายงานการเข้างานสาย",
+        },
+        { id: "1", name: "รายงานการลางานตามประเภทการลา" },
+        {
+          id: "2",
+          name: "รายงานการลางาน จำแนกตามเพศ ประเภทการลา หน่วยงาน/ส่วนราชการ",
+        },
+      ]
+    : route.name?.toString() === "leaveReport"
+    ? [
+        { id: "1", name: "รายงานการลางานตามประเภทการลา" },
+        {
+          id: "2",
+          name: "รายงานการลางาน จำแนกตามเพศ ประเภทการลา หน่วยงาน/ส่วนราชการ",
+        },
+      ]
+    : [
+        {
+          id: "3",
+          name: "รายงานการเข้างาน",
+        },
+        {
+          id: "4",
+          name: "รายงานการเข้างานสาย",
+        },
+      ]
+);
 
 const employeeClass = ref<string>("officer");
 const yearType = ref<string>("FULL");
@@ -380,14 +403,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">บัญชีแสดงวันลา</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    {{
+      pageName === "reportLeave"
+        ? "รายงานบันทึกเวลาและการลา"
+        : pageName === "leaveReport"
+        ? "รายงานสถิติการลา"
+        : "รายงานสถิติการลงเวลา"
+    }}
+  </div>
 
   <q-form greedy @submit.prevent @validation-success="onSearch">
     <div class="row q-col-gutter-sm">
       <div class="col-12">
         <q-card class="q-pa-sm">
           <div class="row q-col-gutter-sm no-wrap">
-            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12">
+            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
               <q-select
                 outlined
                 dense
@@ -624,7 +655,6 @@ onMounted(() => {
                     <div class="row q-col-gutter-y-xs">
                       <div class="text-grey-8 text-caption">เลือกช่วงเวลา</div>
                       <div class="col-12">
-
                         <q-select
                           class="bg-white"
                           dense
diff --git a/src/modules/11_discipline/components/9_DisciplineReport/Main.vue b/src/modules/11_discipline/components/9_DisciplineReport/Main.vue
index 27a734d8b..b433ef81d 100644
--- a/src/modules/11_discipline/components/9_DisciplineReport/Main.vue
+++ b/src/modules/11_discipline/components/9_DisciplineReport/Main.vue
@@ -298,14 +298,16 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">รายงานวินัย</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายงานการดำเนินการทางวินัย
+  </div>
 
   <q-form greedy @submit.prevent @validation-success="onUpdateFilter">
     <div class="row q-col-gutter-sm">
       <div class="col-12">
         <q-card class="q-pa-sm">
           <div class="row q-col-gutter-sm no-wrap">
-            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12">
+            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
               <q-select
                 outlined
                 dense
diff --git a/src/modules/14_KPI/views/report.vue b/src/modules/14_KPI/views/report.vue
index 2f7e20839..848c65f86 100644
--- a/src/modules/14_KPI/views/report.vue
+++ b/src/modules/14_KPI/views/report.vue
@@ -509,7 +509,7 @@ onMounted(() => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    รายงานประเมินผลการปฏิบัติราชการระดับบุคคล
+    รายงานการประเมินผลฯ ระดับบุคคล
   </div>
 
   <q-form greedy @submit.prevent @validation-success="fetchReport">
@@ -655,7 +655,7 @@ onMounted(() => {
                         </template>
                       </datepicker>
                     </div>
-                    <div class="col-12"><q-separator/></div>
+                    <div class="col-12"><q-separator /></div>
                     <div class="col-12 q-px-sm">
                       <q-select
                         ref="roundRef"
@@ -681,8 +681,11 @@ onMounted(() => {
             "
                       />
                     </div>
-                    <div class="col-12"><q-separator/></div>
-                    <div class="col-12 q-pb-xs q-px-sm" v-if="typeReport !== 'KPI8'">
+                    <div class="col-12"><q-separator /></div>
+                    <div
+                      class="col-12 q-pb-xs q-px-sm"
+                      v-if="typeReport !== 'KPI8'"
+                    >
                       <q-select
                         class="bg-white"
                         :disable="roundOp.length === 0"
diff --git a/src/modules/21_report/views/01_reportOrg.vue b/src/modules/21_report/views/01_reportOrg.vue
index 1b5085a37..76866448c 100644
--- a/src/modules/21_report/views/01_reportOrg.vue
+++ b/src/modules/21_report/views/01_reportOrg.vue
@@ -16,7 +16,7 @@ import type { OrgRevision } from "@/modules/02_organization/interface/response/o
 import TreeView from "@/modules/21_report/components/01_org/Main.vue";
 import StructureView from "@/modules/02_organization/components/StructureMain.vue";
 import StructureOrgMain from "@/modules/02_organization/components/StructureOrgMain.vue";
-import DialogHeader from "@/components/DialogHeader.vue";
+// import DialogHeader from "@/components/DialogHeader.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -34,8 +34,8 @@ const historyId = ref<string>(""); // ID ประวัติโครงสร
 const labelHistory = ref<string>("ประวัติโครงสร้าง"); // ชื่อประวัติโครงสร้าง
 const count = ref<number>(0);
 
-const modalCommand = ref<boolean>(false); //ส่งไปออกคำสั่ง
-const modalRemark = ref<boolean>(false); // หมายเหตุ
+// const modalCommand = ref<boolean>(false); //ส่งไปออกคำสั่ง
+// const modalRemark = ref<boolean>(false); // หมายเหตุ
 
 /**
  * function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
@@ -99,19 +99,19 @@ async function fetchHistory() {
     });
 }
 
-/**
- * function openPopup เพิ่มโครงสร้าง
- * @param type ประเภทการเพิ่มโครงาสร้าง
- */
-function ocClickAddStructure(type: string) {
-  modalNewStructure.value = !modalNewStructure.value;
-  typeStructure.value = type;
-}
+// /**
+//  * function openPopup เพิ่มโครงสร้าง
+//  * @param type ประเภทการเพิ่มโครงาสร้าง
+//  */
+// function ocClickAddStructure(type: string) {
+//   modalNewStructure.value = !modalNewStructure.value;
+//   typeStructure.value = type;
+// }
 
-/** function openPopup ตั้งเวลาเผยแพร่ */
-function onClickDateTime() {
-  modalDateTime.value = !modalDateTime.value;
-}
+// /** function openPopup ตั้งเวลาเผยแพร่ */
+// function onClickDateTime() {
+//   modalDateTime.value = !modalDateTime.value;
+// }
 
 /**
  * function เปิดประวัติโครงสร้าง
@@ -125,18 +125,18 @@ function onClickHistory(id: string, name: string) {
   count.value++;
 }
 
-async function workflowSystem() {
-  http
-    .get(config.API.workflowKeycloakSystem("SYS_ORG"))
-    .then((res) => {
-      const data = res.data.result;
-      store.isOfficer = data.isOfficer;
-      store.isStaff = data.isStaff;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-}
+// async function workflowSystem() {
+//   http
+//     .get(config.API.workflowKeycloakSystem("SYS_ORG"))
+//     .then((res) => {
+//       const data = res.data.result;
+//       store.isOfficer = data.isOfficer;
+//       store.isStaff = data.isStaff;
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     });
+// }
 
 async function fetchCheckIslock(id: string) {
   http
@@ -150,20 +150,20 @@ async function fetchCheckIslock(id: string) {
     });
 }
 
-watch(
-  () => store.typeOrganizational,
-  () => {
-    if (
-      store.typeOrganizational === "draft" &&
-      store.isOfficer === null &&
-      store.isStaff === null
-    ) {
-      workflowSystem();
-    } else if (store.typeOrganizational === "draft") {
-      store.rootId = "";
-    }
-  }
-);
+// watch(
+//   () => store.typeOrganizational,
+//   () => {
+//     if (
+//       store.typeOrganizational === "draft" &&
+//       store.isOfficer === null &&
+//       store.isStaff === null
+//     ) {
+//       workflowSystem();
+//     } else if (store.typeOrganizational === "draft") {
+//       store.rootId = "";
+//     }
+//   }
+// );
 
 /**
  * lifecycleHook ทำงานเมื่อมีการเรียกใช้ Components
@@ -177,11 +177,11 @@ onMounted(async () => {
 <template>
   <div class="row items-center">
     <div class="toptitle text-dark row items-center q-py-xs">
-      รายงานโครงสร้างอัตรากำลัง
+      รายงานโครงสร้างและกรอบอัตรากำลัง
     </div>
     <q-space />
 
-    <div
+    <!-- <div
       class="toptitle row items-center"
       v-if="store.typeOrganizational === 'draft'"
     >
@@ -202,11 +202,11 @@ onMounted(async () => {
         @click="onClickDateTime"
       >
       </q-btn>
-    </div>
+    </div> -->
   </div>
 
   <q-card flat bordered>
-    <div class="q-pa-xl" v-if="!isStatusData">
+    <!-- <div class="q-pa-xl" v-if="!isStatusData">
       <q-card
         flat
         bordered
@@ -244,57 +244,57 @@ onMounted(async () => {
       </q-card>
     </div>
 
-    <div v-else>
-      <q-card class="my-card">
-        <q-card-section class="q-pa-sm">
-          <q-toolbar class="q-gutter-md items-center" style="padding: 0px">
-            <q-btn-group outline>
-              <q-btn
-                dense
-                class="q-px-md"
-                :outline="store.typeOrganizational === 'current' ? false : true"
-                color="blue"
-                label="ปัจจุบัน"
-                :disable="store.activeId == '' || store.activeId == null"
-                @click="
-                  (store.typeOrganizational = 'current'),
-                    (labelHistory = 'ประวัติโครงสร้าง')
-                "
-              />
-
-              <q-btn-dropdown
-                v-if="
-                  checkPermission($route)?.attrOwnership == 'OWNER' &&
-                  itemHistory.length > 0
-                "
-                dense
-                class="q-px-md"
-                color="blue"
-                :label="labelHistory"
-                @click="store.typeOrganizational = 'old'"
-                :outline="store.typeOrganizational === 'old' ? false : true"
-              >
-                <q-list>
-                  <q-item
-                    dense
-                    clickable
-                    v-close-popup
-                    v-for="(item, index) in itemHistory"
-                    :key="index"
-                    @click="onClickHistory(item.id, item.name)"
-                  >
-                    <q-item-section>
-                      <q-item-label
-                        >{{ item.orgRevisionCreatedAt }}
-                        {{ item.name }}</q-item-label
-                      >
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-btn-dropdown>
-            </q-btn-group>
-
+    <div v-else> -->
+    <q-card class="my-card">
+      <q-card-section class="q-pa-sm">
+        <q-toolbar class="q-gutter-md items-center" style="padding: 0px">
+          <q-btn-group outline>
             <q-btn
+              dense
+              class="q-px-md"
+              :outline="store.typeOrganizational === 'current' ? false : true"
+              color="blue"
+              label="ปัจจุบัน"
+              :disable="store.activeId == '' || store.activeId == null"
+              @click="
+                (store.typeOrganizational = 'current'),
+                  (labelHistory = 'ประวัติโครงสร้าง')
+              "
+            />
+
+            <q-btn-dropdown
+              v-if="
+                checkPermission($route)?.attrOwnership == 'OWNER' &&
+                itemHistory.length > 0
+              "
+              dense
+              class="q-px-md"
+              color="blue"
+              :label="labelHistory"
+              @click="store.typeOrganizational = 'old'"
+              :outline="store.typeOrganizational === 'old' ? false : true"
+            >
+              <q-list>
+                <q-item
+                  dense
+                  clickable
+                  v-close-popup
+                  v-for="(item, index) in itemHistory"
+                  :key="index"
+                  @click="onClickHistory(item.id, item.name)"
+                >
+                  <q-item-section>
+                    <q-item-label
+                      >{{ item.orgRevisionCreatedAt }}
+                      {{ item.name }}</q-item-label
+                    >
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
+          </q-btn-group>
+
+          <!-- <q-btn
               v-if="store.remark"
               flat
               round
@@ -303,59 +303,59 @@ onMounted(async () => {
               @click="modalRemark = true"
             >
               <q-tooltip>หมายเหตุ</q-tooltip>
-            </q-btn>
+            </q-btn> -->
 
-            <q-space />
-            <q-btn
-              flat
-              dense
-              :color="store.statusView === 'list' ? 'grey-7' : 'grey-4'"
-              icon="mdi-file-tree"
-              @click="store.statusView = 'list'"
+          <q-space />
+          <q-btn
+            flat
+            dense
+            :color="store.statusView === 'list' ? 'grey-7' : 'grey-4'"
+            icon="mdi-file-tree"
+            @click="store.statusView = 'list'"
+          />
+          <q-separator inset vertical />
+          <q-btn
+            flat
+            dense
+            icon="mdi-sitemap"
+            :color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
+            @click="store.statusView = 'tree'"
+          />
+          <q-separator inset vertical />
+          <q-btn
+            flat
+            dense
+            icon="mdi-account-group"
+            :color="store.statusView === 'org' ? 'grey-7' : 'grey-4'"
+            @click="store.statusView = 'org'"
+          />
+        </q-toolbar>
+      </q-card-section>
+      <q-separator />
+      <q-card-section style="padding: 0px">
+        <q-tab-panels v-model="store.statusView" animated>
+          <q-tab-panel name="list" style="padding: 0px">
+            <TreeView
+              v-if="store.statusView === 'list'"
+              v-model:historyId="historyId"
+              v-model:count="count"
             />
-            <q-separator inset vertical />
-            <q-btn
-              flat
-              dense
-              icon="mdi-sitemap"
-              :color="store.statusView === 'tree' ? 'grey-7' : 'grey-4'"
-              @click="store.statusView = 'tree'"
-            />
-            <q-separator inset vertical />
-            <q-btn
-              flat
-              dense
-              icon="mdi-account-group"
-              :color="store.statusView === 'org' ? 'grey-7' : 'grey-4'"
-              @click="store.statusView = 'org'"
-            />
-          </q-toolbar>
-        </q-card-section>
-        <q-separator />
-        <q-card-section style="padding: 0px">
-          <q-tab-panels v-model="store.statusView" animated>
-            <q-tab-panel name="list" style="padding: 0px">
-              <TreeView
-                v-if="store.statusView === 'list'"
-                v-model:historyId="historyId"
-                v-model:count="count"
-              />
-            </q-tab-panel>
+          </q-tab-panel>
 
-            <q-tab-panel name="tree" style="padding: 0px">
-              <StructureView v-if="store.statusView === 'tree'" />
-            </q-tab-panel>
+          <q-tab-panel name="tree" style="padding: 0px">
+            <StructureView v-if="store.statusView === 'tree'" />
+          </q-tab-panel>
 
-            <q-tab-panel name="org" style="padding: 0px">
-              <StructureOrgMain v-if="store.statusView === 'org'" />
-            </q-tab-panel>
-          </q-tab-panels>
-        </q-card-section>
-      </q-card>
-    </div>
+          <q-tab-panel name="org" style="padding: 0px">
+            <StructureOrgMain v-if="store.statusView === 'org'" />
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card-section>
+    </q-card>
+    <!-- </div> -->
   </q-card>
 
-  <q-dialog v-model="modalRemark">
+  <!-- <q-dialog v-model="modalRemark">
     <q-card style="width: 300px">
       <DialogHeader tittle="หมายเหตุ" :close="() => (modalRemark = false)" />
 
@@ -368,7 +368,7 @@ onMounted(async () => {
         </div>
       </q-card-section>
     </q-card>
-  </q-dialog>
+  </q-dialog> -->
 </template>
 
 <style scoped></style>
diff --git a/src/modules/21_report/views/02_reportRegistry.vue b/src/modules/21_report/views/02_reportRegistry.vue
index edc82f9f5..4e173b3b8 100644
--- a/src/modules/21_report/views/02_reportRegistry.vue
+++ b/src/modules/21_report/views/02_reportRegistry.vue
@@ -832,7 +832,7 @@ watch(
       <div class="row col-12 q-gutter-sm">
         <q-card class="col-12 q-pa-sm">
           <div class="row col-12 q-col-gutter-sm no-wrap">
-            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12">
+            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
               <q-select
                 outlined
                 dense
diff --git a/src/modules/21_report/views/03_reportDevelopment.vue b/src/modules/21_report/views/03_reportDevelopment.vue
index 3918c8a2e..1cf1ff3d1 100644
--- a/src/modules/21_report/views/03_reportDevelopment.vue
+++ b/src/modules/21_report/views/03_reportDevelopment.vue
@@ -220,7 +220,7 @@ onMounted(async () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    รายงานโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
+    รายงานการพัฒนาบุคลากร/การศึกษาต่อ
   </div>
 
   <q-form greedy @submit.prevent @validation-success="getReport">
diff --git a/src/modules/21_report/views/04_reportEvaluate.vue b/src/modules/21_report/views/04_reportEvaluate.vue
index 5ab574cce..d3a7ec907 100644
--- a/src/modules/21_report/views/04_reportEvaluate.vue
+++ b/src/modules/21_report/views/04_reportEvaluate.vue
@@ -161,7 +161,7 @@ onMounted(() => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    รายงานประเมินบุคคล
+    รายงานระบบประเมินบุคคล
   </div>
   <q-form greedy @submit.prevent @validation-success="fetchReport">
     <div class="row q-col-gutter-sm">
diff --git a/src/modules/21_report/views/05_reportSalary.vue b/src/modules/21_report/views/05_reportSalary.vue
index 7a24dfc8c..2acaf6ff6 100644
--- a/src/modules/21_report/views/05_reportSalary.vue
+++ b/src/modules/21_report/views/05_reportSalary.vue
@@ -301,20 +301,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">รายงานเงินเดือน</div>
+  <div class="toptitle text-dark col-12 row items-center">
+    รายงานระบบเงินเดือน
+  </div>
 
   <q-form greedy @submit.prevent @validation-success="fetchReportPDF">
     <div class="row q-col-gutter-sm">
       <div class="col-12">
         <q-card class="q-pa-sm">
           <div class="row q-col-gutter-sm no-wrap">
-            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-12">
+            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
               <q-select
                 outlined
                 dense
                 v-model="employeeClass"
                 :options="employeeClassOption"
-                label="สภานภาพ"
+                label="ประเภทตำแหน่ง"
                 emit-value
                 map-options
                 option-label="name"