diff --git a/src/components/TablePagination.vue b/src/components/TablePagination.vue
new file mode 100644
index 000000000..02ed5960a
--- /dev/null
+++ b/src/components/TablePagination.vue
@@ -0,0 +1,239 @@
+<template>
+  <q-table
+    ref="table"
+    flat
+    bordered
+    class="custom-header-table"
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+    @request="onRequest"
+    :grid="!$q.screen.gt.xs"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    :loading="loading"
+  >
+    <template v-slot:pagination="scope">
+      ทั้งหมด
+      {{
+        pagination.rowsNumber.toLocaleString() ||
+        attrs.rows.length.toLocaleString()
+      }}
+      รายการ
+      <q-pagination
+        v-model="pagination.page"
+        @update:model-value="handlePageChange"
+        active-color="primary"
+        color="dark"
+        :max="scope.pagesNumber"
+        :max-pages="5"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
+    </template>
+
+    <template v-for="(_, slot) in slots" v-slot:[slot]="scope" :key="slot">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+
+    <template v-slot:loading>
+      <q-inner-loading showing class="q-mt-lg">
+        <q-spinner-dots color="primary" size="40px" />
+      </q-inner-loading>
+    </template>
+
+    <template v-slot:no-data>
+      <div
+        v-if="!loading && attrs.rows.length === 0"
+        class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+      >
+        <span> ไม่พบข้อมูล </span>
+      </div>
+    </template>
+
+    <!-- <template #item="props">
+      <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        <q-card bordered flat>
+          <q-list>
+            <q-item
+              v-for="col in props.cols.filter((col:any) => col.name !== 'desc')"
+              :key="col.name"
+            >
+              <q-item-section>
+                <q-item-label caption>{{ col.label }}</q-item-label>
+
+                <q-item-label v-if="col.name === 'no'">
+                  {{ props.rowIndex + 1 }}
+                </q-item-label>
+
+                <q-item-label v-else>{{ col.value }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template> -->
+  </q-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs, useSlots, computed, watch } from "vue";
+
+const attrs = ref<any>(useAttrs());
+const slots = ref<any>(useSlots());
+
+const emit = defineEmits(["update:pagination", "request"]);
+
+const props = defineProps({
+  paging: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Object,
+    default: () => ({
+      sortBy: "desc",
+      descending: false,
+      page: 1,
+      rowsPerPage: 10,
+      // rowsNumber: 0,
+    }),
+  },
+});
+
+// Internal pagination state ที่จะจัดการเอง
+const internalPagination = ref({
+  ...props.pagination,
+});
+
+// ใช้ computed เพื่อ sync กับ props และ internal state
+const pagination = computed({
+  get: () => internalPagination.value,
+  set: (value) => {
+    internalPagination.value = { ...value };
+    emit("update:pagination", value);
+  },
+});
+
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (props.paging == true)
+    return " " + start + " ถึง " + end + " จากจำนวน " + total + " รายการ";
+  else return start + "-" + end + " ใน " + total;
+};
+
+function onRequest(requestProp: any) {
+  if (!requestProp || !requestProp.pagination) {
+    return;
+  }
+
+  const { pagination: newPagination } = requestProp;
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    ...newPagination,
+  };
+
+  // if (isPageChange) {
+  emit("request", requestProp);
+  // }
+}
+
+function handlePageChange(newPage: number) {
+  if (!newPage || newPage < 1) {
+    return;
+  }
+
+  internalPagination.value = {
+    ...internalPagination.value,
+    page: newPage,
+  };
+
+  // สร้าง request object เหมือนกับ onRequest
+  const requestProp = {
+    pagination: internalPagination.value,
+    filter: null,
+    getCellValue: () => {},
+  };
+
+  emit("request", requestProp);
+}
+
+// Watch props เพื่ออัปเดต internal state เมื่อ parent เปลี่ยน
+watch(
+  () => props.pagination,
+  (newPagination) => {
+    internalPagination.value = { ...newPagination };
+  },
+  { deep: true, immediate: true }
+);
+</script>
+
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+.custom-header-table {
+  height: auto;
+  .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;
+    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;
+  }
+  .q-table__middle {
+    margin-bottom: 0 !important;
+    min-height: 0px !important;
+  }
+
+  // Loading styles
+  .loading-overlay {
+    width: 100%;
+  }
+
+  .loading-row {
+    background: white;
+  }
+
+  .loading-cell {
+    text-align: center;
+    padding: 60px 20px;
+    border: none;
+  }
+
+  .loading-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .loading-text {
+    color: #666;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/composables/usePagination.ts b/src/composables/usePagination.ts
new file mode 100644
index 000000000..cee46621d
--- /dev/null
+++ b/src/composables/usePagination.ts
@@ -0,0 +1,54 @@
+import { ref, computed } from "vue";
+import type { PropsTable } from "@/interface/index/PropsTable";
+
+export function usePagination(
+  defaultSort = "",
+  fetchFunction?: () => Promise<any>
+) {
+  const pagination = ref<PropsTable.Pagination>({
+    sortBy: defaultSort,
+    descending: true,
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+  });
+
+  const params = computed(() => {
+    const queryParams: Record<string, string> = {
+      page: pagination.value.page.toString(),
+      pageSize: pagination.value.rowsPerPage.toString(),
+    };
+
+    if (pagination.value.sortBy) {
+      queryParams.sortBy = pagination.value.sortBy;
+      queryParams.descending = (
+        pagination.value.descending ?? false
+      ).toString();
+    }
+
+    return queryParams;
+  });
+
+  async function onRequest(props: PropsTable.RequestProps) {
+    const newPagination = props?.pagination || props;
+    if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+
+    pagination.value = { ...newPagination };
+    if (fetchFunction) {
+      await fetchFunction(); // เรียกฟังก์ชันที่ส่งเข้ามา
+    }
+  }
+
+  async function checkAndUpdatePage(totalRows: number) {
+    if (totalRows === 1 && pagination.value.page > 1) {
+      pagination.value.page = pagination.value.page - 1;
+    }
+  }
+
+  return {
+    pagination,
+    params,
+    onRequest,
+    checkAndUpdatePage,
+  };
+}
diff --git a/src/interface/index/PropsTable.ts b/src/interface/index/PropsTable.ts
new file mode 100644
index 000000000..b9d4fe063
--- /dev/null
+++ b/src/interface/index/PropsTable.ts
@@ -0,0 +1,36 @@
+/** Namespace สำหรับ Table-related types */
+export namespace PropsTable {
+  /** Interface สำหรับ pagination object */
+  export interface Pagination {
+    /** หน้าปัจจุบัน (เริ่มจาก 1) */
+    page: number;
+    /** จำนวนแถวต่อหน้า */
+    rowsPerPage: number;
+    /** จำนวนแถวทั้งหมด */
+    rowsNumber?: number;
+    /** คอลัมน์ที่ใช้ sort */
+    sortBy?: string;
+    /** เรียงจากมากไปน้อย */
+    descending?: boolean;
+
+    rowsTotal?: number;
+  }
+
+  /** Interface สำหรับ request props จาก d-table */
+  export interface RequestProps {
+    /** ข้อมูล pagination */
+    pagination: Pagination;
+    /** ตัวกรองข้อมูล */
+    filter?: any;
+    /** function สำหรับดึงค่าจาก cell */
+    getCellValue?: (col: any, row: any) => any;
+  }
+
+  /** Union type สำหรับ handleRequest function */
+  export type HandleRequestProps = RequestProps;
+}
+
+// Export แบบเดิมเพื่อ backward compatibility
+export type TablePagination = PropsTable.Pagination;
+export type TableRequestProps = PropsTable.RequestProps;
+export type HandleRequestProps = PropsTable.HandleRequestProps;
diff --git a/src/main.ts b/src/main.ts
index e179635f1..570937672 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -73,5 +73,10 @@ app.component(
   defineAsyncComponent(() => import("@/components/Table.vue"))
 );
 
+app.component(
+  "p-table",
+  defineAsyncComponent(() => import("@/components/TablePagination.vue"))
+);
+
 app.config.globalProperties.$http = http;
 app.mount("#app");
diff --git a/src/modules/01_masterdata/components/competency/01ListCompetency.vue b/src/modules/01_masterdata/components/competency/01ListCompetency.vue
index ee6fcfc0e..aa3ab91e0 100644
--- a/src/modules/01_masterdata/components/competency/01ListCompetency.vue
+++ b/src/modules/01_masterdata/components/competency/01ListCompetency.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
@@ -9,13 +9,11 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useKPIDataStore } from "@/modules/01_masterdata/stores/KPIStore";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
+
+
+import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
 
-import type {
-  DataOption,
-  NewPagination,
-} from "@/modules/01_masterdata/interface/index/Main";
-import type { FormQueryCapacity } from "@/modules/01_masterdata/interface/request/Main";
 import type { ResDataCapacity } from "@/modules/01_masterdata/interface/response/Main";
 
 import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summary.vue";
@@ -23,6 +21,10 @@ import CompetencyTotal from "@/modules/01_masterdata/components/competency/Summa
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);
 
 const store = useKPIDataStore();
 const router = useRouter();
