diff --git a/src/api/09_leave/api.leave.ts b/src/api/09_leave/api.leave.ts
index 2951e57ac..e419b80dc 100644
--- a/src/api/09_leave/api.leave.ts
+++ b/src/api/09_leave/api.leave.ts
@@ -8,7 +8,12 @@ export default {
   logRecord: () => `${leave}/log-record`,
   timeRecord: () => `${leave}/time-record`,
   timeRecordById: (id: string) => `${leave}/time-record/${id}`,
+  /** เปลี่ยนแปลงลงเวลา*/
   leaveSearch: () => `${leave}/search`,
   leaveRound: () => `${leave}/round`,
   leaveRoundById: (id: string) => `${leave}/round/${id}`,
+  /**ลงเวลาพิเศษ */
+  specialTime: () => `${leave}/admin/edit`,
+  specialTimeApprove: (id: string) => `${leave}/admin/edit/approve/${id}`,
+  specialTimeReject: (id: string) => `${leave}/admin/edit/reject/${id}`,
 };
diff --git a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
index 7becae6a3..b107d52e3 100644
--- a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
+++ b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
@@ -306,6 +306,7 @@ watch(
             dense
             class="custom-header-table"
             :visible-columns="dataStore.visibleColumnsHistory"
+            :rows-per-page-options="[10, 25, 50, 100]"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
index 82c31b234..5d0615ac3 100644
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -8,11 +8,20 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const SpecialTimeStore = useSpecialTimeStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai } = mixin;
+const {
+  dialogConfirm,
+  date2Thai,
+  showLoader,
+  success,
+  messageError,
+  hideLoader,
+} = mixin;
 const currentDate = ref<Date | null>(new Date());
 const checkInRef = ref<Object | null>(null);
 const checkOutRef = ref<Object | null>(null);
@@ -51,25 +60,54 @@ function validateForm() {
     console.log(hasError);
   }
 }
