diff --git a/src/modules/09_leave/components/2_Leave/ToolBar.vue b/src/modules/09_leave/components/2_Leave/ToolBar.vue
index 31d4aca07..908f188ef 100644
--- a/src/modules/09_leave/components/2_Leave/ToolBar.vue
+++ b/src/modules/09_leave/components/2_Leave/ToolBar.vue
@@ -53,7 +53,6 @@ const { searchDataFn, filterOption } = leaveStore;
     <div class="col-xs-12 col-sm-3 col-md-2">
       <q-select
         for="selectStatus"
-        v-if="leaveStore.tab == '2'"
         emit-value
         map-options
         outlined
@@ -100,6 +99,4 @@ const { searchDataFn, filterOption } = leaveStore;
       />
     </div>
   </div>
-</template>
-
-<style scoped></style>
+</template>
\ No newline at end of file
diff --git a/src/modules/09_leave/components/4_specialTime/Table.vue b/src/modules/09_leave/components/4_specialTime/Table.vue
deleted file mode 100644
index da911aa3f..000000000
--- a/src/modules/09_leave/components/4_specialTime/Table.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<template>
-  <div class="q-pb-sm row q-col-gutter-sm">
-    <!--  -->
-    <div class="q-gutter-sm" v-if="nornmalData == true">
-      <datepicker
-        v-model="selectedDate"
-        :locale="'th'"
-        autoApply
-        month-picker
-        :enableTimePicker="false"
-      >
-        <template #year="{ year }">{{ year + 543 }}</template>
-        <template #year-overlay-value="{ value }">{{
-          parseInt(value + 543)
-        }}</template>
-        <template #trigger>
-          <q-input
-            :model-value="monthYearThai(dateMonth)"
-            dense
-            outlined
-            hide-bottom-space
-            style="width: 130px"
-          >
-            <template v-slot:prepend>
-              <q-icon
-                name="event"
-                class="cursor-pointer"
-                style="color: var(--q-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>
-    <!-- <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="scope.pagesNumber"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </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";
-
-const mixin = useCounterMixin();
-const { hideLoader, monthYear2Thai } = 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 selectedDate = ref<string>("");
-
-const dateMonth = ref<any>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
-console.log(dateMonth);
-
-const monthYearThai = (val: any) => {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
-};
-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/stores/LeaveStore.ts b/src/modules/09_leave/stores/LeaveStore.ts
index f3e30f5c3..576c1eb74 100644
--- a/src/modules/09_leave/stores/LeaveStore.ts
+++ b/src/modules/09_leave/stores/LeaveStore.ts
@@ -10,7 +10,6 @@ const mixin = useCounterMixin();
 const { date2Thai, showLoader, hideLoader } = mixin;
 export const useLeavelistDataStore = defineStore("leave", () => {
   //TABMENU
-  const tab = ref<string>("1");
   const amounttab1 = ref<number>(0);
   const amounttab2 = ref<number>(0);
   //ข้อมูลในตาราง
@@ -23,16 +22,14 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     let datalist = data.map((e: DataRows) => ({
       leaveType: e.leaveType,
       name: e.name,
-      Date: e.Date,
+      Date: date2Thai(e.Date),
       status: convertSatatus(e.status),
     }));
-    tab.value !== "1"
-      ? (mainData.value = datalist)
-      : (mainData.value = datalist.filter(
-          (e) => e.status === "อยู่ระหว่างกำเนินการ"
-        ));
+    mainData.value = datalist.filter(
+      (e) => e.status === "อยู่ระหว่างดำเนินการ"
+    );
     const filteramounttab1 = datalist.filter(
-      (e) => e.status === "อยู่ระหว่างกำเนินการ"
+      (e) => e.status === "อยู่ระหว่างดำเนินการ"
     );
     amounttab1.value = filteramounttab1.length;
     amounttab2.value = datalist.length;
@@ -162,16 +159,17 @@ export const useLeavelistDataStore = defineStore("leave", () => {
   // convertSatatus
   function convertSatatus(val: string) {
     switch (val) {
-      case "1":
+      case "NEW":
         return "ใหม่";
-      case "2":
-        return "อยู่ระหว่างกำเนินการ";
-      case "3":
+      case "PENDING":
+        return "อยู่ระหว่างดำเนินการ";
+      case "APPROVE":
         return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
     }
   }
   return {
-    tab,
     amounttab1,
     amounttab2,
     //ข้อมูลในตาราง
diff --git a/src/modules/09_leave/stores/SpecialTimeStore.ts b/src/modules/09_leave/stores/SpecialTimeStore.ts
index 8afd5a108..9f233d1b9 100644
--- a/src/modules/09_leave/stores/SpecialTimeStore.ts
+++ b/src/modules/09_leave/stores/SpecialTimeStore.ts
@@ -1,10 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import type { QTableProps } from "quasar";
-import type {
-  investigateDisDataRowType,
-  DataOption,
-} from "@/modules/11_discipline/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
@@ -14,10 +10,17 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   async function fecthList(data: any[]) {
     let datalist: any[] = data.map((e: any) => ({
       fullname: e.fullname,
-      date: date2Thai(new Date(e.date)),
+      date: date2Thai(new Date(e.date), false, true),
       dateFix: date2Thai(new Date(e.dateFix)),
-      type: e.type,
-      reason: e.reason,
+      timeMorning:
+        e.startTimeMorning == null
+          ? "-"
+          : e.startTimeMorning + " - " + e.endTimeMorning,
+      timeAfternoon:
+        e.startTimeAfternoon == null
+          ? "-"
+          : e.startTimeAfternoon + " - " + e.endTimeAfternoon,
+      status: e.status,
     }));
     rows.value = datalist;
   }
@@ -27,8 +30,8 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     "fullname",
     "date",
     "dateFix",
-    "type",
-    "reason",
+    "timeMorning",
+    "timeAfternoon",
   ]);
 
   const columns = ref<QTableProps["columns"]>([
@@ -58,8 +61,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
       field: "date",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
       name: "dateFix",
@@ -69,32 +70,27 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
       field: "dateFix",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "type",
+      name: "timeMorning",
       align: "left",
-      label: "ประเภท",
+      label: "ช่วงเช้า",
       sortable: true,
-      field: "type",
+      field: "timeMorning",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
     {
-      name: "reason",
+      name: "timeAfternoon",
       align: "left",
-      label: "เหตุผล",
+      label: "ช่วงบ่าย",
       sortable: true,
-      field: "reason",
+      field: "timeAfternoon",
       headerStyle: "font-size: 14px",
       style: "font-size: 14px",
-      sort: (a: string, b: string) =>
-        a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
     },
   ]);
+
   return {
     fecthList,
     rows,
diff --git a/src/modules/09_leave/views/LeaveListMain.vue b/src/modules/09_leave/views/LeaveListMain.vue
index 4d2a76929..b7a5a4e60 100644
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/src/modules/09_leave/views/LeaveListMain.vue
@@ -15,30 +15,30 @@ onMounted(() => {
 });
 // เรียกข้อมูลจาก API
 function fecthLeaveList() {
-  const data: DataRows = [
+  const data = [
     {
       leaveType: "ลาป่วย",
       name: "นายกัณฐิมา  กาฬสินธ์ุ",
-      Date: "",
-      status: "1",
+      Date: "2023-11-03",
+      status: "NEW",
     },
     {
       leaveType: "ลากิจส่วนตัว",
       name: "นายนครชัย วันดี",
-      Date: "",
-      status: "3",
+      Date: "2023-11-01",
+      status: "APPROVE",
     },
     {
       leaveType: "ลากิจส่วนตัว",
       name: "นายกัณฐิมา  กาฬสินธ์ุ",
-      Date: "",
-      status: "2",
+      Date: "2023-11-02",
+      status: "PENDING",
     },
     {
       leaveType: "ลาป่วย",
       name: "นายปิยรมย์ ศิริธาราฟ",
-      Date: "",
-      status: "2",
+      Date: "2023-11-01",
+      status: "PENDING",
     },
   ];
   fetchList(data); // ส่งข้อมูลไป stores
@@ -52,65 +52,9 @@ function changTab() {
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
   <div>
-    <!-- <q-card flat bordered class="col-12 q-mt-sm"> -->
-    <q-card bordered flat>
-      <q-tabs
-        v-model="leaveStore.tab"
-        dense
-        align="left"
-        inline-label
-        class="rounded-borders"
-        indicator-color="primary"
-        active-bg-color="teal-1"
-        active-class="text-primary"
-      >
-        <q-tab
-          @click="changTab"
-          name="1"
-          label="รายการลาที่อยู่ระหว่างดำเนินการ"
-        >
-          <q-badge
-            color="grey-4"
-            :class="
-              leaveStore.tab == '1'
-                ? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
-                : 'q-px-sm text-weight-medium text-black q-ml-xl'
-            "
-            :label="leaveStore.amounttab1"
-            rounded
-          />
-        </q-tab>
-        <q-tab @click="changTab" name="2" label="รายการลาทั้งหมด">
-          <q-badge
-            color="grey-4"
-            :class="
-              leaveStore.tab == '2'
-                ? 'q-px-sm text-weight-medium text-primary q-ml-xl bg-teal-1'
-                : 'q-px-sm text-weight-medium text-black q-ml-xl'
-            "
-            :label="leaveStore.amounttab2"
-            rounded
-          />
-        </q-tab>
-      </q-tabs>
-      <q-separator />
-
-      <q-tab-panels v-model="leaveStore.tab" animated>
-        <q-tab-panel name="1">
-          <!-- <TableList1 /> -->
-          <ToolBar />
-          <TableList />
-        </q-tab-panel>
-
-        <q-tab-panel name="2">
-          <!-- <TabList2Vue /> -->
-          <ToolBar />
-          <TableList />
-        </q-tab-panel>
-      </q-tab-panels>
-      <!-- </q-card> -->
+    <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+      <ToolBar />
+      <TableList />
     </q-card>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/src/modules/09_leave/views/SpecialTimeMain.vue b/src/modules/09_leave/views/SpecialTimeMain.vue
index 3286f8c40..7f5c3047b 100644
--- a/src/modules/09_leave/views/SpecialTimeMain.vue
+++ b/src/modules/09_leave/views/SpecialTimeMain.vue
@@ -3,7 +3,6 @@ import { onMounted, ref, useAttrs } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
-import Table from "@/modules/09_leave/components/4_specialTime/Table.vue";
 import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
 import DialogReason from "@/components/Dialogs/PopupReason.vue";
 
@@ -14,11 +13,6 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const { hideLoader, monthYear2Thai } = mixin;
-const filter = ref<string>(""); //search data table
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-const attrs = ref<any>(useAttrs());
 const modalUnapprove = ref(false);
 const pagination = ref({
   // sortBy: "desc",
@@ -54,34 +48,47 @@ onMounted(async () => {
   fecthList([
     {
       fullname: "นางสาวณัฐกา ชมสิน",
-      date: "2023-10-30",
+      date: "2023-11-01 08:54",
       dateFix: "2023-10-30",
-      type: "Checkin",
-      reason: "ลืม",
-      unapprove: "1",
-      approve: "0",
+      startTimeMorning: "08:00",
+      endTimeMorning: "12:00",
+      startTimeAfternoon: "08:00",
+      endTimeAfternoon: "12:00",
+      status: "PENDING",
     },
     {
       fullname: "นางสาวรัชภรณ์ ภักดี",
-      date: "2023-10-30",
-      dateFix: "2023-10-30",
-      type: "Checkin",
-      reason: "ลืม",
-      unapprove: "1",
-      approve: "0",
+      date: "2023-10-30 08:55",
+      dateFix: "2023-10-29",
+      startTimeMorning: "08:00",
+      endTimeMorning: "12:00",
+      startTimeAfternoon: null,
+      endTimeAfternoon: null,
+      status: "APPROVE",
     },
     {
       fullname: "นางสาวภาพรรณ ลออ",
-      date: "2023-10-30",
+      date: "2023-10-31 18:54",
       dateFix: "2023-10-30",
-      type: "Checkin",
-      reason: "ลืม",
-      unapprove: "1",
-      approve: "0",
+      startTimeMorning: null,
+      endTimeMorning: null,
+      startTimeAfternoon: "13:00",
+      endTimeAfternoon: "16:30",
+      status: "REJECT",
     },
   ]);
-  await hideLoader();
 });
+
+const selectedDate = ref<string>("");
+const dateMonth = ref<any>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+
+const monthYearThai = (val: any) => {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+};
 </script>
 
 <template>
@@ -89,8 +96,136 @@ onMounted(async () => {
     รายการลงเวลากรณีพิเศษ
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
+    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+      <div class="q-gutter-sm">
+        <datepicker
+          v-model="selectedDate"
+          :locale="'th'"
+          autoApply
+          month-picker
+          :enableTimePicker="false"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              :model-value="monthYearThai(dateMonth)"
+              dense
+              outlined
+              hide-bottom-space
+              style="width: 130px"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      </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="ค้นหา"
+      >
+        <template v-slot:append>
+          <q-icon v-if="filterKeyword == ''" name="search" />
+          <q-icon
+            v-if="filterKeyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
+
+      <q-select
+        v-model="dataSpecialTime.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="dataSpecialTime.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">
+      <d-table
+        :columns="dataSpecialTime.columns"
+        :rows="dataSpecialTime.rows"
+        :filter="filterKeyword"
+        row-key="tb-list"
+        flat
+        bordered
+        :paging="true"
+        dense
+        v-model:pagination="pagination"
+        :visible-columns="dataSpecialTime.visibleColumns"
+      >
+        <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">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                v-if="props.row.status == 'PENDING'"
+                color="orange"
+                class="q-px-md"
+                dense
+                unelevated
+                @click="unapprove(props.row.fullname)"
+                >ไม่อนุมัติ</q-btn
+              >
+
+              <q-btn
+                v-if="props.row.status == 'PENDING'"
+                color="primary"
+                class="q-px-md q-ml-sm"
+                dense
+                unelevated
+                >อนุมัติ</q-btn
+              >
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+
+      <!-- <Table
         style="max-height: 80vh"
         :rows="dataSpecialTime.rows"
         :columns="dataSpecialTime.columns"
@@ -117,6 +252,7 @@ onMounted(async () => {
             </q-td>
             <q-td auto-width>
               <q-btn
+                v-if="props.row.status == 'PENDING'"
                 color="orange"
                 class="q-px-md"
                 dense
@@ -127,14 +263,19 @@ onMounted(async () => {
               <span>{{ props.row.unapprove }}</span>
             </q-td>
             <q-td auto-width>
-              <q-btn color="primary" class="q-px-md" dense unelevated
+              <q-btn
+                v-if="props.row.status == 'PENDING'"
+                color="primary"
+                class="q-px-md"
+                dense
+                unelevated
                 >อนุมัติ</q-btn
               >
               <span>{{ props.row.approve }}</span>
             </q-td>
           </q-tr>
         </template>
-      </Table>
+      </Table> -->
     </div>
   </q-card>
   <DialogReason