From 651f2e51b42b9a767f321288b8cabb7780c09688 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 21 Nov 2023 15:29:02 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2=20(Admin)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   2 +-
 src/interface/request/main/main.ts.rej        |   2 +-
 .../components/1_Work/DialogDetail.vue        |  44 +-
 .../09_leave/components/1_Work/Tab2.vue       |  14 +-
 .../09_leave/components/2_Leave/Calendar.vue  | 590 ++++++++++++++++++
 .../components/2_Leave/DetailLeave.vue        | 107 +++-
 .../components/2_Leave/DetailLeaveReject.vue  | 567 +++++++++++++++++
 .../09_leave/components/2_Leave/Tab1.vue      | 116 ++++
 .../09_leave/components/2_Leave/Tab2.vue      |  73 +++
 .../09_leave/components/2_Leave/TableList.vue |  78 ++-
 .../2_Leave/{ToolBar.vue => ToolBarLeave.vue} |  24 +-
 .../09_leave/interface/request/leave.ts       |   1 +
 .../09_leave/interface/response/leave.ts      |   8 +-
 src/modules/09_leave/router.ts                |  18 +-
 src/modules/09_leave/stores/LeaveStore.ts     |  53 +-
 src/modules/09_leave/stores/ListLeave.ts      |   5 +
 src/modules/09_leave/views/LeaveListMain.vue  |  75 +--
 src/modules/09_leave/views/WorkingMain.vue    |   2 +-
 18 files changed, 1691 insertions(+), 88 deletions(-)
 create mode 100644 src/modules/09_leave/components/2_Leave/Calendar.vue
 create mode 100644 src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
 create mode 100644 src/modules/09_leave/components/2_Leave/Tab1.vue
 create mode 100644 src/modules/09_leave/components/2_Leave/Tab2.vue
 rename src/modules/09_leave/components/2_Leave/{ToolBar.vue => ToolBarLeave.vue} (91%)

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index dec0d773f..39bb0ed30 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -403,7 +403,7 @@ const menuList = readonly<any[]>([
       {
         key: 9.5,
         label: "รายการลา",
-        path: "/leave-list",
+        path: "/leave",
         role: "leave",
       },
       {
diff --git a/src/interface/request/main/main.ts.rej b/src/interface/request/main/main.ts.rej
index a4c8b102d..d7a8871c1 100644
--- a/src/interface/request/main/main.ts.rej
+++ b/src/interface/request/main/main.ts.rej
@@ -118,7 +118,7 @@ diff a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts	(
 +      {
 +        key: 9.2,
 +        label: "รายการลา",
-+        path: "/leave-list",
++        path: "/leave",
 +        role: "coin",
 +      },
 +      {
diff --git a/src/modules/09_leave/components/1_Work/DialogDetail.vue b/src/modules/09_leave/components/1_Work/DialogDetail.vue
index 656fdc222..35edb002f 100644
--- a/src/modules/09_leave/components/1_Work/DialogDetail.vue
+++ b/src/modules/09_leave/components/1_Work/DialogDetail.vue
@@ -68,18 +68,24 @@ async function fetchDetailByid(id: string) {
       const data = res.data.result;
       formData.checkInDate = data.checkInDate && date2Thai(data.checkInDate);
       formData.checkInImg = data.checkInImg;
-      formData.checkInLat = data.checkInLat;
-      formData.checkInLon = data.checkInLon;
-      formData.checkInLocation = data.checkInLocation;
-      formData.checkInTime = data.checkInTime;
+      formData.checkInLat = data.checkInLat ? data.checkInLat : "";
+      formData.checkInLon = data.checkInLon ? data.checkInLon : "";
+      formData.checkInLocation = data.checkInLocation
+        ? data.checkInLocation
+        : "-";
+      formData.checkInTime = data.checkInTime ? data.checkInTime : "-";
       formData.checkOutDate = data.checkOutDate && date2Thai(data.checkOutDate);
       formData.checkOutImg = data.checkOutImg;
-      formData.checkOutLat = data.checkOutLat;
-      formData.checkOutLon = data.checkOutLon;
-      formData.checkOutLocation = data.checkOutLocation;
-      formData.checkOutTime = data.checkOutTime;
+      formData.checkOutLat = data.checkOutLat ? data.checkOutLat : "";
+      formData.checkOutLon = data.checkOutLon ? data.checkOutLon : "";
+      formData.checkOutLocation = data.checkOutLocation
+        ? data.checkOutLocation
+        : "-";
+      formData.checkOutTime = data.checkOutTime ? data.checkOutTime : "-";
       formData.fullName = data.fullName;
-      formData.checkOutLocation = data.checkOutLocation;
+      formData.checkOutLocation = data.checkOutLocation
+        ? data.checkOutLocation
+        : "-";
       formData.checkInDescription = data.checkInDescription
         ? data.checkInDescription
         : "-";
@@ -177,6 +183,7 @@ function colsePopup() {
                     <div class="col-6 text-grey-8">รูปภาพ</div>
                     <div class="col-5">
                       <q-img
+                        v-if="formData.checkInImg"
                         style="
                           height: 120px;
                           max-width: 150px;
@@ -184,6 +191,15 @@ function colsePopup() {
                         "
                         :src="formData.checkInImg"
                       />
+                      <q-img
+                        v-else
+                        src="@/assets/avatar_user.jpg"
+                        style="
+                          height: 120px;
+                          max-width: 150px;
+                          border-radius: 10px;
+                        "
+                      />
                     </div>
                   </div>
                   <div class="row">
@@ -213,6 +229,7 @@ function colsePopup() {
                     <div class="col-6 text-grey-8">รูปภาพ</div>
                     <div class="col-5">
                       <q-img
+                        v-if="formData.checkOutImg"
                         style="
                           height: 120px;
                           max-width: 150px;
@@ -220,6 +237,15 @@ function colsePopup() {
                         "
                         :src="formData.checkOutImg"
                       />
+                      <q-img
+                        v-else
+                        src="@/assets/avatar_user.jpg"
+                        style="
+                          height: 120px;
+                          max-width: 150px;
+                          border-radius: 10px;
+                        "
+                      />
                     </div>
                   </div>
                   <div class="row">
diff --git a/src/modules/09_leave/components/1_Work/Tab2.vue b/src/modules/09_leave/components/1_Work/Tab2.vue
index 626f1d8cd..2052ef9b8 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>(10);
+const rowsPerPage = ref<number>(2);
 const maxPage = ref<number>(1);
 
 /** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */
@@ -114,13 +114,13 @@ async function fetchListLogRecord() {
         id: e.id,
         fullName: e.fullName,
         checkInDate: e.checkInDate && date2Thai(e.checkInDate),
-        checkInTime: e.checkInTime,
-        checkInLocation: e.checkInLocation,
-        checkInLat: e.checkInLat,
-        checkInLon: e.checkInLon,
+        checkInTime: e.checkInTime ? e.checkInTime : "-",
+        checkInLocation: e.checkInLocation ? e.checkInLocation : "-",
+        checkInLat: e.checkInLat ? e.checkInLat : "",
+        checkInLon: e.checkInLon ? e.checkInLon : "",
         checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
-        checkOutLocation: e.checkOutLocation,
-        checkOutTime: e.checkOutTime,
+        checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
+        checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
         checkOutLat: e.checkOutLat ? e.checkOutLat : "",
         checkOutLon: e.checkOutLon ? e.checkOutLon : "",
       }));
diff --git a/src/modules/09_leave/components/2_Leave/Calendar.vue b/src/modules/09_leave/components/2_Leave/Calendar.vue
new file mode 100644
index 000000000..1409cc630
--- /dev/null
+++ b/src/modules/09_leave/components/2_Leave/Calendar.vue
@@ -0,0 +1,590 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import type { CalendarOptions } from "@fullcalendar/core";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import allLocales from "@fullcalendar/core/locales-all";
+import listPlugin from "@fullcalendar/list";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { monthYear2Thai } = mixin;
+
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
+
+/**
+ * Option ของปฏิทิน
+ */
+const fullCalendar = ref<any>(); //ref calendar
+const calendarOptions = ref<CalendarOptions>({
+  plugins: [
+    dayGridPlugin,
+    timeGridPlugin,
+    interactionPlugin, // needed for dateClick
+    listPlugin,
+  ],
+  buttonText: {
+    listYear: "รายการ",
+    dayGridMonth: "ปฏิทิน",
+    test: "เพิ่มวันหยุด",
+  },
+  headerToolbar: false,
+  initialView: "dayGridMonth",
+  initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
+  selectable: true,
+  dayMaxEvents: true,
+  weekends: true,
+  locale: "th",
+  locales: allLocales,
+  expandRows: true,
+  nowIndicator: true,
+  height: "100%",
+  eventColor: "#fff",
+  eventTextColor: "#4A5568",
+  eventBorderColor: "#50a5fc",
+  displayEventTime: false,
+  editable: true,
+  events: [
+    {
+      groupId: "3",
+      title: "ลากิจส่วนตัว",
+      start: "2023-10-10",
+      allDay: true,
+      status: "done",
+      color: "#E3FDDA",
+    },
+    {
+      groupId: "3",
+      title: "ลากิจส่วนตัว",
+      start: "2023-11-10",
+      allDay: true,
+      status: "done",
+      color: "#E3FDDA",
+    },
+    {
+      groupId: "3",
+      title: "ลากิจส่วนตัว",
+      start: "2023-10-11",
+      allDay: true,
+      status: "done",
+      color: "#E3FDDA",
+    },
+    {
+      groupId: "3",
+      title: "ลากิจส่วนตัว",
+      start: "2023-10-12",
+      allDay: true,
+      status: "done",
+      color: "#E3FDDA",
+    },
+    {
+      groupId: "3",
+      title: "ลากิจส่วนตัว",
+      start: "2023-10-13",
+      allDay: true,
+      status: "done",
+      color: "#E3FDDA",
+    },
+    {
+      groupId: "2",
+      title: "ลาป่วย",
+      start: "2023-10-19",
+      allDay: true,
+      status: "proceed",
+      color: "#e4f3ff",
+    },
+    {
+      groupId: "1",
+      title: "ลาป่วย",
+      start: "2023-10-20",
+      allDay: true,
+      status: "new",
+      color: "#FFF1CC",
+    },
+  ],
+});
+
+/**
+ * ตัวแปรทั้งหมด
+ */
+const modalCancel = ref(false);
+const title = ref("");
+const location = ref("บ้าน");
+const subject = ref("ลาป่วย");
+const dateStart = ref("20 ส.ค. 2566");
+const dateEnd = ref("21 ส.ค. 2566");
+const numDate = ref("20");
+const place = ref("บ้าน");
+const phone = ref("000-00000000");
+const reason = ref("ยกเลิกการลา");
+const model = ref(null);
+const modeCancel = ref(true);
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  if (fullCalendar !== undefined) {
+    const calen = fullCalendar.value.getApi();
+    const date = new Date(dateMonth.value.year, dateMonth.value.month);
+    calen.gotoDate(date);
+  }
+});
+
+function changCalendar() {
+  const calen = fullCalendar.value.getApi();
+  const date = new Date(dateMonth.value.year, dateMonth.value.month);
+  calen.gotoDate(date);
+}
+
+/**
+ * ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
+ */
+// watch(props, async (count, prevCount) => {
+//   const calen = fullCalendar.value.getApi();
+//   const date = new Date(props.dateYear, props.dateMonth);
+//   calen.gotoDate(date);
+// });
+
+/**
+ * ฟังก์ชั่นยกเลิก model
+ * @param text
+ */
+const cancel = async (text: string) => {
+  title.value = text;
+  modalCancel.value = true;
+  modeCancel.value = true;
+};
+/**
+ * ฟังก์ชั่นเปิด model
+ * @param text
+ */
+const view = async (text: string) => {
+  title.value = text;
+  modalCancel.value = true;
+  modeCancel.value = false;
+};
+
+// filter calendar left
+const filterLists = ref<any[]>([
+  {
+    id: "x1",
+    name: "นางสาววารุณี แต้มคู",
+    color: "green",
+  },
+  {
+    id: "x2",
+    name: "นางสาวสมศรี ใจดี",
+    color: "grey",
+  },
+  {
+    id: "x3",
+    name: "นายสมชาย สุขใจ",
+    color: "grey",
+  },
+]);
+const filterVal = ref(["x1"]);
+
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
+
+const dateYear = ref<number>(new Date().getFullYear());
+const updateMonth = async (e: DataDateMonthObject) => {
+  if (e != null) {
+    dateYear.value = e.year;
+
+    changCalendar();
+  }
+};
+
+const monthYearThai = (val: DataDateMonthObject) => {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+};
+</script>
+<template>
+  <div class="q-mt-sm">
+    <div class="row q-gutter-sm">
+      <div class="col-3">
+        <q-list bordered class="rounded-borders">
+          <!-- <q-item-label header>User</q-item-label> -->
+          <q-item
+            v-for="(item, i) in filterLists"
+            :key="i"
+            tag="label"
+            v-ripple
+          >
+            <q-checkbox
+              size="sm"
+              v-model="filterVal"
+              :val="item.id"
+              :color="item.color"
+            />
+            <q-item-section>
+              <q-item-label>{{ item.name }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+
+        <!-- show value filterVal -->
+        <!-- <div class="q-px-sm q-mt-sm">
+			Your selection is: <strong>{{ filterVal }}</strong>
+		  </div> -->
+      </div>
+      <div class="col">
+        <div class="row q-gutter-sm q-pb-sm main-content">
+          <div class="demo-app-main">
+            <div class="row col-12 q-col-gutter-sm q-mb-sm">
+              <div class="col-xs-12 col-sm-3 col-md-2">
+                <datepicker
+                  v-model="dateMonth"
+                  :locale="'th'"
+                  autoApply
+                  month-picker
+                  :enableTimePicker="false"
+                  @update:modelValue="updateMonth"
+                >
+                  <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
+                      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>
+            </div>
+            <FullCalendar
+              ref="fullCalendar"
+              class="demo-app-calendar"
+              :options="calendarOptions"
+            >
+              <template v-slot:eventContent="arg">
+                <div
+                  class="row col-12 items-center no-wrap"
+                  :style="`background: + ${arg.event.color}`"
+                >
+                  <!-- <b>{{ arg.timeText }}</b> -->
+                  <div class="textHover col-10" @click="view(arg.event.title)">
+                    {{ arg.event.title }}
+                  </div>
+                  <q-btn
+                    dense
+                    v-if="arg.event.groupId == 1"
+                    icon="mdi-close"
+                    flat
+                    round
+                    size="8px"
+                    @click="cancel(arg.event.title)"
+                  />
+                </div>
+              </template>
+            </FullCalendar>
+            <div class="row q-col-gutter-lg justify-end">
+              <div class="items-center row">
+                <q-icon
+                  size="10px"
+                  color="light-green"
+                  name="mdi-circle"
+                  class="q-mr-sm"
+                />
+                <span class="text-caption text-grey-8">สถานะอนุมัติ</span>
+              </div>
+              <div class="items-center row">
+                <q-icon
+                  size="10px"
+                  color="red-6"
+                  name="mdi-circle"
+                  class="q-mr-sm"
+                />
+                <span class="text-caption text-grey-8">สถานะไม่อนุมัติ</span>
+              </div>
+              <div class="items-center row">
+                <q-icon
+                  size="10px"
+                  color="light-blue-14"
+                  name="mdi-circle"
+                  class="q-mr-sm"
+                />
+                <span class="text-caption text-grey-8"
+                  >สถานะอยู่ระหว่างดำเนินการ</span
+                >
+              </div>
+              <div class="items-center row">
+                <q-icon
+                  size="10px"
+                  color="orange"
+                  name="mdi-circle"
+                  class="q-mr-sm"
+                />
+                <span class="text-caption text-grey-8">สถานะใหม่</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- modal ขอยกเลิก/ดูรายละเอียด -->
+  <q-dialog v-model="modalCancel" persistent>
+    <q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
+      <q-card-section class="row items-center q-pa-sm">
+        <div v-if="modeCancel == false" class="text-bold q-pl-sm">
+          รายละเอียดของ{{ title }}
+        </div>
+        <div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="q-p-md row q-gutter-y-md">
+        <div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
+          <div class="col-12 q-col-gutter-sm row items-center">
+            <div class="col-6 text-grey-7">เขียนที่</div>
+            <div class="col-6 text-black">{{ location }}</div>
+            <div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
+            <div class="col-6 text-black">{{ subject }}</div>
+            <div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
+            <div class="col-6 text-black">{{ dateStart }}</div>
+            <div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
+            <div class="col-6 text-black">{{ dateEnd }}</div>
+            <div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
+            <div class="col-6 text-black">{{ numDate }}</div>
+            <div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
+            <div class="col-6 text-black">{{ place }}</div>
+            <div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
+            <div class="col-6 text-black">{{ phone }}</div>
+          </div>
+        </div>
+        <div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
+          <q-input
+            v-model="reason"
+            type="textarea"
+            label="กรอกเหตุผล"
+            outlined
+            dense
+          />
+          <q-file
+            outlined
+            v-model="model"
+            label="เลือกไฟล์เอกสารหลักฐาน"
+            class="q-mt-md"
+            use-chips
+            dense
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" />
+            </template>
+          </q-file>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-section
+        class="row items-center q-pa-sm"
+        v-if="modeCancel == true"
+      >
+        <q-space />
+        <q-btn
+          label="ยืนยัน"
+          unelevated
+          color="secondary"
+          dense
+          class="q-px-md"
+          v-close-popup
+        />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scope lang="scss">
+.main-content {
+  height: 65vh;
+}
+
+.color-main {
+  color: #18a259;
+}
+
+.padding-content {
+  padding: 10px;
+}
+
+.demo-app-main {
+  flex-grow: 1;
+  /* padding: 3em; */
+}
+
+.fc {
+  /* the calendar root */
+  max-width: 1100px;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 10px;
+}
+
+.fc-day-today {
+  background-color: #f8f8f8 !important;
+}
+
+.fc-day-today .fc-daygrid-day-number {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* border: 2px solid #17a259; */
+  /* border-radius: 50%;
+  height: 25px;
+  width: 25px;
+  font-weight: bold;
+  color: white !important;
+  background: #17a259; */
+}
+
+.fc-day-today .fc-daygrid-day-frame {
+  padding: 5%;
+}
+
+.fc .fc-button-group > .fc-button {
+  color: black;
+  background-color: #fafafa;
+  border: none;
+}
+
+.fc .fc-button-group > .fc-button:active {
+  color: white;
+  background-color: #22a15e;
+  border: none;
+}
+
+.fc .fc-button-group > .fc-button.fc-button-active {
+  color: white;
+  background-color: #22a15e;
+  border: none;
+}
+
+.fc-header-toolbar {
+  background-color: white;
+  padding: 0px 10px 0px 10px;
+  border-radius: 10px 10px 0px 0px;
+}
+
+.fc .fc-scrollgrid-liquid > thead {
+  background-color: white;
+}
+
+.dp-custom-cell {
+  border-radius: 50%;
+}
+
+.dp__today {
+  border: 1px solid var(--q-primary);
+}
+
+.dp__range_end,
+.dp__range_start,
+.dp__active_date {
+  background: var(--q-primary);
+  color: var(--dp-primary-text-color);
+}
+
+.datepicker .q-field__label {
+  padding-left: 5px;
+}
+
+.datepicker .q-field__messages {
+  padding-left: 20px;
+}
+
+.datepicker .q-field__native {
+  padding-left: 5px;
+  color: var(--q-primary) !important;
+}
+
+.datepicker .q-field__prepend {
+  padding-left: 6px;
+}
+
+.datepicker .q-field__append {
+  padding-right: 6px;
+}
+
+.datepicker .q-field__after {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
+}
+
+.fc .fc-popover {
+  z-index: 6000;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  cursor: pointer;
+}
+
+.subName {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
+}
+
+.subInput {
+  display: flex;
+  align-items: center;
+}
+
+.fc-event {
+  overflow: hidden;
+  border-color: transparent !important;
+  font-weight: 500;
+}
+
+.fc-event-main {
+  text-align: left;
+  padding: 0px 5px;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  padding-left: 0px;
+}
+
+.fc-theme-standard td,
+.fc-theme-standard th {
+  border: 1px solid #ebe9f1;
+}
+
+.textHover:hover {
+  color: #18a259;
+}
+</style>
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeave.vue b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
index a01681764..1c37941e7 100644
--- a/src/modules/09_leave/components/2_Leave/DetailLeave.vue
+++ b/src/modules/09_leave/components/2_Leave/DetailLeave.vue
@@ -107,6 +107,7 @@ const formData = reactive<FremData>({
   coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
   coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
   coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  step: "",
 });
 
 onMounted(() => {
@@ -189,6 +190,7 @@ function fetchDetailLeave(paramsId: string) {
     formData.coupleDayEndDateHistory =
       e.coupleDayEndDateHistory && date2Thai(e.coupleDayEndDateHistory);
     formData.coupleDaySumTotalHistory = e.coupleDaySumTotalHistory;
+    formData.step = e.step;
   });
 
   /** ส่งประเภทของการลาไป Function เช็คประเภทการลา*/
@@ -237,9 +239,23 @@ const openModal = async (data: string) => {
     modalApprove.value = true;
     dialogTitle.value = "ไม่อนุมัติ";
   }
+  if (data === "authority") {
+    modalApprove.value = true;
+    dialogTitle.value = "ส่งไปยังผู้มีอำนาจ";
+  }
 };
 
-/** Function Save*/
+/** function ส่งไปผู้บังคับบัญชา*/
+function sendToCommand() {
+  dialogConfirm(
+    $q,
+    () => console.log("ส่งไปผู้บังคับบัญชา"),
+    "ยืนยันการส่งไปผู้บังคับบัญชา",
+    "ต้องการยืนยันการส่งไปผู้บังคับบัญชานี้ใช่หรือไม่ ?"
+  );
+}
+
+/** Function Save */
 function clickSave() {
   if (dialogTitle.value === "อนุมัติ") {
     dialogConfirm(
@@ -261,6 +277,14 @@ function clickSave() {
     modalApprove.value = false;
     console.log("NOT");
   }
+  if (dialogTitle.value === "ส่งไปยังผู้มีอำนาจ") {
+    dialogConfirm(
+      $q,
+      () => ((modalApprove.value = false), console.log("ส่งไปยังผู้มีอำนาจ")),
+      "ยืนยันการส่งไปยังผู้มีอำนาจ",
+      "ต้องการยืนยันการส่งไปยังผู้มีอำนาจใช่หรือไม่ ?"
+    );
+  }
 }
 </script>
 <template>
@@ -275,7 +299,7 @@ function clickSave() {
           flat
           color="primary"
           class="q-mr-sm"
-          @click="router.push(`/leave-list`)"
+          @click="router.push(`/leave`)"
         />
         รายละเอียดการลาของ {{ formData.fullname }}
       </div>
@@ -458,12 +482,90 @@ function clickSave() {
               />
             </q-card>
           </div>
+          <div class="col-xs-12 col-sm-12 row">
+            <q-card
+              bordered
+              class="row col-12 text-dark q-mt-sm"
+              v-if="
+                formData.step === 'st3' ||
+                formData.step === 'st4' ||
+                formData.step === 'st5'
+              "
+            >
+              <div
+                class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+              >
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  ความคิดเห็นของผู้บังคับบัญชา
+                </div>
+              </div>
+              <q-separator />
+              <div class="row col-12 q-pa-md">
+                <div class="col-12 row bg-white q-col-gutter-md">
+                  <div class="col-xs-6 row items-start">
+                    <div class="col-12 text-detail">-</div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <div class="col-xs-12 col-sm-12 row">
+            <q-card
+              bordered
+              class="row col-12 text-dark q-mt-sm"
+              v-if="formData.step === 'st4' || formData.step === 'st5'"
+            >
+              <div
+                class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+              >
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  ความคิดเห็นของผู้มีอำนาจ
+                </div>
+              </div>
+              <q-separator />
+              <div class="row col-12 q-pa-md">
+                <div class="col-12 row bg-white q-col-gutter-md">
+                  <div class="col-xs-6 row items-start">
+                    <div class="col-12 text-weight-bold text-top">
+                      ผลการพิจารณา
+                    </div>
+                    <div class="col-12 text-detail">อนุมัติ</div>
+                  </div>
+                  <div class="col-xs-6 row items-start">
+                    <div class="col-12 text-weight-bold text-top">
+                      ความคิดเห็น
+                    </div>
+                    <div class="col-12 text-detail">-</div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
         </div>
       </div>
     </div>
     <q-separator />
     <div class="row q-pa-md q-gutter-md justify-end">
       <q-btn
+        v-if="formData.step === 'st1'"
+        unelevated
+        color="orange-5"
+        label="ส่งไปยังผู้บังคับบัญชา"
+        @click="sendToCommand"
+        ><q-tooltip>ส่งไปยังผู้บังคับบัญชา</q-tooltip>
+      </q-btn>
+
+      <q-btn
+        v-if="formData.step === 'st2'"
+        unelevated
+        color="orange-5"
+        label="ส่งไปยังผู้มีอำนาจ"
+        @click="openModal('authority')"
+        ><q-tooltip>ส่งไปยังผู้มีอำนาจ</q-tooltip>
+      </q-btn>
+
+      <q-btn
+        v-if="formData.step === 'st3'"
         unelevated
         color="orange-5"
         label="ไม่อนุมัติ"
@@ -471,6 +573,7 @@ function clickSave() {
         ><q-tooltip>ไม่อนุมัติ</q-tooltip>
       </q-btn>
       <q-btn
+        v-if="formData.step === 'st3'"
         unelevated
         color="primary"
         label="อนุมัติ"
diff --git a/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
new file mode 100644
index 000000000..d2d2021e5
--- /dev/null
+++ b/src/modules/09_leave/components/2_Leave/DetailLeaveReject.vue
@@ -0,0 +1,567 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+/** importStore */
+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";
+const APIDATA = useLeavelistDataStoreTest();
+
+/** importType */
+import type { FremData } from "@/modules/09_leave/interface/request/leave";
+
+/** importForm*/
+import FormMain from "@/modules/09_leave/components/2_Leave/formDetail/formMain.vue"; // from ซ้าย
+import FormLeave from "@/modules/09_leave/components/2_Leave/formDetail/formLeave.vue"; // ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
+import FormChildbirth from "@/modules/09_leave/components/2_Leave/formDetail/formChildbirth.vue"; // ลาไปช่วยเหลือภริยาที่คลอดบุตร
+import FormHoliday from "@/modules/09_leave/components/2_Leave/formDetail/formHoliday.vue"; //ลาพักผ่อน
+import FormUpasom from "@/modules/09_leave/components/2_Leave/formDetail/formUpasom.vue"; // ลาอุปสมบท
+import FormHajj from "@/modules/09_leave/components/2_Leave/formDetail/formHajj.vue"; //ลาประกอบพิธีฮัจย์
+import FormCheckSelect from "@/modules/09_leave/components/2_Leave/formDetail/formCheckSelect.vue"; //ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
+import FormStudy from "@/modules/09_leave/components/2_Leave/formDetail/formStudy.vue"; //ลาไปศึกษา
+import FormLeaveToTraining from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToTraining.vue"; // ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
+import FormLeaveToWorkInternational from "@/modules/09_leave/components/2_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
+import FormSpouse from "@/modules/09_leave/components/2_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
+import FormVocationalRehabilitation from "@/modules/09_leave/components/2_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
+
+/** use */
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, date2Thai } = mixin;
+const stores = useLeavelistDataStore();
+const router = useRouter();
+const route = useRoute();
+const paramsId = route.params.id.toString();
+
+const modalApprove = ref(false);
+const dialogTitleUnapprove = ref<string>("ไม่อนุมัติ");
+const dialogTitle = ref<string>("อนุมัติ");
+const closeDialog = () => {
+  modalApprove.value = false;
+};
+
+/** ฟังก์ชั่น อัปโหลด
+ * consolelog ไว้ก่อน
+ */
+const filesUpload = ref<any>(null);
+function upLoadFile() {
+  console.log("upload", filesUpload.value);
+}
+
+/** Form รายละเอียดข้อมูล*/
+const formData = reactive<FremData>({
+  id: "", //Id การยื่นขอลา
+  leaveTypeName: "", // Name ประเภทการลา
+  leaveTypeId: "", //Id ประเภทการลา
+  fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
+  dateSendLeave: new Date(), // วันที่ยืนใบลา
+  status: "", //สถานะการของลา
+  leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
+  leaveTotal: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
+  leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
+  leaveStartDate: new Date(), //*วัน เดือน ปีเริ่มต้นลา
+  leaveEndDate: new Date(), //*วัน เดือน ปีสิ้นสุดลา
+  leaveWrote: "", //เขียนที่
+  leaveAddress: "", //สถานที่ติดต่อขณะลา
+  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
+  leaveDetail: "", //รายละเอียดการลา
+  leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
+  leaveLast: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveDateTotal: 0, //จำนวนวันที่ลา(Auto)
+  leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
+  leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
+  leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
+  leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
+  wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
+  restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
+  ordainDayStatus: false, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+  ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
+  ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
+  ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
+  ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+  ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
+  ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
+  hajjDayStatus: false, //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
+  absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
+  coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
+  coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
+  coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
+  coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  step: "",
+});
+
+onMounted(() => {
+  // showLoader();
+  if (paramsId) {
+    fetchDetailLeave(paramsId);
+  }
+});
+
+/**
+ * Function fetch รายละเอียดของข้อมูล
+ * @param paramsId รับ ID จาก paramID
+ */
+function fetchDetailLeave(paramsId: string) {
+  const dataAPI = APIDATA.data;
+  const data = dataAPI.filter((e: any) => e.id === paramsId);
+  console.log(data);
+  data.map((e: any) => {
+    formData.id = e.id;
+    formData.leaveTypeName = e.leaveTypeName
+      ? e.leaveTypeName
+      : stores.convertLeave(e.leaveTypeId);
+    formData.leaveTypeId = e.leaveTypeId;
+    formData.fullname = e.fullname;
+    formData.dateSendLeave = e.dateSendLeave && date2Thai(e.dateSendLeave);
+    formData.status = e.status && e.status;
+    formData.leaveLimit = e.leaveLimit;
+    formData.leaveTotal = e.leaveTotal;
+    formData.leaveRemain = e.leaveRemain;
+    formData.leaveStartDate = e.leaveStartDate && date2Thai(e.leaveStartDate);
+    formData.leaveEndDate = e.leaveEndDate && date2Thai(e.leaveEndDate);
+    formData.status = e.status;
+    formData.leaveWrote = e.leaveWrote;
+    formData.leaveAddress = e.leaveAddress;
+    formData.leaveNumber = e.leaveNumber;
+    formData.leaveDetail = e.leaveDetail;
+    formData.leaveDocument = e.leaveDocument;
+    formData.leaveLast = e.leaveLast && date2Thai(e.leaveLast);
+    formData.leaveDateTotal = e.leaveDateTotal;
+    formData.leavebirthDate = e.leavebirthDate && date2Thai(e.leavebirthDate);
+    formData.leavegovernmentDate =
+      e.leavegovernmentDate && date2Thai(e.leavegovernmentDate);
+    formData.leaveSalary = e.leaveSalary;
+    formData.leaveSalaryText = e.leaveSalaryText;
+    formData.wifeDayName = e.wifeDayName;
+    formData.wifeDayDateBorn =
+      e.wifeDayDateBorn && date2Thai(e.wifeDayDateBorn);
+    formData.restDayOldTotal = e.restDayOldTotal;
+    formData.restDayCurrentTotal = e.restDayCurrentTotal;
+    formData.ordainDayStatus = e.ordainDayStatus;
+    formData.ordainDayLocationName = e.ordainDayLocationName;
+    formData.ordainDayLocationAddress = e.ordainDayLocationAddress;
+    formData.ordainDayLocationNumber = e.ordainDayLocationNumber;
+    formData.ordainDayOrdination =
+      e.ordainDayOrdination && date2Thai(e.ordainDayOrdination);
+    formData.ordainDayBuddhistLentName = e.ordainDayBuddhistLentName;
+    formData.ordainDayBuddhistLentAddress = e.ordainDayBuddhistLentAddress;
+    formData.hajjDayStatus = e.hajjDayStatus;
+    formData.absentDaySummon = e.absentDaySummon;
+    formData.absentDayLocation = e.absentDayLocation;
+    formData.absentDayRegistorDate =
+      e.absentDayRegistorDate && date2Thai(e.absentDayRegistorDate);
+    formData.absentDayGetIn = e.absentDayGetIn;
+    formData.absentDayAt = e.absentDayAt;
+    formData.studyDaySubject = e.studyDaySubject;
+    formData.studyDayDegreeLevel = e.studyDayDegreeLevel;
+    formData.studyDayUniversityName = e.studyDayUniversityName;
+    formData.studyDayTrainingSubject = e.studyDayTrainingSubject;
+    formData.studyDayTrainingName = e.studyDayTrainingName;
+    formData.studyDayCountry = e.studyDayCountry;
+    formData.studyDayScholarship = e.studyDayScholarship;
+    formData.coupleDayName = e.coupleDayName;
+    formData.coupleDayPosition = e.coupleDayPosition;
+    formData.coupleDayLevel = e.coupleDayLevel;
+    formData.coupleDayLevelCountry = e.coupleDayLevelCountry;
+    formData.coupleDayCountryHistory = e.coupleDayCountryHistory;
+    formData.coupleDayTotalHistory = e.coupleDayTotalHistory;
+    formData.coupleDayStartDateHistory =
+      e.coupleDayStartDateHistory && date2Thai(e.coupleDayStartDateHistory);
+    formData.coupleDayEndDateHistory =
+      e.coupleDayEndDateHistory && date2Thai(e.coupleDayEndDateHistory);
+    formData.coupleDaySumTotalHistory = e.coupleDaySumTotalHistory;
+    formData.step = e.step;
+  });
+
+  /** ส่งประเภทของการลาไป Function เช็คประเภทการลา*/
+  checkLeaveType(formData.leaveTypeId ? formData.leaveTypeId : "");
+  // hideLoader();
+}
+/**Status Form การลา*/
+const checkForm = ref<string>("");
+/**
+ * Function เช็คประเภทการลา
+ * @param type รับค่า
+ */
+function checkLeaveType(type: string) {
+  if (type === "leave1" || type === "leave2" || type === "leave3") {
+    checkForm.value = "FormLeave";
+  } else if (type === "leave4") {
+    checkForm.value = "FormChildbirth";
+  } else if (type === "leave5") {
+    checkForm.value = "FormHoliday";
+  } else if (type === "leave6") {
+    checkForm.value = "FormUpasom";
+  } else if (type === "leave7") {
+    checkForm.value = "FormHajj";
+  } else if (type === "leave8") {
+    checkForm.value = "FormCheckSelect";
+  } else if (type === "leave9") {
+    checkForm.value = "FormStudy";
+  } else if (type === "leave10") {
+    checkForm.value = "FormLeaveToTraining";
+  } else if (type === "leave11") {
+    checkForm.value = "FormLeaveToWorkInternational";
+  } else if (type === "leave12") {
+    checkForm.value = "FormSpouse";
+  } else if (type === "leave13") {
+    checkForm.value = "FormVocationalRehabilitation";
+  }
+}
+
+/** Function dialog*/
+const openModal = async (data: string) => {
+  if (data === "approve") {
+    modalApprove.value = true;
+    dialogTitle.value = "อนุมัติการยกเลิก";
+  }
+  if (data === "UnApprove") {
+    modalApprove.value = true;
+    dialogTitle.value = "ไม่อนุมัติการยกเลิก";
+  }
+};
+
+/** Function Save*/
+function clickSave() {
+  if (dialogTitle.value === "อนุมัติการยกเลิก") {
+    dialogConfirm(
+      $q,
+      () => console.log("save1"),
+      "ยืนยันการอนุมัติการยกเลิก",
+      "ต้องการยืนยันการอนุมัติการยกเลิกใช่หรือไม่ ?"
+    );
+    modalApprove.value = false;
+    console.log("Yes");
+  }
+  if (dialogTitle.value === "ไม่อนุมัติการยกเลิก") {
+    dialogConfirm(
+      $q,
+      () => console.log("save1"),
+      "ยืนยันไม่อนุมัติการยกเลิก",
+      "ต้องการยืนยันไม่อนุมัติการยกเลิกใช่หรือไม่ ?"
+    );
+    modalApprove.value = false;
+    console.log("NOT");
+  }
+}
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+      <div class="q-mr-lg">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.push(`/leave`)"
+        />
+        รายละเอียดการขอยกเลิกของ {{ formData.fullname }}
+      </div>
+      <!-- <div>
+        <q-btn
+          icon="mdi-download"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+        >
+      </div> -->
+      <q-space />
+      <!-- <q-file
+        v-model="filesUpload"
+        dense
+        label="อัพโหลดไฟล์"
+        outlined
+        class="col-xs-12 col-sm-3 col-md-2"
+        bg-color="white"
+        multiple
+        accept="application/pdf"
+      >
+        <template v-slot:prepend>
+          <q-icon name="attach_file" color="primary" />
+        </template>
+      </q-file> -->
+      <!-- <q-btn
+        v-if="filesUpload"
+        flat
+        round
+        color="primary"
+        icon="mdi-arrow-up-bold"
+        @click="upLoadFile"
+        ><q-tooltip>อัปโหลด</q-tooltip></q-btn
+      > -->
+    </div>
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm">
+    <div class="col-12 row q-py-md q-pl-md">
+      <div class="col-12 q-col-gutter-md">
+        <div class="col-xs-12 col-sm-12 row">
+          <q-card bordered class="row col-12 text-dark q-mt-sm">
+            <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+              <div class="q-pl-sm text-weight-bold text-dark">
+                รายละเอียดการขอยกเลิก
+              </div>
+            </div>
+            <q-separator />
+            <div class="row col-12 q-pa-md">
+              <div class="col-12 row bg-white q-col-gutter-md">
+                <div class="col-xs-3 row items-start">
+                  <div class="col-12 text-weight-bold text-top">เขียนที่</div>
+                  <div class="col-12 text-detail">
+                    {{ formData.leaveWrote }}
+                  </div>
+                </div>
+                <div class="col-xs-3 row items-start">
+                  <div class="col-12 text-weight-bold text-top">วันที่</div>
+                  <div class="col-12 text-detail">
+                    {{ formData.dateSendLeave }}
+                  </div>
+                </div>
+                <div class="col-xs-3 row items-start">
+                  <div class="col-12 text-weight-bold text-top">เหตุผล</div>
+                  <div class="col-12 text-detail">-</div>
+                </div>
+                <div class="col-xs-3 row items-start">
+                  <div class="col-12 text-weight-bold text-top">
+                    เอกสารประกอบ
+                  </div>
+                  <div class="col-12 text-detail">-</div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <div class="row col-12">
+          <q-card bordered class="bg-grey-1 q-pa-md col-12">
+            <div class="row q-col-gutter-md col-12">
+              <div class="col-xs-12 col-sm-5 row items-center q-my-xs">
+                <div class="col-12 row">
+                  <div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
+                  <div class="col text-primary">
+                    {{
+                      formData.leaveTypeId &&
+                      stores.convertLeave(formData.leaveTypeId)
+                    }}
+                  </div>
+                </div>
+                <div class="col-12 row">
+                  <div class="col-xs-5 col-sm-3 text-grey-8">
+                    ชื่อ - นามสกุล
+                  </div>
+                  <div class="col text-weight-medium">
+                    {{ formData.fullname }}
+                  </div>
+                </div>
+              </div>
+              <div class="col-xs-12 col-sm-7 row">
+                <div class="row col-12 q-gutter-md">
+                  <div class="col row">
+                    <q-card
+                      bordered
+                      class="col-12 items-center row q-px-md q-py-sm"
+                    >
+                      <div class="text-h6 text-weight-bold text-blue-10">
+                        {{ formData.leaveLimit }}
+                      </div>
+                      <div class="col-12 text-subtitle2 text-weight-regular">
+                        <span class="gt-xs">ได้รับ</span>
+                      </div>
+                    </q-card>
+                  </div>
+                  <div class="col">
+                    <q-card
+                      bordered
+                      class="col-12 items-center row q-px-md q-py-sm"
+                    >
+                      <div class="text-h6 text-weight-bold text-light-blue-6">
+                        {{ formData.leaveTotal }}
+                      </div>
+                      <div class="col-12 text-subtitle2 text-weight-regular">
+                        <span class="gt-xs">ใช้ไป</span>
+                      </div>
+                    </q-card>
+                  </div>
+                  <div class="col">
+                    <q-card
+                      bordered
+                      class="col-12 items-center row q-px-md q-py-sm"
+                    >
+                      <div class="text-h6 text-weight-bold text-indigo-7">
+                        {{ formData.leaveRemain }}
+                      </div>
+                      <div class="col-12 text-subtitle2 text-weight-regular">
+                        <span class="gt-xs">คงเหลือ</span>
+                      </div>
+                    </q-card>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </q-card>
+        </div>
+        <div class="row q-col-gutter-md col-12">
+          <div class="col-xs-12 col-sm-5 row">
+            <!-- card ซ้าย -->
+            <q-card flat bordered class="col-12">
+              <FormMain :data="formData" />
+            </q-card>
+          </div>
+          <div class="col-xs-12 col-sm-7 row">
+            <q-card flat bordered class="col-12">
+              <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+              <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
+
+              <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
+              <FormChildbirth
+                v-else-if="checkForm === 'FormChildbirth'"
+                :data="formData"
+              />
+
+              <!-- ลาพักผ่อน -->
+              <FormHoliday
+                v-else-if="checkForm === 'FormHoliday'"
+                :data="formData"
+              />
+
+              <!-- ลาอุปสมบท -->
+              <FormUpasom
+                v-else-if="checkForm === 'FormUpasom'"
+                :data="formData"
+              />
+
+              <!-- ลาประกอบพิธีฮัจย์ -->
+              <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
+
+              <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
+              <FormCheckSelect
+                v-else-if="checkForm === 'FormCheckSelect'"
+                :data="formData"
+              />
+
+              <!-- ลาไปศึกษา -->
+              <FormStudy
+                v-else-if="checkForm === 'FormStudy'"
+                :data="formData"
+              />
+
+              <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
+              <FormLeaveToTraining
+                v-else-if="checkForm === 'FormLeaveToTraining'"
+                :data="formData"
+              />
+
+              <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
+              <FormLeaveToWorkInternational
+                v-else-if="checkForm === 'FormLeaveToWorkInternational'"
+                :data="formData"
+              />
+
+              <!-- ลาติดตามคู่สมรส -->
+              <FormSpouse
+                v-else-if="checkForm === 'FormSpouse'"
+                :data="formData"
+              />
+
+              <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
+              <FormVocationalRehabilitation
+                v-else-if="checkForm === 'FormVocationalRehabilitation'"
+                :data="formData"
+              />
+            </q-card>
+          </div>
+          <div class="col-xs-12 col-sm-12 row">
+            <q-card
+              bordered
+              class="row col-12 text-dark q-mt-sm"
+              v-if="formData.step === 'st2' || formData.step === 'st3'"
+            >
+              <div
+                class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+              >
+                <div class="q-pl-sm text-weight-bold text-dark">
+                  ความคิดเห็นของผู้มีอำนาจ
+                </div>
+              </div>
+              <q-separator />
+              <div class="row col-12 q-pa-md">
+                <div class="col-12 row bg-white q-col-gutter-md">
+                  <div class="col-xs-6 row items-start">
+                    <div class="col-12 text-weight-bold text-top">
+                      ผลการพิจารณา
+                    </div>
+                    <div class="col-12 text-detail">อนุมัติ</div>
+                  </div>
+                  <div class="col-xs-6 row items-start">
+                    <div class="col-12 text-weight-bold text-top">
+                      ความคิดเห็น
+                    </div>
+                    <div class="col-12 text-detail">-</div>
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+        </div>
+      </div>
+    </div>
+    <q-separator />
+    <div class="row q-pa-md q-gutter-md justify-end">
+      <q-btn
+        v-if="formData.step === 'st1'"
+        unelevated
+        color="orange-5"
+        label="ไม่อนุมัติการยกเลิก"
+        @click="openModal('UnApprove')"
+        ><q-tooltip>ไม่อนุมัติการยกเลิก</q-tooltip>
+      </q-btn>
+      <q-btn
+        v-if="formData.step === 'st1'"
+        unelevated
+        color="primary"
+        label="อนุมัติการยกเลิก"
+        @click="openModal('approve')"
+        ><q-tooltip>อนุมัติการยกเลิก</q-tooltip>
+      </q-btn>
+    </div>
+  </q-card>
+  <DialogReason
+    :modal="modalApprove"
+    :title="dialogTitle"
+    :click-close="closeDialog"
+    label="เหตุผล"
+    :savaForm="clickSave"
+  />
+</template>
+
+<style lang="scss" scoped>
+.font-size {
+  font-size: 1.2rem;
+}
+</style>
diff --git a/src/modules/09_leave/components/2_Leave/Tab1.vue b/src/modules/09_leave/components/2_Leave/Tab1.vue
new file mode 100644
index 000000000..e28b3c0dd
--- /dev/null
+++ b/src/modules/09_leave/components/2_Leave/Tab1.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+
+/**importType*/
+import type {
+  QuerySting,
+  DateFilter,
+} from "@/modules/09_leave/interface/request/leave";
+
+import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
+import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
+import CalendarView from "@/modules/09_leave/components/2_Leave/Calendar.vue";
+
+/**importStroe*/
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
+
+const leaveStore = useLeavelistDataStore();
+const APIDATA = useLeavelistDataStoreTest();
+const { fetchListLeave } = leaveStore;
+
+//** เรียกข้อมูลจาก API*/
+function fecthLeaveList() {
+  const data = APIDATA.data;
+  maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  fetchListLeave(data); /** ส่งข้อมูลไป stores*/
+}
+
+//
+const querySting = reactive<QuerySting>({
+  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
+  status: "ALL", //*สถานะการของลา
+  page: 1, //*หน้า
+  pageSize: 5, //*จำนวนแถวต่อหน้า
+  keyword: "", //keyword ค้นหา
+});
+const maxPage = ref<number>(1);
+
+/**
+ *
+ * @param newPage หน้า
+ * @param pageSize จำนวนต่อแถว
+ * @param dateFilter ข้อมูลค้นหา
+ */
+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);
+}
+
+onMounted(async () => {
+  await fecthLeaveList();
+});
+</script>
+<template>
+  <q-toolbar class="text-primary" style="padding: 0">
+    <q-space />
+    <q-btn
+      name="list"
+      round
+      size="12px"
+      flat
+      icon="mdi-format-list-bulleted"
+      @click="leaveStore.tabView = 'list'"
+      :color="leaveStore.tabView == 'list' ? 'primary' : 'grey-6'"
+      class="q-ml-sm"
+    >
+      <q-tooltip>รายการ</q-tooltip>
+    </q-btn>
+    <q-separator vertical inset />
+    <q-tabs
+      v-model="leaveStore.tabView"
+      indicator-color="transparent"
+      align="left"
+      active-color="activetab"
+      class="text-nativetab"
+      inline-label
+      dense
+    >
+      <q-btn
+        name="calendar"
+        round
+        size="12px"
+        flat
+        icon="mdi-calendar-month"
+        @click="leaveStore.tabView = 'calendar'"
+        :color="leaveStore.tabView == 'calendar' ? 'primary' : 'grey-6'"
+        class="q-mr-sm"
+      >
+        <q-tooltip>ปฏิทิน</q-tooltip>
+      </q-btn>
+    </q-tabs>
+  </q-toolbar>
+  <div v-if="leaveStore.tabView === 'list'">
+    <ToolBar @update:querySting="updatePaging" />
+    <TableList
+      :page="querySting.page"
+      :rowsPerPage="querySting.pageSize"
+      :maxPage="maxPage"
+      @update:querySting="updatePaging"
+    />
+  </div>
+  <div v-if="leaveStore.tabView === 'calendar'"><CalendarView /></div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/components/2_Leave/Tab2.vue b/src/modules/09_leave/components/2_Leave/Tab2.vue
new file mode 100644
index 000000000..0cd0fdcb7
--- /dev/null
+++ b/src/modules/09_leave/components/2_Leave/Tab2.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+
+/**importType*/
+import type {
+  QuerySting,
+  DateFilter,
+} from "@/modules/09_leave/interface/request/leave";
+
+import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
+import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBarLeave.vue";
+
+/**importStroe*/
+import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
+import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
+
+const leaveStore = useLeavelistDataStore();
+const APIDATA = useLeavelistDataStoreTest();
+const { fetchListLeaveReject } = leaveStore;
+
+const querySting = reactive<QuerySting>({
+  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
+  status: "ALL", //*สถานะการของลา
+  page: 1, //*หน้า
+  pageSize: 5, //*จำนวนแถวต่อหน้า
+  keyword: "", //keyword ค้นหา
+});
+const maxPage = ref<number>(1);
+
+//** เรียกข้อมูลจาก API*/
+function fecthLeaveList() {
+  const data = APIDATA.data;
+  maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  fetchListLeaveReject(data); /** ส่งข้อมูลไป stores*/
+}
+
+/**
+ *
+ * @param newPage หน้า
+ * @param pageSize จำนวนต่อแถว
+ * @param dateFilter ข้อมูลค้นหา
+ */
+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);
+}
+
+onMounted(async () => {
+  await fecthLeaveList();
+});
+</script>
+<template>
+  <ToolBar />
+  <TableList
+    :page="querySting.page"
+    :rowsPerPage="querySting.pageSize"
+    :maxPage="maxPage"
+    @update:querySting="updatePaging"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/09_leave/components/2_Leave/TableList.vue b/src/modules/09_leave/components/2_Leave/TableList.vue
index 56eaf4e88..eefba63b8 100644
--- a/src/modules/09_leave/components/2_Leave/TableList.vue
+++ b/src/modules/09_leave/components/2_Leave/TableList.vue
@@ -15,8 +15,8 @@ const router = useRouter();
 // const { date2Thai } = mixin;
 // const { optionYear, searchDataFn, filterOption } = leaveStore;
 
-/** ข้อมูลหัวตาราง  */
-const columns = ref<QTableProps["columns"]>([
+/** ข้อมูลหัวตาราง รายการลา */
+const columnsLeave = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
@@ -63,7 +63,62 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-const visibleColumns = ref<string[]>([
+const visibleColumnsLeave = ref<string[]>([
+  "no",
+  "leaveTypeName",
+  "fullname",
+  "dateSendLeave",
+  "status",
+]);
+
+const columnsReject = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveTypeName",
+    align: "left",
+    label: "ประเภทการลา",
+    sortable: true,
+    field: "leaveTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ผู้ยื่นยกเลิกใบลา",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateSendLeave",
+    align: "left",
+    label: "วันที่ขอยกเลิก",
+    sortable: true,
+    field: "dateSendLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleReject = ref<string[]>([
   "no",
   "leaveTypeName",
   "fullname",
@@ -103,6 +158,10 @@ const pagination = ref({
   page: props.page,
   rowsPerPage: props.rowsPerPage,
 });
+function redirectToDetail(id: string) {
+  const routePrefix = leaveStore.tabMenu === "1" ? "/leave" : "/leave-reject";
+  router.push(`${routePrefix}/detail/${id}`);
+}
 
 watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
   // updateProp(pagination.value, currentPage.value);
@@ -113,14 +172,21 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
 
 /** Hook*/
 onMounted(() => {
-  leaveStore.visibleColumns = visibleColumns.value;
+  console.log(leaveStore.tabMenu);
+  if (leaveStore.tabMenu === "1") {
+    leaveStore.visibleColumns = visibleColumnsLeave.value;
+    leaveStore.columns = columnsLeave.value;
+  } else if (leaveStore.tabMenu === "2") {
+    leaveStore.visibleColumns = visibleReject.value;
+    leaveStore.columns = columnsReject.value;
+  }
 });
 </script>
 
 <template>
   <d-table
     ref="table"
-    :columns="columns"
+    :columns="leaveStore.columns"
     :rows="leaveStore.rows"
     row-key="id"
     flat
@@ -144,7 +210,7 @@ onMounted(() => {
           v-for="col in props.cols"
           :key="col.name"
           :props="props"
-          @click.prevent="router.push(`/leave/detail/${props.row.id}`)"
+          @click.prevent="redirectToDetail(props.row.id)"
         >
           <div v-if="col.name == 'no'">
             {{ props.rowIndex + 1 }}
diff --git a/src/modules/09_leave/components/2_Leave/ToolBar.vue b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
similarity index 91%
rename from src/modules/09_leave/components/2_Leave/ToolBar.vue
rename to src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
index c8cc60529..e31d93812 100644
--- a/src/modules/09_leave/components/2_Leave/ToolBar.vue
+++ b/src/modules/09_leave/components/2_Leave/ToolBarLeave.vue
@@ -80,8 +80,28 @@ const optionStatus = ref<DataOption[]>([
     name: "ไม่อนุมัติ",
   },
 ]);
+const optionStatus2 = ref<DataOption[]>([
+  {
+    id: "ALL",
+    name: "ทั้งหมด",
+  },
+  {
+    id: "NEW",
+    name: "ขอยกเลิก",
+  },
+  {
+    id: "PENDING ",
+    name: "อนุมัติ",
+  },
+  {
+    id: "APPROVE ",
+    name: "ไม่อนุมัติ",
+  },
+]);
 const optionTypeMain = ref<DataOption[]>(optionType.value);
-const optionStatusMain = ref<DataOption[]>(optionStatus.value);
+const optionStatusMain = ref<DataOption[]>(
+  leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value
+);
 
 async function fetchOption() {
   console.log("loadOption  รอ API");
@@ -110,6 +130,8 @@ function filterOption(val: string, update: any, name: string) {
 
 onMounted(async () => {
   await fetchOption();
+  // optionTypeMain.value =
+  //   leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value;
 });
 </script>
 
diff --git a/src/modules/09_leave/interface/request/leave.ts b/src/modules/09_leave/interface/request/leave.ts
index 63d377e26..af6dc6aeb 100644
--- a/src/modules/09_leave/interface/request/leave.ts
+++ b/src/modules/09_leave/interface/request/leave.ts
@@ -76,6 +76,7 @@ interface FremData {
   coupleDayStartDateHistory: Date | null; //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
   coupleDayEndDateHistory: Date | null; //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
   coupleDaySumTotalHistory: string; //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  step: string;
 }
 
 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 9be01be87..5fab72ba5 100644
--- a/src/modules/09_leave/interface/response/leave.ts
+++ b/src/modules/09_leave/interface/response/leave.ts
@@ -13,4 +13,10 @@ interface FormData {
   Date: string;
   status: string;
 }
-export type { DataRows, FormData };
+
+interface DataDateMonthObject {
+  month: number;
+  year: number;
+}
+
+export type { DataRows, FormData, DataDateMonthObject };
diff --git a/src/modules/09_leave/router.ts b/src/modules/09_leave/router.ts
index cc60e32ab..9724f3d98 100644
--- a/src/modules/09_leave/router.ts
+++ b/src/modules/09_leave/router.ts
@@ -2,7 +2,9 @@ const workMain = () => import("@/modules/09_leave/views/WorkingMain.vue");
 const leaveMain = () => import("@/modules/09_leave/views/LeaveListMain.vue");
 const reportMain = () => import("@/modules/09_leave/views/ReportMain.vue");
 const leaveDetail = () =>
-  import("@/modules//09_leave/components/2_Leave/DetailLeave.vue");
+  import("@/modules/09_leave/components/2_Leave/DetailLeave.vue");
+const leaveDetailReject = () =>
+  import("@/modules/09_leave/components/2_Leave/DetailLeaveReject.vue");
 const RoundMain = () => import("@/modules/09_leave/views/RoundMain.vue");
 const ChangeRoundMain = () =>
   import("@/modules/09_leave/views/ChangeRoundMain.vue");
@@ -61,8 +63,8 @@ export default [
     },
   },
   {
-    path: "/leave-list",
-    name: "/leave-list",
+    path: "/leave",
+    name: "/leave",
     component: leaveMain,
     meta: {
       Auth: true,
@@ -80,6 +82,16 @@ export default [
       Role: "coin",
     },
   },
+  {
+    path: "/leave-reject/detail/:id",
+    name: "/leave-reject/detail",
+    component: leaveDetailReject,
+    meta: {
+      Auth: true,
+      Key: [9],
+      Role: "coin",
+    },
+  },
   {
     path: "/statistics-report",
     name: "/statistics-report",
diff --git a/src/modules/09_leave/stores/LeaveStore.ts b/src/modules/09_leave/stores/LeaveStore.ts
index 7c131f81d..ffe550a48 100644
--- a/src/modules/09_leave/stores/LeaveStore.ts
+++ b/src/modules/09_leave/stores/LeaveStore.ts
@@ -11,6 +11,12 @@ const mixin = useCounterMixin();
 const { date2Thai, showLoader, hideLoader } = mixin;
 
 export const useLeavelistDataStore = defineStore("leave", () => {
+  /** ข้อมูล Main*/
+  const tabMenu = ref<string>("1");
+
+  /** ข้อมูล Tab 1*/
+  const tabView = ref<string>("list");
+
   /**ข้อมูลใน Table*/
   const mainData = ref<any>([]);
   const rows = ref<DataRows[]>([]);
@@ -18,10 +24,10 @@ export const useLeavelistDataStore = defineStore("leave", () => {
   const visibleColumns = ref<string[]>([]);
 
   /**
-   * ฟังก์ชั่น fetchList
+   * ฟังก์ชั่น fetchListLeave
    * @param data รับข้อมูลจาก Page
    */
-  async function fetchList(data: any[]) {
+  async function fetchListLeave(data: any[]) {
     let datalist = data.map((e: FremData) => ({
       id: e.id,
       leaveTypeName: e.leaveTypeId && convertLeave(e.leaveTypeId),
@@ -30,7 +36,25 @@ export const useLeavelistDataStore = defineStore("leave", () => {
       dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
       status: convertSatatus(e.status),
     }));
-    console.log(datalist);
+
+    mainData.value = datalist;
+    rows.value = mainData.value;
+  }
+
+  /**
+   * ฟังก์ชั่น fetchListLeave
+   * @param data รับข้อมูลจาก Page
+   */
+  async function fetchListLeaveReject(data: any[]) {
+    let datalist = data.map((e: FremData) => ({
+      id: e.id,
+      leaveTypeName: e.leaveTypeId && convertLeave(e.leaveTypeId),
+      leaveTypeId: e.leaveTypeId,
+      fullname: e.fullname,
+      dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
+      status: convertSatatus2(e.status),
+    }));
+
     mainData.value = datalist;
     rows.value = mainData.value;
   }
@@ -52,6 +76,21 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     }
   }
 
+  /**
+   * ฟังก์ชั่นแปลงสถานะ
+   * @param val ค่าสถานะ
+   */
+  function convertSatatus2(val: string) {
+    switch (val) {
+      case "NEW":
+        return "ขอยกเลิก";
+      case "PENDING":
+        return "อนุมัติ";
+      case "APPROVE":
+        return "อนุมัติ";
+    }
+  }
+
   /**
    * ฟังก์ชั่นแปลงประเภทการลา
    * @param val ค่าประเภทของกาลา
@@ -103,12 +142,18 @@ export const useLeavelistDataStore = defineStore("leave", () => {
   }
 
   return {
+    /** ข้อมูล Main*/
+    tabMenu,
+    /** ข้อมูล Tab1*/
+    tabView,
     /**ข้อมูลใน Table */
     rows,
-    fetchList,
+    fetchListLeave,
     columns,
     visibleColumns,
 
+    fetchListLeaveReject,
+
     /** Function แปลงค่า */
     convertLeave,
     convertLeaveDaytype,
diff --git a/src/modules/09_leave/stores/ListLeave.ts b/src/modules/09_leave/stores/ListLeave.ts
index 99a180fb3..2c68fb334 100644
--- a/src/modules/09_leave/stores/ListLeave.ts
+++ b/src/modules/09_leave/stores/ListLeave.ts
@@ -59,6 +59,7 @@ export const useLeavelistDataStoreTest = defineStore("listleavetest", () => {
       coupleDayEndDateHistory: new Date("2022-11-06"),
       coupleDaySumTotalHistory:
         "ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)",
+      step: "st1",
     },
     {
       id: "1",
@@ -117,6 +118,7 @@ export const useLeavelistDataStoreTest = defineStore("listleavetest", () => {
       coupleDayEndDateHistory: new Date("2022-11-06"),
       coupleDaySumTotalHistory:
         "ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)",
+      step: "st2",
     },
     {
       id: "2",
@@ -175,6 +177,7 @@ export const useLeavelistDataStoreTest = defineStore("listleavetest", () => {
       coupleDayEndDateHistory: new Date("2022-11-06"),
       coupleDaySumTotalHistory:
         "ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)",
+      step: "st3",
     },
     {
       id: "3",
@@ -233,6 +236,7 @@ export const useLeavelistDataStoreTest = defineStore("listleavetest", () => {
       coupleDayEndDateHistory: new Date("2022-11-06"),
       coupleDaySumTotalHistory:
         "ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)",
+      step: "st4",
     },
     {
       id: "4",
@@ -291,6 +295,7 @@ export const useLeavelistDataStoreTest = defineStore("listleavetest", () => {
       coupleDayEndDateHistory: new Date("2022-11-06"),
       coupleDaySumTotalHistory:
         "ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)",
+      step: "st5",
     },
     {
       id: "5",
diff --git a/src/modules/09_leave/views/LeaveListMain.vue b/src/modules/09_leave/views/LeaveListMain.vue
index 8a5470b6e..e90c50397 100644
--- a/src/modules/09_leave/views/LeaveListMain.vue
+++ b/src/modules/09_leave/views/LeaveListMain.vue
@@ -1,72 +1,43 @@
 <script setup lang="ts">
-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*/
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
-import { useLeavelistDataStoreTest } from "@/modules/09_leave/stores/ListLeave";
 
 /**importComponets*/
-import TableList from "@/modules/09_leave/components/2_Leave/TableList.vue";
-import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";
+import Tab1 from "@/modules/09_leave/components/2_Leave/Tab1.vue";
+import Tab2 from "@/modules/09_leave/components/2_Leave/Tab2.vue";
 
 const leaveStore = useLeavelistDataStore();
-const APIDATA = useLeavelistDataStoreTest();
-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();
-});
 </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 @update:querySting="updatePaging" />
+      <q-tabs
+        v-model="leaveStore.tabMenu"
+        dense
+        align="left"
+        inline-label
+        class="rounded-borders"
+        indicator-color="primary"
+        active-bg-color="teal-1"
+        active-class="text-primary"
+      >
+        <q-tab name="1" label="รายการใบลา" />
+        <q-tab name="2" label="รายการยกเลิกใบลา" />
+      </q-tabs>
+      <q-separator />
+      <q-tab-panels v-model="leaveStore.tabMenu" animated>
+        <q-tab-panel name="1"> <Tab1 /> </q-tab-panel>
+
+        <q-tab-panel name="2"> <Tab2 /> </q-tab-panel>
+      </q-tab-panels>
+      <!-- <ToolBar @update:querySting="updatePaging" />
       <TableList
         :page="querySting.page"
         :rowsPerPage="querySting.pageSize"
         :maxPage="maxPage"
         @update:querySting="updatePaging"
-      />
+      /> -->
     </q-card>
   </div>
 </template>
diff --git a/src/modules/09_leave/views/WorkingMain.vue b/src/modules/09_leave/views/WorkingMain.vue
index 329a52f2e..6fc5e6092 100644
--- a/src/modules/09_leave/views/WorkingMain.vue
+++ b/src/modules/09_leave/views/WorkingMain.vue
@@ -41,7 +41,7 @@ const tab = ref("1");
 
       <q-separator />
 
-      <q-tab-panels v-model="tab" animated>
+      <q-tab-panels v-model="tab" animated >
         <q-tab-panel name="1">
           <!-- <TableList1 /> -->
           <!-- <ToolBar /> -->