diff --git a/src/api/11_discipline/api.discipline.ts b/src/api/11_discipline/api.discipline.ts
index 4bb3f94a2..d8b2ff9d2 100644
--- a/src/api/11_discipline/api.discipline.ts
+++ b/src/api/11_discipline/api.discipline.ts
@@ -7,6 +7,7 @@ const appeal = `${env.API_URI}/discipline/complaint_appeal`;
 const disciplineReport = `${env.API_URI}/discipline/report`;
 
 export default {
+  directorListMain: `${disciplineMain}/director/`,
   directorList: (
     page: number,
     pageSize: number,
@@ -82,13 +83,8 @@ export default {
     `${discipline}/director/${disciplineId}/${id}`,
 
   /** ผู้ถูกพักราชการ */
-  suspendMain: (
-    page: number,
-    pageSize: number,
-    keyword: string,
-    type: string
-  ) =>
-    `${suspend}?page=${page}&pageSize=${pageSize}&keyword=${keyword}&profileType=${type}`,
+  suspendMain: suspend,
+
   suspendById: (id: string) => `${suspend}/${id}`,
 
   suspendReport: () => `${suspend}/report`,
@@ -101,15 +97,7 @@ export default {
   deleteFileResult: (id: string, docId: string) =>
     `${disciplineMain}/result/file/${id}/${docId}`,
 
-  appealMainList: (
-    status: string,
-    type: string,
-    year: number,
-    page: number,
-    pageSize: number,
-    keyword: string
-  ) =>
-    `${appeal}/admin?status=${status}&type=${type}&year=${year}&page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+  appealMainList: `${appeal}/admin?`,
   appealAdd: () => `${appeal}`,
   appealByID: (id: string) => `${appeal}/${id}`,
   appealByIDGet: (id: string) => `${appeal}/admin/${id}`,
diff --git a/src/components/TablePagination.vue b/src/components/TablePagination.vue
index 02ed5960a..5c8b2d1ca 100644
--- a/src/components/TablePagination.vue
+++ b/src/components/TablePagination.vue
@@ -11,7 +11,6 @@
     :pagination-label="paginationLabel"
     v-model:pagination="pagination"
     @request="onRequest"
-    :grid="!$q.screen.gt.xs"
     :rows-per-page-options="[10, 25, 50, 100]"
     :loading="loading"
   >
diff --git a/src/composables/usePagination.ts b/src/composables/usePagination.ts
index 6cdb1b521..e5558f97c 100644
--- a/src/composables/usePagination.ts
+++ b/src/composables/usePagination.ts
@@ -34,7 +34,11 @@ export function usePagination(
     if (!newPagination?.page || !newPagination?.rowsPerPage) return;
 
     pagination.value = { ...newPagination };
-    if (fetchFunction) {
+    if (
+      fetchFunction &&
+      pagination.value.rowsNumber &&
+      pagination.value.rowsNumber > 0
+    ) {
       await fetchFunction(); // เรียกฟังก์ชันที่ส่งเข้ามา
     }
   }
diff --git a/src/modules/03_recruiting/components/DialogCandidates.vue b/src/modules/03_recruiting/components/DialogCandidates.vue
new file mode 100644
index 000000000..92ad4348f
--- /dev/null
+++ b/src/modules/03_recruiting/components/DialogCandidates.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const { date2Thai, dateToISO } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+const title = defineModel<string>("title", { required: true });
+
+const props = defineProps({
+  onSubmit: { type: Function, require: true },
+});
+
+const date = ref<Date>(new Date()); // วันที่บัญชีใช้ได้ตั้งแต่
+
+/** ฟังก์ชันบันทึกข้อมูลวันที่ */
+function onSubmit() {
+  if (!date.value) return;
+  const dateISO = dateToISO(date.value);
+  props.onSubmit?.(dateISO);
+}
+
+/** ฟังก์ชันปิดโมดัล */
+function closeModal() {
+  modal.value = false;
+}
+
+/** watch modal รีเซ็ตวันที่ */
+watch(modal, (value) => {
+  if (value) date.value = new Date();
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent class="q-pt-none">
+    <q-card style="min-width: 450px">
+      <q-form @submit.prevent="onSubmit">
+        <DialogHeader :tittle="title" :close="closeModal" />
+        <q-separator />
+        <q-card-section>
+          <div class="col-12">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  ref="dateRef"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  :model-value="date != null ? date2Thai(date) : 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>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn color="public" label="บันทึก" type="submit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index 4557d28d8..903288539 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -6,14 +6,16 @@ import { useRouter, useRoute } from "vue-router";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import genReportXLSX from "@/plugins/genreportxlsx";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
-import Table from "@/modules/03_recruiting/components/Table.vue";
-import genReportXLSX from "@/plugins/genreportxlsx";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
+import Table from "@/modules/03_recruiting/components/Table.vue";
+import DialogCandidates from "@/modules/03_recruiting/components/DialogCandidates.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
@@ -58,9 +60,9 @@ const visibleColumns = ref<String[]>([
   "examAttribute",
   "examScore",
   "examResult",
+  "exam_order",
   "applyDate",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "examID",
@@ -269,7 +271,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "examResult",
     align: "center",
-    label: "ผลคะแนนสอบ",
+    label: "ผลการสอบ",
     sortable: false,
     field: "examResult",
     headerStyle: "font-size: 14px",
@@ -280,6 +282,15 @@ const columns = ref<QTableProps["columns"]>([
         sensitivity: "base",
       }),
   },
+  {
+    name: "exam_order",
+    align: "center",
+    label: "ลำดับที่สอบได้",
+    sortable: true,
+    field: "exam_order",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "applyDate",
     align: "left",
@@ -295,6 +306,7 @@ const columns = ref<QTableProps["columns"]>([
       }),
   },
 ]);
+const modalCandidates = ref(false); // dialog บรรจุผู้ผ่านการสอบแข่งขัน
 
 function clickDetail(examID: string) {
   router.push(`/compete/import/${importId.value}/${examID}`);
@@ -401,7 +413,19 @@ async function fetchData() {
     });
 }
 
-async function candidateToPlacement() {
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
+/**
+ * ฟังก์ชันยืนยันการบันทึกส่งบรรจุผู้ผ่านการสอบแข่งขัน
+ * @param date วันที่บัญชีใช้ได้ตั้งแต่
+ */
+function onSubmitCandidates(date: Date) {
   $q.dialog({
     title: "ยืนยันการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ",
     message: "ต้องการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุใช่หรือไม่?",
@@ -414,28 +438,28 @@ async function candidateToPlacement() {
     .onOk(async () => {
       showLoader();
       await http
-        .get(config.API.periodRecruitToPlacement(importId.value))
-        .then((res) => {
+        .post(config.API.periodRecruitToPlacement(importId.value), {
+          accountStartDate: date,
+        })
+        .then(() => {
           success($q, "นำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ");
+          modalCandidates.value = false;
+          router.go(-1);
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(async () => {
           hideLoader();
-          router.go(-1);
         });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 }
 
-function onSearch() {
-  rows.value = onSearchDataTable(
-    filter.value,
-    rowsData.value,
-    columns.value ? columns.value : []
-  );
+/** ฟังก์ชันเปิดโมดัลสำหรับผู้ส่งผ่านการสอบแข่งขัน */
+function openModalCandidates() {
+  modalCandidates.value = true;
 }
 
 onMounted(async () => {
@@ -443,6 +467,7 @@ onMounted(async () => {
   await fetchData();
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -464,7 +489,7 @@ onMounted(async () => {
       flat
       color="indigo"
       v-if="rows.length > 0"
-      @click="candidateToPlacement"
+      @click="openModalCandidates"
     >
       <q-tooltip>บรรจุผู้ผ่านการสอบแข่งขัน</q-tooltip>
     </q-btn>
@@ -491,6 +516,7 @@ onMounted(async () => {
       </q-menu>
     </q-btn>
   </div>
+
   <q-card flat bordered class="col-12 row q-mt-sm q-pt-sm q-pa-md">
     <div class="col-12">
       <Table
@@ -556,8 +582,11 @@ onMounted(async () => {
               <div v-else-if="col.name == 'c5'">
                 <q-checkbox disable v-model="props.row.c5" />
               </div>
+              <div v-else-if="col.name == 'exam_order'">
+                {{ col.value ? col.value : " " }}
+              </div>
               <div v-else>
-                {{ col.value }}
+                {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
           </q-tr>
@@ -565,6 +594,12 @@ onMounted(async () => {
       </Table>
     </div>
   </q-card>
+
+  <DialogCandidates
+    :title="'ส่งผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ'"
+    v-model:modal="modalCandidates"
+    :on-submit="onSubmitCandidates"
+  />
 </template>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
index 08d538298..25e2b3137 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
@@ -12,6 +12,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { RecruitDetailResponse } from "@/modules/03_recruiting/interface/response/Period";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 
+import DialogCandidates from "@/modules/03_recruiting/components/DialogCandidates.vue";
 import Table from "@/modules/03_recruiting/components/Table.vue";
 import genReportXLSX from "@/plugins/genreportxlsx";
 
@@ -58,6 +59,7 @@ const visibleColumns = ref<String[]>([
   "examAttribute",
   "examScore",
   "examResult",
+  "exam_order",
   "applyDate",
 ]);
 const columns = ref<QTableProps["columns"]>([
@@ -210,7 +212,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "examResult",
     align: "left",
-    label: "ผลคะแนนสอบ",
+    label: "ผลการสอบ",
     sortable: true,
     field: "examResult",
     headerStyle: "font-size: 14px",
@@ -218,6 +220,15 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "exam_order",
+    align: "center",
+    label: "ลำดับที่สอบได้",
+    sortable: true,
+    field: "exam_order",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "applyDate",
     align: "left",
@@ -339,7 +350,7 @@ async function fetchData() {
 }
 
 /** บรรจุผู้ผ่านการคัดเลือกผู้พิการ */
-async function candidateToPlacement() {
+async function onSubmitCandidates() {
   $q.dialog({
     title: "ยืนยันการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ",
     message: "ต้องการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุใช่หรือไม่?",
@@ -353,15 +364,16 @@ async function candidateToPlacement() {
       showLoader();
       await http
         .get(config.API.periodDisableToPlacement(importId.value))
-        .then((res) => {
+        .then(() => {
           success($q, "นำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ");
+          modalCandidates.value = false;
+          router.go(-1);
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(async () => {
           hideLoader();
-          router.go(-1);
         });
     })
     .onCancel(() => {})
@@ -376,6 +388,13 @@ function onSearch() {
   );
 }
 
+const modalCandidates = ref(false); // dialog บรรจุผู้ผ่านการสอบแข่งขัน
+
+/** ฟังก์ชันเปิดโมดัลสำหรับผู้ส่งผ่านคัดเลือก */
+function openModalCandidates() {
+  modalCandidates.value = true;
+}
+
 onMounted(async () => {
   hideLoader();
   await fetchData();
@@ -403,7 +422,7 @@ onMounted(async () => {
       flat
       color="indigo"
       v-if="rows.length > 0"
-      @click="candidateToPlacement"
+      @click="openModalCandidates"
     >
       <q-tooltip>บรรจุผู้ผ่านการคัดเลือกผู้พิการ</q-tooltip>
     </q-btn>
@@ -495,8 +514,11 @@ onMounted(async () => {
               <div v-else-if="col.name == 'c5'">
                 <q-checkbox disable v-model="props.row.c5" />
               </div>
+              <div v-else-if="col.name == 'exam_order'">
+                {{ col.value ? col.value : " " }}
+              </div>
               <div v-else>
-                {{ col.value }}
+                {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
           </q-tr>
@@ -504,6 +526,12 @@ onMounted(async () => {
       </Table>
     </div>
   </q-card>
+
+  <DialogCandidates
+    :title="'ส่งผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ'"
+    v-model:modal="modalCandidates"
+    :on-submit="onSubmitCandidates"
+  />
 </template>
 
 <style></style>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
index 6c715a085..f7520694d 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
@@ -1154,7 +1154,7 @@ onMounted(async () => {
                 </div>
                 <label class="col-1 flex justify-center items-center">/</label>
                 <div class="col-5">
-                  <!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
+                  <!-- :rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']" -->
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="formData.commandYear"
@@ -1178,7 +1178,7 @@ onMounted(async () => {
                             ? null
                             : formData.commandYear + 543
                         "
-                        :label="`${'พ.ศ.'}`"
+                        label="ปี พ.ศ."
                       >
                         <template v-slot:prepend>
                           <q-icon
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
index d2bf97952..a17157593 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
@@ -1118,7 +1118,7 @@ onMounted(async () => {
                 </div>
                 <label class="col-1 flex justify-center items-center">/</label>
                 <div class="col-5">
-                  <!-- :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]" -->
+                  <!-- :rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']" -->
                   <datepicker
                     menu-class-name="modalfix"
                     v-model="formData.commandYear"
@@ -1142,7 +1142,7 @@ onMounted(async () => {
                             ? null
                             : formData.commandYear + 543
                         "
-                        :label="`${'พ.ศ.'}`"
+                        label="ปี พ.ศ."
                       >
                         <template v-slot:prepend>
                           <q-icon
diff --git a/src/modules/04_registryPerson/views/edit/components/FormPosition.vue b/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
index ad706583c..6a459c9ec 100644
--- a/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
+++ b/src/modules/04_registryPerson/views/edit/components/FormPosition.vue
@@ -253,8 +253,8 @@ function classInput(val: boolean) {
                     ? null
                     : formData.commandYear + 543
                 "
-                :label="`${'พ.ศ.'}`"
-                :rules="isAddPosition ? [(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`] : []"
+                label="ปี พ.ศ."
+                :rules="isAddPosition ? [(val:string) => !!val || 'กรุณากรอกปี พ.ศ.'] : []"
                 clearable
                 @clear="formData.commandYear = null"
               >
diff --git a/src/modules/04_registryPerson/views/edit/components/Table.vue b/src/modules/04_registryPerson/views/edit/components/Table.vue
index 0edba5461..c93771d7e 100644
--- a/src/modules/04_registryPerson/views/edit/components/Table.vue
+++ b/src/modules/04_registryPerson/views/edit/components/Table.vue
@@ -1112,7 +1112,7 @@ onMounted(async () => {
                               ? null
                               : formData.commandYear + 543
                           "
-                          :label="`${'พ.ศ.'}`"
+                          label="ปี พ.ศ."
                           clearable
                           @clear="formData.commandYear = null"
                           @update:model-value="onUpdateData"
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 8464ce5d1..39d9e2eb6 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -1679,6 +1679,7 @@ onMounted(async () => {
         <DialogHeader :tittle="`เลือกวันรายงานตัว`" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
+          <!-- :min-date="new Date()" -->
           <datepicker
             menu-class-name="modalfix"
             v-model="reportingDate"
@@ -1687,7 +1688,6 @@ onMounted(async () => {
             borderless
             :enableTimePicker="false"
             week-start="0"
-            :min-date="new Date()"
           >
             <template #year="{ year }">
               {{ year + 543 }}
diff --git a/src/modules/05_placement/components/probation/MainSurvey.vue b/src/modules/05_placement/components/probation/MainSurvey.vue
index 6290b910e..103081e4e 100644
--- a/src/modules/05_placement/components/probation/MainSurvey.vue
+++ b/src/modules/05_placement/components/probation/MainSurvey.vue
@@ -156,7 +156,7 @@ onMounted(async () => {
                   outlined
                   hide-bottom-space
                   :model-value="year === null ? 'ทั้งหมด' : Number(year) + 543"
-                  :label="`${'ปีพ.ศ.'}`"
+                  :label="`${'ปี พ.ศ.'}`"
                 >
                 </q-input>
               </template>
diff --git a/src/modules/06_retirement/views/01_retirement.vue b/src/modules/06_retirement/views/01_retirement.vue
index a3483f52a..9eb24ae09 100644
--- a/src/modules/06_retirement/views/01_retirement.vue
+++ b/src/modules/06_retirement/views/01_retirement.vue
@@ -248,7 +248,7 @@ onMounted(async () => {
                     :model-value="
                       fiscalyear === null ? 'ทั้งหมด' : Number(fiscalyear) + 543
                     "
-                    :label="`${'ปีพ.ศ.'}`"
+                    :label="`${'ปี พ.ศ.'}`"
                   >
                   </q-input>
                 </template>
diff --git a/src/modules/09_leave/components/02_WorkList/!DialogReport.vue b/src/modules/09_leave/components/02_WorkList/!DialogReport.vue
new file mode 100644
index 000000000..eddf37943
--- /dev/null
+++ b/src/modules/09_leave/components/02_WorkList/!DialogReport.vue
@@ -0,0 +1,297 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** importType*/
+import type {
+  DataOption,
+  DataDateMonthObject,
+} from "@/modules/09_leave/interface/index/Main";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** use*/
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const { date2Thai, monthYear2Thai, dateToISO, messageError } = mixin;
+
+// const apiGenReport =
+//   "https://report-server.frappet.synology.me/api/v1/report-template/xlsx";
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    requier: true,
+    default: false,
+  },
+  close: {
+    type: Function,
+    requier: true,
+  },
+});
+
+const loadingBtn = ref<boolean>(true);
+const filterType = ref<string>("DAY");
+const filterTypeMain = ref<DataOption[]>([
+  { id: "DAY", name: "รายวัน" },
+  { id: "MONTH", name: "รายเดือน" },
+]);
+const filterTypeOption = ref<DataOption[]>(filterTypeMain.value);
+const date = ref<Date>(new Date());
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+
+const detailReport = ref<any>();
+
+/** function อัปเดทรายงานสถิติการลา*/
+async function updateFilterType() {
+  filterType.value === "DAY"
+    ? updateDte()
+    : filterType.value === "MONTH"
+    ? updateMonth()
+    : false;
+}
+
+/** function อัปเดทวัน*/
+async function updateDte() {
+  const body = {
+    startDate: dateToISO(date.value),
+    endDate: dateToISO(date.value),
+    type: filterType.value,
+  };
+  fetchReportTimeRecords(body);
+}
+
+/** function อัปเดทเดือน*/
+async function updateMonth() {
+  const mount = dateMonth.value.month + 1;
+  //  วันเริ่มต้นของเดือน
+  const firstDay = new Date(dateMonth.value.year, mount - 1, 1);
+  // วันสิ้นสุดของเดือนถัดไป
+  const lastDay = new Date(dateMonth.value.year, mount, 0);
+  const body = {
+    startDate: dateToISO(firstDay),
+    endDate: dateToISO(lastDay),
+    type: filterType.value,
+  };
+  fetchReportTimeRecords(body);
+}
+
+/**
+ * function เรียกข้อมูลรายงานสถิติการลา
+ * @param body วันเรื่มต้นและสิ้นสุด
+ */
+async function fetchReportTimeRecords(body: any) {
+  loadingBtn.value = true;
+  await http
+    .post(config.API.leaveReportTimeRecords(), body)
+    .then((res) => {
+      const data = res.data.result;
+      detailReport.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        loadingBtn.value = false;
+      }, 500);
+    });
+}
+
+/**
+ *  function filterOption
+ * @param val  คำค้นหา
+ * @param update functoin
+ */
+function filterFnOptions(val: any, update: Function) {
+  update(() => {
+    filterTypeOption.value = filterTypeMain.value.filter(
+      (v: DataOption) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+/**
+ * function เรียกไฟล์ XLSX
+ * @param data ข้อมูลรายงานสถิติการลา
+ */
+async function genReportXLSX(data: any) {
+  await axios
+    .post(`${config.API.reportTemplate}/xlsx`, data, {
+      headers: {
+        accept:
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        "content-Type": "application/json",
+      },
+      responseType: "blob",
+    })
+    .then(async (res) => {
+      const blob = new Blob([res.data]);
+      await downloadReport(blob, "xlsx");
+    })
+    .catch(async (e) => {
+      messageError($q, JSON.parse(await e.response.data.text()));
+    });
+}
+
+/**
+ *
+ * @param data ข้อมูลรายงานสถิติการลา
+ * @param type นามสกุลไฟล์
+ */
+async function downloadReport(data: any, type: string) {
+  const link = document.createElement("a");
+  var fileName = "รายงานสรุปบันทึกการลงเวลาปฏิบัติงาน";
+  link.href = window.URL.createObjectURL(new Blob([data]));
+  link.setAttribute("download", `${fileName}.${type}`);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+function monthYearThai(val: DataDateMonthObject) {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+}
+
+watch(
+  () => props.modal,
+  () => {
+    filterType.value = "DAY";
+    date.value = new Date();
+    props.modal && updateFilterType();
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 700px; max-width: 100vw">
+      <Header :close="props.close" :tittle="'รายงานสถิติการลงเวลา'" />
+
+      <q-separator />
+
+      <q-card-section class="q-pt-none" style="padding: 0px">
+        <div class="q-pa-sm q-gutter-y-sm">
+          <q-toolbar class="q-pa-sm bg-grey-2" style="border-radius: 5px">
+            <div class="q-pr-xs col-4">
+              <q-select
+                class="bg-white"
+                outlined
+                dense
+                v-model="filterType"
+                :options="filterTypeOption"
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                @update:model-value="updateFilterType"
+                @filter="(inputValue: any,
+        doneFn: Function) => filterFnOptions(inputValue, doneFn,)"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="q-pr-xs col-4" v-if="filterType === 'DAY'">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="date"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                week-start="0"
+                @update:model-value="updateDte"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    borderless
+                    :model-value="date ? date2Thai(date) : null"
+                    :label="`${'วันที่'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="q-pr-xs col-4" v-if="filterType === 'MONTH'">
+              <datepicker
+                v-model="dateMonth"
+                :locale="'th'"
+                autoApply
+                month-picker
+                :enableTimePicker="false"
+                @update:model-value="updateMonth"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    class="bg-white"
+                    outlined
+                    dense
+                    borderless
+                    :label="`${'เดือน'}`"
+                    :model-value="monthYearThai(dateMonth)"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      ></q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="q-pr-xs col-4">
+              <q-btn
+                :loading="loadingBtn"
+                :disable="loadingBtn"
+                color="primary"
+                icon="download"
+                label="ดาวน์โหลดรายงาน"
+                @click="genReportXLSX(detailReport)"
+                style="width: 100%"
+              >
+                <q-tooltip>ดาวน์โหลดรายงาน</q-tooltip>
+              </q-btn>
+            </div>
+          </q-toolbar>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/components/02_WorkList/DialogDetail.vue b/src/modules/09_leave/components/02_WorkList/DialogDetail.vue
index f205b5eea..9202066c0 100644
--- a/src/modules/09_leave/components/02_WorkList/DialogDetail.vue
+++ b/src/modules/09_leave/components/02_WorkList/DialogDetail.vue
@@ -188,7 +188,8 @@ watch(
         formData.checkOutLocationName = stores.formData.checkOutLocationName;
       }
     }
-  }
+  },
+  { deep: true }
 );
 </script>
 
diff --git a/src/modules/09_leave/components/02_WorkList/DialogMap.vue b/src/modules/09_leave/components/02_WorkList/DialogMap.vue
index face9f589..bec2fe52c 100644
--- a/src/modules/09_leave/components/02_WorkList/DialogMap.vue
+++ b/src/modules/09_leave/components/02_WorkList/DialogMap.vue
@@ -2,9 +2,6 @@
 import { ref, watch } from "vue";
 import { loadModules } from "esri-loader";
 
-// const apiKey = ref<string>(
-//   "YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg"
-// );
 const props = defineProps({
   modal: {
     type: Boolean,
diff --git a/src/modules/09_leave/components/02_WorkList/Tab1.vue b/src/modules/09_leave/components/02_WorkList/Tab1.vue
index d65d6e0e5..6d4e63d81 100644
--- a/src/modules/09_leave/components/02_WorkList/Tab1.vue
+++ b/src/modules/09_leave/components/02_WorkList/Tab1.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -20,20 +22,21 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 const $q = useQuasar(); //ใช้ noti quasar
-const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
-const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } =
+  useCounterMixin();
+const { pagination, params, onRequest } = usePagination(
+  "",
+  fetchListTimeRecord
+);
 
 /** ตัวแปร querySting*/
-const total = ref<number>(0);
-const keyword = ref<string>("");
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
-const maxPage = ref<number>(1);
-const filetStatus = ref<string>("ALL");
-const roleStatus = ref<string>("ALL");
+const keyword = ref<string>(""); //keyword ค้นหา
+const filetStatus = ref<string>("ALL"); //*สถานะ
+const roleStatus = ref<string>("ALL"); //*ประเภทตำแหน่ง
 
 /** ข้อมูลตาราง*/
+const rows = ref<TableRowsTime[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -112,7 +115,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "checkOutStatus",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "checkOutStatus",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -129,33 +132,31 @@ const visibleColumns = ref<string[]>([
   "checkOutLocation",
   "checkOutStatus",
 ]);
-const rows = ref<TableRowsTime[]>([]);
 
-/** function เรียกข้อมูล รายการลงเวลาที่ประมวลผลแล้ว*/
+/** ฟังก์ชันเรียกข้อมูลรายการลงเวลาที่ประมวลผลแล้ว*/
 async function fetchListTimeRecord() {
-  rows.value = [];
+  showLoader();
   const date = new Date(workStore.selectDate as string | Date);
   const querySting = {
+    ...params.value,
     startDate: dateToISO(date), //*วันที่เริ่ม
     endDate: dateToISO(date), //*วันที่สิ้นสุด
     status: filetStatus.value, //*สถานะ
-    page: page.value, //*หน้า
-    pageSize: rowsPerPage.value, //*จำนวนแถวต่อหน้า
     keyword: keyword.value.trim(), //keyword ค้นหา
     profileType: roleStatus.value.trim(), //keyword ค้นหา
   };
 
-  showLoader();
   await http
-    .get(
-      config.API.timeRecord() +
-        `?startDate=${querySting.startDate}&endDate=${querySting.startDate}&status=${querySting.status}&page=${querySting.page}&pageSize=${querySting.pageSize}&keyword=${querySting.keyword}&profileType=${querySting.profileType}`
-    )
+    .get(config.API.timeRecord(), {
+      params: {
+        ...querySting,
+      },
+    })
     .then((res) => {
-      total.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      const datalist: TableRowsTime[] = res.data.result.data.map(
-        (e: DataResTime) => ({
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      if (result.data.length > 0) {
+        rows.value = result.data.map((e: DataResTime) => ({
           id: e.id,
           fullName: e.fullName,
           profileType: e.profileType,
@@ -175,35 +176,21 @@ async function fetchListTimeRecord() {
           checkOutStatus: e.checkOutStatus
             ? workStore.convertSatatus(e.checkOutStatus)
             : "-",
-        })
-      );
-      rows.value = datalist;
+        }));
+      }
     })
     .catch((err) => {
       messageError($q, err);
+      rows.value = [];
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-/**
- * function updatePaging และเรียกข้อมูลอีกรอบ
- * @param params pagin
- * @param currentPage page
- * @param key คำค้นหา
- * @param status สถานะ
- */
-async function updatePaging(
-  params: any,
-  currentPage: number,
-  key: string,
-  status: string
-) {
-  page.value = currentPage;
-  rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
-  keyword.value = key ?? keyword.value;
-  filetStatus.value = status ?? filetStatus.value;
+/** ฟังก์ชันค้นหาข้อมูล */
+async function onSearchData() {
+  pagination.value.page = 1;
   await fetchListTimeRecord();
 }
 
@@ -214,22 +201,23 @@ onMounted(async () => {
   await fetchListTimeRecord();
 });
 </script>
+
 <template>
+  <!-- Toolbar -->
   <ToolBar
-    :filetStatus="filetStatus"
-    @update:pagination="updatePaging"
+    v-model:filetStatus="filetStatus"
     v-model:role-status="roleStatus"
+    v-model:keyword="keyword"
+    :on-search-data="onSearchData"
   />
 
+  <!-- ตาราง -->
   <TableList
-    :total="total"
     :rows="rows.length > 0 ? rows : []"
-    v-model:page="page"
-    :rowsPerPage="rowsPerPage"
-    :maxPage="maxPage"
-    @update:pagination="updatePaging"
     :tab="'time-record'"
     :fetchData="fetchListTimeRecord"
+    :on-request="onRequest"
+    v-model:pagination="pagination"
   />
 </template>
 
diff --git a/src/modules/09_leave/components/02_WorkList/Tab2.vue b/src/modules/09_leave/components/02_WorkList/Tab2.vue
index 8d1992d78..a1edbb3d0 100644
--- a/src/modules/09_leave/components/02_WorkList/Tab2.vue
+++ b/src/modules/09_leave/components/02_WorkList/Tab2.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -20,14 +22,18 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 /** useStore */
-const total = ref<number>(0);
-const mixin = useCounterMixin();
-const workStore = useWorklistDataStore();
-const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
-const roleStatus = ref<string>("ALL");
 const $q = useQuasar(); //ใช้ noti quasar
+const workStore = useWorklistDataStore();
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } =
+  useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListLogRecord);
+
+/** ตัวแปร QueryString*/
+const keyword = ref<string>("");
+const roleStatus = ref<string>("ALL");
 
 /** ข้อมูลตาราง*/
+const rows = ref<TableRows[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -102,66 +108,55 @@ const visibleColumns = ref<string[]>([
   "checkOutTime",
   "checkOutLocation",
 ]);
-const rows = ref<TableRows[]>([]);
 
-/** ตัวแปร QueryString*/
-const keyword = ref<string>("");
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
-const maxPage = ref<number>(1);
-
-/** function เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
+/** ฟังก์ชันเรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
 async function fetchListLogRecord() {
-  rows.value = [];
   showLoader();
   const date = new Date(workStore.selectDate as string | Date);
+
   await http
-    .get(
-      config.API.logRecord() +
-        `?startDate=${dateToISO(date)}&endDate=${dateToISO(date)}&page=${
-          page.value
-        }&pageSize=${rowsPerPage.value}&keyword=${keyword.value}&profileType=${
-          roleStatus.value
-        }`
-    )
+    .get(config.API.logRecord(), {
+      params: {
+        ...params.value,
+        startDate: dateToISO(date), //*วันที่เริ่ม
+        endDate: dateToISO(date), //*วันที่สิ้นสุด
+        keyword: keyword.value.trim(), //keyword ค้นหา
+        profileType: roleStatus.value.trim(), //keyword ค้นหา
+      },
+    })
     .then((res) => {
-      total.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      let datalist: TableRows[] = res.data.result.data.map((e: DataResLog) => ({
-        id: e.id,
-        profileType: e.profileType,
-        fullName: e.fullName,
-        checkInDate: e.checkInDate && date2Thai(e.checkInDate),
-        checkInTime: e.checkInTime ? e.checkInTime : "-",
-        checkInLocation: e.checkInLocation ? e.checkInLocation : "-",
-        checkInLat: e.checkInLat ? e.checkInLat : "",
-        checkInLon: e.checkInLon ? e.checkInLon : "",
-        checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
-        checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
-        checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
-        checkOutLat: e.checkOutLat ? e.checkOutLat : "",
-        checkOutLon: e.checkOutLon ? e.checkOutLon : "",
-      }));
-      rows.value = datalist;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      if (result.data.length > 0) {
+        rows.value = result.data.map((e: DataResLog) => ({
+          id: e.id,
+          profileType: e.profileType,
+          fullName: e.fullName,
+          checkInDate: e.checkInDate && date2Thai(e.checkInDate),
+          checkInTime: e.checkInTime ? e.checkInTime : "-",
+          checkInLocation: e.checkInLocation ? e.checkInLocation : "-",
+          checkInLat: e.checkInLat ? e.checkInLat : "",
+          checkInLon: e.checkInLon ? e.checkInLon : "",
+          checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
+          checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
+          checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
+          checkOutLat: e.checkOutLat ? e.checkOutLat : "",
+          checkOutLon: e.checkOutLon ? e.checkOutLon : "",
+        }));
+      }
     })
     .catch((err) => {
       messageError($q, err);
+      rows.value = [];
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-/**
- * function ค้นหาตามหน้าที่เลือก
- * @param params pagination
- * @param currentPage page
- * @param key keyword ค้นหา
- */
-async function updatePagingProp(params: any, currentPage: number, key: string) {
-  page.value = currentPage;
-  rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
-  keyword.value = key ?? keyword.value;
+/*** ฟังก์ชันค้นหาข้อมูล */
+async function onSearchData() {
+  pagination.value.page = 1;
   await fetchListLogRecord();
 }
 
@@ -174,18 +169,17 @@ onMounted(async () => {
 </script>
 <template>
   <ToolBarDate
-    :keyword="keyword"
-    @update:pagination="updatePagingProp"
+    v-model:keyword="keyword"
     v-model:role-status="roleStatus"
+    :on-search-data="onSearchData"
   />
+
   <TableList
-    :total="total"
     :rows="rows.length > 0 ? rows : []"
-    v-model:page="page"
-    :rowsPerPage="rowsPerPage"
-    :maxPage="maxPage"
-    @update:pagination="updatePagingProp"
     :tab="'log-record'"
+    :fetchData="fetchListLogRecord"
+    :on-request="onRequest"
+    v-model:pagination="pagination"
   />
 </template>
 
diff --git a/src/modules/09_leave/components/02_WorkList/TableList.vue b/src/modules/09_leave/components/02_WorkList/TableList.vue
index 98c3901db..9fd478cea 100644
--- a/src/modules/09_leave/components/02_WorkList/TableList.vue
+++ b/src/modules/09_leave/components/02_WorkList/TableList.vue
@@ -1,38 +1,26 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 
 import { checkPermission } from "@/utils/permissions";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
+import type { PropsTable } from "@/interface/index/PropsTable";
+import type { DataWorkList } from "@/modules/09_leave/interface/index/Main";
+
 /** importComponents */
 import DialogDetail from "@/modules/09_leave/components/02_WorkList/DialogDetail.vue";
 import DialogEdit from "@/modules/09_leave/components/02_WorkList/DialogEdit.vue";
 
 const workStore = useWorklistDataStore();
-const currentPage = defineModel<number>("page", {
-  default: 1,
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
 });
+
 const props = defineProps({
   rows: {
     type: Object,
     require: true,
   },
-  // page: {
-  //   type: Number,
-  //   require: true,
-  // },
-  rowsPerPage: {
-    type: Number,
-    require: true,
-  },
-  maxPage: {
-    type: Number,
-    require: true,
-  },
-  total: {
-    type: Number,
-    require: true,
-  },
   tab: {
     type: String,
     require: true,
@@ -41,48 +29,30 @@ const props = defineProps({
     type: Function,
     require: true,
   },
+  onRequest: {
+    type: Function,
+    require: true,
+  },
 });
 
-const emit = defineEmits(["update:pagination"]);
-
-/** ข้อมูล popup */
-const modal = ref<boolean>(false);
-const dataDetail = ref<any>();
-const modalEdit = ref<boolean>(false);
-
-/** pagination */
-// const currentPage = ref<number>(1);
-const pagination = ref({
-  descending: false,
-  page: Number(currentPage.value),
-  rowsPerPage: props.rowsPerPage,
-});
-
-/**
- * function อัปเดท props
- * @param newPagination paging
- * @param page หน้าปัจุบัน
- */
-function updateProp(newPagination: any, page: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
-}
-
-const typeTab = ref<string>("");
+const modal = ref<boolean>(false); //modal แสดงรายละเอียด
+const dataDetail = ref<DataWorkList>(); //ข้อมูลรายละเอียด
+const modalEdit = ref<boolean>(false); //modal แก้ไขข้อมูล
+const typeTab = ref<string>(""); //ประเภท tab
 
 /**
  * Function openPopup และแสดงรายละเอียด
  * @param data ข้อมูลรายละเอียด
  */
-function clickDetail(data: any) {
+function clickDetail(data: DataWorkList) {
   typeTab.value = props.tab as string;
   modal.value = true;
   dataDetail.value = data;
 }
 
-function onClickEdit(data: any) {
+function onClickEdit(data: DataWorkList) {
   modalEdit.value = !modalEdit.value;
-  dataDetail.value = modalEdit.value ? data : [];
+  dataDetail.value = modalEdit.value ? data : undefined;
 }
 
 /** Function ปิด popup */
@@ -90,27 +60,13 @@ function closeDetail() {
   modal.value = false;
 }
 
-/** function Callblck ทำงานเมื่อ pagination มีการเปลี่ยนแปลง */
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  updateProp(pagination.value, currentPage.value);
-});
-
-/**
- * function updatePageSize
- * @param newPagination  PageSize
- */
-function updateRowsPerPagen(newPagination: any) {
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-  currentPage.value = 1;
-}
-
 onMounted(() => {
   typeTab.value = props.tab as string;
 });
 </script>
 
 <template>
-  <d-table
+  <p-table
     ref="table"
     :columns="workStore.columns"
     :rows="props.rows"
@@ -120,9 +76,9 @@ onMounted(() => {
     dense
     class="custom-header-table"
     :visible-columns="workStore.visibleColumns"
-    :rows-per-page-options="[10, 25, 50, 100]"
-    :pagination="pagination"
-    @update:pagination="updateRowsPerPagen"
+    :rows-per-page-options="[1, 10, 25, 50, 100]"
+    v-model:pagination="pagination"
+    @request="props.onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -164,11 +120,7 @@ onMounted(() => {
         </q-td>
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name == 'no'">
-            {{
-              (currentPage - 1) * Number(pagination.rowsPerPage) +
-              props.rowIndex +
-              1
-            }}
+            {{ props.rowIndex + 1 }}
           </div>
           <div v-else-if="col.name == 'checkInLocation'">
             <q-item style="padding: 0">
@@ -203,19 +155,7 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="currentPage"
-        active-color="primary"
-        color="dark"
-        :max="Number(props.maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 
   <DialogDetail
     :modal="modal"
diff --git a/src/modules/09_leave/components/02_WorkList/ToolBar.vue b/src/modules/09_leave/components/02_WorkList/ToolBar.vue
index e13d3f782..e5316b407 100644
--- a/src/modules/09_leave/components/02_WorkList/ToolBar.vue
+++ b/src/modules/09_leave/components/02_WorkList/ToolBar.vue
@@ -13,23 +13,24 @@ const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
+const filetStatus = defineModel<string>("filetStatus", {
+  required: true,
+});
+const roleStatus = defineModel<string>("roleStatus", {
+  required: true,
+});
+const keyword = defineModel<string>("keyword", {
+  required: true,
+});
+
 /** props จาก Tab 1*/
 const props = defineProps({
-  filetStatus: {
-    type: String,
+  onSearchData: {
+    type: Function,
     require: true,
   },
 });
 
-const emit = defineEmits(["update:pagination"]);
-
-/** ตัแปร filter**/
-const filetStatus = ref<string>(
-  props.filetStatus?.toString() || "default-value"
-);
-const roleStatus = defineModel<string>("roleStatus", { required: true });
-
-const keyword = ref<string>("");
 const optionMain = ref<DataOption[]>([
   { id: "ALL", name: "ทั้งหมด" },
   { id: "NORMAL", name: "ปกติ" },
@@ -45,20 +46,9 @@ const roleMainOp = ref<DataOption[]>([
 const option = ref<DataOption[]>(optionMain.value);
 const roleOp = ref<DataOption[]>(roleMainOp.value);
 
-/**
- * function updateProps
- * @param newPagination paging
- * @param keyword คำค้น
- * @param status สถานะ
- */
-function updateProp(newPagination: any, keyword: string, status: string) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, 1, keyword, status);
-}
-
 /** function ค้นหาข้อมูลแล้วไปอัปเดท props*/
 function filterFn() {
-  updateProp([], keyword.value, filetStatus.value);
+  props.onSearchData?.();
 }
 
 /**
@@ -70,13 +60,13 @@ function filterOptionFn(val: string, update: Function, type?: string) {
   if (type == "role") {
     update(() => {
       roleOp.value = roleMainOp.value.filter(
-        (e: any) => e.name.search(val) !== -1
+        (e: DataOption) => e.name.search(val) !== -1
       );
     });
   } else {
     update(() => {
       option.value = optionMain.value.filter(
-        (e: any) => e.name.search(val) !== -1
+        (e: DataOption) => e.name.search(val) !== -1
       );
     });
   }
@@ -92,7 +82,7 @@ function calculateMaxDate() {
 
 <template>
   <div class="row col-12 q-col-gutter-sm q-mb-sm">
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-4 col-md-2">
       <datepicker
         v-model="workStore.selectDate"
         :locale="'th'"
@@ -127,7 +117,7 @@ function calculateMaxDate() {
         </template>
       </datepicker>
     </div>
-    <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="col-xs-12 col-sm- col-md-3">
       <q-select
         for="selectStatus"
         emit-value
@@ -162,7 +152,7 @@ function calculateMaxDate() {
         </template>
       </q-select>
     </div>
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-4 col-md-2">
       <q-select
         for="selectStatus"
         emit-value
@@ -197,7 +187,7 @@ function calculateMaxDate() {
       </q-select>
     </div>
     <q-space />
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-5 col-md-2">
       <q-input
         for="filterTable"
         dense
diff --git a/src/modules/09_leave/components/02_WorkList/ToolBarDate.vue b/src/modules/09_leave/components/02_WorkList/ToolBarDate.vue
index 2f1ff1bc1..bc8389c54 100644
--- a/src/modules/09_leave/components/02_WorkList/ToolBarDate.vue
+++ b/src/modules/09_leave/components/02_WorkList/ToolBarDate.vue
@@ -16,9 +16,13 @@ const emit = defineEmits(["update:pagination"]);
 
 /** ตัวแปร filter*/
 const roleStatus = defineModel<string>("roleStatus", { required: true });
-const keyword = ref<string>("");
-const pagination = ref({
-  page: 1,
+const keyword = defineModel<string>("keyword", { required: true });
+
+const props = defineProps({
+  onSearchData: {
+    type: Function,
+    require: true,
+  },
 });
 
 const roleMainOp = ref<DataOption[]>([
@@ -28,16 +32,6 @@ const roleMainOp = ref<DataOption[]>([
 ]);
 const roleOp = ref<DataOption[]>(roleMainOp.value);
 
-/**
- * function updateProps
- * @param newPagination paging
- * @param keyword คำค้นหา
- */
-function updateProp(newPagination: any, keyword: string) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, 1, keyword);
-}
-
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
   const today = new Date();
@@ -45,9 +39,9 @@ function calculateMaxDate() {
   return today;
 }
 
-/** function ค้นหาข้อมูล แล้ว อัปเดท Props*/
+/** function ค้นหาข้อมูล */
 function filterFn() {
-  updateProp(pagination.value, keyword.value);
+  props.onSearchData?.();
 }
 
 /**
@@ -58,7 +52,7 @@ function filterFn() {
 function filterOptionFn(val: string, update: Function) {
   update(() => {
     roleOp.value = roleMainOp.value.filter(
-      (e: any) => e.name.search(val) !== -1
+      (e: DataOption) => e.name.search(val) !== -1
     );
   });
 }
@@ -66,7 +60,7 @@ function filterOptionFn(val: string, update: Function) {
 
 <template>
   <div class="row col-12 q-col-gutter-sm q-mb-sm">
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-6 col-md-2">
       <datepicker
         v-model="workStore.selectDate"
         :locale="'th'"
@@ -101,7 +95,7 @@ function filterOptionFn(val: string, update: Function) {
         </template>
       </datepicker>
     </div>
-    <div class="col-xs-12 col-sm-3 col-md-3">
+    <div class="col-xs-12 col-sm-6 col-md-3">
       <q-select
         for="selectStatus"
         emit-value
@@ -136,7 +130,7 @@ function filterOptionFn(val: string, update: Function) {
       </q-select>
     </div>
     <q-space />
-    <div class="col-xs-12 col-sm-3 col-md-2">
+    <div class="col-xs-12 col-sm-5 col-md-2">
       <q-input
         for="filterTable"
         dense
diff --git a/src/modules/09_leave/components/04_SpecialTime/Table.vue b/src/modules/09_leave/components/04_SpecialTime/Table.vue
deleted file mode 100644
index d42f0c916..000000000
--- a/src/modules/09_leave/components/04_SpecialTime/Table.vue
+++ /dev/null
@@ -1,239 +0,0 @@
-<script setup lang="ts">
-import { ref, useAttrs } from "vue";
-
-/** import Stoer*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
-
-const attrs = ref<any>(useAttrs());
-const SpecialTimeStore = useSpecialTimeStore();
-const mixin = useCounterMixin();
-
-const { date2Thai } = mixin;
-const { searchFilterTable } = SpecialTimeStore;
-
-/** props*/
-const props = defineProps({
-  count: Number,
-  pass: Number,
-  notpass: Number,
-
-  inputfilter: String,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  nornmalData: {
-    type: Boolean,
-    defualt: true,
-  },
-  conclude: {
-    type: Boolean,
-    defualt: false,
-  },
-});
-
-/**emit Function*/
-const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
-]);
-
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
-
-/** pagination*/
-const paging = ref<boolean>(true);
-const pagination = ref({
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-function paginationLabel(start: string, end: string, total: string) {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-}
-
-/**
- * function update filter
- * @param value คำค้นหา
- */
-function updateInput(value: string | number | null) {
-  emit("update:inputfilter", value);
-}
-
-/**
- * function updateVisible
- * @param value ค่า Visible
- */
-function updateVisible(value: []) {
-  emit("update:inputvisible", value);
-}
-
-function resetFilter() {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-}
-</script>
-<template>
-  <div class="q-pb-sm row q-col-gutter-sm">
-    <!--  -->
-    <div class="q-gutter-sm" v-if="nornmalData == true">
-      <datepicker
-        v-model="SpecialTimeStore.selectDate"
-        :locale="'th'"
-        autoApply
-        :enableTimePicker="false"
-        week-start="0"
-        @update:model-value="searchFilterTable(SpecialTimeStore.selectDate)"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            for="selectDate"
-            dense
-            outlined
-            :model-value="
-              SpecialTimeStore.selectDate !== null
-                ? date2Thai(SpecialTimeStore.selectDate)
-                : null
-            "
-            hide-bottom-space
-            :label="`${'วันที่'}`"
-          >
-            <template v-slot:prepend>
-              <q-icon name="event" class="cursor-pointer text-primary">
-              </q-icon>
-            </template>
-          </q-input>
-        </template>
-      </datepicker>
-    </div>
-    <q-space />
-    <!-- ค้นหาข้อความใน table -->
-    <q-input
-      standout
-      dense
-      :model-value="inputfilter"
-      ref="filterRef"
-      @update:model-value="updateInput"
-      outlined
-      placeholder="ค้นหา"
-      style="max-width: 200px"
-      class="col-xs-12 col-sm-3 col-md-2"
-    >
-      <template v-slot:append>
-        <q-icon v-if="inputfilter == ''" name="search" />
-        <q-icon
-          v-if="inputfilter !== ''"
-          name="clear"
-          class="cursor-pointer"
-          @click="resetFilter"
-        />
-      </template>
-    </q-input>
-    <!-- แสดงคอลัมน์ใน table -->
-    <q-select
-      :model-value="inputvisible"
-      @update:model-value="updateVisible"
-      :display-value="$q.lang.table.columns"
-      multiple
-      outlined
-      dense
-      :options="attrs.columns"
-      options-dense
-      option-value="name"
-      map-options
-      emit-value
-      style="min-width: 140px"
-      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
-    >
-      <template> </template>
-    </q-select>
-  </div>
-  <d-table
-    ref="table"
-    flat
-    v-bind="attrs"
-    virtual-scroll
-    :virtual-scroll-sticky-size-start="48"
-    dense
-    :pagination-label="paginationLabel"
-    v-model:pagination="pagination"
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium" v-html="col.label" />
-        </q-th>
-        <q-th auto-width />
-        <q-th auto-width />
-        <q-th auto-width v-if="nornmalData == true" />
-      </q-tr>
-    </template>
-    <template #body="props">
-      <slot v-bind="props" name="columns"></slot>
-    </template>
-  </d-table>
-</template>
-
-<style 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>
diff --git a/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue b/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
index 9cf589651..0cbfbb355 100644
--- a/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
+++ b/src/modules/09_leave/components/05_Leave/DetailLeavePage.vue
@@ -690,11 +690,9 @@ onMounted(async () => {
                 @click="
                   onClickDownloadFile(
                     formData.id,
-                    checkForm !== 'FormUpasom' && checkForm !== 'FormHajj'
-                      ? formData.leaveTypeName
-                      : formData.hajjDayStatus
-                      ? 'ลาประกอบพิธีฮัจญ์'
-                      : 'ลาอุปสมบท',
+                    formData.leaveSubTypeName
+                      ? formData.leaveSubTypeName
+                      : formData.leaveTypeName,
                     typeDocx
                   )
                 "
@@ -710,11 +708,9 @@ onMounted(async () => {
                 @click="
                   onClickDownloadFile(
                     formData.id,
-                    checkForm !== 'FormUpasom' && checkForm !== 'FormHajj'
-                      ? formData.leaveTypeName
-                      : formData.hajjDayStatus
-                      ? 'ลาประกอบพิธีฮัจญ์'
-                      : 'ลาอุปสมบท',
+                    formData.leaveSubTypeName
+                      ? formData.leaveSubTypeName
+                      : formData.leaveTypeName,
                     typePdf
                   )
                 "
diff --git a/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue b/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
index 5bc690811..433a39f6d 100644
--- a/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
+++ b/src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
@@ -504,7 +504,9 @@ onMounted(async () => {
                 @click="
                   onClickDownloadFile(
                     formData.id,
-                    'ยกเลิก' + formData.leaveTypeName,
+                    'ยกเลิก' + formData.leaveSubTypeName
+                      ? formData.leaveSubTypeName
+                      : formData.leaveTypeName,
                     typeDocx
                   )
                 "
@@ -520,7 +522,9 @@ onMounted(async () => {
                 @click="
                   onClickDownloadFile(
                     formData.id,
-                    'ยกเลิก' + formData.leaveTypeName,
+                    'ยกเลิก' + formData.leaveSubTypeName
+                      ? formData.leaveSubTypeName
+                      : formData.leaveTypeName,
                     typePdf
                   )
                 "
diff --git a/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
index 70621f169..384253293 100644
--- a/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
+++ b/src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
@@ -5,29 +5,32 @@ import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type { QTableColumn } from "quasar";
-import type {
-  DataOption,
-  DataPagination,
-} from "@/modules/09_leave/interface/index/Main";
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 import type {
   DataLeaveType,
   DataLeaveBeginning,
 } from "@/modules/09_leave/interface/response/leaveHistory";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import { max } from "moment";
 
 /** useStore*/
 const $q = useQuasar();
+const route = useRoute();
 const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
-const { findYear } = useLeaveHistoryDataStore();
 const { dialogConfirm, showLoader, success, messageError, hideLoader } =
   useCounterMixin();
+
+const { pagination, params, onRequest } = usePagination("", () =>
+  onSearchData(false)
+);
+
 const modal = defineModel<boolean>("modal", { required: true });
 const isStatusEdit = defineModel<boolean>("isStatusEdit", { required: true });
 const rowData = defineModel<DataLeaveBeginning>("rowData", {
@@ -42,18 +45,13 @@ const formFilter = reactive({
   citizenId: "",
   type: "citizenId",
   keyword: "",
-  page: 1,
-  pageSize: 10,
 });
 const searchTypeOption = ref<DataOption[]>([
   { id: "citizenId", name: "เลขประจำตัวประชาชน" },
-  { id: "firstName", name: "ชื่อ" },
-  { id: "lastName", name: "นามสกุล" },
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
 ]);
 const rows = ref<DataLeaveBeginning[]>([]);
 const selected = ref<DataLeaveBeginning[]>([]);
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
 const columns = ref<QTableColumn[]>([
   {
     name: "citizenId",
@@ -65,13 +63,16 @@ const columns = ref<QTableColumn[]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
     field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format(val, row) {
+      return `${row.prefix || ""}${row.firstName || ""} ${row.lastName || ""}`;
+    },
   },
 ]);
 
@@ -96,9 +97,7 @@ async function onSubmit() {
       : `${config.API.leaveBeginning}/${rowId.value}`;
     const method = !isStatusEdit.value ? "post" : "put";
     await http[method](pathAPI, {
-      profileId: !isStatusEdit.value
-        ? selected.value[0].profileId
-        : profileId.value,
+      profileId: !isStatusEdit.value ? selected.value[0].id : profileId.value,
       leaveTypeId: formData.leaveTypeId,
       leaveYear: formData.leaveYear,
       leaveDays: formData.leaveDays ? Number(formData.leaveDays) : 0,
@@ -123,25 +122,24 @@ async function onSubmit() {
 
 /** ฟังก์ชันเรียกรายชื่อคน*/
 async function fetchDataPerson() {
-  await http
-    .post(config.API.leaveSearch(), {
-      citizenId:
-        formFilter.type === "citizenId" ? formFilter.keyword.trim() : "", //เลขประจำตัวประชาชน
-      firstname:
-        formFilter.type === "firstName" ? formFilter.keyword.trim() : "", //ชื่อจริง
-      lastname: formFilter.type === "lastName" ? formFilter.keyword.trim() : "", //นามสกุล
-      page: formFilter.page, //หน้า
-      pageSize: formFilter.pageSize || 10, //จำนวนแถวต่อหน้า
-    })
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data.data;
-      total.value = data.total;
-      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
+  try {
+    const res = await http.post(
+      config.API.orgSearchPersonal(),
+      {
+        fieldName: formFilter.type,
+        keyword: formFilter.keyword.trim(),
+        system: (route.meta?.Key as string) || undefined,
+      },
+      {
+        params: params.value,
+      }
+    );
+    const result = res.data.result;
+    pagination.value.rowsNumber = result.total;
+    rows.value = result.data;
+  } catch (e) {
+    messageError($q, e);
+  }
 }
 
 /**
@@ -168,7 +166,7 @@ async function onSearchData(newSearch: boolean) {
   try {
     showLoader();
     if (newSearch) {
-      formFilter.page = 1;
+      pagination.value.page = 1;
     }
     await fetchDataPerson();
   } finally {
@@ -176,28 +174,25 @@ async function onSearchData(newSearch: boolean) {
   }
 }
 
-/**
- * ฟังก์ชันอัปเดทรายการแถวต่อหน้า
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: DataPagination) {
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
 /** ฟังก์ชันปิด Dialog*/
 function onClose() {
   modal.value = false;
   formFilter.citizenId = "";
   formFilter.type = "citizenId";
   formFilter.keyword = "";
-  formFilter.page = 1;
-  formFilter.pageSize = 10;
   formData.leaveTypeId = "";
   formData.leaveYear = calculateFiscalYear(new Date());
   formData.leaveDays = "";
   formData.leaveDaysUsed = "";
   rows.value = [];
   selected.value = [];
+  pagination.value = {
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+    sortBy: "",
+    descending: false,
+  };
 }
 
 /**
@@ -243,14 +238,6 @@ function classInput(val: boolean) {
   };
 }
 
-/** Hook*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    modal.value && onSearchData(true);
-  }
-);
-
 watch(modal, async (val) => {
   if (val) {
     try {
@@ -259,8 +246,6 @@ watch(modal, async (val) => {
         filterLeaveTypeData(),
         isStatusEdit.value && defineDataLeaveBeginning(rowData.value),
       ]);
-    } catch (error) {
-      console.log(error);
     } finally {
       hideLoader();
     }
@@ -278,10 +263,14 @@ watch(modal, async (val) => {
         />
         <q-separator />
 
-        <q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
-          <div class="row col-12 q-gutter-sm">
+        <q-card-section
+          :horizontal="$q.screen.gt.md"
+          class="q-pa-none"
+          style="height: 50vh"
+        >
+          <div class="row col-12 no-wrap full-height">
             <!-- รายชื่อ -->
-            <div class="q-pa-md col-md-8 col-xs-12" v-if="!isStatusEdit">
+            <div class="col-8 overflow-auto q-pa-md" v-if="!isStatusEdit">
               <div class="row q-col-gutter-sm">
                 <div class="col-12 col-sm-6 col-md-3">
                   <q-select
@@ -321,11 +310,11 @@ watch(modal, async (val) => {
               </div>
 
               <div class="col-12 q-pt-sm">
-                <d-table
+                <p-table
                   ref="table"
                   :columns="columns"
                   :rows="rows"
-                  row-key="profileId"
+                  row-key="id"
                   flat
                   bordered
                   :paging="true"
@@ -333,7 +322,8 @@ watch(modal, async (val) => {
                   :rows-per-page-options="[10, 25, 50, 100]"
                   selection="single"
                   v-model:selected="selected"
-                  @update:pagination="updatePagination"
+                  v-model:pagination="pagination"
+                  @request="onRequest"
                 >
                   <template v-slot:header="props">
                     <q-tr :props="props">
@@ -369,29 +359,14 @@ watch(modal, async (val) => {
                       </q-td>
                     </q-tr>
                   </template>
-
-                  <template v-slot:pagination="scope">
-                    ทั้งหมด {{ total.toLocaleString() }} รายการ
-                    <q-pagination
-                      v-model="formFilter.page"
-                      active-color="primary"
-                      color="dark"
-                      :max="Number(maxPage)"
-                      size="sm"
-                      boundary-links
-                      direction-links
-                      :max-pages="5"
-                      @update:model-value="onSearchData(false)"
-                    ></q-pagination>
-                  </template>
-                </d-table>
+                </p-table>
               </div>
             </div>
 
             <q-separator vertical />
 
             <!-- input -->
-            <div class="q-pa-md col">
+            <div class="col overflow-hidden q-pa-md">
               <div class="row q-col-gutter-sm">
                 <div class="col-12">
                   <datepicker
diff --git a/src/modules/09_leave/interface/index/Main.ts b/src/modules/09_leave/interface/index/Main.ts
index ff9221e9f..41766e80f 100644
--- a/src/modules/09_leave/interface/index/Main.ts
+++ b/src/modules/09_leave/interface/index/Main.ts
@@ -18,4 +18,62 @@ interface DataPagination {
   rowsPerPage: number;
   sortBy: string;
 }
-export type { DataOption, DataOption2, DataDateMonthObject, DataPagination };
+
+interface DataWorkList {
+  checkInDate: string;
+  checkInLat: number;
+  checkInLocation: string;
+  checkInLon: number;
+  checkInStatus: string;
+  checkInTime: string;
+  checkOutDate: string;
+  checkOutLat: number;
+  checkOutLocation: string;
+  checkOutLon: number;
+  checkOutStatus: string;
+  checkOutTime: string;
+  fullName: string;
+  id: string;
+  profileType: string;
+}
+
+interface DataSpecialTime {
+  checkDate: string;
+  checkIn: string;
+  checkInEdit: boolean;
+  checkInStatus: string;
+  checkInTime: string;
+  checkOut: string;
+  checkOutEdit: boolean;
+  checkOutStatus: string;
+  checkOutTime: string;
+  createdAt: string;
+  date: string;
+  dateFix: string;
+  description: string;
+  endTimeAfternoon: string;
+  endTimeMorning: string;
+  firstName: string;
+  fullName: string;
+  id: string;
+  lastName: string;
+  latitude: number;
+  longitude: number;
+  poi: string;
+  prefix: string;
+  reason: string;
+  startTimeAfternoon: string;
+  startTimeMorning: string;
+  status: string;
+  statusSort: number;
+  timeAfternoon: string;
+  timeMorning: string;
+}
+export type {
+  DataOption,
+  DataOption2,
+  DataDateMonthObject,
+  DataPagination,
+  DataWorkList,
+  DataSpecialTime,
+};
diff --git a/src/modules/09_leave/stores/ChangeRoundStore.ts b/src/modules/09_leave/stores/ChangeRoundStore.ts
index 0a6706079..eda800a4f 100644
--- a/src/modules/09_leave/stores/ChangeRoundStore.ts
+++ b/src/modules/09_leave/stores/ChangeRoundStore.ts
@@ -43,7 +43,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "cardId",
         align: "left",
         label: "เลขประจำตัวประชาชน",
-        sortable: true,
+        sortable: false,
         field: "cardId",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -52,7 +52,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "fullName",
         align: "left",
         label: "ชื่อ-นามสกุล",
-        sortable: true,
+        sortable: false,
         field: "fullName",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -61,7 +61,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "currentRound",
         align: "left",
         label: "รอบปัจจุบัน",
-        sortable: true,
+        sortable: false,
         field: "currentRound",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -70,7 +70,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "effectiveDate",
         align: "left",
         label: "วันที่มีผล",
-        sortable: true,
+        sortable: false,
         field: "effectiveDate",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -81,7 +81,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "round",
         align: "left",
         label: "ครั้งที่",
-        sortable: true,
+        sortable: false,
         field: "round",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -90,7 +90,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "time",
         align: "left",
         label: "รอบเวลา",
-        sortable: true,
+        sortable: false,
         field: "time",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -99,7 +99,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "effectiveDate",
         align: "left",
         label: "วันที่มีผล",
-        sortable: true,
+        sortable: false,
         field: "effectiveDate",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
@@ -108,7 +108,7 @@ export const useChangeRoundDataStore = defineStore(
         name: "reson",
         align: "left",
         label: "เหตุผล",
-        sortable: true,
+        sortable: false,
         field: "reson",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
diff --git a/src/modules/09_leave/stores/SpecialTimeStore.ts b/src/modules/09_leave/stores/SpecialTimeStore.ts
index 5cdb002e0..4196c93b6 100644
--- a/src/modules/09_leave/stores/SpecialTimeStore.ts
+++ b/src/modules/09_leave/stores/SpecialTimeStore.ts
@@ -1,142 +1,9 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import type { QTableProps } from "quasar";
-import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
 
-import { useCounterMixin } from "@/stores/mixin";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const mixin = useCounterMixin();
-const { date2Thai, showLoader, hideLoader } = mixin;
 
 export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
-  const rows = ref<any[]>([]);
-  const selectDate = ref<Date | null>(new Date());
-  const fiscalYear = ref<string | null>("0");
-  const DataMainOrig = ref<DataRows[]>([]); // ข้อมูลหลักดั้งเดิม
-  const DataMainUpdate = ref<DataRows[]>([]); // ข้อมูลเปลี่ยนแปลง
-  const DataMain = (val: DataRows[]) => (DataMainOrig.value = val);
-  const DataUpdate = (filterYear: string) => {
-    DataMainUpdate.value = [];
-    if (filterYear === "") {
-      DataMainUpdate.value = DataMainOrig.value;
-    }
-  };
-  const checkInStatus = ref<String>("ปกติ");
-  const checkOutStatus = ref<String>("ปกติ");
-
-  // paging
-  const toDay = ref<Date>(new Date());
-  const monthToday = toDay.value.getMonth();
-  const yearToday = toDay.value.getFullYear();
-  console.log(monthToday + 1);
-
-  const month = ref<number>(monthToday + 1);
-  const year = ref<number>(yearToday);
-  const page = ref<number>(1);
-  const total = ref<number>(0);
-  const pageSize = ref<number>(10);
-  const filter = ref<string>(""); //search data table
-  const maxPage = ref<number>(0);
-
-  /**
-   * ฟังชั้นเรียกดูข้อมูล
-   */
-  const fetchData = async () => {
-    showLoader();
-    await http
-      .get(
-        config.API.specialTime() +
-          `?year=${year.value}&month=${month.value}&page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
-      )
-      .then(async (res) => {
-        let data = res.data.result.data;
-        total.value = res.data.result.total;
-        maxPage.value = await Math.ceil(total.value / pageSize.value);
-        rows.value = [];
-        data.map((e: any) => {
-          rows.value.push({
-            id: e.id,
-            fullname: e.fullName,
-            date: date2Thai(new Date(e.createdAt), false, true),
-            dateFix: date2Thai(new Date(e.checkDate)),
-            timeMorning:
-              e.startTimeMorning == null
-                ? "-"
-                : e.checkInEdit == true
-                ? e.startTimeMorning + " - " + e.endTimeMorning
-                : "-",
-            timeAfternoon:
-              e.startTimeAfternoon == null
-                ? "-"
-                : e.checkOutEdit == true
-                ? e.startTimeAfternoon + " - " + e.endTimeAfternoon
-                : "-",
-            startTimeMorning: e.startTimeMorning,
-            endTimeMorning: e.endTimeMorning,
-            startTimeAfternoon: e.startTimeAfternoon,
-            endTimeAfternoon: e.endTimeAfternoon,
-            checkIn: e.checkInTime,
-            checkOut: e.checkOutTime,
-            status: e.status,
-            checkInStatus: convertStatus(e.checkInStatus),
-            checkOutStatus: convertStatus(e.checkOutStatus),
-            reason: e.reason,
-            description: e.description,
-            checkInEdit: e.checkInEdit,
-            checkOutEdit: e.checkOutEdit,
-          });
-        });
-      })
-      .catch((e) => {
-        console.log(e);
-      })
-      .finally(() => {
-        hideLoader();
-        console.log(month.value);
-      });
-  };
-
-  /**
-   * ฟังก์ชั่น api เปลี่ยนหน้า
-   * @param pageVal page
-   * @param pageSizeVal pagesize
-   */
-  async function changePage(pageVal: number, pageSizeVal: number) {
-    page.value = await pageVal;
-    pageSize.value = await pageSizeVal;
-    console.log(pageSize.value);
-
-    fetchData();
-    console.log("page");
-  }
-
-  //--------------|ฟิลเตอร์|--------------------------------------//
-  const searchFilterTable = async (searchDate: any) => {
-    rows.value = [];
-
-    if (fiscalYear.value !== undefined && searchDate.value !== null) {
-      await DataUpdate(searchDate.value === "0" ? "all" : searchDate.value!);
-      let filteredData = DataMainOrig.value;
-      if (searchDate.value !== "0") {
-        filteredData = filteredData.filter(
-          (item: DataRows) => item.date === searchDate.value
-        );
-        console.log(searchDate.value);
-      }
-      const dataArr = filteredData.map((e: any) => ({
-        fullname: e.fullname,
-        date: date2Thai(new Date(e.date)),
-        dateFix: date2Thai(new Date(e.dateFix)) + (e.timeStamp || ""),
-        type: e.type,
-        reason: e.reason,
-        timeStamp: e.timeStamp,
-      }));
-      rows.value = dataArr;
-    }
-  };
   const optionStatus = ref<DataOption[]>([
     { id: "NORMAL", name: "ปกติ" },
     { id: "LATE", name: "สาย" },
@@ -144,82 +11,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     { id: "NOT_COMPLETE", name: "ปฏิบัติงานไม่ครบตามกำหนดเวลา" },
   ]);
 
-  const visibleColumns = ref<String[]>([
-    "no",
-    "fullname",
-    "date",
-    "dateFix",
-    "timeMorning",
-    "timeAfternoon",
-    "description",
-  ]);
-
-  const columns = ref<QTableProps["columns"]>([
-    {
-      name: "no",
-      align: "center",
-      label: "ลำดับ",
-      sortable: false,
-      field: "no",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "fullname",
-      align: "left",
-      label: "ชื่อ-นามสกุล",
-      sortable: true,
-      field: "fullname",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "date",
-      align: "left",
-      label: "วันที่ยื่นเรื่อง",
-      sortable: true,
-      field: "date",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "dateFix",
-      align: "left",
-      label: "วันที่ขอแก้ไข",
-      sortable: true,
-      field: "dateFix",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "timeMorning",
-      align: "left",
-      label: "ช่วงเช้า",
-      sortable: true,
-      field: "timeMorning",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "timeAfternoon",
-      align: "left",
-      label: "ช่วงบ่าย",
-      sortable: true,
-      field: "timeAfternoon",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-    {
-      name: "description",
-      align: "left",
-      label: "เหตุผล",
-      sortable: true,
-      field: "description",
-      headerStyle: "font-size: 14px",
-      style: "font-size: 14px",
-    },
-  ]);
-
   // convertSatatus
   function convertStatus(val: string) {
     const value = val ? val.toUpperCase() : null;
@@ -236,26 +27,7 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   }
 
   return {
-    // fecthList,
-    rows,
-    visibleColumns,
-    columns,
-    DataMain,
-    searchFilterTable,
-    selectDate,
-    checkInStatus,
-    checkOutStatus,
     optionStatus,
-    fetchData,
-    changePage,
-    total,
-    maxPage,
-    year,
-    page,
-    pageSize,
-    month,
-    filter,
     convertStatus,
-    // changeMonth,
   };
 });
diff --git a/src/modules/09_leave/stores/WorkStore.ts b/src/modules/09_leave/stores/WorkStore.ts
index 934190c14..2b3d0a5eb 100644
--- a/src/modules/09_leave/stores/WorkStore.ts
+++ b/src/modules/09_leave/stores/WorkStore.ts
@@ -6,11 +6,13 @@ import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 import type { FormDetail } from "@/modules/09_leave/interface/response/work";
 
-
 export const useWorklistDataStore = defineStore("work", () => {
+  /** รายการลงเวลาปฏิบัติงาน */
+  const tabs = ref<string>("1");
+
   /** ข้อมูล Table */
-  const mixin = useCounterMixin()
-  const { date2Thai } = mixin
+  const mixin = useCounterMixin();
+  const { date2Thai } = mixin;
   const columns = ref<QTableProps["columns"]>([]);
   const visibleColumns = ref<string[]>([]);
 
@@ -95,11 +97,12 @@ export const useWorklistDataStore = defineStore("work", () => {
     formData.checkOutLocationName = data.checkOutLocationName;
   }
   return {
+    tabs,
     columns,
     visibleColumns,
     selectDate,
     convertSatatus,
     getData,
-    formData
+    formData,
   };
 });
diff --git a/src/modules/09_leave/views/02_WorkingMain.vue b/src/modules/09_leave/views/02_WorkingMain.vue
index 5294527d8..99387a4bb 100644
--- a/src/modules/09_leave/views/02_WorkingMain.vue
+++ b/src/modules/09_leave/views/02_WorkingMain.vue
@@ -1,65 +1,50 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, toRefs } from "vue";
+
+import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 /** import Components */
 import Tab1 from "@/modules/09_leave/components/02_WorkList/Tab1.vue";
 import Tab2 from "@/modules/09_leave/components/02_WorkList/Tab2.vue";
 
-const tab = ref("1");
+const stores = useWorklistDataStore();
 
-const modalReport = ref<boolean>(false);
-
-function onClickOpenDialog() {
-  modalReport.value = !modalReport.value;
-}
+const { tabs } = toRefs(stores);
 </script>
+
 <template>
   <div class="row">
     <span class="toptitle text-dark item-center">รายการลงเวลาปฏิบัติงาน</span>
-    <q-space />
-    <!-- <q-btn
+  </div>
+
+  <q-card bordered flat>
+    <q-tabs
+      v-model="tabs"
       dense
-      flat
-      class="text-blue"
-      label="รายงานสถิติการลงเวลา"
-      @click="onClickOpenDialog"
+      align="left"
+      inline-label
+      class="rounded-borders"
+      indicator-color="primary"
+      active-bg-color="teal-1"
+      active-class="text-primary"
     >
-      <q-tooltip>รายงานสถิติการลงเวลา</q-tooltip>
-    </q-btn> -->
-  </div>
+      <q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
+      <q-tab name="2" label="รายการลงเวลา" />
+    </q-tabs>
 
-  <div>
-    <q-card bordered flat>
-      <q-tabs
-        v-model="tab"
-        dense
-        align="left"
-        inline-label
-        class="rounded-borders"
-        indicator-color="primary"
-        active-bg-color="teal-1"
-        active-class="text-primary"
-      >
-        <q-tab name="1" label="รายการลงเวลาที่ประมวลผลแล้ว" />
-        <q-tab name="2" label="รายการลงเวลา" />
-      </q-tabs>
+    <q-separator />
+    <div class="q-pa-sm">
+      <q-tab-panels v-model="tabs" animated>
+        <q-tab-panel name="1">
+          <Tab1 />
+        </q-tab-panel>
 
-      <q-separator />
-      <div class="q-pa-sm">
-        <q-tab-panels v-model="tab" animated>
-          <q-tab-panel name="1">
-            <Tab1 />
-          </q-tab-panel>
-
-          <q-tab-panel name="2">
-            <Tab2 />
-          </q-tab-panel>
-        </q-tab-panels>
-      </div>
-    </q-card>
-  </div>
-
-  <!-- <DialogReport :modal="modalReport" :close="onClickOpenDialog" /> -->
+        <q-tab-panel name="2">
+          <Tab2 />
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </q-card>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/09_leave/views/04_SpecialTimeMain.vue b/src/modules/09_leave/views/04_SpecialTimeMain.vue
index c42e389cb..be1b14aa2 100644
--- a/src/modules/09_leave/views/04_SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/04_SpecialTimeMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
 
@@ -8,11 +8,10 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
 import { checkPermission } from "@/utils/permissions";
+import { usePagination } from "@/composables/usePagination";
 
-import type {
-  DataDateMonthObject,
-  DetailData,
-} from "@/modules/09_leave/interface/request/specialTime";
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
+import type { DataSpecialTime } from "@/modules/09_leave/interface/index/Main";
 
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
 import DialogApprove from "@/modules/09_leave/components/04_SpecialTime/DialogApprove.vue";
@@ -29,20 +28,22 @@ const {
   date2Thai,
   dialogConfirm,
 } = mixin;
+const { pagination, params, onRequest } = usePagination("", fetchData);
+
 const emit = defineEmits(["update:change-page"]);
-const rows = ref<any[]>([]);
+
 const toDay = ref<Date>(new Date());
 const monthToday = toDay.value.getMonth();
 const yearToday = toDay.value.getFullYear();
 
 const month = ref<number>(monthToday + 1);
 const year = ref<number>(yearToday);
-const description = ref<string>('')
+const description = ref<string>("");
 
 /**ตัวแปรที่ใช้ */
 const modalUnapprove = ref<boolean>(false);
 const modalApprove = ref<boolean>(false);
-const detailData = ref<DetailData[]>([]);
+const detailData = ref<DataSpecialTime>();
 const editCheck = ref<string>("");
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
@@ -58,26 +59,16 @@ const dateMonth = ref<DataDateMonthObject>({
   year: new Date().getFullYear(),
 });
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
-
+const rows = ref<DataSpecialTime[]>([]);
 const visibleColumns = ref<String[]>([
   "no",
-  "fullname",
-  "date",
-  "dateFix",
-  "timeMorning",
-  "timeAfternoon",
+  "fullName",
+  "createdAt",
+  "checkDate",
+  "startTimeMorning",
+  "startTimeAfternoon",
   "description",
 ]);
 const columns = ref<QTableProps["columns"]>([
@@ -91,16 +82,16 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "fullName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: "fullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "date",
+    name: "createdAt",
     align: "left",
     label: "วันที่ยื่นเรื่อง",
     sortable: true,
@@ -109,7 +100,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "dateFix",
+    name: "checkDate",
     align: "left",
     label: "วันที่ขอแก้ไข",
     sortable: true,
@@ -118,7 +109,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "timeMorning",
+    name: "startTimeMorning",
     align: "left",
     label: "ช่วงเช้า",
     sortable: true,
@@ -127,7 +118,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "timeAfternoon",
+    name: "startTimeAfternoon",
     align: "left",
     label: "ช่วงบ่าย",
     sortable: true,
@@ -146,6 +137,54 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/** ฟังก์ชั่นเรียกดูข้อมูลรายการลงเวลากรณีพิเศษ */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.specialTime(), {
+      params: {
+        ...params.value,
+        year: year.value,
+        month: month.value,
+        keyword: filterKeyword.value.trim(),
+      },
+    })
+    .then(async (res) => {
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      if (result.data.length > 0) {
+        rows.value = result.data.map((e: DataSpecialTime) => ({
+          ...e,
+          date: date2Thai(new Date(e.createdAt), false, true),
+          dateFix: date2Thai(new Date(e.checkDate)),
+          timeMorning:
+            e.startTimeMorning == null
+              ? "-"
+              : e.checkInEdit == true
+              ? e.startTimeMorning + " - " + e.endTimeMorning
+              : "-",
+          timeAfternoon:
+            e.startTimeAfternoon == null
+              ? "-"
+              : e.checkOutEdit == true
+              ? e.startTimeAfternoon + " - " + e.endTimeAfternoon
+              : "-",
+          checkIn: e.checkInTime,
+          checkOut: e.checkOutTime,
+          checkInStatus: store.convertStatus(e.checkInStatus),
+          checkOutStatus: store.convertStatus(e.checkOutStatus),
+        }));
+      }
+    })
+    .catch((e) => {
+      rows.value = [];
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * ฟังก์ชั่นไม่อนุมัติ
  * @param fullname ชื่อ
@@ -158,43 +197,39 @@ async function unapprove(fullname: string, personId: string) {
   modalUnapprove.value = true;
 }
 
-/** function openDialog */
-function openModal(
-  data: any,
-  check: string,
-  date: string,
-  dateFix: string,
-  personId: string,
-  detail: string,
-) {
-  id.value = personId;
+/**
+ *  ฟังก์ชั่นอนุมัติ
+ * @param data ข้อมูล
+ */
+function openModal(data: DataSpecialTime) {
+  id.value = data.id;
+  dateDialog.value = data.date;
+  description.value = data.description;
+  dateFixDialog.value = data.dateFix;
+  editCheck.value = data.status;
+  detailData.value = data;
   modalApprove.value = true;
-  dateDialog.value = date;
-  description.value= detail
-  dateFixDialog.value = dateFix;
-  editCheck.value = check;
-  if (check === "PENDING") {
-    detailData.value = data;
-  }
 }
 
-/** function closeDialog */
+/** ฟังก์ชั่นปิด Dialog */
 function closeDialog() {
   modalUnapprove.value = false;
   modalApprove.value = false;
-  description.value = '';
+  description.value = "";
   editCheck.value = "PENDING";
 }
 
-/** API reject */
+/**
+ * ฟังก์ชั่นบันทึกข้อมูลไม่อนุมัติ
+ * @param reason เหตุผลที่ไม่อนุมัติ
+ */
 async function clickSave(reason: string) {
   dialogConfirm($q, async () => {
     showLoader();
-    const body = {
-      reason: reason,
-    };
     await http
-      .put(config.API.specialTimeReject(id.value), body)
+      .put(config.API.specialTimeReject(id.value), {
+        reason: reason,
+      })
       .then(async () => {
         await fetchData();
         success($q, "บันทึกข้อมูลสำเร็จ");
@@ -219,97 +254,22 @@ async function updateMonth(e: DataDateMonthObject) {
     dateYear.value = year.value;
     month.value = dateMonth.value.month + 1;
     year.value = dateMonth.value.year;
-    getSearch();
+    onSearchData();
   }
 }
 
 //แปลงเดือนเป็นไทย
-function monthYearThai(val: any) {
+function monthYearThai(val: DataDateMonthObject) {
   if (val == null) return "";
   else return monthYear2Thai(val.month, val.year);
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-function getSearch() {
+/** ฟังก์ชั่นค้นหาข้อมูล */
+function onSearchData() {
   pagination.value.page = 1;
   fetchData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
-/**
- * ฟังชั้นเรียกดูข้อมูล
- */
-async function fetchData() {
-  showLoader();
-  await http
-    .get(
-      config.API.specialTime() +
-        `?year=${year.value}&month=${month.value}&page=${
-          pagination.value.page
-        }&pageSize=${
-          pagination.value.rowsPerPage
-        }&keyword=${filterKeyword.value.trim()}`
-    )
-    .then(async (res) => {
-      let data = await res.data.result.data;
-      total.value = res.data.result.total;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      rows.value = [];
-      data.map((e: any) => {
-        rows.value.push({
-          id: e.id,
-          fullname: e.fullName,
-          date: date2Thai(new Date(e.createdAt), false, true),
-          dateFix: date2Thai(new Date(e.checkDate)),
-          timeMorning:
-            e.startTimeMorning == null
-              ? "-"
-              : e.checkInEdit == true
-              ? e.startTimeMorning + " - " + e.endTimeMorning
-              : "-",
-          timeAfternoon:
-            e.startTimeAfternoon == null
-              ? "-"
-              : e.checkOutEdit == true
-              ? e.startTimeAfternoon + " - " + e.endTimeAfternoon
-              : "-",
-          startTimeMorning: e.startTimeMorning,
-          endTimeMorning: e.endTimeMorning,
-          startTimeAfternoon: e.startTimeAfternoon,
-          endTimeAfternoon: e.endTimeAfternoon,
-          checkIn: e.checkInTime,
-          checkOut: e.checkOutTime,
-          status: e.status,
-          checkInStatus: store.convertStatus(e.checkInStatus),
-          checkOutStatus: store.convertStatus(e.checkOutStatus),
-          reason: e.reason,
-          description: e.description,
-          checkInEdit: e.checkInEdit,
-          checkOutEdit: e.checkOutEdit,
-        });
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /**Hook */
 onMounted(async () => {
   //อัพเดทเป็นวันปัจจุบันเมื่อเข้าหน้านี้
@@ -326,9 +286,10 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการลงเวลากรณีพิเศษ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+
+  <q-card flat bordered class="col-12 q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div class="q-gutter-sm">
+      <div class="col-xs-12 col-sm-3 col-md-2">
         <datepicker
           v-model="dateMonth"
           :locale="'th'"
@@ -347,7 +308,6 @@ onMounted(async () => {
               dense
               outlined
               hide-bottom-space
-              style="width: 130px"
             >
               <template v-slot:prepend>
                 <q-icon
@@ -363,39 +323,38 @@ onMounted(async () => {
       </div>
 
       <q-space />
+      <div class="col-xs-12 col-sm-3 col-md-2">
+        <q-input
+          standout
+          dense
+          v-model="filterKeyword"
+          outlined
+          placeholder="ค้นหาชื่อ-นามสกุล"
+          @keydown.enter.prevent="onSearchData()"
+        >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </div>
 
-      <q-input
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหาชื่อ-นามสกุล"
-        @keydown.enter.prevent="getSearch()"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </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"
-        style="min-width: 140px"
-        class="col-xs-12 col-sm-3 col-md-2"
-      />
+      <div class="col-xs-12 col-sm-3 col-md-2">
+        <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"
+        />
+      </div>
     </div>
     <div class="col-12">
-      <d-table
+      <p-table
         :columns="columns"
         :rows="rows"
         row-key="id"
@@ -405,7 +364,8 @@ onMounted(async () => {
         dense
         :visible-columns="visibleColumns"
         :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
+        v-model:pagination="pagination"
+        @request="onRequest"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -428,7 +388,7 @@ onMounted(async () => {
                 class="q-px-md"
                 dense
                 unelevated
-                @click="unapprove(props.row.fullname, props.row.id)"
+                @click="unapprove(props.row.fullName, props.row.id)"
                 >ไม่อนุมัติ</q-btn
               >
               <q-btn
@@ -441,18 +401,10 @@ onMounted(async () => {
                 class="q-px-md q-ml-sm"
                 dense
                 unelevated
-                @click="
-                  openModal(
-                    props.row,
-                    'PENDING',
-                    props.row.date,
-                    props.row.dateFix,
-                    props.row.id,
-                    props.row.description
-                  )
-                "
-                >อนุมัติ</q-btn
+                @click="openModal(props.row)"
               >
+                อนุมัติ
+              </q-btn>
 
               <q-badge
                 v-if="props.row.status == 'APPROVE'"
@@ -471,11 +423,7 @@ onMounted(async () => {
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
-                {{
-                  (pagination.page - 1) * pagination.rowsPerPage +
-                  props.rowIndex +
-                  1
-                }}
+                {{ props.rowIndex + 1 }}
               </div>
               <div
                 v-else-if="col.name === 'description'"
@@ -489,22 +437,7 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
-
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="fetchData()"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 
diff --git a/src/modules/09_leave/views/07_LeaveHistoryMain.vue b/src/modules/09_leave/views/07_LeaveHistoryMain.vue
index 4c511a799..ffd20cb79 100644
--- a/src/modules/09_leave/views/07_LeaveHistoryMain.vue
+++ b/src/modules/09_leave/views/07_LeaveHistoryMain.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { reactive, ref, onMounted, watch } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveHistoryDataStore } from "@/modules/09_leave/stores/LeaveHistoryStore";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type { QTableColumn } from "quasar";
-import type { DataPagination } from "@/modules/09_leave/interface/index/Main";
 import type {
   DataLeaveType,
   DataLeaveBeginning,
@@ -22,22 +21,21 @@ import DialogForm from "@/modules/09_leave/components/07_LeaveHistory/DialogForm
 
 const $q = useQuasar();
 const { leaveTypeData } = storeToRefs(useLeaveHistoryDataStore());
-const { findYear } = useLeaveHistoryDataStore();
 const { showLoader, hideLoader, messageError, dialogRemove, success } =
   useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  () => onSearchData(false)
+);
 
 const formFilter = reactive({
   year: calculateFiscalYear(new Date()),
   type: "00000000-0000-0000-0000-000000000000",
-  page: 1,
-  pageSize: 10,
   keyword: "",
 });
 const leaveTypeOptions = ref<DataLeaveType[]>([]);
 
 const rows = ref<DataLeaveBeginning[]>([]);
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
 const columns = ref<QTableColumn[]>([
   {
     name: "fullName",
@@ -122,13 +120,13 @@ async function fetchDataLeaveBeginning() {
   await http
     .post(config.API.leaveBeginning + `/list`, {
       ...formFilter,
+      ...params.value,
       keyword: formFilter.keyword.trim(),
     })
     .then((res) => {
-      const data = res.data.result;
-      rows.value = data.data;
-      total.value = data.total;
-      maxPage.value = Math.ceil(data.total / formFilter.pageSize);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -143,7 +141,7 @@ async function onSearchData(newSearch: boolean = true) {
   try {
     showLoader();
     if (newSearch) {
-      formFilter.page = 1;
+      pagination.value.page = 1;
     }
     await fetchDataLeaveBeginning();
   } finally {
@@ -188,11 +186,7 @@ function onDeleteLeaveBeginning(id: string) {
     await http
       .delete(config.API.leaveBeginning + `/${id}`)
       .then(async () => {
-        formFilter.page = await updateCurrentPage(
-          formFilter.page,
-          maxPage.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
         await fetchDataLeaveBeginning();
         success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -205,29 +199,11 @@ function onDeleteLeaveBeginning(id: string) {
   });
 }
 
-/**
- * ฟังก์ชันอัปเดทรายการแถวต่อหน้า
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: DataPagination) {
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-/** Hook*/
-watch(
-  () => formFilter.pageSize,
-  () => {
-    onSearchData(true);
-  }
-);
-
 onMounted(async () => {
   try {
     showLoader();
     await fetchLeaveType();
     await fetchDataLeaveBeginning();
-  } catch (error) {
-    console.log(error);
   } finally {
     hideLoader();
   }
@@ -242,67 +218,69 @@ onMounted(async () => {
   <q-card flat bordered class="q-pa-md">
     <div class="row q-col-gutter-sm">
       <div class="col-12">
-        <div class="row q-col-gutter-y-sm">
-          <div class="row q-col-gutter-sm items-center">
-            <datepicker
-              v-model="formFilter.year"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              style="width: 150px"
-              @update:model-value="onSearchData()"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  outlined
-                  :model-value="Number(formFilter.year) + 543"
-                  :label="`${'ปีงบประมาณ'}`"
-                  bg-color="white"
-                >
-                  <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
-              emit-value
-              map-options
-              outlined
-              dense
-              option-value="id"
-              option-label="name"
-              label="ประเภทการลา"
-              use-input
-              v-model="formFilter.type"
-              hide-selected
-              fill-input
-              :options="leaveTypeOptions"
-              @update:model-value="onSearchData()"
-              @filter="(inputValue:string,
-                      doneFn:Function) => filterOptionFn(inputValue,doneFn)"
-            >
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-            <div>
+        <div class="row q-col-gutter-sm">
+          <div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-4 col-md-4">
+              <datepicker
+                v-model="formFilter.year"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:model-value="onSearchData()"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="Number(formFilter.year) + 543"
+                    :label="`${'ปีงบประมาณ'}`"
+                    bg-color="white"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-7 col-md-4">
+              <q-select
+                emit-value
+                map-options
+                outlined
+                dense
+                option-value="id"
+                option-label="name"
+                label="ประเภทการลา"
+                use-input
+                v-model="formFilter.type"
+                hide-selected
+                fill-input
+                :options="leaveTypeOptions"
+                @update:model-value="onSearchData()"
+                @filter="(inputValue:string,
+              doneFn:Function) => filterOptionFn(inputValue,doneFn)"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-1 col-md-4 items-center">
               <q-btn
                 v-if="checkPermission($route)?.attrIsCreate"
                 dense
@@ -318,39 +296,42 @@ onMounted(async () => {
           </div>
 
           <q-space />
-          <div class="row q-col-gutter-sm">
-            <q-input
-              standout
-              dense
-              v-model="formFilter.keyword"
-              outlined
-              placeholder="ค้นหา"
-              @keydown.enter.prevent="onSearchData()"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </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"
-              style="min-width: 140px"
-            />
+          <div class="row q-col-gutter-sm col-xs-12 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-7 col-md-8">
+              <q-input
+                standout
+                dense
+                v-model="formFilter.keyword"
+                outlined
+                placeholder="ค้นหา"
+                @keydown.enter.prevent="onSearchData()"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-12 col-sm-5 col-md-4">
+              <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"
+                style="min-width: 140px"
+              />
+            </div>
           </div>
         </div>
       </div>
 
       <div class="col-12">
-        <d-table
+        <p-table
           ref="table"
           :columns="columns"
           :rows="rows"
@@ -360,7 +341,8 @@ onMounted(async () => {
           dense
           class="custom-header-table"
           :visible-columns="visibleColumns"
-          @update:pagination="updatePagination"
+          v-model:pagination="pagination"
+          @request="onRequest"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -409,21 +391,7 @@ onMounted(async () => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            ทั้งหมด {{ total.toLocaleString() }} รายการ
-            <q-pagination
-              v-model="formFilter.page"
-              active-color="primary"
-              color="dark"
-              :max="Number(maxPage)"
-              size="sm"
-              boundary-links
-              direction-links
-              :max-pages="5"
-              @update:model-value="onSearchData(false)"
-            ></q-pagination>
-          </template>
-        </d-table>
+        </p-table>
       </div>
     </div>
   </q-card>
diff --git a/src/modules/11_discipline/components/1_Complaint/MainPage.vue b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
index c7fab72c0..baf855b80 100644
--- a/src/modules/11_discipline/components/1_Complaint/MainPage.vue
+++ b/src/modules/11_discipline/components/1_Complaint/MainPage.vue
@@ -11,6 +11,7 @@ import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
 
@@ -25,51 +26,51 @@ const mixin = useCounterMixin();
 const complainstStore = useComplainstDataStore();
 const { fetchComplainst } = complainstStore;
 const { showLoader, messageError, hideLoader, convertDateToAPI } = mixin;
+const { pagination, params, onRequest } = usePagination("", getList);
 
-const filterRef = ref<HTMLInputElement | null>(null);
-const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");
-
-const toptitle = ref<number>(0);
 const statusFilter = ref<string>("NEW");
 const option = ref<DataOption[]>(complainstStore.statusOptions);
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 /** ดึงข้อมูล เรื่องร้องเรียน */
-async function getList(page?: number) {
+async function getList() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filterKeyword.value.trim(),
     status: statusFilter.value,
-    ...(store.formComplaint.dateReceived?.[0] && { dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0])}),
-    ...(store.formComplaint.dateReceived?.[1] && { dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1])}),
-    ...(store.formComplaint.respondentType && { respondentType: store.formComplaint.respondentType}),
-    ...(store.formComplaint.offenseDetails && { offenseDetails: store.formComplaint.offenseDetails}),
-    ...(store.formComplaint.levelConsideration && { levelConsideration: store.formComplaint.levelConsideration}),
-    ...(store.formComplaint.dateConsideration?.[0] && { dateConsiderationStart: convertDateToAPI( store.formComplaint.dateConsideration[0])}),
-    ...(store.formComplaint.dateConsideration?.[1] && { dateConsiderationEnd: convertDateToAPI( store.formComplaint.dateConsideration[1])}),
+    ...(store.formComplaint.dateReceived?.[0] && {
+      dateReceivedStart: convertDateToAPI(store.formComplaint.dateReceived[0]),
+    }),
+    ...(store.formComplaint.dateReceived?.[1] && {
+      dateReceivedEnd: convertDateToAPI(store.formComplaint.dateReceived[1]),
+    }),
+    ...(store.formComplaint.respondentType && {
+      respondentType: store.formComplaint.respondentType,
+    }),
+    ...(store.formComplaint.offenseDetails && {
+      offenseDetails: store.formComplaint.offenseDetails,
+    }),
+    ...(store.formComplaint.levelConsideration && {
+      levelConsideration: store.formComplaint.levelConsideration,
+    }),
+    ...(store.formComplaint.dateConsideration?.[0] && {
+      dateConsiderationStart: convertDateToAPI(
+        store.formComplaint.dateConsideration[0]
+      ),
+    }),
+    ...(store.formComplaint.dateConsideration?.[1] && {
+      dateConsiderationEnd: convertDateToAPI(
+        store.formComplaint.dateConsideration[1]
+      ),
+    }),
   };
   showLoader();
   await http
     .post(config.API.complaintList(), body)
-    //
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      toptitle.value = res.data.result.total;
-      const data = res.data.result.data;
-      await fetchComplainst(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchComplainst(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -102,13 +103,6 @@ function getSearch() {
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   await getList();
@@ -119,99 +113,120 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการเรื่องร้องเรียน
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
-      <q-select
-        v-model="statusFilter"
-        label="สถานะ"
-        dense
-        outlined
-        emit-value
-        map-options
-        option-label="name"
-        option-value="id"
-        hide-selected
-        fill-input
-        :options="option"
-        @update:model-value="getSearch()"
-        use-input
-        @filter="filterOptionFn"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-        <template v-if="statusFilter !== 'ALL'" v-slot:append>
-          <q-icon
-            name="cancel"
-            @click.stop.prevent="
-              (option = complainstStore.statusOptions),
-                (statusFilter = 'ALL'),
-                getSearch()
-            "
-            class="cursor-pointer"
-          />
-        </template>
-      </q-select>
+  <q-card flat bordered>
+    <div class="row q-col-gutter-sm q-pa-md">
+      <div class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-xs-11">
+                <q-select
+                  v-model="statusFilter"
+                  label="สถานะ"
+                  dense
+                  outlined
+                  emit-value
+                  map-options
+                  option-label="name"
+                  option-value="id"
+                  hide-selected
+                  fill-input
+                  :options="option"
+                  @update:model-value="getSearch()"
+                  use-input
+                  @filter="filterOptionFn"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                  <template v-if="statusFilter !== 'ALL'" v-slot:append>
+                    <q-icon
+                      name="cancel"
+                      @click.stop.prevent="
+                        (option = complainstStore.statusOptions),
+                          (statusFilter = 'ALL'),
+                          getSearch()
+                      "
+                      class="cursor-pointer"
+                    />
+                  </template>
+                </q-select>
+              </div>
 
-      <div>
-        <q-btn
-          v-if="checkPermission($route)?.attrIsCreate"
-          id="addComplaints"
-          for="addComplaints"
-          dense
-          flat
-          round
-          color="primary"
-          icon="mdi-plus"
-          @click="redirectToPageadd()"
-          ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
-        >
+              <div
+                class="col-xs justify-center row"
+                v-if="checkPermission($route)?.attrIsCreate"
+              >
+                <q-btn
+                  id="addComplaints"
+                  for="addComplaints"
+                  dense
+                  flat
+                  round
+                  color="primary"
+                  icon="mdi-plus"
+                  @click="redirectToPageadd()"
+                  ><q-tooltip>เพิ่มเรื่องร้องเรียน </q-tooltip></q-btn
+                >
+              </div>
+            </div>
+          </div>
+
+          <q-space />
+
+          <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col justify-center row">
+                <DialogSearchAdvanced :get-data="() => getSearch()" />
+              </div>
+              <div class="col-7">
+                <q-input
+                  for="#search"
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหาเรื่องร้องเรียน"
+                  @keydown.enter.prevent="getSearch()"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-4">
+                <q-select
+                  id="visibleColumns"
+                  for="visibleColumns"
+                  v-model="complainstStore.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="complainstStore.columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <q-space />
-      <DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
-      <q-input
-        for="#search"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหาเรื่องร้องเรียน"
-        @keydown.enter.prevent="getSearch()"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
 
-      <q-select
-        id="visibleColumns"
-        for="visibleColumns"
-        v-model="complainstStore.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="complainstStore.columns"
-        option-value="name"
-        style="min-width: 140px"
-      />
-    </div>
-
-    <div class="col-12">
-      <TableComplaint
-        :filter-table="filterTable"
-        v-model:pagination="pagination"
-        v-model:total="total"
-        v-model:total-list="totalList"
-        :toptitle="toptitle"
-        :get-list="getList"
-      />
+      <div class="col-12">
+        <TableComplaint
+          v-model:pagination="pagination"
+          :on-request="onRequest"
+        />
+      </div>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
index ff67a7b59..a0bccc8fd 100644
--- a/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
+++ b/src/modules/11_discipline/components/1_Complaint/TableComplaint.vue
@@ -1,28 +1,24 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useComplainstDataStore } from "@/modules/11_discipline/store/ComplaintsStore";
 import { useRouter } from "vue-router";
 
 import { checkPermission } from "@/utils/permissions";
+import type { PropsTable } from "@/interface/index/PropsTable";
 
 const router = useRouter();
 const complainstStore = useComplainstDataStore();
 
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
 
 const emit = defineEmits(["update:pagination"]);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
-  getList: Function,
-  filterTable: {
-    type: String,
-    default: "",
-  },
-  toptitle: {
-    type: Number,
+  onRequest: {
+    type: Function,
     require: true,
   },
 });
@@ -39,8 +35,6 @@ const visibleColumns = ref<string[]>([
   "dateConsideration",
   "status",
 ]);
-
-/** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -109,7 +103,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -124,12 +118,6 @@ function OpenEdit(id: string) {
   router.push(`/discipline/complaints/${id}`);
 }
 
-/** ส่งค่ากลับไปหน้าหลัก */
-function updateProp(newPagination: any, page: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
-}
-
 /**
  * ฟังชั่นสำหรับ เปลี่ยน route ตาม id ที่รับมา
  * @param id ไอดีระบุ
@@ -138,11 +126,6 @@ function onDetail(id: string) {
   router.push(`/discipline/complaints-detail/${id}`);
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 /** เริ่มโหลดหน้า page เอาข้อมูลไปเก็บ ใน store*/
 onMounted(() => {
   complainstStore.columns = columns.value;
@@ -151,7 +134,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <d-table
+  <p-table
     id="table"
     ref="table"
     :columns="columns"
@@ -164,7 +147,8 @@ onMounted(() => {
     class="custom-header-table"
     :visible-columns="complainstStore.visibleColumns"
     :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    v-model:pagination="pagination"
+    @request="props.onRequest"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -207,11 +191,7 @@ onMounted(() => {
         </q-td>
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name == 'no'">
-            {{
-              (pagination.page - 1) * pagination.rowsPerPage +
-              props.rowIndex +
-              1
-            }}
+            {{ props.rowIndex + 1 }}
           </div>
           <div v-else-if="col.name === 'title'" class="table_ellipsis">
             {{ props.row.title }}
@@ -222,21 +202,7 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="props.getList?.()"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
index 7f4027ef5..088b511ca 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/MainPage.vue
@@ -9,39 +9,30 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 import { checkPermission } from "@/utils/permissions";
+import { usePagination } from "@/composables/usePagination";
 
 import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
 
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+
 const $q = useQuasar(); //ใช้ noti quasar
 const store = useDisciplineMainStore();
 const mixin = useCounterMixin();
 const dataInvestigate = useInvestigateFactStore();
 const { messageError, showLoader, hideLoader, convertDateToAPI } = mixin;
+const { pagination, params, onRequest } = usePagination("", getList);
 
-const option = ref<any[]>(dataInvestigate.statusOptions);
+const attrs = ref<any>(useAttrs());
+const option = ref<DataOption[]>(dataInvestigate.statusOptions);
 
 /** ค้นหาข้อมูลในตาราง */
 const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
 const statusFilter = ref<string>("NEW");
-const toptitle = ref<number>(0);
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const attrs = ref<any>(useAttrs());
 
 /** ดึงข้อมูลบสวน */
-async function getList(page?: number) {
+async function getList() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filterKeyword.value.trim(),
     status: statusFilter.value,
     ...(store.formInvestigateFacts.respondentType && {
@@ -82,14 +73,9 @@ async function getList(page?: number) {
   await http
     .post(config.API.investigateMain(), body)
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      toptitle.value = res.data.result.total;
-
-      const data = res.data.result.data;
-      await dataInvestigate.fecthList(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await dataInvestigate.fecthList(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -104,7 +90,7 @@ async function getList(page?: number) {
  * @param id ไอดีเฉพาะ รายบุคคล
  */
 async function editPage(id: string) {
-  dataInvestigate.tabMenu = await "investigatefacts";
+  dataInvestigate.tabMenu = "investigatefacts";
   router.push(`/discipline/investigatefacts/${id}`);
 }
 /**
@@ -112,7 +98,7 @@ async function editPage(id: string) {
  * @param id ไอดีเฉพาะ รายบุคคล
  */
 async function detailPage(id: string) {
-  dataInvestigate.tabMenu = await "investigatefacts";
+  dataInvestigate.tabMenu = "investigatefacts";
   router.push(`/discipline-detail/investigatefacts/${id}`);
 }
 
@@ -129,27 +115,12 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-function getSerach() {
+function getSearch() {
   pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSerach();
-  }
-);
-
-/**เมื่อเริ่มโหลดหน้า
- * ส่งข้อมูลจำลองไปยัง store
- */
-onMounted(async () => {
+onMounted(() => {
   getList();
 });
 </script>
@@ -158,173 +129,175 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสืบสวนข้อเท็จจริง
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm items-center">
-      <q-select
-        v-model="statusFilter"
-        label="สถานะ"
-        dense
-        outlined
-        emit-value
-        map-options
-        hide-selected
-        fill-input
-        option-label="name"
-        option-value="id"
-        :options="option"
-        @update:model-value="getSerach()"
-        use-input
-        @filter="filterOptionFn"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-          </q-item>
-        </template>
-        <template v-if="statusFilter !== 'ALL'" v-slot:append>
-          <q-icon
-            name="cancel"
-            @click.stop.prevent="
-              (option = dataInvestigate.statusOptions),
-                (statusFilter = 'ALL'),
-                getSerach()
-            "
-            class="cursor-pointer"
-          />
-        </template>
-      </q-select>
 
-      <q-space />
-      <DialogSearchAdvanced :get-data="(value:number)=> getList(value)" />
-      <q-input
-        for="#search"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหาเรื่องร้องเรียน"
-        @keydown.enter.prevent="getSerach()"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
-
-      <q-select
-        for="#select"
-        v-model="dataInvestigate.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="dataInvestigate.columns"
-        option-value="name"
-        style="min-width: 140px"
-      />
-    </div>
-
-    <div class="col-12">
-      <d-table
-        ref="table"
-        :columns="dataInvestigate.columns"
-        :rows="dataInvestigate.rows"
-        row-key="interrogated"
-        flat
-        bordered
-        :paging="true"
-        dense
-        class="custom-header-table"
-        v-bind="attrs"
-        :visible-columns="dataInvestigate.visibleColumns"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th auto-width></q-th>
-            <q-th
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              style="color: #000000; font-weight: 500"
+  <q-card flat bordered>
+    <div class="row col-12 q-col-gutter-sm q-pa-md">
+      <div class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+            <q-select
+              v-model="statusFilter"
+              label="สถานะ"
+              dense
+              outlined
+              emit-value
+              map-options
+              hide-selected
+              fill-input
+              option-label="name"
+              option-value="id"
+              :options="option"
+              @update:model-value="getSearch()"
+              use-input
+              @filter="filterOptionFn"
             >
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-            <q-th auto-width />
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td auto-width>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsGet"
-                flat
-                dense
-                round
-                color="info"
-                icon="mdi-eye"
-                @click="detailPage(props.row.id)"
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+              <template v-if="statusFilter !== 'ALL'" v-slot:append>
+                <q-icon
+                  name="cancel"
+                  @click.stop.prevent="
+                    (option = dataInvestigate.statusOptions),
+                      (statusFilter = 'ALL'),
+                      getSearch()
+                  "
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-select>
+          </div>
+
+          <q-space />
+          <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col justify-center row">
+                <DialogSearchAdvanced :get-data="() => getSearch()" />
+              </div>
+
+              <div class="col-7">
+                <q-input
+                  for="#search"
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหาเรื่องร้องเรียน"
+                  @keydown.enter.prevent="getSearch()"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div class="col-4">
+                <q-select
+                  for="#select"
+                  v-model="dataInvestigate.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="dataInvestigate.columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12">
+        <p-table
+          ref="table"
+          :columns="dataInvestigate.columns"
+          :rows="dataInvestigate.rows"
+          row-key="interrogated"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="dataInvestigate.visibleColumns"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          @request="onRequest"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
               >
-                <q-tooltip>รายละเอียด</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="
-                  checkPermission($route)?.attrIsGet &&
-                  checkPermission($route)?.attrIsUpdate
-                "
-                flat
-                dense
-                round
-                color="edit"
-                icon="edit"
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  flat
+                  dense
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                  @click="detailPage(props.row.id)"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    checkPermission($route)?.attrIsUpdate
+                  "
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click="editPage(props.row.id)"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else-if="col.name === 'title'" class="table_ellipsis">
+                  {{ props.row.title }}
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+              <q-td
+                auto-width
+                style="font-size: 14px; width: 10%"
                 @click="editPage(props.row.id)"
               >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'">
-                {{
-                  (pagination.page - 1) * pagination.rowsPerPage +
-                  props.rowIndex +
-                  1
-                }}
-              </div>
-              <div v-else-if="col.name === 'title'" class="table_ellipsis">
-                {{ props.row.title }}
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td
-              auto-width
-              style="font-size: 14px; width: 10%"
-              @click="editPage(props.row.id)"
-            >
-              {{ props.row.active }}
-            </q-td>
-          </q-tr>
-        </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="getList()"
-          ></q-pagination>
-        </template>
-      </d-table>
+                {{ props.row.active }}
+              </q-td>
+            </q-tr>
+          </template>
+        </p-table>
+      </div>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
index 143cc3487..71d45e603 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue
@@ -2,25 +2,16 @@
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { usePagination } from "@/composables/usePagination";
 
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const $q = useQuasar(); //ใช้ noti quasar
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -28,14 +19,18 @@ const store = useDisciplineMainStore();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
 const { fetchList } = dataInvestigateDis;
+const { pagination, params, onRequest } = usePagination(
+  "",
+  fetchListDisciplinary
+);
 
 const filter = ref<string>(""); //search data table
 
 const status = ref<string>("NEW");
-async function fetchListDisciplinary(page?: number) {
+
+async function fetchListDisciplinary() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filter.value.trim(),
     status: status.value,
     ...(store.formInvestigateDisciplinary.respondentType && {
@@ -77,12 +72,9 @@ async function fetchListDisciplinary(page?: number) {
   await http
     .post(config.API.disciplineDisciplinary(), body)
     .then(async (res) => {
-      const data = res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      await fetchList(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchList(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -112,18 +104,11 @@ function filterStatus(statusReturn: string) {
   getSearch();
 }
 
-function getSearch(page?: number) {
+function getSearch() {
   pagination.value.page = 1;
-  fetchListDisciplinary(page);
+  fetchListDisciplinary();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -136,29 +121,26 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสอบสวนความผิดทางวินัย
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="dataInvestigateDis.rows"
-        :columns="dataInvestigateDis.columns"
-        :visible-columns="dataInvestigateDis.visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="dataInvestigateDis.visibleColumns"
-        :nornmalData="true"
-        :paging="true"
-        :titleText="''"
-        v-model:pagination="pagination"
-        v-model:total="total"
-        v-model:total-list="totalList"
-        :fetchListDisciplinary="fetchListDisciplinary"
-        v-model:open-edit="openEdit"
-        :open-detail="openDetail"
-        :filterStatus="filterStatus"
-        :get-search="getSearch"
-      >
-      </Table>
-    </div>
+  <q-card flat bordered>
+    <Table
+      style="max-height: 80vh"
+      :rows="dataInvestigateDis.rows"
+      :columns="dataInvestigateDis.columns"
+      :visible-columns="dataInvestigateDis.visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="dataInvestigateDis.visibleColumns"
+      :nornmalData="true"
+      :paging="true"
+      :titleText="''"
+      v-model:pagination="pagination"
+      :fetchListDisciplinary="fetchListDisciplinary"
+      v-model:open-edit="openEdit"
+      :open-detail="openDetail"
+      :filterStatus="filterStatus"
+      :get-search="getSearch"
+      :on-request="onRequest"
+    >
+    </Table>
   </q-card>
 </template>
 
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
index a6d5db40a..04ae6b6ac 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue
@@ -1,23 +1,22 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from "vue";
+import { ref, useAttrs } from "vue";
 
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { checkPermission } from "@/utils/permissions";
 
 import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
 
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
+import type { PropsTable } from "@/interface/index/PropsTable";
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
 
 const dataInvestigateDis = useInvestigateDisStore();
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
-const paging = ref<boolean>(true);
-const currentPage = ref<number>(1);
 const statusFilter = ref<string>("NEW");
-const option = ref<any[]>(dataInvestigateDis.statusOptions);
+const option = ref<DataOption[]>(dataInvestigateDis.statusOptions);
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
@@ -77,6 +76,10 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  onRequest: {
+    type: Function,
+    require: true,
+  },
 });
 
 const emit = defineEmits([
@@ -94,18 +97,6 @@ function updateVisible(value: []) {
   emit("update:inputvisible", value);
 }
 
-function resetFilter() {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-  props.fetchListDisciplinary?.();
-}
-
-function updateProp(newPagination: any, page: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:pagination", newPagination, page);
-}
-
 function dataUpdate() {
   props.filterStatus(statusFilter.value);
 }
@@ -126,215 +117,166 @@ function filterOptionFn(val: string, update: Function) {
     );
   });
 }
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
 </script>
 
 <template>
-  <div class="q-pb-sm row q-col-gutter-sm items-center">
-    <q-select
-      v-model="statusFilter"
-      label="สถานะ"
-      dense
-      outlined
-      emit-value
-      hide-selected
-      fill-input
-      map-options
-      option-label="name"
-      option-value="id"
-      :options="option"
-      @update:model-value="dataUpdate"
-      use-input
-      @filter="filterOptionFn"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-        </q-item>
-      </template>
-      <template v-if="statusFilter !== 'ALL'" v-slot:append>
-        <q-icon
-          name="cancel"
-          @click.stop.prevent="
-            (option = dataInvestigateDis.statusOptions),
-              (statusFilter = 'ALL'),
-              dataUpdate()
-          "
-          class="cursor-pointer"
-        />
-      </template>
-    </q-select>
-
-    <q-space />
-    <!-- ค้นหาข้อความใน table -->
-    <DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
-    <q-input
-      standout
-      dense
-      :model-value="inputfilter"
-      ref="filterRef"
-      @update:model-value="updateInput"
-      outlined
-      placeholder="ค้นหา"
-      style="max-width: 200px"
-      @keydown.enter.prevent="filterFn"
-    >
-      <template v-slot:append>
-        <q-icon name="search" />
-      </template>
-      <q-tooltip
-        transition-show="scale"
-        transition-hide="scale"
-        class="text-body2"
-        >หมายเหตุ: ค้นหาจากเรื่องร้องเรียน
-        ระดับโทษความผิดหรือกรณีความผิด</q-tooltip
+  <div class="row q-col-gutter-sm q-pa-md">
+    <div class="col-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+          <q-select
+            v-model="statusFilter"
+            label="สถานะ"
+            dense
+            outlined
+            emit-value
+            hide-selected
+            fill-input
+            map-options
+            option-label="name"
+            option-value="id"
+            :options="option"
+            @update:model-value="dataUpdate"
+            use-input
+            @filter="filterOptionFn"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+            <template v-if="statusFilter !== 'ALL'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  (option = dataInvestigateDis.statusOptions),
+                    (statusFilter = 'ALL'),
+                    dataUpdate()
+                "
+                class="cursor-pointer"
+              />
+            </template>
+          </q-select>
+        </div>
+        <q-space />
+        <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+          <div class="row q-col-gutter-sm items-center">
+            <!-- ค้นหาข้อความใน table -->
+            <div class="col justify-center row">
+              <DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
+            </div>
+            <div class="col-7">
+              <q-input
+                standout
+                dense
+                :model-value="inputfilter"
+                ref="filterRef"
+                @update:model-value="updateInput"
+                outlined
+                placeholder="ค้นหา"
+                @keydown.enter.prevent="filterFn"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+                <q-tooltip
+                  transition-show="scale"
+                  transition-hide="scale"
+                  class="text-body2"
+                  >หมายเหตุ: ค้นหาจากเรื่องร้องเรียน
+                  ระดับโทษความผิดหรือกรณีความผิด</q-tooltip
+                >
+              </q-input>
+            </div>
+            <div class="col-4">
+              <q-select
+                :model-value="inputvisible"
+                @update:model-value="updateVisible"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="attrs.columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-12">
+      <p-table
+        ref="table"
+        flat
+        v-bind="attrs"
+        virtual-scroll
+        :virtual-scroll-sticky-size-start="48"
+        dense
+        :rows-per-page-options="[10, 25, 50, 100]"
+        v-model:pagination="pagination"
+        @request="props.onRequest"
       >
-    </q-input>
-    <!-- แสดงคอลัมน์ใน table -->
-    <q-select
-      :model-value="inputvisible"
-      @update:model-value="updateVisible"
-      :display-value="$q.lang.table.columns"
-      multiple
-      outlined
-      dense
-      :options="attrs.columns"
-      options-dense
-      option-value="name"
-      map-options
-      emit-value
-      style="min-width: 140px"
-    >
-    </q-select>
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width></q-th>
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium" v-html="col.label" />
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
+                flat
+                dense
+                round
+                icon="mdi-eye"
+                color="info"
+                @click="openDetail(props.row.id)"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                dense
+                round
+                icon="edit"
+                color="edit"
+                @click="openEdit(props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div
+                v-else
+                :class="
+                  col.name === 'title' || col.name === 'disciplinaryCaseFault'
+                    ? 'table_ellipsis'
+                    : ''
+                "
+              >
+                {{ col.value ?? "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </p-table>
+    </div>
   </div>
-  <d-table
-    ref="table"
-    flat
-    v-bind="attrs"
-    virtual-scroll
-    :virtual-scroll-sticky-size-start="48"
-    dense
-    :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
-  >
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="props.fetchListDisciplinary?.()"
-      ></q-pagination>
-    </template>
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th auto-width></q-th>
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium" v-html="col.label" />
-        </q-th>
-      </q-tr>
-    </template>
-    <template v-slot:body="props">
-      <q-tr :props="props">
-        <q-td auto-width>
-          <q-btn
-            v-if="checkPermission($route)?.attrIsGet"
-            flat
-            dense
-            round
-            icon="mdi-eye"
-            color="info"
-            @click="openDetail(props.row.id)"
-          >
-            <q-tooltip>รายละเอียด</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="
-              checkPermission($route)?.attrIsUpdate &&
-              checkPermission($route)?.attrIsGet
-            "
-            flat
-            dense
-            round
-            icon="edit"
-            color="edit"
-            @click="openEdit(props.row.id)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'no'">
-            {{
-              (currentPage - 1) * Number(pagination.rowsPerPage) +
-              props.rowIndex +
-              1
-            }}
-          </div>
-          <div v-else-if="col.name === 'title'" class="table_ellipsis">
-            {{ props.row.title }}
-          </div>
-          <div v-else>
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </d-table>
 </template>
 
-<style 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 lang="scss"></style>
diff --git a/src/modules/11_discipline/components/4_Result/MainPage.vue b/src/modules/11_discipline/components/4_Result/MainPage.vue
index 7e25a0d71..3483b5e62 100644
--- a/src/modules/11_discipline/components/4_Result/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Result/MainPage.vue
@@ -8,7 +8,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
-import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import Table from "@/modules/11_discipline/components/4_Result/Table.vue";
 
@@ -19,23 +19,15 @@ const storeResult = useDisciplineResultStore();
 const store = useDisciplineMainStore();
 const { showLoader, hideLoader, messageError, convertDateToAPI } = mixin;
 const { fetchList } = storeResult;
+const { pagination, params, onRequest } = usePagination("", fetchListResult);
 
 const filter = ref<string>("");
 const status = ref<string>("DONE");
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
-async function fetchListResult(page?: number) {
+async function fetchListResult() {
   const body = {
-    page: page ? page : pagination.value.page,
-    pageSize: pagination.value.rowsPerPage,
+    ...params.value,
     keyword: filter.value.trim(),
     status: status.value,
     ...(store.formResult.respondentType && {
@@ -77,12 +69,9 @@ async function fetchListResult(page?: number) {
   await http
     .post(config.API.listResult(), body)
     .then(async (res) => {
-      const data = res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      await fetchList(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchList(result.data);
     })
     .catch((err) => {
       messageError($q, err);
@@ -112,18 +101,11 @@ function filterStatus(statusReturn: string) {
   getSearch();
 }
 
-function getSearch(page?: number) {
+function getSearch() {
   pagination.value.page = 1;
-  fetchListResult(page);
+  fetchListResult();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -136,29 +118,25 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการสรุปผลการพิจารณาความผิดทางวินัย
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="storeResult.rows"
-        :columns="storeResult.columns"
-        :visible-columns="storeResult.visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="storeResult.visibleColumns"
-        :nornmalData="true"
-        :paging="true"
-        :titleText="''"
-        :fetchListResult="fetchListResult"
-        :get-search="getSearch"
-        v-model:open-edit="openEdit"
-        v-model:open-detail="openDetail"
-        :filterStatus="filterStatus"
-        v-model:pagination="pagination"
-        v-model:total="total"
-        v-model:total-list="totalList"
-      >
-      </Table>
-    </div>
+  <q-card flat bordered>
+    <Table
+      style="max-height: 80vh"
+      :rows="storeResult.rows"
+      :columns="storeResult.columns"
+      :visible-columns="storeResult.visibleColumns"
+      v-model:inputfilter="filter"
+      v-model:inputvisible="storeResult.visibleColumns"
+      :nornmalData="true"
+      :paging="true"
+      :titleText="''"
+      :fetchListResult="fetchListResult"
+      :get-search="getSearch"
+      v-model:open-edit="openEdit"
+      v-model:open-detail="openDetail"
+      :filterStatus="filterStatus"
+      v-model:pagination="pagination"
+      :on-request="onRequest"
+    />
   </q-card>
 </template>
 
diff --git a/src/modules/11_discipline/components/4_Result/Table.vue b/src/modules/11_discipline/components/4_Result/Table.vue
index 40efc64f6..bb6ea694b 100644
--- a/src/modules/11_discipline/components/4_Result/Table.vue
+++ b/src/modules/11_discipline/components/4_Result/Table.vue
@@ -1,22 +1,23 @@
 <script setup lang="ts">
-import { ref, useAttrs, watch } from "vue";
+import { ref, useAttrs } from "vue";
 
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
 import { checkPermission } from "@/utils/permissions";
 
+import type { PropsTable } from "@/interface/index/PropsTable";
+import type { DataOption } from "@/modules/11_discipline/interface/index/Main";
+
 import DialogSearchAdvanced from "@/modules/11_discipline/components/DialogSearchAdvanced.vue";
 
-const total = defineModel<number>("total", { required: true });
-const totalList = defineModel<number>("totalList", { required: true });
-const pagination = defineModel<any>("pagination", { required: true });
+const pagination = defineModel<PropsTable.Pagination>("pagination", {
+  required: true,
+});
 
 const store = useDisciplineResultStore();
-const table = ref<any>(null);
-const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
 const statusFilter = ref<string>("DONE");
 
-const option = ref<any[]>(store.statusOptions);
+const option = ref<DataOption[]>(store.statusOptions);
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -57,9 +58,12 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+  onRequest: {
+    type: Function,
+    required: true,
+  },
 });
 
-const filter = ref<string>("");
 const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
@@ -71,17 +75,6 @@ function updateVisible(value: []) {
   emit("update:inputvisible", value);
 }
 
-function resetFilter() {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
-  props.getSearch?.();
-}
-
-function updatePaging(p: number, pS: number, key: string) {
-  emit("update:queryString", p, pS, key);
-}
-
 function dataUpdate() {
   props.filterStatus(statusFilter.value);
 }
@@ -101,219 +94,171 @@ function filterFn() {
 function filterOptionFn(val: string, update: Function) {
   update(() => {
     option.value = store.statusOptions.filter(
-      (e: any) => e.name.search(val) !== -1
+      (e: DataOption) => e.name.search(val) !== -1
     );
   });
 }
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
 </script>
 
 <template>
-  <div class="q-pb-sm row q-col-gutter-sm items-center">
-    <div class="q-gutter-sm" v-if="nornmalData == true"></div>
-
-    <q-select
-      v-model="statusFilter"
-      label="สถานะ"
-      dense
-      outlined
-      emit-value
-      map-options
-      hide-selected
-      fill-input
-      option-label="name"
-      option-value="id"
-      :options="option"
-      @update:model-value="dataUpdate"
-      use-input
-      @filter="filterOptionFn"
-    >
-      <template v-slot:no-option>
-        <q-item>
-          <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-        </q-item>
-      </template>
-      <template v-if="statusFilter !== 'ALL'" v-slot:append>
-        <q-icon
-          name="cancel"
-          @click.stop.prevent="
-            (option = store.statusOptions), (statusFilter = 'ALL'), dataUpdate()
-          "
-          class="cursor-pointer"
-        />
-      </template>
-    </q-select>
-
-    <q-space />
-    <DialogSearchAdvanced :get-data="(value:number)=> props.getSearch?.(value)" />
-    <q-input
-      standout
-      dense
-      :model-value="inputfilter"
-      ref="filterRef"
-      @keydown.enter.prevent="filterFn"
-      @update:model-value="updateInput"
-      outlined
-      placeholder="ค้นหา"
-      style="max-width: 200px"
-    >
-      <template v-slot:append>
-        <q-icon name="search" />
-      </template>
-      <q-tooltip
-        anchor="bottom left"
-        transition-show="scale"
-        transition-hide="scale"
-        class="text-body2"
+  <div class="row q-col-gutter-sm q-pa-md">
+    <div class="col-12">
+      <div class="row q-col-gutter-sm">
+        <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+          <q-select
+            v-model="statusFilter"
+            label="สถานะ"
+            dense
+            outlined
+            emit-value
+            map-options
+            hide-selected
+            fill-input
+            option-label="name"
+            option-value="id"
+            :options="option"
+            @update:model-value="dataUpdate"
+            use-input
+            @filter="filterOptionFn"
+          >
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+            <template v-if="statusFilter !== 'ALL'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  (option = store.statusOptions),
+                    (statusFilter = 'ALL'),
+                    dataUpdate()
+                "
+                class="cursor-pointer"
+              />
+            </template>
+          </q-select>
+        </div>
+        <q-space />
+        <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+          <div class="row q-col-gutter-sm items-center">
+            <div class="col justify-center row">
+              <DialogSearchAdvanced :get-data="() => props.getSearch?.()" />
+            </div>
+            <div class="col-7">
+              <q-input
+                standout
+                dense
+                :model-value="inputfilter"
+                ref="filterRef"
+                @keydown.enter.prevent="filterFn"
+                @update:model-value="updateInput"
+                outlined
+                placeholder="ค้นหา"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+                <q-tooltip
+                  anchor="bottom left"
+                  transition-show="scale"
+                  transition-hide="scale"
+                  class="text-body2"
+                >
+                  หมายเหตุ: ค้นหาจากเรื่องร้องเรียน ประเภทวินัย ประเภทของเรื่อง
+                  หน่วนงาน/ส่วนราชการ หรือปีงบประมาณ</q-tooltip
+                >
+              </q-input>
+            </div>
+            <div class="col-4">
+              <q-select
+                :model-value="inputvisible"
+                @update:model-value="updateVisible"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="attrs.columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-12">
+      <p-table
+        ref="table"
+        flat
+        v-bind="attrs"
+        virtual-scroll
+        :virtual-scroll-sticky-size-start="48"
+        dense
+        :rows-per-page-options="[10, 25, 50, 100]"
+        v-model:pagination="pagination"
+        @request="props.onRequest"
       >
-        หมายเหตุ: ค้นหาจากเรื่องร้องเรียน ประเภทวินัย ประเภทของเรื่อง
-        หน่วนงาน/ส่วนราชการ หรือปีงบประมาณ</q-tooltip
-      >
-    </q-input>
-    <q-select
-      :model-value="inputvisible"
-      @update:model-value="updateVisible"
-      :display-value="$q.lang.table.columns"
-      multiple
-      outlined
-      dense
-      :options="attrs.columns"
-      options-dense
-      option-value="name"
-      map-options
-      emit-value
-      style="min-width: 140px"
-    >
-    </q-select>
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width></q-th>
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium" v-html="col.label" />
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                flat
+                round
+                dense
+                icon="mdi-eye"
+                color="info"
+                @click="openDetail(props.row.id)"
+                v-if="checkPermission($route)?.attrIsGet"
+              >
+                <q-tooltip>รายละเอียด</q-tooltip>
+              </q-btn>
+              <q-btn
+                v-if="
+                  checkPermission($route)?.attrIsUpdate &&
+                  checkPermission($route)?.attrIsGet
+                "
+                flat
+                round
+                dense
+                icon="edit"
+                color="edit"
+                @click="openEdit(props.row.id)"
+              >
+                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+
+              <div
+                v-else
+                :class="
+                  col.name === 'title' || col.name === 'disciplinaryCaseFault'
+                    ? 'table_ellipsis'
+                    : ''
+                "
+              >
+                {{ col.value ?? "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </p-table>
+    </div>
   </div>
-  <d-table
-    ref="table"
-    flat
-    v-bind="attrs"
-    virtual-scroll
-    :virtual-scroll-sticky-size-start="48"
-    dense
-    :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th auto-width></q-th>
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          <span class="text-weight-medium" v-html="col.label" />
-        </q-th>
-      </q-tr>
-    </template>
-    <template v-slot:body="props">
-      <q-tr :props="props">
-        <q-td auto-width>
-          <q-btn
-            flat
-            round
-            dense
-            icon="mdi-eye"
-            color="info"
-            @click="openDetail(props.row.id)"
-            v-if="checkPermission($route)?.attrIsGet"
-          >
-            <q-tooltip>รายละเอียด</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="
-              checkPermission($route)?.attrIsUpdate &&
-              checkPermission($route)?.attrIsGet
-            "
-            flat
-            round
-            dense
-            icon="edit"
-            color="edit"
-            @click="openEdit(props.row.id)"
-          >
-            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-          </q-btn>
-        </q-td>
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'no'">
-            {{
-              (pagination.page - 1) * pagination.rowsPerPage +
-              props.rowIndex +
-              1
-            }}
-          </div>
-          <div v-else-if="col.name === 'title'" class="table_ellipsis">
-            {{ props.row.title ?? "-" }}
-          </div>
-          <div v-else>
-            {{ col.value ?? "-" }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="props.fetchListResult?.()"
-      ></q-pagination>
-    </template>
-  </d-table>
 </template>
 
-<style 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 lang="scss"></style>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
index 8c2dcd239..6fbc4ecb0 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
@@ -19,32 +19,31 @@ const router = useRouter();
  * @param id ระบุ บุคคล
  */
 function onSubmit(formData: FormDataPost) {
-  dialogConfirm($q, () => addData(formData));
-}
-
-function addData(formData: FormDataPost) {
-  showLoader();
-  http
-    .post(config.API.director(), {
-      personalId: formData.personalId ?? "",
-      prefix: formData.prefix,
-      firstName: formData.firstname,
-      lastName: formData.lastname,
-      position: formData.position,
-      email: formData.email,
-      phone: formData.phone,
-      qualification: formData.qualification,
-      rootDnaId: formData.rootDnaId,
-    })
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      router.push(`/discipline/director`);
-    });
+  dialogConfirm($q, async () => {
+    showLoader();
+    await http
+      .post(config.API.director(), {
+        personalId: formData.personalId ?? "",
+        prefix: formData.prefix,
+        firstName: formData.firstname,
+        lastName: formData.lastname,
+        position: formData.position,
+        email: formData.email,
+        phone: formData.phone,
+        qualification: formData.qualification,
+        rootDnaId: formData.rootDnaId,
+      })
+      .then(async () => {
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        await router.push(`/discipline/director`);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 </script>
 <template>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index 45f32dc17..c5cf71505 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -7,6 +7,7 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { usePagination } from "@/composables/usePagination";
 
 import type {
   FormData,
@@ -18,15 +19,6 @@ import type {
 
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const route = useRoute();
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -36,6 +28,7 @@ const search = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader } = mixin;
+const { pagination, params, onRequest } = usePagination("", getSearch);
 
 /** รับ props มาจาก page หลัก */
 const props = defineProps({
@@ -56,16 +49,8 @@ const typeOps = ref<typeOp[]>([
 ]);
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
 const emit = defineEmits(["formDataReturn"]);
-/**
- * ข้อมูลเลขประจำตัวประชาชน
- */
-//
-const idCard = ref<string>("");
-const idCardRef = ref<any>(null);
 
-/**
- * ข้อมูลทั้งก้อน form
- */
+/** ข้อมูลทั้งก้อน form*/
 const formData = reactive<FormData>({
   personalId: "",
   prefix: "",
@@ -78,9 +63,7 @@ const formData = reactive<FormData>({
   rootDnaId: "",
 });
 
-/**
- * ตรวจสอบข้อมูลก่อนส่งไปยัง api
- */
+/** ตรวจสอบข้อมูลก่อนส่งไปยัง api*/
 const prefixRef = ref<object | null>(null);
 const firstnameRef = ref<object | null>(null);
 const lastnameRef = ref<object | null>(null);
@@ -183,11 +166,8 @@ function updateSelect() {
 
 /** ค้าหาข้อมูล */
 async function searchInput() {
-  searchRef.value.validate();
-  if (!searchRef.value.hasError) {
-    pagination.value.page = 1;
-    await getSearch();
-  }
+  pagination.value.page = 1;
+  await getSearch();
 }
 
 /** ดึงข้อมูล */
@@ -195,44 +175,40 @@ async function getSearch() {
   showLoader();
   const body = {
     fieldName: type.value,
-    keyword: search.value,
+    keyword: search.value ? search.value.trim() : "",
     system: (route.meta?.Key as string) || undefined,
   };
   await http
-    .post(
-      config.API.orgSearchPersonal() +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&searchKeyword=${search.value}`,
-      body
-    )
+    .post(config.API.orgSearchPersonal(), body, { params: params.value })
     .then((res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      const data = res.data.result.data;
-      const list = data.map((e: ResponsePreson) => ({
-        personId: e.id,
-        idcard: e.citizenId,
-        prefix: e.prefix,
-        firstName: e.firstName,
-        lastName: e.lastName,
-        name: `${e.prefix ? e.prefix : ""}${e.firstName ? e.firstName : ""}  ${
-          e.lastName ? e.lastName : ""
-        }`,
-        posNo: e.posNo ?? "-",
-        position: e.position ?? "-",
-        positionLevel: e.positionLevel ?? "-",
-        salary: e.salaries ?? "-",
-        organization: e.organization ?? "-",
-        phone: e.phone ?? "-",
-        email: e.email ?? "-",
-        rootDnaId: e.rootDnaId ?? "-",
-      }));
-
-      rows.value = list;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      if (result.data.length > 0) {
+        rows.value = result.data.map((e: ResponsePreson) => ({
+          personId: e.id,
+          idcard: e.citizenId,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          name: `${e.prefix ? e.prefix : ""}${
+            e.firstName ? e.firstName : ""
+          }  ${e.lastName ? e.lastName : ""}`,
+          posNo: e.posNo ?? "-",
+          position: e.position ?? "-",
+          positionLevel: e.positionLevel ?? "-",
+          salary: e.salaries ?? "-",
+          organization: e.organization ?? "-",
+          phone: e.phone ?? "-",
+          email: e.email ?? "-",
+          rootDnaId: e.rootDnaId ?? "-",
+        }));
+      } else {
+        rows.value = [];
+      }
     })
     .catch((err) => {
       messageError($q, err);
+      rows.value = [];
     })
     .finally(() => {
       hideLoader();
@@ -267,31 +243,23 @@ function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 /**
  * เช็คข้อมูลจาก props
  * เมื่อมีข้อมูล
  * เก็บข้อมูลลง formData
  */
-watch(props.data, async () => {
-  formData.prefix = props.data.prefix;
-  formData.firstname = props.data.firstname;
-  formData.lastname = props.data.lastname;
-  formData.position = props.data.position;
-  formData.phone = props.data.phone;
-  formData.email = props.data.email;
-  formData.qualification = props.data.qualification;
-});
-
 watch(
-  () => pagination.value.rowsPerPage,
+  () => props.data,
   async () => {
-    await getSearch();
-  }
+    formData.prefix = props.data.prefix;
+    formData.firstname = props.data.firstname;
+    formData.lastname = props.data.lastname;
+    formData.position = props.data.position;
+    formData.phone = props.data.phone;
+    formData.email = props.data.email;
+    formData.qualification = props.data.qualification;
+  },
+  { deep: true }
 );
 </script>
 
@@ -343,7 +311,7 @@ watch(
             </div>
 
             <div class="col-12 q-pt-sm">
-              <d-table
+              <p-table
                 ref="table"
                 :columns="columnsRespondent"
                 :rows="rows"
@@ -352,26 +320,11 @@ watch(
                 bordered
                 :paging="true"
                 dense
-                class="custom-header-table"
                 :visible-columns="visibleColumnsRespondent"
                 :rows-per-page-options="[10, 25, 50, 100]"
-                @update:pagination="updatePagination"
+                v-model:pagination="pagination"
+                @request="onRequest"
               >
-                <template v-slot:pagination="scope">
-                  ทั้งหมด {{ total }} รายการ
-                  <q-pagination
-                    v-model="pagination.page"
-                    active-color="primary"
-                    color="dark"
-                    :max="Number(totalList)"
-                    size="sm"
-                    boundary-links
-                    direction-links
-                    :max-pages="5"
-                    @update:model-value="getSearch"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -393,11 +346,7 @@ watch(
                       @click="returnDetail(props.row)"
                     >
                       <div v-if="col.name == 'no'">
-                        {{
-                          (pagination.page - 1) * pagination.rowsPerPage +
-                          props.rowIndex +
-                          1
-                        }}
+                        {{ props.rowIndex + 1 }}
                       </div>
                       <div v-else-if="col.name == 'info'">
                         <q-btn
@@ -413,12 +362,12 @@ watch(
                       </div>
 
                       <div v-else>
-                        {{ col.value }}
+                        {{ col.value ?? "-" }}
                       </div>
                     </q-td>
                   </q-tr>
                 </template>
-              </d-table>
+              </p-table>
             </div>
           </div>
 
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
index 143567a8d..bb8773bd9 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import config from "@/app.config";
@@ -9,6 +9,7 @@ import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import type { DirectorRowsResponse } from "@/modules/11_discipline/interface/response/director";
 
@@ -21,6 +22,7 @@ const mainStore = useDisciplineMainStore();
 const route = useRoute();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, dialogRemove, success } = mixin;
+const { pagination, params, onRequest } = usePagination("", getList);
 
 const titleInvestigate = ref<string>("");
 const personalId = ref<string>("");
@@ -36,33 +38,23 @@ const dataPopUp = ref<DirectorRowsResponse>();
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 async function getList() {
   showLoader();
   await http
     .get(
-      config.API.directorList(
-        pagination.value.page,
-        pagination.value.rowsPerPage,
-        filterKeyword.value.trim(),
-        mainStore.pathDirector(route.name as string)
-      )
+      config.API.directorListMain +
+        `${mainStore.pathDirector(route.name as string)}`,
+      {
+        params: {
+          ...params.value,
+          keyword: filterKeyword.value.trim(),
+        },
+      }
     )
     .then((res) => {
-      const data = res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      dataStore.fetchData(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      dataStore.fetchData(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -77,38 +69,21 @@ async function getList() {
  * @param id ไอดีของข้อมูล
  */
 function clickDelete(id: string) {
-  dialogRemove($q, async () => deleteData(id), `ลบข้อมูล`);
-}
-
-/**
- * ลบข้อมูล
- * @param id type
- */
-async function deleteData(id: string) {
-  showLoader();
-  await http
-    .delete(config.API.directorbyId(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await getList();
-    });
-}
-
-function resetFilter() {
-  filterKeyword.value = "";
-  if (filterRef.value) {
-    filterRef.value.focus();
-    getSearch();
-  }
-}
-
-function filterFn() {
-  getSearch();
+  dialogRemove($q, async () => {
+    showLoader();
+    await http
+      .delete(config.API.directorbyId(id))
+      .then(async () => {
+        await getList();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+      });
+  });
 }
 
 function openDetail(data: DirectorRowsResponse, typeChange: string) {
@@ -132,210 +107,188 @@ function onEdit(id: string, check: boolean) {
   isEdit.value = check;
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
 onMounted(() => {
   getList();
-  // get ข้อมูลแล้วโยนใส่ store
 });
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายการชื่อกรรมการ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div>
-        <q-btn
-          v-if="checkPermission($route)?.attrIsCreate"
-          @click="$router.push(`/discipline/director/add`)"
-          flat
-          dense
-          round
-          color="primary"
-          icon="mdi-plus"
-        >
-          <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
-        </q-btn>
+  <q-card flat bordered>
+    <div class="col-12 q-pa-md q-col-gutter-sm">
+      <div class="col-12">
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-3 col-md-4 col-lg-2">
+            <div class="row items-center">
+              <q-btn
+                v-if="checkPermission($route)?.attrIsCreate"
+                @click="$router.push(`/discipline/director/add`)"
+                flat
+                dense
+                round
+                color="primary"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
+          <q-space />
+          <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-7">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหา"
+                  @keydown.enter.prevent="getSearch"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-5">
+                <q-select
+                  v-model="dataStore.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="dataStore.columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
-      <q-space />
 
-      <q-input
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
-
-      <q-select
-        v-model="dataStore.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="dataStore.columns"
-        option-value="name"
-        
-        style="min-width: 140px"
-        class="col-xs-12 col-sm-3 col-md-2"
-      />
-    </div>
-
-    <div class="col-12">
-      <d-table
-        :columns="dataStore.columns"
-        :rows="dataStore.rows"
-        row-key="tb-list"
-        flat
-        bordered
-        :paging="true"
-        dense
-        :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
-        :visible-columns="dataStore.visibleColumns"
-      >
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="getList"
-          ></q-pagination>
-        </template>
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th auto-width />
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td auto-width>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsGet"
-                dense
-                flat
-                round
-                color="info"
-                @click="onEdit(props.row.id, false)"
-                icon="mdi-eye"
-              >
-                <q-tooltip>รายละเอียด</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="
-                  checkPermission($route)?.attrIsUpdate &&
-                  checkPermission($route)?.attrIsGet
-                "
-                dense
-                flat
-                round
-                color="edit"
-                @click="onEdit(props.row.id, true)"
-                icon="edit"
-              >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsDelete"
-                dense
-                flat
-                round
-                color="red"
-                @click="clickDelete(props.row.id)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'">
-                {{
-                  (pagination.page - 1) * pagination.rowsPerPage +
-                  props.rowIndex +
-                  1
-                }}
-              </div>
-              <div
-                v-else-if="
-                  col.name == 'totalInvestigate' &&
-                  props.row.totalInvestigate > 0
-                "
-                :class="
-                  checkPermission($route)?.attrIsGet
-                    ? 'text-blue cursor-pointer'
-                    : ''
-                "
-                @click="
-                  checkPermission($route)?.attrIsGet
-                    ? openDetail(props.row, 'investigate')
-                    : ''
-                "
-              >
-                {{ props.row.totalInvestigate }}
-              </div>
-              <div
-                v-else-if="
-                  col.name == 'totalDisciplinary' &&
-                  props.row.totalDisciplinary > 0
-                "
-                :class="
-                  checkPermission($route)?.attrIsGet
-                    ? 'text-blue cursor-pointer'
-                    : ''
-                "
-                @click="
-                  checkPermission($route)?.attrIsGet
-                    ? openDetail(props.row, 'disciplinary')
-                    : ''
-                "
-              >
-                {{ props.row.totalDisciplinary }}
-              </div>
-              <div v-else>
-                {{ col.value ?? "-" }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
+      <div class="col-12">
+        <p-table
+          :columns="dataStore.columns"
+          :rows="dataStore.rows"
+          row-key="tb-list"
+          flat
+          bordered
+          :paging="true"
+          dense
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="dataStore.visibleColumns"
+          v-model:pagination="pagination"
+          @request="onRequest"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  dense
+                  flat
+                  round
+                  color="info"
+                  @click="onEdit(props.row.id, false)"
+                  icon="mdi-eye"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermission($route)?.attrIsGet
+                  "
+                  dense
+                  flat
+                  round
+                  color="edit"
+                  @click="onEdit(props.row.id, true)"
+                  icon="edit"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsDelete"
+                  dense
+                  flat
+                  round
+                  color="red"
+                  @click="clickDelete(props.row.id)"
+                  icon="mdi-delete"
+                >
+                  <q-tooltip>ลบข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div
+                  v-else-if="
+                    col.name == 'totalInvestigate' &&
+                    props.row.totalInvestigate > 0
+                  "
+                  :class="
+                    checkPermission($route)?.attrIsGet
+                      ? 'text-blue cursor-pointer'
+                      : ''
+                  "
+                  @click="
+                    checkPermission($route)?.attrIsGet
+                      ? openDetail(props.row, 'investigate')
+                      : ''
+                  "
+                >
+                  {{ props.row.totalInvestigate }}
+                </div>
+                <div
+                  v-else-if="
+                    col.name == 'totalDisciplinary' &&
+                    props.row.totalDisciplinary > 0
+                  "
+                  :class="
+                    checkPermission($route)?.attrIsGet
+                      ? 'text-blue cursor-pointer'
+                      : ''
+                  "
+                  @click="
+                    checkPermission($route)?.attrIsGet
+                      ? openDetail(props.row, 'disciplinary')
+                      : ''
+                  "
+                >
+                  {{ props.row.totalDisciplinary }}
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </p-table>
+      </div>
     </div>
   </q-card>
 
diff --git a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
index bb391a6a0..bb73d2036 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/ListsPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -7,33 +7,28 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
-
-import type {
-  dataType,
-  DataOption,
-} from "@/modules/11_discipline/interface/response/suspend";
-import type { QTableProps } from "quasar";
-
-import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+import { usePagination } from "@/composables/usePagination";
 import {
   checkPermission,
   checkPermissionList,
   checkPermissionCreate,
 } from "@/utils/permissions";
 
+import type { QTableProps } from "quasar";
+import type {
+  dataType,
+  DataOption,
+} from "@/modules/11_discipline/interface/response/suspend";
+
+import DialogSendToCommand from "@/modules/11_discipline/components/7_ListSuspend/DialogSendToCommand.vue";
+
 /** use */
 const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const router = useRouter();
-const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  success,
-  date2Thai,
-  convertDateToAPI,
-} = mixin;
+const { messageError, showLoader, hideLoader, date2Thai, convertDateToAPI } =
+  useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", getList);
 
 const date = ref<any>(null);
 const employeeClass = ref<string>("");
@@ -49,19 +44,18 @@ const visibleColumns = ref<string[]>([
   "no",
   "profileType",
   "title",
-  "name",
+  "firstName",
   "position",
   "positionType",
   "positionLevel",
   "organization",
-  "dateTotal",
+  "startDateSuspend",
   "descriptionSuspend",
   "status",
 ]);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
 
 //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 const rows2 = ref<dataType[]>([]);
@@ -79,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "profileType",
     align: "left",
     label: "ประเภทตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "profileType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -94,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "firstName",
     align: "left",
     label: "ชื่อ - นามสกุล",
     sortable: true,
@@ -135,7 +129,7 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "dateTotal",
+    name: "startDateSuspend",
     align: "left",
     label: "วันที่เริ่มต้น-สิ้นสุดคำสั่ง",
     sortable: true,
@@ -156,28 +150,15 @@ const columns = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 
-const openModal = () => (modal.value = true);
-
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-function resetFilter() {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-  getSearch();
+function openModal() {
+  modal.value = true;
 }
 
 /** เปิด popup ส่งไปออกคำสั่ง โดย PENDING*/
@@ -201,28 +182,22 @@ function openModalOrder() {
 /** ดึงข้อมูลหน้าหลัก */
 async function getList() {
   showLoader();
-  const params: Record<string, any> = {};
-  if (date.value && date.value.length === 2) {
-    params.startDate = convertDateToAPI(date.value[0]);
-    params.endDate = convertDateToAPI(date.value[1]);
-  }
+  const paramsNew = {
+    ...params.value,
+    keyword: filterKeyword.value.trim(),
+    profileType: employeeClass.value,
+    ...(date.value?.length === 2 && {
+      startDate: convertDateToAPI(date.value[0]),
+      endDate: convertDateToAPI(date.value[1]),
+    }),
+  };
+
   await http
-    .get(
-      config.API.suspendMain(
-        pagination.value.page,
-        pagination.value.rowsPerPage,
-        filterKeyword.value.trim(),
-        employeeClass.value
-      ),
-      { params }
-    )
+    .get(config.API.suspendMain, { params: paramsNew })
     .then(async (res) => {
-      const data = await res.data.result.data;
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      await dataStore.getData(data);
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await dataStore.getData(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -232,27 +207,11 @@ async function getList() {
     });
 }
 
-function filterFn() {
-  getSearch();
-}
-
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 function convertType(val: string) {
   const data = val?.toLocaleUpperCase();
   switch (data) {
@@ -275,221 +234,215 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายชื่อผู้ถูกพักราชการ
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm">
-    <q-separator />
-    <div class="row q-pa-md">
+  <q-card flat bordered>
+    <div class="row q-pa-md q-col-gutter-sm">
       <div class="col-12">
-        <div class="row col-12 q-col-gutter-sm items-center">
-          <div>
-            <q-select
-              v-model="employeeClass"
-              outlined
-              dense
-              options-dense
-              emit-value
-              map-options
-              :options="employeeClassOption"
-              option-value="id"
-              option-label="name"
-              label="ประเภทตำแหน่ง"
-              style="min-width: 200px"
-              @update:model-value="getList"
-            />
-          </div>
-          <div>
-            <datepicker
-              v-model="date"
-              :locale="'th'"
-              autoApply
-              range
-              :enableTimePicker="false"
-              @update:model-value="getList()"
-              style="min-width: 280px"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  class="bg-white"
-                  dense
+        <div class="row q-col-gutter-sm">
+          <div class="col-xs-12 col-sm-7 col-md-6 col-lg-5">
+            <div class="row col-12 q-col-gutter-sm items-center">
+              <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
+                <q-select
+                  v-model="employeeClass"
                   outlined
-                  :label="`${'วันที่เริ่มต้น-สิ้นสุดคำสั่ง'}`"
-                  :model-value="
-                    date ? `${date2Thai(date[0])} - ${date2Thai(date[1])}` : ''
-                  "
+                  dense
+                  options-dense
+                  emit-value
+                  map-options
+                  :options="employeeClassOption"
+                  option-value="id"
+                  option-label="name"
+                  label="ประเภทตำแหน่ง"
+                  @update:model-value="getList"
+                />
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
+                <datepicker
+                  v-model="date"
+                  :locale="'th'"
+                  autoApply
+                  range
+                  :enableTimePicker="false"
+                  @update:model-value="getList()"
                 >
-                  <template v-slot:prepend>
-                    <q-icon
-                      size="18px"
-                      name="event"
-                      class="cursor-pointer"
-                      color="primary"
-                    ></q-icon>
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      class="bg-white"
+                      dense
+                      outlined
+                      :label="`${'วันที่เริ่มต้น-สิ้นสุดคำสั่ง'}`"
+                      :model-value="
+                        date
+                          ? `${date2Thai(date[0])} - ${date2Thai(date[1])}`
+                          : ''
+                      "
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          size="18px"
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        ></q-icon>
+                      </template>
+                      <template v-slot:append>
+                        <q-icon
+                          v-if="date !== null"
+                          name="clear"
+                          class="cursor-pointer"
+                          @click.prevent.stop="(date = null), getList()"
+                        />
+                      </template>
+                    </q-input>
                   </template>
+                </datepicker>
+              </div>
+              <div class="col-1 row justify-center">
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermissionList(['COMMAND']) &&
+                    checkPermissionCreate('COMMAND')
+                  "
+                  @click="openModalOrder"
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-account-arrow-right"
+                >
+                  <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
+                </q-btn>
+              </div>
+            </div>
+          </div>
+
+          <q-space />
+          <div class="col-xs-12 col-sm-4 col-md-5 col-lg-4">
+            <div class="row q-col-gutter-sm items-center">
+              <div class="col-7">
+                <q-input
+                  for="#search"
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  ref="filterRef"
+                  outlined
+                  placeholder="ค้นหา"
+                  @keydown.enter.prevent="getSearch"
+                >
                   <template v-slot:append>
-                    <q-icon
-                      v-if="date !== null"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click.prevent.stop="(date = null), getList()"
-                    />
+                    <q-icon name="search" />
                   </template>
                 </q-input>
-              </template>
-            </datepicker>
+              </div>
+              <div class="col-5">
+                <q-select
+                  v-model="dataStore.visibleColumns"
+                  multiple
+                  outlined
+                  dense
+                  options-dense
+                  :display-value="$q.lang.table.columns"
+                  emit-value
+                  map-options
+                  :options="columns"
+                  option-value="name"
+                />
+              </div>
+            </div>
           </div>
-          <div>
-            <q-btn
-              v-if="
-                checkPermission($route)?.attrIsUpdate &&
-                checkPermissionList(['COMMAND']) &&
-                checkPermissionCreate('COMMAND')
-              "
-              @click="openModalOrder"
-              flat
-              round
-              dense
-              color="primary"
-              icon="mdi-account-arrow-right"
-            >
-              <q-tooltip>ส่งไปออกคำสั่ง</q-tooltip>
-            </q-btn>
-          </div>
-          <q-space />
-
-          <q-input
-            for="#search"
-            standout
-            dense
-            v-model="filterKeyword"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.prevent="filterFn"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="dataStore.visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
         </div>
+      </div>
 
-        <div class="col-12 q-pt-sm">
-          <d-table
-            :columns="dataStore.columns"
-            :rows="dataStore.rows"
-            row-key="id"
-            :visible-columns="dataStore.visibleColumns"
-            :rows-per-page-options="[10, 25, 50, 100]"
-            @update:pagination="updatePagination"
-          >
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ total }} รายการ
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalList)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="getList"
-              ></q-pagination>
-            </template>
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th auto-width />
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <!-- <q-th auto-width /> -->
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props">
-                <q-td auto-width>
-                  <q-btn
-                    v-if="checkPermission($route)?.attrIsGet"
-                    @click="
-                      router.push(`/discipline-suspend-detail/${props.row.id}`)
-                    "
-                    flat
-                    dense
-                    round
-                    color="info"
-                    icon="mdi-eye"
-                  >
-                    <q-tooltip>รายละเอียด</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="
-                      checkPermission($route)?.attrIsUpdate &&
-                      checkPermission($route)?.attrIsGet
-                    "
-                    @click="router.push(`/discipline-suspend/${props.row.id}`)"
-                    flat
-                    dense
-                    round
-                    color="edit"
-                    icon="edit"
-                  >
-                    <q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
-                  </q-btn>
-                </q-td>
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name == 'no'">
-                    {{
-                      (pagination.page - 1) * pagination.rowsPerPage +
-                      props.rowIndex +
-                      1
-                    }}
-                  </div>
-                  <div v-else-if="col.name === 'name'" class="table_ellipsis">
-                    {{ props.row.prefix ? props.row.prefix : ""
-                    }}{{ props.row.firstName ? props.row.firstName : "" }}
-                    {{ props.row.lastName ? props.row.lastName : "" }}
-                  </div>
-                  <div v-else-if="col.name === 'title'" class="table_ellipsis">
-                    {{ props.row.title ? props.row.title : "-" }}
-                  </div>
-                  <div v-else-if="col.name === 'profileType'">
-                    {{
-                      props.row.profileType
-                        ? convertType(props.row.profileType.toUpperCase())
-                        : "-"
-                    }}
-                  </div>
-                  <div
-                    v-else-if="col.name === 'organization'"
-                    class="text-html"
-                    style="width: 250px"
-                  >
-                    {{ props.row.organization ? props.row.organization : "-" }}
-                  </div>
-                  <div v-else>
-                    {{ col.value ?? "-" }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </div>
+      <div class="col-12">
+        <p-table
+          :columns="dataStore.columns"
+          :rows="dataStore.rows"
+          row-key="id"
+          :visible-columns="dataStore.visibleColumns"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          v-model:pagination="pagination"
+          @request="onRequest"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  @click="
+                    router.push(`/discipline-suspend-detail/${props.row.id}`)
+                  "
+                  flat
+                  dense
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermission($route)?.attrIsGet
+                  "
+                  @click="router.push(`/discipline-suspend/${props.row.id}`)"
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                >
+                  <q-tooltip>แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div
+                  v-else-if="col.name === 'firstName'"
+                  class="table_ellipsis"
+                >
+                  {{ props.row.prefix ? props.row.prefix : ""
+                  }}{{ props.row.firstName ? props.row.firstName : "" }}
+                  {{ props.row.lastName ? props.row.lastName : "" }}
+                </div>
+                <div v-else-if="col.name === 'title'" class="table_ellipsis">
+                  {{ props.row.title ? props.row.title : "-" }}
+                </div>
+                <div v-else-if="col.name === 'profileType'">
+                  {{
+                    props.row.profileType
+                      ? convertType(props.row.profileType.toUpperCase())
+                      : "-"
+                  }}
+                </div>
+                <div
+                  v-else-if="col.name === 'organization'"
+                  class="text-html"
+                  style="width: 250px"
+                >
+                  {{ props.row.organization ? props.row.organization : "-" }}
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </p-table>
       </div>
     </div>
   </q-card>
diff --git a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
index b19836225..a5ce6c2c0 100644
--- a/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
+++ b/src/modules/11_discipline/components/8_AppealComplain/MainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, reactive } from "vue";
+import { ref, onMounted, reactive } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,6 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
 import { checkPermission } from "@/utils/permissions";
 import { calculateFiscalYear } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type { QTableProps } from "quasar";
 import type { RowList } from "@/modules/11_discipline/interface/response/appealComplain";
@@ -20,35 +21,26 @@ import { useDisciplineMainStore } from "@/modules/11_discipline/store/Main";
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
-const { showLoader, messageError, hideLoader, dialogConfirm } = mixin;
+const { showLoader, messageError, hideLoader } = mixin;
 const mainStore = useDisciplineMainStore();
-const modalStatusEdit = ref<boolean>(false);
-/** stoer */
 const dataStore = useAppealComplainStore();
+const { pagination, params, onRequest } = usePagination("", getData);
 const { fetchAppealComplain } = dataStore;
+
+/** store */
+const modalStatusEdit = ref<boolean>(false);
 const type = ref<DataOption[]>([
   { id: "ALL", name: "ทั้งหมด" },
   ...dataStore.typeOptions,
 ]);
-
 const filterKeyword = ref<string>("");
 const dataRow = ref<RowList[]>([]);
-
 const formData = reactive<any>({
   type: "ALL",
   status: "NEW",
   year: calculateFiscalYear(new Date()).toString(),
 });
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const visibleColumns = ref<string[]>([
   "no",
   "profileType",
@@ -63,8 +55,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
   "status",
 ]);
-
-// หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -79,7 +69,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "profileType",
     align: "left",
     label: "ประเภทตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "profileType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -88,7 +78,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "type",
     align: "left",
     label: "ประเภท",
-    sortable: true,
+    sortable: false,
     field: "type",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -110,8 +100,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "citizenId",
@@ -121,8 +109,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "citizenId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "year",
@@ -132,8 +118,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "caseType",
@@ -143,8 +127,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "caseType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "caseNumber",
@@ -154,8 +136,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "caseNumber",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "description",
@@ -165,8 +145,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "description",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "lastUpdatedAt",
@@ -176,8 +154,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "lastUpdatedAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -207,11 +183,6 @@ function editPage(id: string) {
   router.push(`/discipline-appealcomplain/${id}`);
 }
 
-/** ดึงข้อมูลเมื่อ กด enter */
-function filterFn() {
-  getSearch();
-}
-
 /** ปิด pop up */
 function close() {
   modalStatusEdit.value = false;
@@ -221,22 +192,19 @@ function close() {
 async function getData() {
   showLoader();
   await http
-    .get(
-      config.API.appealMainList(
-        formData.status,
-        formData.type,
-        formData.year,
-        pagination.value.page,
-        pagination.value.rowsPerPage,
-        filterKeyword.value
-      )
-    )
-    .then((res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      fetchAppealComplain(res.data.result.data);
+    .get(config.API.appealMainList, {
+      params: {
+        ...params.value,
+        status: formData.status,
+        type: formData.type,
+        year: formData.year,
+        keyword: filterKeyword.value,
+      },
+    })
+    .then(async (res) => {
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      await fetchAppealComplain(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -257,13 +225,8 @@ function yearAll() {
   getSearch();
 }
 
-/** ฟังชั่น เคลียฟิลเตอร์ */
-function resetFilter() {
-  filterKeyword.value = "";
-  getSearch();
-}
-const option = ref<any[]>(dataStore.statusOptions);
-const optionType = ref<any[]>(type.value);
+const option = ref<DataOption[]>(dataStore.statusOptions);
+const optionType = ref<DataOption[]>(type.value);
 /**
  * function ค้นหาข้อมูลใน option
  * @param val คำค้นหา
@@ -272,7 +235,7 @@ const optionType = ref<any[]>(type.value);
 function filterOptionFn(val: string, update: Function) {
   update(() => {
     option.value = dataStore.statusOptions.filter(
-      (e: any) => e.name.search(val) !== -1
+      (e: DataOption) => e.name.search(val) !== -1
     );
   });
 }
@@ -284,27 +247,17 @@ function filterOptionFn(val: string, update: Function) {
  */
 function filterOptionFnType(val: string, update: Function) {
   update(() => {
-    optionType.value = type.value.filter((e: any) => e.name.search(val) !== -1);
+    optionType.value = type.value.filter(
+      (e: DataOption) => e.name.search(val) !== -1
+    );
   });
 }
 
-function updatePagination(newPagination: any) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   getData();
@@ -317,283 +270,269 @@ onMounted(async () => {
   <div class="toptitle text-dark col-12 row items-center">
     รายการอุทธรณ์/ร้องทุกข์
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-mb-sm q-col-gutter-sm">
-      <div>
-        <q-btn
-          v-if="checkPermission($route)?.attrIsCreate"
-          id="addComplaints"
-          for="addComplaints"
-          dense
-          flat
-          round
-          color="primary"
-          icon="mdi-plus"
-          @click="redirectToPageadd()"
-          ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
-        >
-      </div>
-      <q-space />
-      <q-input
-        for="#search"
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
-      >
-        <template v-slot:append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
 
-      <q-select
-        id="visibleColumns"
-        for="visibleColumns"
-        v-model="dataStore.visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="dataStore.columns"
-        option-value="name"
-        style="min-width: 140px"
-        class="col-xs-12 col-sm-3 col-md-2"
-      />
-    </div>
-    <div class="col-12 row q-mb-sm">
-      <q-card bordered class="col-12 filter-card q-pa-sm">
-        <div class="row col-12 q-col-gutter-sm">
-          <div class="col-2">
-            <datepicker
-              v-model="formData.year"
-              class="col-2"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              @update:model-value="dataUpdate"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  outlined
-                  :model-value="
-                    formData.year === 0
-                      ? 'ทั้งหมด'
-                      : Number(formData.year) + 543
-                  "
-                  :label="`${'ปีงบประมาณ'}`"
-                >
-                  <template v-if="formData.year" v-slot:append>
-                    <q-icon
-                      name="cancel"
-                      @click.stop.prevent="yearAll"
-                      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>
-          </div>
-          <div class="col-2">
-            <q-select
-              v-model="formData.type"
-              label="ประเภท"
-              dense
-              outlined
-              emit-value
-              map-options
-              hide-selected
-              fill-input
-              option-label="name"
-              option-value="id"
-              :options="optionType"
-              @update:model-value="dataUpdate"
-              use-input
-              @filter="filterOptionFnType"
-            >
-              <template v-if="formData.type !== 'ALL'" v-slot:append>
-                <q-icon
-                  name="cancel"
-                  @click.stop.prevent="
-                    (optionType = type), (formData.type = 'ALL'), dataUpdate()
-                  "
-                  class="cursor-pointer"
-                />
-              </template>
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
-          <div class="col-3">
-            <q-select
-              v-model="formData.status"
-              label="สถานะ"
-              dense
-              outlined
-              emit-value
-              hide-selected
-              fill-input
-              map-options
-              option-label="name"
-              option-value="id"
-              :options="option"
-              @update:model-value="dataUpdate"
-              use-input
-              @filter="filterOptionFn"
-            >
-              <template v-if="formData.status !== 'ALL'" v-slot:append>
-                <q-icon
-                  name="cancel"
-                  @click.stop.prevent="
-                    (option = dataStore.statusOptions),
-                      (formData.status = 'ALL'),
-                      dataUpdate()
-                  "
-                  class="cursor-pointer"
-                />
-              </template>
-              <template v-slot:no-option>
-                <q-item>
-                  <q-item-section class="text-grey">
-                    ไม่มีข้อมูล
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-select>
-          </div>
+  <q-card flat bordered>
+    <div class="col-12 q-pa-md q-col-gutter-sm">
+      <div class="row q-col-gutter-sm">
+        <div>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsCreate"
+            id="addComplaints"
+            for="addComplaints"
+            dense
+            flat
+            round
+            color="primary"
+            icon="mdi-plus"
+            @click="redirectToPageadd()"
+            ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+          >
         </div>
-      </q-card>
-    </div>
+        <q-space />
+        <q-input
+          for="#search"
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          placeholder="ค้นหา"
+          @keydown.enter.prevent="getSearch"
+        >
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
 
-    <div class="col-12">
-      <d-table
-        ref="table"
-        :columns="dataStore.columns"
-        :rows="dataStore.rows"
-        row-key="id"
-        flat
-        bordered
-        :paging="true"
-        dense
-        class="custom-header-table"
-        :visible-columns="dataStore.visibleColumns"
-        :rows-per-page-options="[10, 25, 50, 100]"
-        @update:pagination="updatePagination"
-      >
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="pagination.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(totalList)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="getData"
-          ></q-pagination>
-        </template>
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th auto-width></q-th>
-            <q-th
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              style="color: #000000; font-weight: 500"
-            >
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td auto-width>
-              <q-btn
-                v-if="checkPermission($route)?.attrIsGet"
-                id="addComplaints"
-                for="addComplaints"
+        <q-select
+          id="visibleColumns"
+          for="visibleColumns"
+          v-model="dataStore.visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="dataStore.columns"
+          option-value="name"
+          style="min-width: 140px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <div class="col-12 row">
+        <q-card bordered class="col-12 filter-card q-pa-sm">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">
+              <datepicker
+                v-model="formData.year"
+                class="col-2"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:model-value="dataUpdate"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    :model-value="
+                      formData.year === 0
+                        ? 'ทั้งหมด'
+                        : Number(formData.year) + 543
+                    "
+                    :label="`${'ปีงบประมาณ'}`"
+                  >
+                    <template v-if="formData.year" v-slot:append>
+                      <q-icon
+                        name="cancel"
+                        @click.stop.prevent="yearAll"
+                        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>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">
+              <q-select
+                v-model="formData.type"
+                label="ประเภท"
                 dense
-                flat
-                round
-                color="info"
-                icon="mdi-eye"
-                @click="redirectToPageDetail(props.row.id)"
-                ><q-tooltip>รายละเอียดการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+                outlined
+                emit-value
+                map-options
+                hide-selected
+                fill-input
+                option-label="name"
+                option-value="id"
+                :options="optionType"
+                @update:model-value="dataUpdate"
+                use-input
+                @filter="filterOptionFnType"
               >
-              <q-btn
-                v-if="
-                  checkPermission($route)?.attrIsUpdate &&
-                  checkPermission($route)?.attrIsGet
-                "
-                id="addComplaints"
-                for="addComplaints"
-                flat
+                <template v-if="formData.type !== 'ALL'" v-slot:append>
+                  <q-icon
+                    name="cancel"
+                    @click.stop.prevent="
+                      (optionType = type), (formData.type = 'ALL'), dataUpdate()
+                    "
+                    class="cursor-pointer"
+                  />
+                </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2">
+              <q-select
+                v-model="formData.status"
+                label="สถานะ"
                 dense
-                round
-                color="edit"
-                icon="edit"
-                @click="editPage(props.row.id)"
-                ><q-tooltip>แก้ไขการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+                outlined
+                emit-value
+                hide-selected
+                fill-input
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="option"
+                @update:model-value="dataUpdate"
+                use-input
+                @filter="filterOptionFn"
               >
-            </q-td>
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name == 'no'">
-                {{
-                  (pagination.page - 1) * pagination.rowsPerPage +
-                  props.rowIndex +
-                  1
-                }}
-              </div>
-              <div v-else-if="col.name === 'title'" class="table_ellipsis">
-                {{ props.row.title }}
-              </div>
-              <div v-else-if="col.name === 'profileType'">
-                {{
-                  props.row.profileType
-                    ? mainStore.convertType(props.row.profileType)
-                    : "-"
-                }}
-              </div>
-              <div
-                v-else-if="col.name === 'description'"
-                class="table_ellipsis"
+                <template v-if="formData.status !== 'ALL'" v-slot:append>
+                  <q-icon
+                    name="cancel"
+                    @click.stop.prevent="
+                      (option = dataStore.statusOptions),
+                        (formData.status = 'ALL'),
+                        dataUpdate()
+                    "
+                    class="cursor-pointer"
+                  />
+                </template>
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+          </div>
+        </q-card>
+      </div>
+
+      <div class="col-12">
+        <p-table
+          ref="table"
+          :columns="dataStore.columns"
+          :rows="dataStore.rows"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="dataStore.visibleColumns"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          v-model:pagination="pagination"
+          @request="onRequest"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
               >
-                {{ props.row.description ? props.row.description : "-" }}
-              </div>
-              <div v-else>
-                {{ col.value ?? "-" }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  id="addComplaints"
+                  for="addComplaints"
+                  dense
+                  flat
+                  round
+                  color="info"
+                  icon="mdi-eye"
+                  @click="redirectToPageDetail(props.row.id)"
+                  ><q-tooltip>รายละเอียดการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+                >
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermission($route)?.attrIsGet
+                  "
+                  id="addComplaints"
+                  for="addComplaints"
+                  flat
+                  dense
+                  round
+                  color="edit"
+                  icon="edit"
+                  @click="editPage(props.row.id)"
+                  ><q-tooltip>แก้ไขการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
+                >
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else-if="col.name === 'title'" class="table_ellipsis">
+                  {{ props.row.title }}
+                </div>
+                <div v-else-if="col.name === 'profileType'">
+                  {{
+                    props.row.profileType
+                      ? mainStore.convertType(props.row.profileType)
+                      : "-"
+                  }}
+                </div>
+                <div
+                  v-else-if="col.name === 'description'"
+                  class="table_ellipsis"
+                >
+                  {{ props.row.description ? props.row.description : "-" }}
+                </div>
+                <div v-else>
+                  {{ col.value ?? "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </p-table>
+      </div>
     </div>
   </q-card>
 
diff --git a/src/modules/11_discipline/components/9_DisciplineReport/Main.vue b/src/modules/11_discipline/components/9_DisciplineReport/Main.vue
index 7ece8bfbd..cc1d00e46 100644
--- a/src/modules/11_discipline/components/9_DisciplineReport/Main.vue
+++ b/src/modules/11_discipline/components/9_DisciplineReport/Main.vue
@@ -508,7 +508,7 @@ onMounted(async () => {
                           dense
                           borderless
                           :model-value="Number(year) + 543"
-                          :label="`${'ปีพ.ศ.'}`"
+                          :label="`${'ปี พ.ศ.'}`"
                         >
                           <template v-slot:prepend>
                             <q-icon
diff --git a/src/modules/11_discipline/components/DialogSearchAdvanced.vue b/src/modules/11_discipline/components/DialogSearchAdvanced.vue
index 760575f16..3a858ab1d 100644
--- a/src/modules/11_discipline/components/DialogSearchAdvanced.vue
+++ b/src/modules/11_discipline/components/DialogSearchAdvanced.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watchEffect } from "vue";
+import { ref, watchEffect } from "vue";
 import { useRoute } from "vue-router";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -12,7 +12,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 
 const route = useRoute();
 const mixin = useCounterMixin();
-const { dateThaiRange, convertDateToAPI } = mixin;
+const { dateThaiRange } = mixin;
 const store = useDisciplineMainStore();
 const complainstStore = useComplainstDataStore();
 const investigateStore = useInvestigateFactStore();
@@ -34,7 +34,7 @@ function onClose() {
 }
 
 function fnSearch() {
-  props.getData?.(1);
+  props.getData?.();
   onClose();
 }
 
@@ -75,18 +75,17 @@ watchEffect(() => {
 });
 </script>
 <template>
-  <div>
-    <q-btn
-      size="12px"
-      flat
-      round
-      color="blue"
-      icon="mdi-filter-variant"
-      @click="onSearch"
-    >
-      <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
-    </q-btn>
-  </div>
+  <q-btn
+    size="12px"
+    flat
+    round
+    color="blue"
+    icon="mdi-filter-variant"
+    @click="onSearch"
+  >
+    <q-tooltip>ค้นหาขั้นสูง</q-tooltip>
+  </q-btn>
+
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 400px">
       <q-form greedy @submit.prevent @validation-success="fnSearch">
diff --git a/src/modules/11_discipline/store/AppealComplainStore.ts b/src/modules/11_discipline/store/AppealComplainStore.ts
index 33602437c..d4a346349 100644
--- a/src/modules/11_discipline/store/AppealComplainStore.ts
+++ b/src/modules/11_discipline/store/AppealComplainStore.ts
@@ -63,7 +63,7 @@ export const useAppealComplainStore = defineStore("AppealComplainStore", () => {
    * จัดเรียงข้อมูล
    * @param data ข้อมูลที่รับมาจาก API
    */
-  function fetchAppealComplain(data: MainList[]) {
+  async function fetchAppealComplain(data: MainList[]) {
     let dataList: RowList[] = data.map((e: MainList) => ({
       id: e.id,
       profileId: e.profileId,
diff --git a/src/modules/11_discipline/store/DirectorStore.ts b/src/modules/11_discipline/store/DirectorStore.ts
index 446b251cf..2fe690146 100644
--- a/src/modules/11_discipline/store/DirectorStore.ts
+++ b/src/modules/11_discipline/store/DirectorStore.ts
@@ -14,7 +14,7 @@ export const useDisciplineDirectorDataStore = defineStore(
     const rows = ref<DirectorRowsResponse[]>([]);
     const visibleColumns = ref<string[]>([
       "no",
-      "fullName",
+      "firstName",
       "position",
       "email",
       "phone",
@@ -34,7 +34,7 @@ export const useDisciplineDirectorDataStore = defineStore(
         style: "font-size: 14px",
       },
       {
-        name: "fullName",
+        name: "firstName",
         align: "left",
         label: "ชื่อ-นามสกุล",
         sortable: true,
diff --git a/src/modules/11_discipline/store/InvestigateDisStore.ts b/src/modules/11_discipline/store/InvestigateDisStore.ts
index b775fc394..d93cdce23 100644
--- a/src/modules/11_discipline/store/InvestigateDisStore.ts
+++ b/src/modules/11_discipline/store/InvestigateDisStore.ts
@@ -4,7 +4,7 @@ import type { QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { Persons } from "@/modules/11_discipline/interface/request/Disciplinary";
+import type { Persons } from "@/modules/11_discipline/interface/request/disciplinary";
 import type {
   investigateDisDataRowType,
   DataOption,
@@ -81,7 +81,7 @@ export const useInvestigateDisStore = defineStore(
       "offenseDetails",
       "disciplinaryFaultLevel",
       "disciplinaryCaseFault",
-      "disciplinaryDate",
+      "disciplinaryDateStart",
       "dateReceived",
       "status",
     ]);
@@ -113,8 +113,6 @@ export const useInvestigateDisStore = defineStore(
         field: "respondentType",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "offenseDetails",
@@ -124,8 +122,6 @@ export const useInvestigateDisStore = defineStore(
         field: "offenseDetails",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "disciplinaryFaultLevel",
@@ -135,8 +131,6 @@ export const useInvestigateDisStore = defineStore(
         field: "disciplinaryFaultLevel",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "disciplinaryCaseFault",
@@ -146,11 +140,9 @@ export const useInvestigateDisStore = defineStore(
         field: "disciplinaryCaseFault",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "disciplinaryDate",
+        name: "disciplinaryDateStart",
         align: "left",
         label: "วันที่สอบสวน",
         sortable: true,
@@ -171,7 +163,7 @@ export const useInvestigateDisStore = defineStore(
         name: "status",
         align: "left",
         label: "สถานะ",
-        sortable: true,
+        sortable: false,
         field: "status",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
diff --git a/src/modules/11_discipline/store/InvestigateFactStore.ts b/src/modules/11_discipline/store/InvestigateFactStore.ts
index 8c0240907..54d3c0f75 100644
--- a/src/modules/11_discipline/store/InvestigateFactStore.ts
+++ b/src/modules/11_discipline/store/InvestigateFactStore.ts
@@ -67,7 +67,7 @@ export const useInvestigateFactStore = defineStore(
       "respondentType",
       "offenseDetails",
       "investigationDetail",
-      "dateInvestigate",
+      "investigationDateStart",
       "investigationStatusResult",
       "dateReceived",
       "status",
@@ -101,8 +101,6 @@ export const useInvestigateFactStore = defineStore(
         field: "respondentType",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "offenseDetails",
@@ -112,8 +110,6 @@ export const useInvestigateFactStore = defineStore(
         field: "offenseDetails",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "investigationDetail",
@@ -123,19 +119,15 @@ export const useInvestigateFactStore = defineStore(
         field: "investigationDetail",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "dateInvestigate",
+        name: "investigationDateStart",
         align: "left",
         label: "วันที่สืบสวน",
         sortable: true,
         field: "dateInvestigate",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "investigationStatusResult",
@@ -145,8 +137,6 @@ export const useInvestigateFactStore = defineStore(
         field: "investigationStatusResult",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "dateReceived",
@@ -156,8 +146,6 @@ export const useInvestigateFactStore = defineStore(
         field: "dateReceived",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "status",
diff --git a/src/modules/11_discipline/store/ResultStore.ts b/src/modules/11_discipline/store/ResultStore.ts
index 54406a2fc..b7b4020c6 100644
--- a/src/modules/11_discipline/store/ResultStore.ts
+++ b/src/modules/11_discipline/store/ResultStore.ts
@@ -42,7 +42,7 @@ export const useDisciplineResultStore = defineStore(
       "offenseDetails",
       "disciplinaryFaultLevel",
       "disciplinaryCaseFault",
-      "disciplinaryDate",
+      "disciplinaryDateStart",
       "resultDisciplineType",
       "resultTitleType",
       "resultOc",
@@ -77,8 +77,6 @@ export const useDisciplineResultStore = defineStore(
         field: "respondentType",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "offenseDetails",
@@ -88,8 +86,6 @@ export const useDisciplineResultStore = defineStore(
         field: "offenseDetails",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "disciplinaryFaultLevel",
@@ -99,8 +95,6 @@ export const useDisciplineResultStore = defineStore(
         field: "disciplinaryFaultLevel",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
         name: "disciplinaryCaseFault",
@@ -110,11 +104,9 @@ export const useDisciplineResultStore = defineStore(
         field: "disciplinaryCaseFault",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
-        sort: (a: string, b: string) =>
-          a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
       },
       {
-        name: "disciplinaryDate",
+        name: "disciplinaryDateStart",
         align: "left",
         label: "วันที่สอบสวน",
         sortable: true,
@@ -162,7 +154,7 @@ export const useDisciplineResultStore = defineStore(
         name: "status",
         align: "left",
         label: "สถานะ",
-        sortable: true,
+        sortable: false,
         field: "status",
         headerStyle: "font-size: 14px",
         style: "font-size: 14px",
diff --git a/src/modules/15_development/components/Record.vue b/src/modules/15_development/components/Record.vue
index 79052b211..de565e046 100644
--- a/src/modules/15_development/components/Record.vue
+++ b/src/modules/15_development/components/Record.vue
@@ -340,7 +340,11 @@ onMounted(() => {
               </q-icon>
             </div>
 
-            <div v-else-if="col.name === 'org'" class="table_ellipsis">
+            <div
+              v-else-if="col.name === 'org'"
+              class="text-html"
+              style="min-width: 200px"
+            >
               {{ col.value ? col.value : "-" }}
             </div>
             <div v-else>
diff --git a/src/modules/18_command/components/DialogCreateCommand.vue b/src/modules/18_command/components/DialogCreateCommand.vue
index 0c8d17e03..d29ce53f6 100644
--- a/src/modules/18_command/components/DialogCreateCommand.vue
+++ b/src/modules/18_command/components/DialogCreateCommand.vue
@@ -438,8 +438,8 @@ watch(
                     :model-value="
                       commandYear == null ? null : commandYear + 543
                     "
-                    :label="`${'พ.ศ.'}`"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                    label="ปี พ.ศ."
+                    :rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']"
                   >
                     <template v-slot:prepend>
                       <q-icon
@@ -478,8 +478,8 @@ watch(
                   outlined
                   hide-bottom-space
                   :model-value="commandYear == null ? null : commandYear + 543"
-                  :label="`${'พ.ศ.'}`"
-                  :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  label="ปี พ.ศ."
+                  :rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']"
                 >
                   <template v-slot:prepend>
                     <q-icon
diff --git a/src/modules/18_command/components/DialogCreateCommandORG.vue b/src/modules/18_command/components/DialogCreateCommandORG.vue
index 54f99f11e..7f8a71c52 100644
--- a/src/modules/18_command/components/DialogCreateCommandORG.vue
+++ b/src/modules/18_command/components/DialogCreateCommandORG.vue
@@ -431,8 +431,8 @@ watch(modal, async () => {
                     :model-value="
                       commandYear == null ? null : commandYear + 543
                     "
-                    :label="`${'พ.ศ.'}`"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                    label="ปี พ.ศ."
+                    :rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']"
                   >
                     <template v-slot:prepend>
                       <q-icon
diff --git a/src/modules/18_command/components/Main/DialogFormCommand.vue b/src/modules/18_command/components/Main/DialogFormCommand.vue
index 5b5616415..47b3bad01 100644
--- a/src/modules/18_command/components/Main/DialogFormCommand.vue
+++ b/src/modules/18_command/components/Main/DialogFormCommand.vue
@@ -182,8 +182,8 @@ watch(modal, () => {
                     :model-value="
                       commandYear == null ? null : commandYear + 543
                     "
-                    :label="`${'พ.ศ.'}`"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                    label="ปี พ.ศ."
+                    :rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']"
                   >
                     <template v-slot:prepend>
                       <q-icon
diff --git a/src/modules/18_command/components/Step/1_Detail.vue b/src/modules/18_command/components/Step/1_Detail.vue
index 2317b0526..34d7cd38e 100644
--- a/src/modules/18_command/components/Step/1_Detail.vue
+++ b/src/modules/18_command/components/Step/1_Detail.vue
@@ -210,7 +210,7 @@ onMounted(async () => {
                         ? null
                         : formData.commandYear + 543
                     "
-                    :label="`${'พ.ศ.'}`"
+                    label="ปี พ.ศ."
                   >
                     <template v-slot:prepend>
                       <q-icon
diff --git a/src/modules/18_command/views/lists.vue b/src/modules/18_command/views/lists.vue
index 7df375d27..f3d66afbe 100644
--- a/src/modules/18_command/views/lists.vue
+++ b/src/modules/18_command/views/lists.vue
@@ -6,7 +6,6 @@ import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
 import { usePagination } from "@/composables/usePagination";
-import { calculateFiscalYear } from "@/utils/function";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -37,7 +36,7 @@ const tabsManu = ref<ItemTabs[]>([
 ]);
 //ฟอร์มช้อมูลการค้นหา
 const queryParams = reactive<FormQuery>({
-  year: calculateFiscalYear(new Date()), //ปีงบประมาณ
+  year: new Date().getFullYear(), //พ.ศ.
   keyword: "", //คำค้นหา
   commandTypeId: "",
 });
@@ -126,7 +125,7 @@ onMounted(async () => {
               :model-value="
                 queryParams.year == null ? null : queryParams.year + 543
               "
-              :label="`${'ปีงบประมาณ'}`"
+              label="ปี พ.ศ."
             >
               <template v-slot:prepend>
                 <q-icon