From 4253226ac3d6ae56c1f7cb674aa4cfafc78e27f9 Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Tue, 3 Sep 2024 17:36:59 +0700
Subject: [PATCH] Refactoring code module 05_leave

---
 src/modules/05_leave/components/Calendar.vue  | 28 +++---
 .../05_leave/components/DialogDetail.vue      | 30 ++----
 .../components/FormLeave/01_SickForm.vue      | 19 ++--
 .../components/FormLeave/03_Birth.vue         | 18 ++--
 .../FormLeave/04_HelpWifeBirthForm.vue        | 50 ++++------
 .../components/FormLeave/05_VacationForm.vue  | 72 +++++++-------
 .../FormLeave/06_OrdinationForm.vue           | 34 +++----
 .../components/FormLeave/07_HajjForm.vue      | 25 ++---
 .../components/FormLeave/08_MilitaryForm.vue  | 47 ++++-----
 .../components/FormLeave/09_StudyForm.vue     | 48 ++++-----
 .../components/FormLeave/10_TrainForm.vue     | 60 +++---------
 .../FormLeave/11_WorkInternationalForm.vue    | 58 +++--------
 .../FormLeave/12_FollowSpouseForm.vue         | 27 ++---
 .../FormLeave/13_RehabilitationForm.vue       | 28 ++----
 .../05_leave/components/FormLeave/Form.vue    | 20 +---
 src/modules/05_leave/components/ListView.vue  | 53 ++++------
 src/modules/05_leave/components/Table.vue     | 15 ++-
 src/modules/05_leave/interface/index/main.ts  | 83 ++++++++++++++++
 src/modules/05_leave/router.ts                |  4 -
 src/modules/05_leave/store.ts                 |  7 +-
 src/modules/05_leave/views/AddPage.vue        | 31 +++---
 src/modules/05_leave/views/EditPage.vue       | 98 ++++++++-----------
 src/modules/05_leave/views/Main.vue           | 60 ++++++------
 23 files changed, 383 insertions(+), 532 deletions(-)

diff --git a/src/modules/05_leave/components/Calendar.vue b/src/modules/05_leave/components/Calendar.vue
index 31dec7f..edacad5 100644
--- a/src/modules/05_leave/components/Calendar.vue
+++ b/src/modules/05_leave/components/Calendar.vue
@@ -1,43 +1,41 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { tokenParsed } from "@/plugins/auth";
-/**import calendar*/
+import { useCounterMixin } from "@/stores/mixin";
+
 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 type*/
 import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
 import type {
   DataCalendar,
   LeaveType,
 } from "@/modules/05_leave/interface/response/leave";
 
-/** import componest*/
 import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
 
-/** import stort*/
-import { useCounterMixin } from "@/stores/mixin";
-
-// import { aR } from "@fullcalendar/core/internal-common"
-/**ตัวแปรที่ใช้ */
+const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
-const $q = useQuasar();
 const emit = defineEmits(["update:dateYear"]);
-const fullName = ref<string>("");
+
 const mainData = ref<DataCalendar[]>([]);
 const keycloakId = ref<string>("");
 const modal = ref<boolean>(false);
 const leaveId = ref<string>("");
 
+/** filter calendar left */
+const filterLists = ref<any>([]);
+const filterVal = ref<any>([keycloakId.value]);
+
 /**
  * Option ของปฏิทิน
  */
