From da5dd5095c58fccc92342a2a9e30964e926a786c Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 7 Dec 2023 14:25:13 +0700
Subject: [PATCH] =?UTF-8?q?API=20=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/leave/api.leave.ts                    |   2 +-
 src/modules/05_leave/componenst/Calendar.vue  | 743 ++++++++++--------
 .../05_leave/componenst/DialogDetail.vue      | 501 ++++++++++++
 .../05_leave/componenst/ListCalendar.vue      | 220 +++---
 src/modules/05_leave/componenst/Table.vue     |  86 +-
 .../componenst/formDetail/formCheckSelect.vue |  81 ++
 .../componenst/formDetail/formChildbirth.vue  |  75 ++
 .../componenst/formDetail/formHajj.vue        |  68 ++
 .../componenst/formDetail/formHoliday.vue     |  80 ++
 .../componenst/formDetail/formLeave.vue       |  78 ++
 .../formDetail/formLeaveToTraining.vue        |  97 +++
 .../formLeaveToWorkInternational.vue          |  53 ++
 .../componenst/formDetail/formMain.vue        |  45 ++
 .../componenst/formDetail/formSpouse.vue      | 104 +++
 .../componenst/formDetail/formStudy.vue       | 102 +++
 .../componenst/formDetail/formUpasom.vue      |  93 +++
 .../formVocationalRehabilitation.vue          |  53 ++
 .../05_leave/interface/response/leave.ts      |  94 ++-
 src/modules/05_leave/store.ts                 |  28 +-
 src/modules/05_leave/views/Main.vue           |  28 +-
 20 files changed, 2105 insertions(+), 526 deletions(-)
 create mode 100644 src/modules/05_leave/componenst/DialogDetail.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formCheckSelect.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formChildbirth.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formHajj.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formHoliday.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formLeave.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formMain.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formSpouse.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formStudy.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formUpasom.vue
 create mode 100644 src/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue

diff --git a/src/api/leave/api.leave.ts b/src/api/leave/api.leave.ts
index 14d58cf..4234def 100644
--- a/src/api/leave/api.leave.ts
+++ b/src/api/leave/api.leave.ts
@@ -16,7 +16,7 @@ export default {
 	leaveType: () => `${leave}/type`,
 	leaveCalendar: () => `${leave}/user/calendar`,
 	leaveTableList: () => `${leave}/user/table`,
-	leaveCanceById: (id: string) => `${leave}/user/delete/${id}`,
+	leaveCancelById: (id: string) => `${leave}/user/delete/${id}`,
 	leaveStats: () => `${leave}/user/summary`,
 	leaveUser: () => `${leave}/user`,
 	leaveUserId: (id: string) => `${leave}/user/${id}`,
diff --git a/src/modules/05_leave/componenst/Calendar.vue b/src/modules/05_leave/componenst/Calendar.vue
index 9a0df6c..951384e 100644
--- a/src/modules/05_leave/componenst/Calendar.vue
+++ b/src/modules/05_leave/componenst/Calendar.vue
@@ -1,171 +1,200 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import http from "@/plugins/http"
-import config from "@/app.config"
+import { ref, reactive, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+import keycloak from "@/plugins/keycloak";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /**import calendar*/
-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 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"
-import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"
+import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
 
-const mixin = useCounterMixin()
-const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } = mixin
+import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
+// import FormMain from "@/modules/05_leave/componenst/formDetail/formMain.vue";
+import FormLeave from "@/modules/05_leave/componenst/formDetail/formLeave.vue";
+import FormChildbirth from "@/modules/05_leave/componenst/formDetail/formChildbirth.vue";
+import FormHoliday from "@/modules/05_leave/componenst/formDetail/formHoliday.vue";
+import FormUpasom from "@/modules/05_leave/componenst/formDetail/formUpasom.vue";
+import FormHajj from "@/modules/05_leave/componenst/formDetail/formHajj.vue";
+import FormCheckSelect from "@/modules/05_leave/componenst/formDetail/formCheckSelect.vue";
+import FormStudy from "@/modules/05_leave/componenst/formDetail/formStudy.vue";
+import FormLeaveToTraining from "@/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue";
+import FormLeaveToWorkInternational from "@/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue";
+import FormSpouse from "@/modules/05_leave/componenst/formDetail/formSpouse.vue";
+import FormVocationalRehabilitation from "@/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue";
 
-const $q = useQuasar()
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
+  mixin;
+
+const $q = useQuasar();
+
+const emit = defineEmits(["update:dateYear"]);
 
 /**
  * ตัวแปรทั้งหมด
  */
-const typeId = ref<string>("eefa2f4f-c507-4a42-8567-4fadb8dc1f50")
-const modalCancel = ref<boolean>(false)
-const title = ref<string>("")
-const location = ref<string>("บ้าน")
-const subject = ref<string>("ลาป่วย")
-const dateStart = ref<string>("20 ส.ค. 2566")
-const dateEnd = ref<string>("21 ส.ค. 2566")
-const numDate = ref<string>("20")
-const place = ref<string>("บ้าน")
-const phone = ref<string>("000-00000000")
-const reason = ref<string>("ยกเลิกการลา")
-const model = ref(null)
-const modeCancel = ref<boolean>(true)
 
-const dateYear = ref<number>(new Date().getFullYear())
+const fullName = ref<string>("");
+const mainData = ref<any>([]);
 
-async function fetchDataCalendar() {
-	showLoader
-	await http
-		.post(config.API.leaveCalendar(), { year: dateYear.value })
-		.then(res => {
-			console.log(res)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
-
-async function fetchDataDetail() {
-	showLoader
-	await http
-		.get(config.API.leaveUserId(typeId.value), {})
-		.then(res => {
-			let data = res.data.result
-			title.value = data.fullname
-			location.value = data.leaveWrote
-			console.log(res)
-		})
-		.catch(err => {
-			messageError($q, err)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
+const modalCancel = ref<boolean>(false);
+const modeCancel = ref<boolean>(true);
+const title = ref<string>("");
 
 /**
  * Option ของปฏิทิน
  */
-const fullCalendar = ref<any>() //ref calendar
+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: "2",
-			title: "ลาป่วย",
-			start: "2023-11-24",
-			end: "2023-11-25",
-			allDay: true,
-			color: "#4CAF4F",
-			textColor: "white",
-		},
-		{
-			groupId: "4",
-			title: "ลากิจ",
-			start: "2023-11-15",
-			allDay: true,
-			color: "#4CAF4F",
-			textColor: "white",
-		},
-		{
-			groupId: "4",
-			title: "นางสาวสมศรี ใจดี (ลากิจ)",
-			start: "2023-11-21",
-			end: "2023-11-23",
-			allDay: true,
-			color: "#ddd",
-		},
-		{
-			groupId: "4",
-			title: "นายสมชาย สุขใจ",
-			start: "2023-11-21",
-			allDay: true,
-			color: "#ddd",
-		},
-	],
-})
+  plugins: [
+    dayGridPlugin,
+    timeGridPlugin,
+    interactionPlugin, // needed for dateClick
+    listPlugin,
+  ],
+  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: "#4CAF4F",
+  eventTextColor: "#fff",
+  eventBorderColor: "#50a5fc",
+  displayEventTime: false,
+  editable: true,
+  events: [
+    {
+      groupId: "2",
+      title: "ลาป่วย",
+      start: "2023-11-24",
+      end: "2023-11-25",
+
+      color: "#4CAF4F",
+      textColor: "white",
+    },
+    {
+      groupId: "4",
+      title: "ลากิจ",
+      start: "2023-11-15",
+      allDay: true,
+      color: "#4CAF4F",
+      textColor: "white",
+    },
+    {
+      groupId: "4",
+      title: "นางสาวสมศรี ใจดี (ลากิจ)",
+      start: "2023-11-21",
+      end: "2023-11-23",
+      allDay: true,
+      color: "#ddd",
+    },
+    {
+      groupId: "4",
+      title: "นายสมชาย สุขใจ",
+      start: "2023-11-21",
+      allDay: true,
+      color: "#ddd",
+    },
+  ],
+});
 
 const dateMonth = ref<DataDateMonthObject>({
-	month: new Date().getMonth(),
-	year: new Date().getFullYear(),
-})
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+});
 