-function onSubmit() {
-  dialogConfirm(
-    $q,
-    async () => {
-      props.closeDialog?.();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-  );
-}
+
 const props = defineProps({
   modal: { type: Boolean, default: "" },
   editCheck: { type: String, default: "" },
   date: { type: String, default: "" },
   dateFix: { type: String, default: "" },
+  id: { type: String, default: "" },
   closeDialog: { type: Function, default: () => {} },
   detailData: Object,
 });
 
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      props.closeDialog?.();
+      await approveData();
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+  console.log(props.dateFix);
+  console.log(props.id);
+}
+
+const approveData = async () => {
+  showLoader();
+  const body = {
+    checkInTime: formData.checkIn,
+    checkOutTime: formData.checkOut,
+    checkInStatus: SpecialTimeStore.checkInStatus,
+    checkOutStatus: SpecialTimeStore.checkOutStatus,
+    reason: formData.note,
+  };
+  await http
+    .put(config.API.specialTimeApprove(props.id), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
 function close() {
   if (props.closeDialog) {
     props.closeDialog();
diff --git a/src/modules/09_leave/stores/ChangeRoundStore.ts b/src/modules/09_leave/stores/ChangeRoundStore.ts
index 5e9ed17d4..395a66fff 100644
--- a/src/modules/09_leave/stores/ChangeRoundStore.ts
+++ b/src/modules/09_leave/stores/ChangeRoundStore.ts
@@ -185,7 +185,6 @@ export const useChangeRoundDataStore = defineStore(
     }
 
     async function fetchDatainHistory() {
-      console.log("tes");
       console.log(profileId.value);
       showLoader();
       await http
@@ -232,6 +231,7 @@ export const useChangeRoundDataStore = defineStore(
       fetchDataForCardId,
       checkCilck,
       setProfileId,
+      changePage,
     };
   }
 );
diff --git a/src/modules/09_leave/stores/SpecialTimeStore.ts b/src/modules/09_leave/stores/SpecialTimeStore.ts
index 76f3c3fbc..9578387b0 100644
--- a/src/modules/09_leave/stores/SpecialTimeStore.ts
+++ b/src/modules/09_leave/stores/SpecialTimeStore.ts
@@ -1,45 +1,58 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, watch, defineEmits } from "vue";
 import type { QTableProps } from "quasar";
 import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
 import type { ListData } from "@/modules/09_leave/interface/request/specialTime";
 import { useCounterMixin } from "@/stores/mixin";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const {
+  date2Thai,
+  messageError,
+  showLoader,
+  dialogMessageNotify,
+  dialogConfirm,
+  success,
+  hideLoader,
+} = mixin;
 
 export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   const rows = ref<any[]>([]);
   const selectDate = ref<Date | null>(new Date());
   const fiscalYear = ref<string | null>("0");
   const DataMainOrig = ref<DataRows[]>([]); // ข้อมูลหลักดั้งเดิม
-  async function fecthList(data: ListData[]) {
-    let datalist: DataRows[] = data.map((e: ListData) => ({
-      id: e.id,
-      fullname: e.fullname,
-      date: date2Thai(new Date(e.date), false, true),
-      dateFix: date2Thai(new Date(e.dateFix)),
-      timeMorning:
-        e.startTimeMorning == null
-          ? "-"
-          : e.startTimeMorning + " - " + e.endTimeMorning,
-      timeAfternoon:
-        e.startTimeAfternoon == null
-          ? "-"
-          : e.startTimeAfternoon + " - " + e.endTimeAfternoon,
-      startTimeMorning: e.startTimeMorning,
-      endTimeMorning: e.endTimeMorning,
-      startTimeAfternoon: e.startTimeAfternoon,
-      endTimeAfternoon: e.endTimeAfternoon,
-      checkIn: e.checkOut,
-      checkOut: e.checkOut,
-      status: e.status,
-      checkInStatus: convertStatus(e.checkInStatus),
-      checkOutStatus: convertStatus(e.checkOutStatus),
-    }));
-    rows.value = datalist;
-    DataMainOrig.value = datalist;
-  }
+  // async function fecthList(data: ListData[]) {
+  //   let datalist: DataRows[] = data.map((e: ListData) => ({
+  //     id: e.id,
+  //     fullname: e.fullname,
+  //     date: date2Thai(new Date(e.date), false, true),
+  //     dateFix: date2Thai(new Date(e.dateFix)),
+  //     timeMorning:
+  //       e.startTimeMorning == null
+  //         ? "-"
+  //         : e.startTimeMorning + " - " + e.endTimeMorning,
+  //     timeAfternoon:
+  //       e.startTimeAfternoon == null
+  //         ? "-"
+  //         : e.startTimeAfternoon + " - " + e.endTimeAfternoon,
+  //     startTimeMorning: e.startTimeMorning,
+  //     endTimeMorning: e.endTimeMorning,
+  //     startTimeAfternoon: e.startTimeAfternoon,
+  //     endTimeAfternoon: e.endTimeAfternoon,
+  //     checkIn: e.checkOut,
+  //     checkOut: e.checkOut,
+  //     status: e.status,
+  //     checkInStatus: convertStatus(e.checkInStatus),
+  //     checkOutStatus: convertStatus(e.checkOutStatus),
+  //   }));
+  //   rows.value = datalist;
+  //   DataMainOrig.value = datalist;
+  // }
   const DataMainUpdate = ref<DataRows[]>([]); // ข้อมูลเปลี่ยนแปลง
   const DataMain = (val: DataRows[]) => (DataMainOrig.value = val);
   const DataUpdate = (filterYear: string) => {
@@ -51,6 +64,105 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   const checkInStatus = ref<String>("ปกติ");
   const checkOutStatus = ref<String>("ปกติ");
 
+  // paging
+  const year = ref<number>(2023);
+  const month = ref<number>(11);
+  const page = ref<number>(1);
+  const pageSize = ref<number>(10);
+  const filter = ref<string>(""); //search data table
+
+  // Pagination - update rowsPerPage
+  async function updatePagination(newPagination: any) {
+    initialPagination.value = newPagination;
+    // currentPage.value = 1;
+    console.log("updatePagination");
+  }
+
+  // Pagination - initial pagination
+  const initialPagination = ref<any>({
+    sortBy: null,
+    descending: false,
+    page: 1,
+    // rowsPerPage: pageSize,
+  });
+
+  // Pagination - page & change page & get new data
+  // const currentPage = ref<number>(1);
+  // watch(
+  //   [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  //   () => {
+  //     emit(
+  //       "update:change-page",
+  //       currentPage.value,
+  //       initialPagination.value.rowsPerPage,
+  //       true
+  //     );
+  //   }
+  // );
+
+  // const emit = defineEmits(["update:change-page"]);
+  /**
+   * ฟังก์ชั่น api เปลี่ยนหน้า
+   * @param pageVal page
+   * @param pageSizeVal pagesize
+   */
+  async function changePage(pageVal: number, pageSizeVal: number) {
+    page.value = await pageVal;
+    pageSize.value = await pageSizeVal;
+    console.log("changePage");
+    fetchData();
+  }
+
+  /**
+   * ฟังชั้นเรียกดูข้อมูล
+   */
+  const fetchData = async () => {
+    showLoader();
+    await http
+      .get(
+        config.API.specialTime() +
+          `?year=${year.value}&month=${month.value}&page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
+      )
+      .then((res) => {
+        let data = res.data.result;
+        data.map((e: any) => {
+          rows.value.push({
+            id: e.id,
+            fullname: e.fullname,
+            date: date2Thai(new Date(e.checkDate), false, true),
+            dateFix: date2Thai(new Date(e.createdAt)),
+            timeMorning:
+              e.startTimeMorning == null
+                ? "-"
+                : e.startTimeMorning + " - " + e.endTimeMorning,
+            timeAfternoon:
+              e.startTimeAfternoon == null
+                ? "-"
+                : e.startTimeAfternoon + " - " + e.endTimeAfternoon,
+            startTimeMorning: e.startTimeMorning,
+            endTimeMorning: e.endTimeMorning,
+            startTimeAfternoon: e.startTimeAfternoon,
+            endTimeAfternoon: e.endTimeAfternoon,
+            checkIn: e.checkInTime,
+            checkOut: e.checkOutTime,
+            status: e.status,
+            checkInStatus: convertStatus(e.checkInStatus),
+            checkOutStatus: convertStatus(e.checkOutStatus),
+            reason: e.reason,
+            description: e.description,
+            checkInEdit: e.checkInEdit,
+            checkOutEdit: e.checkOutEdit,
+          });
+        });
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  };
+
   //--------------|ฟิลเตอร์|--------------------------------------//
   const searchFilterTable = async (searchDate: any) => {
     rows.value = [];
@@ -175,7 +287,7 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   }
 
   return {
-    fecthList,
+    // fecthList,
     rows,
     visibleColumns,
     columns,
@@ -185,5 +297,9 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     checkInStatus,
     checkOutStatus,
     optionStatus,
+    fetchData,
+    changePage,
+    initialPagination,
+    updatePagination,
   };
 });
diff --git a/src/modules/09_leave/views/ChangeRoundMain.vue b/src/modules/09_leave/views/ChangeRoundMain.vue
index c2b7deebb..309748fd7 100644
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@@ -201,6 +201,7 @@ onMounted(() => {
     :editCheck="editCheck"
     :DataRow="DataRow"
     :personId="DataRow == null ? '' : DataRow.profileId"
+    @update:change-page="dataStore.changePage"
   />
 </template>
 <style scoped lang="scss">
diff --git a/src/modules/09_leave/views/SpecialTimeMain.vue b/src/modules/09_leave/views/SpecialTimeMain.vue
index 93b42e65c..d74bc1100 100644
--- a/src/modules/09_leave/views/SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/SpecialTimeMain.vue
@@ -1,40 +1,56 @@
 <script setup lang="ts">
-import { onMounted, ref, useAttrs } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
 import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import { useRouter } from "vue-router";
+import { identity } from "@fullcalendar/core/internal";
 const dataSpecialTime = useSpecialTimeStore();
-const { fecthList } = dataSpecialTime;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
-const { hideLoader, monthYear2Thai } = mixin;
+const { hideLoader, monthYear2Thai, messageError, showLoader, success } = mixin;
 const modalUnapprove = ref(false);
 const modalApprove = ref(false);
 const detailData = ref<any>();
 const editCheck = ref<string>("");
+
 const pagination = ref({
   // sortBy: "desc",
   descending: false,
   page: 1,
   rowsPerPage: 10,
 });
+
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
 const name = ref<string>("");
+const id = ref<string>("");
+const reasonNote = ref<string>("");
 const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
-const unapprove = async (fullname: string) => {
+const unapprove = async (fullname: string, personId: string) => {
+  id.value = personId;
   dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
   name.value = fullname;
   modalUnapprove.value = true;
+  // rejectData();
 };
-function openModal(data: any, check: string, date: string, dateFix: string) {
+function openModal(
+  data: any,
+  check: string,
+  date: string,
+  dateFix: string,
+  personId: string
+) {
+  id.value = personId;
+  console.log(personId);
   modalApprove.value = true;
   dateDialog.value = date;
   dateFixDialog.value = dateFix;
@@ -49,9 +65,25 @@ const closeDialog = () => {
   modalApprove.value = false;
   editCheck.value = "PENDING";
 };
-const clickSave = () => {
+
+/** API reject */
+const clickSave = async (reason: string) => {
   modalUnapprove.value = false;
+  const body = {
+    reason: reason,
+  };
+  await http
+    .put(config.API.specialTimeReject(id.value), body)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {});
+  console.log(reason);
 };
+
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
@@ -63,53 +95,54 @@ const resetFilter = () => {
 };
 
 onMounted(async () => {
-  fecthList([
-    {
-      id: "00000000-0000-0000-0000-000000000000",
-      fullname: "นางสาวณัฐกา ชมสิน",
-      date: "2023-11-01 08:54",
-      dateFix: "2023-10-30",
-      startTimeMorning: "08:00",
-      endTimeMorning: "12:00",
-      startTimeAfternoon: "08:00",
-      endTimeAfternoon: "12:00",
-      status: "PENDING",
-      checkInStatus: "normal",
-      checkOutStatus: "late",
-      checkIn: "08:00",
-      checkOut: "12.00",
-    },
-    {
-      id: "00000000-0000-0000-0000-000000000000",
-      fullname: "นางสาวรัชภรณ์ ภักดี",
-      date: "2023-10-30 08:55",
-      dateFix: "2023-10-29",
-      startTimeMorning: "08:00",
-      endTimeMorning: "12:00",
-      startTimeAfternoon: null,
-      endTimeAfternoon: null,
-      status: "APPROVE",
-      checkInStatus: "normal",
-      checkOutStatus: "late",
-      checkIn: "08:00",
-      checkOut: "12.00",
-    },
-    {
-      id: "00000000-0000-0000-0000-000000000000",
-      fullname: "นางสาวภาพรรณ ลออ",
-      date: "2023-10-31 18:54",
-      dateFix: "2023-10-30",
-      startTimeMorning: null,
-      endTimeMorning: null,
-      startTimeAfternoon: "13:00",
-      endTimeAfternoon: "16:30",
-      status: "REJECT",
-      checkInStatus: "normal",
-      checkOutStatus: "late",
-      checkIn: "08:00",
-      checkOut: "12.00",
-    },
-  ]);
+  // fecthList([
+  //   {
+  //     id: "eefa2f4f-c507-4a42-8567-4fadb8dc1f50",
+  //     fullname: "นางสาวณัฐกา ชมสิน",
+  //     date: "2023-11-01 08:54",
+  //     dateFix: "2023-10-30",
+  //     startTimeMorning: "08:00",
+  //     endTimeMorning: "12:00",
+  //     startTimeAfternoon: "08:00",
+  //     endTimeAfternoon: "12:00",
+  //     status: "PENDING",
+  //     checkInStatus: "normal",
+  //     checkOutStatus: "late",
+  //     checkIn: "08:00",
+  //     checkOut: "12.00",
+  //   },
+  //   {
+  //     id: "00000000-0000-0000-0000-000000000000",
+  //     fullname: "นางสาวรัชภรณ์ ภักดี",
+  //     date: "2023-10-30 08:55",
+  //     dateFix: "2023-10-29",
+  //     startTimeMorning: "08:00",
+  //     endTimeMorning: "12:00",
+  //     startTimeAfternoon: null,
+  //     endTimeAfternoon: null,
+  //     status: "APPROVE",
+  //     checkInStatus: "normal",
+  //     checkOutStatus: "late",
+  //     checkIn: "08:00",
+  //     checkOut: "12.00",
+  //   },
+  //   {
+  //     id: "00000000-0000-0000-0000-000000000000",
+  //     fullname: "นางสาวภาพรรณ ลออ",
+  //     date: "2023-10-31 18:54",
+  //     dateFix: "2023-10-30",
+  //     startTimeMorning: null,
+  //     endTimeMorning: null,
+  //     startTimeAfternoon: "13:00",
+  //     endTimeAfternoon: "16:30",
+  //     status: "REJECT",
+  //     checkInStatus: "normal",
+  //     checkOutStatus: "late",
+  //     checkIn: "08:00",
+  //     checkOut: "12.00",
+  //   },
+  // ]);
+  dataSpecialTime.fetchData();
 });
 
 const selectedDate = ref<string>("");
@@ -213,8 +246,10 @@ const monthYearThai = (val: any) => {
         bordered
         :paging="true"
         dense
-        v-model:pagination="pagination"
+        :pagination="dataSpecialTime.initialPagination"
         :visible-columns="dataSpecialTime.visibleColumns"
+        :rows-per-page-options="[1, 10, 25, 50, 100]"
+        @update:pagination="dataSpecialTime.updatePagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -241,7 +276,7 @@ const monthYearThai = (val: any) => {
                 class="q-px-md"
                 dense
                 unelevated
-                @click="unapprove(props.row.fullname)"
+                @click="unapprove(props.row.fullname, props.row.id)"
                 >ไม่อนุมัติ</q-btn
               >
 
@@ -256,7 +291,8 @@ const monthYearThai = (val: any) => {
                     props.row,
                     'PENDING',
                     props.row.date,
-                    props.row.dateFix
+                    props.row.dateFix,
+                    props.row.id
                   )
                 "
                 >อนุมัติ</q-btn
@@ -294,6 +330,7 @@ const monthYearThai = (val: any) => {
     :closeDialog="closeDialog"
     :date="dateDialog"
     :dateFix="dateFixDialog"
+    :id="id"
     :editCheck="editCheck"
     :detailData="detailData"
   />