@@ -129,7 +127,7 @@ async function fetchDataCalendar() {
 /**
  * fetch วันหยุดในปฏิทิน
  */
-const fetchData = async () => {
+async function fetchData() {
   showLoader();
   await http
     .get(
@@ -175,7 +173,7 @@ const fetchData = async () => {
     .finally(async () => {
       hideLoader();
     });
-};
+}
 
 /**function แปลงkeycloakId */
 function convertKeycloakId(id: any) {
@@ -228,10 +226,6 @@ async function onClickClose() {
   modal.value = false;
 }
 
-/** filter calendar left */
-const filterLists = ref<any>([]);
-const filterVal = ref<any>([keycloakId.value]);
-
 /**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */
 watch(
   () => filterVal.value,
diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index a71ac7c..c08a8ca 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -1,8 +1,11 @@
 <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 { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
 
 /** import type*/
 import type {
@@ -13,8 +16,6 @@ import type {
 } from "@/modules/05_leave/interface/response/leave";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-
-/** import componest*/
 import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue";
 import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue";
 import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationForm.vue";
@@ -28,16 +29,9 @@ import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouse
 import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue";
 import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue";
 
-/** import stort*/
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
-
-/**ตัวแปร */
+const $q = useQuasar();
 const dataStore = useLeaveStore();
 const { convertStatud } = dataStore;
-const titleMain = ref<string>("รายละเอียดการลาของ");
-const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ");
-const titleName = ref<string>("");
 const mixin = useCounterMixin();
 const {
   showLoader,
@@ -48,7 +42,11 @@ const {
   dialogConfirm,
   calculateDurationYmd,
 } = mixin;
-const $q = useQuasar();
+
+const checkForm = ref<string>("");
+const titleMain = ref<string>("รายละเอียดการลาของ");
+const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ");
+const titleName = ref<string>("");
 
 /**Prop */
 const props = defineProps({
@@ -79,7 +77,6 @@ const props = defineProps({
 });
 
 /**checkForm Form การลา*/
-const checkForm = ref<string>("");
 
 /** Form รายละเอียดข้อมูล*/
 const formData = reactive<FremDetail>({
@@ -214,7 +211,6 @@ async function fetchDataDetail(id: string) {
         data.leaveLastStart && date2Thai(data.leaveLastStart);
       formData.leaveLastEnd =
         data.leaveLastStart && date2Thai(data.leaveLastEnd);
-      // formData.leaveTotal = calculateDurationYmd(data.leaveStartDate, data.leaveEndDate)
       formData.leaveTotal = data.leaveTotal;
       formData.leavebirthDate =
         data.leaveBirthDate && date2Thai(data.leaveBirthDate);
@@ -272,7 +268,6 @@ async function fetchDataDetail(id: string) {
       formData.dear = data.dear ?? "-";
       checkLeaveType(
         formData.leaveTypeId,
-        formData.leaveTypeName,
         formData.ordainDayLocationName,
         formData.studyDayTrainingSubject
       );
@@ -293,15 +288,12 @@ async function fetchDataDetail(id: string) {
  */
 function checkLeaveType(
   leaveTypeId: string,
-  leaveTypeName: string,
   ordainDayLocationName: string,
   studyDayTrainingSubject: string
 ) {
   if (props.leaveType) {
     const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
     const type = filtertype.code;
-    console.log(type);
-
     if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
       checkForm.value = "FormLeave";
     } else if (type === "LV-004") {
@@ -352,8 +344,6 @@ async function fetchDataCancelDetail(id: string) {
       formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
       formDataCancle.leaveDetail = data.leaveDetail ?? "-";
       formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
-
-      console.log(res);
     })
     .catch((err) => {
       messageError($q, err);
@@ -385,7 +375,6 @@ async function onClickSave() {
       "ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
     );
   } else {
-    console.log(hasError);
   }
 }
 
@@ -573,7 +562,6 @@ watch(
       <q-card-section class="q-p-md row q-gutter-y-md">
         <div flat class="col-12">
           <div class="col-12 q-col-gutter-sm row items-center"></div>
-          <!-- FormCancel -->
           <FormCancel :data="formDataCancle" />
         </div>
       </q-card-section>
diff --git a/src/modules/05_leave/components/FormLeave/01_SickForm.vue b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
index 5e5a352..d2802a7 100644
--- a/src/modules/05_leave/components/FormLeave/01_SickForm.vue
+++ b/src/modules/05_leave/components/FormLeave/01_SickForm.vue
@@ -1,22 +1,19 @@
 <script setup lang="ts">
 import { ref, reactive, watch, computed, onMounted } from "vue";
-import type {
-  FormData,
-  FormRef,
-} from "@/modules/05_leave/interface/request/SickForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
+import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { FormRef } from "@/modules/05_leave/interface/request/SickForm";
 
 /** Use */
-const dataStore = useLeaveStore();
 const $q = useQuasar();
+const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const router = useRouter();
-const { date2Thai, dateToISO, messageError, dialogRemove } = mixin;
+const { date2Thai, dateToISO, messageError } = mixin;
 const edit = ref<boolean>(true);
 
 /** รับ props มาจากหน้าหลัก */
diff --git a/src/modules/05_leave/components/FormLeave/03_Birth.vue b/src/modules/05_leave/components/FormLeave/03_Birth.vue
index e39efef..61087ec 100644
--- a/src/modules/05_leave/components/FormLeave/03_Birth.vue
+++ b/src/modules/05_leave/components/FormLeave/03_Birth.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
 import { useQuasar } from "quasar";
-import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
 
 /** Use */
+const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const router = useRouter();
-const $q = useQuasar();
-const { date2Thai, dateToISO, dialogRemove, success, messageError, fails } =
-  mixin;
+const { date2Thai, dateToISO, messageError } = mixin;
+
 const edit = ref<boolean>(true);
-const leaveId = ref<any>("");
+const leaveId = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
diff --git a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
index e110223..f5679a5 100644
--- a/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
+++ b/src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
@@ -1,32 +1,23 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
-import type {
-  FormData,
-  FormRef,
-} from "@/modules/05_leave/interface/request/HelpWifeForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm";
+
 /** Use */
+const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const router = useRouter();
-const $q = useQuasar();
-const {
-  date2Thai,
-  calculateDurationYmd,
-  dateToISO,
-  dialogRemove,
-  fails,
-  success,
-  messageError,
-} = mixin;
+const { date2Thai, calculateDurationYmd, dateToISO, messageError } = mixin;
+
 const edit = ref<boolean>(true);
-const leaveId = ref<any>("");
+const leaveId = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -75,6 +66,13 @@ const leaveAddressRef = ref<object | null>(null);
 const leaveDetailRef = ref<object | null>(null);
 const leaveDocumentRef = ref<object | null>(null);
 
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
+const isLeave = ref<boolean>(true);
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const FormRef: FormRef = {
   leaveWrote: leaveWroteRef,
@@ -90,7 +88,6 @@ const FormRef: FormRef = {
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -156,7 +153,6 @@ function updateLeaveTotal() {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
 async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
@@ -175,17 +171,10 @@ async function fetchCheck() {
     });
 }
 
-/** แจ้งเมื่อวันลาไม่ถูกต้อง */
-const dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
-});
-
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
-const statusCheck = ref<any>("");
+
 watch(props.data, () => {
   if (props.data) {
-    // console.log("data==>", props.data)
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
     formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@@ -204,7 +193,6 @@ watch(props.data, () => {
 /**Hook */
 onMounted(() => {
   if (props.data) {
-    // console.log("data==>", props.data)
     formDataHelpWife.leaveWrote = props.data.leaveWrote;
     formDataHelpWife.wifeDayName = props.data.wifeDayName;
     formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
diff --git a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
index 15f42b3..ee75941 100644
--- a/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/05_VacationForm.vue
@@ -1,25 +1,23 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed, watch } from "vue";
-import type {
-  FormData,
-  FormRef,
-} from "@/modules/05_leave/interface/request/VacationForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { FormRef } from "@/modules/05_leave/interface/request/VacationForm";
+
 /** Use */
 const $q = useQuasar();
 const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const router = useRouter();
-const { date2Thai, dateToISO, dialogRemove, success, messageError, fails } =
-  mixin;
+const { date2Thai, dateToISO, messageError } = mixin;
+
 const edit = ref<boolean>(true);
-const leaveId = ref<any>("");
+const leaveId = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -86,7 +84,6 @@ const FormRef: FormRef = {
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -94,6 +91,29 @@ const fileUploadDoc = async (files: any) => {
   });
 };
 
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<string>("");
+
+/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
+const isReadOnly = computed(() => {
+  const conditionleaveRange =
+    formDataVacation.leaveRange === "MORNING" ||
+    formDataVacation.leaveRange === "AFTERNOON";
+  if (conditionleaveRange) {
+    formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
+    formDataVacation.leaveTotal = 0.5;
+  } else {
+    formDataVacation.leaveTotal = null;
+  }
+  return conditionleaveRange;
+});
+
+/** แจ้งเมื่อวันลาไม่ถูกต้อง */
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
 /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
 function onValidate() {
   const hasError = [];
@@ -167,34 +187,10 @@ function resetDate() {
     formDataVacation.leaveStartDate = null;
     formDataVacation.leaveEndDate = null;
   }
-  console.log("testnull");
 }
 
-/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
-const isReadOnly = computed(() => {
-  const conditionleaveRange =
-    formDataVacation.leaveRange === "MORNING" ||
-    formDataVacation.leaveRange === "AFTERNOON";
-  if (conditionleaveRange) {
-    formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
-    formDataVacation.leaveTotal = 0.5;
-  } else {
-    formDataVacation.leaveTotal = null;
-  }
-  return conditionleaveRange;
-});
-
-/** แจ้งเมื่อวันลาไม่ถูกต้อง */
-const dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
-});
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
-const statusCheck = ref<any>("");
 watch(props.data, () => {
   if (props.data) {
-    // console.log("data==>", props.data)
     formDataVacation.leaveWrote = props.data.leaveWrote;
     formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
     formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
@@ -214,7 +210,6 @@ watch(props.data, () => {
 /**Hook */
 onMounted(() => {
   if (props.data) {
-    // console.log("data==>", props.data)
     formDataVacation.leaveWrote = props.data.leaveWrote;
     formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
     formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
@@ -228,7 +223,6 @@ onMounted(() => {
     statusCheck.value = props.data.status;
     formDataVacation.leaveRange = props.data.leaveRange;
     leaveId.value = props.data.id;
-    // formDataVacation.leaveDocument = props.data.leaveDocument;
   }
 });
 </script>
diff --git a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
index 0afbd02..27f99a8 100644
--- a/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
@@ -1,30 +1,21 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useLeaveStore } from "@/modules/05_leave/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
 
 /** Use */
-const dataStore = useLeaveStore();
 const $q = useQuasar();
-const router = useRouter();
+const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogRemove,
-  calculateDurationYmd,
-  fails,
-  dateToISO,
-  success,
-  messageError,
-} = mixin;
+const { date2Thai, calculateDurationYmd, dateToISO, messageError } = mixin;
 const edit = ref<boolean>(true);
-const files = ref<any>(null);
-const leaveId = ref<any>("");
+const leaveId = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -99,7 +90,6 @@ const formRef: OrdinationForm = {
 };
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -210,7 +200,8 @@ const dateEndInputStyle = computed(() => {
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
-const statusCheck = ref<any>("");
+const statusCheck = ref<string>("");
+
 watch(props.data, () => {
   if (props.data) {
     formDataOrdination.leaveWrote = props.data.leaveWrote;
@@ -257,7 +248,6 @@ onMounted(() => {
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
     leaveId.value = props.data.id;
-    // formDataOrdination.leaveDocument = props.data.leaveDocument;
   }
 });
 </script>
@@ -504,7 +494,7 @@ onMounted(() => {
           <q-radio
             v-model="formDataOrdination.ordainDayStatus"
             :disable="!edit || statusCheck === 'NEW'"
-            :val="true"
+            :val="'true'"
             label="เคยบวช"
             checked-icon="task_alt "
             hide-bottom-space
@@ -512,7 +502,7 @@ onMounted(() => {
           <q-radio
             v-model="formDataOrdination.ordainDayStatus"
             :disable="!edit || statusCheck === 'NEW'"
-            :val="false"
+            :val="'false'"
             label="ไม่เคยบวช"
             checked-icon="task_alt"
             hide-bottom-space
diff --git a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
index 208fb7e..b381ddf 100644
--- a/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
+++ b/src/modules/05_leave/components/FormLeave/07_HajjForm.vue
@@ -2,28 +2,20 @@
 import { reactive, ref, onMounted, computed, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useLeaveStore } from "@/modules/05_leave/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
 
 /** Use */
-const router = useRouter();
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogRemove,
-  calculateDurationYmd,
-  fails,
-  messageError,
-  success,
-  dateToISO,
-} = mixin;
+const { date2Thai, calculateDurationYmd, messageError, dateToISO } = mixin;
+
 const edit = ref<boolean>(true);
-const files = ref<any>(null);
 const leaveId = ref<any>("");
 
 /** ตัวแปร ref สำหรับแสดง validate */
@@ -127,7 +119,6 @@ function onValidate() {
  */
 const isLeave = ref<boolean>(true);
 async function fetchCheck() {
-  console.log("check");
   await http
     .post(config.API.leaveCheck(), {
       type: dataStore.typeId ?? null,
@@ -394,14 +385,14 @@ onMounted(() => {
           <q-radio
             v-model="formDataHaji.hajjDayStatus"
             :disable="statusCheck === 'NEW'"
-            :val="true"
+            :val="'true'"
             checked-icon="task_alt"
             label="เคย"
           />
           <q-radio
             v-model="formDataHaji.hajjDayStatus"
             :disable="statusCheck === 'NEW'"
-            :val="false"
+            :val="'false'"
             checked-icon="task_alt"
             label="ไม่เคยไปประกอบพิธีฮัจญ์"
           />
diff --git a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
index 84ed76d..c49425f 100644
--- a/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
+++ b/src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
@@ -1,30 +1,21 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useLeaveStore } from "@/modules/05_leave/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
 
 /** Use */
-const router = useRouter();
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogRemove,
-  calculateDurationYmd,
-  dateToISO,
-  success,
-  messageError,
-  fails,
-} = mixin;
+const { date2Thai, calculateDurationYmd, dateToISO, messageError } = mixin;
 const edit = ref<boolean>(true);
-const files = ref<any>(null);
-const leaveId = ref<any>("");
+const leaveId = ref<string>("");
 
 /** ตัวแปร ref สำหรับแสดง validate */
 const leaveStartDateRef = ref<object | null>(null);
@@ -73,8 +64,7 @@ const formDataMilitary = reactive<any>({
   leaveDetail: "",
 });
 
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
+const isLeave = ref<boolean>(true);
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -82,6 +72,15 @@ const fileUploadDoc = async (files: any) => {
   });
 };
 
+/** แจ้งเมื่อวันลาไม่ถูกต้อง */
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<any>("");
+
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const formRef: MilitaryForm = {
   leaveStartDate: leaveStartDateRef,
@@ -143,7 +142,7 @@ function onValidate() {
  * check ว่าลาได้ไหม จาก api
  * @param formData
  */
-const isLeave = ref<boolean>(true);
+
 async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
@@ -170,17 +169,8 @@ function updateLeaveTotal() {
     formDataMilitary.leaveEndDate
   );
   formDataMilitary.leaveTotal = newLeaveTotal;
-  console.log("test");
 }
 
-/** แจ้งเมื่อวันลาไม่ถูกต้อง */
-const dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
-});
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
-const statusCheck = ref<any>("");
 watch(props.data, () => {
   if (props.data) {
     formDataMilitary.leaveWrote = props.data.leaveWrote;
@@ -214,7 +204,6 @@ onMounted(() => {
     formDataMilitary.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
-    // formDataMilitary.leaveDocument = props.data.leaveDocument;
     leaveId.value = props.data.id;
   }
 });
diff --git a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
index 8bed16e..5a8c07b 100644
--- a/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
+++ b/src/modules/05_leave/components/FormLeave/09_StudyForm.vue
@@ -1,33 +1,28 @@
 <script setup lang="ts">
 import { reactive, ref, computed, onMounted, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useLeaveStore } from "@/modules/05_leave/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { useLeaveStore } from "@/modules/05_leave/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
 
 /** Use */
-const dataStore = useLeaveStore();
 const $q = useQuasar();
-const router = useRouter();
+const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const {
   date2Thai,
-  dialogRemove,
   calculateDurationYmd,
-  fails,
   dateToISO,
-  success,
   messageError,
   arabicNumberToText,
 } = mixin;
-const edit = ref<boolean>(true);
-const files = ref<any>(null);
-const leaveId = ref<any>("");
 
-/** ตัวแปร ref สำหรับแสดง validate */
+const edit = ref<boolean>(true);
+const leaveId = ref<string>("");
 const leaveStartDateRef = ref<object | null>(null);
 const leaveEndDateRef = ref<object | null>(null);
 const leavebirthDateRef = ref<object | null>(null);
@@ -102,14 +97,19 @@ const formRef: studyDaySubjectForm = {
   leaveWrote: leaveWroteRef,
 };
 
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
-const fileUploadDoc = async (files: any) => {
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<string>("");
+const isLeave = ref<boolean>(true);
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
+
+async function fileUploadDoc(files: any) {
   files.forEach((file: any) => {
     fileDocDataUpload.value.push(file);
   });
-};
+}
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
@@ -161,16 +161,6 @@ function onValidate() {
   }
 }
 
-/** แจ้งเมื่อวันลาไม่ถูกต้อง */
-const dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
-});
-
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-const isLeave = ref<boolean>(true);
 async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
@@ -200,8 +190,6 @@ function updateLeaveTotal() {
 }
 
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
-const statusCheck = ref<any>("");
 watch(props.data, async () => {
   if (props.data) {
     formDataStudy.leaveWrote = props.data.leaveWrote;
@@ -219,7 +207,6 @@ watch(props.data, async () => {
     formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName;
     formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
     formDataStudy.studyDaySubject = props.data.studyDaySubject;
-    // formDataStudy.leaveDocument = props.data.leaveDocument;
     formDataStudy.leaveDetail = props.data.leaveDetail;
     formDataStudy.leaveDocument = [];
     leaveDocumentList.value = props.data.leaveDocument;
@@ -250,7 +237,6 @@ onMounted(async () => {
     formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName;
     formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
     formDataStudy.studyDaySubject = props.data.studyDaySubject;
-    // formDataStudy.leaveDocument = props.data.leaveDocument;
     formDataStudy.leaveDetail = props.data.leaveDetail;
     leaveDocumentList.value = props.data.leaveDocument;
     const leaveTotal = await calculateDurationYmd(
diff --git a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
index cf56adb..1e7f64e 100644
--- a/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
+++ b/src/modules/05_leave/components/FormLeave/10_TrainForm.vue
@@ -1,30 +1,27 @@
 <script setup lang="ts">
 import { reactive, ref, computed, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
-import { useQuasar } from "quasar";
-import { useLeaveStore } from "@/modules/05_leave/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
 
 /** Use */
-const dataStore = useLeaveStore();
 const $q = useQuasar();
-const router = useRouter();
+const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
 const {
   date2Thai,
-  dialogRemove,
   arabicNumberToText,
   calculateDurationYmd,
-  fails,
   dateToISO,
-  success,
   messageError,
 } = mixin;
+
 const edit = ref<boolean>(true);
-const files = ref<any>(null);
 const leaveId = ref<any>("");
 
 /** รับ props มาจากหน้าหลัก */
@@ -97,14 +94,12 @@ const formRef: TrainForm = {
   leaveWrote: leaveWroteRef,
 };
 
-/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const fileDocDataUpload = ref<File[]>([]);
-const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
-};
+const isLeave = ref<boolean>(true);
+const leaveDocumentList = ref<any>();
+const statusCheck = ref<string>("");
+const dateEndInputStyle = computed(() => {
+  return !isLeave.value ? "input-alert" : "";
+});
 
 /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
@@ -126,7 +121,6 @@ function onValidate() {
         formData.append("leaveDocument", file);
       });
     }
-    // formData.append("leaveDocument", formDataTrain.leaveDocument);
     formData.append("type", formDataTrain.type); //
     formData.append(
       "leaveStartDate",
@@ -137,11 +131,6 @@ function onValidate() {
       dateToISO(new Date(formDataTrain.leaveEndDate))
     ); //
     formData.append("studyDayCountry", formDataTrain.studyDayCountry);
-    // formData.append(
-    //   "leavegovernmentDate",
-    //   dateToISO(formDataTrain.leavegovernmentDate)
-    // );
-    // formData.append("leavebirthDate", dateToISO(new Date(formDataTrain.leavebirthDate)));
     formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
     formData.append(
       "studyDayTrainingSubject",
@@ -159,12 +148,6 @@ function onValidate() {
   }
 }
 
-/**
- * check ว่าลาได้ไหม จาก api
- * @param formData
- */
-
-const isLeave = ref<boolean>(true);
 async function fetchCheck() {
   await http
     .post(config.API.leaveCheck(), {
@@ -193,23 +176,6 @@ function updateLeaveTotal() {
   formDataTrain.leaveTotal = newLeaveTotal;
 }
 
-/**
- * แปลงตัวเลขเงินเดือน
- */
-const formattedSalary = computed(() => {
-  return formDataTrain.leaveSalary !== null
-    ? formDataTrain.leaveSalary.toLocaleString("th-TH")
-    : "";
-});
-
-/** แจ้งเมื่อวันลาไม่ถูกต้อง */
-const dateEndInputStyle = computed(() => {
-  return !isLeave.value ? "input-alert" : "";
-});
-
-/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
-const leaveDocumentList = ref<any>();
-const statusCheck = ref<any>("");
 watch(props.data, async () => {
   if (props.data) {
     formDataTrain.leaveWrote = props.data.leaveWrote;
diff --git a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
index 94483be..9124764 100644
--- a/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
+++ b/src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
@@ -1,32 +1,25 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted, computed } from "vue";
-import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm";
-import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import { useLeaveStore } from "@/modules/05_leave/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
 import genReport from "@/plugins/genreport";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm";
 
 /** Use */
-const dataStore = useLeaveStore();
 const $q = useQuasar();
+const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogRemove,
-  fails,
-  dateToISO,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
+const { date2Thai, dateToISO, messageError, showLoader, hideLoader } = mixin;
+
 const edit = ref<boolean>(true);
-const router = useRouter();
 const isSave = ref<boolean>(false);
-const leaveId = ref<any>("");
+const leaveId = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -105,8 +98,6 @@ async function onValidate() {
       formDataWorkInternational.leaveDocument.forEach((file: File) => {
         formData.append("leaveDocument", file);
       });
-
-      // formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
     }
 
     if (formDataWorkInternational.leaveDraftDocument) {
@@ -178,7 +169,8 @@ const dateEndInputStyle = computed(() => {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
-const statusCheck = ref<any>("");
+const statusCheck = ref<string>("");
+
 watch(props, () => {
   if (props.data) {
     formDataWorkInternational.leaveWrote = props.data.leaveWrote;
@@ -206,6 +198,7 @@ watch(
     }
   }
 );
+
 /**Hook */
 onMounted(() => {
   if (props.data) {
@@ -215,7 +208,6 @@ onMounted(() => {
     );
     formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataWorkInternational.leaveDetail = props.data.leaveDetail;
-    // formDataWorkInternational.leaveDocument = props.data.leaveDocument;
     leaveDraftDocument.value = props.data.leaveDraftDocument;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
@@ -353,19 +345,6 @@ onMounted(() => {
             </q-input>
           </template>
         </datepicker>
-        <!-- <q-input
-							class="col-md-3 col-sm-12"
-							dense
-							outlined
-							ref="leaveTotalRef"
-							for="leaveTotalRef"
-							type="number"
-							v-model="formDataWorkInternational.leaveTotal"
-							label="จำนวนวันที่ลา"
-							readonly
-							:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
-						/> -->
-
         <q-input
           hide-bottom-space
           type="textarea"
@@ -466,9 +445,6 @@ onMounted(() => {
         <div class="row">
           <div class="col-sm-3 q-my-sm">
             <div class="column q-mx-xs">
-              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
-                ดาวน์โหลด
-              </div> -->
               <q-btn
                 color="primary"
                 icon="download"
@@ -481,9 +457,6 @@ onMounted(() => {
           </div>
           <div class="col-sm-5 q-my-sm">
             <div class="column q-mx-xs">
-              <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
-                อัปโหลด
-              </div> -->
               <q-file
                 v-model="formDataWorkInternational.leaveDraftDocument"
                 use-chips
@@ -514,11 +487,6 @@ onMounted(() => {
               />
             </div>
           </div>
-          <!-- <div class="col-md-1 self-end q-mb-sm">
-						<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
-							><q-tooltip>อัปโหลด</q-tooltip></q-btn
-						>
-					</div> -->
         </div>
       </q-card>
     </div>
diff --git a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
index 57393b2..3bb0175 100644
--- a/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
+++ b/src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
@@ -1,33 +1,23 @@
 <script setup lang="ts">
 import { ref, reactive, computed, onMounted, watch } from "vue";
-import type {
-  FormData,
-  FormRef,
-} from "@/modules/05_leave/interface/request/FollowSpouseForm";
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
 import { useQuasar } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm";
 
 /** Use */
 const dataStore = useLeaveStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const router = useRouter();
-const {
-  dialogRemove,
-  date2Thai,
-  arabicNumberToText,
-  calculateDurationYmd,
-  dateToISO,
-  fails,
-  success,
-  messageError,
-} = mixin;
+
+const { date2Thai, calculateDurationYmd, dateToISO, messageError } = mixin;
 const edit = ref<boolean>(true);
-const leaveId = ref<any>("");
+const leaveId = ref<string>("");
 
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
@@ -138,7 +128,6 @@ function onValidate() {
         formData.append("leaveDocument", file);
       });
     }
-    // formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
     formData.append("type", formDataFollowSpouse.type); //
     formData.append(
       "leaveStartDate",
diff --git a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
index 48be58d..cb36a8a 100644
--- a/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
+++ b/src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
@@ -1,35 +1,22 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useLeaveStore } from "@/modules/05_leave/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRouter } from "vue-router";
 import genReport from "@/plugins/genreport";
 
-/** Use */
-const dataStore = useLeaveStore();
 const $q = useQuasar();
+const dataStore = useLeaveStore();
 const mixin = useCounterMixin();
-const {
-  date2Thai,
-  dialogRemove,
-  fails,
-  dateToISO,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
-const router = useRouter();
+const { date2Thai, dateToISO, messageError, showLoader, hideLoader } = mixin;
+
 const edit = ref<boolean>(true);
 const isSave = ref<boolean>(false);
-const files = ref<any>(null);
 const leaveId = ref<any>("");
-
-/** ตัวแปร ref สำหรับแสดง validate */
 const leaveStartDateRef = ref<object | null>(null);
 const leaveEndDateRef = ref<object | null>(null);
 const leaveWroteRef = ref<object | null>(null);
@@ -118,8 +105,6 @@ function onValidate() {
 }
 
 /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
-const nameFile = ref<string>("");
-const nameFileDraft = ref<string>("");
 const fileDocDataUpload = ref<File[]>([]);
 const fileUploadDoc = async (files: any) => {
   files.forEach((file: any) => {
@@ -174,7 +159,7 @@ const dateEndInputStyle = computed(() => {
 /** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
 const leaveDocumentList = ref<any>();
 const leaveDraftDocument = ref<string>();
-const statusCheck = ref<any>("");
+const statusCheck = ref<string>("");
 watch(props.data, () => {
   if (props.data) {
     formDataRehabilitation.leaveWrote = props.data.leaveWrote;
@@ -196,7 +181,6 @@ onMounted(() => {
     formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
     formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
     formDataRehabilitation.leaveDetail = props.data.leaveDetail;
-    // formDataRehabilitation.leaveDocument = props.data.leaveDocument;
     leaveDraftDocument.value = props.data.leaveDraftDocument;
     leaveDocumentList.value = props.data.leaveDocument;
     statusCheck.value = props.data.status;
diff --git a/src/modules/05_leave/components/FormLeave/Form.vue b/src/modules/05_leave/components/FormLeave/Form.vue
index 8000614..0bcd1e6 100644
--- a/src/modules/05_leave/components/FormLeave/Form.vue
+++ b/src/modules/05_leave/components/FormLeave/Form.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { reactive, onMounted } from "vue";
+import { onMounted } from "vue";
+
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
-/**ตัวแปรที่ใช้ */
 const mixin = useCounterMixin();
 const dataStore = useLeaveStore();
 const { date2Thai } = mixin;
@@ -18,20 +16,6 @@ const props = defineProps({
   },
 });
 
-/** ข้อมูล v-model ของฟอร์ม */
-const formData = reactive<FormData>({
-  dateStart: new Date(),
-  subject: "เรื่อง",
-  who: "เรียนผู้ใด",
-  requestName: "ชื่อผู้ยื่น",
-  position: "ตำแหน่ง",
-  level: "ระดับ",
-  ocRequest: "สังกัด",
-  leaveabsentDaySummon: "2",
-  leaveUse: "1",
-  leaveRemaining: "1",
-});
-
 /**Hook */
 onMounted(() => {
   dataStore.typeLeave = "";
diff --git a/src/modules/05_leave/components/ListView.vue b/src/modules/05_leave/components/ListView.vue
index 8eb1073..de3ceaf 100644
--- a/src/modules/05_leave/components/ListView.vue
+++ b/src/modules/05_leave/components/ListView.vue
@@ -1,39 +1,28 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
 import { useRouter, useRoute } from "vue-router";
 
-/** import type*/
-import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
-
-/** import componest*/
-import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
-import Table from "@/modules/05_leave/components/Table.vue";
-
-/** import stort*/
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
+import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
+
+import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
+import Table from "@/modules/05_leave/components/Table.vue";
+
 /**ตัวแปรที่ใช้ */
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  monthYear2Thai,
-  dialogRemove,
-  success,
-} = mixin;
-const LeaveData = useLeaveStore();
-const router = useRouter();
-const route = useRoute();
 const $q = useQuasar();
-const leaveType = ref<LeaveType[]>();
+const mixin = useCounterMixin();
+const router = useRouter();
+const LeaveData = useLeaveStore();
+const { showLoader, hideLoader, messageError, dialogRemove, success } = mixin;
+
 const modal = ref<boolean>(false);
 const leaveId = ref<string>("");
+const leaveType = ref<LeaveType[]>();
 const leaveStatus = ref<string>("");
 
 /** filter */
@@ -91,30 +80,30 @@ async function fectOptionType() {
  * @param id การลา
  * @param status การลา
  */
-const onClickView = async (id: string, status: string) => {
+async function onClickView(id: string, status: string) {
   modal.value = true;
   leaveId.value = id;
   leaveStatus.value = status;
-};
+}
 
 /**
  * function ไปหน้า edit
  * @param id
  */
-const onClickEdit = async (id: string) => {
+async function onClickEdit(id: string) {
   router.push(`/leave/edit/${id}`);
-};
+}
 
 //เเจ้งเตือนลบข้อมูล
-const clickDelete = (id: string) => {
+function clickDelete(id: string) {
   dialogRemove($q, () => onClickDelete(id));
-};
+}
 
 /**
  * function ลบรายการ
  * @param id
  */
-const onClickDelete = async (id: string) => {
+async function onClickDelete(id: string) {
   await http
     .delete(config.API.leaveUserId(id))
     .then(async (res) => {
@@ -124,7 +113,7 @@ const onClickDelete = async (id: string) => {
     .catch((err) => {
       messageError($q, err);
     });
-};
+}
 
 /** function closePopup*/
 async function onClickClose() {
diff --git a/src/modules/05_leave/components/Table.vue b/src/modules/05_leave/components/Table.vue
index ca9c997..133db33 100644
--- a/src/modules/05_leave/components/Table.vue
+++ b/src/modules/05_leave/components/Table.vue
@@ -4,13 +4,11 @@ import { useQuasar } from "quasar";
 
 import { useLeaveStore } from "@/modules/05_leave/store";
 
-/** import stort*/
+const $q = useQuasar();
+const attrs = ref<any>(useAttrs());
 const leaveStore = useLeaveStore();
 const { filterOption } = leaveStore;
 
-const attrs = ref<any>(useAttrs());
-const $q = useQuasar();
-
 /** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   count: Number,
@@ -60,16 +58,15 @@ const pagination = ref({
   rowsPerPage: Number(props.pageSize),
 });
 
+/** filter */
+const year = ref<number>(new Date().getFullYear());
+const filter = ref<string>("");
+
 /** updateVisible*/
 function updateVisible(value: []) {
   emit("update:inputvisible", value);
 }
 
-/** filter */
-const year = ref<number>(new Date().getFullYear());
-
-const filter = ref<string>("");
-
 /** function updateFilter*/
 function filterTable() {
   emit(
diff --git a/src/modules/05_leave/interface/index/main.ts b/src/modules/05_leave/interface/index/main.ts
index 0a4af51..18d57ec 100644
--- a/src/modules/05_leave/interface/index/main.ts
+++ b/src/modules/05_leave/interface/index/main.ts
@@ -45,10 +45,93 @@ interface LeaveItem {
   remain: number;
 }
 
+interface MainList{
+  id: string;
+  leaveTypeName: string;
+  leaveLimit: number;
+  leaveExtend: number;
+  leavePercent: number;
+  leaveCountSend: number;
+  leaveCountApprove: number;
+  leaveCountReject: number;
+  leaveCountDelete: number;
+}
+
+interface LeaveDocument {
+  fileName: string;
+  pathName: string;
+  id: string;
+}
+
+interface FormData {
+  id: string;
+  leaveTypeName: string;
+  leaveTypeId: string;
+  fullname: string;
+  dateSendLeave: Date | null;
+  status: string;
+  leaveStartDate: Date | null;
+  leaveEndDate: Date | null;
+  leaveCount: number;
+  leaveWrote: string;
+  leaveAddress: string;
+  leaveNumber: string;
+  leaveDetail: string;
+  leaveDocument: LeaveDocument[];
+  leaveDraftDocument: string;
+  leaveLastStart: Date | null;
+  leaveLastEnd: Date | null;
+  leaveTotal: number;
+  leavebirthDate: Date | null;
+  leavegovernmentDate: Date | null;
+  leaveSalary: number;
+  leaveSalaryText: string;
+  leaveTypeDay: string;
+  wifeDayName: string;
+  wifeDayDateBorn: Date | null;
+  restDayOldTotal: number;
+  restDayCurrentTotal: number;
+  ordainDayStatus: string;
+  ordainDayLocationName: string;
+  ordainDayLocationAddress: string;
+  ordainDayLocationNumber: string;
+  ordainDayOrdination: Date | null;
+  ordainDayBuddhistLentName: string;
+  ordainDayBuddhistLentAddress: string;
+  hajjDayStatus: string;
+  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;
+  approveStep: string;
+  dear: string;
+  leaveLast: string;
+  leaveRange: string;
+}
+
 export type {
   OptionData,
   FormLeavetMainData,
   formListLeaveData,
   TypeLeave,
   LeaveItem,
+  MainList,
+  FormData
 };
diff --git a/src/modules/05_leave/router.ts b/src/modules/05_leave/router.ts
index 6f9197e..f8e8ca7 100644
--- a/src/modules/05_leave/router.ts
+++ b/src/modules/05_leave/router.ts
@@ -2,13 +2,9 @@
  * Router leave
  */
 const leave = () => import("@/modules/05_leave/views/Main.vue");
-
 const addAbsence = () => import("@/modules/05_leave/views/AddPage.vue");
-
 const editAbsence = () => import("@/modules/05_leave/views/EditPage.vue");
 
-/* const Checkout = () => import("@/modules/04_checkin/views/Checkout.vue");
- */
 export default [
   {
     path: "/leave",
diff --git a/src/modules/05_leave/store.ts b/src/modules/05_leave/store.ts
index be460ef..a6eaf9a 100644
--- a/src/modules/05_leave/store.ts
+++ b/src/modules/05_leave/store.ts
@@ -2,6 +2,10 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+
 import type { QTableProps } from "quasar";
 import type {
   OptionData,
@@ -11,10 +15,7 @@ import type {
   ListLeave,
   ListLeaveTable,
 } from "@/modules/05_leave/interface/response/leave";
-import http from "@/plugins/http";
-import config from "@/app.config";
 
-import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const { date2Thai, messageError } = mixin;
 const $q = useQuasar();
diff --git a/src/modules/05_leave/views/AddPage.vue b/src/modules/05_leave/views/AddPage.vue
index d54c01c..5c41202 100644
--- a/src/modules/05_leave/views/AddPage.vue
+++ b/src/modules/05_leave/views/AddPage.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter, useRoute } from "vue-router";
-import { useLeaveStore } from "@/modules/05_leave/store";
+import { useRouter } from "vue-router";
+import type { QForm } from "quasar";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { QForm } from "quasar";
+import { useLeaveStore } from "@/modules/05_leave/store";
 import { useCounterMixin } from "@/stores/mixin";
 
 import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
@@ -22,19 +23,17 @@ import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_Wo
 import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
 import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
 
-const dataStore = useLeaveStore();
-const { fetchLeaveType } = dataStore;
-const mixin = useCounterMixin();
-const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
-
-const router = useRouter();
-const route = useRoute();
-const myform = ref<QForm | null>(null);
 const $q = useQuasar();
+const router = useRouter();
+const myform = ref<QForm | null>(null);
+const dataStore = useLeaveStore();
+const mixin = useCounterMixin();
+const { fetchLeaveType } = dataStore;
+const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
 
 const model = ref<string>("");
 const modelSpecific = ref<string>("");
-
+const option = ref<any[]>(dataStore.options);
 /**
  * ดึงค่าประเภทการลาจาก Api
  */
@@ -50,13 +49,6 @@ async function fectOptionType() {
     });
 }
 
-function inputEdit(val: boolean) {
-  return {
-    "full-width cursor-pointer ": val,
-    "full-width cursor-pointer inputgreen": !val,
-  };
-}
-
 function onSubmit(postData: FormData, isLeave: boolean = true) {
   if (isLeave) {
     dialogConfirm($q, async () => {
@@ -79,7 +71,6 @@ function onSubmit(postData: FormData, isLeave: boolean = true) {
   }
 }
 
-const option = ref<any[]>(dataStore.options);
 /**
  * function ค้นหาข้อมูลใน option
  * @param val คำค้นหา
diff --git a/src/modules/05_leave/views/EditPage.vue b/src/modules/05_leave/views/EditPage.vue
index 1974b71..24c5756 100644
--- a/src/modules/05_leave/views/EditPage.vue
+++ b/src/modules/05_leave/views/EditPage.vue
@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive, computed } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type { FormData } from "@/modules/05_leave/interface/index/main";
 
-//import form
 import FormPart2 from "@/modules/05_leave/components/FormLeave/Form.vue";
 import SickForm from "@/modules/05_leave/components/FormLeave/01_SickForm.vue";
 import FormBirth from "@/modules/05_leave/components/FormLeave/03_Birth.vue";
@@ -16,23 +24,11 @@ import WorkInternationalForm from "@/modules/05_leave/components/FormLeave/11_Wo
 import FollowSpouseForm from "@/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue";
 import RehabilitationForm from "@/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useLeaveStore } from "@/modules/05_leave/store";
-
+const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
-
-/**
- * ตัวแปรที่ใช้
- */
 const personalId = ref<string>(route.params.id as string);
-const leaveId = ref<string>("");
 const dataStore = useLeaveStore();
-const $q = useQuasar();
 const mixin = useCounterMixin();
 const {
   messageError,
@@ -41,21 +37,19 @@ const {
   dialogConfirm,
   success,
   date2Thai,
-  dateToISO,
   dialogRemove,
 } = mixin;
 
 const titleName = ref<string>("");
-/** Form รายละเอียดข้อมูล*/
-const formData = reactive<any>({
+const formData = reactive<FormData>({
   id: "", //Id การยื่นขอลา
   leaveTypeName: "", // Name ประเภทการลา
   leaveTypeId: "", //Id ประเภทการลา
   fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
   dateSendLeave: null, // วันที่ยืนใบลา
   status: "", //สถานะการของลา
-  leaveDateStart: null, //วันเริ่มการลา
-  leaveDateEnd: null, //วันสิ้นสุดการลา
+  leaveStartDate: null, //วันเริ่มการลา
+  leaveEndDate: null, //วันสิ้นสุดการลา
   leaveCount: 0, //จำนวนวันลา
   leaveWrote: "", //เขียนที่
   leaveAddress: "", //สถานที่ติดต่อขณะลา
@@ -110,6 +104,29 @@ const formData = reactive<any>({
   leaveRange: "",
 });
 
+const model = computed(() => {
+  return (
+    dataStore.options.find((x) => x.id == formData.leaveTypeId)?.code ?? ""
+  );
+});
+const modelSpecific = computed(() => {
+  const code = dataStore.options.find(
+    (x) => x.id == formData.leaveTypeId
+  )?.code;
+
+  if (code == "LV-006" && formData.ordainDayLocationName != "") {
+    return "b1";
+  } else if (code == "LV-006" && formData.ordainDayLocationName == "") {
+    return "b2";
+  } else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
+    return "s1";
+  } else if (code == "LV-008" && formData.studyDayTrainingSubject != "") {
+    return "s2";
+  } else {
+    return "";
+  }
+});
+
 /**
  * function เรียกข้อมูลการลา
  * @param id การลา
@@ -120,9 +137,7 @@ async function fetchDataDetail(id: string) {
     .get(config.API.leaveUserId(id), {})
     .then(async (res) => {
       const data = await res.data.result;
-
       dataStore.typeId = data.leaveTypeId;
-
       titleName.value = data.fullName ?? "-";
       formData.id = data.id ?? "-";
       formData.leaveTypeName = data.leaveTypeName ?? "-";
@@ -193,9 +208,6 @@ async function fetchDataDetail(id: string) {
       formData.dear = data.dear ?? "-";
       formData.leaveLast = data.leaveLast ?? "-";
       formData.leaveRange = data.leaveRange;
-
-      // checkLeaveType(formData.leaveTypeId, formData.leaveTypeName)
-
       dataStore.fetchProfileOld(data);
     })
     .catch((err) => {
@@ -206,30 +218,6 @@ async function fetchDataDetail(id: string) {
     });
 }
 
-/**modal */
-const model = computed(() => {
-  return (
-    dataStore.options.find((x) => x.id == formData.leaveTypeId)?.code ?? ""
-  );
-});
-const modelSpecific = computed(() => {
-  const code = dataStore.options.find(
-    (x) => x.id == formData.leaveTypeId
-  )?.code;
-
-  if (code == "LV-006" && formData.ordainDayLocationName != "") {
-    return "b1";
-  } else if (code == "LV-006" && formData.ordainDayLocationName == "") {
-    return "b2";
-  } else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
-    return "s1";
-  } else if (code == "LV-008" && formData.studyDayTrainingSubject != "") {
-    return "s2";
-  } else {
-    return "";
-  }
-});
-
 /**
  * function บันทึกข้อมูล
  * @param formData  ข้อมูลใน formdata
@@ -259,9 +247,8 @@ function onSubmit(formData: FormData, isLeave: boolean = true) {
 
 /**
  * funciotn ยื่นใบลา
- * @param id id ของใบลา
  */
-function onConfirm(id: string) {
+function onConfirm() {
   dialogConfirm(
     $q,
     async () => {
@@ -277,7 +264,6 @@ function onConfirm(id: string) {
         })
         .finally(() => {
           hideLoader();
-          // fetchDataDetail(personalId.value);
         });
     },
     "ยืนยันการยื่นใบลา",
@@ -286,15 +272,15 @@ function onConfirm(id: string) {
 }
 
 //เเจ้งเตือนลบข้อมูล
-const clickDelete = (id: string, docId: string) => {
+function clickDelete(id: string, docId: string) {
   dialogRemove($q, () => onClickDelete(id, docId));
-};
+}
 
 /**
  * function ลบรายการ
  * @param id
  */
-const onClickDelete = async (id: string, docId: string) => {
+async function onClickDelete(id: string, docId: string) {
   await http
     .delete(config.API.leaveDocumentId(id, docId))
     .then(async (res) => {
@@ -307,7 +293,7 @@ const onClickDelete = async (id: string, docId: string) => {
       fetchDataDetail(personalId.value);
       hideLoader();
     });
-};
+}
 
 /**เมื่อเริ่มโหลดหน้า
  * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
@@ -407,7 +393,7 @@ onMounted(() => {
                 <FormPart2
                   :model="model"
                   :data="formData"
-                  :leaveTypeId="formData.leaveTypeId"
+                  :leave-type-id="formData.leaveTypeId"
                 />
               </div>
             </div>
diff --git a/src/modules/05_leave/views/Main.vue b/src/modules/05_leave/views/Main.vue
index 5ae3e32..8b0b528 100644
--- a/src/modules/05_leave/views/Main.vue
+++ b/src/modules/05_leave/views/Main.vue
@@ -1,29 +1,47 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
 import { useQuasar } from "quasar";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
-import type { LeaveItem } from "@/modules/05_leave/interface/index/main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useLeaveStore } from "@/modules/05_leave/store";
+
+import type {
+  LeaveItem,
+  MainList,
+} from "@/modules/05_leave/interface/index/main";
 import type { QTableProps } from "quasar";
 
 import CalendarView from "@/modules/05_leave/components/Calendar.vue";
 import ListView from "@/modules/05_leave/components/ListView.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
-import { useLeaveStore } from "@/modules/05_leave/store";
-
+const $q = useQuasar();
+const router = useRouter();
 const mixin = useCounterMixin();
 const leaveStore = useLeaveStore();
-const { showLoader, hideLoader, messageError } = mixin;
-
-const router = useRouter();
-const route = useRoute();
-const $q = useQuasar();
+const { messageError } = mixin;
 
+const row = ref<MainList[]>([]);
 const filterLeaveType = ref(["ลาป่วย", "ลากิจส่วนตัว", "ลาพักผ่อน"]);
-
 const itemPie = ref<LeaveItem[]>([]);
+const pagination = ref({ rowsPerPage: 15 });
+const modalStatsTable = ref<boolean>(false);
+
+/**
+ * find ข้อมูลจาก api
+ */
+const filteredItems = computed(() => {
+  return itemPie.value.filter((item) => item.text === "ลาพักผ่อน");
+});
+const filteredSick = computed(() => {
+  return itemPie.value.filter((item) => item.text === "ลาป่วย");
+});
+const filteredBusi = computed(() => {
+  return itemPie.value.filter((item) => item.text === "ลากิจส่วนตัว");
+});
+
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -99,13 +117,9 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px; width:15%;",
   },
 ]);
-const row = ref<any>([]);
-const pagination = ref({ rowsPerPage: 15 });
 
 /** function เรียกข้อมูลตารางสถิติการลา*/
 async function fetchStatsTable() {
-  // modalStatsTable.value = true;
-
   await http
     .get(config.API.leaveStats())
     .then((res) => {
@@ -129,7 +143,7 @@ async function fetchStatsTable() {
       });
       stat.forEach((item) => itemPie.value.push(...item));
 
-      row.value = data.map((e: any) => ({
+      row.value = data.map((e: MainList) => ({
         leaveTypeName: e.leaveTypeName,
         leaveLimit:
           e.leaveTypeName === "ลาพักผ่อน"
@@ -155,7 +169,6 @@ async function fetchStatsTable() {
     });
 }
 
-const modalStatsTable = ref<boolean>(false);
 function onClickOpenStat() {
   modalStatsTable.value = true;
 }
@@ -166,19 +179,6 @@ async function addAbsence() {
   router.push(`/leave/add`);
 }
 
-/**
- * find ข้อมูลจาก api
- */
-const filteredItems = computed(() => {
-  return itemPie.value.filter((item) => item.text === "ลาพักผ่อน");
-});
-const filteredSick = computed(() => {
-  return itemPie.value.filter((item) => item.text === "ลาป่วย");
-});
-const filteredBusi = computed(() => {
-  return itemPie.value.filter((item) => item.text === "ลากิจส่วนตัว");
-});
-
 onMounted(async () => {
   await fetchStatsTable();
 });