From 94eb31fc260e9ed94b425799b404234b76286c53 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Wed, 18 Sep 2024 17:26:53 +0700
Subject: [PATCH] Refactoring code 09_leave

---
 .../09_leave/components/1_Work/DialogMap.vue  |   2 +-
 .../components/1_Work/DialogReport.vue        |   7 +-
 .../09_leave/components/1_Work/Tab1.vue       |   6 +-
 .../09_leave/components/1_Work/Tab2.vue       |   1 +
 .../09_leave/components/1_Work/TableList.vue  |  15 +-
 .../09_leave/components/2_Leave/Calendar.vue  |  51 +++----
 .../components/2_Leave/DetailLeave.vue        |  63 ++------
 .../components/2_Leave/DetailLeaveReject.vue  |  41 +-----
 .../09_leave/components/2_Leave/Tab1.vue      |  19 ++-
 .../09_leave/components/2_Leave/Tab2.vue      |   7 +-
 .../09_leave/components/2_Leave/TableList.vue |  42 +++---
 .../components/2_Leave/ToolBarLeave.vue       |  18 +--
 .../2_Leave/formDetail/formCheckSelect.vue    |   1 -
 .../components/3_Report/LeaveReport.vue       |  97 +------------
 .../components/3_WorkTime/DialogForm.vue      |  11 +-
 .../components/4_ChangeRound/DialogForm.vue   |  94 ++++++------
 .../4_specialTime/DialogApprove.vue           |  38 +++--
 .../09_leave/interface/request/specialTime.ts |  30 +++-
 .../interface/response/changeRound.ts         |  16 ++-
 .../09_leave/stores/ChangeRoundStore.ts       |  42 ++----
 src/modules/09_leave/stores/LeaveStore.ts     |  46 +-----
 src/modules/09_leave/stores/ReportStore.ts    |   0
 .../09_leave/stores/SpecialTimeStore.ts       |  29 +---
 src/modules/09_leave/stores/WorkStore.ts      |  22 ---
 .../09_leave/views/ChangeRoundMain.vue        |  28 ++--
 src/modules/09_leave/views/RoundMain.vue      |   5 +-
 .../09_leave/views/SpecialTimeMain.vue        | 135 +++++++++---------
 27 files changed, 289 insertions(+), 577 deletions(-)
 delete mode 100644 src/modules/09_leave/stores/ReportStore.ts