@@ -36,20 +38,12 @@ const columns = ref<QTableProps["columns"]>([
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>(["name"]);
 
 const rows = ref<ResDataCapacity[]>([]); // ข้อมูลสมรรถนะ
-const total = ref<number>(0); // จำนวนรายการทั้งหมด
-const totalList = ref<number>(1); // จำนวนหน้าทั้งหมด
-const formQuery = reactive<FormQueryCapacity>({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-}); // form query สำหรับการค้นหา
+const keyword = ref<string>(""); // คำค้นหา
 const competencyTypeOp = ref<DataOption[]>([
   {
     id: "HEAD",
@@ -76,18 +70,17 @@ const competencyTypeOp = ref<DataOption[]>([
 /** ฟังก์ชันดึงข้อมูลรายการสมรรถนะ */
 async function fetchList() {
   showLoader();
+  const queryParams = {
+    ...params.value,
+    keyword: keyword.value.trim(),
+    type: store.competencyTypeVal,
+  };
   await http
-    .get(
-      config.API.kpiCapacity +
-        `/edit?page=${formQuery.page}&pageSize=${
-          formQuery.pageSize
-        }&keyword=${formQuery.keyword.trim()}&type=${store.competencyTypeVal}`
-    )
+    .get(config.API.kpiCapacity + "/edit", { params: queryParams })
     .then(async (res) => {
-      total.value = res.data.result.total;
-      const data: ResDataCapacity[] = res.data.result.data;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      rows.value = data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -123,11 +116,7 @@ function deleteData(id: string) {
     await http
       .delete(config.API.kpiCapacity + `/${id}`)
       .then(async () => {
-        formQuery.page = await updateCurrentPage(
-          formQuery.page,
-          totalList.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
         await fetchList();
         success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -146,26 +135,10 @@ function onAdd() {
 }
 
 function fetchNewList() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   fetchList();
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchNewList();
-  }
-);
-
 onMounted(() => {
   fetchList();
 });
@@ -206,7 +179,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
-        v-model="formQuery.keyword"
+        v-model="keyword"
         label="ค้นหา"
         @keyup.enter="fetchNewList()"
       >
@@ -230,7 +203,7 @@ onMounted(() => {
     </div>
   </q-toolbar>
 
-  <d-table
+  <p-table
     ref="table"
     :columns="columns"
     :rows="rows"
@@ -242,7 +215,8 @@ onMounted(() => {
     :rows-per-page-options="[10, 25, 50, 100]"
     class="custom-header-table"
     :visible-columns="visibleColumns"
-    @update:pagination="updatePagination"
+    @request="onRequest"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -303,19 +277,5 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="formQuery.page"
-        active-color="primary"
-        color="dark"
-        :max="Number(totalList)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="fetchList"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 </template>
diff --git a/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue b/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
index 63b5478cd..6b06b528e 100644
--- a/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
+++ b/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
@@ -7,10 +7,9 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type { DataKPIGroup } from "@/modules/01_masterdata/interface/response/Main";
-import type { NewPagination } from "@/modules/14_KPI/interface/index/Main";
 
 import dialogHeader from "@/components/DialogHeader.vue";
 
@@ -24,6 +23,10 @@ const {
   messageError,
   success,
 } = mixin;
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchData
+);
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -34,21 +37,13 @@ const columns = ref<QTableProps["columns"]>([
     field: "nameGroupKPI",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>(["nameGroupKPI"]);
 
-const formQuery = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-const totalList = ref<number>(1); //จำนวนหน้าทั้งหมด
-const total = ref<number>(0); // จำนวนรายการทั้งหมด
 const modal = ref<boolean>(false); // เปิด/ปิด dialog
 const rows = ref<DataKPIGroup[]>([]); // ข้อมูลกลุ่มงาน
+const keyword = ref<string>(""); // คำค้นหา
 const groupName = ref<string>(""); // ชื่อกลุ่มงาน
 const editStatus = ref<boolean>(false); // สถานะการแก้ไข
 const editId = ref<string>(""); // รหัสกลุ่มงานที่ต้องการแก้ไข
@@ -57,17 +52,16 @@ const editId = ref<string>(""); // รหัสกลุ่มงานที่
 async function fetchData() {
   showLoader();
   await http
-    .get(
-      config.API.kpiGroup +
-        `/edit?page=${formQuery.page}&pageSize=${
-          formQuery.pageSize
-        }&keyword=${formQuery.keyword.trim()}`
-    )
+    .get(config.API.kpiGroup + "/edit", {
+      params: {
+        ...params.value,
+        keyword: keyword.value.trim(),
+      },
+    })
     .then(async (res) => {
-      total.value = res.data.result.total;
-      const data = res.data.result;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      rows.value = data.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -127,11 +121,7 @@ async function deleteData(id: string) {
   await http
     .delete(config.API.kpiGroupById(id))
     .then(async () => {
-      formQuery.page = await updateCurrentPage(
-        formQuery.page,
-        totalList.value,
-        rows.value.length
-      );
+      await checkAndUpdatePage(rows.value.length);
       await fetchData();
       success($q, "ลบข้อมูลสำเร็จ");
     })
@@ -179,29 +169,12 @@ async function onSubmit() {
   );
 }
 
-/**
- * ฟังก์ชันอัปเดตข้อมูล Pagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** ฟังก์ชันดึงข้อมูลกลุ่มงานใหม่ */
 function fetchNewList() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   fetchData();
 }
 
-/** ฟังก์ชันติดตามการเปลี่ยนแปลงจำนวนแถวต่อหน้า */
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchNewList();
-  }
-);
-
 /** lifecycle hook */
 onMounted(() => {
   fetchData();
@@ -225,7 +198,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
-        v-model="formQuery.keyword"
+        v-model="keyword"
         label="ค้นหา"
         @keyup.enter="fetchNewList()"
       >
@@ -247,7 +220,7 @@ onMounted(() => {
     </div>
   </q-toolbar>
 
-  <d-table
+  <p-table
     ref="table"
     :columns="columns"
     :rows="rows"
@@ -257,9 +230,10 @@ onMounted(() => {
     :paging="true"
     dense
     class="custom-header-table"
-    :rows-per-page-options="[10, 25, 50, 100]"
+    :rows-per-page-options="[1, 10, 25, 50, 100]"
     :visible-columns="visibleColumns"
-    @update:pagination="updatePagination"
+    @request="onRequest"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -309,21 +283,7 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="formQuery.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>
 
   <q-dialog v-model="modal" persistent>
     <q-card flat bordered style="min-width: 50vh">
diff --git a/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue b/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
index 184fb47b2..30df07363 100644
--- a/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
+++ b/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
@@ -9,6 +9,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type {
   DataOption,
@@ -34,6 +35,10 @@ const {
   success,
   dialogConfirm,
 } = mixin;
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  getData
+);
 
 const id = ref<string>(""); // รหัสกลุ่มงานที่ต้องการแก้ไข
 const modal = ref<boolean>(false); // เปิด/ปิด dialog
@@ -49,14 +54,8 @@ const positionMainOp = ref<DataOption[]>([]); // ตำแหน่งหลั
 const competencyOp = ref<DataOption[]>([]); // สมรรถนะ
 const competencyOpMain = ref<DataOption[]>([]); // สมรรถนะหลัก
 
-const formQuery = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-const totalList = ref<number>(1); // จำนวนหน้าทั้งหมด
-const total = ref<number>(0); // จำนวนรายการทั้งหมด
 const rows = ref<ListLinkGroup[]>([]); // ข้อมูลเชื่อมโยงกับกลุ่มงานและตำแหน่ง
+const keyword = ref<string>(""); // คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
     name: "groupName",
@@ -66,30 +65,24 @@ const columns = ref<QTableProps["columns"]>([
     field: "groupName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "positions",
     align: "left",
     label: "ตำแหน่ง",
-    sortable: true,
+    sortable: false,
     field: "positions",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "capacitys",
     align: "left",
     label: "สมรรถนะประจำกลุ่มงาน",
-    sortable: true,
+    sortable: false,
     field: "capacitys",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 const visibleColumns = ref<string[]>(["groupName", "positions", "capacitys"]);
@@ -97,18 +90,17 @@ const visibleColumns = ref<string[]>(["groupName", "positions", "capacitys"]);
 /** ฟังก์ชันดึงข้อมูลรายการเชื่อมโยงกับกลุ่มงานและตำแหน่ง */
 async function getData() {
   showLoader();
-  http
-    .get(
-      config.API.kpiLink +
-        `/edit?page=${formQuery.page}&pageSize=${
-          formQuery.pageSize
-        }&keyword=${formQuery.keyword.trim()}`
-    )
+  await http
+    .get(config.API.kpiLink + "/edit", {
+      params: {
+        ...params.value,
+        keyword: keyword.value.trim(),
+      },
+    })
     .then((res) => {
-      total.value = res.data.result.total;
-      const data = res.data.result;
-      totalList.value = Math.ceil(res.data.result.total / formQuery.pageSize);
-      rows.value = data.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -127,11 +119,7 @@ async function deleteData(id: string) {
   await http
     .delete(config.API.kpiLink + `/${id}`)
     .then(async () => {
-      formQuery.page = await updateCurrentPage(
-        formQuery.page,
-        totalList.value,
-        rows.value.length
-      );
+      await checkAndUpdatePage(rows.value.length);
       await getData();
       success($q, "ลบข้อมูลสำเร็จ");
     })
@@ -346,29 +334,12 @@ function filterOptionSelect(val: string, update: Function, type: string) {
   }
 }
 
-/**
- * ฟังก์ชันอัปเดต Pagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  formQuery.page = 1;
-  formQuery.pageSize = newPagination.rowsPerPage;
-}
-
 /** ฟังก์ชันดึงข้อมูลใหม่ */
 function fetchNewList() {
-  formQuery.page = 1;
+  pagination.value.page = 1;
   getData();
 }
 
-/** ฟังก์ชันติดตามการเปลี่ยนแปลงจำนวนแถวต่อหน้า */
-watch(
-  () => formQuery.pageSize,
-  () => {
-    fetchNewList();
-  }
-);
-
 /** lifecycle hook */
 onMounted(() => {
   getData();
@@ -392,7 +363,7 @@ onMounted(() => {
       <q-input
         outlined
         dense
-        v-model="formQuery.keyword"
+        v-model="keyword"
         label="ค้นหา"
         @keyup.enter="fetchNewList()"
       >
@@ -415,7 +386,7 @@ onMounted(() => {
     </div>
   </q-toolbar>
 
-  <d-table
+  <p-table
     ref="table"
     :columns="columns"
     :rows="rows"
@@ -426,8 +397,9 @@ onMounted(() => {
     class="custom-header-table"
     :visible-columns="visibleColumns"
     :separator="'cell'"
-    :rows-per-page-options="[1, 10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    :rows-per-page-options="[10, 25, 50, 100]"
+    @request="onRequest"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -495,21 +467,7 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ total }} รายการ
-      <q-pagination
-        v-model="formQuery.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>
-  </d-table>
+  </p-table>
 
   <q-dialog v-model="modal" persistent>
     <q-card flat bordered style="min-width: 80vh">
diff --git a/src/modules/01_masterdata/interface/request/Main.ts b/src/modules/01_masterdata/interface/request/Main.ts
index 0dec0732c..cd13ee370 100644
--- a/src/modules/01_masterdata/interface/request/Main.ts
+++ b/src/modules/01_masterdata/interface/request/Main.ts
@@ -12,8 +12,8 @@ interface DataListsObject {
 }
 
 interface FormListMainByRole {
-  page: number;
-  pageSize: number;
+  page?: number;
+  pageSize?: number;
   position: string;
   round: string;
   keyword: string;
@@ -60,8 +60,8 @@ interface FormFilterAssignment {
   keyword: string;
   period: string;
   year: number | string | null;
-  pageSize: number;
-  page: number;
+  pageSize?: number;
+  page?: number;
 }
 
 export type {
diff --git a/src/modules/01_masterdata/views/Assignment.vue b/src/modules/01_masterdata/views/Assignment.vue
index 88c728027..46e41a4f8 100644
--- a/src/modules/01_masterdata/views/Assignment.vue
+++ b/src/modules/01_masterdata/views/Assignment.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
@@ -7,24 +7,27 @@ import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type {
   DataOption,
-  NewPagination,
   DataAssignment,
 } from "@/modules/01_masterdata/interface/index/Main";
 import type { FormFilterAssignment } from "@/modules/01_masterdata/interface/request/Main";
 import type { ResAssignment } from "@/modules/01_masterdata/interface/response/Main";
 
-/** importStore*/
-
+/** importComponents*/
 import Summary from "@/modules/01_masterdata/components/Indicators/Summary.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, dialogRemove, success, messageError } =
   useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);
 
 /** table*/
 const columns = ref<QTableProps["columns"]>([
@@ -61,26 +64,22 @@ const formFilter = reactive<FormFilterAssignment>({
   keyword: "",
   period: "",
   year: new Date().getFullYear(),
-  pageSize: 10,
-  page: 1,
 });
-const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
-const maxPage = ref<number>(1);
 
 /** ฟังก์ชันดึงข้อมูลรายการงานอื่นๆ ที่ได้รับมอบหมาย*/
 async function fetchList() {
   showLoader();
-  rows.value = [];
   formFilter.year = formFilter.year ? formFilter.year.toString() : null;
   await http
     .post(config.API.kpiSpecial + `/search-edit`, {
       ...formFilter,
+      ...params.value,
       keyword: formFilter.keyword.trim(),
     })
     .then((res: ResAssignment) => {
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      totalList.value = res.data.result.total;
-      rows.value = res.data.result.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -108,11 +107,7 @@ function onClickDelete(id: string) {
     await http
       .delete(config.API.kpiSpecial + `/${id}`)
       .then(async () => {
-        formFilter.page = await updateCurrentPage(
-          formFilter.page,
-          maxPage.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
         await fetchList();
         success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -126,22 +121,10 @@ function onClickDelete(id: string) {
 }
 
 function fetchNewList() {
-  formFilter.page = 1;
+  pagination.value.page = 1;
   fetchList();
 }
 
-function updatePageSize(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-watch(
-  () => formFilter.pageSize,
-  () => {
-    fetchList();
-  }
-);
-
 onMounted(async () => {
   await fetchList();
 });
@@ -266,7 +249,8 @@ onMounted(async () => {
         class="custom-header-table"
         :rows-per-page-options="[10, 25, 50, 100]"
         :visible-columns="visibleColumns"
-        @update:pagination="updatePageSize"
+        v-model:pagination="pagination"
+        @request="onRequest"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -309,20 +293,6 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ totalList }} รายการ
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="maxPage"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="fetchList"
-          ></q-pagination>
-        </template>
       </d-table>
     </div>
   </q-card>
diff --git a/src/modules/01_masterdata/views/indicatorByPlan.vue b/src/modules/01_masterdata/views/indicatorByPlan.vue
index 1c6264f48..7a867aa8a 100644
--- a/src/modules/01_masterdata/views/indicatorByPlan.vue
+++ b/src/modules/01_masterdata/views/indicatorByPlan.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter, useRoute } from "vue-router";
 
@@ -8,7 +8,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
 import { useStructureTree } from "@/stores/structureTree";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type {
   DataOption,
@@ -16,7 +16,6 @@ import type {
   OrgTreeNode,
   DataHistory,
   FormDataNodeData,
-  NewPagination,
 } from "@/modules/01_masterdata/interface/index/Main";
 
 import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogHistory.vue";
@@ -28,14 +27,15 @@ const route = useRoute();
 const { fetchStructureTree } = useStructureTree();
 const { showLoader, hideLoader, dialogRemove, success, messageError } =
   useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  () => fetchList()
+);
 
 const dataHistory = ref<DataHistory[]>([]);
 const modalHistory = ref<boolean>(false);
 const isAll = ref<boolean>(false);
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-
 /** หัวตาราง */
 const rows = ref<IndicatorType[]>([]);
 const columns = ref<QTableProps["columns"]>([
@@ -59,12 +59,6 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 const visibleColumns = ref<string[]>(["including", "includingName"]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 const node = ref<OrgTreeNode[]>([]);
 const expanded = ref<string[]>([]);
@@ -96,16 +90,12 @@ async function fetchList() {
         nodeId: nodeData.nodeId,
         period: nodeData.round,
         year: year.value?.toString(),
-        pageSize: pagination.value.rowsPerPage,
-        page: pagination.value.page,
+        ...params.value,
       })
       .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;
-        rows.value = data;
+        const result = res.data.result;
+        pagination.value.rowsNumber = result.total;
+        rows.value = result.data;
       })
       .catch((err) => {
         messageError($q, err);
@@ -162,11 +152,7 @@ async function deleteData(idData: string) {
     await http
       .delete(config.API.kpiPlanById(idData))
       .then(async () => {
-        pagination.value.page = await updateCurrentPage(
-          pagination.value.page,
-          totalList.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
         await fetchList();
         success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -200,23 +186,11 @@ function onClickHistory(id: string) {
     });
 }
 
-function updatePagination(newPagination: NewPagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   fetchList();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 onMounted(() => {
   fetchTree();
 });
@@ -403,7 +377,7 @@ onMounted(() => {
         </div>
 
         <div class="col-12">
-          <d-table
+          <p-table
             for="table"
             ref="table"
             :columns="columns"
@@ -414,8 +388,9 @@ onMounted(() => {
             dense
             class="custom-header-table"
             :rows-per-page-options="[10, 25, 50, 100]"
-            @update:pagination="updatePagination"
             :visible-columns="visibleColumns"
+            @request="onRequest"
+            v-model:pagination="pagination"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -532,21 +507,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="fetchList"
-              ></q-pagination>
-            </template>
-          </d-table>
+          </p-table>
         </div>
       </div>
     </div>
diff --git a/src/modules/01_masterdata/views/indicatorByRole.vue b/src/modules/01_masterdata/views/indicatorByRole.vue
index 54a16c72a..a51e82111 100644
--- a/src/modules/01_masterdata/views/indicatorByRole.vue
+++ b/src/modules/01_masterdata/views/indicatorByRole.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, watch } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -7,12 +7,11 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { checkPermission } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+import { usePagination } from "@/composables/usePagination";
 
 import type { FormListMainByRole } from "@/modules/01_masterdata/interface/request/Main";
 import type {
   DataOption,
-  NewPagination,
   KpiRoleData,
   IndicatorType,
   IndicatorTotal,
@@ -26,17 +25,18 @@ const $q = useQuasar();
 const router = useRouter();
 const { showLoader, hideLoader, dialogRemove, success, messageError } =
   useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);
 
 /** use*/
 const dataHistory = ref<KpiRoleData[]>([]);
 const modalHistory = ref<boolean>(false);
-const total = ref<number>(0);
 
 const positionOp = ref<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
 const positionMainOp = ref<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
 
-const maxPage = ref<number>(1);
-
 /** หัวตาราง */
 const rows = ref<IndicatorType[]>([]);
 const columns = ref<QTableProps["columns"]>([
@@ -62,17 +62,11 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<string[]>(["including", "includingName"]);
 
 const formFilter = reactive<FormListMainByRole>({
-  page: 1,
-  pageSize: 10,
   position: "",
   round: "",
   keyword: "",
   year: new Date().getFullYear(),
 });
-const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
 
 const indicatorTotal = ref<IndicatorTotal[]>([
   {
@@ -105,7 +99,7 @@ const roundOp = ref<DataOption[]>([
 ]);
 
 async function fetchList() {
-  rows.value = [];
+  showLoader();
   await http
     .post(config.API.kpiRoleMainList + `/search-edit`, {
       keyword: formFilter.keyword.trim(),
@@ -114,17 +108,18 @@ async function fetchList() {
       node: 0,
       nodeId: "",
       year: formFilter.year?.toString(),
-      pageSize: formFilter.pageSize,
-      page: formFilter.page,
+      ...params.value,
     })
     .then(async (res) => {
-      const data = await res.data.result.data;
-      total.value = res.data.result.total;
-      maxPage.value = Math.ceil(res.data.result.total / formFilter.pageSize);
-      rows.value = data;
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
@@ -144,11 +139,7 @@ function onClickDelete(id: number) {
     await http
       .delete(config.API.kpiRoleMainList + `/${id}`)
       .then(async () => {
-        formFilter.page = await updateCurrentPage(
-          formFilter.page,
-          maxPage.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
         await fetchList();
         success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -161,33 +152,6 @@ function onClickDelete(id: number) {
   });
 }
 
-async function updatePage(val: number) {
-  showLoader();
-  try {
-    formFilter.page = val;
-    await fetchList();
-  } finally {
-    hideLoader();
-  }
-}
-
-function updatePageSize(newPagination: NewPagination) {
-  formFilter.page = 1;
-  formFilter.pageSize = newPagination.rowsPerPage;
-}
-
-watch(
-  () => formFilter.pageSize,
-  async () => {
-    showLoader();
-    try {
-      await fetchList();
-    } finally {
-      hideLoader();
-    }
-  }
-);
-
 /**
  * function ต้นหาข้อมูลของ Option
  * @param val ค่าที่ต้องการฟิลเตอร์
@@ -282,7 +246,7 @@ onMounted(async () => {
 
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    รายการตัวชี้วัดตามตำแหน่ง
+    รายการตัวชี้วัดตามตำแหน่งasdassd
   </div>
 
   <Summary />
@@ -304,7 +268,7 @@ onMounted(async () => {
         :options="positionOp"
         use-input
         @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
-        @update:model-value="(formFilter.page = 1), fetchList()"
+        @update:model-value="(pagination.page = 1), fetchList()"
       >
         <template v-slot:no-option>
           <q-item>
@@ -315,7 +279,7 @@ onMounted(async () => {
           <q-icon
             name="cancel"
             @click.stop.prevent="
-              (formFilter.position = ''), (formFilter.page = 1), fetchList()
+              (formFilter.position = ''), (pagination.page = 1), fetchList()
             "
             class="cursor-pointer"
           />
@@ -329,7 +293,7 @@ onMounted(async () => {
         autoApply
         year-picker
         :enableTimePicker="false"
-        @update:model-value="(formFilter.page = 1), fetchList()"
+        @update:model-value="(pagination.page = 1), fetchList()"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -358,7 +322,7 @@ onMounted(async () => {
               <q-icon
                 name="cancel"
                 @click.stop.prevent="
-                  (formFilter.year = null), (formFilter.page = 1), fetchList()
+                  (formFilter.year = null), (pagination.page = 1), fetchList()
                 "
                 class="cursor-pointer"
               />
@@ -377,14 +341,14 @@ onMounted(async () => {
         option-value="id"
         emit-value
         map-options
-        @update:model-value="(formFilter.page = 1), fetchList()"
+        @update:model-value="(pagination.page = 1), fetchList()"
         style="width: 160px"
       >
         <template v-if="formFilter.round !== ''" v-slot:append>
           <q-icon
             name="cancel"
             @click.stop.prevent="
-              (formFilter.round = ''), (formFilter.page = 1), fetchList()
+              (formFilter.round = ''), (pagination.page = 1), fetchList()
             "
             class="cursor-pointer"
           />
@@ -411,7 +375,7 @@ onMounted(async () => {
         ref="filterRef"
         outlined
         placeholder="ค้นหา"
-        @keyup.enter="(formFilter.page = 1), fetchList()"
+        @keyup.enter="(pagination.page = 1), fetchList()"
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -434,7 +398,7 @@ onMounted(async () => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         for="table"
         ref="table"
         :columns="columns"
@@ -446,22 +410,9 @@ onMounted(async () => {
         class="custom-header-table"
         :visible-columns="visibleColumns"
         :rows-per-page-options="[10, 20, 50, 100]"
-        @update:pagination="updatePageSize"
+        v-model:pagination="pagination"
+        @request="onRequest"
       >
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="formFilter.page"
-            active-color="primary"
-            color="dark"
-            :max="maxPage"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="updatePage"
-          ></q-pagination>
-        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th auto-width />
@@ -570,21 +521,13 @@ onMounted(async () => {
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <div v-if="col.name === 'no'">
-                {{
-                  (formFilter.page - 1) * Number(pagination.rowsPerPage) +
-                  props.rowIndex +
-                  1
-                }}
-              </div>
-
-              <div v-else>
+              <div>
                 {{ col.value ? col.value : "-" }}
               </div>
             </q-td>
           </q-tr>
         </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 
diff --git a/src/modules/02_organization/store/organizational.ts b/src/modules/02_organization/store/organizational.ts
index 69628fdb9..b51b5dd79 100644
--- a/src/modules/02_organization/store/organizational.ts
+++ b/src/modules/02_organization/store/organizational.ts
@@ -24,7 +24,7 @@ export const useOrganizational = defineStore("organizationalStore", () => {
   const activeId = ref<string>(); // id โครงสร้างปัจจุบัน
   const draftId = ref<string>(); // id แบบร่างโครงสร้าง
   const historyId = ref<string>(); // id ประวัติโครงสร้าง
-  const historyDnaOrgId = ref<string>(); // id ของโครงสร้างสำหรับใช้ในเมนูสืบทอดตำแหน่ง
+  const historyDnaOrgId = ref<string>(""); // id ของโครงสร้างสำหรับใช้ในเมนูสืบทอดตำแหน่ง
   const isPublic = ref<boolean>(false); // การเผยแพร่
   const treeId = ref<string>(); // id โหนด
   const level = ref<number>(); // ระดับโหนด
diff --git a/src/modules/02_organization/views/main.vue b/src/modules/02_organization/views/main.vue
index b7459c161..114307838 100644
--- a/src/modules/02_organization/views/main.vue
+++ b/src/modules/02_organization/views/main.vue
@@ -94,16 +94,18 @@ async function fetchHistory() {
         (e: OrgRevision) => !e.orgRevisionIsDraft && !e.orgRevisionIsCurrent
       );
 
-      itemHistory.value = filterData.map((e: OrgRevision) => ({
-        id: e.orgRevisionId,
-        name: e.orgRevisionName,
-        orgRevisionCreatedAt: e.orgRevisionCreatedAt
-          ? date2Thai(e.orgRevisionCreatedAt)
-          : "",
-      }));
+      itemHistory.value =
+        filterData.map((e: OrgRevision) => ({
+          id: e.orgRevisionId,
+          name: e.orgRevisionName,
+          orgRevisionCreatedAt: e.orgRevisionCreatedAt
+            ? date2Thai(e.orgRevisionCreatedAt)
+            : "",
+        })) || [];
 
       // id ของโครงสร้างสำหรับใช้ในเมนูสืบทอดตำแหน่ง
-      store.historyDnaOrgId = itemHistory.value[0].id;
+      store.historyDnaOrgId =
+        itemHistory.value.length > 0 ? itemHistory.value[0].id : "";
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/03_recruiting/components/Table.vue b/src/modules/03_recruiting/components/Table.vue
index cfa11a0b7..7c7f200c8 100644
--- a/src/modules/03_recruiting/components/Table.vue
+++ b/src/modules/03_recruiting/components/Table.vue
@@ -15,6 +15,7 @@ const props = defineProps({
   fetchData: Function,
   count: Number,
   totalList: Number,
+  total: Number,
   pass: Number,
   notpass: Number,
   missed_exam: Number,
@@ -75,8 +76,13 @@ function updatePagination(newPagination: any) {
   }
 }
 
-function getList() {
-  props.fetchData?.();
+function getList(enter?: string) {
+  if (enter == "enter") {
+    pagination.value.page = 1;
+    props.fetchData?.();
+  } else {
+    props.fetchData?.();
+  }
 }
 
 watch(
@@ -187,7 +193,9 @@ watch(
         outlined
         placeholder="ค้นหา"
         style="max-width: 200px"
-        @keydown.enter.prevent="props.onSearch?.()"
+        @keydown.enter.prevent="
+          nornmalData ? props.onSearch?.() : getList('enter')
+        "
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -238,7 +246,7 @@ watch(
       <slot v-bind="props" name="columns"></slot>
     </template>
     <template v-if="!nornmalData" v-slot:pagination="scope">
-      ทั้งหมด {{ props.count && props.count.toLocaleString() }} รายการ
+      ทั้งหมด {{ props.total?.toLocaleString() }} รายการ
       <q-pagination
         v-model="pagination.page"
         active-color="primary"
diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index 3262c8fa8..4557d28d8 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -22,7 +22,7 @@ const { messageError, success, showLoader, hideLoader, onSearchDataTable } =
   mixin;
 
 const initialPagination = ref<Pagination>({
-  page:1,
+  page: 1,
   rowsPerPage: 10,
   sortBy: "year",
 });
@@ -30,6 +30,7 @@ const year = ref<string>("");
 const round = ref<string>("");
 const name = ref<string>("");
 const count = ref<number>(0);
+const total = ref<number>(0);
 const totalList = ref<number>(0);
 const pass = ref<number>(0);
 const notpass = ref<number>(0);
@@ -355,9 +356,10 @@ async function fetchData() {
   await http
     .post(config.API.getExamResultById(importId.value), {
       examAttribute: "",
+      keyword: filter.value,
       examResult: "",
-      page:initialPagination.value.page,
-      pageSize:initialPagination.value.rowsPerPage,
+      page: initialPagination.value.page,
+      pageSize: initialPagination.value.rowsPerPage,
     })
     .then((res) => {
       let header = res.data.result.header;
@@ -367,8 +369,9 @@ async function fetchData() {
       notpass.value = header.notpass;
       missed_exam.value = header.missed_exam;
       other.value = header.other;
+      total.value = res.data.result.total;
       totalList.value = Math.ceil(
-        header.count / initialPagination.value.rowsPerPage
+        res.data.result.total / initialPagination.value.rowsPerPage
       );
       if (period != null) {
         name.value = period.name;
@@ -504,6 +507,7 @@ onMounted(async () => {
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
         v-model:totalList="totalList"
+        v-model:total="total"
         v-model:pagination="initialPagination"
         :nornmalData="false"
         :conclude="true"
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
index 274477101..08d538298 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
@@ -36,6 +36,7 @@ const pass = ref<number>(0);
 const notpass = ref<number>(0);
 const missed_exam = ref<number>(0);
 const other = ref<number>(0);
+const total = ref<number>(0);
 const totalList = ref<number>(0);
 
 const importId = ref<string>(route.params.id as string); // Period Import Id
@@ -297,6 +298,7 @@ async function fetchData() {
   await http
     .post(config.API.getDisableExamResultById(importId.value), {
       examAttribute: "",
+      keyword: filter.value,
       examResult: "",
       page: initialPagination.value.page,
       pageSize: initialPagination.value.rowsPerPage,
@@ -309,8 +311,9 @@ async function fetchData() {
       notpass.value = header.notpass;
       missed_exam.value = header.missed_exam;
       other.value = header.other;
+      total.value = res.data.result.total;
       totalList.value = Math.ceil(
-        header.count / initialPagination.value.rowsPerPage
+        res.data.result.total / initialPagination.value.rowsPerPage
       );
       const data = res.data.result.data;
       let result: RecruitDetailResponse[] = [];
@@ -443,6 +446,7 @@ onMounted(async () => {
         :pagination="initialPagination"
         :visible-columns="visibleColumns"
         v-model:inputfilter="filter"
+        v-model:total="total"
         v-model:inputvisible="visibleColumns"
         :nornmalData="false"
         :conclude="true"
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index d7accda5a..d1337c253 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -6,6 +6,7 @@ import { useRoute } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useResultsPerformDataStore } from "@/modules/04_registryPerson/stores/ResultsPerformance";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -24,6 +25,9 @@ const $q = useQuasar();
 const route = useRoute();
 const store = useResultsPerformDataStore();
 const { textRangePoint, textPoint } = store;
+const { pagination, params, onRequest } = usePagination("", () =>
+  getDevelop(true)
+);
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -61,15 +65,6 @@ const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
-const totalIdp = ref<number>(0);
-const totalListIdp = ref<number>(1);
-const paginationIdp = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const resPerformForm = reactive<RequestItemsObject>({
   name: "",
   point1Total: 0, //ส่วนที่1 (น้ำหนัก)
@@ -273,9 +268,6 @@ const columns = ref<QTableColumn[]>(
 const visibleColumns = ref<string[]>(
   baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
 );
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 //Table การพัฒนารายบุคคล (Individual Development Plan)
 const rowsPlan = ref<any[]>([]);
@@ -295,12 +287,10 @@ const columnsPlan = ref<QTableColumn[]>([
     name: "name",
     align: "left",
     label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "developmentProjects",
@@ -310,44 +300,36 @@ const columnsPlan = ref<QTableColumn[]>([
     field: "developmentProjects",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "developmentTarget",
     align: "left",
     label: "เป้าหมายการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "developmentResults",
     align: "left",
     label: "วิธีการวัดผลการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentResults",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "developmentReport",
     align: "left",
     label: "รายงานผลการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentReport",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsPlan = ref<String[]>([
+const visibleColumnsPlan = ref<string[]>([
   "no",
   "name",
   "developmentProjects",
@@ -357,8 +339,6 @@ const visibleColumnsPlan = ref<String[]>([
 ]);
 
 //Table ประวัติแก้ไข
-const rowsHistory = ref<ResponseObject[]>([]);
-const rowsHistoryMain = ref<ResponseObject[]>([]);
 const historyId = ref<string>("");
 const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
@@ -378,8 +358,8 @@ async function fetchData() {
     rowsMain.value = res.data.result;
   } catch (error) {
     messageError($q, error);
-    hideLoader();
   } finally {
+    hideLoader();
   }
 }
 
@@ -387,29 +367,25 @@ async function fetchData() {
 async function getDevelop(isLoad?: boolean) {
   if (!profileId.value) return;
   isLoad && showLoader();
+  const queryParams = {
+    ...params.value,
+    searchKeyword: filterSearchPlan.value.trim(),
+  };
   await http
-    .get(
-      config.API.developMentPlan(empType.value) +
-        `/${profileId.value}?page=${paginationIdp.value.page}&pageSize=${
-          paginationIdp.value.rowsPerPage
-        }&searchKeyword=${filterSearchPlan.value.trim()}
-`
-    )
+    .get(config.API.developMentPlan(empType.value) + `/${profileId.value}`, {
+      params: queryParams,
+    })
     .then((res) => {
-      const data = res.data.result.data;
-      totalListIdp.value = Math.ceil(
-        res.data.result.total / paginationIdp.value.rowsPerPage
-      );
-      totalIdp.value = res.data.result.total;
-      rowsPlan.value = data;
-
-      isLoad && hideLoader();
+      const data = res.data.result;
+      pagination.value.rowsNumber = data.total;
+      rowsPlan.value = data.data;
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoad && hideLoader();
+    });
 }
 
 /**
@@ -531,11 +507,6 @@ function openDialogDevelop(data: any) {
   typeIDP.value = data.type;
 }
 
-function updatePaginationIdp(newPagination: any) {
-  paginationIdp.value.page = 1;
-  paginationIdp.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function serchDataTable() {
   rows.value = onSearchDataTable(
     filterSearch.value,
@@ -544,13 +515,6 @@ function serchDataTable() {
   );
 }
 
-watch(
-  () => paginationIdp.value.rowsPerPage,
-  async () => {
-    await getDevelop(true);
-  }
-);
-
 onMounted(async () => {
   await fetchData();
   empType.value !== "-temp" && (await getDevelop());
@@ -647,7 +611,6 @@ onMounted(async () => {
             bordered
             :rows="rows"
             :columns="columns"
-            v-model:pagination="pagination"
             :grid="modeView === 'card'"
             :visible-columns="visibleColumns"
           >
@@ -769,9 +732,7 @@ onMounted(async () => {
               ref="filterPlanRef"
               outlined
               placeholder="ค้นหา"
-              @keydown.enter.prevent="
-                (paginationIdp.page = 1), getDevelop(true)
-              "
+              @keydown.enter.prevent="(pagination.page = 1), getDevelop(true)"
             >
               <template v-slot:append>
                 <q-icon name="search" />
@@ -825,7 +786,7 @@ onMounted(async () => {
         </div>
 
         <div class="col-12">
-          <d-table
+          <p-table
             flat
             dense
             bordered
@@ -837,23 +798,9 @@ onMounted(async () => {
             :card-container-class="
               modeViewPlan === 'card' ? 'q-col-gutter-md' : ''
             "
-            @update:pagination="updatePaginationIdp"
+            @request="onRequest"
+            v-model:pagination="pagination"
           >
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ totalIdp.toLocaleString() }} รายการ
-              <q-pagination
-                v-model="paginationIdp.page"
-                active-color="primary"
-                color="dark"
-                :max="Number(totalListIdp)"
-                size="sm"
-                boundary-links
-                direction-links
-                :max-pages="5"
-                @update:model-value="getDevelop"
-              ></q-pagination>
-            </template>
-
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th auto-width />
@@ -880,11 +827,7 @@ onMounted(async () => {
                 >
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
                   <div v-if="col.name == 'no'">
-                    {{
-                      (paginationIdp.page - 1) * paginationIdp.rowsPerPage +
-                      props.rowIndex +
-                      1
-                    }}
+                    {{ props.rowIndex + 1 }}
                   </div>
                   <div v-else-if="col.name == 'developmentProjects'">
                     <div class="column">
@@ -996,7 +939,7 @@ onMounted(async () => {
                 </q-card>
               </div>
             </template>
-          </d-table>
+          </p-table>
         </div>
       </q-card>
     </div>
diff --git a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
index eebd8d43a..0f1d005fe 100644
--- a/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/01_TabInformation.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
@@ -12,7 +13,6 @@ import http from "@/plugins/http";
 import type { QTableProps } from "quasar";
 import type {
   DataOption,
-  Pagination,
   Request,
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DataRequest } from "@/modules/04_registryPerson/interface/response/Main";
@@ -22,14 +22,11 @@ const router = useRouter();
 const route = useRoute();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListRequset);
 
 const routerName = ref<string>(route.name as string);
 //Table
 const rows = ref<DataRequest[]>([]); //รายการข้อมูลคำร้องขอแก้ไขทะเบียนประวัติ
-const page = ref<number>(1); //หน้า
-const pageSize = ref<number>(10); //จำนวนต่อหน้า
-const rowsTotal = ref<number>(0); //จำนวนรายการ
-const maxPage = ref<number>(0); //จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "createdAt",
@@ -45,7 +42,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "fullname",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    sortable: false,
+    sortable: true,
     field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -54,7 +51,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "topic",
     align: "left",
     label: "ชื่อเรื่อง",
-    sortable: false,
+    sortable: true,
     field: "topic",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -64,7 +61,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "detail",
     align: "left",
     label: "รายละเอียด",
-    sortable: false,
+    sortable: true,
     field: "detail",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -84,7 +81,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "remark",
     align: "left",
     label: "หมายเหตุ",
-    sortable: false,
+    sortable: true,
     field: "remark",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -116,8 +113,7 @@ async function fetchListRequset() {
       ) + `admin`,
       {
         params: {
-          page: page.value,
-          pageSize: pageSize.value,
+          ...params.value,
           status: status.value,
           keyword: keyword.value.trim(),
         },
@@ -125,8 +121,7 @@ async function fetchListRequset() {
     )
     .then((res) => {
       const data = res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
-      rowsTotal.value = data.total;
+      pagination.value.rowsNumber = data.total;
       rows.value = data.data;
     })
     .catch((err) => {
@@ -139,7 +134,7 @@ async function fetchListRequset() {
 
 /** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
   // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
   fetchListRequset();
 }
@@ -177,26 +172,6 @@ function onclickEdit(data: Request) {
   }
 }
 
-/**
- * function เลือกแถวต่อหน้า
- * @param newPagination
- */
-function updatePageSizePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ pageSize
- * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
- */
-watch(
-  () => pageSize.value,
-  () => {
-    fetchListRequset();
-  }
-);
-
 /**  HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
 onMounted(() => {
   fetchListRequset();
@@ -265,14 +240,15 @@ onMounted(() => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         :columns="columns"
         :rows="rows"
         row-key="id"
         :rows-per-page-options="[10, 25, 50, 100]"
         :paging="true"
         :visible-columns="visibleColumns"
-        @update:pagination="updatePageSizePagination"
+        @request="onRequest"
+        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -302,21 +278,7 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="fetchListRequset()"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
index eca90f6ea..a5d38181d 100644
--- a/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/02_TabIDP.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted,  } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useRequestEditStore } from "@/modules/04_registryPerson/stores/RequestEdit";
+import { usePagination } from "@/composables/usePagination";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 import type { QTableProps } from "quasar";
 import type {
   DataOption,
-  Pagination,
+  
 } from "@/modules/04_registryPerson/interface/index/Main";
 import type { DataListsIDP } from "@/modules/04_registryPerson/interface/response/Main";
 
@@ -22,6 +23,7 @@ const route = useRoute();
 const store = useRequestEditStore();
 const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const routerName = ref<string>(route.name as string);
+const { pagination, params, onRequest } = usePagination("", fetchData);
 //ตัวแปร
 const status = ref<string>("PENDING"); //ค้นหาตามสถานะ
 const keyword = ref<string>(""); //คำค้นหา
@@ -29,16 +31,12 @@ const statusOption = ref<DataOption[]>(store.optionStatusIDP); //รายกา
 
 //Table
 const rows = ref<DataListsIDP[]>([]); //รายการข้อมูลการพัฒนารายบุคคล
-const page = ref<number>(1); //หน้า
-const pageSize = ref<number>(10); //จำนวนต่อหน้า
-const rowsTotal = ref<number>(0); //จำนวนรายการ
-const maxPage = ref<number>(0); //จำนวนหน้า
 const columns = ref<QTableProps["columns"]>([
   {
     name: "createdAt",
     align: "left",
     label: "วันที่ยื่นขอ",
-    sortable: false,
+    sortable: true,
     field: "createdAt",
     format: (v) => (v ? date2Thai(v, false, true) : "-"),
     headerStyle: "font-size: 14px",
@@ -48,7 +46,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "createdFullName",
     align: "left",
     label: "ผู้ยื่นขอ",
-    sortable: false,
+    sortable: true,
     field: "createdFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -57,7 +55,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "name",
     align: "left",
     label: "ความรู้/ทักษะ/สมรรถนะที่ต้องได้รับการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -75,7 +73,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentTarget",
     align: "left",
     label: "เป้าหมายการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentTarget",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -84,7 +82,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentResults",
     align: "left",
     label: "วิธีการวัดผลการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentResults",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -93,7 +91,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "developmentReport",
     align: "left",
     label: "รายงานผลการพัฒนา",
-    sortable: false,
+    sortable: true,
     field: "developmentReport",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -121,7 +119,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "reason",
     align: "left",
     label: "หมายเหตุ",
-    sortable: false,
+    sortable: true,
     field: "reason",
     format: (v) => (v ? v : "-"),
     headerStyle: "font-size: 14px",
@@ -151,17 +149,15 @@ async function fetchData() {
       ) + `admin`,
       {
         params: {
-          page: page.value,
-          pageSize: pageSize.value,
+          ...params.value,
           status: status.value ? status.value : "",
-          keyword: keyword.value,
+          keyword: keyword.value.trim(),
         },
       }
     )
     .then(async (res) => {
       const data = await res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
-      rowsTotal.value = data.total;
+      pagination.value.rowsNumber = data.total;
       rows.value = data.data;
     })
     .catch((err) => {
@@ -174,7 +170,7 @@ async function fetchData() {
 
 /** function เลือกสถานะคำร้อง */
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
   // fetch รายการคำร้องขอแก้ไขทะเบียนประวัติ
   fetchData();
 }
@@ -199,16 +195,7 @@ function filterOption(val: string, update: Function) {
 }
 
 /**
- * function เลือกแถวต่อหน้า
- * @param newPagination
- */
-function updatePageSizePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-/**
- * funciton  แก่ไขคำร้อง
+ * function  แก้ไขคำร้อง
  * @param id รายการคำร้อง
  */
 function onclickEdit(id: string) {
@@ -266,17 +253,6 @@ async function downloadUrl(id: string, fileName: string) {
     });
 }
 
-/**
- * ดูการเปลี่ยนแปลงของ pageSize
- * เมื่อมีการเปลี่ยนแปลงจำทำการ ดึงช้อมูลรายการคำร้องขอแก้ไขทะเบียนประวัติตามจำนวน pageSize
- */
-watch(
-  () => pageSize.value,
-  () => {
-    fetchData();
-  }
-);
-
 /**  HooK lifecycle ทำงานเมื่อมีการเรียกใช้งาน Componenets */
 onMounted(() => {
   props.isIdp && fetchData();
@@ -344,14 +320,15 @@ onMounted(() => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         :columns="columns"
         :rows="rows"
         row-key="id"
         :rows-per-page-options="[10, 25, 50, 100]"
         :paging="true"
         :visible-columns="visibleColumns"
-        @update:pagination="updatePageSizePagination"
+        @request="onRequest"
+        v-model:pagination="pagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -413,21 +390,7 @@ onMounted(() => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ rowsTotal.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="fetchData"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/04_registryPerson/interface/request/Edit.ts b/src/modules/04_registryPerson/interface/request/Edit.ts
index 7c8353da6..4f6f6f00a 100644
--- a/src/modules/04_registryPerson/interface/request/Edit.ts
+++ b/src/modules/04_registryPerson/interface/request/Edit.ts
@@ -2,8 +2,8 @@ interface DataFilter {
   status: string;
   empType: string;
   keyword: string;
-  page: number;
-  pageSize: number;
+  page?: number;
+  pageSize?: number;
 }
 
 interface FormDataSalary {
diff --git a/src/modules/04_registryPerson/views/edit/list.vue b/src/modules/04_registryPerson/views/edit/list.vue
index 38292b777..d0861a002 100644
--- a/src/modules/04_registryPerson/views/edit/list.vue
+++ b/src/modules/04_registryPerson/views/edit/list.vue
@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 import { useEditPosDataStore } from "@/modules/04_registryPerson/stores/Edit";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type { QTableColumn } from "quasar";
@@ -23,6 +24,7 @@ const route = useRoute();
 const router = useRouter();
 const store = useEditPosDataStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchData);
 
 const organizationOps = ref<DataOption[]>([]);
 const organizationOpsMain = ref<DataOption[]>([]);
@@ -57,11 +59,7 @@ const filter = reactive<DataFilter>({
   status: store.status,
   empType: store.empType,
   keyword: store.keyword,
-  page: store.page,
-  pageSize: store.pageSize,
 });
-const total = ref<number>(0);
-const maxPage = ref<number>(0);
 const rows = ref<DataSalaryPos[]>([]);
 const columns = ref<QTableColumn[]>([
   {
@@ -83,7 +81,7 @@ const columns = ref<QTableColumn[]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
@@ -130,7 +128,7 @@ const columns = ref<QTableColumn[]>([
     name: "org",
     align: "left",
     label: "สังกัด",
-    sortable: true,
+    sortable: false,
     field: "org",
     headerStyle: "font-size: 14px;min-width: 280px",
     style: "font-size: 14px",
@@ -151,7 +149,7 @@ const columns = ref<QTableColumn[]>([
 const visibleColumns = ref<string[]>([
   "posNo",
   "citizenId",
-  "fullName",
+  "firstName",
   "position",
   "posType",
   "posLevel",
@@ -240,10 +238,9 @@ function filterSelector(val: string, update: Function, type: string) {
 }
 
 /** function fetch รายการแก้ไขทะเบียนประวัติ ตำแหน่ง/เงินเดือน*/
-function fetchData() {
+async function fetchData() {
   let queryParams = {
-    page: filter.page,
-    pageSize: filter.pageSize,
+    ...params.value,
     type: filter.empType?.toLocaleUpperCase(),
     searchKeyword: filter.keyword,
     statusCheckEdit: filter.status?.toLocaleUpperCase(),
@@ -253,18 +250,17 @@ function fetchData() {
   store.status = filter.status;
   store.empType = filter.empType;
   store.keyword = filter.keyword;
-  store.page = filter.page;
-  store.pageSize = filter.pageSize;
+  store.page = pagination.value.page;
+  store.pageSize = pagination.value.rowsPerPage;
 
   if (organization.value !== "" && filter.empType !== "") {
     rows.value = [];
     showLoader();
-    http
+    await http
       .get(config.API.salaryTemp, { params: queryParams })
       .then((res) => {
         const data = res.data.result;
-        total.value = data.total;
-        maxPage.value = Math.ceil(data.total / filter.pageSize);
+        pagination.value.rowsNumber = data.total;
         rows.value = data.data;
       })
       .catch((err) => {
@@ -283,21 +279,12 @@ function fetchData() {
 function onSearchData(val: boolean = true) {
   store.orgId = organization.value;
   if (val) {
-    filter.page = 1;
+    pagination.value.page = 1;
   }
 
   fetchData();
 }
 
-/**
- * function เปลี่ยนแถวต่อหน้า
- * @param newPagination ข้อมูล Pagination
- */
-function updatePageSize(newPagination: Pagination) {
-  filter.pageSize = newPagination.rowsPerPage;
-  onSearchData();
-}
-
 /**
  * function ไปหน้ารายการประวัติตำแหน่ง/เงินเดือน
  * @param id ProfileID
@@ -315,6 +302,9 @@ onMounted(async () => {
   } else {
     organizationOpsMain.value = store.orgData;
     organizationOps.value = store.orgData;
+    pagination.value.page = store.page;
+    pagination.value.rowsPerPage = store.pageSize;
+    fetchData();
   }
 });
 </script>
@@ -436,7 +426,7 @@ onMounted(async () => {
     </div>
 
     <div class="col-12">
-      <d-table
+      <p-table
         ref="table"
         row-key="id"
         flat
@@ -447,7 +437,8 @@ onMounted(async () => {
         :paging="true"
         :rows-per-page-options="[20, 50, 100]"
         :visible-columns="visibleColumns"
-        @update:pagination="updatePageSize"
+        @request="onRequest"
+        v-model:pagination="pagination"
       >
         >
         <template v-slot:header="props">
@@ -490,21 +481,7 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total.toLocaleString() }} รายการ
-          <q-pagination
-            v-model="filter.page"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            :max-pages="5"
-            size="sm"
-            boundary-links
-            direction-links
-            @update:model-value="onSearchData(false)"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 </template>
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 3af5063cf..31c5a2227 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -12,9 +12,9 @@ import {
 } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/05_placement/store";
+import { usePagination } from "@/composables/usePagination";
 
 import type { QTableProps } from "quasar";
-import type { Pagination } from "@/modules/05_placement/interface/index/Main";
 import type { OpfillterTypeSt } from "@/modules/05_placement/interface/request/Main";
 import type {
   ResListProbation,
@@ -30,10 +30,18 @@ const mixin = useCounterMixin();
 const router = useRouter();
 const { statusProbationMain } = storeFn;
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
+const { pagination, params, onRequest } = usePagination(
+  "",
+  fetchProbationPersonalList
+);
+const {
+  pagination: pagination2,
+  params: params2,
+  onRequest: onRequest2,
+} = usePagination("", onclickAddProbation);
 
 const modalCommand = ref<boolean>(false); // ตัวแปร popup ออกคำสั่ง
 const modal = ref<boolean>(false);
-const paging2 = ref<boolean>(true);
 const fillterStatus = ref<ResListProbation[]>([]);
 const fillter = ref<string>("");
 const filterKeyword = ref<string>("");
@@ -43,8 +51,6 @@ const rows2 = ref<ResProfileProbation[]>([]);
 const dataUpdate = ref<ResListProbation[]>([]);
 const Opfillter = ref<OpfillterTypeSt[]>([]);
 const Opfillter2 = ref<OpfillterTypeSt[]>([]);
-const formProbation = reactive({ keyword: "", pageSize: 10, page: 1 });
-const maxPage = ref<number>(1);
 
 const modalAdd = ref<boolean>(false); //เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ
 const personId = ref<string>(""); //เก็บ id คน ตาม row
@@ -52,8 +58,6 @@ const topic = ref<string>(
   "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
 );
 
-const total = ref<number>(0);
-const totalList = ref<number>(1);
 /** columns ฟังก์ชันดดึงข้อมูลรายการผู้ทดลองปฏิบัติหน้าที่ราชการ */
 const columns = ref<QTableProps["columns"]>([
   {
@@ -106,7 +110,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "probation_no",
     align: "center",
     label: "ครั้งที่ทดลองปฏิบัติหน้าที่ราชการ",
-    sortable: true,
+    sortable: false,
     field: "probation_no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -130,7 +134,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "probation_status",
     align: "left",
     label: "สถานะ",
-    sortable: true,
+    sortable: false,
     field: "probation_status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -146,12 +150,6 @@ const visibleColumns = ref<string[]>([
   "order_number",
   "probation_status",
 ]);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /** columns หัวตารางเพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ */
 const columns2 = ref<QTableProps["columns"]>([
@@ -165,7 +163,7 @@ const columns2 = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "fullname",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
@@ -198,11 +196,11 @@ const columns2 = ref<QTableProps["columns"]>([
     },
   },
   {
-    name: "organizationOrganization",
+    name: "orgRootName",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "organizationOrganization",
+    field: "orgRootName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -210,50 +208,39 @@ const columns2 = ref<QTableProps["columns"]>([
     name: "status",
     align: "left",
     label: "ทดลองปฏิบัติหน้าที่ราชการ",
-    sortable: true,
+    sortable: false,
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "refCommandNo",
+    name: "commandNo",
     align: "center",
     label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
     sortable: true,
-    field: "refCommandNo",
+    field: "commandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const pagination2 = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 /** ฟังก์ชันดดึงข้อมูลรายการผู้ทดลองปฏิบัติหน้าที่ราชการ*/
 async function fetchProbationPersonalList() {
-  rows.value = [];
   showLoader();
   await http
-    .get(
-      config.API.probationPersonalList() +
-        `?status=${!fillter.value ? "" : fillter.value}&page=${
-          pagination.value.page
-        }&pageSize=${
-          pagination.value.rowsPerPage
-        }&keyword=${filterKeyword.value.trim()}`
-    )
+    .get(config.API.probationPersonalList(), {
+      params: {
+        ...params.value,
+        status: !fillter.value ? "" : fillter.value,
+        keyword: filterKeyword.value.trim(),
+      },
+    })
     .then(async (res) => {
-      const data = await res.data.result.data;
-      const resTotal = await res.data.result.total;
-
-      rows.value = data;
-      fillterStatus.value = data;
-      dataUpdate.value = data;
-      totalList.value = Math.ceil(resTotal / pagination.value.rowsPerPage);
-      total.value = resTotal;
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
+      fillterStatus.value = result.data;
+      dataUpdate.value = result.data;
 
       // option  filter
       Opfillter.value = storeFn.optionStatusProbation;
@@ -261,6 +248,7 @@ async function fetchProbationPersonalList() {
     })
     .catch((e) => {
       messageError($q, e);
+      rows.value = [];
     })
     .finally(() => {
       hideLoader();
@@ -269,43 +257,30 @@ async function fetchProbationPersonalList() {
 
 /* ฟังก์ชันดึงข้อมูลเพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ*/
 async function onclickAddProbation() {
-  rows2.value = [];
   modal.value = true;
   modal.value && showLoader();
   await http
-    .post(config.API.orgProfileProbation, formProbation)
+    .post(config.API.orgProfileProbation, {
+      ...params2.value,
+      keyword: filterKeyword2.value.trim(),
+    })
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / formProbation.pageSize);
-      rows2.value = res.data.result.data;
+      const result = res.data.result;
+      pagination2.value.rowsNumber = result.total;
+      rows2.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
+      rows2.value = [];
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  formProbation.page = 1;
-  formProbation.pageSize = newPagination.rowsPerPage;
-}
-
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePaginationMain(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-function filterKeyword2Fn(page: number) {
-  page !== 1 ? (formProbation.page = 1) : onclickAddProbation();
+function filterKeyword2Fn() {
+  pagination2.value.page = 1;
+  onclickAddProbation();
 }
 
 /**
@@ -377,11 +352,6 @@ async function onCloseDialog() {
   modal.value = false;
 }
 
-function paginationLabel2(start: string, end: string, total: string) {
-  if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-}
-
 /**
  * ค้นหาตาม text
  * @param val ค่าที่ค้นหา
@@ -441,25 +411,22 @@ function closeAdd() {
   modalAdd.value = false;
   personId.value = "";
   topic.value = "แต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ";
+  rows2.value = [];
+  filterKeyword2.value = "";
+  pagination2.value = {
+    page: 1,
+    rowsNumber: 0,
+    rowsPerPage: 10,
+    sortBy: "",
+    descending: false,
+  };
 }
 
 function getSearchMain() {
-  rows.value = [];
   pagination.value.page = 1;
   fetchProbationPersonalList();
 }
 
-watch([() => formProbation.page, () => formProbation.pageSize], () => {
-  onclickAddProbation();
-});
-
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearchMain();
-  }
-);
-
 /** get ค่า เมื่อโหลดหน้า */
 onMounted(() => {
   fetchProbationPersonalList();
@@ -564,7 +531,7 @@ onMounted(() => {
         />
       </div>
       <div class="col-12">
-        <d-table
+        <p-table
           :columns="columns"
           :rows="rows"
           row-key="personal_id"
@@ -575,7 +542,8 @@ onMounted(() => {
           class="custom-header-table"
           :visible-columns="visibleColumns"
           :rows-per-page-options="[10, 25, 50, 100]"
-          @update:pagination="updatePaginationMain"
+          @request="onRequest"
+          v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -617,11 +585,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 == 'order_number'">
                   {{
@@ -649,27 +613,13 @@ onMounted(() => {
               </q-td>
             </q-tr>
           </template>
-          <template v-slot:pagination="scope">
-            ทั้งหมด {{ total.toLocaleString() }} รายการ
-            <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="fetchProbationPersonalList"
-            ></q-pagination>
-          </template>
-        </d-table>
+        </p-table>
       </div>
     </div>
   </q-card>
 
   <q-dialog v-model="modal" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
+    <q-card style="min-width: 75%">
       <q-form ref="myForm">
         <DialogHeader
           tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
@@ -681,10 +631,10 @@ onMounted(() => {
             class="col-12"
             standout
             dense
-            v-model="formProbation.keyword"
+            v-model="filterKeyword2"
             outlined
             placeholder="ค้นหา"
-            @keydown.enter.prevent="filterKeyword2Fn(formProbation.page)"
+            @keydown.enter.prevent="filterKeyword2Fn()"
           >
             <template v-slot:append>
               <q-icon v-if="filterKeyword2 == ''" name="search" />
@@ -696,7 +646,7 @@ onMounted(() => {
             </template>
           </q-input>
           <div class="col-12">
-            <d-table
+            <p-table
               ref="table2"
               :columns="columns2"
               :rows="rows2"
@@ -706,10 +656,9 @@ onMounted(() => {
               :paging="true"
               dense
               class="custom-header-table"
-              :pagination-label="paginationLabel2"
               v-model:pagination="pagination2"
-              @update:pagination="updatePagination"
               :rows-per-page-options="[10, 25, 50, 100]"
+              @request="onRequest2"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -742,14 +691,10 @@ onMounted(() => {
                     :props="props"
                   >
                     <div v-if="col.name == 'no'">
-                      {{
-                        (formProbation.page - 1) * formProbation.pageSize +
-                        props.rowIndex +
-                        1
-                      }}
+                      {{ props.rowIndex + 1 }}
                     </div>
 
-                    <div v-else-if="col.name == 'fullname'">
+                    <div v-else-if="col.name == 'firstName'">
                       {{
                         (props.row.prefix ? props.row.prefix : "") +
                         props.row.firstName +
@@ -766,7 +711,7 @@ onMounted(() => {
                       />
                     </div>
                     <div
-                      v-else-if="col.name == 'organizationOrganization'"
+                      v-else-if="col.name == 'orgRootName'"
                       class="table_ellipsis"
                     >
                       <div
@@ -800,7 +745,7 @@ onMounted(() => {
                         }${props.row.orgRootName ? props.row.orgRootName : ""}`
                       }}
                     </div>
-                    <div v-else-if="col.name == 'refCommandNo'">
+                    <div v-else-if="col.name == 'commandNo'">
                       {{
                         props.row.commandNo
                           ? props.row.commandNo != "xx/2566"
@@ -815,20 +760,7 @@ onMounted(() => {
                   </q-td>
                 </q-tr>
               </template>
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ rows2.length.toLocaleString() }} รายการ
-                <q-pagination
-                  v-model="formProbation.page"
-                  active-color="primary"
-                  color="dark"
-                  :max="maxPage"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                ></q-pagination>
-              </template>
-            </d-table>
+            </p-table>
           </div>
         </q-card-section>
       </q-form>
@@ -836,7 +768,7 @@ onMounted(() => {
   </q-dialog>
 
   <q-dialog v-model="modalAdd" persistent>
-    <q-card style="width: 900px; max-width: 80vw">
+    <q-card style="width: 90%; max-width: 80vw">
       <q-form greedy @submit.prevent @validation-success="onSubmitAdd">
         <DialogHeader
           tittle="เพิ่มการแต่งตั้งคณะกรรมการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ"
@@ -866,5 +798,8 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <DialogOrder v-model:modal="modalCommand" :fetch-data="fetchProbationPersonalList" />
+  <DialogOrder
+    v-model:modal="modalCommand"
+    :fetch-data="fetchProbationPersonalList"
+  />
 </template>
diff --git a/src/modules/05_placement/components/probation/MainSurvey.vue b/src/modules/05_placement/components/probation/MainSurvey.vue
index 3649f8c90..24947a245 100644
--- a/src/modules/05_placement/components/probation/MainSurvey.vue
+++ b/src/modules/05_placement/components/probation/MainSurvey.vue
@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import { usePagination } from "@/composables/usePagination";
 
-import type { Pagination } from "@/modules/05_placement/interface/index/Main";
 import type { MainData } from "@/modules/05_placement/interface/index/Survey";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { pagination, params, onRequest } = usePagination("", getData);
 
 const year = ref<number | null>(new Date().getFullYear()); //ปีงบประมาณ
 
 const rows = ref<MainData[]>([]);
 const filterKeyword = ref<string>("");
-const total = ref<number>(0);
-const totalList = ref<number>(1);
+
 /** หัวตาราง */
 const columns = ref<QTableProps["columns"]>([
   {
@@ -97,31 +97,21 @@ const visibleColumns = ref<string[]>([
   "answer3",
   "createdAt",
 ]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 10,
-  rowsPerPage: 10,
-});
 
 async function getData() {
   showLoader();
   await http
     .get(config.API.probationSurvey, {
       params: {
+        ...params.value,
         year: year.value,
-        keyword: filterKeyword.value,
-        page: pagination.value.page,
-        pageSize: pagination.value.rowsPerPage,
+        keyword: filterKeyword.value.trim(),
       },
     })
     .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;
-      rows.value = data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -131,23 +121,11 @@ async function getData() {
     });
 }
 
-function updatePagination(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 function getSearch() {
   pagination.value.page = 1;
   getData();
 }
 
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    getSearch();
-  }
-);
-
 onMounted(async () => {
   await getData();
 });
@@ -166,7 +144,7 @@ onMounted(async () => {
               autoApply
               year-picker
               :enableTimePicker="false"
-              @update:model-value="getData()"
+              @update:model-value="getSearch()"
             >
               <template #year="{ year }">{{ year + 543 }}</template>
               <template #year-overlay-value="{ value }">{{
@@ -193,7 +171,7 @@ onMounted(async () => {
             ref="filterRef"
             outlined
             placeholder="ค้นหาจากชื่อ - นามสกุล /ตำแหน่ง"
-            @keydown.enter.prevent="getData()"
+            @keydown.enter.prevent="getSearch()"
             style="width: 350px"
           >
             <template v-slot:append>
@@ -217,7 +195,7 @@ onMounted(async () => {
         </div>
       </div>
       <div class="col-12">
-        <d-table
+        <p-table
           ref="table"
           :columns="columns"
           :rows="rows"
@@ -228,23 +206,9 @@ onMounted(async () => {
           :paging="true"
           dense
           :rows-per-page-options="[10, 25, 50, 100]"
-          @update:pagination="updatePagination"
+          v-model:pagination="pagination"
+          @request="onRequest"
         >
-          <template v-slot:pagination="scope">
-            ทั้งหมด {{ total.toLocaleString() }} รายการ
-            <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 v-for="col in props.cols" :key="col.name" :props="props">
@@ -256,11 +220,7 @@ onMounted(async () => {
             <q-tr :props="props">
               <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>
@@ -269,7 +229,7 @@ onMounted(async () => {
               </q-td>
             </q-tr>
           </template>
-        </d-table>
+        </p-table>
       </div>
     </div>
   </q-card>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index a64c563d5..45af731d0 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive, watch } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRouter } from "vue-router";
@@ -8,18 +8,16 @@ import {
   checkPermissionList,
   checkPermissionCreate,
 } from "@/utils/permissions";
-import { updateCurrentPage } from "@/utils/function";
+
 import { useCounterMixin } from "@/stores/mixin";
 import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 /** importType*/
 import type { QInput, QTableProps } from "quasar";
-import type {
-  NewPagination,
-  DataOption,
-} from "@/modules/08_registryEmployee/interface/index/Main";
+import type { DataOption } from "@/modules/08_registryEmployee/interface/index/Main";
 import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
 
 /** importComponents*/
@@ -39,6 +37,10 @@ const {
   findOrgNameHtml,
 } = useCounterMixin();
 const { statusText } = useRegistryEmp();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchList
+);
 
 const modalAddEmployee = ref<boolean>(false); // popup เพิ่มข้อมูลลูกจ้างชั่วคราว
 const modalPos = ref<boolean>(false); //popup กำหนดตำแหน่ง
@@ -47,11 +49,7 @@ const dataRow = ref<DataEmployee>(); //ข้อมูลรายชื่อ
 
 /** Table */
 const rows = ref<DataEmployee[]>([]); //รายชื่อลูกจ้างชั่วคราว
-const maxPage = ref<number>(0); //จำนวนหน้า
-const total = ref<number>(0); //จำนวนข้อมูล
 const queryParams = reactive({
-  page: 1,
-  pageSize: 10,
   type: "temp",
   searchField: "fullName",
   searchKeyword: "",
@@ -67,12 +65,7 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "ลำดับ",
     sortable: false,
-    field: (row) =>
-      (
-        (queryParams.page - 1) * queryParams.pageSize +
-        rows.value.indexOf(row) +
-        1
-      ).toLocaleString(),
+    field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -80,16 +73,16 @@ const columns = ref<QTableProps["columns"]>([
     name: "citizenId",
     align: "left",
     label: "เลขประจำตัวประชาชน",
-    sortable: false,
+    sortable: true,
     field: "citizenId",
     headerStyle: "font-size: 14px; min-width: 200px",
     style: "font-size: 14px; ",
   },
   {
-    name: "fullname",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
-    sortable: false,
+    sortable: true,
     field: "fullname",
     format(val, row) {
       return `${row.prefix}${row.firstName}  ${row.lastName}`;
@@ -98,29 +91,20 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px; ",
   },
   {
-    name: "draftOrganizationOrganization",
+    name: "positionTemp",
     align: "left",
     label: "ตำแหน่ง/สังกัดที่รับการบรรจุ",
-    sortable: false,
-    field: "draftOrganizationOrganization",
+    sortable: true,
+    field: "positionTemp",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  // {
-  //   name: "draftPositionEmployee",
-  //   align: "left",
-  //   label: "ตำแหน่งที่บรรจุ",
-  //   sortable: false,
-  //   field: "draftPositionEmployee",
-  //   headerStyle: "font-size: 14px; min-width: 200px",
-  //   style: "font-size: 14px; ",
-  // },
 
   {
     name: "govAge",
     align: "left",
     label: "อายุราชการ(ปี)",
-    sortable: false,
+    sortable: true,
     field: "govAge",
     format(val) {
       return val;
@@ -143,17 +127,17 @@ const columns = ref<QTableProps["columns"]>([
     name: "dateAppoint",
     align: "left",
     label: "วันที่แต่งตั้ง",
-    sortable: false,
+    sortable: true,
     field: "dateAppoint",
     headerStyle: "font-size: 14px",
     format: (val) => date2Thai(val),
     style: "font-size: 14px",
   },
   {
-    name: "age",
+    name: "birthDate",
     align: "left",
     label: "อายุ",
-    sortable: false,
+    sortable: true,
     field: "age",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -162,7 +146,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "createdAt",
     align: "left",
     label: "วันที่สร้าง",
-    sortable: false,
+    sortable: true,
     field: "createdAt",
     format(val) {
       return date2Thai(val);
@@ -174,7 +158,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "dateRetireLaw",
     align: "left",
     label: "วันที่พ้นราชการ",
-    sortable: false,
+    sortable: true,
     field: "dateRetireLaw",
     format(val) {
       return date2Thai(val);
@@ -198,12 +182,11 @@ const columns = ref<QTableProps["columns"]>([
 const visibleColumns = ref<String[]>([
   "no",
   "citizenId",
-  "fullname",
-  "draftOrganizationOrganization",
-  // "draftPositionEmployee",
+  "firstName",
+  "positionTemp",
   "govAge",
   "dateEmployment",
-  "age",
+  "birthDate",
   "createdAt",
   "dateRetireLaw",
   "statustext",
@@ -216,14 +199,15 @@ async function fetchList() {
   await http
     .get(config.API.registryNew("-temp"), {
       params: {
+        ...params.value,
         ...queryParams,
         searchKeyword: queryParams.searchKeyword.trim(),
       },
     })
     .then(async (res) => {
-      rows.value = await res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / queryParams.pageSize);
-      total.value = res.data.result.total;
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -243,11 +227,7 @@ function onClickDelete(id: string) {
     await http
       .delete(config.API.registryNew("-employee") + `/${id}`)
       .then(async () => {
-        queryParams.page = await updateCurrentPage(
-          queryParams.page,
-          maxPage.value,
-          rows.value.length
-        );
+        await checkAndUpdatePage(rows.value.length);
         await fetchList();
         await success($q, "ลบข้อมูลสำเร็จ");
       })
@@ -287,22 +267,22 @@ function onClickSendOrder() {
   modalSendOrder.value = true;
 }
 
-/**
- * ฟังก์ชันอัพเดต Pagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: NewPagination) {
-  queryParams.page = 1;
-  queryParams.pageSize = newPagination.rowsPerPage;
-}
+// /**
+//  * ฟังก์ชันอัพเดต Pagination
+//  * @param newPagination ข้อมูล Pagination ใหม่
+//  */
+// function updatePagination(newPagination: NewPagination) {
+//   queryParams.page = 1;
+//   queryParams.pageSize = newPagination.rowsPerPage;
+// }
 
-/** ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า */
-watch(
-  () => queryParams.pageSize,
-  () => {
-    fetchList();
-  }
-);
+// /** ทำงานเมื่อมีการเปลี่่ยนจำนวนข้อมูลต่อหน้า */
+// watch(
+//   () => queryParams.pageSize,
+//   () => {
+//     fetchList();
+//   }
+// );
 
 /** ทำงานเมื่อมีการเรียกใข้ Components */
 onMounted(async () => {
@@ -364,7 +344,12 @@ onMounted(async () => {
           placeholder="ค้นหา"
           style="max-width: 200px"
           class="q-ml-sm"
-          @keydown.enter.prevent="(queryParams.page = 1), fetchList()"
+          @keydown.enter.prevent="
+            () => {
+              pagination.page = 1;
+              fetchList();
+            }
+          "
         >
           <template v-slot:append>
             <q-icon name="search" />
@@ -388,13 +373,14 @@ onMounted(async () => {
       </div>
     </div>
     <div class="col-12 q-pt-sm">
-      <d-table
+      <p-table
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumns"
         row-key="id"
         :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">
@@ -473,7 +459,7 @@ onMounted(async () => {
               </q-btn>
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <template v-if="col.name === 'draftOrganizationOrganization'">
+              <template v-if="col.name === 'positionTemp'">
                 <div v-if="props.row.draftPositionEmployee !== null">
                   <div class="col-4">
                     <div>
@@ -522,13 +508,16 @@ onMounted(async () => {
                   </div>
                 </div>
               </template>
+              <div v-else-if="col.name === 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
               <div v-else>
                 {{ col.value !== null && col.value !== "" ? col.value : "-" }}
               </div>
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
+        <!-- <template v-slot:pagination="scope">
           ทั้งหมด {{ total }} รายการ
           <q-pagination
             v-model="queryParams.page"
@@ -541,8 +530,8 @@ onMounted(async () => {
             :max-pages="5"
             @update:model-value="fetchList"
           ></q-pagination>
-        </template>
-      </d-table>
+        </template> -->
+      </p-table>
     </div>
   </q-card>
 
diff --git a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
index 04a135fa1..7a4aadb1a 100644
--- a/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
+++ b/src/modules/12_evaluatePersonal/components/Detail/viewstep/tableStep1.vue
@@ -20,7 +20,7 @@ const total = computed(() => {
 });
 
 const pagination = ref({
-  sortBy: "desc",
+  sortBy: "",
   descending: false,
   page: 1,
   rowsPerPage: 10,
diff --git a/src/modules/12_evaluatePersonal/components/Director/Form.vue b/src/modules/12_evaluatePersonal/components/Director/Form.vue
index 8185ac499..884f8d470 100644
--- a/src/modules/12_evaluatePersonal/components/Director/Form.vue
+++ b/src/modules/12_evaluatePersonal/components/Director/Form.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted, computed, type PropType } from "vue";
 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 { usePagination } from "@/composables/usePagination";
 
-/**
- * importTypr
- */
+/** importType*/
 import type { QTableProps } from "quasar";
 import type {
   FormData,
@@ -17,21 +18,13 @@ import type {
 } from "@/modules/11_discipline/interface/request/director";
 import type { Pagination } from "@/modules/12_evaluatePersonal/interface/index/Main";
 
-/**
- * importComponenst
- */
+/** importComponenst*/
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 
-/**
- * importStore
- */
-import { useCounterMixin } from "@/stores/mixin";
-
-/**
- * use
- */
+/** use*/
 const $q = useQuasar();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", searchInput);
 
 /**
  * รับ props มาจาก page หลัก
@@ -109,7 +102,7 @@ const columnsRespondent = ref<QTableProps["columns"]>([
     name: "citizenId",
     align: "left",
     label: "เลขประจำตัวประชาชน",
-    sortable: false,
+    sortable: true,
     field: "citizenId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -142,33 +135,19 @@ const columnsRespondent = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const total = ref<number>(0);
-const totalList = ref<number>(1);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 
-/**
- * บันทึกข้อมูล
- */
+/** บันทึกข้อมูล*/
 function onSubmit() {
   props.onSubmit(formData);
 }
 
-/**
- * update เมื่อเปลี่ยน option
- */
+/** update เมื่อเปลี่ยน option*/
 function updateSelect() {
   search.value = "";
 }
 
-/**
- * ค้นหารายชื่อ
- */
-function searchInput() {
+/** ค้นหารายชื่อ*/
+async function searchInput() {
   searchRef.value.validate();
   if (!searchRef.value.hasError) {
     showLoader();
@@ -177,19 +156,16 @@ function searchInput() {
       keyword: search.value ? search.value.trim() : "",
       system: (route.meta?.Key as string) || undefined,
     };
-    http
-      .post(
-        config.API.orgSearchPersonal() +
-          `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}`,
-        body
-      )
+    await http
+      .post(config.API.orgSearchPersonal(), body, {
+        params: {
+          ...params.value,
+        },
+      })
       .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;
-        const list = data.map((e: ResponsePreson) => ({
+        const result = res.data.result;
+        pagination.value.rowsNumber = result.total;
+        const list = result.data.map((e: ResponsePreson) => ({
           personId: e.id,
           idcard: e.citizenId,
           prefix: e.prefix,
@@ -218,7 +194,8 @@ function searchInput() {
 }
 
 /**
- * เลืือกชื่อกรรมการ
+ * เลือกชื่อกรรมการ
+ * @param data เลือกชื่อกรรมการ
  */
 function returnDetail(data: ResponsePreson) {
   formData.prefix = data.prefix;
@@ -239,24 +216,17 @@ function onclickViewinfo(id: string) {
 }
 
 /**
- * เปิด,ปิด  popup ทะเบียนประวัติ
+ * ฟังก์ชันอัพเดท modal
+ * @param modal เปิด,ปิด  popup ทะเบียนประวัติ
  */
 function updatemodalPersonal(modal: boolean) {
   modalPersonal.value = modal;
 }
 
-function updatePagination(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
-watch(
-  () => pagination.value.rowsPerPage,
-  () => {
-    searchInput();
-  }
-);
-
+/**
+ * ฟังก์ชันโหลดข้อมูล
+ * @param data ข้อมูลที่ส่งมา edit,view
+ */
 async function fetchForm(data: FormData) {
   formData.prefix = data.prefix;
   formData.firstname = data.firstname;
@@ -327,7 +297,7 @@ onMounted(async () => {
             </div>
 
             <div class="col-12">
-              <d-table
+              <p-table
                 ref="table"
                 :columns="columnsRespondent"
                 :rows="rows"
@@ -339,23 +309,9 @@ onMounted(async () => {
                 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="searchInput"
-                  ></q-pagination>
-                </template>
-
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th
@@ -377,11 +333,7 @@ onMounted(async () => {
                       @click.stop.prevent="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
@@ -404,7 +356,7 @@ onMounted(async () => {
                     </q-td>
                   </q-tr>
                 </template>
-              </d-table>
+              </p-table>
             </div>
           </div>
 
diff --git a/src/modules/12_evaluatePersonal/interface/index/evalute.ts b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
index 16ff58fa6..26135e7d6 100644
--- a/src/modules/12_evaluatePersonal/interface/index/evalute.ts
+++ b/src/modules/12_evaluatePersonal/interface/index/evalute.ts
@@ -59,7 +59,7 @@ interface CertificatesForm {
 
 interface EvaluateList {
   id: string;
-  citizanId: string;
+  citizenId: string;
   fullName: string;
   position: string;
   level: string | null;
diff --git a/src/modules/12_evaluatePersonal/store/Evaluate.ts b/src/modules/12_evaluatePersonal/store/Evaluate.ts
index 33bc33c40..96e37b202 100644
--- a/src/modules/12_evaluatePersonal/store/Evaluate.ts
+++ b/src/modules/12_evaluatePersonal/store/Evaluate.ts
@@ -59,7 +59,7 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
       (data: EvaluateRes) =>
         ({
           id: data.id,
-          citizanId: data.citizenId,
+          citizenId: data.citizenId,
           fullName: data.fullName,
           position: data.position,
           level: convertType(data.type),
@@ -74,12 +74,12 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
 
   const visibleColumns = ref<String[]>([
     "no",
-    "citizanId",
+    "citizenId",
     "fullName",
     "position",
     "level",
-    "positionNumber",
-    "agency",
+    "posNo",
+    "oc",
     "status",
   ]);
   const columns = ref<QTableProps["columns"]>([
@@ -96,19 +96,17 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
       name: "level",
       align: "left",
       label: "ระดับที่ยื่นขอ",
-      sortable: true,
+      sortable: false,
       field: "level",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "citizanId",
+      name: "citizenId",
       align: "center",
       label: "เลขประจำตัวประชาชน",
-      sortable: false,
-      field: "citizanId",
+      sortable: true,
+      field: "citizenId",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
     },
@@ -129,36 +127,30 @@ export const useEvalutuonStore = defineStore("EvalutuonStore", () => {
       field: "position",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "positionNumber",
+      name: "posNo",
       align: "left",
       label: "เลขที่ตำแหน่ง",
       sortable: true,
       field: "positionNumber",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "agency",
+      name: "oc",
       align: "left",
       label: "สังกัด",
       sortable: true,
       field: "agency",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "status",
       align: "left",
       label: "สถานะ",
-      sortable: true,
+      sortable: false,
       field: "status",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
diff --git a/src/modules/12_evaluatePersonal/views/MainPage.vue b/src/modules/12_evaluatePersonal/views/MainPage.vue
index ae134e11d..7335357d4 100644
--- a/src/modules/12_evaluatePersonal/views/MainPage.vue
+++ b/src/modules/12_evaluatePersonal/views/MainPage.vue
@@ -7,6 +7,7 @@ import genReportXLSX from "@/plugins/genreportxlsx";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { usePagination } from "@/composables/usePagination";
 
 /** importType*/
 import type {
@@ -28,6 +29,7 @@ const route = useRoute();
 const mixin = useCounterMixin();
 const store = useEvalutuonStore();
 const { showLoader, hideLoader, messageError } = mixin;
+const { pagination, params, onRequest } = usePagination("", fetchEvaluteList);
 
 /** request body*/
 const organization = ref<string>("");
@@ -37,12 +39,7 @@ const organizationOps = ref<DataOption[]>([]);
 const year = ref<number>(new Date().getFullYear());
 const modalReport = ref<boolean>(false); //ตัวแปร popup report
 const loadingBtn = ref<boolean>(false); //ตัวแปร popup report
-const currentPage = ref<number>(1); //หน้าปัจจุบัน
-const maxPage = ref<number>(0); //จำนวนหน่า
-const page = ref<number>(1); //หน้า
-const total = ref<number>(0); //จำนวนข้อมูลทั้งหมด
 const filter = ref<string>(""); //คำค้นหา
-const pageSize = ref<number>(10); //จำนวนรายการต่อหน้า
 
 //ค้นหาตามสถานะ
 const selectedStatus = ref<string[]>([
@@ -69,50 +66,39 @@ const optionsMain = ref<OptionStatus[]>([
 ]);
 const options = ref<OptionStatus[]>([]); //ตัวเลือกค้นหาตามสถานะ
 
-/** pagination ของตาราง*/
-const initialPagination = ref<any>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: pageSize,
+/** ชื่อค่าที่ค้นหาสภานะ*/
+const label = computed(() => {
+  const filterOption = optionsMain.value.filter((option) =>
+    selectedStatus.value.includes(option.val)
+  );
+  const labelval = filterOption.map((e) => e.label);
+  if (labelval.length !== 0) {
+    return labelval.length <= 2
+      ? `${labelval.slice(0, 2).join(", ")}`
+      : `${labelval.slice(0, 2).join(", ")}, อื่นๆ (${labelval.length - 2})`;
+  } else return "";
 });
 
-/**
- * function อัปเดท paging
- * @param initialPagination ข้อมูล pagination
- */
-async function updatePagination(initialPagination: any) {
-  currentPage.value = 1;
-  pageSize.value = initialPagination.rowsPerPage;
-}
-
-/**
- * function ค้นหาตาม keyword
- */
+/** function ค้นหาตาม keyword*/
 function filterFn() {
-  updatePagination(filter.value);
-  pageSize.value = initialPagination.value.rowsPerPage;
+  pagination.value.page = 1;
   fetchEvaluteList();
 }
 
-/**
- * function เรียกรายการคำขอประเมินD
- */
+/** function เรียกรายการคำขอประเมิน*/
 async function fetchEvaluteList() {
   showLoader();
   const body = {
-    page: currentPage.value,
-    pageSize: pageSize.value,
+    ...params.value,
     keyword: filter.value.trim(),
     status: selectedStatus.value,
   };
   await http
     .post(config.API.evaluationMain(), body)
     .then(async (res) => {
-      const data = res.data.result.data;
-      total.value = res.data.result.total;
-      maxPage.value = Math.ceil(total.value / pageSize.value);
-      store.fetchData(data);
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      store.fetchData(result.data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -135,21 +121,6 @@ function Detailpage(id: string, type: string) {
   }
 }
 
-/**
- * ชื่อค่าที่ค้นหาสภานะ
- */
-const label = computed(() => {
-  const filterOption = optionsMain.value.filter((option) =>
-    selectedStatus.value.includes(option.val)
-  );
-  const labelval = filterOption.map((e) => e.label);
-  if (labelval.length !== 0) {
-    return labelval.length <= 2
-      ? `${labelval.slice(0, 2).join(", ")}`
-      : `${labelval.slice(0, 2).join(", ")}, อื่นๆ (${labelval.length - 2})`;
-  } else return "";
-});
-
 /**
  * function ต้นหาข้อมูลของ Option
  * @param val ค่าที่ต้องการฟิลเตอร์
@@ -207,9 +178,7 @@ async function getReport() {
     });
 }
 
-/**
- * function fetch ข้อมูลโครงสร้างปัจจุบัน
- */
+/** function fetch ข้อมูลโครงสร้างปัจจุบัน*/
 async function getActiveId() {
   showLoader();
   await http
@@ -252,14 +221,6 @@ function filterSelector(val: string, update: Function) {
   });
 }
 
-/** function callback เมื่อมีการเปลี่ยนหน้า*/
-watch(
-  () => pageSize.value,
-  () => {
-    fetchEvaluteList();
-  }
-);
-
 /** HookLifecycle */
 onMounted(async () => {
   await fetchEvaluteList(); // เรียกข้อมูลรายการปรัเมิน
@@ -339,20 +300,20 @@ onMounted(async () => {
       />
     </div>
     <div>
-      <d-table
+      <p-table
         ref="table"
         :columns="store.columns"
         :rows="store.rows"
-        row-key="interrogated"
+        row-key="id"
         flat
         bordered
         :paging="false"
         dense
         class="custom-header-table"
         :visible-columns="store.visibleColumns"
-        v-model:pagination="initialPagination"
         :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">
@@ -362,6 +323,7 @@ onMounted(async () => {
             </q-th>
           </q-tr>
         </template>
+
         <template v-slot:body="props">
           <q-tr :props="props">
             <q-td auto-width>
@@ -379,7 +341,7 @@ onMounted(async () => {
             </q-td>
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
-                {{ (page - 1) * pageSize + props.rowIndex + 1 }}
+                {{ props.rowIndex + 1 }}
               </div>
 
               <div v-else-if="col.name === 'agency'">
@@ -393,21 +355,7 @@ onMounted(async () => {
             </q-td>
           </q-tr>
         </template>
-        <template v-slot:pagination="scope">
-          ทั้งหมด {{ total }} รายการ
-          <q-pagination
-            v-model="currentPage"
-            active-color="primary"
-            color="dark"
-            :max="Number(maxPage)"
-            size="sm"
-            boundary-links
-            direction-links
-            :max-pages="5"
-            @update:model-value="fetchEvaluteList"
-          ></q-pagination>
-        </template>
-      </d-table>
+      </p-table>
     </div>
   </q-card>
 
diff --git a/src/modules/18_command/components/DialogCreateCommand.vue b/src/modules/18_command/components/DialogCreateCommand.vue
index 393a5e2b2..0c8d17e03 100644
--- a/src/modules/18_command/components/DialogCreateCommand.vue
+++ b/src/modules/18_command/components/DialogCreateCommand.vue
@@ -7,6 +7,7 @@ import config from "@/app.config";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandMainStore } from "@/modules/18_command/store/Main";
+import { usePagination } from "@/composables/usePagination";
 
 import type { QTableProps } from "quasar";
 import type {
@@ -25,6 +26,7 @@ const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, messageError, dialogConfirm, hideLoader, date2Thai } =
   mixin;
+const { pagination, params, onRequest } = usePagination("", getListCommandDraf);
 
 /** props*/
 const modal = defineModel<boolean>("modal", { required: true });
@@ -52,8 +54,6 @@ const commandChapter = ref<string>(""); //ตอนที่
 const rows = ref<DataListCommand[]>([]); // รายการคำสั่ง
 const selected = ref<DataOrder[]>([]); // id คำสั่งที่เลือก
 const filter = ref<string>(""); // คำค้นหา
-const total = ref<number>(0); //จำนวนรายการ
-const totalList = ref<number>(1); //จำนวนหน้า
 const visibleColumns = ref<string[]>([
   "commandNo",
   "issue",
@@ -67,7 +67,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "commandNo",
     align: "left",
     label: "เลขที่คำสั่ง",
-    sortable: false,
+    sortable: true,
     field: "commandNo",
     format(val, row) {
       return val ? `${val}/${row.commandYear + 543}` : "-";
@@ -88,7 +88,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "commandAffectDate",
     align: "left",
     label: "วันที่ลงนาม",
-    sortable: false,
+    sortable: true,
     field: "commandAffectDate",
     format(val) {
       return val ? date2Thai(val) : "-";
@@ -100,7 +100,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "commandExcecuteDate",
     align: "left",
     label: "วันที่คำสั่งมีผล",
-    sortable: false,
+    sortable: true,
     field: "commandExcecuteDate",
     format(val) {
       return val ? date2Thai(val) : "-";
@@ -112,7 +112,7 @@ const columns = ref<QTableProps["columns"]>([
     name: "createdFullName",
     align: "left",
     label: "ผู้สร้าง",
-    sortable: false,
+    sortable: true,
     field: "createdFullName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
@@ -127,12 +127,6 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const pagination = ref({
-  sortBy: "createdAt",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 
 const selectCreate = ref<string | null>("NEW"); //ประเภทการออกคำสั่ง สร้างใหม่/คำสั่งแบบร่าง
 
@@ -140,16 +134,19 @@ const selectCreate = ref<string | null>("NEW"); //ประเภทการอ
 async function getListCommandDraf() {
   showLoader();
   await http
-    .get(
-      config.API.commandList +
-        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&year=${commandYear.value}&keyword=${filter.value}&status=DRAFT&commandTypeId=${commandType.value}`
-    )
+    .get(config.API.commandList, {
+      params: {
+        ...params.value,
+        year: commandYear.value,
+        keyword: filter.value.trim(),
+        status: "DRAFT",
+        commandTypeId: commandType.value,
+      },
+    })
     .then(async (res) => {
-      totalList.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
-      );
-      total.value = res.data.result.total;
-      rows.value = res.data.result.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -179,19 +176,6 @@ function createCommand(isRedirect: boolean) {
       posLevel: e.posLevel,
       ...(e.remarkVertical ? { remarkVertical: e.remarkVertical } : {}),
       ...(e.remarkHorizontal ? { remarkHorizontal: e.remarkHorizontal } : {}),
-
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { position: e.position ? e.position : null }
-      //   : {}),
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { posType: e.posType ? e.posType : null }
-      //   : {}),
-      // ...(props.commandTypeCode == "C-PM-01" ||
-      // props.commandTypeCode == "C-PM-02"
-      //   ? { posLevel: e.posLevel ? e.posLevel : null }
-      //   : {}),
     }));
 
     const body = {
@@ -310,15 +294,6 @@ async function fetchCommandType() {
   commandCode.value = commandOp.value[0].code;
 }
 
-/**
- * ฟังก์ชันอัปเดทจำนวนแถวต่อหน้า
- * @param newPagination จำนวนแถวที่ต้องการ
- */
-function updatePagination(newPagination: Pagination) {
-  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPagination.rowsPerPage;
-}
-
 const isHold = ref<boolean>(true); // true คือแสดงปุ่มบันทึกและเลือกรายชื่อต่อ / false คือซ่อนปุ่มบันทึกและเลือกรายชื่อต่อ
 // tab สร้างคำสั่งใหม่ และเลือกคำสั่งที่เป็นแบบร่าง
 const tabOptions = ref<TabOptions[]>([
@@ -340,14 +315,6 @@ async function displayTab() {
     : [{ label: "สร้างคำสั่งใหม่", value: "NEW" }];
 }
 
-/** ดูการเปลี่ยนแปลงของจำนวนแถวต่อหน้า*/
-watch(
-  () => pagination.value.rowsPerPage,
-  async () => {
-    await getListCommandDraf();
-  }
-);
-
 /** ดูการเปลี่ยนแปลงของ modal*/
 watch(modal, () => {
   if (modal.value && props.persons?.length !== 0) {
@@ -561,7 +528,7 @@ watch(
             />
           </q-toolbar>
           <div class="col-12">
-            <d-table
+            <p-table
               :columns="columns"
               :rows="rows"
               row-key="id"
@@ -569,23 +536,9 @@ watch(
               selection="single"
               v-model:selected="selected"
               :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePagination"
+              v-model:pagination="pagination"
+              @request="onRequest"
             >
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total.toLocaleString() }} รายการ
-                <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="getListCommandDraf"
-                ></q-pagination>
-              </template>
-
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
                   <q-td>
@@ -607,7 +560,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-            </d-table>
+            </p-table>
           </div>
         </div>
       </q-card-section>
diff --git a/src/modules/18_command/components/DialogCreateCommandORG.vue b/src/modules/18_command/components/DialogCreateCommandORG.vue
index 8ef7b34bc..54f99f11e 100644
--- a/src/modules/18_command/components/DialogCreateCommandORG.vue
+++ b/src/modules/18_command/components/DialogCreateCommandORG.vue
@@ -633,18 +633,6 @@ watch(modal, async () => {
                     </q-td>
                   </q-tr>
                 </template>
-                <!-- <template v-slot:pagination="scope">
-                    <q-pagination
-                      v-model="reqMaster.page"
-                      active-color="primary"
-                      color="dark"
-                      :max="totalPage"
-                      :max-pages="5"
-                      size="sm"
-                      boundary-links
-                      direction-links
-                    ></q-pagination>
-                  </template> -->
               </d-table>
             </div>
           </div>
diff --git a/src/modules/18_command/components/Main/TableMain.vue b/src/modules/18_command/components/Main/TableMain.vue
index 53124e0eb..db61c7a70 100644
--- a/src/modules/18_command/components/Main/TableMain.vue
+++ b/src/modules/18_command/components/Main/TableMain.vue
@@ -6,7 +6,6 @@ import { useRouter } from "vue-router";
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
-import { updateCurrentPage } from "@/utils/function";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -27,11 +26,11 @@ const {
   dialogConfirm,
 } = useCounterMixin();
 
-const page = defineModel<number>("page", { required: true });
-const pageSize = defineModel<number>("pageSize", { required: true });
-
+const pagination = defineModel<Pagination>("pagination", { required: true });
 const props = defineProps({
   fetchList: { type: Function, required: true },
+  onRequest: { type: Function, required: true },
+  checkAndUpdatePage: { type: Function, required: true },
 });
 
 const modalCopy = ref<boolean>(false);
@@ -82,11 +81,7 @@ function onReCommand(id: string) {
       await http
         .put(config.API.commandAction(id, "resume"))
         .then(async () => {
-          page.value = await updateCurrentPage(
-            page.value,
-            store.maxPage,
-            store.rows.length
-          );
+          await props.checkAndUpdatePage(store.rows.length);
           await fetchListCommand();
           success($q, "ดึงไปทำคำสั่งใหม่สำเร็จ");
         })
@@ -109,11 +104,7 @@ function onDeleteCommand(id: string) {
       await http
         .delete(config.API.command + `/${id}`)
         .then(async () => {
-          page.value = await updateCurrentPage(
-            page.value,
-            store.maxPage,
-            store.rows.length
-          );
+          await props.checkAndUpdatePage(store.rows.length);
           await fetchListCommand();
           success($q, "ลบรายการสำเร็จ");
         })
@@ -129,27 +120,13 @@ function onDeleteCommand(id: string) {
   );
 }
 
-/**
- * function updatePagination
- * @param newPagination ข้อมูล Pagination ใหม่
- */
-function updatePagination(newPagination: Pagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
-}
-
-watch(pageSize, () => {
-  isCheckPageSize.value = true;
-  fetchListCommand();
-});
-
 onMounted(() => {
   !isCheckPageSize.value && fetchListCommand();
 });
 </script>
 
 <template>
-  <d-table
+  <p-table
     ref="table"
     :columns="store.columns"
     :visible-columns="store.visibleColumns"
@@ -160,7 +137,8 @@ onMounted(() => {
     bordered
     :paging="true"
     :rows-per-page-options="[10, 25, 50, 100]"
-    @update:pagination="updatePagination"
+    @request="onRequest"
+    v-model:pagination="pagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -332,21 +310,7 @@ onMounted(() => {
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:pagination="scope">
-      ทั้งหมด {{ store.total.toLocaleString() }} รายการ
-      <q-pagination
-        v-model="page"
-        active-color="primary"
-        color="dark"
-        :max="Number(store.maxPage)"
-        size="sm"
-        boundary-links
-        direction-links
-        :max-pages="5"
-        @update:model-value="fetchListCommand"
-      ></q-pagination>
-    </template>
-  </d-table>
+  </p-table>
 
   <DialogFormCommand
     v-model:modal="modalCopy"
diff --git a/src/modules/18_command/components/Step/PerviewPDF.vue b/src/modules/18_command/components/Step/PerviewPDF.vue
index a7ff8f43a..4f4b64e27 100644
--- a/src/modules/18_command/components/Step/PerviewPDF.vue
+++ b/src/modules/18_command/components/Step/PerviewPDF.vue
@@ -6,7 +6,6 @@ import axios from "axios";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
 import type { DataFileDownload } from "@/modules/18_command/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -15,9 +14,11 @@ const $q = useQuasar();
 const { messageError } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
-const dataFile = defineModel<DataFileDownload>("dataFile", { required: true });
+const dataFile = defineModel<DataFileDownload | undefined>("dataFile", {
+  required: false,
+});
 
-const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
+const pdfSrc = ref<any | undefined>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const vuePDFRef = ref<any>(null);
@@ -59,7 +60,7 @@ function onClose() {
 }
 
 watch(modal, (val) => {
-  if (val) {
+  if (val && dataFile.value) {
     fetchPDF(dataFile.value.downloadUrl, dataFile.value.fileType);
   } else {
     pdfSrc.value = undefined;
diff --git a/src/modules/18_command/components/Step/View0_Digital.vue b/src/modules/18_command/components/Step/View0_Digital.vue
index 851867b5d..fbff4569c 100644
--- a/src/modules/18_command/components/Step/View0_Digital.vue
+++ b/src/modules/18_command/components/Step/View0_Digital.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
-import type { Pagination } from "@/modules/18_command/interface/index/Main";
 import type {
   DataFileDownload,
   DataDirector,
@@ -31,6 +31,7 @@ const {
   dialogConfirm,
   dialogMessageNotify,
 } = useCounterMixin();
+const { pagination, params, onRequest } = usePagination("", fetchListDirector);
 
 const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
 
@@ -48,16 +49,13 @@ const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
 const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
-const isDirector = ref<boolean>(true);
-const isAct = ref<boolean>(false);
+const isDirector = ref<boolean>(true); //ผู้บังคับบัญชา
+const isAct = ref<boolean>(false); //รักษาการแทน
+const dataFile = ref<DataFileDownload>(); //ข้อมูลไฟล์คำสั่งที่ดาวน์โหลดมา
 
 const modalSelect = ref<boolean>(false); //popup เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
 const search = ref<string>("");
 const rows = ref<DataDirector[]>([]); //รายชื่อผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const maxPaeg = ref<number>(1);
-const total = ref<number>(0);
 const selected = ref<DataDirector[]>([]); //เลือกผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง
 const columns = ref<QTableProps["columns"]>([
   {
@@ -80,7 +78,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 
   {
-    name: "fullName",
+    name: "firstName",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
@@ -133,14 +131,11 @@ const modalComment = ref<boolean>(false); //popup แสดงความเห
 const reason = ref<string>("");
 
 //รอออกคำสั่ง
-const isCheckOrder = ref<boolean>(true); //เช็ครอออกคำสั่ง
 const isLoad = ref<boolean>(false); //แสดงโหลด
 const isPersonSign = ref<boolean>(false); //ผู้มีอำนาจลงนาม
 const modalPerView = ref<boolean>(false);
 
-/**
- * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
- */
+/** ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ*/
 function onConfirmDraft() {
   if (
     store?.dataCommand?.commandNo !== "" &&
@@ -156,21 +151,20 @@ function onConfirmDraft() {
   }
 }
 
-function fetchListDirector() {
+/** ฟังก์ชันดึงข้อมูลผู้บังคับบัญชา/ผู้มีอำนาจออกคำสั่ง */
+async function fetchListDirector() {
   showLoader();
-  http
+  await http
     .post(config.API.commandDirector, {
       isDirector: isDirector.value, // fix ค่านี้เป็น true
       isAct: isAct.value,
       keyword: search.value,
-      page: page.value,
-      pageSize: pageSize.value,
+      ...params.value,
     })
     .then((res) => {
-      const data = res.data.result;
-      rows.value = data.data;
-      maxPaeg.value = Math.ceil(data.total / pageSize.value);
-      total.value = data.total;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -180,11 +174,13 @@ function fetchListDirector() {
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูล */
 function onSearchData() {
-  page.value = 1;
+  pagination.value.page = 1;
   fetchListDirector();
 }
 
+/** ฟังก์ชันยืนยันการส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ */
 function onConfirmSendToCommander() {
   dialogConfirm(
     $q,
@@ -212,12 +208,14 @@ function onConfirmSendToCommander() {
   );
 }
 
+/** ฟังก์ชันแสดง popup แสดงความเห็น */
 function onComment(id: string, isStatus: boolean) {
   modalComment.value = true;
   commandSignId.value = id;
   isSignatory.value = isStatus;
 }
 
+/** ฟังก์ชันบันทึกความคิดเห็น */
 function onSubmitComment() {
   dialogConfirm($q, async () => {
     showLoader();
@@ -243,6 +241,7 @@ function onSubmitComment() {
   });
 }
 
+/** ฟังก์ชันปิด dialog และ reset ค่า */
 function onCloseDialog() {
   isAct.value = false;
   isDirector.value = true;
@@ -252,17 +251,21 @@ function onCloseDialog() {
   rows.value = [];
   selected.value = [];
   search.value = "";
-  page.value = 1;
-  pageSize.value = 10;
-  maxPaeg.value = 1;
-  total.value = 0;
+  pagination.value = {
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 0,
+    sortBy: "",
+    descending: false,
+  };
+
   reason.value = "";
 }
 
-function updatePagination(newPagination: Pagination) {
-  pageSize.value = newPagination.rowsPerPage;
-}
-
+/**
+ *  ฟังก์ชันดึงข้อมูลเอกสารคำสั่ง
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
+ */
 async function fetchDoc(group: string) {
   showLoader();
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@@ -284,6 +287,10 @@ async function fetchDoc(group: string) {
     });
 }
 
+/**
+ * ฟังก์ชันอัพโหลดไฟล์คำสั่ง
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
+ */
 function onUploadFile(group: string) {
   showLoader();
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@@ -312,7 +319,10 @@ function onUploadFile(group: string) {
 }
 
 /**
- * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ * ฟังก์ชันอัพโหลดไฟล์คำสั่ง
+ * @param uploadUrl ลิงค์อัพโหลดไฟล์
+ * @param file ไฟล์ที่อัพโหลด
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
  */
 async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
   const formData = new FormData();
@@ -340,11 +350,11 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
     });
 }
 
-const dataFile = ref<DataFileDownload>();
-
 /**
- * ดาวน์โหลดลิงก์ไฟล์
- * @param fileName file name
+ * ฟังก์ชันดาวน์โหลดไฟล์
+ * @param file ข้อมูลไฟล์
+ * @param group ประเภทคำสั่ง order=คำสั่ง, tailer=เอกสารแนบท้าย
+ * @param isView ดูไฟล์ในหน้าใหม่ไหม (default=false)
  */
 function downloadFile(file: any, group: string, isView: boolean = false) {
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
@@ -375,6 +385,7 @@ function downloadFile(file: any, group: string, isView: boolean = false) {
     });
 }
 
+/** ฟังก์ชันดึงข้อมูลรายการผู้มีอำนาจ */
 async function fetchListAuthority() {
   await http
     .get(config.API.command + `/step/${commandId.value}`)
@@ -387,17 +398,11 @@ async function fetchListAuthority() {
     });
 }
 
+/** ฟังก์ชันแสดงเฉพาะรักษาการแทน */
 function onAct() {
   isDirector.value = !isDirector.value;
 }
 
-watch(
-  () => pageSize.value,
-  () => {
-    onSearchData();
-  }
-);
-
 onMounted(async () => {
   isLoad.value = false;
   let promises = [fetchDoc("order")];
@@ -742,7 +747,7 @@ onMounted(async () => {
           </div>
 
           <div class="col-12">
-            <d-table
+            <p-table
               flat
               :columns="columns"
               :rows="rows"
@@ -751,7 +756,8 @@ onMounted(async () => {
               selection="single"
               v-model:selected="selected"
               :rows-per-page-options="[10, 25, 50, 100]"
-              @update:pagination="updatePagination"
+              v-model:pagination="pagination"
+              @request="onRequest"
             >
               <template v-slot:header-selection="scope">
                 <q-checkbox
@@ -796,21 +802,7 @@ onMounted(async () => {
                   </q-td>
                 </q-tr>
               </template>
-              <template v-slot:pagination="scope">
-                ทั้งหมด {{ total.toLocaleString() }} รายการ
-                <q-pagination
-                  v-model="page"
-                  active-color="primary"
-                  color="dark"
-                  :max="Number(maxPaeg)"
-                  size="sm"
-                  boundary-links
-                  direction-links
-                  :max-pages="5"
-                  @update:model-value="fetchListDirector"
-                ></q-pagination>
-              </template>
-            </d-table>
+            </p-table>
           </div>
 
           <div class="col-12">
@@ -861,10 +853,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <PerviewPDF
-    v-model:modal="modalPerView"
-    v-model:data-file="dataFile as DataFileDownload"
-  />
+  <PerviewPDF v-model:modal="modalPerView" v-model:data-file="dataFile" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/18_command/interface/request/Main.ts b/src/modules/18_command/interface/request/Main.ts
index 20bc6c086..fa693b2ae 100644
--- a/src/modules/18_command/interface/request/Main.ts
+++ b/src/modules/18_command/interface/request/Main.ts
@@ -1,6 +1,6 @@
 interface FormQuery {
-  page: number;
-  pageSize: number;
+  page?: number;
+  pageSize?: number;
   year: number;
   keyword: string;
   commandTypeId: string;
diff --git a/src/modules/18_command/store/ListStore.ts b/src/modules/18_command/store/ListStore.ts
index 413d3e892..e76157e66 100644
--- a/src/modules/18_command/store/ListStore.ts
+++ b/src/modules/18_command/store/ListStore.ts
@@ -22,7 +22,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
       name: "commandNo",
       align: "left",
       label: "เลขที่คำสั่ง",
-      sortable: false,
+      sortable: true,
       field: "commandNo",
       format(val, row) {
         return val
@@ -47,7 +47,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
       name: "commandAffectDate",
       align: "left",
       label: "วันที่ลงนาม",
-      sortable: false,
+      sortable: true,
       field: "commandAffectDate",
       format(val) {
         return val ? date2Thai(val) : "-";
@@ -59,7 +59,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
       name: "commandExcecuteDate",
       align: "left",
       label: "วันที่คำสั่งมีผล",
-      sortable: false,
+      sortable: true,
       field: "commandExcecuteDate",
       format(val) {
         return val ? date2Thai(val) : "-";
@@ -71,7 +71,7 @@ export const useCommandListStore = defineStore("commandListStore", () => {
       name: "createdFullName",
       align: "left",
       label: "ผู้สร้าง",
-      sortable: false,
+      sortable: true,
       field: "createdFullName",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
diff --git a/src/modules/18_command/views/lists.vue b/src/modules/18_command/views/lists.vue
index fc5f64f2e..afc20262d 100644
--- a/src/modules/18_command/views/lists.vue
+++ b/src/modules/18_command/views/lists.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
 import { checkPermission } from "@/utils/permissions";
 import { useCounterMixin } from "@/stores/mixin";
 import { useCommandListStore } from "@/modules/18_command/store/ListStore";
+import { usePagination } from "@/composables/usePagination";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -20,6 +21,10 @@ import TableList from "@/modules/18_command/components/Main/TableMain.vue";
 const $q = useQuasar();
 const store = useCommandListStore();
 const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { pagination, params, onRequest, checkAndUpdatePage } = usePagination(
+  "",
+  fetchListCommand
+);
 
 //รายการ Tab รายการคำสั่ง
 const tabsManu = ref<ItemTabs[]>([
@@ -31,8 +36,6 @@ const tabsManu = ref<ItemTabs[]>([
 ]);
 //ฟอร์มช้อมูลการค้นหา
 const queryParams = reactive<FormQuery>({
-  page: 1, //หน้า
-  pageSize: 10, //จำนวนต่อหน้า
   year: new Date().getFullYear(), //ปีงบประมาณ
   keyword: "", //คำค้นหา
   commandTypeId: "",
@@ -47,28 +50,26 @@ const commandOp = ref<DataOption[]>([]);
 
 const modalAdd = ref<boolean>(false); // เพิ่มคำสั่ง
 
-/**
- * ฟังก์ชันดึงข้อมูลรายการคำสั่ง
- */
+/** ฟังก์ชันดึงข้อมูลรายการคำสั่ง */
 async function fetchListCommand() {
-  store.rows = [];
   showLoader();
   await http
     .get(config.API.commandList, {
       params: {
         ...queryParams,
+        ...params.value,
         status: store.tabsMain,
         keyword: queryParams.keyword.trim(),
       },
     })
     .then(async (res) => {
-      const data = await res.data.result;
-      store.rows = data.data;
-      store.total = data.total;
-      store.maxPage = Math.ceil(data.total / queryParams.pageSize);
+      const result = await res.data.result;
+      pagination.value.rowsNumber = result.total;
+      store.rows = result.data;
     })
     .catch((err) => {
       messageError($q, err);
+      store.rows = [];
     })
     .finally(() => {
       hideLoader();
@@ -246,8 +247,9 @@ onMounted(async () => {
         >
           <TableList
             :fetch-list="fetchListCommand"
-            v-model:page="queryParams.page"
-            v-model:pageSize="queryParams.pageSize"
+            v-model:pagination="pagination"
+            @request="onRequest"
+            :checkAndUpdatePage="checkAndUpdatePage"
           />
         </q-tab-panel>
       </q-tab-panels>