-const emit = defineEmits(["update:dateYear"])
+async function fetchDataCalendar() {
+  showLoader;
+  await http
+    .post(config.API.leaveCalendar(), {
+      year: dateMonth.value.year,
+    })
+    .then((res) => {
+      console.log(res);
+      mainData.value = res.data.result;
+
+      const double_name = [
+        ...new Set(mainData.value.map((item: any) => item.fullName)),
+      ];
+
+      for (let i = 1; i <= double_name.length; i++) {
+        filterLists.value = [];
+        const name = double_name[i - 1];
+        const filterName = {
+          id: name,
+          name: name,
+          color: name === "นางสาวสาวิตรี ศรีสมัย" ? "green" : "grey",
+        };
+        filterLists.value.push(filterName);
+      }
+
+      const data = mainData.value.filter(
+        (e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย"
+      );
+      console.log(data);
+
+      const event = data.map((e: any) => ({
+        id: e.id,
+        title: e.leaveTypeName,
+        start: e.leaveStartDate,
+        end: e.leaveEndDate,
+        allDay: true,
+      }));
+      calendarOptions.value.events = event;
+    })
+
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+const leaveType = ref<any>();
+async function fectOptionType() {
+  await http
+    .get(config.API.leaveType())
+    .then(async (res) => {
+      leaveType.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**Status Form การลา*/
 
 /**
  * แปลง ปีและเดือนเป็นภาษาไทย
  * @param val datepicker แบบเลือกปีและเดือน
  */
 function monthYearThai(val: DataDateMonthObject) {
-	if (val == null) return ""
-	else return monthYear2Thai(val.month, val.year)
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
 }
 
-function updateMonth(e: DataDateMonthObject) {
-	// console.log(dateMonth.value);
-	if (e != null) {
-		dateYear.value = e.year
-		emit("update:dateYear", e.year)
-		const calen = fullCalendar.value.getApi()
-		const date = new Date(dateMonth.value.year, dateMonth.value.month)
-		calen.gotoDate(date)
-	}
+async function updateMonth() {
+  await fetchDataCalendar();
+  const calen = fullCalendar.value.getApi();
+  const date = new Date(dateMonth.value.year, dateMonth.value.month);
+  calen.gotoDate(date);
 }
 
 /**
@@ -173,116 +202,187 @@ function updateMonth(e: DataDateMonthObject) {
  * @param text
  */
 async function cancel(text: string) {
-	title.value = text
-	modalCancel.value = true
-	modeCancel.value = true
+  title.value = text;
+  modalCancel.value = true;
+  modeCancel.value = true;
 }
+
+const modal = ref<boolean>(false);
+const leaveId = ref<string>("");
 /**
  * ฟังก์ชั่นเปิด model
- * @param text
+ * @param id
  */
-async function view(text: string) {
-	title.value = text
-	modalCancel.value = true
-	modeCancel.value = false
+async function onCilckview(id: string) {
+  modal.value = true;
+  leaveId.value = id;
+}
+
+async function onClickClose() {
+  modal.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 filterLists = ref<any[]>([]);
+const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]);
+
+watch(
+  () => filterVal.value,
+  () => {
+    const eventData = filterVal.value.map((item: any) => {
+      return mainData.value
+        .filter((e: any) => e.fullName === item)
+        .map((e: any) => ({
+          id: e.id,
+          title: e.leaveTypeName,
+          start: e.leaveStartDate,
+          end: e.leaveEndDate,
+          allDay: true,
+        }));
+    });
+    calendarOptions.value.events = eventData[0];
+  }
+);
 
 onMounted(async () => {
-	// await fetchDataCalendar();
-	// await fetchDataDetail()
-})
+  if (keycloak.tokenParsed != null) {
+    fullName.value = keycloak.tokenParsed.name;
+  }
+  console.log(fullName.value);
+
+  await fetchDataCalendar();
+  await fectOptionType();
+});
 </script>
 
 <template>
-	<div class="row">
-		<!-- Filter ตามคนและประเภทการลา -->
-		<div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm">
-			<q-card class="col-12">
-				<div class="q-gutter-sm">
-					<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>
-				</div>
+  <div class="row">
+    <!-- Filter ตามคนและประเภทการลา -->
+    <div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm">
+      <q-card class="col-12">
+        <div class="q-gutter-sm">
+          <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>
+        </div>
 
-				<!-- show value filterVal -->
-				<!-- <div class="q-px-sm q-mt-sm">
+        <!-- show value filterVal -->
+        <!-- <div class="q-px-sm q-mt-sm">
                 Your selection is: <strong>{{ filterVal }}</strong>
               </div> -->
-			</q-card>
-		</div>
+      </q-card>
+    </div>
 
-		<div class="col-sm-12 col-md-9">
-			<div class="q-mt-sm">
-				<div class="row col-12 q-gutter-sm">
-					<div class="demo-app-main">
-						<q-card bordered flat class="q-pa-sm col-12 row bg-grey-1 shadow-0">
-							<div class="items-center col-12 row q-col-gutter-sm">
-								<!-- filter เลือกเดือนปี -->
-								<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 bg-color="white" 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-card>
+    <div class="col-sm-12 col-md-9">
+      <div class="q-mt-sm">
+        <div class="row col-12 q-gutter-sm">
+          <div class="demo-app-main">
+            <q-card bordered flat class="q-pa-sm col-12 row bg-grey-1 shadow-0">
+              <div class="items-center col-12 row q-col-gutter-sm">
+                <!-- filter เลือกเดือนปี -->
+                <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
+                      bg-color="white"
+                      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-card>
 
-						<div class="main-content">
-							<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>
-					</div>
-				</div>
-				<div class="row q-col-gutter-lg justify-end">
-					<div class="items-center row">
-						<q-icon size="10px" color="green-7" 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="grey-6" name="mdi-circle" class="q-mr-sm" />
-						<span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
-					</div>
-					<!-- <div class="items-center row">
+            <div class="main-content">
+              <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="onCilckview(arg.event.id)"
+                    >
+                      {{ 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>
+          </div>
+        </div>
+        <div class="row q-col-gutter-lg justify-end">
+          <div class="items-center row">
+            <q-icon
+              size="10px"
+              color="green-7"
+              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="grey-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>
@@ -290,90 +390,51 @@ onMounted(async () => {
 				<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>
+    </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>
+  <DialogDetail
+    :modal="modal"
+    :leaveId="leaveId"
+    :onClickClose="onClickClose"
+    :leaveType="leaveType"
+  />
 </template>
 
 <style scope lang="scss">
 .main-content {
-	height: 70vh;
+  height: 70vh;
 }
 
 .padding-content {
-	padding: 10px;
+  padding: 10px;
 }
 
 .demo-app-main {
-	flex-grow: 1;
-	/* padding: 3em; */
+  flex-grow: 1;
+  /* padding: 3em; */
 }
 
 .fc {
-	/* the calendar root */
-	max-width: 1100px;
-	margin: 0 auto;
-	background-color: white;
-	border-radius: 10px;
+  /* the calendar root */
+  max-width: 1100px;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 10px;
 }
 
 .fc-day-today {
-	background-color: #f8f8f8 !important;
+  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%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* border: 2px solid #17a259; */
+  /* border-radius: 50%;
   height: 25px;
   width: 25px;
   font-weight: bold;
@@ -382,123 +443,123 @@ onMounted(async () => {
 }
 
 .fc-day-today .fc-daygrid-day-frame {
-	padding: 5%;
+  padding: 5%;
 }
 
 .fc .fc-button-group > .fc-button {
-	color: black;
-	background-color: #fafafa;
-	border: none;
+  color: black;
+  background-color: #fafafa;
+  border: none;
 }
 
 .fc .fc-button-group > .fc-button:active {
-	color: white;
-	background-color: #22a15e;
-	border: none;
+  color: white;
+  background-color: #22a15e;
+  border: none;
 }
 
 .fc .fc-button-group > .fc-button.fc-button-active {
-	color: white;
-	background-color: #22a15e;
-	border: none;
+  color: white;
+  background-color: #22a15e;
+  border: none;
 }
 
 .fc-header-toolbar {
-	background-color: white;
-	padding: 0px 10px 0px 10px;
-	border-radius: 10px 10px 0px 0px;
+  background-color: white;
+  padding: 0px 10px 0px 10px;
+  border-radius: 10px 10px 0px 0px;
 }
 
 .fc .fc-scrollgrid-liquid > thead {
-	background-color: white;
+  background-color: white;
 }
 
 .dp-custom-cell {
-	border-radius: 50%;
+  border-radius: 50%;
 }
 
 .dp__today {
-	border: 1px solid var(--q-primary);
+  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);
+  background: var(--q-primary);
+  color: var(--dp-primary-text-color);
 }
 
 .datepicker .q-field__label {
-	padding-left: 5px;
+  padding-left: 5px;
 }
 
 .datepicker .q-field__messages {
-	padding-left: 20px;
+  padding-left: 20px;
 }
 
 .datepicker .q-field__native {
-	padding-left: 5px;
-	color: var(--q-primary) !important;
+  padding-left: 5px;
+  color: var(--q-primary) !important;
 }
 
 .datepicker .q-field__prepend {
-	padding-left: 6px;
+  padding-left: 6px;
 }
 
 .datepicker .q-field__append {
-	padding-right: 6px;
+  padding-right: 6px;
 }
 
 .datepicker .q-field__after {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	font-weight: 500;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
 }
 
 .fc .fc-popover {
-	z-index: 6000;
+  z-index: 6000;
 }
 
 .fc-direction-ltr .fc-daygrid-event.fc-event-end,
 .fc-direction-rtl .fc-daygrid-event.fc-event-start {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .subName {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	font-weight: 500;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
 }
 
 .subInput {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .fc-event {
-	overflow: hidden;
-	border-color: transparent !important;
-	font-weight: 500;
+  overflow: hidden;
+  border-color: transparent !important;
+  font-weight: 500;
 }
 
 .fc-event-main {
-	text-align: left;
-	padding: 0px 5px;
+  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;
+  padding-left: 0px;
 }
 
 .fc-theme-standard td,
 .fc-theme-standard th {
-	border: 1px solid #ebe9f1;
+  border: 1px solid #ebe9f1;
 }
 
 .textHover:hover {
-	color: var(--q-primary);
+  color: #b5ec9f;
 }
 </style>
diff --git a/src/modules/05_leave/componenst/DialogDetail.vue b/src/modules/05_leave/componenst/DialogDetail.vue
new file mode 100644
index 0000000..1e262c8
--- /dev/null
+++ b/src/modules/05_leave/componenst/DialogDetail.vue
@@ -0,0 +1,501 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  FormDelete,
+  FormDeleteRef,
+} from "@/modules/05_leave/interface/response/leave";
+
+import FormLeave from "@/modules/05_leave/componenst/formDetail/formLeave.vue";
+import FormChildbirth from "@/modules/05_leave/componenst/formDetail/formChildbirth.vue";
+import FormHoliday from "@/modules/05_leave/componenst/formDetail/formHoliday.vue";
+import FormUpasom from "@/modules/05_leave/componenst/formDetail/formUpasom.vue";
+import FormHajj from "@/modules/05_leave/componenst/formDetail/formHajj.vue";
+import FormCheckSelect from "@/modules/05_leave/componenst/formDetail/formCheckSelect.vue";
+import FormStudy from "@/modules/05_leave/componenst/formDetail/formStudy.vue";
+import FormLeaveToTraining from "@/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue";
+import FormLeaveToWorkInternational from "@/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue";
+import FormSpouse from "@/modules/05_leave/componenst/formDetail/formSpouse.vue";
+import FormVocationalRehabilitation from "@/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+  date2Thai,
+  success,
+  dialogConfirm,
+} = mixin;
+
+const $q = useQuasar();
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    require: true,
+  },
+  leaveId: {
+    type: String,
+    require: true,
+  },
+  onClickClose: {
+    type: Function,
+    require: true,
+  },
+  leaveType: {
+    type: Object,
+    require: true,
+  },
+  leaveStatus: {
+    type: String,
+    require: true,
+  },
+  fetchDataTable: {
+    type: Function,
+    require: true,
+  },
+});
+
+const titleMain = ref<string>("รายละเอียดการลาของ");
+const titleName = ref<string>("");
+/**checkForm Form การลา*/
+const checkForm = ref<string>("");
+
+/** Form รายละเอียดข้อมูล*/
+const formData = reactive<any>({
+  id: "", //Id การยื่นขอลา
+  // reasonCommander: "", //เหตุผลผู้บังคับบัญชา
+  // reasonOligarch: "", //เหตุผลผู้มีอำนาจ
+  // positionName: "", //ตำแหน่งผู้ยื่นขอ
+  // positionLevelName: "", //ระดับผู้ยื่นขอ
+  // organizationName: "", //สังกัดผู้ยื่นขอ
+  leaveTypeName: "", // Name ประเภทการลา
+  leaveTypeId: "", //Id ประเภทการลา
+  fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
+  dateSendLeave: new Date(), // วันที่ยืนใบลา
+  status: "", //สถานะการของลา
+  leaveDateStart: new Date(), //วันเริ่มการลา
+  leaveDateEnd: new Date(), //วันสิ้นสุดการลา
+  leaveCount: 0, //จำนวนวันลา
+
+  // leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
+  // leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
+  // leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
+  // leaveStartDate: new Date(), //*วัน เดือน ปีเริ่มต้นลา
+  // leaveEndDate: new Date(), //*วัน เดือน ปีสิ้นสุดลา
+  leaveWrote: "", //เขียนที่
+  leaveAddress: "", //สถานที่ติดต่อขณะลา
+  leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
+  leaveDetail: "", //รายละเอียดการลา
+  leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
+  leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
+  leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveTotal: 0, //จำนวนวันที่ลา(Auto)
+  leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
+  leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
+  leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
+  leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
+  leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
+  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: "",
+});
+
+const formDelete = reactive<FormDelete>({
+  writeAt: "",
+  reason: "",
+  doc: null,
+});
+/**Validate ข้อมูล */
+const writeAtRef = ref<Object | null>(null);
+const reasonRef = ref<Object | null>(null);
+const docRef = ref<Object | null>(null);
+
+const formDeleteRef: FormDeleteRef = {
+  writeAt: writeAtRef,
+  reason: reasonRef,
+  doc: docRef,
+};
+
+async function fetchDataDetail(id: string) {
+  showLoader();
+  await http
+    .get(config.API.leaveUserId(id), {})
+    .then((res) => {
+      const data = res.data.result;
+      titleName.value = data.fullName;
+      formData.id = data.id;
+      // formData.reasonCommander = data.reasonCommander;
+      // formData.reasonOligarch = data.reasonOligarch;
+      // formData.positionName = data.positionName;
+      // formData.positionLevelName = data.positionLevelName;
+      // formData.organizationName = data.organizationName;
+      formData.leaveTypeName = data.leaveTypeName;
+      formData.leaveTypeId = data.leaveTypeId;
+      formData.fullname = data.fullname;
+      formData.dateSendLeave =
+        data.dateSendLeave && date2Thai(data.dateSendLeave);
+      formData.status = data.status;
+      formData.leaveDateStart =
+        data.leaveStartDate && date2Thai(data.leaveStartDate);
+      formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
+      formData.leaveCount = data.leaveTotal;
+      // formData.leaveLimit = data.leaveLimit;
+      // formData.leaveSummary = data.leaveSummary;
+      // formData.leaveRemain = data.leaveRemain;
+      formData.leaveWrote = data.leaveWrote;
+      formData.leaveAddress = data.leaveAddress;
+      formData.leaveNumber = data.leaveNumber;
+      formData.leaveDetail = data.leaveDetail;
+      formData.leaveDocument = data.leaveDocument;
+      formData.leaveDraftDocument = data.leaveDraftDocument;
+      formData.leaveLastStart =
+        data.leaveLastStart && date2Thai(data.leaveLastStart);
+      formData.leaveLastEnd =
+        data.leaveLastStart && date2Thai(data.leaveLastEnd);
+      formData.leaveTotal = data.leaveTotal;
+      formData.leavebirthDate =
+        data.leavebirthDate && date2Thai(data.leavebirthDate);
+      formData.leavegovernmentDate =
+        data.leavegovernmentDate && date2Thai(data.leavegovernmentDate);
+      formData.leaveSalary = data.leaveSalary;
+      formData.leaveSalaryText = data.leaveSalaryText;
+      // formData.leaveTypeDay =
+      //   e.leaveTypeDay && stores.convertLeaveDaytype(e.leaveTypeDay);
+      formData.wifeDayName = data.wifeDayName;
+      formData.wifeDayDateBorn =
+        data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
+      formData.restDayOldTotal = data.restDayOldTotal;
+      formData.restDayCurrentTotal = data.restDayCurrentTotal;
+      formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
+      formData.ordainDayLocationName = data.ordainDayLocationName;
+      formData.ordainDayLocationAddress = data.ordainDayLocationAddress;
+      formData.ordainDayLocationNumber = data.ordainDayLocationNumber;
+      formData.ordainDayOrdination =
+        data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
+      formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName;
+      formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress;
+      formData.hajjDayStatus = data.hajjDayStatus
+        ? "เคย"
+        : "ไม่เคยไปประกอบพิธีฮัจย์";
+      formData.absentDaySummon = data.absentDaySummon;
+      formData.absentDayLocation = data.absentDayLocation;
+      formData.absentDayRegistorDate =
+        data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
+      formData.absentDayGetIn = data.absentDayGetIn;
+      formData.absentDayAt = data.absentDayAt;
+      formData.studyDaySubject = data.studyDaySubject;
+      formData.studyDayDegreeLevel = data.studyDayDegreeLevel;
+      formData.studyDayUniversityName = data.studyDayUniversityName;
+      formData.studyDayTrainingSubject = data.studyDayTrainingSubject;
+      formData.studyDayTrainingName = data.studyDayTrainingName;
+      formData.studyDayCountry = data.studyDayCountry;
+      formData.studyDayScholarship = data.studyDayScholarship;
+      formData.coupleDayName = data.coupleDayName;
+      formData.coupleDayPosition = data.coupleDayPosition;
+      formData.coupleDayLevel = data.coupleDayLevel;
+      formData.coupleDayLevelCountry = data.coupleDayLevelCountry;
+      formData.coupleDayCountryHistory = data.coupleDayCountryHistory;
+      formData.coupleDayTotalHistory = data.coupleDayTotalHistory;
+      formData.coupleDayStartDateHistory =
+        data.coupleDayStartDateHistory &&
+        date2Thai(data.coupleDayStartDateHistory);
+      formData.coupleDayEndDateHistory =
+        data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
+      formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory;
+      formData.step = data.step;
+      // checkLeaveType(formData.leaveTypeId ? formData.leaveTypeId : "");
+      checkLeaveType(formData.leaveTypeId, formData.leaveTypeName);
+    })
+    .catch((err) => {
+      props.onClickClose?.();
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
+  if (props.leaveType) {
+    const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
+    const type = filtertype.code;
+    if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
+      checkForm.value = "FormLeave";
+    } else if (type === "LV-004") {
+      checkForm.value = "FormChildbirth";
+    } else if (type === "LV-005") {
+      checkForm.value = "FormHoliday";
+    } else if (type === "LV-006") {
+      checkForm.value = "FormUpasom";
+    } else if (type === "LV-006" && leaveTypeName === "พิธีฮัจย์ฯ") {
+      checkForm.value = "FormHajj";
+    } else if (type === "LV-007") {
+      checkForm.value = "FormCheckSelect";
+    } else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
+      checkForm.value = "FormStudy";
+    } else if (type === "LV-008") {
+      checkForm.value = "FormLeaveToTraining";
+    } else if (type === "LV-009") {
+      checkForm.value = "FormLeaveToWorkInternational";
+    } else if (type === "LV-010") {
+      checkForm.value = "FormSpouse";
+    } else if (type === "LV-011") {
+      checkForm.value = "FormVocationalRehabilitation";
+    }
+  }
+}
+
+async function fetchDataCancelDetail(id: string) {
+  showLoader();
+  await http
+    .get(config.API.leaveCancelById(id))
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function onClickSave() {
+  const hasError = [];
+  for (const key in formDeleteRef) {
+    if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
+      const property = formDeleteRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    dialogConfirm(
+      $q,
+      () => {
+        onSubmit();
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  } else {
+    console.log(hasError);
+  }
+}
+
+async function onSubmit() {
+  showLoader();
+  const id = props.leaveId ? props.leaveId : "";
+  const formData = new FormData();
+  formData.append("leaveWrote", formDelete.writeAt);
+  formData.append("reason", formDelete.reason);
+  formData.append("doc", formDelete.doc);
+  await http
+    .post(config.API.leaveCancelById(id), formData)
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      props.fetchDataTable?.();
+      hideLoader();
+    });
+}
+
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal === true) {
+      formDelete.writeAt = "";
+      formDelete.reason = "";
+      formDelete.doc = null;
+
+      props.leaveStatus === "DELETE"
+        ? props.leaveId && fetchDataCancelDetail(props.leaveId)
+        : props.leaveId && fetchDataDetail(props.leaveId);
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card q-card style="min-width: 70%">
+      <q-card-section class="row items-center q-pa-sm">
+        <div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="props.onClickClose"
+          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="
+            props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'
+          "
+        >
+          <div class="col-12 q-col-gutter-sm row items-center"></div>
+          <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
+          <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"
+          />
+        </div>
+
+        <div
+          flat
+          class="col-xs-6 col-sm-6"
+          v-if="props.leaveStatus === 'CANCEL'"
+        >
+          <q-card-section>
+            <q-input
+              ref="writeAtRef"
+              v-model="formDelete.writeAt"
+              label="เขียนที่"
+              :rules="[(val) => !!val || 'กรุณากรอกเขียนที่']"
+              lazy-rules
+              outlined
+              dense
+            />
+            <q-input
+              ref="reasonRef"
+              v-model="formDelete.reason"
+              type="textarea"
+              label="กรอกเหตุผล"
+              :rules="[(val) => !!val || 'กรูณากรอกเหตุผล']"
+              lazy-rules
+              class="q-mt-md"
+              outlined
+              dense
+            />
+            <q-file
+              ref="docRef"
+              outlined
+              v-model="formDelete.doc"
+              label="เลือกไฟล์เอกสารหลักฐาน"
+              :rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
+              lazy-rules
+              class="q-mt-md"
+              use-chips
+              dense
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" />
+              </template>
+            </q-file>
+          </q-card-section>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-section
+        class="row items-center q-pa-sm"
+        v-if="props.leaveStatus === 'CANCEL'"
+      >
+        <q-space />
+        <q-btn
+          label="ยืนยัน"
+          unelevated
+          color="secondary"
+          dense
+          class="q-px-md"
+          @click="onClickSave"
+        />
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/ListCalendar.vue b/src/modules/05_leave/componenst/ListCalendar.vue
index db09123..d42dccb 100644
--- a/src/modules/05_leave/componenst/ListCalendar.vue
+++ b/src/modules/05_leave/componenst/ListCalendar.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
+
+import type {
+  FormDelete,
+  FormDeleteRef,
+} from "@/modules/05_leave/interface/response/leave";
 import Table from "@/modules/05_leave/componenst/Table.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
@@ -21,21 +27,27 @@ const type = ref<string>("00000000-0000-0000-0000-000000000000");
 const status = ref<string>("ALL");
 const filter = ref<string>("");
 
+/** pagination*/
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+
 async function fetchDataTable() {
   showLoader();
   const body = {
     year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
     type: type.value, //*Id ประเภทการลา
     status: status.value, //*สถานะการของลา
-    page: "1", //*หน้า
-    pageSize: "10", //*จำนวนแถวต่อหน้า
+    page: page.value.toString(), //*หน้า
+    pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
     keyword: filter.value, //keyword ค้นหา
   };
   await http
     .post(config.API.leaveTableList(), body)
     .then((res) => {
-      console.log(res);
       const data = res.data.result.data;
+      LeaveData.fetchListLeave(data);
+      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -45,49 +57,35 @@ async function fetchDataTable() {
     });
 }
 
-/**
- * ตั้งค่า pagination
- */
-const initialPagination = ref({
-  rowsPerPage: 0,
-});
+const leaveType = ref<any>();
+async function fectOptionType() {
+  await http
+    .get(config.API.leaveType())
+    .then(async (res) => {
+      leaveType.value = res.data.result;
+      LeaveData.fetchLeaveType(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
 
-/**
- * mocking ค่าในตัวแปร
- */
-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 writeAt = ref<string>("");
-const model = ref(null);
-const modeCancel = ref(true);
-
-/**
- * ฟังก์ชั่นยกเลิก model
- * @param text
- */
-const cancel = async (text: string) => {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = true;
-};
+const modal = ref<boolean>(false);
+const leaveId = ref<string>("");
+const leaveStatus = ref<string>("");
 
 /**
  * ฟังก์ชั่นเปิด model
  * @param text
  */
-const view = async (text: string) => {
-  title.value = text;
-  modalCancel.value = true;
-  modeCancel.value = false;
+const onClickView = async (id: string, status: string) => {
+  modal.value = true;
+  leaveId.value = id;
+  leaveStatus.value = status;
 };
+async function onClickClose() {
+  modal.value = false;
+}
 
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
   if (t && s) {
@@ -99,11 +97,17 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
   }
 }
 
+async function updatePagination(p: number, ps: number) {
+  (page.value = await p), (pageSize.value = await ps);
+  await fetchDataTable();
+}
+
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
   await fetchDataTable();
+  await fectOptionType();
 });
 </script>
 <template>
@@ -114,61 +118,84 @@ onMounted(async () => {
     :visible-columns="LeaveData.visibleColumns"
     v-model:inputfilter="filter"
     v-model:inputvisible="LeaveData.visibleColumns"
-    :pagination="initialPagination"
     :inputShow="true"
     :grid="$q.screen.gt.xs ? false : true"
     @update:filter="updateFilterTable"
+    @update:Pagination="updatePagination"
+    :maxPage="maxPage"
+    :pageSize="pageSize"
+    :leaveType="leaveType"
   >
     <template #columns="props">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td key="no" :props="props" @click="view(props.row.type)">
+        <q-td
+          key="no"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
           {{ props.rowIndex + 1 }}
         </q-td>
-        <q-td key="type" :props="props" @click="view(props.row.type)">
-          {{ props.row.type }}
+        <q-td
+          key="leaveTypeName"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ props.row.leaveTypeName }}
         </q-td>
-        <q-td key="date" :props="props" @click="view(props.row.type)">
-          {{ props.row.date }}
+        <q-td
+          key="dateSendLeave"
+          :props="props"
+          @click="onClickView(props.row.id, props.row.status)"
+        >
+          {{ props.row.dateSendLeave }}
         </q-td>
 
         <q-td key="status" :props="props">
           <div class="col-12 row items-center">
-            <div @click="view(props.row.type)">
+            <div @click="onClickView(props.row.id, props.row.status)">
               <q-icon
-                v-if="props.row.status == 'อนุมัติ'"
+                v-if="props.row.status == 'APPROVE'"
                 size="10px"
                 color="light-green"
                 name="mdi-circle"
                 class="q-mr-sm"
               />
               <q-icon
-                v-else-if="props.row.status == 'ไม่อนุมัติ'"
+                v-else-if="props.row.status == 'REJECT'"
                 size="10px"
                 color="red-6"
                 name="mdi-circle"
                 class="q-mr-sm"
               />
               <q-icon
-                v-else-if="props.row.status == 'กำลังดำเนินการ'"
+                v-else-if="props.row.status == 'PENDING'"
                 size="10px"
                 color="light-blue-14"
                 name="mdi-circle"
                 class="q-mr-sm"
               />
               <q-icon
-                v-else-if="props.row.status == 'ใหม่'"
+                v-else-if="props.row.status == 'NEW'"
                 size="10px"
                 color="orange"
                 name="mdi-circle"
                 class="q-mr-sm"
               />
-              <span class="q-pr-md">{{ props.row.status }}</span>
+              <q-icon
+                v-if="props.row.status == 'DELETE'"
+                size="10px"
+                color="grey-10"
+                name="mdi-circle"
+                class="q-mr-sm"
+              />
+
+              <span class="q-pr-md">{{ props.row.statusConvert }}</span>
             </div>
             <q-space />
             <q-btn
-              v-if="props.row.status == 'ใหม่'"
+              v-if="props.row.status == 'NEW'"
               label="ขอยกเลิก"
-              @click="cancel(props.row.type)"
+              @click="onClickView(props.row.id, 'CANCEL')"
               size="13px"
               class="q-px-sm"
               outline
@@ -181,81 +208,12 @@ onMounted(async () => {
     </template>
   </Table>
 
-  <!-- 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">{{ 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="writeAt" label="เขียนที่" outlined dense />
-          <q-input
-            v-model="reason"
-            type="textarea"
-            label="กรอกเหตุผล"
-            class="q-mt-md"
-            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>
+  <DialogDetail
+    :modal="modal"
+    :leaveId="leaveId"
+    :leaveStatus="leaveStatus"
+    :onClickClose="onClickClose"
+    :leaveType="leaveType"
+    :fetchDataTable="fetchDataTable"
+  />
 </template>
diff --git a/src/modules/05_leave/componenst/Table.vue b/src/modules/05_leave/componenst/Table.vue
index e109b45..753004d 100644
--- a/src/modules/05_leave/componenst/Table.vue
+++ b/src/modules/05_leave/componenst/Table.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, useAttrs, onMounted } from "vue";
+import { ref, useAttrs, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -18,19 +18,6 @@ const $q = useQuasar();
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 
-/**
- * ตั้งค่า pagination
- */
-const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
-};
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
@@ -43,6 +30,18 @@ const props = defineProps({
   editvisible: Boolean,
   grid: Boolean,
   inputShow: Boolean,
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+  pageSize: {
+    type: Number,
+    require: true,
+  },
+  leaveType: {
+    type: Object,
+    require: true,
+  },
 });
 
 /**
@@ -50,10 +49,22 @@ const props = defineProps({
  */
 const emit = defineEmits([
   "update:filter",
+  "update:Pagination",
   "update:inputvisible",
   "update:editvisible",
 ]);
 
+/**
+ * ตั้งค่า pagination
+ */
+const currentPage = ref<number>(1);
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: Number(props.pageSize),
+});
+
 const updateVisible = (value: []) => {
   emit("update:inputvisible", value);
 };
@@ -68,20 +79,33 @@ function filterTable() {
   emit("update:filter", year.value, type.value, status.value, filter.value);
 }
 
-async function fectOptionType() {
-  await http
-    .get(config.API.leaveType())
-    .then(async (res) => {
-      const data = res.data.result;
-      await fetchLeaveType(data);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    });
+function updatePagination(p: number, ps: number) {
+  emit("update:Pagination", p, ps);
 }
 
+function updatePageSize(newPageSize: any) {
+  currentPage.value = 1;
+  pagination.value.rowsPerPage = newPageSize.rowsPerPage;
+}
+
+// async function fectOptionType() {
+//   await http
+//     .get(config.API.leaveType())
+//     .then(async (res) => {
+//       const data = res.data.result;
+//       await fetchLeaveType(data);
+//     })
+//     .catch((err) => {
+//       messageError($q, err);
+//     });
+// }
+
+watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
+  updatePagination(currentPage.value, pagination.value.rowsPerPage);
+});
+
 onMounted(async () => {
-  await fectOptionType();
+  // await fectOptionType();
 });
 </script>
 <template>
@@ -174,7 +198,7 @@ onMounted(async () => {
           </template></q-select
         >
         <q-space />
-        <q-input
+        <!-- <q-input
           standout
           dense
           v-model="filter"
@@ -195,7 +219,7 @@ onMounted(async () => {
               @click="filter = ''"
             />
           </template>
-        </q-input>
+        </q-input> -->
         <!-- แสดงคอลัมน์ใน table -->
         <q-select
           :model-value="inputvisible"
@@ -227,8 +251,9 @@ onMounted(async () => {
       virtual-scroll
       :virtual-scroll-sticky-size-start="48"
       dense
-      :pagination-label="paginationLabel"
+      :rows-per-page-options="[10, 25, 50, 100]"
       :pagination="pagination"
+      @update:pagination="updatePageSize"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -239,11 +264,10 @@ onMounted(async () => {
       </template>
       <template v-slot:pagination="scope">
         <q-pagination
-          v-model="pagination.page"
+          v-model="currentPage"
           active-color="primary"
           color="dark"
-          :max="scope.pagesNumber"
-          :max-pages="5"
+          :max="Number(props.maxPage)"
           size="sm"
           boundary-links
           direction-links
diff --git a/src/modules/05_leave/componenst/formDetail/formCheckSelect.vue b/src/modules/05_leave/componenst/formDetail/formCheckSelect.vue
new file mode 100644
index 0000000..06c5670
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formCheckSelect.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+console.log(props);
+</script>
+
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveCount }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ได้รับหมายเรียกของ</div>
+        <div class="col">{{ props.data.absentDaySummon }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่</div>
+        <div class="col">{{ props.data.absentDayLocation }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลงวันที่</div>
+        <div class="col">{{ props.data.absentDayRegistorDate }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ให้เข้ารับการ</div>
+        <div class="col">{{ props.data.absentDayGetIn }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ณ ที่</div>
+        <div class="col">{{ props.data.absentDayAt }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/formDetail/formChildbirth.vue b/src/modules/05_leave/componenst/formDetail/formChildbirth.vue
new file mode 100644
index 0000000..19cd3d2
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formChildbirth.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveCount }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ชื่อภรรยา</div>
+        <div class="col">{{ props.data.wifeDayName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันที่คลอด</div>
+        <div class="col">{{ props.data.wifeDayDateBorn }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.leaveAddress }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/formDetail/formHajj.vue b/src/modules/05_leave/componenst/formDetail/formHajj.vue
new file mode 100644
index 0000000..cf9363a
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formHajj.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveCount }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+        <div class="col">{{ props.data.leavegovernmentDate }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจย์</div>
+        <div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/formDetail/formHoliday.vue b/src/modules/05_leave/componenst/formDetail/formHoliday.vue
new file mode 100644
index 0000000..f5530b0
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formHoliday.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
+        <div class="col">{{ props.data.restDayOldTotal }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
+        <div class="col">{{ props.data.restDayCurrentTotal }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveCount }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8"></div>
+        <div class="col">{{ props.data.leaveTypeDay }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.leaveAddress }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/formDetail/formLeave.vue b/src/modules/05_leave/componenst/formDetail/formLeave.vue
new file mode 100644
index 0000000..5ac61e8
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formLeave.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveCount }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8"></div>
+        <div class="col">{{ props.data.leaveTypeDay }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">
+          ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
+        </div>
+        <div class="col">{{ props.data.leaveLastStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.leaveAddress }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue b/src/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue
new file mode 100644
index 0000000..5b359b1
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveCount }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันเดือนปีเกิด</div>
+        <div class="col">{{ props.data.leavebirthDate }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+        <div class="col">{{ props.data.leavegovernmentDate }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
+        <div class="col">
+          {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col text-grey-8">ด้าน/หลักสูตร</div>
+        <div class="col">{{ props.data.studyDayTrainingSubject }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ณ สถานที่</div>
+        <div class="col">{{ props.data.studyDayTrainingName }}</div>
+      </div>
+
+      <div class="row">
+        <div class="col text-grey-8">ประเทศ</div>
+        <div class="col">{{ props.data.studyDayCountry }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ด้วยทุน</div>
+        <div class="col">{{ props.data.studyDayScholarship }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.leaveAddress }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
diff --git a/src/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue b/src/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue
new file mode 100644
index 0000000..ff96cb7
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
diff --git a/src/modules/05_leave/componenst/formDetail/formMain.vue b/src/modules/05_leave/componenst/formDetail/formMain.vue
new file mode 100644
index 0000000..4be3ddf
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formMain.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+console.log(props);
+</script>
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col-4 text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col-4 text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col-4 text-grey-8">เรียน</div>
+        <div class="col">{{ props.data.notification }}</div>
+      </div>
+      <div class="row">
+        <div class="col-4 text-grey-8">ชื่อผู้ยื่นขอ</div>
+        <div class="col">{{ props.data.fullname }}</div>
+      </div>
+      <div class="row">
+        <div class="col-4 text-grey-8">ตำแหน่งผู้ยืนขอ</div>
+        <div class="col">{{ props.data.positionName }}</div>
+      </div>
+      <div class="row">
+        <div class="col-4 text-grey-8">ระดับผู้ยืนขอ</div>
+        <div class="col">{{ props.data.positionLevelName }}</div>
+      </div>
+      <div class="row">
+        <div class="col-4 text-grey-8">สังกัดผู้ยืนขอ</div>
+        <div class="col">{{ props.data.organizationName }}</div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/formDetail/formSpouse.vue b/src/modules/05_leave/componenst/formDetail/formSpouse.vue
new file mode 100644
index 0000000..09e8fe2
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formSpouse.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveCount }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันเดือนปีเกิด</div>
+        <div class="col">{{ props.data.leavebirthDate }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+        <div class="col">{{ props.data.leavegovernmentDate }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
+        <div class="col">
+          {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
+        </div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ชื่อคู่สมรส</div>
+        <div class="col">{{ props.data.coupleDayName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
+        <div class="col">{{ props.data.coupleDayPosition }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
+        <div class="col">{{ props.data.coupleDayLevelCountry }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
+      </div>
+      <div class="row q-mt-xs">
+        <div class="col text-grey-8">
+          <div class="q-ml-md" style="list-style-type: circle">
+            <li>ประเทศ</li>
+            <li>จำนวนวัน</li>
+            <li>ตั้งแต่วันที่</li>
+            <li>ถึงวันที่</li>
+            <li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
+          </div>
+        </div>
+        <div class="col">
+          <div>{{ props.data.coupleDayCountryHistory }}</div>
+          <div>{{ props.data.coupleDayTotalHistory }}</div>
+          <div>{{ props.data.coupleDayStartDateHistory }}</div>
+          <div>{{ props.data.coupleDayEndDateHistory }}</div>
+          <div>{{ props.data.coupleDaySumTotalHistory }}</div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
diff --git a/src/modules/05_leave/componenst/formDetail/formStudy.vue b/src/modules/05_leave/componenst/formDetail/formStudy.vue
new file mode 100644
index 0000000..45cdb0c
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formStudy.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveCount }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันเดือนปีเกิด</div>
+        <div class="col">{{ props.data.leavebirthDate }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+        <div class="col">{{ props.data.leavegovernmentDate }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
+        <div class="col">
+          {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
+        </div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ศึกษาวิชา</div>
+        <div class="col">{{ props.data.studyDaySubject }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ขั้นปริญญา</div>
+        <div class="col">{{ props.data.studyDayDegreeLevel }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ชื่อสถานศึกษา</div>
+        <div class="col">{{ props.data.studyDayUniversityName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ประเทศ</div>
+        <div class="col">{{ props.data.studyDayCountry }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ด้วยทุน</div>
+        <div class="col">{{ props.data.studyDayScholarship }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
+        <div class="col">{{ props.data.leaveNumber }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
+        <div class="col">{{ props.data.leaveAddress }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/formDetail/formUpasom.vue b/src/modules/05_leave/componenst/formDetail/formUpasom.vue
new file mode 100644
index 0000000..09c2f24
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formUpasom.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveLastStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveLastEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">จำนวนวันที่ลา</div>
+        <div class="col">{{ props.data.leaveTotal }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันเดือนปีเกิด</div>
+        <div class="col">{{ props.data.leavebirthDate }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
+        <div class="col">{{ props.data.leavegovernmentDate }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เคย/ไม่เคยบวช</div>
+        <div class="col">
+          {{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">สถานที่บวช</div>
+        <div class="col">
+          {{ props.data.ordainDayLocationName }}
+          {{ props.data.ordainDayLocationAddress }}
+          {{ props.data.ordainDayLocationNumber }}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">วันอุปสมบท</div>
+        <div class="col">{{ props.data.ordainDayOrdination }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">สถานที่จำพรรษา</div>
+        <div class="col">
+          {{ props.data.ordainDayBuddhistLentName }}
+          {{ props.data.ordainDayBuddhistLentAddress }}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue b/src/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue
new file mode 100644
index 0000000..ff96cb7
--- /dev/null
+++ b/src/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+<template>
+  <q-card-section>
+    <div class="q-pa-md q-gutter-md">
+      <div class="row">
+        <div class="col text-grey-8">วันที่ยืนใบลา</div>
+        <div class="col">{{ props.data.dateSendLeave }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เรื่อง</div>
+        <div class="col">{{ props.data.leaveTypeName }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เขียนที่</div>
+        <div class="col">{{ props.data.leaveWrote }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
+        <div class="col">{{ props.data.leaveDateStart }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">ลาถึงวันที่</div>
+        <div class="col">{{ props.data.leaveDateEnd }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">รายละเอียด</div>
+        <div class="col">{{ props.data.leaveDetail }}</div>
+      </div>
+      <div class="row">
+        <div class="col text-grey-8">เอกสารแบบ</div>
+        <div class="col">
+          <q-btn
+            :href="props.data.leaveDocument"
+            target="_blank"
+            outline
+            color="blue"
+            label="ดาวน์โหลด"
+            size="12px"
+          >
+            <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+          >
+        </div>
+      </div>
+    </div>
+  </q-card-section>
+</template>
diff --git a/src/modules/05_leave/interface/response/leave.ts b/src/modules/05_leave/interface/response/leave.ts
index b322da9..d86d34b 100644
--- a/src/modules/05_leave/interface/response/leave.ts
+++ b/src/modules/05_leave/interface/response/leave.ts
@@ -2,7 +2,7 @@ interface ListLeave {
   id: string; //*Id การยื่นขอลา
   leaveTypeName: string; //Name ประเภทการลา
   leaveTypeId: string; //Id ประเภทการลา
-  fullname: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
+  fullName: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
   dateSendLeave: Date | null; //วันที่ยื่นใบลา
   status: string; //สถานะการของลา
   isDelete: boolean; //ขอยกเลิกคำขอลา ถ้าเคยขอแล้วจะเป็น true ไม่เคยเป็น false
@@ -12,10 +12,98 @@ interface ListLeaveTable {
   id: string;
   leaveTypeName: string;
   leaveTypeId: string;
-  fullname: string;
+  fullName: string;
   dateSendLeave: string | null;
   status: string;
   isDelete: boolean;
 }
 
-export type { ListLeave, ListLeaveTable };
+interface FremDetail {
+  id: string; //Id การยื่นขอลา
+  reasonCommander: string; //เหตุผลผู้บังคับบัญชา
+  reasonOligarch: string; //เหตุผลผู้มีอำนาจ
+  positionName: string; //ตำแหน่งผู้ยื่นขอ
+  positionLevelName: string; //ระดับผู้ยื่นขอ
+  organizationName: string; //สังกัดผู้ยื่นขอ
+  leaveTypeName: string | null; //Name ประเภทการลา
+  leaveTypeId: string | null; //Id ประเภทการลา
+  fullname: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
+  dateSendLeave: Date | null; //วันที่ยื่นใบลา
+  leaveDateStart: Date | null; //วันเริ่มการลา
+  leaveDateEnd: Date | null; //วันสิ้นสุดการลา
+  leaveCount: number;
+  status: string; //สถานะการของลา
+  leaveLimit: number; //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
+  leaveSummary: number; //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
+  leaveRemain: number; //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
+  // leaveStartDate: Date | null; //*วัน เดือน ปีเริ่มต้นลา
+  // leaveEndDate: Date | null; //*วัน เดือน ปีสิ้นสุดลา
+  leaveWrote: string; //เขียนที่
+  leaveAddress: string; //สถานที่ติดต่อขณะลา
+  leaveNumber: string; //หมายเลขที่ติดต่อขณะลา
+  leaveDetail: string; //รายละเอียดการลา
+  leaveDocument: string; //อัปโหลดเอกสารประกอบรายละเอียด
+  leaveDraftDocument: string; //อัปโหลดแบบฟอร์มการลา
+  leaveLastStart: Date | null; //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveLastEnd: Date | null; //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
+  leaveTotal: number; //จำนวนวันที่ลา(Auto)
+  leavebirthDate: Date | null; //วันเดือนปีเกิด(Auto)
+  leavegovernmentDate: Date | null; //วันที่เข้ารับราชการ(Auto)
+  leaveSalary: Number; //เงินเดือนปัจจุบัน(Auto)
+  leaveSalaryText: String; //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
+  leaveTypeDay: string; //ประเภทการลาในวันนั้นเช่น
+  wifeDayName: String; //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  wifeDayDateBorn: Date | null; //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
+  restDayOldTotal: Number; //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
+  restDayCurrentTotal: number; //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
+  ordainDayStatus: Boolean; //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
+  ordainDayLocationName: String; //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
+  ordainDayLocationAddress: String; //สถานที่บวช ที่อยู่(ลาอุปสมบท)
+  ordainDayLocationNumber: String; //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
+  ordainDayOrdination: Date | null; //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
+  ordainDayBuddhistLentName: String; //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
+  ordainDayBuddhistLentAddress: String; //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
+  hajjDayStatus: Boolean; //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
+  absentDaySummon: String; //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayLocation: String; //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayRegistorDate: Date | null; //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayGetIn: String; //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  absentDayAt: String; //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
+  studyDaySubject: String; //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayDegreeLevel: String; //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayUniversityName: String; //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayTrainingSubject: String; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayTrainingName: String; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่	(ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayCountry: String; //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  studyDayScholarship: String; //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
+  coupleDayName: String; //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayPosition: String; //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayLevel: String; //ระดับคู่สมรส (ลาติดตามคู่สมรส)
+  coupleDayLevelCountry: String; //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
+  coupleDayCountryHistory: String; //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
+  coupleDayTotalHistory: String; //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  coupleDayStartDateHistory: Date | null; //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
+  coupleDayEndDateHistory: Date | null; //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
+  coupleDaySumTotalHistory: string; //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
+  step: string;
+}
+
+interface FormDelete {
+  writeAt: string;
+  reason: string;
+  doc: any;
+}
+interface FormDeleteRef {
+  writeAt: object | null;
+  reason: object | null;
+  doc: object | null;
+  [key: string]: any;
+}
+
+export type {
+  ListLeave,
+  ListLeaveTable,
+  FremDetail,
+  FormDelete,
+  FormDeleteRef,
+};
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index 98fe247..f9c5c63 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -33,14 +33,30 @@ export const useLeaveStore = defineStore("Leave", () => {
       id: e.id,
       leaveTypeName: e.leaveTypeName,
       leaveTypeId: e.leaveTypeId,
-      fullname: e.fullname,
+      fullName: e.fullName,
       dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
       status: e.status,
+      statusConvert: convertStatud(e.status),
       isDelete: e.isDelete,
     }));
     rows.value = datalist;
   }
 
+  function convertStatud(val: string) {
+    switch (val) {
+      case "NEW":
+        return "ใหม่";
+      case "PENDING":
+        return "กำลังดำเนินการ";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      case "DELETE":
+        return "ยกเลิก";
+    }
+  }
+
   /** ประเภทการลา */
   const typeOptions = ref<OptionData[]>([]);
   const typeOptionsMain = ref<OptionData[]>([]);
@@ -63,11 +79,11 @@ export const useLeaveStore = defineStore("Leave", () => {
   /** สถานะของการลา */
   const statusOptionsMain = ref<OptionData[]>([
     { id: "ALL", name: "ทั้งหมด" },
-    { id: "NEW ", name: "ใหม่" },
-    { id: "PENDING ", name: "กำลังดำเนินการ" },
-    { id: "APPROVE ", name: "อนุมัติ " },
-    { id: "REJECT ", name: "ไม่อนุมัติ" },
-    { id: "DELETE  ", name: "ยกเลิก" },
+    { id: "NEW", name: "ใหม่" },
+    { id: "PENDING", name: "กำลังดำเนินการ" },
+    { id: "APPROVE", name: "อนุมัติ " },
+    { id: "REJECT", name: "ไม่อนุมัติ" },
+    { id: "DELETE", name: "ยกเลิก" },
   ]);
   const statusOptions = ref<OptionData[]>(statusOptionsMain.value);
 
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 71824a8..21395a5 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -136,18 +136,18 @@ const modalStatsTable = ref<boolean>(false);
 /** function เรียกข้อมูลตารางสถิติการลา*/
 async function fetchStatsTable() {
   modalStatsTable.value = true;
-  // showLoader();
-  // await http
-  //   .get(config.API.leaveStats())
-  //   .then((res) => {
-  //     console.log(res);
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+  showLoader();
+  await http
+    .get(config.API.leaveStats())
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 /** function redirectTo  ยื่นใบลา*/
@@ -155,7 +155,9 @@ async function addAbsence() {
   router.push(`/leave/add`);
 }
 
-onMounted(async () => {});
+onMounted(async () => {
+  // await fetchStatsTable()
+});
 </script>
 
 <template>