diff --git a/src/modules/09_leave/components/1_Work/DialogMap.vue b/src/modules/09_leave/components/1_Work/DialogMap.vue
index ac7f8c0c2..4827f42df 100644
--- a/src/modules/09_leave/components/1_Work/DialogMap.vue
+++ b/src/modules/09_leave/components/1_Work/DialogMap.vue
@@ -108,7 +108,7 @@ watch(
           unelevated
           round
           dense
-          @click="props.close"
+          @click="props.close?.()"
           style="color: #eb0505; background-color: #ffdede"
         />
       </q-toolbar>
diff --git a/src/modules/09_leave/components/1_Work/DialogReport.vue b/src/modules/09_leave/components/1_Work/DialogReport.vue
index 8de3b1a14..10409e76c 100644
--- a/src/modules/09_leave/components/1_Work/DialogReport.vue
+++ b/src/modules/09_leave/components/1_Work/DialogReport.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import axios from "axios";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import axios from "axios";
+import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
 import type {
@@ -14,9 +16,6 @@ import type {
 /** importComponents*/
 import Header from "@/components/DialogHeader.vue";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 /** use*/
 const mixin = useCounterMixin();
 const $q = useQuasar();
diff --git a/src/modules/09_leave/components/1_Work/Tab1.vue b/src/modules/09_leave/components/1_Work/Tab1.vue
index 2272dcc5a..cd820c101 100644
--- a/src/modules/09_leave/components/1_Work/Tab1.vue
+++ b/src/modules/09_leave/components/1_Work/Tab1.vue
@@ -18,14 +18,14 @@ import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
-/** useStore */
+
+const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
 const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
-const total = ref<number>(0);
-const $q = useQuasar(); //ใช้ noti quasar
 
 /** ตัวแปร querySting*/
+const total = ref<number>(0);
 const keyword = ref<string>("");
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
diff --git a/src/modules/09_leave/components/1_Work/Tab2.vue b/src/modules/09_leave/components/1_Work/Tab2.vue
index f8d356799..5b4742843 100644
--- a/src/modules/09_leave/components/1_Work/Tab2.vue
+++ b/src/modules/09_leave/components/1_Work/Tab2.vue
@@ -18,6 +18,7 @@ import TableList from "@/modules/09_leave/components/1_Work/TableList.vue";
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
+
 /** useStore */
 const total = ref<number>(0);
 const mixin = useCounterMixin();
diff --git a/src/modules/09_leave/components/1_Work/TableList.vue b/src/modules/09_leave/components/1_Work/TableList.vue
index b9838fdeb..565121632 100644
--- a/src/modules/09_leave/components/1_Work/TableList.vue
+++ b/src/modules/09_leave/components/1_Work/TableList.vue
@@ -1,25 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 
-/** importType*/
-import type { QTableProps } from "quasar";
+import { checkPermission } from "@/utils/permissions";
+import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 /** importComponents */
 import DialogDetail from "@/modules/09_leave/components/1_Work/DialogDetail.vue";
 import DialogEdit from "@/modules/09_leave/components/1_Work/DialogEdit.vue";
 
-/** importStores */
-import { useCounterMixin } from "@/stores/mixin";
-import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
-
-import { checkPermission } from "@/utils/permissions";
-
-/** useStore */
-const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
-const { date2Thai } = mixin;
-// const { searchDataFn, filterFn } = workStore;
-
 const props = defineProps({
   rows: {
     type: Object,
diff --git a/src/modules/09_leave/components/2_Leave/Calendar.vue b/src/modules/09_leave/components/2_Leave/Calendar.vue
index d21e7978f..cca0bc450 100644
--- a/src/modules/09_leave/components/2_Leave/Calendar.vue
+++ b/src/modules/09_leave/components/2_Leave/Calendar.vue
@@ -2,28 +2,29 @@
 import { ref, watch, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import type { CalendarOptions } from "@fullcalendar/core";
+import moment from "moment";
+
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import moment from "moment";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 import { checkPermission } from "@/utils/permissions";
+
 /** importType*/
+import type { CalendarOptions } from "@fullcalendar/core";
 import type {
   DataDateMonthObject,
   ResCalendar,
 } from "@/modules/09_leave/interface/response/leave";
 import { tokenParsed } from "@/plugins/auth";
 
-/** importStore*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
-
 /** use*/
 const leaveStore = useLeavelistDataStore();
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
@@ -51,7 +52,7 @@ const calendarOptions = ref<CalendarOptions>({
   },
   headerToolbar: false,
   initialView: "dayGridMonth",
-  initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
+  initialEvents: [],
   selectable: true,
   dayMaxEvents: true,
   weekends: true,
@@ -177,6 +178,20 @@ function convertKeycloakId(id: any) {
 const filterLists = ref<any[]>([]);
 const filterVal = ref<any>([]);
 
+function redirectToDetail(id: string) {
+  router.push(`leave/detail/${id}`);
+}
+
+/** function เปลี่ยน calendar*/
+async function changCalendar() {
+  await fetchDataCalendar("chang");
+}
+
+function monthYearThai(val: DataDateMonthObject) {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+}
+
 watch(
   () => filterVal.value,
   async () => {
@@ -199,10 +214,6 @@ watch(
   }
 );
 
-function redirectToDetail(id: string) {
-  router.push(`leave/detail/${id}`);
-}
-
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
@@ -211,23 +222,12 @@ onMounted(async () => {
   keycloakId.value = user?.sub;
   await fetchDataCalendar("onMounted");
 });
-
-/** function เปลี่ยน calendar*/
-async function changCalendar() {
-  await fetchDataCalendar("chang");
-}
-
-const monthYearThai = (val: DataDateMonthObject) => {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
-};
 </script>
 <template>
   <div class="q-mt-sm">
     <div class="row q-gutter-sm">
       <div class="col-3">
         <q-list bordered class="rounded-borders">
-          <!-- <q-item-label header>User</q-item-label> -->
           <q-item
             v-for="(item, i) in filterLists"
             :key="i"
@@ -377,13 +377,6 @@ const monthYearThai = (val: DataDateMonthObject) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  /* border: 2px solid #17a259; */
-  /* border-radius: 50%;
-  height: 25px;
-  width: 25px;
-  font-weight: bold;
-  color: white !important;
-  background: #17a259; */
 }
 
 .fc-day-today .fc-daygrid-day-frame {
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeave.vue b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
index 1c0fd92b9..18efeda8a 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
@@ -2,13 +2,13 @@
 import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
-
-/** importStore */
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
 
 /** importType */
@@ -48,18 +48,9 @@ const paramsId = route.params.id.toString();
 const modalApprove = ref(false);
 const typeDocx = ref<string>("docx");
 const typePdf = ref<string>("pdf");
-const dialogTitleUnapprove = ref<string>("ไม่อนุมัติ");
 const dialogTitle = ref<string>("อนุมัติ");
 const dialogLabel = ref<string>("เหตุผล");
 
-/** ฟังก์ชั่น อัปโหลด
- * consolelog ไว้ก่อน
- */
-const filesUpload = ref<any>(null);
-function upLoadFile() {
-  // console.log("upload", filesUpload.value);
-}
-
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<FremData>({
   id: "", //Id การยื่นขอลา
@@ -79,8 +70,6 @@ const formData = reactive<FremData>({
   leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
   leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
   leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
-  // leaveStartDate: new Date(), //*วัน เดือน ปีเริ่มต้นลา
-  // leaveEndDate: new Date(), //*วัน เดือน ปีสิ้นสุดลา
   leaveWrote: "", //เขียนที่
   leaveAddress: "", //สถานที่ติดต่อขณะลา
   leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
@@ -133,13 +122,6 @@ const formData = reactive<FremData>({
   leaveRange: "",
 });
 
-onMounted(async () => {
-  // showLoader();
-  if (paramsId) {
-    await fetchDetailLeave(paramsId);
-  }
-});
-
 /**
  * Function fetch รายละเอียดของข้อมูล
  * @param paramsId รับ ID จาก paramID
@@ -476,6 +458,13 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
 function formattedNumber(x: number) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
+
+onMounted(async () => {
+  // showLoader();
+  if (paramsId) {
+    await fetchDetailLeave(paramsId);
+  }
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -494,17 +483,6 @@ function formattedNumber(x: number) {
         รายละเอียดการลาของ {{ formData.fullName }}
       </div>
       <div>
-        <!-- <q-btn
-          icon="mdi-download"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="onClickDownloadFile(formData.id, formData.leaveTypeName)"
-          ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-        > -->
         <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
           <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
           <q-menu>
@@ -554,29 +532,6 @@ function formattedNumber(x: number) {
         </q-btn>
       </div>
       <q-space />
-      <!-- <q-file
-        v-model="filesUpload"
-        dense
-        label="อัปโหลดไฟล์"
-        outlined
-        class="col-xs-12 col-sm-3 col-md-2"
-        bg-color="white"
-        multiple
-        accept="application/pdf"
-      >
-        <template v-slot:prepend>
-          <q-icon name="attach_file" color="primary" />
-        </template>
-      </q-file> -->
-      <!-- <q-btn
-        v-if="filesUpload"
-        flat
-        round
-        color="primary"
-        icon="mdi-arrow-up-bold"
-        @click="upLoadFile"
-        ><q-tooltip>อัปโหลด</q-tooltip></q-btn
-      > -->
     </div>
   </div>
   <q-card flat bordered class="col-12 q-mt-sm">
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
index 1a3d60f58..43742cdb4 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
@@ -2,14 +2,12 @@
 import { ref, reactive, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import genReport from "@/plugins/genreport";
-
-/** importStore */
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
-import DialogReason from "@/components/Dialogs/PopupReason.vue";
 
 /** importType */
 import type {
@@ -17,7 +15,9 @@ import type {
   FormReject,
 } from "@/modules/09_leave/interface/response/leave";
 import type { FremData } from "@/modules/09_leave/interface/request/leave";
+
 /** importForm*/
+import DialogReason from "@/components/Dialogs/PopupReason.vue";
 import FormMain from "@/modules/09_leave/components/2_Leave/formDetail/formMain.vue"; // from ซ้าย
 import FormLeave from "@/modules/09_leave/components/2_Leave/formDetail/formLeave.vue"; // ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
 import FormChildbirth from "@/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue"; // ลาไปช่วยเหลือภริยาที่คลอดบุตร
@@ -429,17 +429,6 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
         รายละเอียดการขอยกเลิกของ {{ formData.fullName }}
       </div>
       <div>
-        <!-- <q-btn
-          icon="mdi-download"
-          unelevated
-          round
-          dense
-          flat
-          color="primary"
-          class="q-mr-sm"
-          @click="onClickDownloadFile(formData.id, formData.leaveTypeName)"
-          ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
-        > -->
         <q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
           <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
           <q-menu>
@@ -481,29 +470,7 @@ async function onClickDownloadFile(id: string, fileName: string, type: string) {
         </q-btn>
       </div>
       <q-space />
-      <!-- <q-file
-        v-model="filesUpload"
-        dense
-        label="อัปโหลดไฟล์"
-        outlined
-        class="col-xs-12 col-sm-3 col-md-2"
-        bg-color="white"
-        multiple
-        accept="application/pdf"
-      >
-        <template v-slot:prepend>
-          <q-icon name="attach_file" color="primary" />
-        </template>
-      </q-file> -->
-      <!-- <q-btn
-        v-if="filesUpload"
-        flat
-        round
-        color="primary"
-        icon="mdi-arrow-up-bold"
-        @click="upLoadFile"
-        ><q-tooltip>อัปโหลด</q-tooltip></q-btn
-      > -->
+    
     </div>
   </div>
   <q-card flat bordered class="col-12 q-mt-sm">
diff --git a/src/modules/09_leave/components/2_Leave/Tab1.vue b/src/modules/09_leave/components/2_Leave/Tab1.vue
index cdcb2f3b7..278753f33 100644
--- a/src/modules/09_leave/components/2_Leave/Tab1.vue
+++ b/src/modules/09_leave/components/2_Leave/Tab1.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 
 /**importType*/
 import type {
@@ -14,10 +17,6 @@ import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
 import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
 import CalendarView from "@/modules/09_leave/components/2_Leave/Calendar.vue";
 
-/**importStroe*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
-
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const leaveStore = useLeavelistDataStore();
@@ -61,8 +60,6 @@ async function fecthLeaveList() {
         hideLoader();
       });
   }
-  // const data = APIDATA.data;
-  // maxPage.value = Math.ceil(data.length / querySting.pageSize);
 }
 
 /**
@@ -99,11 +96,6 @@ async function fetchOption() {
     .finally(() => {});
 }
 
-onMounted(async () => {
-  await fetchOption();
-  await fecthLeaveList();
-});
-
 watch(
   () => leaveStore.tabView,
   async () => {
@@ -111,6 +103,11 @@ watch(
       (await fecthLeaveList(), await fetchOption());
   }
 );
+
+onMounted(async () => {
+  await fetchOption();
+  await fecthLeaveList();
+});
 </script>
 <template>
   <q-toolbar class="text-primary" style="padding: 0">
diff --git a/src/modules/09_leave/components/2_Leave/Tab2.vue b/src/modules/09_leave/components/2_Leave/Tab2.vue
index e5d3de559..09088baa2 100644
--- a/src/modules/09_leave/components/2_Leave/Tab2.vue
+++ b/src/modules/09_leave/components/2_Leave/Tab2.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 
 /**importType*/
 import type {
@@ -13,10 +16,6 @@ import type {
 import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
 import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
 
-/**importStroe*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
-
 const mixin = useCounterMixin();
 const leaveStore = useLeavelistDataStore();
 const { showLoader, hideLoader, messageError } = mixin;
diff --git a/src/modules/09_leave/components/2_Leave/TableList.vue b/src/modules/09_leave/components/2_Leave/TableList.vue
index 5bf492947..82a2b8d72 100644
--- a/src/modules/09_leave/components/2_Leave/TableList.vue
+++ b/src/modules/09_leave/components/2_Leave/TableList.vue
@@ -2,19 +2,12 @@
 import { ref, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useRouter } from "vue-router";
+
 import { checkPermission } from "@/utils/permissions";
-
-/** importStores*/
-import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
-const mixin = useCounterMixin();
-const leaveStore = useLeavelistDataStore();
-const checkForm = ref<string>("");
-const router = useRouter();
 
-/** เรียน funtion จาก stores*/
-// const { date2Thai } = mixin;
-// const { optionYear, searchDataFn, filterOption } = leaveStore;
+const leaveStore = useLeavelistDataStore();
+const router = useRouter();
 
 /** ข้อมูลหัวตาราง รายการลา */
 const columnsLeave = ref<QTableProps["columns"]>([
@@ -212,17 +205,19 @@ const props = defineProps({
 
 const emit = defineEmits(["update:querySting"]);
 
-function updateQuerySting(newPage: number, pageSize: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:querySting", newPage, pageSize);
-}
-
 const currentPage = ref<number>(1);
 const pagination = ref({
   descending: true,
   page: props.page,
   rowsPerPage: props.rowsPerPage,
 });
+
+function updateQuerySting(newPage: number, pageSize: number) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:querySting", newPage, pageSize);
+}
+
+/** ไปหน้ารายละเอียด */
 function redirectToDetail(id: string) {
   const routePrefix = leaveStore.tabMenu === "1" ? "/leave" : "/leave-reject";
   router.push(`${routePrefix}/detail/${id}`);
@@ -233,12 +228,10 @@ function updatedPagination(newPageZize: any) {
   pagination.value.rowsPerPage = newPageZize.rowsPerPage;
 }
 
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  currentPage.value &&
-    pagination.value.rowsPerPage &&
-    updateQuerySting(currentPage.value, pagination.value.rowsPerPage);
-});
-
+/**
+ * แปลง สถานะ เป็น text
+ * @param val
+ */
 function convert(val: any) {
   const filtertype = props.dataToobar?.find(
     (e: any) => e.id === val.leaveTypeId
@@ -252,6 +245,13 @@ function convert(val: any) {
     return val.leaveTypeName;
   }
 }
+
+watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
+  currentPage.value &&
+    pagination.value.rowsPerPage &&
+    updateQuerySting(currentPage.value, pagination.value.rowsPerPage);
+});
+
 /** Hook*/
 onMounted(() => {
   if (leaveStore.tabMenu === "1") {
diff --git a/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
index 17a2b92bd..76837f251 100644
--- a/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
@@ -1,21 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
 import type { DateFilter } from "@/modules/09_leave/interface/request/leave";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 
 /** importStores*/
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
-import { useCounterMixin } from "@/stores/mixin";
 
-const leaveStore = useLeavelistDataStore();
-const mixin = useCounterMixin();
 const $q = useQuasar();
-
-const { messageError } = mixin;
+const leaveStore = useLeavelistDataStore();
 
 const props = defineProps({
   rowsPerPage: {
@@ -27,14 +21,6 @@ const props = defineProps({
 
 const emit = defineEmits(["update:querySting"]);
 
-/** formFilter*/
-// const filter = reactive<DateFilter>({
-//   year: new Date().getFullYear(), //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
-//   type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
-//   status: "ALL", //*สถานะการของลา
-//   keyword: "", //keyword ค้นหา
-// });
-
 /**
  * function update ข้อมูลการค้นหา  (QuerySting)
  * @param newPage หน้า
diff --git a/src/modules/09_leave/components/2_Leave/formDetail/formCheckSelect.vue b/src/modules/09_leave/components/2_Leave/formDetail/formCheckSelect.vue
index 5541ff357..c38db2a18 100644
--- a/src/modules/09_leave/components/2_Leave/formDetail/formCheckSelect.vue
+++ b/src/modules/09_leave/components/2_Leave/formDetail/formCheckSelect.vue
@@ -5,7 +5,6 @@ const props = defineProps({
     required: true,
   },
 });
-console.log(props);
 </script>
 
 <template>
diff --git a/src/modules/09_leave/components/3_Report/LeaveReport.vue b/src/modules/09_leave/components/3_Report/LeaveReport.vue
index 694b689ce..eef8fc11a 100644
--- a/src/modules/09_leave/components/3_Report/LeaveReport.vue
+++ b/src/modules/09_leave/components/3_Report/LeaveReport.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
+import axios from "axios";
 import { ref, onMounted } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import axios from "axios";
 import { checkPermission } from "@/utils/permissions";
-/** importType*/
-import type { DataOption } from "@/modules/09_leave/interface/index/Main";
-
-/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 
+import type { DataOption } from "@/modules/09_leave/interface/index/Main";
+
 /** use*/
 const mixin = useCounterMixin();
 const $q = useQuasar();
@@ -495,94 +494,6 @@ onMounted(() => {
       </q-splitter>
     </div>
   </q-card>
-
-  <!-- Dialog Full Screen -->
-  <!-- <q-dialog
-    v-model="modalFull"
-    persistent
-    :maximized="true"
-    transition-show="slide-up"
-    transition-hide="slide-down"
-  >
-    <q-card class="bg-white">
-      <div class="flex justify-end items-center align-center q-mr-md q-mt-sm">
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          style="color: #ff8080; background-color: #ffdede"
-          size="12px"
-          v-close-popup
-        />
-      </div>
-      <div class="q-pa-md">
-        <div class="row items-start items-center">
-          <div class="col">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-left"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              class="my-auto"
-              @click="backPage"
-              :disable="page == 1"
-            />
-          </div>
-          <div class="col-12 col-md-auto">
-            <div class="q-pa-md flex">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </div>
-          </div>
-          <div class="col text-right">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-right"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              @click="nextPage"
-              :disable="page === numOfPages"
-            />
-          </div>
-        </div>
-        <div class="row items- items-center">
-          <VuePDF ref="vuePDFRef" :pdf="pdfSrc" :page="page" fit-parent />
-        </div>
-        <div class="row items- items-end">
-          <div class="col">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-left"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              class="my-auto"
-              @click="backPage"
-              :disable="page == 1"
-            />
-          </div>
-          <div class="col-12 col-md-auto">
-            <div class="q-pa-md flex">
-              หน้าที่ {{ page }} จาก {{ numOfPages }}
-            </div>
-          </div>
-          <div class="col text-right">
-            <q-btn
-              padding="xs"
-              icon="mdi-chevron-right"
-              color="grey-2"
-              text-color="grey-5"
-              size="md"
-              @click="nextPage"
-              :disable="page === numOfPages"
-            />
-          </div>
-        </div>
-      </div>
-    </q-card>
-  </q-dialog> -->
 </template>
 
 <style scoped></style>
diff --git a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
index 4cfca031e..ef074db24 100644
--- a/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
+++ b/src/modules/09_leave/components/3_WorkTime/DialogForm.vue
@@ -1,21 +1,18 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useQuasar } from "quasar";
 
-/** ImportType */
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type {
   FormData,
   MyObjectRoundRef,
 } from "@/modules/09_leave/interface/response/round";
 
-/** ImportComponents */
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** importstore*/
-import { useCounterMixin } from "@/stores/mixin";
-
 const $q = useQuasar();
 
 const mixin = useCounterMixin();
diff --git a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
index 7b34eb8f4..383736966 100644
--- a/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
+++ b/src/modules/09_leave/components/4_ChangeRound/DialogForm.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from "vue";
-import { date, useQuasar } from "quasar";
+import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
 
-/** importType */
 import type {
   changeRoundEdit,
   MyObjectRoundChangeRef,
   DataOption,
 } from "@/modules/09_leave/interface/request/changeRound";
 
-/** importStore */
-import { useCounterMixin } from "@/stores/mixin";
-import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
-
 /** useStore */
+const $q = useQuasar();
 const dataStore = useChangeRoundDataStore();
 const mixin = useCounterMixin();
 const {
@@ -27,11 +26,15 @@ const {
   success,
 } = mixin;
 
-const $q = useQuasar();
+const emit = defineEmits(["update:change-page"]);
 
-/**Hook */
-onMounted(async () => {
-  // await fetchDataOption();
+/**Props */
+const props = defineProps({
+  modal: Boolean,
+  closeDialog: Function,
+  editCheck: String,
+  DataRow: Object,
+  personId: String,
 });
 
 /**FormData */
@@ -52,6 +55,31 @@ const objectRoundChange: MyObjectRoundChangeRef = {
   reson: resonRef,
 };
 
+const dataToday = ref<Date>(new Date());
+const pageSize = ref<number>(10);
+
+/**
+ * ฟังก์ชั่น api เปลี่ยนหน้า
+ * @param pageVal page
+ * @param pageSizeVal pagesize
+ */
+
+// Pagination - initial pagination
+const initialPagination = ref<any>({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: pageSize, // set ตาม page หลักส่งมา
+});
+
+// Pagination - page & change page & get new data
+const currentPage = ref<number>(1);
+const roundOp = ref<any>([]);
+async function updatePagination(newPagination: any) {
+  initialPagination.value = newPagination;
+  currentPage.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+}
+
 /** Function validateForm */
 function validateForm() {
   const hasError = [];
@@ -68,7 +96,6 @@ function validateForm() {
     onSubmit();
   }
 }
-const dataToday = ref<Date>(new Date());
 
 /** Function ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
@@ -103,7 +130,6 @@ async function changeRound() {
     });
 }
 
-const roundOp = ref<any>([]);
 /**
  *ประวัติการเปลี่ยนรอบการปฏิบัติงาน"
  *
@@ -134,25 +160,13 @@ async function fetchDataOption() {
     });
 }
 
-// paging
-const pageSize = ref<number>(10);
+/**ฟังก์ชั่น ปิดไดอาล็อก */
+function close() {
+  if (props.closeDialog) {
+    props.closeDialog();
+  }
+}
 
-/**
- * ฟังก์ชั่น api เปลี่ยนหน้า
- * @param pageVal page
- * @param pageSizeVal pagesize
- */
-
-// Pagination - initial pagination
-const initialPagination = ref<any>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: pageSize, // set ตาม page หลักส่งมา
-});
-
-// Pagination - page & change page & get new data
-const currentPage = ref<number>(1);
 watch(
   [() => currentPage.value, () => initialPagination.value.rowsPerPage],
   () => {
@@ -164,27 +178,7 @@ watch(
     );
   }
 );
-const emit = defineEmits(["update:change-page"]);
-async function updatePagination(newPagination: any) {
-  initialPagination.value = newPagination;
-  currentPage.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
-}
 
-/**Props */
-const props = defineProps({
-  modal: Boolean,
-  closeDialog: Function,
-  editCheck: String,
-  DataRow: Object,
-  personId: String,
-});
-
-/**ฟังก์ชั่น ปิดไดอาล็อก */
-function close() {
-  if (props.closeDialog) {
-    props.closeDialog();
-  }
-}
 watch(
   () => props.modal,
   async () => {
diff --git a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
index e85281596..df8a04ffe 100644
--- a/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
+++ b/src/modules/09_leave/components/4_specialTime/DialogApprove.vue
@@ -1,26 +1,25 @@
 <script setup lang="ts">
 import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
 
-/** importType*/
 import type {
   dataRowRound,
   MyObjectRoundRef,
 } from "@/modules/09_leave/interface/response/specialTime";
+
 import DialogHeader from "@/components/DialogHeader.vue";
 
-/** importStores*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
-
 /** useStore*/
+const $q = useQuasar();
 const SpecialTimeStore = useSpecialTimeStore();
 const mixin = useCounterMixin();
 const { dialogConfirm, showLoader, success, messageError, hideLoader } = mixin;
 const option = ref<any[]>(SpecialTimeStore.optionStatus);
-const $q = useQuasar();
 
 /** props*/
 const props = defineProps({
@@ -120,6 +119,19 @@ function close() {
   }
 }
 
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    option.value = SpecialTimeStore.optionStatus.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
 watch(
   () => props.modal,
   () => {
@@ -159,19 +171,6 @@ watch(
     }
   }
 );
-
-/**
- * function ค้นหาข้อมูลใน option
- * @param val คำค้นหา
- * @param update function
- */
-function filterOptionFn(val: string, update: Function) {
-  update(() => {
-    option.value = SpecialTimeStore.optionStatus.filter(
-      (e: any) => e.name.search(val) !== -1
-    );
-  });
-}
 </script>
 
 <template>
@@ -337,7 +336,6 @@ function filterOptionFn(val: string, update: Function) {
               type="submit"
               class="q-px-md"
             >
-              <!-- icon="mdi-content-save-outline" -->
               <q-tooltip>บันทึก</q-tooltip>
             </q-btn>
           </div>
diff --git a/src/modules/09_leave/interface/request/specialTime.ts b/src/modules/09_leave/interface/request/specialTime.ts
index f11b3a282..02507729a 100644
--- a/src/modules/09_leave/interface/request/specialTime.ts
+++ b/src/modules/09_leave/interface/request/specialTime.ts
@@ -18,4 +18,32 @@ interface DataDateMonthObject {
   month: number;
   year: number;
 }
-export type { ListData, DataDateMonthObject };
+
+interface DetailData {
+  id: string;
+  fullName: string;
+  createdAt: string;
+  checkDate: string;
+  checkInEdit: boolean;
+  checkOutEdit: boolean;
+  checkInTime: string;
+  checkOutTime: string;
+  checkInStatus: string;
+  checkOutStatus: string;
+  startTimeMorning: string;
+  endTimeMorning: string;
+  startTimeAfternoon: string;
+  endTimeAfternoon: string;
+  reason: string;
+  status: string;
+  description: string;
+  statusSort: number;
+}
+
+interface Pagination {
+  sortBy: string | null;
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+}
+export type { ListData, DataDateMonthObject,DetailData,Pagination };
diff --git a/src/modules/09_leave/interface/response/changeRound.ts b/src/modules/09_leave/interface/response/changeRound.ts
index 034baf5cf..aa4126720 100644
--- a/src/modules/09_leave/interface/response/changeRound.ts
+++ b/src/modules/09_leave/interface/response/changeRound.ts
@@ -26,13 +26,25 @@ interface dataRowChangeRoundHistory {
   reson: string | null;
 }
 interface historyShow {
+  round: number;
+  startTimeMorning: string;
+  leaveTimeAfternoon: string;
   time: string;
-  effectiveDate: string | null;
-  reson: string | null;
+  effectiveDate: string;
+  reson: string;
+}
+
+interface DataInterface {
+  round: number;
+  startTimeMorning: string;
+  leaveTimeAfternoon: string;
+  effectiveDate: Date; // ใช้ Date แทน string หากต้องการแปลงเป็น Date object
+  remark: string;
 }
 export type {
   changeShow,
   dataRowChangeRound,
   dataRowChangeRoundHistory,
   historyShow,
+  DataInterface
 };
diff --git a/src/modules/09_leave/stores/ChangeRoundStore.ts b/src/modules/09_leave/stores/ChangeRoundStore.ts
index f45b0dbca..6e5250267 100644
--- a/src/modules/09_leave/stores/ChangeRoundStore.ts
+++ b/src/modules/09_leave/stores/ChangeRoundStore.ts
@@ -1,32 +1,24 @@
 import { defineStore } from "pinia";
-import { ref, reactive } from "vue";
-import type {
-  changeShow,
-  dataRowChangeRound,
-  dataRowChangeRoundHistory,
-  historyShow,
-} from "@/modules/09_leave/interface/response/changeRound";
-import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
-import type { QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { ref } from "vue";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type {
+  changeShow,
+  historyShow,
+  DataInterface,
+} from "@/modules/09_leave/interface/response/changeRound";
+import type { QTableProps } from "quasar";
 
 const mixin = useCounterMixin();
 const $q = useQuasar();
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  dialogMessageNotify,
-  dialogConfirm,
-  success,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 const checkCilck = ref<boolean>(false);
 const profileId = ref<string>("");
-// store ลา >> รอบการปฏิบัติงาน
+
 export const useChangeRoundDataStore = defineStore(
   "changeRoundDataStore",
   () => {
@@ -200,17 +192,12 @@ export const useChangeRoundDataStore = defineStore(
       await http
         .get(
           config.API.leaveRoundById(profileId.value) +
-            // {
-            //   page: page.value,
-            //   pageSize: pageSize.value,
-            //   keyword: filter.value,
-            // }
             `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
         )
         .then((res) => {
           const dataHistory = res.data.result.data;
           rowsHistory.value = [];
-          dataHistory.map((e: any) => {
+          dataHistory.map((e: DataInterface) => {
             rowsHistory.value.push({
               round: e.round,
               startTimeMorning: e.startTimeMorning,
@@ -223,6 +210,7 @@ export const useChangeRoundDataStore = defineStore(
             maxPage.value = Math.ceil(total.value / pageSize.value);
             maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
           });
+          console.log(rowsHistory.value);
         })
         .catch((err) => {
           messageError($q, err);
diff --git a/src/modules/09_leave/stores/LeaveStore.ts b/src/modules/09_leave/stores/LeaveStore.ts
index ee9019fa7..2557cdaf5 100644
--- a/src/modules/09_leave/stores/LeaveStore.ts
+++ b/src/modules/09_leave/stores/LeaveStore.ts
@@ -12,7 +12,7 @@ import type {
 import type { FremData } from "@/modules/09_leave/interface/request/leave";
 
 const mixin = useCounterMixin();
-const { date2Thai, showLoader, hideLoader } = mixin;
+const { date2Thai } = mixin;
 
 export const useLeavelistDataStore = defineStore("leave", () => {
   /** ข้อมูล Main*/
@@ -123,41 +123,6 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     }
   }
 
-  // /**
-  //  * ฟังก์ชั่นแปลงประเภทการลา
-  //  * @param val ค่าประเภทของกาลา
-  //  */
-  // function convertLeave(val: string) {
-  //   switch (val) {
-  //     case "leave1":
-  //       return "ลากิจส่วนตัว";
-  //     case "leave2":
-  //       return "ลาป่วย";
-  //     case "leave3":
-  //       return "ลาคลอดบุตร";
-  //     case "leave4":
-  //       return "ลาไปช่วยเหลือภริยาที่คลอดบุตร";
-  //     case "leave5":
-  //       return "ลาพักผ่อน";
-  //     case "leave6":
-  //       return "ลาอุปสมบท";
-  //     case "leave7":
-  //       return "ลาประกอบพิธีฮัจญ์";
-  //     case "leave8":
-  //       return "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล";
-  //     case "leave9":
-  //       return "ลาไปศึกษา";
-  //     case "leave10":
-  //       return "ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน";
-  //     case "leave11":
-  //       return "ลาไปปฏิบัติงานในองค์การระหว่างประเทศ";
-  //     case "leave12":
-  //       return "ลาติดตามคู่สมรส";
-  //     case "leave13":
-  //       return "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ";
-  //   }
-  // }
-
   /**
    * ฟังชั่นแปลงค่าการลา
    * @param val ค่าของการลา
@@ -202,25 +167,16 @@ export const useLeavelistDataStore = defineStore("leave", () => {
   }
 
   return {
-    /** ข้อมูล Main*/
     tabMenu,
-    /** ข้อมูล Tab1*/
-    /** filter */
     filter,
     tabView,
-    /**ข้อมูลใน Table */
     rows,
     fetchListLeave,
     columns,
     visibleColumns,
-
     fetchListLeaveReject,
     convertSatatus,
-
-    /** Function แปลงค่า */
-    // convertLeave,
     convertLeaveDaytype,
-
     leaveType,
     colorType,
   };
diff --git a/src/modules/09_leave/stores/ReportStore.ts b/src/modules/09_leave/stores/ReportStore.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/modules/09_leave/stores/SpecialTimeStore.ts b/src/modules/09_leave/stores/SpecialTimeStore.ts
index 12059f15b..36760d53d 100644
--- a/src/modules/09_leave/stores/SpecialTimeStore.ts
+++ b/src/modules/09_leave/stores/SpecialTimeStore.ts
@@ -1,27 +1,17 @@
 import { defineStore } from "pinia";
-import { ref, watch, defineEmits } from "vue";
+import { ref } from "vue";
 import type { QTableProps } from "quasar";
 import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
-import type { DataDateMonthObject } 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";
-import { mount } from "@vue/test-utils";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  messageError,
-  showLoader,
-  dialogMessageNotify,
-  dialogConfirm,
-  success,
-  hideLoader,
-} = mixin;
+const { date2Thai, messageError, showLoader, hideLoader } = mixin;
 
 export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   const rows = ref<any[]>([]);
@@ -157,21 +147,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     { id: "NOT_COMPLETE", name: "ปฏิบัติงานไม่ครบตามกำหนดเวลา" },
   ]);
 
-  //   const filterSelector = (val: any, update: Function, refData: string) => {
-  //     switch (refData) {
-  //       case "":
-  //         update(() => {
-  //           selectDate.value = selectDate.value.filter(
-  //             (v: any) => v.name.indexOf(val) > -1
-  //           );
-  //         });
-  //         break;
-
-  //       default:
-  //         break;
-  //     }
-  //   };
-
   const visibleColumns = ref<String[]>([
     "no",
     "fullname",
diff --git a/src/modules/09_leave/stores/WorkStore.ts b/src/modules/09_leave/stores/WorkStore.ts
index 1e6803e8a..fd8be1224 100644
--- a/src/modules/09_leave/stores/WorkStore.ts
+++ b/src/modules/09_leave/stores/WorkStore.ts
@@ -12,20 +12,6 @@ export const useWorklistDataStore = defineStore("work", () => {
   /** ค้นหาวัน ข้อมูล Table  */
   const selectDate = ref<Date | null>(new Date());
 
-  // function filterFn(val: string, update: Function) {
-  //   if (val == "") {
-  //     update(() => {
-  //       optionStatus.value = optionStatusMain.value;
-  //     });
-  //   } else {
-  //     update(() => {
-  //       optionStatus.value = optionStatusMain.value.filter(
-  //         (e: any) => e.name.search(val) !== -1
-  //       );
-  //     });
-  //   }
-  // }
-
   // convertSatatus
   /**
    * function แปลงค่าสถานะ
@@ -44,17 +30,9 @@ export const useWorklistDataStore = defineStore("work", () => {
     }
   }
   return {
-    //ข้อมูลในตาราง
-
     columns,
     visibleColumns,
-    // fetchListLog,
-    // fetchListTime,
-    //ค้นหาข้อมูล
-
     selectDate,
-
-    // filterFn,
     convertSatatus,
   };
 });
diff --git a/src/modules/09_leave/views/ChangeRoundMain.vue b/src/modules/09_leave/views/ChangeRoundMain.vue
index 9a14927ae..24633bf0a 100644
--- a/src/modules/09_leave/views/ChangeRoundMain.vue
+++ b/src/modules/09_leave/views/ChangeRoundMain.vue
@@ -1,21 +1,17 @@
 <script setup lang="ts">
 import { ref, watch, reactive } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-/** importType */
-import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
-
-/** importComponents */
-import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue";
-
-/** importStore */
 import { useCounterMixin } from "@/stores/mixin";
 import { useChangeRoundDataStore } from "@/modules/09_leave/stores/ChangeRoundStore";
-
 import { checkPermission } from "@/utils/permissions";
 
+import type { dataPost } from "@/modules/09_leave/interface/request/changeRound";
+
+import Dialogform from "@/modules/09_leave/components/4_ChangeRound/DialogForm.vue";
+
 /** useStore */
 const mixin = useCounterMixin();
 const {
@@ -121,13 +117,6 @@ function updatePagination(newPagination: any) {
   formData.pageSize = newPagination.rowsPerPage;
 }
 
-watch(
-  () => formData.pageSize,
-  () => {
-    searchData();
-  }
-);
-
 /** Function ค้นหาข้อมูล */
 function searchData() {
   if (formData.cardId || formData.firstName || formData.lastName) {
@@ -136,6 +125,13 @@ function searchData() {
     dialogMessageNotify($q, "กรุณากรอกข้อมูลอย่างน้อย 1 ช่อง");
   }
 }
+
+watch(
+  () => formData.pageSize,
+  () => {
+    searchData();
+  }
+);
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
diff --git a/src/modules/09_leave/views/RoundMain.vue b/src/modules/09_leave/views/RoundMain.vue
index 1889df409..1900be684 100644
--- a/src/modules/09_leave/views/RoundMain.vue
+++ b/src/modules/09_leave/views/RoundMain.vue
@@ -12,14 +12,13 @@ import { useCounterMixin } from "@/stores/mixin";
 import DialogForm from "@/modules/09_leave/components/3_WorkTime/DialogForm.vue";
 import { checkPermission } from "@/utils/permissions";
 
+const $q = useQuasar(); //ใช้ noti quasar
+const attrs = ref<any>(useAttrs());
 const mixin = useCounterMixin();
 const dataStore = useRoundDataStore();
 const { fetchData } = dataStore;
 const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
 
-const $q = useQuasar(); //ใช้ noti quasar
-const attrs = ref<any>(useAttrs());
-
 const modal = ref<boolean>(false);
 const isRead = ref<boolean>(false);
 const detailData = ref<any>();
diff --git a/src/modules/09_leave/views/SpecialTimeMain.vue b/src/modules/09_leave/views/SpecialTimeMain.vue
index 9a8ef7161..1f342d9db 100644
--- a/src/modules/09_leave/views/SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/SpecialTimeMain.vue
@@ -1,34 +1,32 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-
-/** importType*/
-import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
-
-/** importComponents*/
-import DialogReason from "@/components/Dialogs/PopupReason.vue";
-import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
-
-/** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
-
 import { checkPermission } from "@/utils/permissions";
 
+import type {
+  DataDateMonthObject,
+  DetailData,
+  Pagination,
+} from "@/modules/09_leave/interface/request/specialTime";
+
+import DialogReason from "@/components/Dialogs/PopupReason.vue";
+import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
+
 const dataSpecialTime = useSpecialTimeStore();
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
-
 const { hideLoader, monthYear2Thai, messageError, showLoader, success } = mixin;
-
 const emit = defineEmits(["update:change-page"]);
 
 /**ตัวแปรที่ใช้ */
-const modalUnapprove = ref(false);
-const modalApprove = ref(false);
-const detailData = ref<any>();
+const modalUnapprove = ref<boolean>(false);
+const modalApprove = ref<boolean>(false);
+const detailData = ref<DetailData[]>([]);
 const editCheck = ref<string>("");
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
@@ -38,6 +36,34 @@ const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
 const dateYear = ref<number>(new Date().getFullYear());
 
+/** Function Date */
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+
+// paging
+const currentPage = ref<number>(1);
+const pageSize = ref<number>(10);
+const initialPagination = ref<Pagination>({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: pageSize.value, // set ตาม page หลักส่งมา
+});
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  dataSpecialTime.filter = filterKeyword.value;
+  dataSpecialTime.fetchData();
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+
 /**
  * ฟังก์ชั่นไม่อนุมัติ
  * @param fullname ชื่อ
@@ -59,7 +85,6 @@ function openModal(
   personId: string
 ) {
   id.value = personId;
-  console.log(personId);
   modalApprove.value = true;
   dateDialog.value = date;
   dateFixDialog.value = dateFix;
@@ -70,14 +95,14 @@ function openModal(
 }
 
 /** function closeDialog */
-const closeDialog = () => {
+function closeDialog() {
   modalUnapprove.value = false;
   modalApprove.value = false;
   editCheck.value = "PENDING";
-};
+}
 
 /** API reject */
-const clickSave = async (reason: string) => {
+async function clickSave(reason: string) {
   showLoader();
   modalUnapprove.value = false;
   const body = {
@@ -95,48 +120,14 @@ const clickSave = async (reason: string) => {
       await dataSpecialTime.fetchData();
       hideLoader();
     });
-};
+}
 
-// paging
-const pageSize = ref<number>(10);
-
-// Pagination - initial pagination
-const initialPagination = ref<any>({
-  sortBy: null,
-  descending: false,
-  page: 1,
-  rowsPerPage: pageSize, // set ตาม page หลักส่งมา
-});
-
-// Pagination - page & change page & get new data
-const currentPage = ref<number>(1);
-watch(
-  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
-  async () => {
-    dataSpecialTime.page = currentPage.value;
-    await dataSpecialTime.fetchData();
-  }
-);
-
-// Pagination - update rowsPerPage
 async function updatePagination(initialPagination: any) {
   currentPage.value = 1;
   dataSpecialTime.pageSize = initialPagination.rowsPerPage;
   dataSpecialTime.page = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  dataSpecialTime.filter = filterKeyword.value;
-  dataSpecialTime.fetchData();
-  if (filterRef.value) {
-    filterRef.value.focus();
-  }
-};
-
 /** function ค้นหาข้อมูลแล้วอัปเดท*/
 function filterFn() {
   updatePagination(filterKeyword.value);
@@ -146,23 +137,33 @@ function filterFn() {
   dataSpecialTime.fetchData();
 }
 
-/** Function Date */
-const dateMonth = ref<any>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
-const updateMonth = async (e: DataDateMonthObject) => {
-  // console.log(dateMonth.value);
+/**
+ * ดึงข้อมูลตามปี
+ * @param e ปี
+ */
+async function updateMonth(e: DataDateMonthObject) {
   if (e != null) {
     dateYear.value = e.year;
     dateYear.value = dataSpecialTime.year;
     dataSpecialTime.month = dateMonth.value.month + 1;
     dataSpecialTime.year = dateMonth.value.year;
-    // filterKeyword.value = "";
     await dataSpecialTime.fetchData();
-    console.log(dateMonth);
   }
-};
+}
+
+//แปลงเดือนเป็นไทย
+function monthYearThai(val: any) {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+}
+
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  async () => {
+    dataSpecialTime.page = currentPage.value;
+    await dataSpecialTime.fetchData();
+  }
+);
 
 /**Hook */
 onMounted(async () => {
@@ -174,12 +175,6 @@ onMounted(async () => {
   dataSpecialTime.year = yearToday;
   await dataSpecialTime.fetchData();
 });
-
-//แปลงเดือนเป็นไทย
-const monthYearThai = (val: any) => {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
-};
 </script>
 
 <template>