diff --git a/src/modules/06_retirement/components/DialogFooter.vue b/src/modules/06_retirement/components/DialogFooter.vue
index 6f75a69b5..e7e10e928 100644
--- a/src/modules/06_retirement/components/DialogFooter.vue
+++ b/src/modules/06_retirement/components/DialogFooter.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+/** props*/
 const props = defineProps({
   editvisible: Boolean,
   modalEdit: Boolean,
@@ -32,6 +33,8 @@ const edit = async () => {
   updateEdit(!props.editvisible);
   props.edit();
 };
+
+/* บันทึกข้อมูล**/
 const checkSave = () => {
   props.validate();
   props.save();
diff --git a/src/modules/06_retirement/components/DialogHeader.vue b/src/modules/06_retirement/components/DialogHeader.vue
index 82ba60d98..7bc9b4207 100644
--- a/src/modules/06_retirement/components/DialogHeader.vue
+++ b/src/modules/06_retirement/components/DialogHeader.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+/** props*/
 const props = defineProps({
   title: String,
   close: {
@@ -6,6 +7,10 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
+
+/**
+ * ฟังก์ชั่น close
+ */
 const close = async () => {
   props.close();
 };
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue b/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
index a78a5521e..be9c92eef 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionMain.vue
@@ -11,11 +11,12 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { ResponseData } from "@/modules/06_retirement/interface/response/expulsion";
 
+/** use */
 const $q = useQuasar();
 const router = useRouter();
+const modal = ref<boolean>(false);
 const mixin = useCounterMixin();
 const retirementStore = useRetirementDataStore();
-
 const {
   date2Thai,
   messageError,
@@ -26,7 +27,7 @@ const {
 } = mixin;
 const { statusText } = retirementStore;
 
-const modal = ref<boolean>(false);
+/** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "no",
   "fullname",
@@ -46,6 +47,7 @@ const resetFilter = () => {
   filterRef.value.focus();
 };
 
+/** คอลัมน์ */
 const rows = ref<ResponseData[]>([]);
 const rows2 = ref<ResponseData[]>([]);
 const filters = ref<ResponseData[]>([]);
@@ -115,10 +117,14 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/** HOOK */
 onMounted(async () => {
   await getData();
 });
 
+/**
+ * ฟังก์ชั่น modal
+ */
 const openModalOrder = () => {
   openModal();
   const row = filters.value.filter(
@@ -136,7 +142,12 @@ const openModalOrder = () => {
   );
   rows2.value = row;
 };
+const openModal = () => (modal.value = true);
+const closeModal = () => (modal.value = false);
 
+/**
+ * นำข้อมูลมาจาก API
+ */
 const getData = async () => {
   showLoader();
   await http
@@ -179,6 +190,10 @@ const getData = async () => {
     });
 };
 
+/**
+ * ลบข้อมูล
+ * @param id ไอดีข้อมูล
+ */
 const clickDelete = async (id: string) => {
   dialogRemove(
     $q,
@@ -189,7 +204,7 @@ const clickDelete = async (id: string) => {
     `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`
   );
 };
-
+//ลบข้อมูลจากAPI
 const deleteData = async (id: string) => {
   await http
     .delete(config.API.expulsionByid(id))
@@ -205,8 +220,7 @@ const deleteData = async (id: string) => {
     });
 };
 
-const openModal = () => (modal.value = true);
-const closeModal = () => (modal.value = false);
+/** Setting Pagination */
 const pagination = ref({
   sortBy: "createdAt",
   descending: true,
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
index 3ac9103d8..c440012e3 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
@@ -4,19 +4,18 @@ import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import CurrencyInput from "@/components/CurruncyInput.vue";
-
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
-
+/**Import Type */
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
 
+/** Use */
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
-
 const dataId = route.params.id.toString();
 const {
   date2Thai,
@@ -27,10 +26,10 @@ const {
   dialogConfirm,
 } = mixin;
 
+/**ตัวแปร */
 const myForm = ref<QForm | null>(null);
 const roleAdmin = ref<boolean>(false);
 const edit = ref<boolean>(false);
-
 const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
@@ -40,6 +39,7 @@ const organization = ref<string>("");
 const date = ref<Date | null>(null);
 const reason = ref<string>("");
 
+/**Setค่าตัวแปร */
 const responseData = ref<ResponseDataDetail>({
   personId: "",
   avataPath: "",
@@ -57,6 +57,7 @@ const responseData = ref<ResponseDataDetail>({
   fullname: "",
 });
 
+/**Hook */
 onMounted(async () => {
   if (keycloak.tokenParsed != null) {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
@@ -64,6 +65,9 @@ onMounted(async () => {
   await getData();
 });
 
+/**
+ * นำข้อมูลมาจาก API
+ */
 const getData = async () => {
   showLoader();
   await http
@@ -108,11 +112,15 @@ const getData = async () => {
     });
 };
 
+/**ฟังก์ชั่นcancel */
 const clickCancel = async () => {
   await getData();
   edit.value = false;
 };
 
+/**
+ * Functionบันทึก
+ */
 const conditionSave = async () => {
   if (myForm.value !== null) {
     myForm.value.validate().then((success) => {
@@ -129,7 +137,7 @@ const conditionSave = async () => {
     });
   }
 };
-
+//Save จาก Api
 const saveData = async () => {
   const body = {
     organization: organization.value,
@@ -157,6 +165,10 @@ const saveData = async () => {
     });
 };
 
+/**
+ * Function เพิ่ม Class เวลา Edit
+ * @param val เมื่อเป็นEdit จะเปลี่ยน Class
+ */
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index 4a1ad11af..754cfddfe 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -6,12 +6,14 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 
+/** Use */
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
 const route = useRoute();
-
 const retireld_params = route.params.id;
+
+/** props*/
 const props = defineProps({
   retireld: String,
   profileId: String,
@@ -27,6 +29,7 @@ const retireld = ref<any>();
 const type = ref<any>();
 const filter = ref<string>("");
 
+/** คอลัมน์ */
 const columns = ref<any["columns"]>([
   {
     name: "index",
@@ -78,6 +81,7 @@ watch(modal, () => {
     fecthlistRetire();
   }
 });
+
 // fecth profile
 const fecthlistRetire = async () => {
   showLoader();
@@ -93,6 +97,7 @@ const fecthlistRetire = async () => {
       messageError($q, e);
     });
 };
+
 // เรียกรายชื่อประกาศเกษียณอายุราชการเพิ่ม
 const findlist = async (id: string) => {
   let data = [{}];
@@ -154,6 +159,9 @@ const updateListData = (retireld: string, pId: string) => {
   props.UpdateListId(retireld, pId);
 };
 
+/**
+ * Setiting Pagination
+ */
 const paging = ref<boolean>(true);
 const pagination = ref({
   sortBy: "fullname",
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index f745f127d..08618d96d 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -10,6 +10,7 @@ import config from "@/app.config";
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogPopupReason from "@/components/Dialogs/PopupReason.vue";
 
+/** Use */
 const route = useRoute();
 const router = useRouter();
 const $q = useQuasar();
@@ -26,6 +27,7 @@ const {
 } = mixin;
 const myForm = ref<QForm | null>(null);
 
+/** ตัวแปร  */
 const retireld_params = route.params.retirementId;
 const modalNote = ref<boolean>(false);
 const note = ref<string>("");
@@ -37,7 +39,14 @@ const statusUpload = ref<boolean>();
 const modalEdit = ref<boolean>(false);
 const textReport = ref<string>("");
 const employeeType = ref<string>("OFFICER");
+const action = ref<string>("");
+const fileUpload = ref<any>(null);
+const round = ref<number>();
+const typeReport = ref<string>("");
+const statusReport = ref<boolean>();
+const dataProfile = ref<Object>([]);
 
+/** คอลัมน์ที่แสดง */
 const columns = ref<any["columns"]>([]);
 const rows = ref<any>([]);
 const visibleColumns = ref<string[]>([
@@ -55,22 +64,20 @@ const visibleColumns = ref<string[]>([
   "bureau",
 ]);
 
-const action = ref<string>("");
-const fileUpload = ref<any>(null);
-
+/** Hook */
 onMounted(() => {
   retireld.value = retireld_params.toString();
   fecthlistprofile(retireld.value);
 });
 
+/**
+ * ฟังก์ชั่นปิด Dialog
+ */
 const closeDialog = () => {
   modalNote.value = false;
   modalUpload.value = false;
 };
-const round = ref<number>();
-const typeReport = ref<string>("");
-const statusReport = ref<boolean>();
-const dataProfile = ref<Object>([]);
+
 // fecthlist
 const fecthlistprofile = async (id: string) => {
   showLoader();
@@ -121,6 +128,7 @@ const fecthlistprofile = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
+      //คอลัมน์
       columns.value = [
         {
           name: "order",
@@ -243,6 +251,7 @@ const fecthCheck = async (id: string) => {
       messageError($q, err);
     });
 };
+
 // DelProfile
 const clickDelete = () => {
   dialogRemove(
@@ -269,6 +278,7 @@ const clickDelete = () => {
     "ต้องการลบข้อมูลนี้ใช่หรือไม่ ?"
   );
 };
+
 // แก้ไข้ข้อมูล
 const saveNote = () => {
   dialogConfirm(
@@ -296,19 +306,23 @@ const saveNote = () => {
   );
 };
 
+//อัพเดท ListId
 const UpdateListId = (retireld: string, pId: string) => {
   profileId.value = pId;
   fecthlistprofile(retireld);
 };
+
 // กลับหน้าเดิม
 const backHistory = () => {
   window.history.back();
 };
+
 const visibleNote = computed(() => {
   if (note.value === "" || note.value === undefined) {
     return true;
   }
 });
+
 // อัปโหลดไฟล์
 const modalUpload = ref<boolean>(false);
 const signDate = ref<Date | null>(null);
@@ -352,6 +366,7 @@ const uploadFile = async (event: any, signDate: any) => {
     });
   }
 };
+
 // downloadAttachment
 const downloadAttachment = async (type: string, id: string) => {
   showLoader();
@@ -369,6 +384,7 @@ const downloadAttachment = async (type: string, id: string) => {
       hideLoader();
     });
 };
+
 // downloadFile
 const downloadFile = (response: any, filename: string) => {
   const link = document.createElement("a");
@@ -379,6 +395,7 @@ const downloadFile = (response: any, filename: string) => {
   link.click();
   document.body.removeChild(link);
 };
+
 // ยืนยันการแก้ไขข้อมูล
 const saveEdiitReport = (reason: string) => {
   const formdata = new FormData();
@@ -403,15 +420,18 @@ const saveEdiitReport = (reason: string) => {
     "ต้องการยืนยันการแก้ไขข้อมูลนี้หรือไม่ ?"
   );
 };
+
 // เปิด popup เหตุผล
 const openmodalEditReport = () => {
   modalEdit.value = true;
 };
+
 // ปิด popup เหตุผล
 const closemodalEditReport = () => {
   modalEdit.value = false;
 };
 
+/** Setting Pagination */
 const paging = ref<boolean>(true);
 const pagination = ref({
   sortBy: "order",
diff --git a/src/modules/06_retirement/components/ListRetirement/popupAdd.vue b/src/modules/06_retirement/components/ListRetirement/popupAdd.vue
index 126c5927d..7ed7d8542 100644
--- a/src/modules/06_retirement/components/ListRetirement/popupAdd.vue
+++ b/src/modules/06_retirement/components/ListRetirement/popupAdd.vue
@@ -6,11 +6,13 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** Use */
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { dialogConfirm, messageError } = mixin;
 const router = useRouter();
 
+/** Prop */
 const props = defineProps({
   type: {
     type: String,
@@ -63,6 +65,7 @@ const clickAdd = () => {
     }
   }
 };
+
 // เลือกรายการเพิ่ม
 const clickSelect = async (action: string) => {
   dialogConfirm(
@@ -81,6 +84,7 @@ const clickSelect = async (action: string) => {
     "ต้องการแก้ไขข้อมูลประกาศเกษียณใช่หรือไม่ ?"
   );
 };
+
 // เพิ่มรอบประกาศเกษียณอายุราชการ API
 const cerateRetirement = async (data: object) => {
   await http
diff --git a/src/modules/06_retirement/components/resign/Deceased.vue b/src/modules/06_retirement/components/resign/Deceased.vue
index 02bf8e424..3c8e01a1d 100644
--- a/src/modules/06_retirement/components/resign/Deceased.vue
+++ b/src/modules/06_retirement/components/resign/Deceased.vue
@@ -6,11 +6,14 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
+
+/** Use */
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, success, date2Thai } = mixin;
 
+/** คอลัมน์ */
 const rows = ref<any>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -88,6 +91,8 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+/** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "no",
   "prefix",
@@ -99,9 +104,13 @@ const visibleColumns = ref<string[]>([
   "oc",
   "createdAt",
 ]);
+
+/**Hook */
 onMounted(() => {
   fectListDecased();
 });
+
+/**เรียกข้อมูลจาก APi */
 const fectListDecased = async () => {
   showLoader();
   await http
@@ -134,6 +143,8 @@ const resetFilter = () => {
   filterKeyword.value = "";
   filterRef.value.focus();
 };
+
+/** Setting Pagination */
 const nextPage = (id: string) => {
   router.push("/deceased/" + id);
 };
diff --git a/src/modules/06_retirement/components/resign/DetailByidDeceased.vue b/src/modules/06_retirement/components/resign/DetailByidDeceased.vue
index 095ba918a..12af75555 100644
--- a/src/modules/06_retirement/components/resign/DetailByidDeceased.vue
+++ b/src/modules/06_retirement/components/resign/DetailByidDeceased.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
 import type { QInput, QForm } from "quasar";
@@ -9,15 +8,28 @@ import type { treeTab } from "@/modules/05_placement/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QTableProps } from "quasar";
-
 import type {
   requestSendNoti,
   DataCopyOrder,
   ResponseOrganiz,
 } from "@/modules/06_retirement/interface/response/Deceased";
 import { useRouter, useRoute } from "vue-router";
+
+/** Use */
 const router = useRouter();
 const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dialogConfirm,
+} = mixin;
+
+/** props*/
 const props = defineProps({
   next: {
     type: Function,
@@ -31,24 +43,25 @@ const props = defineProps({
 const profileId = ref<string>(route.params.id.toString());
 const next = () => props.next();
 
-const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { dialogRemove, messageError, showLoader, hideLoader, success,dialogConfirm } = mixin;
-
+/**ตัวแปร */
 const myForm = ref<QForm | null>(null);
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
-
 const modal = ref<boolean>(false);
 const search = ref<string>("");
 const expanded = ref<string[]>([]);
 const selected = ref<string>("");
 const nodesTree = ref<treeTab[]>([]);
-
 const selectedModal = ref<ResponseOrganiz[]>([]);
-
 const filterModal = ref<string>("");
+const rows = ref<DataCopyOrder[]>([]);
+const editRows = ref<DataCopyOrder[]>([]);
+
+/** คอลัมน์Modal ที่แสดง */
 const visibleColumnsModal = ref<String[]>(["no", "idCard", "name", "position"]);
+
+/** คอลัมน์Modal  */
+const rowsModal = ref<ResponseOrganiz[]>([]);
 const columnsModal = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -88,13 +101,13 @@ const columnsModal = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rowsModal = ref<ResponseOrganiz[]>([]);
-
+/** selcet OPtion */
 const optionSelect = ref<any>([
   { id: 1, name: "อีเมล" },
   { id: 2, name: "กล่องข้อความ" },
 ]);
 
+/** คอลัมน์ที่แสดง */
 const visibleColumns = ref<String[]>([
   "no",
   "idCard",
@@ -103,6 +116,8 @@ const visibleColumns = ref<String[]>([
   "unit",
   "send",
 ]);
+
+/** คอลัมน์ */
 const columns = ref<QTableProps["columns"]>([
   { name: "no", align: "left", label: "ลำดับ", field: "no", sortable: true },
   {
@@ -152,14 +167,15 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows = ref<DataCopyOrder[]>([]);
-
-const editRows = ref<DataCopyOrder[]>([]);
-
+/** Hook */
 onMounted(async () => {
   await getData();
 });
 
+/**
+ * ดึงข้อมูล list จาก api
+ * @param id id ของข้อมูล
+ */
 const listModal = async (id: string) => {
   showLoader();
   await http
@@ -189,6 +205,7 @@ const listModal = async (id: string) => {
     });
 };
 
+/** เรียกข้อมูลจาก api */
 const getData = async () => {
   showLoader();
   await http
@@ -235,6 +252,9 @@ const getData = async () => {
     });
 };
 
+/**
+ *ฟังก์ชั่น Save
+ */
 const saveData = async () => {
   showLoader();
   const persons = selectedModal.value.map((item) => ({
@@ -260,6 +280,10 @@ const resetFilter = () => {
   filterRef.value!.focus();
 };
 
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
@@ -267,10 +291,14 @@ const getClass = (val: boolean) => {
   };
 };
 
+/** Close Modal */
 const clickClose = async () => {
   modal.value = false;
 };
 
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
 const clickAdd = async () => {
   await nodeTree();
   selected.value = "";
@@ -282,10 +310,16 @@ const clickAdd = async () => {
   }
 };
 
+/**
+ * ลบข้อมูล
+ */
 const clickDelete = (id: string) => {
   dialogRemove($q, () => deleteData(id));
 };
 
+/**
+ *  โหลดโครงสร้าง tree
+ */
 const nodeTree = async () => {
   showLoader();
   await http
@@ -305,10 +339,12 @@ const nodeTree = async () => {
     });
 };
 
+// เลือกหน่วยงาน
 const onSelected = async (id: string) => {
   await listModal(id);
 };
 
+/**ลบข้อมูล */
 const deleteData = async (id: string) => {
   await http
     .delete(config.API.detailByidDeceased(id))
@@ -323,16 +359,24 @@ const deleteData = async (id: string) => {
     });
 };
 
+/**
+ * Save ข้อมูล
+ */
 const saveDataCopyOrder = async () => {
   if (myForm.value !== null) {
     myForm.value.validate().then(async (result: boolean) => {
       if (result) {
-        dialogConfirm($q,() => fetchSaveCopyOrder(),'ยืนยันการส่งหนังสือเวียน','ต้องการยืนยันการส่งหนังสือเวียนหรือไม่')
+        dialogConfirm(
+          $q,
+          () => fetchSaveCopyOrder(),
+          "ยืนยันการส่งหนังสือเวียน",
+          "ต้องการยืนยันการส่งหนังสือเวียนหรือไม่"
+        );
       }
     });
   }
 };
-
+//อัพเดทข้อมูลหลัง Save
 const fetchSaveCopyOrder = async () => {
   let list: requestSendNoti[] = [];
   rows.value.map((r: DataCopyOrder) => {
@@ -343,7 +387,6 @@ const fetchSaveCopyOrder = async () => {
       isSendNotification: true,
     });
   });
-
   showLoader();
   await http
     .put(config.API.notiDeceased(profileId.value), { Persons: list })
@@ -359,7 +402,6 @@ const fetchSaveCopyOrder = async () => {
       getData();
     });
 };
-
 const updateData = (row: DataCopyOrder) => {
   editRows.value.push(row);
 };
diff --git a/src/modules/06_retirement/components/resign/DetailDeceased.vue b/src/modules/06_retirement/components/resign/DetailDeceased.vue
index 12737dadf..c8da5a8fd 100644
--- a/src/modules/06_retirement/components/resign/DetailDeceased.vue
+++ b/src/modules/06_retirement/components/resign/DetailDeceased.vue
@@ -6,6 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/**use*/
 const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
@@ -15,6 +16,7 @@ const fullName = ref<string>("");
 const profileId = ref<string>(route.params.id.toString());
 const detail = ref<any>([]);
 
+/** Hook */
 onMounted(() => {
   fectdata();
 });
@@ -63,6 +65,10 @@ const downloadFile = (response: any, filename: string) => {
   document.body.removeChild(link);
 };
 
+/**
+ * ฟังก์ชั่น ดาว์โหลด
+ * @param type typeของรายละเอียด
+ */
 const fileDownload = async (type: string) => {
   showLoader();
   await http
diff --git a/src/modules/06_retirement/components/resign/DialogSendToCommand.vue b/src/modules/06_retirement/components/resign/DialogSendToCommand.vue
index f7389d1da..f9fcda40f 100644
--- a/src/modules/06_retirement/components/resign/DialogSendToCommand.vue
+++ b/src/modules/06_retirement/components/resign/DialogSendToCommand.vue
@@ -8,6 +8,7 @@ import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogH
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** use */
 const $q = useQuasar();
 const selected = ref<ResponseItems[]>([]);
 const mixin = useCounterMixin();
@@ -15,6 +16,7 @@ const { showLoader, success, messageError, dialogConfirm, hideLoader } = mixin;
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 
+/** คอลัมน์ */
 const columns2 = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -107,6 +109,8 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+
+/** คอลัมน์ที่แสดง */
 const visibleColumns2 = ref<string[]>([
   "no",
   "fullname",
@@ -118,6 +122,7 @@ const visibleColumns2 = ref<string[]>([
   "statustext",
 ]);
 
+/** props*/
 const props = defineProps({
   modal: Boolean,
   closeModal: Function,
@@ -132,6 +137,9 @@ const resetFilter = () => {
   filterRef.value.focus();
 };
 
+/**
+ * ฟังก์ชั่นการ Selected Data
+ */
 const checkSelected = computed(() => {
   if (selected.value.length === 0) {
     return true;
diff --git a/src/modules/06_retirement/components/resign/Resign.vue b/src/modules/06_retirement/components/resign/Resign.vue
index d90b49741..42c9c0ae8 100644
--- a/src/modules/06_retirement/components/resign/Resign.vue
+++ b/src/modules/06_retirement/components/resign/Resign.vue
@@ -10,6 +10,7 @@ import config from "@/app.config";
 import type { QTableProps } from "quasar";
 import type { ResponseItems } from "@/modules/06_retirement/interface/response/Main";
 
+/** use */
 const RetirementData = useRetirementDataStore();
 const { statusText } = RetirementData;
 const $q = useQuasar(); //ใช้ noti quasar
@@ -17,6 +18,7 @@ const router = useRouter();
 const mixin = useCounterMixin();
 const { messageError, date2Thai, showLoader, hideLoader } = mixin;
 
+/** คอลัมน์ */
 const rows = ref<ResponseItems[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -120,6 +122,8 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+
+/** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "no",
   "prefix",
@@ -148,12 +152,13 @@ const closeModal = () => {
   modal.value = false;
   filterKeyword2.value = "";
 };
-
+//reset filter
 const resetFilter = () => {
   filterKeyword.value = "";
   filterRef.value.focus();
 };
 
+//เปิด Modal
 const openModalOrder = async () => {
   openModal();
   const row = await filters.value.filter(
@@ -170,6 +175,7 @@ const openModalOrder = async () => {
   rows2.value = row;
 };
 
+/**Hook */
 onMounted(async () => {
   await fecthlist();
 });
@@ -219,6 +225,8 @@ const fecthlist = async () => {
       hideLoader();
     });
 };
+
+/**Setting pagination */
 const pagination = ref({
   sortBy: "datetext",
   descending: true,
@@ -234,28 +242,66 @@ const pagination = ref({
       <div class="row col-12">
         <div class="row col-12 q-col-gutter-sm">
           <div>
-            <q-btn @click="openModalOrder" size="14px" flat round color="add" icon="mdi-account-arrow-right">
+            <q-btn
+              @click="openModalOrder"
+              size="14px"
+              flat
+              round
+              color="add"
+              icon="mdi-account-arrow-right"
+            >
               <q-tooltip>ส่งไปออกคำสั่งลาออก</q-tooltip>
             </q-btn>
           </div>
 
           <q-space />
 
-          <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-            debounce="300" placeholder="ค้นหา">
+          <q-input
+            class="col-xs-12 col-sm-3 col-md-2"
+            standout
+            dense
+            v-model="filterKeyword"
+            ref="filterRef"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
             <template v-slot:append>
               <q-icon v-if="filterKeyword == ''" name="search" />
-              <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+              <q-icon
+                v-if="filterKeyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter"
+              />
             </template>
           </q-input>
 
-          <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
-            emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
-            class="col-xs-12 col-sm-3 col-md-2" />
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+            class="col-xs-12 col-sm-3 col-md-2"
+          />
         </div>
         <div class="col-12 q-pt-sm">
-          <d-table :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" :visible-columns="visibleColumns"
-            v-model:pagination="pagination">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            :filter="filterKeyword"
+            row-key="id"
+            :visible-columns="visibleColumns"
+            v-model:pagination="pagination"
+          >
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
@@ -264,7 +310,11 @@ const pagination = ref({
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer" @click="router.push(`/retirement/resign/${props.row.id}`)">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="router.push(`/retirement/resign/${props.row.id}`)"
+              >
                 <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td>
@@ -303,7 +353,12 @@ const pagination = ref({
     </div>
   </q-card>
 
-  <DialogSendToCommand v-model:modal="modal" :closeModal="closeModal" :rows2="rows2"
-    v-model:filterKeyword2="filterKeyword2" :fecthlistRecevice="fecthlist" />
+  <DialogSendToCommand
+    v-model:modal="modal"
+    :closeModal="closeModal"
+    :rows2="rows2"
+    v-model:filterKeyword2="filterKeyword2"
+    :fecthlistRecevice="fecthlist"
+  />
 </template>
 <style scoped lang="scss"></style>
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 5c2dbe633..ef2a8a06d 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -6,20 +6,22 @@ import DialogFooter from "@/modules/05_placement/components/PersonalList/DialogF
 import DialogHeader from "@/modules/05_placement/components/PersonalList/DialogHeader.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRetirementDataStore } from "@/modules/06_retirement/store";
-
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import keycloak from "@/plugins/keycloak";
-import type { TypeFile, rowFile } from "@/modules/06_retirement/interface/response/Main";
+import type {
+  TypeFile,
+  rowFile,
+} from "@/modules/06_retirement/interface/response/Main";
 import type { QTableProps } from "quasar";
 
+/** Use */
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 const RetirementData = useRetirementDataStore();
-
 const {
   messageError,
   date2Thai,
@@ -31,6 +33,7 @@ const {
 } = mixin;
 const { statusText } = RetirementData;
 
+/** ตัวแปร */
 const roleUser = ref<string>("");
 const id = ref<string>(route.params.id.toString());
 const myForm = ref<QForm | null>(null);
@@ -58,7 +61,6 @@ const dataDetail = ref<any>({
   statustext: "",
   fullname: "",
 });
-
 const organizationPositionOld = ref<string>("");
 const positionTypeOld = ref<string>("");
 const positionLevelOld = ref<string>("");
@@ -70,12 +72,12 @@ const reason = ref<string>("");
 const location = ref<string>("");
 const status = ref<string>("");
 const remarkHorizontal = ref<string>("");
-
 const modal = ref<boolean>(false);
 const actionPass = ref<boolean>(false);
 const reasonReign = ref<string>("");
 const dateBreak = ref<Date | null>(null);
 
+/** คอลัมน์ */
 const rows = ref<TypeFile[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -107,9 +109,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+/**เปิด-ปิด modal */
 const closeModal = () => (modal.value = false);
 const openModal = () => (modal.value = true);
 
+/** Hook */
 onMounted(async () => {
   fetchData(id.value);
   if (keycloak.tokenParsed !== undefined) {
@@ -139,6 +143,9 @@ const diffDate = () => {
   return false;
 };
 
+/**
+ * นำข้อมูลมาจาก API
+ */
 const fetchData = async (id: string) => {
   showLoader();
   await http
@@ -187,13 +194,14 @@ const fetchData = async (id: string) => {
 //   document.body.removeChild(link);
 // };
 
+/**Pop up */
 const popUp = (action: "pass" | "passNot") => {
   reasonReign.value = "";
   dateBreak.value = null;
   actionPass.value = action === "pass";
   openModal();
 };
-
+//เงื่อนไขpop up
 const conditionPopup = () => {
   if (myFormConfirm.value !== null) {
     myFormConfirm.value.validate().then(async (check) => {
@@ -208,6 +216,7 @@ const conditionPopup = () => {
   }
 };
 
+//pop up ยืนยันการอนุมัติ
 const confirmpopUp = async () => {
   dialogConfirm(
     $q,
@@ -233,6 +242,7 @@ const confirmpopUp = async () => {
   );
 };
 
+//pop up การยับยั้งสำเร็จ
 const rejectpopUp = async () => {
   dialogConfirm(
     $q,
@@ -258,15 +268,26 @@ const rejectpopUp = async () => {
     "ต้องการยืนยันการยับยั้งนี้หรือไม่ ?"
   );
 };
+
+/**
+ * ไปยังข้อมูล
+ * @param id ไอดีข้อมูล
+ */
 const redirectToRegistry = (id: string) => {
   router.push(`/registry/${id}`);
 };
 
+/**
+ * กดยกเลิก
+ */
 const clickCancel = async () => {
   await fetchData(id.value);
   edit.value = false;
 };
 
+/**
+ * Functionบันทึก
+ */
 const conditionSave = () => {
   if (myForm.value !== null) {
     myForm.value.validate().then((success) => {
@@ -285,7 +306,7 @@ const conditionSave = () => {
     });
   }
 };
-
+//Save จาก Api
 const saveData = async () => {
   const formData = new FormData();
   const send = date.value !== null ? new Date(date.value).toUTCString() : "";
@@ -317,12 +338,18 @@ const saveData = async () => {
     });
 };
 
+/**
+ * Function เพิ่ม Class เวลา Edit
+ * @param val เมื่อเป็นEdit จะเปลี่ยน Class
+ */
 const getClass = (val: boolean) => {
   return {
     "full-width inputgreen cursor-pointer": val,
     "full-width cursor-pointer": !val,
   };
 };
+
+/** แปลง StatusOrder */
 const statusOrder = (val: boolean) => {
   switch (val) {
     case true:
@@ -335,12 +362,12 @@ const statusOrder = (val: boolean) => {
 // เอกสารดาวน์โหลด
 const rowsFileDownload = ref<rowFile[]>([
   {
-    fileName:
-      "แบบฟอร์มหนังสือขอลาออกจากราชการ",
+    fileName: "แบบฟอร์มหนังสือขอลาออกจากราชการ",
     pathName: "",
-  }
+  },
 ]);
 
+// ดาว์นโหลดไฟล์
 const fileDownload = async (type: string, fileName: string) => {
   showLoader();
   await http
@@ -358,6 +385,7 @@ const fileDownload = async (type: string, fileName: string) => {
     });
 };
 
+// ดาว์นโหลดไฟล์
 const downloadFile = (response: any, filename: string) => {
   const link = document.createElement("a");
   var fileName = filename;
diff --git a/src/modules/06_retirement/components/resign/ResignOrder.vue b/src/modules/06_retirement/components/resign/ResignOrder.vue
index cc4466b62..fc9be4c48 100644
--- a/src/modules/06_retirement/components/resign/ResignOrder.vue
+++ b/src/modules/06_retirement/components/resign/ResignOrder.vue
@@ -8,6 +8,7 @@ import { useOrderPlacementDataStore } from "@/modules/05_placement/store";
 import router from "@/router";
 import { useQuasar } from "quasar";
 
+/** Use */
 const $q = useQuasar(); //ใช้ noti quasar
 const DataStore = useOrderPlacementDataStore();
 const pagination = ref({
@@ -16,7 +17,6 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-
 const mixin = useCounterMixin();
 const { dateText } = mixin;
 
@@ -25,6 +25,7 @@ const textDate = (value: Date) => {
   return dateText(value);
 };
 
+/** คอลัมน์ที่แสดง */
 const visibleColumns = ref<string[]>([
   "Order",
   "OrderType",
@@ -263,6 +264,7 @@ const rows = ref<FormOrderPlacementMainData[]>([
 let OriginalData = ref<FormOrderPlacementMainData[]>([]);
 let UpdataData = ref<FormOrderPlacementMainData[]>([]);
 
+/**Hook */
 onMounted(async () => {
   await OriginalDataFetch();
   fiscalYearFilter();
@@ -271,6 +273,9 @@ onMounted(async () => {
   OrderTypeFilter();
 });
 
+/**
+ * ดึงค่าข้อมูลจาก store
+ */
 const OriginalDataFetch = async () => {
   await DataStore.DataMainOrder(rows.value);
   OriginalData.value = await DataStore.DataMainOrigOrder;
@@ -282,6 +287,10 @@ const redirectToPage = (id?: number) => {
   router.push(`/placement/order/detail`);
 };
 
+/**
+ * function delete
+ * @param id id delete
+ */
 const clickDelete = (id: string) => {
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
@@ -297,6 +306,7 @@ const clickDelete = (id: string) => {
     .onDismiss(() => {});
 };
 
+//route ไปหน้า OrderplacementDetail
 const clickAdd = () => {
   router.push({ name: "OrderplacementDetail" });
 };
@@ -320,6 +330,9 @@ const fiscalYearFilter = async () => {
   }
 };
 
+/**
+ * เลือกประเภทคำสั่ง
+ */
 const OrderType = ref<string>("");
 const OrderTypeOption = reactive<DataOption[]>([{ id: 0, name: "ทั้งหมด" }]);
 const addedOrderTypeValues: string[] = [];
@@ -335,6 +348,10 @@ const OrderTypeFilter = async () => {
     }
   }
 };
+
+/**
+ * เลือกStatus คำสั่ง
+ */
 const OrderStatus = ref<string>("");
 const OrderStatusOption = reactive<DataOption[]>([{ id: 1, name: "ทั้งหมด" }]);
 const addedOrderStatusValues: string[] = [];
@@ -366,9 +383,7 @@ const resetFilter = () => {
   filterKeyword.value = "";
   filterRef.value.focus();
 };
-
 const attrs = ref<any>(useAttrs());
-
 const searchFilterTable = async () => {
   await DataStore.DataUpdateOrder(
     OrderType.value,
@@ -378,6 +393,7 @@ const searchFilterTable = async () => {
   UpdataData.value = DataStore.DataMainUpdateOrder;
 };
 
+/**Setting pagination */
 const paging = ref<boolean>(true);
 const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
diff --git a/src/modules/09_leave/components/1_Work/Tab1.vue b/src/modules/09_leave/components/1_Work/Tab1.vue
index b7e9c24cf..ebcf9745a 100644
--- a/src/modules/09_leave/components/1_Work/Tab1.vue
+++ b/src/modules/09_leave/components/1_Work/Tab1.vue
@@ -5,7 +5,7 @@ import { ref, onMounted, onUnmounted } from "vue";
 import type { QTableProps } from "quasar";
 import type {
   DataResTime,
-  TableRows,
+  TableRowsTime,
 } from "@/modules/09_leave/interface/response/work";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 
@@ -19,12 +19,13 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 /** useStore */
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
-const { date2Thai, showLoader, hideLoader } = mixin;
+const { date2Thai, dateToISO, showLoader, hideLoader } = mixin;
 
 const keyword = ref<string>("");
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(2);
-const maxPage = ref<number>(7);
+const rowsPerPage = ref<number>(10);
+const maxPage = ref<number>(1);
+const filetStatus = ref<string>("");
 
 /** ข้อมูลหัวตาราง*/
 const columns = ref<QTableProps["columns"]>([
@@ -64,6 +65,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "checkInStatus",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "checkInStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "checkOutTime",
     align: "left",
@@ -83,11 +93,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "checkStatus",
+    name: "checkOutStatus",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "checkStatus",
+    field: "checkOutStatus",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -97,96 +107,94 @@ const visibleColumns = ref<string[]>([
   "fullName",
   "checkInTime",
   "checkInLocation",
+  "checkInStatus",
   "checkOutTime",
   "checkOutLocation",
-  "checkStatus",
+  "checkOutStatus",
 ]);
-const rows = ref<TableRows[]>([]);
-const optionStatusMain = ref<DataOption[]>([]);
-const optionStatus = ref<DataOption[]>([]);
-const filetStatus = ref<string>("");
+const rows = ref<TableRowsTime[]>([]);
 
 async function fetchListTimeRecord() {
   showLoader();
   const listData: DataResTime[] = [
-    // {
-    //   id: "00000000-0000-0000-0000-000000000000",
-    //   fullName: "นางอมร ใจดี",
-    //   checkDate: new Date(),
-    //   checkInTime: "08:30",
-    //   checkInLocation: "สำนักงงาน",
-    //   checkInLat: "18.7903",
-    //   checkInLon: "99.0029",
-    //   checkOutLocation: "สำนักงงาน",
-    //   checkOutTime: "18:04",
-    //   checkOutLat: "18.7903",
-    //   checkOutLon: "99.0029",
-    //   checkStatus: "normal",
-    // },
-    // {
-    //   id: "00000000-0000-0000-0000-000000000000",
-    //   fullName: "นางอมร ใจดี",
-    //   checkDate: new Date(),
-    //   checkInTime: "08:30",
-    //   checkInLocation: "สำนักงงาน",
-    //   checkInLat: "18.7903",
-    //   checkInLon: "99.0029",
-    //   checkOutLocation: "สำนักงงาน",
-    //   checkOutTime: "18:04",
-    //   checkOutLat: "18.7903",
-    //   checkOutLon: "99.0029",
-    //   checkStatus: "normal",
-    // },
-    // {
-    //   id: "00000000-0000-0000-0000-000000000000",
-    //   fullName: "นางอมร ใจดี",
-    //   checkDate: new Date(),
-    //   checkInTime: "08:30",
-    //   checkInLocation: "สำนักงงาน",
-    //   checkInLat: "18.7903",
-    //   checkInLon: "99.0029",
-    //   checkOutLocation: "สำนักงงาน",
-    //   checkOutTime: "18:04",
-    //   checkOutLat: "18.7903",
-    //   checkOutLon: "99.0029",
-    //   checkStatus: "normal",
-    // },
+    {
+      id: "00000000-0000-0000-0000-000000000000",
+      fullName: "นางอมร ใจดี",
+      checkInDate: new Date(),
+      checkInTime: "08:30",
+      checkInLocation: "สำนักงงาน",
+      checkInLat: "18.7903",
+      checkInLon: "99.0029",
+      checkInStatus: "normal",
+      checkOutDate: new Date(),
+      checkOutLocation: "สำนักงงาน",
+      checkOutTime: "18:04",
+      checkOutLat: "18.7903",
+      checkOutLon: "99.0029",
+      checkOutStatus: "late",
+    },
+    {
+      id: "00000000-0000-0000-0000-000000000000",
+      fullName: "นางอมร ใจดี",
+      checkInDate: new Date(),
+      checkInTime: "08:30",
+      checkInLocation: "สำนักงงาน",
+      checkInLat: "18.7903",
+      checkInLon: "99.0029",
+      checkInStatus: "normal",
+      checkOutDate: new Date(),
+      checkOutLocation: "สำนักงงาน",
+      checkOutTime: "18:04",
+      checkOutLat: "18.7903",
+      checkOutLon: "99.0029",
+      checkOutStatus: "late",
+    },
   ];
 
-  let datalist: TableRows[] = listData.map((e: DataResTime) => ({
+  const date = new Date(workStore.selectDate as string | Date);
+    startDate: dateToISO(date), //*วันที่เริ่ม
+    endDate: dateToISO(date), //*วันที่สิ้นสุด
+    status: filetStatus.value, //*สถานะ
+    page: page.value, //*หน้า
+    pageSize: rowsPerPage.value, //*จำนวนแถวต่อหน้า
+    keyword: keyword.value, //keyword ค้นหา
+  };
+
+  console.log(querySting);
+
+  const datalist: TableRowsTime[] = listData.map((e: DataResTime) => ({
     id: e.id,
     fullName: e.fullName,
-    checkDate: e.checkDate && date2Thai(e.checkDate),
+    checkInDate: e.checkInDate && date2Thai(e.checkInDate),
     checkInTime: e.checkInTime,
     checkInLocation: e.checkInLocation,
     checkInLat: e.checkInLat,
     checkInLon: e.checkInLon,
+    checkInStatus: e.checkInStatus && workStore.convertSatatus(e.checkInStatus),
+    checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
     checkOutLocation: e.checkOutLocation,
     checkOutTime: e.checkOutTime,
     checkOutLat: e.checkOutLat,
     checkOutLon: e.checkOutLon,
-    checkStatus: e.checkStatus && workStore.convertSatatus(e.checkStatus),
+    checkOutStatus:
+      e.checkOutStatus && workStore.convertSatatus(e.checkOutStatus),
   }));
   rows.value = datalist;
-  fetchOption(datalist);
+  maxPage.value = Math.ceil(rows.value.length / rowsPerPage.value);
   hideLoader();
 }
 
-//
-function fetchOption(data: TableRows[]) {
-  const double_status = [...new Set(data.map((item: any) => item.checkStatus))];
-  optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
-  for (let i = 1; i <= double_status.length; i++) {
-    const status = double_status[i - 1];
-    if (typeof status === "string") {
-      const listtype: DataOption = {
-        id: status,
-        name: status,
-      };
-      optionStatusMain.value.push(listtype);
-      optionStatus.value = optionStatusMain.value;
-    }
-  }
+async function updatePaging(
+  params: any,
+  currentPage: number,
+  key: string,
+  status: string
+) {
+  page.value = currentPage;
+  rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
+  keyword.value = key ?? keyword.value;
+  filetStatus.value = status;
+  await fetchListTimeRecord();
 }
 
 /** Hook*/
@@ -200,12 +208,13 @@ onMounted(async () => {
 onUnmounted(() => {});
 </script>
 <template>
-  <ToolBar :option="optionStatus" :filetStatus="filetStatus" />
+  <ToolBar :filetStatus="filetStatus" @update:pagination="updatePaging" />
   <TableList
     :rows="rows.length > 0 ? rows : []"
     :page="page"
     :rowsPerPage="rowsPerPage"
     :maxPage="maxPage"
+    @update:pagination="updatePaging"
   />
 </template>
 
diff --git a/src/modules/09_leave/components/1_Work/Tab2.vue b/src/modules/09_leave/components/1_Work/Tab2.vue
index f3aa9eae0..25bacbcc9 100644
--- a/src/modules/09_leave/components/1_Work/Tab2.vue
+++ b/src/modules/09_leave/components/1_Work/Tab2.vue
@@ -94,7 +94,7 @@ const rows = ref<TableRows[]>([]);
 /** QueryString*/
 const keyword = ref<string>("");
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(5);
+const rowsPerPage = ref<number>(10);
 const maxPage = ref<number>(1);
 
 /** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
diff --git a/src/modules/09_leave/components/1_Work/ToolBar.vue b/src/modules/09_leave/components/1_Work/ToolBar.vue
index d8afb175c..55a305e1f 100644
--- a/src/modules/09_leave/components/1_Work/ToolBar.vue
+++ b/src/modules/09_leave/components/1_Work/ToolBar.vue
@@ -9,16 +9,25 @@ const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
-const props = defineProps({
-  option: {
-    type: Object,
-    require: true,
-  },
-});
+const emit = defineEmits(["update:pagination"]);
+const updateProp = (newPagination: any, keyword: string, status: string) => {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:pagination", newPagination, 1, keyword, status);
+};
 
+const option = ref<any[]>([
+  { id: "", name: "ทั้งหมด" },
+  { id: "normal", name: "ปกติ" },
+  { id: "late", name: "สาย" },
+  { id: "absent", name: "ขาดราชการ" },
+]);
 const filetStatus = ref<string>("");
 const keyword = ref<string>("");
 
+function filterFn() {
+  updateProp([], keyword.value, filetStatus.value);
+}
+
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
   const today = new Date();
@@ -38,6 +47,7 @@ function calculateMaxDate() {
         :enableTimePicker="false"
         week-start="0"
         :max-date="calculateMaxDate()"
+        @update:model-value="filterFn"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -77,7 +87,8 @@ function calculateMaxDate() {
         label="สถานะ"
         use-input
         v-model="filetStatus"
-        :options="props.option as readonly any[] || undefined"
+        :options="option"
+        @update:model-value="filterFn"
       >
         <template v-slot:no-option>
           <q-item>
@@ -95,6 +106,7 @@ function calculateMaxDate() {
         v-model="keyword"
         label="ค้นหา"
         debounce="300"
+        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon name="search" />
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeave.vue b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
index 4230ca4c3..a01681764 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
@@ -7,7 +7,6 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
-import DialogReason1 from "@/components/Dialogs/PopupReason.vue";
 const APIDATA = useLeavelistDataStoreTest();
 
 /** importType */
diff --git a/src/modules/09_leave/components/2_Leave/TableList.vue b/src/modules/09_leave/components/2_Leave/TableList.vue
index cbd3ca300..56eaf4e88 100644
--- a/src/modules/09_leave/components/2_Leave/TableList.vue
+++ b/src/modules/09_leave/components/2_Leave/TableList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -11,12 +11,6 @@ const leaveStore = useLeavelistDataStore();
 
 const router = useRouter();
 
-/** Hook*/
-onMounted(() => {
-  leaveStore.columns = columns.value;
-  leaveStore.visibleColumns = visibleColumns.value;
-});
-
 /** เรียน funtion จาก stores*/
 // const { date2Thai } = mixin;
 // const { optionYear, searchDataFn, filterOption } = leaveStore;
@@ -77,10 +71,49 @@ const visibleColumns = ref<string[]>([
   "status",
 ]);
 
+const props = defineProps({
+  rows: {
+    type: Object,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+});
+
+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: 1,
-  rowsPerPage: 10,
+  page: props.page,
+  rowsPerPage: props.rowsPerPage,
+});
+
+watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
+  // updateProp(pagination.value, currentPage.value);
+  currentPage.value &&
+    pagination.value.rowsPerPage &&
+    updateQuerySting(currentPage.value, pagination.value.rowsPerPage);
+});
+
+/** Hook*/
+onMounted(() => {
+  leaveStore.visibleColumns = visibleColumns.value;
 });
 </script>
 
@@ -89,7 +122,6 @@ const pagination = ref({
     ref="table"
     :columns="columns"
     :rows="leaveStore.rows"
-    :filter="leaveStore.filterTable"
     row-key="id"
     flat
     bordered
@@ -98,7 +130,6 @@ const pagination = ref({
     class="custom-header-table"
     :visible-columns="leaveStore.visibleColumns"
     v-model:pagination="pagination"
-    :loading="leaveStore.loadTable"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -125,8 +156,16 @@ const pagination = ref({
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:loading>
-      <q-inner-loading showing color="primary" />
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
     </template>
   </d-table>
 </template>
diff --git a/src/modules/09_leave/components/2_Leave/ToolBar.vue b/src/modules/09_leave/components/2_Leave/ToolBar.vue
index 0742441b9..c8cc60529 100644
--- a/src/modules/09_leave/components/2_Leave/ToolBar.vue
+++ b/src/modules/09_leave/components/2_Leave/ToolBar.vue
@@ -1,9 +1,116 @@
 <script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+
+import type { DateFilter } from "@/modules/09_leave/interface/request/leave";
+import type {
+  DataOption,
+  DataOption2,
+} from "@/modules/09_leave/interface/index/Main";
 /** importStores*/
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 
 const leaveStore = useLeavelistDataStore();
-const { searchDataFn, filterOption } = leaveStore;
+
+const emit = defineEmits(["update:querySting"]);
+
+/** formFilter*/
+const filter = reactive<DateFilter>({
+  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
+  status: "ALL", //*สถานะการของลา
+  keyword: "", //keyword ค้นหา
+});
+
+/**
+ * function update ข้อมูลการค้นหา  (QuerySting)
+ * @param newPage หน้า
+ * @param pageSize ข้อมูลต่อแถว
+ * @param dateFilter ข้อมูล Filter
+ */
+function updateQuerySting(
+  newPage: number,
+  pageSize: number,
+  dateFilter: DateFilter
+) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:querySting", newPage, pageSize, dateFilter);
+}
+
+/** function ค้นหาข้อมูลใน Table*/
+async function filterListLeave() {
+  filter.status && filter.type && (await updateQuerySting(1, 10, filter));
+}
+
+/** Option*/
+const optionYear = ref<DataOption2[]>([
+  {
+    id: 0,
+    name: "ทั้งหมด",
+  },
+  {
+    id: 2023,
+    name: "2566",
+  },
+]);
+const optionType = ref<DataOption[]>([
+  {
+    id: "00000000-0000-0000-0000-000000000000",
+    name: "ทั้งหมด",
+  },
+]);
+const optionStatus = ref<DataOption[]>([
+  {
+    id: "ALL",
+    name: "ทั้งหมด",
+  },
+  {
+    id: "NEW",
+    name: "ใหม่",
+  },
+  {
+    id: "PENDING ",
+    name: "กำลังดำเนินการ",
+  },
+  {
+    id: "APPROVE ",
+    name: "อนุมัติ",
+  },
+  {
+    id: "REJECT ",
+    name: "ไม่อนุมัติ",
+  },
+]);
+const optionTypeMain = ref<DataOption[]>(optionType.value);
+const optionStatusMain = ref<DataOption[]>(optionStatus.value);
+
+async function fetchOption() {
+  console.log("loadOption  รอ API");
+}
+
+/**
+ * ฟังก์ชั่นค้นหาข้อมูลของ Option Filter
+ * @param val คำที่ค้นหา
+ * @param update Function
+ * @param name ประเภทของ Select
+ */
+function filterOption(val: string, update: any, name: string) {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === "type") {
+      optionType.value = optionTypeMain.value.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (name === "status") {
+      optionStatus.value = optionStatusMain.value.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    }
+  });
+}
+
+onMounted(async () => {
+  await fetchOption();
+});
 </script>
 
 <template>
@@ -15,11 +122,12 @@ const { searchDataFn, filterOption } = leaveStore;
         map-options
         outlined
         dense
-        v-model="leaveStore.selectYear"
-        :options="leaveStore.optionYear"
+        v-model="filter.year"
+        :options="optionYear"
         option-value="id"
         option-label="name"
         label="ปีงบประมาณ"
+        @update:model-value="filterListLeave"
       />
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">
@@ -29,14 +137,12 @@ const { searchDataFn, filterOption } = leaveStore;
         map-options
         outlined
         dense
-        v-model="leaveStore.selectType"
-        :options="leaveStore.leaveOps"
+        v-model="filter.type"
+        :options="optionType"
         option-value="id"
         option-label="name"
         label="ประเภทการลา"
-        @update:model-value="
-          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
-        "
+        @update:model-value="filterListLeave"
         use-input
         @filter="
             (inputValue:any, doneFn:Function) =>
@@ -57,14 +163,12 @@ const { searchDataFn, filterOption } = leaveStore;
         map-options
         outlined
         dense
-        v-model="leaveStore.selectStatus"
-        :options="leaveStore.statusOps"
+        v-model="filter.status"
+        :options="optionStatus"
         option-value="id"
         option-label="name"
         label="สถานะ"
-        @update:model-value="
-          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
-        "
+        @update:model-value="filterListLeave"
         use-input
         @filter="
             (inputValue:any, doneFn:Function) =>
@@ -84,8 +188,9 @@ const { searchDataFn, filterOption } = leaveStore;
         for="filterTable"
         dense
         outlined
-        v-model="leaveStore.filterTable"
+        v-model="filter.keyword"
         label="ค้นหา"
+        @keydown.enter.prevent="filterListLeave"
       />
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">
diff --git a/src/modules/09_leave/interface/index/Main.ts b/src/modules/09_leave/interface/index/Main.ts
index 1a6136942..e76abc1f2 100644
--- a/src/modules/09_leave/interface/index/Main.ts
+++ b/src/modules/09_leave/interface/index/Main.ts
@@ -1,7 +1,9 @@
 interface DataOption {
-    id: string;
-    name: string;
+  id: string;
+  name: string;
 }
-export type {
-    DataOption
-};
+interface DataOption2 {
+  id: number;
+  name: string;
+}
+export type { DataOption, DataOption2 };
diff --git a/src/modules/09_leave/interface/request/leave.ts b/src/modules/09_leave/interface/request/leave.ts
index 86a3b53dc..63d377e26 100644
--- a/src/modules/09_leave/interface/request/leave.ts
+++ b/src/modules/09_leave/interface/request/leave.ts
@@ -5,6 +5,21 @@ interface ListsData {
   Date: Date;
   status: string;
 }
+interface QuerySting {
+  year: number; //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: string; //*Id ประเภทการลา
+  status: string; //*สถานะการของลา
+  page: number; //*หน้า
+  pageSize: number; //*จำนวนแถวต่อหน้า
+  keyword: string; //keyword ค้นหา
+}
+
+interface DateFilter {
+  year: number; //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: string; //*Id ประเภทการลา
+  status: string; //*สถานะการของลา
+  keyword: string; //keyword ค้นหา
+}
 interface FremData {
   id: string; //Id การยื่นขอลา
   leaveTypeName: string | null; //Name ประเภทการลา
@@ -63,4 +78,4 @@ interface FremData {
   coupleDaySumTotalHistory: string; //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
 }
 
-export type { ListsData, FremData };
+export type { ListsData, FremData, QuerySting, DateFilter };
diff --git a/src/modules/09_leave/interface/response/leave.ts b/src/modules/09_leave/interface/response/leave.ts
index 55af334c5..9be01be87 100644
--- a/src/modules/09_leave/interface/response/leave.ts
+++ b/src/modules/09_leave/interface/response/leave.ts
@@ -1,8 +1,10 @@
 interface DataRows {
-  leaveType: string;
-  name: string;
-  Date: string;
-  status: string;
+  id: string; //*Id การยื่นขอลา
+  leaveTypeName: string | null; //Name ประเภทการลา
+  leaveTypeId: string; //Id ประเภทการลา
+  fullname: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
+  dateSendLeave: string | null; //วันที่ยื่นใบลา
+  status: string | null; //ส
 }
 interface FormData {
   id: string;
diff --git a/src/modules/09_leave/interface/response/work.ts b/src/modules/09_leave/interface/response/work.ts
index 5760dccbe..0ebe956de 100644
--- a/src/modules/09_leave/interface/response/work.ts
+++ b/src/modules/09_leave/interface/response/work.ts
@@ -1,29 +1,48 @@
 interface TableRows {
   id: string; //id รายการลงเวลาปฏิบัติงาน
-  fullName: String; //ชื่อ-นามสกุล
+  fullName: string; //ชื่อ-นามสกุล
   checkDate: string | null; //วันที่เข้างาน
   checkInTime: string; //เวลาเข้างาน
-  checkInLocation: String; //พิกัดเข้างาน
-  checkInLat: String; //อัลติจูดเข้างาน
-  checkInLon: String; //ละติจูดเข้างาน
-  checkOutLocation: String; //พิกัดออกงาน
+  checkInLocation: string; //พิกัดเข้างาน
+  checkInLat: string; //อัลติจูดเข้างาน
+  checkInLon: string; //ละติจูดเข้างาน
+  checkOutLocation: string; //พิกัดออกงาน
   checkOutTime: string; //เวลาออกงาน
-  checkOutLat: String; //อัลติจูดออกงาน
-  checkOutLon: String; //ละติจูดออกงาน
+  checkOutLat: string; //อัลติจูดออกงาน
+  checkOutLon: string; //ละติจูดออกงาน
+}
+
+interface TableRowsTime {
+  id: string; //id รายการลงเวลาปฏิบัติงาน
+  fullName: string; //ชื่อ-นามสกุล
+  checkInDate: string | null; //วันที่เข้างาน
+  checkInTime: string; //เวลาเข้างาน
+  checkInLocation: string; //พิกัดเข้างาน
+  checkInLat: string; //อัลติจูดเข้างาน
+  checkInLon: string; //ละติจูดเข้างาน
+  checkInStatus: string | undefined; //สถานะการลงเวลาเข้างาน
+  checkOutDate: string | null;
+  checkOutLocation: string; //พิกัดออกงาน
+  checkOutTime: string; //เวลาออกงาน
+  checkOutLat: string; //อัลติจูดออกงาน
+  checkOutLon: string; //ละติจูดออกงาน
+  checkOutStatus: string | undefined; //สถานะการลงเวลาออกงาน
 }
 interface DataResTime {
   id: string; //id รายการลงเวลาปฏิบัติงาน
-  fullName: String; //ชื่อ-นามสกุล
-  checkDate: Date | null; //วันที่เข้างาน
+  fullName: string; //ชื่อ-นามสกุล
+  checkInDate: Date | null; //วันที่เข้างาน
   checkInTime: string; //เวลาเข้างาน
-  checkInLocation: String; //พิกัดเข้างาน
-  checkInLat: String; //อัลติจูดเข้างาน
-  checkInLon: String; //ละติจูดเข้างาน
-  checkOutLocation: String; //พิกัดออกงาน
+  checkInLocation: string; //พิกัดเข้างาน
+  checkInLat: string; //อัลติจูดเข้างาน
+  checkInLon: string; //ละติจูดเข้างาน
+  checkInStatus: string; //สถานะการลงเวลาเข้างาน
+  checkOutDate: Date | null; //วันที่ออกงาน
+  checkOutLocation: string; //พิกัดออกงาน
   checkOutTime: string; //เวลาออกงาน
-  checkOutLat: String; //อัลติจูดออกงาน
-  checkOutLon: String; //ละติจูดออกงาน
-  checkStatus: string;
+  checkOutLat: string; //อัลติจูดออกงาน
+  checkOutLon: string; //ละติจูดออกงาน
+  checkOutStatus: string; //สถานะการลงเวลาออกงาน
 }
 interface DataResLog {
   id: string; //id รายการลงเวลาปฏิบัติงาน
@@ -38,4 +57,4 @@ interface DataResLog {
   checkOutLat: String; //อัลติจูดออกงาน
   checkOutLon: String; //ละติจูดออกงาน
 }
-export type { TableRows, DataResLog, DataResTime };
+export type { TableRows, DataResLog, DataResTime, TableRowsTime };
diff --git a/src/modules/09_leave/stores/LeaveStore.ts b/src/modules/09_leave/stores/LeaveStore.ts
index f12b658b6..7c131f81d 100644
--- a/src/modules/09_leave/stores/LeaveStore.ts
+++ b/src/modules/09_leave/stores/LeaveStore.ts
@@ -3,43 +3,20 @@ import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
-import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 import type { QTableProps } from "quasar";
 import type { DataRows } from "@/modules/09_leave/interface/response/leave";
-import type {
-  ListsData,
-  FremData,
-} from "@/modules/09_leave/interface/request/leave";
+import type { FremData } from "@/modules/09_leave/interface/request/leave";
 
 const mixin = useCounterMixin();
 const { date2Thai, showLoader, hideLoader } = mixin;
 
 export const useLeavelistDataStore = defineStore("leave", () => {
-  /** TABMENU*/
-  const amounttab1 = ref<number>(0);
-  const amounttab2 = ref<number>(0);
-
   /**ข้อมูลใน Table*/
   const mainData = ref<any>([]);
   const rows = ref<DataRows[]>([]);
-
   const columns = ref<QTableProps["columns"]>([]);
   const visibleColumns = ref<string[]>([]);
-  const loadTable = ref<boolean>(false);
-  const leaveOp = [
-    { id: "all", name: "ทั้งหมด" },
-    { id: "leave1", name: "ลากิจส่วนตัว" },
-    { id: "leave2", name: "ลาป่วย" },
-  ];
-  const statusOp = [
-    { id: "all", name: "ทั้งหมด" },
-    { id: "NEW", name: "ใหม่" },
-    { id: "PENDING", name: "อยู่ระหว่างดำเนินการ" },
-    { id: "APPROVE", name: "อนุมัติ" },
-    { id: "REJECT", name: "ไม่อนุมัติ" },
-  ];
-  const leaveOps = ref<any>(leaveOp);
-  const statusOps = ref<any>(statusOp);
+
   /**
    * ฟังก์ชั่น fetchList
    * @param data รับข้อมูลจาก Page
@@ -55,101 +32,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     }));
     console.log(datalist);
     mainData.value = datalist;
-    // const filteramounttab1 = datalist.filter((e) => e.status === "PENDING");
-    // amounttab1.value = filteramounttab1.length;
-    // amounttab2.value = datalist.length;
-    await searchDataFn(selectType.value, selectStatus.value);
-  }
-
-  /**ref ของการค้นหาข้อมูล */
-  const selectYear = ref<string>("all");
-  const selectType = ref<string>("all");
-  const selectStatus = ref<string>("all");
-  const optionYear = ref<DataOption[]>([{ id: "all", name: "ทั้งหมด" }]);
-  const optionType = ref<DataOption[]>([]);
-  const optionStatus = ref<DataOption[]>([]);
-  const optionTypeMain = ref<DataOption[]>([]);
-  const optionStatusMain = ref<DataOption[]>([]);
-  const filterTable = ref<string>("");
-  /**
-   * ฟังก์ชั่นค้นหาข้อมูลใน Table
-   * @param type รับข้อมูลประเภท
-   * @param status รับค่าสถานะ
-   */
-  function searchDataFn(type: string, status: string) {
-    type = type || "all";
-    status = convertSatatus(status) || "all";
-    // showLoader()
-    loadTable.value = true;
-    if (selectYear.value == "all" && type == "all" && status == "all") {
-      console.log(1);
-      rows.value = mainData.value;
-    } else if (selectYear.value !== "all" && type == "all" && status == "all") {
-      console.log(2);
-    } else if (selectYear.value == "all" && type !== "all" && status == "all") {
-      console.log(3);
-      rows.value = mainData.value.filter((e: any) => e.leaveTypeId === type);
-    } else if (selectYear.value == "all" && type == "all" && status !== "all") {
-      console.log(4);
-      console.log(status);
-
-      rows.value = mainData.value.filter((e: any) => e.status === status);
-    } else if (
-      selectYear.value !== "all" &&
-      type !== "all" &&
-      status == "all"
-    ) {
-      console.log(5);
-    } else if (
-      selectYear.value !== "all" &&
-      type == "all" &&
-      status !== "all"
-    ) {
-      console.log(6);
-    } else if (
-      selectYear.value == "all" &&
-      type !== "all" &&
-      status !== "all"
-    ) {
-      console.log(7);
-      rows.value = mainData.value.filter(
-        (e: any) => e.leaveTypeId === type && e.status === status
-      );
-    } else console.log("ค้นหาจากทั้งหมด");
-    setTimeout(function () {
-      loadTable.value = false;
-    }, 500);
-  }
-
-  /**
-   * ฟังก์ชั่นเคลียร์ข้อมูลค้นหา
-   */
-  function clearFilter() {
-    selectYear.value = "all";
-    selectType.value = "all";
-    selectStatus.value = "all";
-    filterTable.value = "";
-  }
-
-  /**
-   * ฟังก์ชั่นค้นหาข้อมูลของ Option Filter
-   * @param val คำที่ค้นหา
-   * @param update Function
-   * @param name ประเภทของ Select
-   */
-  function filterOption(val: string, update: any, name: string) {
-    update(() => {
-      const needle = val.toLowerCase();
-      if (name === "type") {
-        leaveOps.value = leaveOp.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
-      } else if (name === "status") {
-        statusOps.value = statusOp.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
-      }
-    });
+    rows.value = mainData.value;
   }
 
   /**
@@ -220,30 +103,12 @@ export const useLeavelistDataStore = defineStore("leave", () => {
   }
 
   return {
-    amounttab1,
-    amounttab2,
     /**ข้อมูลใน Table */
     rows,
     fetchList,
-    loadTable,
     columns,
     visibleColumns,
 
-    /**ค้นหาข้อมูล */
-    filterTable,
-    selectYear,
-    selectType,
-    selectStatus,
-    optionYear,
-    optionType,
-    optionStatus,
-    clearFilter,
-    searchDataFn,
-    filterOption,
-    leaveOp,
-    statusOp,
-    leaveOps,
-    statusOps,
     /** Function แปลงค่า */
     convertLeave,
     convertLeaveDaytype,
diff --git a/src/modules/09_leave/views/LeaveListMain.vue b/src/modules/09_leave/views/LeaveListMain.vue
index 14e88037b..8a5470b6e 100644
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/src/modules/09_leave/views/LeaveListMain.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 
 /**importType*/
+import type {
+  QuerySting,
+  DateFilter,
+} from "@/modules/09_leave/interface/request/leave";
 import type { DataRows } from "@/modules/09_leave/interface/response/leave";
 
 /**importStroe*/
@@ -14,30 +18,55 @@ import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";
 
 const leaveStore = useLeavelistDataStore();
 const APIDATA = useLeavelistDataStoreTest();
-const { fetchList, clearFilter } = leaveStore;
+const { fetchList } = leaveStore;
+
+/** เรียกข้อมูลจาก API*/
+function fecthLeaveList() {
+  const data = APIDATA.data;
+  maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  fetchList(data); /** ส่งข้อมูลไป stores*/
+}
+
+function updatePaging(
+  newPage: number,
+  pageSize: number,
+  dateFilter: DateFilter
+) {
+  querySting.year = dateFilter ? dateFilter.year : querySting.year;
+  querySting.type = dateFilter ? dateFilter.type : querySting.type;
+  querySting.status = dateFilter ? dateFilter.status : querySting.status;
+  querySting.page = newPage;
+  querySting.pageSize = pageSize;
+  querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
+
+  console.log(querySting);
+}
+
+const maxPage = ref<number>(1);
+const querySting = reactive<QuerySting>({
+  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
+  status: "ALL", //*สถานะการของลา
+  page: 1, //*หน้า
+  pageSize: 5, //*จำนวนแถวต่อหน้า
+  keyword: "", //keyword ค้นหา
+});
 
 onMounted(() => {
   fecthLeaveList();
 });
-/** เรียกข้อมูลจาก API*/
-function fecthLeaveList() {
-  const data = APIDATA.data;
-
-  fetchList(data); /** ส่งข้อมูลไป stores*/
-}
-
-/** เปลี่ยน TAB*/
-function changTab() {
-  clearFilter();
-  fecthLeaveList();
-}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
   <div>
     <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-      <ToolBar />
-      <TableList />
+      <ToolBar @update:querySting="updatePaging" />
+      <TableList
+        :page="querySting.page"
+        :rowsPerPage="querySting.pageSize"
+        :maxPage="maxPage"
+        @update:querySting="updatePaging"
+      />
     </q-card>
   </div>
 </template>