diff --git a/src/modules/07_insignia/components/3_result/DialogForm.vue b/src/modules/07_insignia/components/3_result/DialogForm.vue
index 2555ecbc8..714e6113e 100644
--- a/src/modules/07_insignia/components/3_result/DialogForm.vue
+++ b/src/modules/07_insignia/components/3_result/DialogForm.vue
@@ -50,7 +50,7 @@ const employeeClassOps = ref<DataOption[]>([
 const listPerson = ref<any>([]);
 
 const paymentOp = [
-  { label: "จัดส่งทางไปรษณี", value: "จัดส่งทางไปรษณี" },
+  { label: "จัดส่งทางไปรษณีย์", value: "จัดส่งทางไปรษณีย์" },
   { label: "มารับด้วยตัวเอง", value: "มารับด้วยตัวเอง" },
 ];
 
@@ -682,7 +682,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 :label="`เลือกรูปแบบการจ่าย`"
               />
             </div>
-            <div v-if="payment === 'จัดส่งทางไปรษณี'" class="col-12">
+            <div v-if="payment === 'จัดส่งทางไปรษณีย์'" class="col-12">
               <q-input
                 :disable="disbleStatus"
                 label="ที่อยู่ที่จ่าย"
diff --git a/src/modules/09_leave/components/4_specialTime/Table.vue b/src/modules/09_leave/components/4_specialTime/Table.vue
new file mode 100644
index 000000000..a4c12392f
--- /dev/null
+++ b/src/modules/09_leave/components/4_specialTime/Table.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="q-pb-sm row q-col-gutter-sm">
+    <!--  -->
+    <div class="q-gutter-sm" v-if="nornmalData == true">
+      <datepicker
+        menu-class-name="modalfix"
+        v-model="SpecialTimeStore.selectDate"
+        :locale="'th'"
+        autoApply
+        :enableTimePicker="false"
+        week-start="0"
+        @update:model-value="searchFilterTable(SpecialTimeStore.selectDate)"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            for="selectDate"
+            dense
+            outlined
+            lazy-rules
+            :model-value="
+              SpecialTimeStore.selectDate !== null
+                ? date2Thai(SpecialTimeStore.selectDate)
+                : null
+            "
+            hide-bottom-space
+            :label="`${'วันที่'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon name="event" class="cursor-pointer text-primary">
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+    </div>
+    <q-space />
+    <!-- ค้นหาข้อความใน table -->
+    <q-input
+      standout
+      dense
+      :model-value="inputfilter"
+      ref="filterRef"
+      @update:model-value="updateInput"
+      outlined
+      debounce="300"
+      placeholder="ค้นหา"
+      style="max-width: 200px"
+      class="col-xs-12 col-sm-3 col-md-2"
+    >
+      <template v-slot:append>
+        <q-icon v-if="inputfilter == ''" name="search" />
+        <q-icon
+          v-if="inputfilter !== ''"
+          name="clear"
+          class="cursor-pointer"
+          @click="resetFilter"
+        />
+      </template>
+    </q-input>
+    <!-- แสดงคอลัมน์ใน table -->
+    <q-select
+      :model-value="inputvisible"
+      @update:model-value="updateVisible"
+      :display-value="$q.lang.table.columns"
+      multiple
+      outlined
+      dense
+      :options="attrs.columns"
+      options-dense
+      option-value="name"
+      map-options
+      emit-value
+      class="col-xs-12 col-sm-3 col-md-2 gt-xs"
+    >
+      <template> </template>
+    </q-select>
+  </div>
+  <d-table
+    ref="table"
+    flat
+    v-bind="attrs"
+    virtual-scroll
+    :virtual-scroll-sticky-size-start="48"
+    dense
+    :pagination-label="paginationLabel"
+    v-model:pagination="pagination"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium" v-html="col.label" />
+        </q-th>
+        <q-th auto-width />
+        <q-th auto-width />
+        <q-th auto-width v-if="nornmalData == true" />
+      </q-tr>
+    </template>
+    <template #body="props">
+      <slot v-bind="props" name="columns"></slot>
+    </template>
+  </d-table>
+</template>
+<script setup lang="ts">
+import { ref, useAttrs } from "vue";
+import type { Pagination } from "@/modules/04_registry/interface/index/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
+
+const SpecialTimeStore = useSpecialTimeStore();
+const { searchFilterTable } = SpecialTimeStore;
+const mixin = useCounterMixin();
+const { hideLoader, monthYear2Thai, date2Thai } = mixin;
+const attrs = ref<any>(useAttrs());
+const paging = ref<boolean>(true);
+const pagination = ref({
+  // sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
+const table = ref<any>(null);
+const filterRef = ref<any>(null);
+const initialPagination = ref<Pagination>({
+  rowsPerPage: 0,
+});
+
+const props = defineProps({
+  count: Number,
+  pass: Number,
+  notpass: Number,
+
+  inputfilter: String,
+  name: String,
+  icon: String,
+  inputvisible: Array,
+  editvisible: Boolean,
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  validate: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  nornmalData: {
+    type: Boolean,
+    defualt: true,
+  },
+  conclude: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+const emit = defineEmits([
+  "update:inputfilter",
+  "update:inputvisible",
+  "update:editvisible",
+]);
+const updateInput = (value: string | number | null) => {
+  emit("update:inputfilter", value);
+};
+const updateVisible = (value: []) => {
+  emit("update:inputvisible", value);
+};
+
+const checkAdd = () => {
+  props.add();
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  emit("update:inputfilter", "");
+  filterRef.value.focus();
+};
+</script>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/modules/09_leave/interface/request/specialTime.ts b/src/modules/09_leave/interface/request/specialTime.ts
new file mode 100644
index 000000000..ad40e5737
--- /dev/null
+++ b/src/modules/09_leave/interface/request/specialTime.ts
@@ -0,0 +1,12 @@
+interface ListData {
+  id: string;
+  fullname: string | null;
+  date: string | null;
+  dateFix: string | null;
+  startTimeMorning: string | null;
+  endTimeMorning: string | null;
+  startTimeAfternoon: string | null;
+  endTimeAfternoon: string | null;
+  status: string;
+}
+export type { ListData };
diff --git a/src/modules/09_leave/interface/response/specialTime.ts b/src/modules/09_leave/interface/response/specialTime.ts
index 318a5ed5d..fa2d52ffe 100644
--- a/src/modules/09_leave/interface/response/specialTime.ts
+++ b/src/modules/09_leave/interface/response/specialTime.ts
@@ -1,11 +1,10 @@
 interface DataRows {
+  id: string;
   fullname: string | null;
   date: string | null;
   dateFix: string | null;
-  type: string;
-  reason: string;
-  timeStamp: string;
-  unapprove?: string; // Make these properties optional
-  approve?: string;
+  timeMorning: string;
+  timeAfternoon: string;
+  status: string;
 }
 export type { DataRows };
diff --git a/src/modules/09_leave/stores/SpecialTimeStore.ts b/src/modules/09_leave/stores/SpecialTimeStore.ts
index 9f233d1b9..fa33244b1 100644
--- a/src/modules/09_leave/stores/SpecialTimeStore.ts
+++ b/src/modules/09_leave/stores/SpecialTimeStore.ts
@@ -1,16 +1,22 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import type { QTableProps } from "quasar";
+import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
+import type { ListData } from "@/modules/09_leave/interface/request/specialTime";
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
 export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   const rows = ref<any[]>([]);
-  async function fecthList(data: any[]) {
-    let datalist: any[] = data.map((e: any) => ({
+  const selectDate = ref<Date | null>(new Date());
+  const fiscalYear = ref<string | null>("0");
+  const DataMainOrig = ref<DataRows[]>([]); // ข้อมูลหลักดั้งเดิม
+  async function fecthList(data: ListData[]) {
+    let datalist: DataRows[] = data.map((e: ListData) => ({
+      id: e.id,
       fullname: e.fullname,
-      date: date2Thai(new Date(e.date), false, true),
+      date: date2Thai(new Date(e.date)),
       dateFix: date2Thai(new Date(e.dateFix)),
       timeMorning:
         e.startTimeMorning == null
@@ -23,7 +29,56 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
       status: e.status,
     }));
     rows.value = datalist;
+    DataMainOrig.value = datalist;
   }
+  const DataMainUpdate = ref<DataRows[]>([]); // ข้อมูลเปลี่ยนแปลง
+  const DataMain = (val: DataRows[]) => (DataMainOrig.value = val);
+  const DataUpdate = (filterYear: string) => {
+    DataMainUpdate.value = [];
+    if (filterYear === "") {
+      DataMainUpdate.value = DataMainOrig.value;
+    }
+  };
+
+  //--------------|ฟิลเตอร์|--------------------------------------//
+  const searchFilterTable = async (searchDate: any) => {
+    rows.value = [];
+
+    if (fiscalYear.value !== undefined && searchDate.value !== null) {
+      await DataUpdate(searchDate.value === "0" ? "all" : searchDate.value!);
+      let filteredData = DataMainOrig.value;
+      if (searchDate.value !== "0") {
+        filteredData = filteredData.filter(
+          (item: DataRows) => item.date === searchDate.value
+        );
+        console.log(searchDate.value);
+      }
+      const dataArr = filteredData.map((e: any) => ({
+        fullname: e.fullname,
+        date: date2Thai(new Date(e.date)),
+        dateFix: date2Thai(new Date(e.dateFix)) + (e.timeStamp || ""),
+        type: e.type,
+        reason: e.reason,
+        timeStamp: e.timeStamp,
+      }));
+      rows.value = dataArr;
+    }
+  };
+
+  //   const 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",
@@ -96,5 +151,8 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     rows,
     visibleColumns,
     columns,
+    DataMain,
+    searchFilterTable,
+    selectDate,
   };
 });
diff --git a/src/modules/09_leave/views/SpecialTimeMain.vue b/src/modules/09_leave/views/SpecialTimeMain.vue
index 7f5c3047b..1dd3d8bdc 100644
--- a/src/modules/09_leave/views/SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/SpecialTimeMain.vue
@@ -47,6 +47,7 @@ const resetFilter = () => {
 onMounted(async () => {
   fecthList([
     {
+      id: "00000000-0000-0000-0000-000000000000",
       fullname: "นางสาวณัฐกา ชมสิน",
       date: "2023-11-01 08:54",
       dateFix: "2023-10-30",
@@ -57,6 +58,7 @@ onMounted(async () => {
       status: "PENDING",
     },
     {
+      id: "00000000-0000-0000-0000-000000000000",
       fullname: "นางสาวรัชภรณ์ ภักดี",
       date: "2023-10-30 08:55",
       dateFix: "2023-10-29",
@@ -67,6 +69,7 @@ onMounted(async () => {
       status: "APPROVE",
     },
     {
+      id: "00000000-0000-0000-0000-000000000000",
       fullname: "นางสาวภาพรรณ ลออ",
       date: "2023-10-31 18:54",
       dateFix: "2023-10-30",
@@ -220,6 +223,9 @@ const monthYearThai = (val: any) => {
                 unelevated
                 >อนุมัติ</q-btn
               >
+
+              <q-badge v-if="props.row.status == 'APPROVE'" rounded outline color="green" label="อนุมัติ" />
+              <q-badge v-if="props.row.status == 'REJECT'" rounded outline color="red" label="ไม่อนุมัติ" />
             </q-td>
           </q-tr>
         </template>